浏览代码

修改样式

lex 1 年之前
父节点
当前提交
111ec80d20
共有 2 个文件被更改,包括 63 次插入31 次删除
  1. 3 2
      src/views/co-ai/baseIndex.module.less
  2. 60 29
      src/views/co-ai/baseIndex.tsx

+ 3 - 2
src/views/co-ai/baseIndex.module.less

@@ -121,7 +121,7 @@
   flex: 1;
   // background-color: #FFFFFF;
   border-radius: 18px;
-  padding: 0 0 0 12px;
+  padding: 0 12px;
   background: rgba(255, 255, 255, 0.8);
   border-radius: 18px;
   border: 2px solid rgba(255, 255, 255, 0.9);
@@ -132,6 +132,7 @@
     display: flex;
     flex-wrap: wrap;
     padding-top: 18px;
+    transition: all .3s ease;
     // gap: 0 32px;
     // padding-left: 16px;
     // height: 100%;
@@ -161,7 +162,7 @@
 }
 
 .wrapfirstI {
-  width: 25%;
+  // width: 25%;
 }
 
 .wrapItem {

+ 60 - 29
src/views/co-ai/baseIndex.tsx

@@ -1,7 +1,14 @@
-import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
 import styles from './baseIndex.module.less';
 import icon_back from './image/icon_back.svg';
-import { Button, Tab, Tabs, showConfirmDialog } from 'vant';
+import { Button, Space, Tab, Tabs, showConfirmDialog } from 'vant';
 import {
   api_lessonCoursewareFavoriteRemove,
   api_lessonCoursewareFavoriteSave
@@ -15,6 +22,8 @@ import MEmpty from '@/components/m-empty';
 import MSearch from '@/components/m-search';
 import { api_musicSheetCategoriesPage, api_musicTagTree } from './api';
 import queryString from 'query-string';
+import { useRect } from '@vant/use';
+import { nextTick } from 'process';
 
 export default defineComponent({
   name: 'baseIndex-list',
@@ -45,6 +54,9 @@ export default defineComponent({
       book: {} as DOMRect
     });
 
+    const wrapRef = ref();
+    const wrapItemRef = ref([] as any);
+
     const getTanentList = async () => {
       try {
         const { data } = await api_musicTagTree();
@@ -75,12 +87,27 @@ export default defineComponent({
       }
       data.loading = false;
       isShowGuide.value = true;
+
+      nextTick(() => {
+        // 设置样式
+        const wrap = useRect(wrapRef);
+        const wrapItem = useRect(wrapItemRef.value[0]);
+        if (wrapItem.width > 0) {
+          wrapRef.value.style.width =
+            Math.floor(wrap.width / wrapItem.width) * wrapItem.width + 'px';
+          wrapRef.value.style.margin = '0 auto';
+        }
+      });
     };
     onMounted(async () => {
       data.loading = true;
       await getTanentList();
       await getList();
       data.loading = false;
+
+      // if (wrapItemRef.value && wrapItemRef.length > 0) {
+      //   console.log(wrapItemRef[0], '121');
+      // }
     });
 
     const handleFavorite = async (item: any) => {
@@ -199,36 +226,39 @@ export default defineComponent({
               class={[
                 styles.wrap,
                 data.list.length <= 0 && !data.loading ? styles.emtpyWrap : ''
-              ]}>
+              ]}
+              ref={wrapRef}>
               {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
+                      ref={(el: any) => (wrapItemRef.value[index] = el)}
+                      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) => {
@@ -238,6 +268,7 @@ export default defineComponent({
                       }}>
                       <TheFavorite isFavorite={item.favoriteFlag} />
                     </div> */}
+                    </div>
                   </div>
                 );
               })}