提交一下

1

src/components/col-footer/index.module.less

@@ -1,14 +1,16 @@
 .footerSection {
   overflow: hidden;
   margin: 0 auto;
-  background: #30343E;
+  background: #30343e;
 }
 
 .footerInfo {
   color: #cecece;
-  background:#30343E;
+  background: #30343e;
   padding: 77px 0 35px;
   .width1200 {
+    width: 1200px;
+    margin: 0 auto;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -90,8 +92,28 @@
     color: #cecece;
     line-height: 20px;
     padding-top: 21px;
-    a{
+    a {
       color: #cecece;
     }
   }
 }
+.whileLogo {
+  width: 144px;
+  height: 68px;
+}
+.codeImg {
+  width: 74px;
+  height: 74px;
+}
+.qrcode {
+  margin-right: 34px;
+  p {
+    height: 17px;
+    font-size: 12px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #cecece;
+    margin-top: 15px;
+    text-align: center;
+  }
+}

src/components/col-footer/index.tsx

@@ -2,6 +2,8 @@ import { defineComponent } from 'vue'
 import classes  from './index.module.less'
 import download from '../silder/images/download.png'
 import publicCode from '../silder/images/public-code.jpg'
+import whileLogo from '@/common/images/whileLogo.png'
+import code from '@/common/images/2code.png'
 export default defineComponent({
   name: 'col-footer',
   setup() {
@@ -15,7 +17,8 @@ export default defineComponent({
                   <div class={classes.qrcode} >
                     <div class={classes.qrcodeItem}  style="padding-right:50px">
                       <img
-                        src="../assets/images/logoWhile1.png"
+                      class={classes.whileLogo}
+                        src={whileLogo}
                         width="142px"
                         height="65px"
                         alt=""
@@ -25,7 +28,8 @@ export default defineComponent({
                   <div class={classes.qrcode}>
                     <div class={classes.qrcodeItem}>
                       <img
-                        src={publicCode}
+                         class={classes.codeImg}
+                        src={code}
                         width="74px"
                         height="74px"
                       />
@@ -35,7 +39,8 @@ export default defineComponent({
                   <div class={classes.qrcode}>
                     <div  class={classes.qrcodeItem}>
                       <img
-                        src={download}
+                      class={classes.codeImg}
+                        src={code}
                         width="74px"
                         height="74px"
                       />

src/components/col-header/modals/loganInfo.tsx

@@ -52,16 +52,19 @@ export default defineComponent({
       router.push({ path: val })
     }
     const changeRoute = () => {
-      ElMessageBox.confirm('是否确定切换角色吗？', '提示', {
+      const token = getAuth()
+      let userType = ''
+      let str =''
+      if (states.userType == 'TEACHER') {
+        userType = 'STUDENT'
+        str='学生'
+      } else {
+        userType = 'TEACHER'
+        str='老师'
+      }
+      ElMessageBox.confirm(`是否确定切换到${str}？`, '提示', {
         type: 'warning'
       }).then(() => {
-        const token = getAuth()
-        let userType = ''
-        if (states.userType == 'TEACHER') {
-          userType = 'STUDENT'
-        } else {
-          userType = 'TEACHER'
-        }
         setAuth(
           JSON.stringify({
             token,
@@ -104,7 +107,6 @@ export default defineComponent({
     return (
       <>
         <ElDropdown
-
           onCommand={val => this.changeState(val)}
           v-slots={{
             dropdown: () => (

src/components/hotSearch/index.module.less

@@ -40,14 +40,21 @@
   }
   .searchWrap {
     cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-radius: 2px;
+    border: 1px solid #e5e5e5;
+    padding: 0 8px;
     span {
       color: #666 !important;
-      line-height: 28px;
+      line-height: 24px;
+      font-size: 13px;
     }
     .search {
-      width: 24px;
-      height: 24px;
-      margin-left: 6px;
+      width: 14px;
+      height: 14px;
+      margin-left: 8px;
     }
   }
 }
@@ -55,9 +62,11 @@
 .searchDetail {
   .searchResult {
     // height: 58px;
-    line-height: 58px;
+    line-height: 24px;
     display: flex;
     flex-direction: row;
+    align-items: center;
+    margin-bottom: 18px;
     .resultTitle {
       padding: 0 20px 0 14px;
       display: flex;
@@ -72,39 +81,53 @@
       }
     }
     .tagList {
-      width: 1010px;
+      width: 931px;
       display: flex;
       flex-direction: row;
       align-items: center;
     }
-    .clearBtn {
-      cursor: pointer;
+
+    .searchResultRight {
       display: flex;
       flex-direction: row;
-      align-items: center;
-      font-size: 16px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #666666;
-      .clearIcon {
-        width: 28px;
-        height: 28px;
-        margin-left: 6px;
+      // align-items: center;
+      .clearBtn {
+        margin-left: 8px;
+        line-height: 24px;
+        height: 24px;
+        cursor: pointer;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        border-radius: 2px;
+        border: 1px solid #e5e5e5;
+        padding: 0 8px;
+        span {
+          color: #666 !important;
+          line-height: 24px;
+          font-size: 13px;
+        }
+        .clearIcon {
+          width: 14px;
+          height: 14px;
+          margin-left: 6px;
+        }
       }
     }
   }
   .searchChioseWrap {
     background-color: #fff;
     border-radius: 8px;
-    padding: 20px;
+    padding: 20px 20px 5px;
     .chioseLineWrap {
-      border-bottom: 1px solid #ededed;
+      // border-bottom: 1px solid #ededed;
       .chioseRow {
         display: flex;
         flex-direction: row;
         align-items: center;
+        margin-bottom: 30px;
         p {
-          margin-bottom: 14px;
+          line-height: 48px;
           width: 112px;
           text-align: center;
           margin-right: 5px;
@@ -115,7 +138,8 @@
             position: absolute;
             content: '';
             width: 1px;
-            height: calc(100% - 14px);
+            height: 100%;
+            // height: calc(100% - 14px);
             background: #ededed;
             left: 0;
           }
@@ -125,6 +149,26 @@
             margin-bottom: 14px;
           }
         }
+        .tags {
+          // height: 24px;
+          background: #e0f7f3;
+          line-height: 24px;
+          display: inline-block;
+          margin-right: 40px;
+          color: #2dc7aa;
+          padding: 2px 11px;
+          border-radius: 6px;
+          font-size: 15px;
+        }
+        .tagText {
+          margin-right: 40px;
+          display: inline-block;
+          line-height: 24px;
+
+          font-size: 15px;
+          color: #666;
+          cursor: pointer;
+        }
       }
     }
   }
@@ -141,7 +185,8 @@
   }
 }
 :global {
-  .el-tag--Light,.el-tag--light {
+  .el-tag--Light,
+  .el-tag--light {
     border: 1px solid #2dc7aa;
     font-size: 14px;
     font-family: PingFangSC-Medium, PingFang SC;

src/components/hotSearch/index.tsx

@@ -5,25 +5,28 @@ import tagItem from '@/components/tagItem'
 import hot from './images/hot.png'
 import arrow from '@/components/musicLIstItem/images/arrow.png'
 import search from '@/components/hotSearch/images/search.png'
+
 import request from '@/helpers/request'
+import arrows from './images/arrow.png'
 import clearIcon from './images/clearIcon.png'
 import item from '@/views/user-info/components/item'
 import { useRouter } from 'vue-router'
+import { spawn } from 'child_process'
 export default defineComponent({
   name: 'hotSearch',
   components: { tagItem },
-  emits:['searchRust','hotTag'],
+  emits: ['searchRust', 'hotTag'],
   props: {
     type: {
       type: String,
       default: 'more'
     },
-    searchType:{
+    searchType: {
       type: String,
       default: 'MUSIC'
     }
   },
-  setup(props,conent) {
+  setup(props, conent) {
     const state = reactive({
       hotList: [],
       type: props.type,
@@ -32,12 +35,13 @@ export default defineComponent({
       chioseTagList: [],
       chioseParentList: [],
       searchTagList: [],
-      searchType:props.searchType
+      searchType: props.searchType
     })
     const router = useRouter()
     const getHotList = async () => {
       try {
-        const res = await request.get(`/api-website/open/music/sheet/hotTag/${state.searchType}`
+        const res = await request.get(
+          `/api-website/open/music/sheet/hotTag/${state.searchType}`
         )
 
         state.hotList = res.data
@@ -110,7 +114,8 @@ export default defineComponent({
           }
         })
       })
-      console.log(state.searchTagList, 'searchTagList')
+      // console.log(state.searchTagList, 'searchTagList')
+      searchSubmit()
     }
     const isChiose = (tag: any) => {
       if (tag.isCheck) {
@@ -133,17 +138,17 @@ export default defineComponent({
         })
       })
     }
-    const searchSubmit = ()=>{
+    const searchSubmit = () => {
       // 请求
-      conent.emit('searchRust',state.chioseTagList)
-      state.showDetail = true
+      conent.emit('searchRust', state.chioseTagList)
+      // state.showDetail = true
     }
 
-    const clickHotTag = (key:string)=>{
-      conent.emit('hotTag',key)
+    const clickHotTag = (key: string) => {
+      conent.emit('hotTag', key)
     }
-    const gotoSearch = ()=>{
-      router.push({path:'/searchdetail'})
+    const gotoSearch = () => {
+      router.push({ path: '/searchdetail' })
     }
     onMounted(() => {
       getHotList()
@@ -159,7 +164,14 @@ export default defineComponent({
               <div class={classes.tagWrap}>
                 {state.hotList.map((item: any) => {
                   //
-                  return <tagItem title={item.key} onSearchTag={(key)=>clickHotTag(key)}>{item.key}</tagItem>
+                  return (
+                    <tagItem
+                      title={item.key}
+                      onSearchTag={key => clickHotTag(key)}
+                    >
+                      {item.key}
+                    </tagItem>
+                  )
                 })}
               </div>
             </div>
@@ -170,7 +182,10 @@ export default defineComponent({
               </div>
             ) : null}
             {state.type == 'search' ? (
-              <div class={[classes.wrapRight, classes.searchWrap]} onClick={()=>state.showDetail = false}>
+              <div
+                class={[classes.wrapRight, classes.searchWrap]}
+                onClick={() => (state.showDetail = false)}
+              >
                 <span>筛选</span>
                 <img class={classes.search} src={search} alt="" />
               </div>
@@ -180,7 +195,7 @@ export default defineComponent({
           <div class={classes.searchDetail}>
             <div class={classes.searchResult}>
               <div class={classes.resultTitle}>
-                <span>搜索结果</span>
+                <span>已选类型</span>
                 <img src={arrow} alt="" />
               </div>
               <div class={classes.tagList}>
@@ -190,16 +205,22 @@ export default defineComponent({
                       closable
                       onClose={() => closeChioseTag(item)}
                       class="chioseTag"
-                      size="large"
+
                     >
                       {item.name}
                     </ElTag>
                   )
                 })}
               </div>
-              <div class={classes.clearBtn} onClick={clearSearch}>
-                <span>清空</span>
-                <img src={clearIcon} class={classes.clearIcon} alt="" />
+              <div class={classes.searchResultRight}>
+                <div class={classes.clearBtn} onClick={()=>{state.showDetail = true}}>
+                  <span>收起</span>
+                  <img src={arrows} class={classes.clearIcon} alt="" />
+                </div>
+                <div class={classes.clearBtn} onClick={clearSearch}>
+                  <span>清空</span>
+                  <img src={clearIcon} class={classes.clearIcon} alt="" />
+                </div>
               </div>
             </div>
             <div class={classes.searchChioseWrap}>
@@ -211,16 +232,27 @@ export default defineComponent({
                       <div class={[classes.chioseTagWrap, 'chioseTagWrap']}>
                         {tree.children.map((tag: any) => {
                           return (
-                            <ElTag
-                              class={classes.tags}
-                              size="large"
-                              effect={isChiose(tag)}
-                              onClick={() => {
-                                chioseTag(tag)
-                              }}
-                            >
-                              {tag.name}
-                            </ElTag>
+                            //  effect={isChiose(tag)}
+                            tag.isCheck ? (
+                              <div
+                                class={classes.tags}
+                                onClick={() => {
+                                  chioseTag(tag)
+                                }}
+                              >
+                                {' '}
+                                {tag.name}
+                              </div>
+                            ) : (
+                              <span
+                                onClick={() => {
+                                  chioseTag(tag)
+                                }}
+                                class={classes.tagText}
+                              >
+                                {tag.name}
+                              </span>
+                            )
                           )
                         })}
                       </div>
@@ -228,7 +260,9 @@ export default defineComponent({
                   )
                 })}
               </div>
-              <div class={classes.submitBtn} onClick={searchSubmit}>搜索</div>
+              {/* <div class={classes.submitBtn} onClick={searchSubmit}>
+                搜索
+              </div> */}
             </div>
           </div>
         )}

src/components/searchInput/index.tsx

@@ -41,7 +41,6 @@ export default defineComponent({
     watch(
       () => props.searchVal,
       searchVal => {
-        // console.log(searchVal,'searchVal')
         state.search = searchVal.search?searchVal.search:''
         state.subject = Number(props.searchVal.subject)?Number(props.searchVal.subject):''
       }

src/components/tagItem/index.module.less

@@ -7,7 +7,7 @@
   border: 1px solid #2dc7aa;
   padding: 0 12px;
   font-size: 13px;
-  margin-right: 12px;
+  margin-right: 10px;
   &:last-child{
     margin-right: 0!important;
   }

src/views/albumDetail/index.module.less

@@ -38,7 +38,7 @@
       }
       .albumInfoTopConent {
         h2 {
-          font-size: 26px;
+          font-size: 24px;
           font-family: PingFangSC-Semibold, PingFang SC;
           font-weight: 600;
           color: #000000;
@@ -46,7 +46,7 @@
           margin-bottom: 16px;
         }
         p {
-          font-size: 20px;
+          font-size: 18px;
           font-family: PingFangSC-Regular, PingFang SC;
           font-weight: 400;
           color: #666666;
@@ -151,10 +151,10 @@
           font-weight: 600;
           color: #000000;
           line-height: 30px;
-          font-size: 22px;
+          font-size: 18px;
           img {
-            width: 28px;
-            height: 28px;
+            width: 24px;
+            height: 24px;
             margin-right: 8px;
           }
         }

src/views/downLoad/index.module.less

@@ -2,6 +2,9 @@
   background-color: #fff;
   background: url('./images/downBg.png') no-repeat center;
   background-size: cover;
+  .wall {
+    height: 60px;
+  }
   .container {
     width: 1200px;
     margin: 0 auto;

src/views/downLoad/index.tsx

@@ -5,6 +5,7 @@ import finch from './images/finch.png'
 import demo from './images/demo.png'
 import ios from './images/iosIcon.png'
 import andIcon from './images/andIcon.png'
+import code from '@/common/images/2code.png'
 import { Vue3Lottie } from 'vue3-lottie'
 import 'vue3-lottie/dist/style.css'
 import AstronautJSON  from '@/common/animate/kulexiuyunjiaolian.json'
@@ -18,7 +19,9 @@ export default defineComponent({
   },
   render() {
     return (
+
       <div class={styles.bgWhite}>
+          <div class={styles.wall}></div>
         <div class={styles.container}>
           <div class={styles.imgWrap}>
             <img src={demo} class={styles.demo} alt="" />
@@ -38,7 +41,9 @@ export default defineComponent({
             <div class={styles.codeList}>
               <div class={styles.codeItem}>
                 <h5>学生端APP</h5>
-                <div class={styles.code}></div>
+                <div class={styles.code}>
+                  <img src={code} alt="" />
+                </div>
                 <div class={styles.iconWrap}>
                   <div
                     class={styles.iconItem}
@@ -55,7 +60,9 @@ export default defineComponent({
               </div>
               <div class={styles.codeItem}>
                 <h5>老师端APP</h5>
-                <div class={styles.code}></div>
+                <div class={styles.code}>
+                <img src={code} alt="" />
+                </div>
                 <div class={styles.iconWrap}>
                   <div
                     class={styles.iconItem}

src/views/home/index.module.less

@@ -8,7 +8,7 @@
   margin: 0 auto;
 }
 .section {
-  padding: 34px 0;
+  padding: 44px 0 16px;
   .titleWrap {
     text-align: center;
     margin: 0 auto;
@@ -33,7 +33,7 @@
     flex-direction: row;
     align-items: center;
     flex-wrap: wrap;
-    margin-bottom: 25px;
+    // margin-bottom: 25px;
     margin-top: 25px;
   }
   .videoList {

src/views/muiscDetial/index.module.less

@@ -221,7 +221,7 @@
           width: 67px;
           background: #2dc7aa;
           border-radius: 21px;
-          font-size: 16px;
+          font-size: 14px;
           font-family: PingFangSC-Semibold, PingFang SC;
           color: #ffffff;
           line-height: 30px;
@@ -315,7 +315,7 @@
         justify-content: space-between;
         margin-bottom: 14px;
         h5 {
-          font-size: 22px;
+          font-size: 16px;
           font-weight: 500;
           color: #000000;
           line-height: 30px;

src/views/muiscDetial/modals/musicItem.module.less

@@ -7,7 +7,7 @@
   justify-content: space-between;
   width: 100%;
   border-radius: 12px;
-  margin-bottom: 10px;
+  margin-bottom: 20px;
   cursor: pointer;
   .left {
     display: flex;

src/views/musicLibrary/index.module.less

@@ -47,7 +47,7 @@
     color: #000000;
     line-height: 30px;
   }
-  padding: 34px 0;
+  padding: 34px 0 15px;
   .titleWrap {
     text-align: center;
     margin: 0 auto;
@@ -73,7 +73,7 @@
     align-items: center;
     flex-wrap: wrap;
     margin-bottom: 25px;
-    margin-top: 25px;
+    margin-top: 20px;
   }
   .videoList {
     display: flex;
@@ -109,3 +109,6 @@
     }
   }
 }
+.hotSearch {
+  margin-top: 20px;
+}

src/views/musicLibrary/index.tsx

@@ -93,8 +93,11 @@ export default defineComponent({
                 <h4>热门专辑</h4>
                 <img src={titleDot} class={styles.dotImg} alt="" />
               </div> */}
+
               <searchInput isWhile={false} onStartSearch={(val:any)=>gotoSearch(val)}></searchInput>
+              <div class={styles.hotSearch}>
               <hotSearch onHotTag={(val:string)=>{gotoSearch(val)}} type={''}></hotSearch>
+              </div>
               <h5 class={styles.hotAlbum}>热门专辑</h5>
               <div class={styles.albumList}>
                 {state.albumList.map(item => {

src/views/musicLibrary/modals/searchAlbum.tsx

@@ -69,7 +69,7 @@ export default defineComponent({
       getAlbumList()
     }
     onMounted(() => {
-      getAlbumList()
+      // getAlbumList()
       // getMusicList()
     })
     return {

src/views/musicLibrary/modals/searchMusic.tsx

@@ -90,7 +90,7 @@ export default defineComponent({
     }
     onMounted(() => {
       // getAlbumList()
-      getList(state.search)
+      // getList(state.search)
     })
     return {
       ...toRefs(state),

src/views/musicLibrary/searchdetail.tsx

@@ -5,7 +5,8 @@ import {
   reactive,
   onMounted,
   ref,
-  nextTick
+  nextTick,
+  watch
 } from 'vue'
 import arrow from '@/components/musicLIstItem/images/arrow.png'
 import styles from './index.module.less'
@@ -21,7 +22,6 @@ import 'swiper/css/pagination'
 import 'swiper/css/scrollbar'
 import { ElTabPane, ElTabs } from 'element-plus'
 import { useRoute } from 'vue-router'
-
 export default defineComponent({
   name: 'searchdetail',
   components: {
@@ -93,6 +93,16 @@ export default defineComponent({
         searchMusicRef.value.getList(state.searchs)
       }
     }
+
+    watch(
+      () => state.chiose,
+      chiose => {
+        console.log(chiose)
+        nextTick(() => {
+          search()
+        })
+      }
+    )
     onMounted(() => {
       if (route.query.search) {
         state.searchs.search = route.query.search as string
@@ -103,7 +113,6 @@ export default defineComponent({
       if (route.query.type) {
         state.chiose = route.query.type as string
       }
-      console.log(state.chiose, 'chiose')
       nextTick(() => {
         search()
       })
@@ -116,7 +125,8 @@ export default defineComponent({
       startSearch,
       searchRust,
       searchAlbumRef,
-      searchMusicRef
+      searchMusicRef,
+      search
     }
   },
   render() {
@@ -139,6 +149,7 @@ export default defineComponent({
                   onSearchRust={(val: any) => this.searchRust(val)}
                   onHotTag={(val: string) => {
                     this.searchs.search = val
+                    this.search()
                   }}
                 ></hotSearch>
               </div>

src/views/videoDetailList/index.module.less

@@ -144,7 +144,7 @@
         width: 67px;
         background: #2dc7aa;
         border-radius: 21px;
-        font-size: 16px;
+        font-size: 14px;
         font-family: PingFangSC-Semibold, PingFang SC;
         color: #ffffff;
         line-height: 30px;

src/views/videoDetailList/index.tsx

@@ -57,10 +57,7 @@ export default defineComponent({
       }
     }
 
-    const gotoSearch = (val: string) => {
-      console.log(val)
-      state.searchs.search = val
-    }
+
     const startSearch = (val: any) => {
       state.searchs = {
         ...state.searchs,
@@ -70,6 +67,10 @@ export default defineComponent({
       console.log(val, 'valstartSearch')
       getVideoList()
     }
+    const gotoSearch = (val: string) => {
+      state.searchs.search = val
+      startSearch( state.searchs)
+    }
     onMounted(() => {
       getVideoList()
     })
@@ -81,7 +82,7 @@ export default defineComponent({
             <div class={styles.section}>
               <searchInput
                 isWhile={true}
-                // searchVal={state.searchs.search}
+                searchVal={state.searchs}
                 onStartSearch={(val: any) => {
                   startSearch(val)
                 }}