修改

src/views/co-ai/baseIndex.module.less

@@ -121,8 +121,7 @@
   flex: 1;
   // background-color: #FFFFFF;
   border-radius: 18px;
-  padding: 0;
-  padding-left: 2%;
+  padding: 0 16px;
   background: rgba(255, 255, 255, 0.8);
   border-radius: 18px;
   border: 2px solid rgba(255, 255, 255, 0.9);
@@ -161,16 +160,21 @@
   }
 }
 
+.wrapfirstI {
+  width: 25%;
+}
+
 .wrapItem {
   position: relative;
-  width: 128px;
+  width: 102px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0 12px;
+  padding: 00;
   flex-shrink: 0;
   z-index: 1;
-  margin-bottom: 18px;
+  // margin-bottom: 18px;
+  margin: 0 auto 18px;
 
   .item {
     position: relative;

src/views/co-ai/baseIndex.tsx

@@ -200,33 +200,34 @@ export default defineComponent({
               ]}>
               {data.list.map((item, index) => {
                 return (
-                  <div
-                    class={[
-                      styles.wrapItem,
-                      data.bookData.id === item.id && data.showBook
-                        ? styles.wrapItemHide
-                        : ''
-                    ]}
-                    key={item.key}
-                    onClick={() => onDetail(item)}>
-                    <div class={styles.item}>
-                      <NImage
-                        data-id={item.id}
-                        {...{ id: index == 0 ? 'courseware-0' : '' }}
-                        class={[styles.cover, item.load ? styles.loaded : '']}
-                        objectFit="cover"
-                        src={item.coverImg}
-                        onLoad={() => {
-                          item.load = true;
-                        }}
-                        onError={() => {
-                          item.load = true;
-                        }}
-                      />
-                    </div>
+                  <div class={styles.wrapfirstI}>
+                    <div
+                      class={[
+                        styles.wrapItem,
+                        data.bookData.id === item.id && data.showBook
+                          ? styles.wrapItemHide
+                          : ''
+                      ]}
+                      key={item.key}
+                      onClick={() => onDetail(item)}>
+                      <div class={styles.item}>
+                        <NImage
+                          data-id={item.id}
+                          {...{ id: index == 0 ? 'courseware-0' : '' }}
+                          class={[styles.cover, item.load ? styles.loaded : '']}
+                          objectFit="cover"
+                          src={item.coverImg}
+                          onLoad={() => {
+                            item.load = true;
+                          }}
+                          onError={() => {
+                            item.load = true;
+                          }}
+                        />
+                      </div>
 
-                    <div class={styles.name}>{item.name}</div>
-                    {/* <div
+                      <div class={styles.name}>{item.name}</div>
+                      {/* <div
                       id={index === 0 ? 'courseware-1' : ''}
                       class={styles.favoriteBtn}
                       onClick={(e: Event) => {
@@ -236,6 +237,7 @@ export default defineComponent({
                       }}>
                       <TheFavorite isFavorite={item.favoriteFlag} />
                     </div> */}
+                    </div>
                   </div>
                 );
               })}