修改样式

src/components/layout/layoutTop.tsx

@@ -128,11 +128,7 @@ export default defineComponent({
               displayDirective="show"
               v-slots={{
                 trigger: () => (
-                  <div
-                    class={styles.optons}
-                    onClick={() => {
-                      router.push('/');
-                    }}>
+                  <div class={styles.optons}>
                     <NImage src={classHistoryIcon} previewDisabled></NImage>
                   </div>
                 )

src/components/pagination/index.tsx

@@ -1,6 +1,7 @@
 import { Searchs } from '@/utils/searchs';
 import { NDataTable, NPagination } from 'naive-ui';
 import {
+  PropType,
   computed,
   defineComponent,
   onMounted,
@@ -38,6 +39,10 @@ export default defineComponent({
     },
     checkedRowKeysRef: {
       type: Object
+    },
+    pageSizes: {
+      type: Array as PropType<any>,
+      default: () => [10, 20, 30, 40]
     }
   },
   emits: ['update:page', 'update:pageSize', 'list'],
@@ -162,7 +167,7 @@ export default defineComponent({
         showSizePicker
         pageSize={props.pageSize}
         prefix={() => `共 ${props.pageTotal} 条`}
-        pageSizes={[10, 20, 30, 40]}
+        pageSizes={props.pageSizes}
         onUpdatePage={onUpdatePage}
         onUpdatePageSize={onUpdatePageSize}></NPagination>
     );

src/views/content-information/content-instrument/components/list/index.module.less

@@ -82,7 +82,7 @@
 
   .itemWrap {
     width: calc(100% / 6);
-    padding-bottom: calc(100% / 6 * 0.84913);
+    padding-bottom: calc(100% / 6 * 0.95913);
     position: relative;
 
     .itemWrapBox {
@@ -98,13 +98,17 @@
   .itemCard {
     position: relative;
     cursor: pointer;
+    transition: all .2s ease;
 
     &:hover {
+      transform: scale(1.03);
+      transition: all .2s ease;
+
       .itemImgSection {
         background: linear-gradient(360deg, #DBF1FF 0%, #E7F9FF 100%);
         box-shadow: 2px 2 8px 0px rgba(0, 0, 0, 0.1);
         border-radius: 13px;
-        border: 3px solid rgba(0, 122, 254, 1);
+        // border: 3px solid rgba(0, 122, 254, 1);
         box-sizing: border-box;
         transition: all .2s ease;
       }
@@ -115,30 +119,31 @@
       right: 0;
       top: 0;
       display: inline-block;
-      font-size: 12px;
+      font-size: 12Px;
       font-weight: 600;
       color: #FFFFFF;
-      line-height: 17px;
-      text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
-      line-height: 23px;
-      padding: 0 7px;
+      line-height: 17Px;
+      text-shadow: 2Px 2Px 8Px rgba(0, 0, 0, 0.1);
+      line-height: 23Px;
+      padding: 0 7Px;
       background: linear-gradient(135deg, #02BAFF 0%, #007AFE 100%);
-      box-shadow: 2px 2 8px 0px rgba(0, 0, 0, 0.1);
-      border-radius: 0px 13px 0px 13px;
+      box-shadow: 2Px 2 8Px 0Px rgba(0, 0, 0, 0.1);
+      border-radius: 0Px 13Px 0Px 13Px;
     }
 
     .itemImgSection {
       width: 100%;
-      height: 197px;
+      height: 244px;
       background: linear-gradient(360deg, #DBF1FF 0%, #E7F9FF 100%);
       box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.1);
+
       border-radius: 13px;
       overflow: hidden;
 
       .img {
         width: 100%;
         height: 100%;
-        height: 197px;
+        height: 244px;
 
         display: flex;
 

src/views/content-information/content-instrument/components/list/index.tsx

@@ -27,7 +27,7 @@ export default defineComponent({
       pageTotal: 0,
       pagination: {
         page: 1,
-        rows: 20
+        rows: 18
       },
       searchGroup: {
         type: 'INSTRUMENT', //
@@ -47,7 +47,18 @@ export default defineComponent({
           ...state.pagination,
           ...state.searchGroup
         });
-        state.tableList = data.rows || [];
+        const temp = data.rows || [];
+        temp.forEach((item: any) => {
+          if (
+            item.knowledgeWikiCategories &&
+            item.knowledgeWikiCategories.length
+          ) {
+            item.categories =
+              item.knowledgeWikiCategories[0].knowledgeWikiCategoryTypeName;
+          }
+        });
+        state.tableList = temp || [];
+
         state.pageTotal = Number(data.total);
       } catch {
         //
@@ -89,9 +100,12 @@ export default defineComponent({
                 }}>
                 <div class={styles.itemWrapBox}>
                   <div class={styles.itemCard}>
-                    <span class={styles.itemTag}>
-                      {item.knowledgeWikiCategoryName}
-                    </span>
+                    {item.categories ? (
+                      <span class={styles.itemTag}>{item.categories}</span>
+                    ) : (
+                      ''
+                    )}
+
                     <div class={styles.itemImgSection}>
                       <NImage
                         src={item.avatar}
@@ -118,6 +132,7 @@ export default defineComponent({
           v-model:page={state.pagination.page}
           v-model:pageSize={state.pagination.rows}
           v-model:pageTotal={state.pageTotal}
+          pageSizes={[18, 24, 30, 36]}
           onList={getList}
         />
       </div>

src/views/content-information/content-instrument/components/list/search-group-resources.tsx

@@ -20,7 +20,7 @@ export default defineComponent({
     // const catchStore = useCatchStore();
     const forms = reactive({
       keyword: '',
-      wikiCategoryId: ''
+      wikiCategoryId: props.wikiCategoryId || ''
     });
 
     const onSearch = () => {
@@ -35,8 +35,14 @@ export default defineComponent({
         <div class={[styles.searchCatatory]}>
           <NSpace size="small" class={styles.btnType}>
             <NButton
-              type={forms.wikiCategoryId === '' ? 'primary' : 'default'}
-              secondary={forms.wikiCategoryId === '' ? false : true}
+              type={
+                forms.wikiCategoryId === props.wikiCategoryId
+                  ? 'primary'
+                  : 'default'
+              }
+              secondary={
+                forms.wikiCategoryId === props.wikiCategoryId ? false : true
+              }
               round
               size="small"
               focusable={false}

src/views/content-information/content-instrument/detail.module.less

@@ -103,7 +103,7 @@
   background-color: #fff;
   border-radius: 16px;
 
-  width: 512px;
+  width: 470px;
   min-width: 294px;
   height: 100%;
   overflow-x: hidden;
@@ -128,11 +128,15 @@
       height: 125px;
       overflow: hidden;
       border-radius: 50%;
+
+      img {
+        width: 100%;
+      }
     }
 
     .instrumentName {
       padding: 13px 0 5px;
-      font-size: 18px;
+      font-size: max(18px, 14Px);
       font-weight: 600;
       color: #131415;
       line-height: 25px;
@@ -140,7 +144,7 @@
     }
 
     .instrumentTag {
-      font-size: 13px;
+      font-size: max(13px, 12Px);
       color: #777777;
       line-height: 18px;
     }
@@ -149,17 +153,22 @@
 
 
   .wrapList {
-    width: 512px;
+    width: 470px;
     padding: 0 17px;
     min-width: 294px;
     min-height: 100%;
     // background: #fff;
     border-radius: 16px;
 
+    :global {
+      .n-empty .n-empty__description {
+        font-size: calc(14px, 12Px);
+      }
+    }
 
     .titlec {
       padding: 20px 0;
-      font-size: 18px;
+      font-size: max(18px, 14Px);
       font-weight: 600;
       color: #000000;
       line-height: 25px;
@@ -227,9 +236,8 @@
     position: relative;
     width: 60px;
     height: 60px;
-    border-radius: 8px;
+    border-radius: 18px;
     margin-right: 12px;
-    box-shadow: 0 0 10px 4px rgba(27, 35, 55, .1);
     overflow: hidden;
     flex-shrink: 0;
 
@@ -260,7 +268,7 @@
     align-items: flex-start;
 
     .titleName {
-      font-size: 17px;
+      font-size: calc(17px, 12Px);
       font-weight: 600;
       color: #131415;
       line-height: 28px;
@@ -342,7 +350,7 @@
 
   .musicTitle {
     padding: 27px 27px 13px;
-    font-size: 18px;
+    font-size: max(18px, 14Px);
     font-weight: 600;
     color: #000000;
     line-height: 25px;
@@ -404,8 +412,9 @@
 .changeSizeSection {
   position: absolute;
   right: 10px;
-  bottom: 27px;
+  bottom: 50%;
   width: 35px;
+  transform: translate(0, 50%);
   background: #fff;
   border-radius: 7px;
   display: flex;

src/views/content-information/content-instrument/detail.tsx

@@ -108,11 +108,12 @@ export default defineComponent({
       data.list = res.data.knowledgeWikiResources || [];
       data.list.forEach((item: any) => {
         item.audioFileUrl = item.url;
+        item.musicSheetName = item.name;
       });
       const knowledgeWikiCategories = res.data.knowledgeWikiCategories || [];
       res.data.knowledgeName =
         knowledgeWikiCategories.length > 0
-          ? knowledgeWikiCategories[0].name
+          ? knowledgeWikiCategories[0].knowledgeWikiCategoryTypeName
           : '';
       res.data.intros = res.data.intros.replace(
         /<video/gi,
@@ -165,6 +166,7 @@ export default defineComponent({
                     <NImage
                       class={styles.instrumentImg}
                       src={data.details?.avatar}
+                      objectFit="cover"
                     />
 
                     <p class={styles.instrumentName}>{data.details.name}</p>
@@ -173,7 +175,9 @@ export default defineComponent({
                     </p>
                   </div>
 
-                  <div class={styles.titlec}>代表作</div>
+                  <div class={styles.titlec}>
+                    <i class={styles.icon2}></i>代表作
+                  </div>
 
                   {data.list.map((item: any, index: any) => {
                     return (
@@ -208,7 +212,10 @@ export default defineComponent({
                           </div>
                           <div class={styles.title}>
                             <div class={styles.titleName}>
-                              <TheNoticeBar text={item.name} />
+                              <TheNoticeBar
+                                text={item.name}
+                                style={{ marginRight: '12px' }}
+                              />
                             </div>
                           </div>
 
@@ -252,7 +259,9 @@ export default defineComponent({
               </div>
 
               <div class={styles.musicStaff}>
-                <div class={styles.musicTitle}>乐器简介</div>
+                <div class={styles.musicTitle}>
+                  <i class={styles.icon1}></i>乐器简介
+                </div>
                 <div
                   class={styles.musicContent}
                   v-html={data.details?.intros}

src/views/content-information/content-instrument/index.tsx

@@ -16,7 +16,7 @@ import { api_knowledgeWikiCategoryType_page } from '../api';
 export default defineComponent({
   name: 'content-instrument',
   setup() {
-    const route = useRoute();
+    const tabValue = sessionStorage.getItem('content-instrument-tab');
     const router = useRouter();
     const state = reactive({
       tabValue: '',
@@ -33,7 +33,7 @@ export default defineComponent({
 
         state.categoryList = data.rows || [];
         if (state.categoryList.length) {
-          state.tabValue = 'name-' + state.categoryList[0].id;
+          state.tabValue = tabValue || 'name-' + state.categoryList[0].id;
         }
       } catch {
         //
@@ -63,9 +63,9 @@ export default defineComponent({
               justifyContent="center"
               // animated
               paneWrapperClass={styles.paneWrapperContainer}
-              // onUpdate:value={(val: any) => {
-              //   tab.value = val;
-              // }}
+              onUpdate:value={(val: any) => {
+                sessionStorage.setItem('content-instrument-tab', val);
+              }}
               v-model:value={state.tabValue}>
               {state.categoryList.map((category: any) => (
                 <NTabPane

src/views/content-information/content-knowledge/index.module.less

@@ -124,7 +124,7 @@
     padding: 0 5px;
     cursor: pointer;
     border-radius: 10px;
-    font-size: max(17px, 13px);
+    font-size: max(17px, 13Px);
 
     &:hover {
       background: #F5F6FA;
@@ -180,7 +180,7 @@
 
     &.childItem {
       padding-left: 30px;
-      font-size: 15px;
+      font-size: max(15px, 12Px);
 
       .title {
         color: #131415;
@@ -253,8 +253,9 @@
 .changeSizeSection {
   position: absolute;
   right: 10px;
-  bottom: 27px;
+  bottom: 50%;
   width: 35px;
+  transform: translate(0, 50%);
   background: #fff;
   border-radius: 7px;
   display: flex;

src/views/content-information/content-knowledge/index.tsx

@@ -167,19 +167,23 @@ export default defineComponent({
                         </div>
                       ))}
                     </div>
-                    {!show.value && state.tableList.length <= 0 && <TheEmpty />}
                   </NSpin>
+                  {!show.value && state.tableList.length <= 0 && <TheEmpty />}
                 </div>
               </div>
 
               <div class={styles.musicStaff}>
                 <NSpin show={content.value} ref={musicContentRef}>
-                  {/* <div class={styles.musicTitle}>{state.details?.name}</div> */}
-                  <div
-                    class={styles.musicContent}
-                    v-html={state.details?.desc}
-                    style={{ fontSize: state.fontSize + 'px' }}></div>
+                  {state.details?.desc ? (
+                    <div
+                      class={styles.musicContent}
+                      v-html={state.details?.desc}
+                      style={{ fontSize: state.fontSize + 'px' }}></div>
+                  ) : (
+                    ''
+                  )}
                 </NSpin>
+                {!content.value && !state.details?.desc && <TheEmpty />}
               </div>
 
               <div class={styles.changeSizeSection}>

src/views/content-information/content-music/components/list/index.module.less

@@ -111,6 +111,7 @@
     border: 2px solid #F4F4F4;
 
     &:hover {
+      transform: scale(1.01);
       border: 2px solid rgba(0, 122, 254, 1);
       transition: all .2s ease;
     }
@@ -123,25 +124,41 @@
     .musicBg {
       width: 50px;
       height: 50px;
-      border-radius: 18px;
-
+      border-radius: 8px;
       margin-right: 10px;
     }
 
     .itemName {
       display: flex;
       align-items: center;
+      font-weight: bold;
     }
 
 
     .btn {
-      background: linear-gradient(73deg, #5BECFF 0%, #259CFE 100%) !important;
-      border: none !important;
 
+      margin-left: auto;
+      width: 84px;
+      height: 40px;
+      background: linear-gradient(to right, #44CAFF, #259DFE);
+      border: none !important;
+      padding: 0;
+      font-weight: bold !important;
+      flex-shrink: 0;
+      min-width: 62px;
+      min-height: 30px;
 
       :global {
+        .n-button__content {
+          &>img {
+            margin-left: 10px;
+            width: 9px;
+            height: 12px;
+          }
+        }
+
         .n-button__border {
-          border: none;
+          border: none !important;
         }
       }
 
@@ -173,6 +190,12 @@
   box-shadow: 0px 2 16px 0px rgba(0, 0, 0, 0.08);
   border-radius: 11px;
   --n-option-height: 34px;
+
+  :global {
+    .n-base-select-option__content {
+      width: 80% !important;
+    }
+  }
 }
 
 .spaceSection {
@@ -181,16 +204,34 @@
 
 .textBtn {
   background: #fff;
-  border-radius: 8px;
-  padding: 4px 17px;
-  font-size: 16px;
+  border-radius: 8Px;
+  padding: 4Px 17Px;
+  font-size: max(16px, 13Px);
   color: rgba(0, 0, 0, 0.6);
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+
+  .iconArrow {
+    display: inline-block;
+    margin-left: 8px;
+    width: 8px;
+    height: 5px;
+    background: url('../../../images/icon-arrow2.png') no-repeat center center / contain;
+    transform: rotate(180deg);
+  }
 
   &:hover,
   &.textBtnActive {
     background: #D2ECFF;
-    font-weight: 600;
+    font-weight: 500;
     color: #131415;
   }
+
+  &:hover {
+    .iconArrow {
+      transform: rotate(0deg);
+    }
+  }
 }

src/views/content-information/content-music/components/list/index.tsx

@@ -28,7 +28,7 @@ export default defineComponent({
       pageTotal: 0,
       pagination: {
         page: 1,
-        rows: 20
+        rows: 18
       },
       searchGroup: {
         type: 'MUSIC', //
@@ -58,9 +58,10 @@ export default defineComponent({
 
     const onSearch = async (item: any) => {
       state.pagination.page = 1;
-      const { wikiCategoryIdChild, wikiCategoryId } = item;
+      const { wikiCategoryIdChild, wikiCategoryId, keyword } = item;
       state.searchGroup = Object.assign(state.searchGroup, {
-        wikiCategoryId: wikiCategoryIdChild || wikiCategoryId
+        wikiCategoryId: wikiCategoryIdChild || wikiCategoryId,
+        keyword
       });
       getList();
     };
@@ -124,6 +125,7 @@ export default defineComponent({
           v-model:page={state.pagination.page}
           v-model:pageSize={state.pagination.rows}
           v-model:pageTotal={state.pageTotal}
+          pageSizes={[18, 24, 30, 36]}
           onList={getList}
         />
       </div>

src/views/content-information/content-music/components/list/search-group-resources.tsx

@@ -20,7 +20,7 @@ export default defineComponent({
     // const catchStore = useCatchStore();
     const forms = reactive({
       keyword: '',
-      wikiCategoryId: '',
+      wikiCategoryId: props.wikiCategoryId || '',
       wikiCategoryIdChild: '',
       childIds: [] as any
     });
@@ -48,10 +48,19 @@ export default defineComponent({
       if (child && child.childrenList.length) {
         child.childrenList.forEach((child: any) => {
           const i = child.childrenList;
-          i.forEach((j: any) => {
-            j.label = j.name;
-            j.value = j.id;
-          });
+          if (i && i.length > 0) {
+            i.forEach((j: any) => {
+              j.label = j.name;
+              j.value = j.id;
+            });
+
+            i.unshift({
+              label: '全部',
+              value: child.id,
+              name: child.name,
+              id: child.id
+            });
+          }
         });
 
         return (
@@ -70,7 +79,6 @@ export default defineComponent({
       return [];
     });
 
-    console.log(props.categoryChildList, 'categoryChildList');
     return () => (
       <div class={styles.searchGroup}>
         <div
@@ -80,8 +88,14 @@ export default defineComponent({
           ]}>
           <NSpace size="small" class={styles.btnType}>
             <NButton
-              type={forms.wikiCategoryId === '' ? 'primary' : 'default'}
-              secondary={forms.wikiCategoryId === '' ? false : true}
+              type={
+                forms.wikiCategoryId === props.wikiCategoryId
+                  ? 'primary'
+                  : 'default'
+              }
+              secondary={
+                forms.wikiCategoryId === props.wikiCategoryId ? false : true
+              }
               round
               size="small"
               focusable={false}
@@ -109,7 +123,7 @@ export default defineComponent({
           </NSpace>
           <TheSearch
             class={styles.inputSearch}
-            placeholder="请输入曲目鉴赏关键词"
+            placeholder="请输入名曲鉴赏关键词"
             round
             onSearch={(val: string) => {
               forms.keyword = val;
@@ -126,7 +140,7 @@ export default defineComponent({
                   {music.childrenList.length > 0 ? (
                     <NPopselect
                       options={music.childrenList}
-                      trigger="click"
+                      trigger="hover"
                       v-model:value={forms.wikiCategoryIdChild}
                       onUpdate:value={() => {
                         onSearch();
@@ -141,6 +155,7 @@ export default defineComponent({
                         ]}>
                         {selectChildObj(music.childrenList, index).name ||
                           music.name}
+                        <i class={styles.iconArrow}></i>
                       </span>
                     </NPopselect>
                   ) : (

src/views/content-information/content-music/detail.module.less

@@ -103,7 +103,7 @@
   background-color: #fff;
   border-radius: 16px;
 
-  width: 512px;
+  width: 470px;
   min-width: 294px;
   height: 100%;
   overflow-x: hidden;
@@ -132,7 +132,7 @@
 
     .instrumentName {
       padding: 13px 0 5px;
-      font-size: 18px;
+      font-size: max(18px, 14Px);
       font-weight: 600;
       color: #131415;
       line-height: 25px;
@@ -140,7 +140,7 @@
     }
 
     .instrumentTag {
-      font-size: 13px;
+      font-size: max(13px, 12Px);
       color: #777777;
       line-height: 18px;
     }
@@ -149,17 +149,23 @@
 
 
   .wrapList {
-    width: 512px;
+    width: 470px;
     padding: 0 17px;
     min-width: 294px;
     min-height: 100%;
     // background: #fff;
     border-radius: 16px;
 
+    :global {
+      .n-empty .n-empty__description {
+        font-size: calc(14px, 12Px);
+      }
+    }
+
 
     .titlec {
       padding: 20px 0;
-      font-size: 18px;
+      font-size: max(18px, 14Px);
       font-weight: 600;
       color: #000000;
       line-height: 25px;
@@ -227,9 +233,9 @@
     position: relative;
     width: 60px;
     height: 60px;
-    border-radius: 8px;
+    border-radius: 18px;
     margin-right: 12px;
-    box-shadow: 0 0 10px 4px rgba(27, 35, 55, .1);
+    // box-shadow: 0 0 10px 4px rgba(27, 35, 55, .1);
     overflow: hidden;
     flex-shrink: 0;
 
@@ -260,7 +266,7 @@
     align-items: flex-start;
 
     .titleName {
-      font-size: 17px;
+      font-size: calc(17px, 12Px);
       font-weight: 600;
       color: #131415;
       line-height: 28px;
@@ -330,7 +336,7 @@
   flex: 1;
   background-color: #fff;
   border-radius: 16px;
-  // height: 100%;
+  padding-bottom: 18px;
   z-index: 1;
   overflow: hidden;
 
@@ -342,7 +348,7 @@
 
   .musicTitle {
     padding: 27px 27px 13px;
-    font-size: 18px;
+    font-size: max(18px, 14Px);
     font-weight: 600;
     color: #000000;
     line-height: 25px;
@@ -404,8 +410,9 @@
 .changeSizeSection {
   position: absolute;
   right: 10px;
-  bottom: 27px;
+  bottom: 50%;
   width: 35px;
+  transform: translate(0, 50%);
   background: #fff;
   border-radius: 7px;
   display: flex;

src/views/content-information/content-music/detail.tsx

@@ -110,6 +110,7 @@ export default defineComponent({
       data.list = res.data.knowledgeWikiResources || [];
       data.list.forEach((item: any) => {
         item.audioFileUrl = item.url;
+        item.musicSheetName = item.name;
       });
       const knowledgeWikiCategories = res.data.knowledgeWikiCategories || [];
       res.data.knowledgeName =
@@ -173,8 +174,16 @@ export default defineComponent({
                     <div class={styles.info}>
                       <div class={styles.name}>{data.details.name}</div>
                       <div class={styles.c}>
-                        <span>作曲：{data.details.composers}</span>
-                        <span>作词：{data.details.lyricists}</span>
+                        {data.details.composers ? (
+                          <span>作曲：{data.details.composers}</span>
+                        ) : (
+                          ''
+                        )}
+                        {data.details.lyricists ? (
+                          <span>作词：{data.details.lyricists}</span>
+                        ) : (
+                          ''
+                        )}
                       </div>
                     </div>
                   </div>
@@ -187,10 +196,7 @@ export default defineComponent({
                     return (
                       <div class={styles.itemContainer}>
                         <div
-                          class={[
-                            styles.item
-                            // data.listActive === index && styles.active
-                          ]}
+                          class={[styles.item]}
                           onClick={(e: Event) => {
                             e.stopPropagation();
                             handlePlay(item);
@@ -216,7 +222,10 @@ export default defineComponent({
                           </div>
                           <div class={styles.title}>
                             <div class={styles.titleName}>
-                              <TheNoticeBar text={item.name} />
+                              <TheNoticeBar
+                                text={item.name}
+                                style={{ marginRight: '12px' }}
+                              />
                             </div>
                           </div>
 
@@ -253,7 +262,9 @@ export default defineComponent({
                   )}
                   {!data.loading && data.list.length === 0 && (
                     <div class={styles.empty}>
-                      <TheEmpty description="暂无名曲鉴赏"></TheEmpty>
+                      <TheEmpty
+                        description="暂无名曲鉴赏"
+                        style={{ paddingTop: '0px' }}></TheEmpty>
                     </div>
                   )}
                 </div>

src/views/content-information/content-music/index.tsx

@@ -8,7 +8,6 @@ import {
 import { defineComponent, reactive } from 'vue';
 import styles from './index.module.less';
 import icon_back from '../../xiaoku-music/images/icon_back.png';
-// import icon_separator from '../../xiaoku-music/images/icon_separator.png';
 import { useRouter } from 'vue-router';
 import List from './components/list';
 import { api_knowledgeWikiCategoryType_page } from '../api';
@@ -17,6 +16,7 @@ import { api_knowledgeWikiCategoryType_page } from '../api';
 export default defineComponent({
   name: 'content-music',
   setup() {
+    const tabValue = sessionStorage.getItem('content-music-tab');
     const router = useRouter();
     const state = reactive({
       tabValue: '',
@@ -33,7 +33,7 @@ export default defineComponent({
 
         state.categoryList = data.rows || [];
         if (state.categoryList.length) {
-          state.tabValue = 'name-' + state.categoryList[0].id;
+          state.tabValue = tabValue || 'name-' + state.categoryList[0].id;
         }
       } catch {
         //
@@ -51,7 +51,7 @@ export default defineComponent({
             onClick={() => router.push({ path: '/' })}
           />
           <NBreadcrumb separator="">
-            <NBreadcrumbItem>曲目鉴赏</NBreadcrumbItem>
+            <NBreadcrumbItem>名曲鉴赏</NBreadcrumbItem>
           </NBreadcrumb>
         </NSpace>
 
@@ -62,7 +62,10 @@ export default defineComponent({
               paneClass={styles.paneTitle}
               justifyContent="center"
               paneWrapperClass={styles.paneWrapperContainer}
-              v-model:value={state.tabValue}>
+              v-model:value={state.tabValue}
+              onUpdate:value={(val: any) => {
+                sessionStorage.setItem('content-music-tab', val);
+              }}>
               {state.categoryList.map((category: any) => (
                 <NTabPane
                   name={`name-${category.id}`}

src/views/content-information/content-musician/components/list/index.module.less

@@ -82,7 +82,7 @@
 
   .itemWrap {
     width: calc(100% / 6);
-    padding-bottom: calc(100% / 6 * 0.8755555);
+    padding-bottom: calc(100% / 6 * 1.1355555);
     position: relative;
 
     .itemWrapBox {
@@ -98,13 +98,17 @@
   .itemCard {
     position: relative;
     cursor: pointer;
+    transition: all .2s ease;
 
     &:hover {
+      transform: scale(1.03);
+      transition: all .2s ease;
+
       .itemImgSection {
         background: linear-gradient(360deg, #DBF1FF 0%, #E7F9FF 100%);
         box-shadow: 2px 2 8px 0px rgba(0, 0, 0, 0.1);
         border-radius: 13px;
-        border: 3px solid rgba(0, 122, 254, 1);
+        // border: 3px solid rgba(0, 122, 254, 1);
         box-sizing: border-box;
         transition: all .2s ease;
       }
@@ -129,7 +133,7 @@
 
     .itemImgSection {
       width: 100%;
-      height: 225px;
+      height: 305px;
       background: linear-gradient(360deg, #DBF1FF 0%, #E7F9FF 100%);
       box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.1);
       border-radius: 13px;
@@ -141,7 +145,7 @@
       .img {
         width: 100%;
         height: 100%;
-        height: 225px;
+        height: 305px;
         display: flex;
 
         img {

src/views/content-information/content-musician/components/list/index.tsx

@@ -27,7 +27,7 @@ export default defineComponent({
       pageTotal: 0,
       pagination: {
         page: 1,
-        rows: 20
+        rows: 18
       },
       searchGroup: {
         type: 'MUSICIAN', //
@@ -47,7 +47,17 @@ export default defineComponent({
           ...state.pagination,
           ...state.searchGroup
         });
-        state.tableList = data.rows || [];
+        const temp = data.rows || [];
+        temp.forEach((item: any) => {
+          if (
+            item.knowledgeWikiCategories &&
+            item.knowledgeWikiCategories.length
+          ) {
+            item.categories =
+              item.knowledgeWikiCategories[0].knowledgeWikiCategoryTypeName;
+          }
+        });
+        state.tableList = temp || [];
         state.pageTotal = Number(data.total);
       } catch {
         //
@@ -90,9 +100,12 @@ export default defineComponent({
                 }}>
                 <div class={styles.itemWrapBox}>
                   <div class={styles.itemCard}>
-                    <span class={styles.itemTag}>
-                      {item.knowledgeWikiCategoryName}
-                    </span>
+                    {item.categories ? (
+                      <span class={styles.itemTag}>{item.categories}</span>
+                    ) : (
+                      ''
+                    )}
+
                     <div class={styles.itemImgSection}>
                       <NImage
                         src={item.avatar}
@@ -119,6 +132,7 @@ export default defineComponent({
           v-model:page={state.pagination.page}
           v-model:pageSize={state.pagination.rows}
           v-model:pageTotal={state.pageTotal}
+          pageSizes={[18, 24, 30, 36]}
           onList={getList}
         />
       </div>

src/views/content-information/content-musician/components/list/search-group-resources.tsx

@@ -20,7 +20,7 @@ export default defineComponent({
     // const catchStore = useCatchStore();
     const forms = reactive({
       keyword: '',
-      wikiCategoryId: ''
+      wikiCategoryId: props.wikiCategoryId || ''
     });
 
     const onSearch = () => {
@@ -35,8 +35,14 @@ export default defineComponent({
         <div class={[styles.searchCatatory]}>
           <NSpace size="small" class={styles.btnType}>
             <NButton
-              type={forms.wikiCategoryId === '' ? 'primary' : 'default'}
-              secondary={forms.wikiCategoryId === '' ? false : true}
+              type={
+                forms.wikiCategoryId === props.wikiCategoryId
+                  ? 'primary'
+                  : 'default'
+              }
+              secondary={
+                forms.wikiCategoryId === props.wikiCategoryId ? false : true
+              }
               round
               size="small"
               focusable={false}

src/views/content-information/content-musician/index.tsx

@@ -16,6 +16,7 @@ import { api_knowledgeWikiCategoryType_page } from '../api';
 export default defineComponent({
   name: 'content-musician',
   setup() {
+    const tabValue = sessionStorage.getItem('content-musician-tab');
     const router = useRouter();
     const state = reactive({
       tabValue: '',
@@ -32,7 +33,7 @@ export default defineComponent({
 
         state.categoryList = data.rows || [];
         if (state.categoryList.length) {
-          state.tabValue = 'name-' + state.categoryList[0].id;
+          state.tabValue = tabValue || 'name-' + state.categoryList[0].id;
         }
       } catch {
         //
@@ -62,9 +63,9 @@ export default defineComponent({
               justifyContent="center"
               // animated
               paneWrapperClass={styles.paneWrapperContainer}
-              // onUpdate:value={(val: any) => {
-              //   tab.value = val;
-              // }}
+              onUpdate:value={(val: any) => {
+                sessionStorage.setItem('content-musician-tab', val);
+              }}
               v-model:value={state.tabValue}>
               {state.categoryList.map((category: any) => (
                 <NTabPane

src/views/home/index.module.less

@@ -20,9 +20,9 @@
   position: relative;
   background: url('./img/left-bg.png') no-repeat top center #FFFFFF;
   background-size: cover;
-  border-radius: 10px;
+  border-radius: 20px;
   padding: 63px 22px 22px;
-  width: 500px;
+  width: 540px;
   min-height: 690px;
   flex-shrink: 0;
 
@@ -57,7 +57,7 @@
 
   .desc {
     padding: 12px 34px 30px;
-    font-size: 15px;
+    font-size: 13Px;
     color: rgba(0, 0, 0, 0.7);
     line-height: 25px;
     letter-spacing: 1px;
@@ -103,7 +103,7 @@
   }
 
   .userName {
-    font-size: 22px;
+    font-size: 18Px;
     color: #131415;
     line-height: 29px;
     font-weight: bold;
@@ -130,7 +130,7 @@
   }
 
   .btnClass {
-    margin-left: 8px;
+    margin-left: 12px;
   }
 
   .btnBk {
@@ -199,7 +199,7 @@
 
   .topSection1 {
     background: linear-gradient(135deg, #99BBFF 0%, #9CA6FF 20%, #A5A1FF 50%, #C686FF 100%);
-    border-radius: 17px;
+    border-radius: 20px;
 
     &:hover {
       box-shadow: 5px 5px 17px 0px #DCCBFF;
@@ -211,7 +211,7 @@
   .topSection2 {
     background: linear-gradient(135deg, #FFA891 0%, #FF8EAB 22%, #FF96AE 50%, #FF7DAA 67%, #FF7ABC 100%);
 
-    border-radius: 17px;
+    border-radius: 20px;
 
     &:hover {
       box-shadow: 5px 5px 17px 0px #FFBBD5;
@@ -244,7 +244,7 @@
     padding-top: 28px;
     flex: 1;
     background: linear-gradient(135deg, #F4FDFF 0%, #E5E2FF 100%);
-    border-radius: 17px;
+    border-radius: 20px;
     text-align: center;
     transition: all .2s ease;
 

src/views/home/index2.module.less

@@ -649,10 +649,11 @@
         :global {
           .n-base-selection {
             --n-height: 35px !important;
-            --n-font-size: 15px !important;
+            --n-font-size: 18px !important;
             --n-border: 1px solid #DEDEDE !important;
             --n-border-radius: 8px !important;
             max-width: 130px;
+            font-size: 12Px;
           }
         }
       }
@@ -693,7 +694,7 @@
     width: 100%;
     text-align: center;
     color: #1677FF;
-    font-size: 16px;
+    font-size: max(16px, 13Px);
 
     &::after {
       content: ' ';
@@ -712,7 +713,7 @@
   .teachGroupTitle {
     position: relative;
     left: -10px;
-    font-size: 14px;
+    font-size: max(14px, 12Px);
     font-weight: 400;
     color: #aaaaaa;
     width: 60px;
@@ -782,13 +783,13 @@
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
-        font-size: 16px;
+        font-size: max(16px, 12Px);
         margin-top: 2px;
         font-weight: 600;
         color: #131415;
 
         span {
-          font-size: 13px;
+          font-size: max(13px, 12Px);
           font-weight: 400;
           color: #1677ff;
           line-height: 18px;
@@ -796,13 +797,13 @@
       }
 
       .teachGroupItemInfo {
-        font-size: 13px;
+        font-size: max(13px, 12Px);
         line-height: 26px;
         color: rgba(0, 0, 0, 0.5);
       }
 
       .subjectName {
-        font-size: 14px;
+        font-size: max(14px, 12Px);
         font-weight: 400;
         color: #FFFFFF;
         background: #198CFE;

src/views/home/modals/class-modal/index.module.less

@@ -37,7 +37,7 @@
       :global {
         .n-base-selection {
           --n-height: 35px !important;
-          --n-font-size: 15px !important;
+          --n-font-size: 12Px !important;
           --n-border: 1px solid #DEDEDE !important;
           --n-border-radius: 8px !important;
           max-width: 150px;
@@ -80,7 +80,7 @@
     width: 100%;
     text-align: center;
     color: #1677FF;
-    font-size: 16px;
+    font-size: max(16px, 13Px);
 
     &::after {
       content: ' ';
@@ -99,7 +99,7 @@
   .teachGroupTitle {
     position: relative;
     left: -10px;
-    font-size: 14px;
+    font-size: 14Px;
     font-weight: 400;
     color: #aaaaaa;
     width: 60px;