提交一下

1

src/components/banner/index.module.less

@@ -51,6 +51,8 @@
       }
     }
     .swiper-pagination {
+      // height: 6px;
+      // background-color: #fff;
       bottom: 31px !important;
     }
     .swiper-pagination-bullet-active {

src/components/banner/index.tsx

@@ -31,7 +31,7 @@ export default defineComponent({
       // console.log(swiper)
     }
     const onSlideChange = () => {
-      console.log('slide change')
+      // console.log('slide change')
     }
     const getBannerList = async () => {
       try {
@@ -62,6 +62,7 @@ export default defineComponent({
             class={[classes.mySwiper, 'mySwiper']}
             slides-per-view={1}
             space-between={0}
+            pagination={{  clickable: true }}
             autoplay={{
               delay: 3000,
               disableOnInteraction: false,
@@ -69,7 +70,7 @@ export default defineComponent({
               pauseOnMouseEnter: true,
               reverseDirection: true
             }}
-            pagination={{ clickable: true }}
+
             navigation={{
               nextEl: '.myprev',
               prevEl: '.mynext'

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

@@ -113,8 +113,8 @@
   }
 }
 .whileLogo {
-  width: 144px;
-  height: 68px;
+  width: 204px;
+  height: 63px;
 }
 .codeImg {
   width: 98px;
@@ -123,8 +123,15 @@
   border-radius: 8px;
   border: 1px solid #979797;
 }
+.qrcodeWrap {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 .qrcode {
-  margin-right: 34px;
+  margin-right: 30px;
+  &:nth-last-child(1){
+    margin-right: 0px;
+  }
   p {
     line-height: 25px;
     font-size: 18px;
@@ -135,3 +142,4 @@
     text-align: center;
   }
 }
+}

src/components/col-footer/index.tsx

@@ -2,7 +2,7 @@ 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 whileLogo from './images/footLogo.png'
 import studentCode from '@/common/images/studentCode.png'
 import teacherCode from '@/common/images/teacherCode.png'
 import weixinCode from '@/common/images/weixinCode.jpg'
@@ -32,7 +32,6 @@ export default defineComponent({
                       <span>（周一至周五 09:00~21:00）</span>
                     </div>
                   </div>
-
                 </div>
                 <div class={classes.friendShip}>
                   <div class={classes.lineWrap}>
@@ -54,39 +53,26 @@ export default defineComponent({
                     </div>
                   </div>
                 </div>
-                <div class={classes.qrcode}>
+                <div class={classes.qrcodeWrap}>
+                  <div class={classes.qrcode}>
                     <div class={classes.qrcodeItem}>
-                    <p>公众号</p>
-                      <img
-                        class={classes.codeImg}
-                        src={weixinCode}
-
-                      />
-
+                      <p>公众号</p>
+                      <img class={classes.codeImg} src={weixinCode} />
                     </div>
                   </div>
-                <div class={classes.qrcode}>
+                  <div class={classes.qrcode}>
                     <div class={classes.qrcodeItem}>
-                    <p>酷乐秀</p>
-                      <img
-                        class={classes.codeImg}
-                        src={studentCode}
-
-                      />
-
+                      <p>酷乐秀</p>
+                      <img class={classes.codeImg} src={studentCode} />
                     </div>
                   </div>
                   <div class={classes.qrcode}>
-                  <p>酷乐秀学院</p>
+                    <p>酷乐秀学院</p>
                     <div class={classes.qrcodeItem}>
-                      <img
-                        class={classes.codeImg}
-                        src={teacherCode}
-
-                      />
-
+                      <img class={classes.codeImg} src={teacherCode} />
                     </div>
                   </div>
+                </div>
               </div>
             </div>
             <div class={classes.footerCoptyright}>

src/components/col-header/index.css

@@ -1,8 +1,10 @@
-.el-menu-item {}
-
 .topNav {
   /* @apply bg-black/[.2] */
-  background: rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.mr160 {
+  margin-right: 140px;
 }
 
 .wall {
@@ -18,8 +20,92 @@
   overflow: hidden;
 }
 
-.normalItem {
+.top.headerSection {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  position: fixed;
+  width: 100%;
+  top: 0px;
+  z-index: 1200;
+  height: 72px;
+  line-height: 72px;
+  background-color: rgba(0, 0, 0, 0.2) !important;
+  animation:none;
+  border-bottom: none;
+
+  /* animation-name: navAnimat;
+  animation-duration: 1s;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards; */
+
+}
+
+.isdark.headerSection {
+  background-color: #252627!important;
+  animation:none;
+  /* isdark */
+}
+.isdark .normalItem {
   color: #fff;
+
+}
+.headerSection {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  position: fixed;
+  width: 100%;
+  top: 0px;
+  z-index: 1200;
+  height: 72px;
+  line-height: 72px;
+  animation-name: navAnimat;
+  animation-duration: .4s;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+  background-color: #fff;
+  border-bottom: 1px solid #EAEAEA;
+
+}
+
+.top .normalItem {
+  color: #fff;
+
+}
+
+@keyframes navAnimat {
+  0% {
+    opacity: 0;
+
+  }
+  25% {
+    opacity: .25;
+
+  }
+  50% {
+    opacity: .5;
+
+  }
+  100% {
+    opacity: 1;
+    /* opacity: 1; */
+
+  }
+}
+
+.top {
+  background-color: rgba(0, 0, 0, 0.2) !important;
+}
+
+.top.header-container {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.normalItem {
+  color: #333;
 }
 
 .activeItem {
@@ -30,29 +116,64 @@
 .activeItem::after {
   position: absolute;
   content: "";
-  top: 37px;
   left: 51%;
   width: 102%;
   height: 3px;
   margin-left: -51%;
   background-color: var(--theme-color);
   z-index: 100;
-  transform: scaleX(1);
-  transition: all .2s;
+  /* transform: scaleX(0);
   transform-origin: left;
+  transition: transform .15s ease; */
+  animation-name: showLine;
+  animation-duration: .15s;
+  animation-timing-function: linear;
+  animation-direction: alternate;
+  animation-fill-mode: forwards;
   border-radius: 2px;
+  bottom: 14px;
 }
 
-.activeItem:active::after {
-  transform: scaleX(0);
+@keyframes showLine {
+  0% {
+    width: 0%;
+
+  }
+
+  25% {
+    width: 25%;
+    /* transform: scale(.25); */
+
+  }
+
+  50% {
+    width: 50%;
+    /* transform: scale(.5); */
+
+  }
+
+  100% {
+    width: 102%;
+    /* transform: scale(1); */
+  }
 }
 
+/* .activeItem::after {
+  transform: scaleX(1) !important;
+} */
+
+/* .activeItem:active::after {
+  transform: scaleX(1) !important;
+} */
+
 .itemCenter {
   position: relative;
   margin-right: 40px;
   line-height: 72px;
+  height: 72px;
   font-size: 20px;
   font-weight: 500;
+  display: inline-block;
 
 }
 
@@ -63,23 +184,7 @@
   z-index: 1200;
 }
 
-.headerSection {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  background-color: rgba(30, 31, 34, .4);
-  position: fixed;
-  width: 100%;
-  top: 0px;
-  z-index: 1200;
-  height: 72px;
-  line-height: 72px;
-}
 
-.isdark.headerSection {
-  background-color: rgba(30, 31, 34, .4) !important;
-}
 
 .rightWrap {
   margin-right: 44px;
@@ -93,13 +198,6 @@
   font-size: 16px;
 }
 
-.top {
-  background-color: rgba(0, 0, 0, 0.2) !important;
-}
-
-.top.header-container {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-}
 
 .wall {
   height: 60px;

src/components/col-header/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent } from 'vue'
 import { ElButton } from 'element-plus'
 import './index.css'
 import logo from './images/logo.png'
+import whileLogo from './images/whileLogo.png'
 import { state } from '@/state'
 import { RouterLink } from 'vue-router'
 import { getAuth, getUserType } from '@/helpers/utils'
@@ -80,9 +81,12 @@ export default defineComponent({
 
           <div class="flex items-center h-full">
           <div class="logoWrap" onClick={() => this.gotoMain()}>
-            <img class="w-full" src={logo} alt="" />
+            <img class="w-full" src={ (this.isdark||!this.isTop)?logo:whileLogo} alt="" />
           </div>
-            <div class="flex">
+
+          </div>
+          <div class={['rightWrap','flex','items-center']}>
+          <div class="flex mr160">
               {this.navigator.map((item: any) => (
                 <div
                 // onClick={() => {
@@ -104,8 +108,6 @@ export default defineComponent({
                 </div>
               ))}
             </div>
-          </div>
-          <div class={'rightWrap'}>
             {!this.isLogin ? (
               <ElButton
                 type="primary"

src/components/searchInput/index.module.less

@@ -1,157 +1,69 @@
 .wrap {
   // margin-bottom: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border: 1px solid #2dc7aa;
+  padding: 0 10px 0 20px;
+  line-height: 54px;
+  height: 54px;
+  background: #fff;
+  border-radius: 30px;
+  overflow: hidden;
+
+  // .inputSelect {
   :global {
-    .inputSelect {
-      .el-input__wrapper.is-focus {
-        border: none !important;
-        box-shadow: none !important;
-        &:hover {
-          .el-input__wrapper {
-            border: none !important;
-            box-shadow: none !important;
-          }
-          .el-input__inner {
-            border: none !important;
-            box-shadow: none !important;
-          }
-          border: none !important;
-          box-shadow: none !important;
-        }
-      }
-    }
     .el-input__wrapper {
-      border: none !important;
-      box-shadow: none !important;
-    }
-    .el-input__inner {
-      border: none !important;
       box-shadow: none !important;
     }
-    .el-select {
-      --el-select-input-focus-border-color: transparent;
-      color: #333 !important;
 
-      font-weight: 500;
-    }
-    .el-select .el-input.is-focus .el-input__inner {
-      border: 0px !important;
-      color: #333 !important;
-
-      font-weight: 500;
-    }
-    .el-input__inner {
-      background-color: #f6f7f8 !important;
-      border: none !important;
-      box-shadow: none !important;
-
-      &:hover {
-        border: none !important;
-        box-shadow: none !important;
-      }
-    }
-    .el-input__wrapper {
-      background-color: #f6f7f8 !important;
-      border: none !important;
-      box-shadow: none !important;
-      &:hover {
-        border: none !important;
-        box-shadow: none !important;
-      }
-    }
-    .el-input-group--prepend {
-      .el-select {
-        &:hover {
-          background-color: #f6f7f8 !important;
-          border: none !important;
-          box-shadow: none !important;
-        }
-        .select-trigger {
-          &:hover {
-            background-color: #f6f7f8 !important;
-            border: none !important;
+    // select 那层
+    .el-select .el-input.is-focus .el-input__wrapper .subSelect.el-select {
+      font-size: 16px;
+      .el-input {
+        font-size: 18px;
+        .el-input.is-focus {
+          .el-input__wrapper {
             box-shadow: none !important;
-          }
-          .el-input--suffix.is-focus {
-            .el-input__wrapper {
-              box-shadow: none !important;
-              &:hover {
-                border: none !important;
-                box-shadow: none !important;
-              }
-            }
-            .is-focus {
-              background-color: #f6f7f8 !important;
-              border: none !important;
-              box-shadow: none !important;
-            }
+            background-color: #fff;
           }
         }
-      }
-    }
-
-    .el-input-group__prepend {
-      box-shadow: none;
-    }
-    .el-input-group__append {
-      box-shadow: none !important;
-    }
-
-    .subSelect {
-      .el-input-group--prepend
-        .el-input-group__prepend
-        .el-select
-        .el-input.is-focus
-        .el-input__wrapper {
-        border: none !important;
-        box-shadow: none !important;
-        &:hover {
-          border: none !important;
+        .el-input__wrapper.is-focus {
           box-shadow: none !important;
+          background-color: #fff;
         }
-      }
-    }
-    .el-input-group--prepend .el-input-group__prepend .el-select {
-      border: none !important;
-      box-shadow: none !important;
-      &:hover {
-        border: none !important;
-        box-shadow: none !important;
-        .el-input__wrapper {
-          border: none !important;
-          box-shadow: none !important;
-          &:hover {
-            border: none !important;
-            box-shadow: none !important;
-          }
+        .el-select__caret {
+          color: #2dc7aa;
+          font-size: 20px;
+          font-weight: bold;
         }
       }
+
+      // .el-input.is-focus {
+      //   .el-input__wrapper.is-focus {
+      //     box-shadow: none !important;
+      //     background-color: #fff;
+      //   }
+      // }
     }
   }
-}
-.inputSelect {
-  line-height: 54px;
-  height: 54px;
-  background: #f6f7f8;
-  border-radius: 30px;
-  overflow: hidden;
-  border: none !important;
-  padding: 0 10px 0 20px;
-}
+  // }
 
-.selectWrap {
-  display: flex;
-  flex-direction: row;
-  position: relative;
-  .line {
-    width: 1px;
-    height: 26px;
-    background: #d8d8d8 !important;
-    position: absolute;
-    right: -20px;
-    top: 2px;
+  .selectWrap {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    .line {
+      width: 1px;
+      height: 26px;
+      background: #d8d8d8 !important;
+      position: absolute;
+      right: -20px;
+      top: 2px;
+    }
   }
-}
 
-.searchIcon {
-  font-size: 20px !important;
+  .searchIcon {
+    font-size: 20px !important;
+  }
 }

src/components/searchInput/index.tsx

@@ -10,7 +10,7 @@ import {
   ElIcon
 } from 'element-plus'
 
-import white from './while.module.less'
+// import white from './while.module.less'
 import classes from './index.module.less'
 import request from '@/helpers/request'
 
@@ -78,50 +78,51 @@ export default defineComponent({
     onMounted(() => {
       getSubjectList()
     })
-    let classStyle
-    props.isWhile ? (classStyle = white) : (classStyle = classes)
+    // let classStyle = classes
+
     return () => (
       <>
-        <div class={[classStyle.wrap, props.isWhile ? classStyle.While : '']}>
+        {/* props.isWhile ? classStyle.While : '' */}
+        <div class={[classes.wrap]}>
+          <div class={classes.selectWrap} id="selectWrap">
+            <ElSelect
+              clearable
+              v-model={state.subject}
+              placeholder="请选择声部"
+              style="width: 150px"
+              class="subSelect"
+              v-slots={{
+                suffix: () => <div class={classes.san}></div>
+              }}
+            >
+              {state.subjectList.map((item: any) => (
+                <ElOption label={item.name} value={item.id} />
+              ))}
+            </ElSelect>
+            <div class={classes.line}></div>
+          </div>
           <ElInput
             clearable
             v-model={state.search}
             placeholder={state.holder}
-            class={classStyle.inputSelect}
-            v-slots={{
-              prepend: () => (
-                <div class={classStyle.selectWrap}>
-                  <ElSelect
-                    clearable
-                    v-model={state.subject}
-                    placeholder="请选择声部"
-                    style="width: 115px"
-                    popper-class="subSelect"
-                    v-slots={{
-                      suffix: () => <div class={classStyle.san}></div>
-                    }}
-                  >
-                    {state.subjectList.map((item: any) => (
-                      <ElOption label={item.name} value={item.id} />
-                    ))}
-                  </ElSelect>
-                  <div class={classStyle.line}></div>
-                </div>
-              ),
-              append: () => (
-                <ElButton
-                  onClick={startSearch}
-                  v-slots={{
-                    icon: () => (
-                      <ElIcon class={classStyle.searchIcon}>
-                        <Search></Search>
-                      </ElIcon>
-                    )
-                  }}
-                  style={{ color: '#2DC7AA', font: '20px' }}
-                />
-              )
-            }}
+            class={classes.inputSelect}
+            v-slots={
+              {
+                // append: () => (
+                //   <ElButton
+                //     onClick={startSearch}
+                //     v-slots={{
+                //       icon: () => (
+                //         <ElIcon class={classStyle.searchIcon}>
+                //           <Search></Search>
+                //         </ElIcon>
+                //       )
+                //     }}
+                //     style={{ color: '#2DC7AA', font: '20px' }}
+                //   />
+                // )
+              }
+            }
           ></ElInput>
         </div>
       </>

src/components/silder/index.tsx

@@ -9,6 +9,8 @@ import silder4 from './images/silder4.svg'
 import silder5 from './images/silder5.svg'
 import download from './images/download.png'
 import siderTop from './images/siderTop.png'
+import siderTopActive from './images/siderTopActive.png'
+
 import weixin from '@/common/images/weixinCode.jpg'
 import studentCode from '@/common/images/studentCode.png'
 import teacherCode from '@/common/images/teacherCode.png'
@@ -62,19 +64,22 @@ export default defineComponent({
               </div>
             </ElPopover> */}
             <ElPopover
-            width='230px'
+              width="230px"
               placement="left"
               trigger="hover"
               popper-class="silderPopver"
               v-slots={{
                 reference: () => (
-                  <div class={classes.silderItem}   onMouseover={() => {
-                    state.hoverApp = true
-                  }}
-                  onMouseout={() => {
-                    state.hoverApp = false
-                  }}>
-                    {state.hoverApp ? <img src={silder3} />:  <p>APP下载</p>}
+                  <div
+                    class={classes.silderItem}
+                    onMouseover={() => {
+                      state.hoverApp = true
+                    }}
+                    onMouseout={() => {
+                      state.hoverApp = false
+                    }}
+                  >
+                    {state.hoverApp ? <img src={silder3} /> : <p>APP下载</p>}
 
                     <div class={classes.line}></div>
                   </div>
@@ -83,44 +88,48 @@ export default defineComponent({
             >
               <div>
                 <div class="codeItem">
-                  <img  class="codeImg" src={studentCode} width="111" height="111" />
+                  <img
+                    class="codeImg"
+                    src={studentCode}
+                    width="111"
+                    height="111"
+                  />
                   <p style={{ 'text-align': 'center' }}>酷乐秀</p>
-                  <div class='iconWrap'>
-                  <div
-                    class='iconItem'
-
-                  >
-                    <img src={ios} alt="" />
-                    <span>ios</span>
+                  <div class="iconWrap">
+                    <div class="iconItem">
+                      <img src={ios} alt="" />
+                      <span>ios</span>
+                    </div>
+                    <div class="iconItem">
+                      <img src={andIcon} alt="" />
+                      <span>Andrid</span>
+                    </div>
                   </div>
-                  <div class='iconItem'>
-                    <img src={andIcon} alt="" />
-                    <span>Andrid</span>
-                  </div>
-                </div>
                 </div>
                 <div class="codeItem">
-                  <img class="codeImg" src={teacherCode} width="111" height="111" />
+                  <img
+                    class="codeImg"
+                    src={teacherCode}
+                    width="111"
+                    height="111"
+                  />
                   <p style={{ 'text-align': 'center' }}>酷乐秀学院</p>
-                  <div class='iconWrap'>
-                  <div
-                  class='iconItem'
-
-                  >
-                    <img src={ios} alt="" />
-                    <span>ios</span>
+                  <div class="iconWrap">
+                    <div class="iconItem">
+                      <img src={ios} alt="" />
+                      <span>ios</span>
+                    </div>
+                    <div class="iconItem">
+                      <img src={andIcon} alt="" />
+                      <span>Andrid</span>
+                    </div>
                   </div>
-                  <div class='iconItem'>
-                    <img src={andIcon} alt="" />
-                    <span>Andrid</span>
-                  </div>
-                </div>
                 </div>
               </div>
             </ElPopover>
             <ElPopover
               placement="left"
-              width='230px'
+              width="230px"
               trigger="hover"
               popper-class="silderPopver"
               v-slots={{
@@ -145,13 +154,25 @@ export default defineComponent({
               <div>
                 <div class="codeItem">
                   <img class="codeImg" src={weixin} width="111" height="111" />
-                  <p style={{ 'text-align': 'center' }}>打开微信扫一扫 <br />关注酷乐秀公众号</p>
+                  <p style={{ 'text-align': 'center' }}>
+                    打开微信扫一扫 <br />
+                    关注酷乐秀公众号
+                  </p>
                 </div>
               </div>
             </ElPopover>
             {/* {state.showgo ? ( */}
-            <div class={classes.goTop} onClick={gotop}>
-              <img src={siderTop} />
+            <div
+              class={classes.goTop}
+              onClick={gotop}
+              onMouseover={() => {
+                state.hoverTop = true
+              }}
+              onMouseout={() => {
+                state.hoverTop = false
+              }}
+            >
+              <img src={state.hoverTop ? siderTopActive : siderTop} />
               {/* 回到顶部 */}
             </div>
             {/* ) : (

src/views/home/index.tsx

@@ -59,7 +59,7 @@ export default defineComponent({
             data: {
               albumStatus: 'PASS',
               page: 1,
-              rows: 6
+              rows: 3
             }
           }
         )

src/views/musicLibrary/index.module.less

@@ -10,7 +10,7 @@
 }
 
 .w1200 {
-  width: 1200px !important;
+  width: 1002px !important;
   margin: 0 auto;
   .myTabWrap {
     :global {