silder

1

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

@@ -1,26 +1,26 @@
 .footerSection {
   overflow: hidden;
   margin: 0 auto;
-  background: #30343e;
+  background: #0e0f10;
 }
 
 .footerInfo {
   color: #cecece;
-  background: #30343e;
-  padding: 77px 0 35px;
+  background: #1e1f22;
+  padding: 70px 0 45px;
   .width1200 {
-    width: 1200px;
+    width: 1000px;
     margin: 0 auto;
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
-    h2 {
-      color: #fff;
-      font-size: 14px;
-      line-height: 31px;
-      text-align: left;
-      font-weight: 400;
-    }
+    justify-content: space-around;
+    // h2 {
+    //   color: #fff;
+    //   font-size: 14px;
+    //   line-height: 31px;
+    //   text-align: left;
+    //   font-weight: 400;
+    // }
     .attention {
       display: flex;
       flex-direction: row;
@@ -37,6 +37,26 @@
           margin-top: 10px;
         }
       }
+      .hotLine {
+        text-align: left;
+        color: rgba(255, 255, 255, 0.4);
+        margin-right: 30px;
+
+        h2 {
+          margin-top: 33px;
+          font-size: 18px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 600;
+          // color: #ffffff;
+          line-height: 35px;
+        }
+        span {
+          margin-left: 80px;
+          font-size: 14px;
+        }
+        p {
+        }
+      }
     }
     .friendShip {
       display: flex;
@@ -44,17 +64,24 @@
       justify-content: flex-start;
       .lineWrap {
         margin-right: 20px;
+        h2 {
+          color: rgba(255, 255, 255, 0.8);
+          font-size: 18px;
+          line-height: 25px;
+          font-weight: 600;
+          margin-bottom: 26px;
+        }
       }
       .itemWrap {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
+        // display: flex;
+        // flex-direction: row;
+        // justify-content: flex-start;
         .friendshipItem {
           a {
-            font-size: 12px;
+            font-size: 14px;
             color: #cecece;
             line-height: 37px;
-            margin-right: 30px;
+            // margin-right: 30px;
             display: inline-block;
             text-align: left;
             text-decoration: none;
@@ -66,18 +93,6 @@
           }
         }
       }
-      .hotLine {
-        text-align: left;
-        color: #cecece;
-        margin-right: 30px;
-        p {
-          font-size: 16px;
-          line-height: 37px;
-          span {
-            font-size: 12px;
-          }
-        }
-      }
     }
   }
 }
@@ -85,15 +100,15 @@
   border-top: 1px solid #585858;
   // background: url("../assets/images/footerBg.png") no-repeat center;
   // background-size: cover;
-  height: 82px;
+  height: 96px;
   p {
     text-align: center;
     font-size: 12px;
-    color: #cecece;
+    color: rgba(255, 255, 255, 0.6);
     line-height: 20px;
-    padding-top: 21px;
+    padding-top: 25px;
     a {
-      color: #cecece;
+      color: rgba(255, 255, 255, 0.6);
     }
   }
 }
@@ -102,18 +117,21 @@
   height: 68px;
 }
 .codeImg {
-  width: 74px;
-  height: 74px;
+  width: 98px;
+  height: 98px;
+  background: #d8d8d8;
+  border-radius: 8px;
+  border: 1px solid #979797;
 }
 .qrcode {
   margin-right: 34px;
   p {
-    height: 17px;
-    font-size: 12px;
+    line-height: 25px;
+    font-size: 18px;
     font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
+    font-weight: 600;
     color: #cecece;
-    margin-top: 15px;
+    margin: 0 0 15px ;
     text-align: center;
   }
 }

src/components/col-footer/index.tsx

@@ -1,10 +1,12 @@
 import { defineComponent } from 'vue'
-import classes  from './index.module.less'
+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 studentCode from '@/common/images/studentCode.png'
 import teacherCode from '@/common/images/teacherCode.png'
+import weixinCode from '@/common/images/weixinCode.jpg'
+
 export default defineComponent({
   name: 'col-footer',
   setup() {
@@ -13,54 +15,31 @@ export default defineComponent({
         <div>
           <div class={classes.footerSection}>
             <div class={classes.footerInfo}>
-              <div class={classes.width1200} >
-                <div  class={classes.attention} >
-                  <div class={classes.qrcode} >
-                    <div class={classes.qrcodeItem}  style="padding-right:50px">
+              <div class={classes.width1200}>
+                <div class={classes.attention}>
+                  <div class={classes.qrcode}>
+                    <div class={classes.qrcodeItem} style="padding-right:50px">
                       <img
-                      class={classes.whileLogo}
+                        class={classes.whileLogo}
                         src={whileLogo}
                         width="142px"
                         height="65px"
                         alt=""
                       />
                     </div>
-                  </div>
-                  <div class={classes.qrcode}>
-                    <div  class={classes.qrcodeItem}>
-                      <img
-                      class={classes.codeImg}
-                        src={studentCode}
-                        width="74px"
-                        height="74px"
-                      />
-                      <p>酷乐秀</p>
-                    </div>
-                  </div>
-                  <div class={classes.qrcode}>
-                    <div  class={classes.qrcodeItem}>
-                      <img
-                      class={classes.codeImg}
-                        src={teacherCode}
-                        width="74px"
-                        height="74px"
-                      />
-                      <p>酷乐秀学院</p>
+                    <div class={classes.hotLine}>
+                      <h2>咨询热线：400 - 8851569</h2>
+                      <span>（周一至周五 09:00~21:00）</span>
                     </div>
                   </div>
+
                 </div>
-                <div  class={classes.friendShip}>
-                  <div class={classes.hotLine}>
-                    <h2>咨询热线</h2>
-                    <p>
-                      400 - 8851569<span>（周一至周五 09:00~21:00）</span>
-                    </p>
-                  </div>
-                  <div class={classes.lineWrap} >
+                <div class={classes.friendShip}>
+                  <div class={classes.lineWrap}>
                     <h2>友情链接</h2>
                     <div class={classes.itemWrap}>
-                      <div class={classes.friendshipItem} >
-                        <a  target="view_window" href="http://www.chnmusic.org/">
+                      <div class={classes.friendshipItem}>
+                        <a target="view_window" href="http://www.chnmusic.org/">
                           中国音乐家协会
                         </a>
                       </div>
@@ -75,10 +54,43 @@ export default defineComponent({
                     </div>
                   </div>
                 </div>
+                <div class={classes.qrcode}>
+                    <div class={classes.qrcodeItem}>
+                    <p>公众号</p>
+                      <img
+                        class={classes.codeImg}
+                        src={weixinCode}
+
+                      />
+
+                    </div>
+                  </div>
+                <div class={classes.qrcode}>
+                    <div class={classes.qrcodeItem}>
+                    <p>酷乐秀</p>
+                      <img
+                        class={classes.codeImg}
+                        src={studentCode}
+
+                      />
+
+                    </div>
+                  </div>
+                  <div class={classes.qrcode}>
+                  <p>酷乐秀学院</p>
+                    <div class={classes.qrcodeItem}>
+                      <img
+                        class={classes.codeImg}
+                        src={teacherCode}
+
+                      />
+
+                    </div>
+                  </div>
               </div>
             </div>
-            <div  class={classes.footerCoptyright}>
-              <div  class={classes.width1200}>
+            <div class={classes.footerCoptyright}>
+              <div class={classes.width1200}>
                 <p>
                   Copyright © 2021 武汉酷乐秀网络科技有限公司
                   <br /> All Rights Reserved.{' '}

src/components/col-header/modals/index.module.less

@@ -109,6 +109,7 @@
     flex-direction: row;
     justify-content: space-around;
     text-align: center;
+    margin-bottom: 42px;
     // margin-top: 10px;
     // margin-bottom: 10px;
     .dropdownItem {
@@ -116,8 +117,9 @@
       width: 50%;
       &:nth-last-child(1) {
         &::after {
-        width: 0px;
-        border: 0px;}
+          width: 0px;
+          border: 0px;
+        }
       }
       &::after {
         content: '';
@@ -143,49 +145,103 @@
         color: #999;
         line-height: 22px;
       }
+      .dropdownImg {
+        width: 24px;
+        height: 24px;
+      }
     }
   }
 }
 :global {
-  .el-dropdown__popper.el-popper {
-    border: none !important;
-    border-radius: 10px 10px;
-  }
   .loginPopper {
-    background-color: #000;
-    transform: translate(-35px, 0px) !important;
-    background: #ffffff;
-    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
-    position: relative;
-    &::after {
-      content: '';
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-left: 9px solid transparent;
-      border-right: 9px solid transparent;
-      border-bottom: 9px solid #fff;
-      top: -9px;
-      right: 15px;
+    .el-dropdown__popper.el-popper {
+      border: none !important;
+      border-radius: 10px 10px;
     }
-  }
-  .el-dropdown-menu__item {
-    line-height: 42px !important;
-    img {
-      width: 16px;
-      height: 16px;
-      margin-right: 7px;
+    .loginPopper {
+      background-color: #000;
+      transform: translate(-35px, 0px) !important;
+      background: #ffffff;
+      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
+      position: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-left: 9px solid transparent;
+        border-right: 9px solid transparent;
+        border-bottom: 9px solid #fff;
+        top: -9px;
+        right: 15px;
+      }
     }
-  }
+    .el-dropdown-menu {
 
-  .backWrap {
-    width: 100%;
-    border-top: 1px solid #f2f2f2;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  .el-popper__arrow {
-    display: none;
+      .backItem {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        .icon_back {
+          width: 8px;
+          height: 15px;
+          margin-right: 13px;
+        }
+      }
+    }
+    .el-dropdown-menu__item {
+      line-height: 60px !important;
+      color: #666666;
+      padding: 0 18px;
+      font-weight: 500;
+      font-size: 16px;
+      img {
+        width: 24px;
+        height: 24px;
+        margin-right: 12px;
+        margin-left: 5px;
+      }
+      .dropdownItemWrap {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+      .changeWrap {
+        display: flex;
+        flex-direction: row;
+       align-items: center;
+       span {
+        margin-right: 20px;
+        color: #666;
+       }
+      }
+      .backWrap {
+        color: #ff5151;
+        .backIcon {
+          width: 18px;
+          height: 18px;
+          margin-right: 5px;
+          margin-left: 3px;
+        }
+      }
+    }
+
+    .lineItem {
+      width: 100%;
+      border-top: 1px solid #f2f2f2;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      .backWrap {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+    }
+    .el-popper__arrow {
+      // display: none;
+    }
   }
 }

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

@@ -33,6 +33,7 @@ import videoIcon from '../images/videoIcon.png'
 import noVideoIcon from '../images/videoIcon.png'
 import vipIcon from '../images/vipIcon.png'
 import noVipIcon from '../images/vipIcon.png'
+import icon_back from '@/common/images/icon_back.png'
 
 import { getUserInfo, getUserType, getAuth, setAuth } from '@/helpers/utils'
 import { useRoute, useRouter } from 'vue-router'
@@ -53,9 +54,9 @@ export default defineComponent({
       user: {} as any,
       userType: '',
       showChange: false,
-      iconList:[] as any
+      iconList: [] as any
     })
-    mitt.on('mittFn',()=>{
+    mitt.on('mittFn', () => {
       console.log('mittFn')
       setUser()
     })
@@ -66,7 +67,7 @@ export default defineComponent({
         setUser()
       })
     })
-    const setUser = ()=>{
+    const setUser = () => {
       states.user = getUserInfo()
       states.userType = getUserType()
       if (states.user.userType) {
@@ -81,32 +82,32 @@ export default defineComponent({
       }
       // iconList
 
-      if(states.userType == 'TEACHER'){
+      if (states.userType == 'TEACHER') {
         states.iconList = []
-        if(states.user.tag.indexOf('STYLE') != -1){
+        if (states.user.tag.indexOf('STYLE') != -1) {
           states.iconList.push(styleIcon)
-        }else{
+        } else {
           states.iconList.push(nostyleIcon)
         }
-        if(states.user.tag.indexOf('VIDEO') != -1){
+        if (states.user.tag.indexOf('VIDEO') != -1) {
           states.iconList.push(videoIcon)
-        }else{
+        } else {
           states.iconList.push(noVideoIcon)
         }
-        if(states.user.tag.indexOf('LIVE') != -1){
+        if (states.user.tag.indexOf('LIVE') != -1) {
           states.iconList.push(onlineIcon)
-        }else{
+        } else {
           states.iconList.push(noOnlineIcon)
         }
-        if(states.user.tag.indexOf('MUSIC') != -1){
+        if (states.user.tag.indexOf('MUSIC') != -1) {
           states.iconList.push(ablumIcon)
-        }else{
+        } else {
           states.iconList.push(noAblumIcon)
         }
-      }else {
+      } else {
         states.iconList = []
       }
-      console.log('查看用户登录态',states.user)
+      console.log('查看用户登录态', states.user)
     }
     const gotoPage = (val: string) => {
       router.push({ path: val })
@@ -115,22 +116,20 @@ export default defineComponent({
       const token = getAuth()
       let userType = ''
       let str = ''
-      let nowPath = route.fullPath;
+      let nowPath = route.fullPath
 
       if (states.userType == 'TEACHER') {
         userType = 'STUDENT'
         str = '学生'
-        if(nowPath.indexOf('userInfo')!= -1){
+        if (nowPath.indexOf('userInfo') != -1) {
           nowPath = '/studentInfo'
         }
-
       } else {
         userType = 'TEACHER'
         str = '老师'
-        if(nowPath.indexOf('studentInfo')!= -1){
+        if (nowPath.indexOf('studentInfo') != -1) {
           nowPath = '/userInfo'
         }
-
       }
       ElMessageBox.confirm(`是否确定切换到${str}？`, '提示', {
         type: 'warning'
@@ -141,12 +140,10 @@ export default defineComponent({
             loginUserType: userType
           })
         )
-        router.push({ path: nowPath,query:{...route.query} })
-        setTimeout(()=>{
-           window.location.reload()
-        },500)
-
-
+        router.push({ path: nowPath, query: { ...route.query } })
+        setTimeout(() => {
+          window.location.reload()
+        }, 500)
       })
     }
     const logout = async () => {
@@ -182,7 +179,7 @@ export default defineComponent({
       <>
         <ElDropdown
           onCommand={val => this.changeState(val)}
-          popper-class='loginPopper'
+          popper-class="loginPopper"
           trigger="click"
           v-slots={{
             dropdown: () => (
@@ -200,14 +197,23 @@ export default defineComponent({
                         alt=""
                       /> */}
                       <div class={classes.titleWrap}>
-                      <p class={classes.title}>{this.user.username}</p>
-                      <img class={classes.vipLogo} src={this.user.isVip?vipIcon:noVipIcon} alt="" />
+                        <p class={classes.title}>{this.user.username}</p>
+                        <img
+                          class={classes.vipLogo}
+                          src={this.user.isVip ? vipIcon : noVipIcon}
+                          alt=""
+                        />
                       </div>
                       <div class={classes.iconList}>
-                        {this.userType == 'TEACHER'? <p class={classes.teacherTag}>{'老师'}</p>: <p class={classes.studentTag}>{'学生'}</p>}
-                        {this.iconList.map(item=><img  class={classes.icon} src={item} alt="" /> )}
+                        {this.userType == 'TEACHER' ? (
+                          <p class={classes.teacherTag}>{'老师'}</p>
+                        ) : (
+                          <p class={classes.studentTag}>{'学生'}</p>
+                        )}
+                        {this.iconList.map(item => (
+                          <img class={classes.icon} src={item} alt="" />
+                        ))}
                       </div>
-
                     </div>
                     {/* <img src={userBanner} alt="" /> */}
                   </div>
@@ -235,44 +241,55 @@ export default defineComponent({
 
                   <ElDropdownMenu>
                     {this.userType == 'TEACHER' ? (
-                      <ElDropdownItem command="teacher">
-                        <img
-                          class={classes.dropdownImg}
-                          src={peopleIcon}
-                          alt=""
-                        />{' '}
-                        个人中心
+                      <ElDropdownItem command="teacher" class="backItem">
+                        <div class="dropdownItemWrap">
+                          <img
+                            class={classes.dropdownImg}
+                            src={peopleIcon}
+                            alt=""
+                          />{' '}
+                          个人中心
+                        </div>
+                        <img src={icon_back} alt="" class="icon_back" />
                       </ElDropdownItem>
                     ) : (
-                      <ElDropdownItem command="strudent">
-                        <img
-                          class={classes.dropdownImg}
-                          src={peopleIcon}
-                          alt=""
-                        />{' '}
-                        个人中心
+                      <ElDropdownItem command="strudent" class="backItem">
+                        <div class="dropdownItemWrap">
+                          <img
+                            class={classes.dropdownImg}
+                            src={peopleIcon}
+                            alt=""
+                          />{' '}
+                          个人中心
+                        </div>
+                        <img src={icon_back} alt="" class="icon_back" />
                       </ElDropdownItem>
                     )}
                     {/* <ElDropdownItem  onClick={gotoPage('')}><img class={classes.dropdownImg} src={planIcon} alt="" /> 创作中心</ElDropdownItem> */}
                     {this.showChange ? (
-                      <ElDropdownItem command="change">
-                        <img
-                          class={classes.dropdownImg}
-                          src={changeIcon}
-                          alt=""
-                        />{' '}
-                        角色切换
+                      <ElDropdownItem command="change" class="backItem">
+                        <div class="dropdownItemWrap">
+                          <img
+                            class={classes.dropdownImg}
+                            src={changeIcon}
+                            alt=""
+                          />{' '}
+                          角色切换
+                        </div>
+                        <div class="changeWrap">
+                          <span> {this.userType == 'TEACHER' ?'学生':'老师'}</span>
+                          <img src={icon_back} alt="" class="icon_back" />
+                        </div>
                       </ElDropdownItem>
                     ) : null}
 
                     <ElDropdownItem command="back" class="backItem">
-                      <div class="backWrap">
-                        <img
-                          class={classes.dropdownImg}
-                          src={backIcon}
-                          alt=""
-                        />{' '}
-                        退出登录
+                      <div class='lineItem'>
+                        <div class="backWrap">
+                          <img class="backIcon" src={backIcon} alt="" />{' '}
+                          退出登录
+                        </div>
+                        <img src={icon_back} alt="" class="icon_back" />
                       </div>
                     </ElDropdownItem>
                   </ElDropdownMenu>

src/components/silder/index.module.less

@@ -1,14 +1,16 @@
 .silderWrap {
   position: fixed;
-  top: 60%;
-  right: 70px;
+  bottom: 40px;
+  right: 26px;
   z-index: 200;
   .silderList {
     background-color: #fff;
-    width: 64px;
+    width: 56px;
     // height: 268px;
-
-    border: 1px solid #ececec;
+    box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.08);
+    border-radius: 10px;
+    overflow: hidden;
+    // border: 1px solid #ececec;
 
     .silderItem {
       cursor: pointer;
@@ -21,7 +23,15 @@
 
       p {
         margin-top: 8px;
-        color: #666666;
+        text-align: center;
+        width: 40px;
+        height: 40px;
+        font-size: 14px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #000000;
+        line-height: 20px;
+        text-shadow: 0px 2px 14px rgba(0, 0, 0, 0.08);
       }
       .line {
         margin-top: 10px;
@@ -42,8 +52,11 @@
 
     .silderItem {
       img {
-        filter: drop-shadow(#2dc7aa 80px 0);
-        transform: translateX(-80px);
+        // filter: drop-shadow(#2dc7aa 80px 0);
+        // transform: translateX(-80px);
+        margin-top: 8px;
+        width: 40px;
+        height: 40px;
       }
       cursor: pointer;
       display: flex;
@@ -70,39 +83,40 @@
         p {
           color: #2dc7aa;
         }
-
       }
     }
   }
 
   .goTop {
     cursor: pointer;
-    margin-top: 20px;
+    // margin-top: 20px;
     background-color: #fff;
-    width: 64px;
-    height: 64px;
+    // width: 64px;
+    // height: 64px;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding-top: 16px;
-    border: 1px solid #ececec;
+    padding-bottom: 11px;
+    // border: 1px solid #ececec;
     overflow: hidden;
     color: #666;
     font-size: 12px;
     line-height: 21px;
     img {
-
-      filter: drop-shadow(#999 80px 0);
-      transform: translateX(-80px);
-      margin-bottom: 6px;
-    }
-    &:hover {
-      img {
-        filter: drop-shadow(#2dc7aa 80px 0);
-        transform: translateX(-80px);
-      }
-      color: #2dc7aa;
+      width: 40px;
+      height: 40px;
+      // filter: drop-shadow(#999 80px 0);
+      // transform: translateX(-80px);
+      // margin-bottom: 6px;
     }
+    // &:hover {
+    //   img {
+    //     filter: drop-shadow(#2dc7aa 80px 0);
+    //     transform: translateX(-80px);
+    //   }
+    //   color: #2dc7aa;
+    // }
   }
 }
 .submitBtn {
@@ -122,54 +136,92 @@
 .submsg {
   color: #999;
 }
-.Mopopver {
-  .codeItem {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-  }
-  .hoverTitle {
-    font-size: 12px;
-    font-weight: 400;
-    color: #999999;
-    line-height: 17px;
-  }
-  /deep/.hoverMsg {
-    padding-top: 5px;
-    font-size: 16px;
-    color: #1a1a1a;
-    line-height: 22px;
-    font-weight: 700;
-  }
-  .silderItem {
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 11px 0 0;
-    font-size: 12px;
-    overflow: hidden;
-    p {
-      margin-top: 8px;
-      color: #666666;
+:global {
+  .silderPopver {
+    padding-top: 28px!important;
+    .codeItem {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      p {
+        font-size: 16px;
+        color: #333;
+        margin: 9px 0 4px 0;
+      }
+      .codeImg {
+        background: #ffffff;
+        border-radius: 8px;
+        border: 5px solid #2dc7aa;
+        width: 138px;
+        height: 138px;
+      }
+      .iconWrap {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        width: 138px;
+        margin-bottom: 24px;
+        .iconItem {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          // margin-top: 16px;
+          font-size: 12px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #666666;
+          line-height: 17px;
+          img {
+            width: 20px;
+            height: 20px;
+            margin-right: 5px;
+          }
+        }
+      }
+    }
+    .hoverTitle {
+      font-size: 12px;
+      font-weight: 400;
+      color: #999999;
+      line-height: 17px;
     }
-    .line {
-      margin-top: 10px;
-      width: 48px;
-      height: 1px;
-      background-color: #ececec;
+    /deep/.hoverMsg {
+      padding-top: 5px;
+      font-size: 16px;
+      color: #1a1a1a;
+      line-height: 22px;
+      font-weight: 700;
     }
-    &:hover {
+    .silderItem {
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 11px 0 0;
+      font-size: 12px;
+      overflow: hidden;
       p {
-        color: #2dc7aa;
+        margin: 8px 0;
+        color: #666666;
       }
-      img {
-        filter: drop-shadow(#2dc7aa 80px 0);
-        transform: translateX(-80px);
+      .line {
+        margin-top: 10px;
+        width: 48px;
+        height: 1px;
+        background-color: #ececec;
+      }
+      &:hover {
+        p {
+          color: #2dc7aa;
+        }
+        img {
+          filter: drop-shadow(#2dc7aa 80px 0);
+          transform: translateX(-80px);
+        }
       }
     }
   }
-
 }

src/components/silder/index.tsx

@@ -2,20 +2,27 @@ import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
 import classes from './index.module.less'
 import { ElButton, ElIcon, ElPopover } from 'element-plus'
 import { scrollAnimation } from '@/util/scroll'
-import silder1 from './images/silder1.svg'
+import silder1 from './images/silder1.png'
 import silder2 from './images/silder2.svg'
-import silder3 from './images/silder3.svg'
+import silder3 from './images/silder3.png'
 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 weixin from '@/common/images/weixinCode.jpg'
 import studentCode from '@/common/images/studentCode.png'
 import teacherCode from '@/common/images/teacherCode.png'
+
+import andIcon from '@/views/downLoad/images/andIcon.png'
+import ios from '@/views/downLoad/images/iosIcon.png'
 export default defineComponent({
   name: 'silder',
   setup() {
     const state = reactive({
-      showgo: false
+      showgo: false,
+      hoverApp: false,
+      hoverChat: false,
+      hoverTop: false
     })
     const gotop = () => {
       const currentY =
@@ -55,61 +62,102 @@ export default defineComponent({
               </div>
             </ElPopover> */}
             <ElPopover
+            width='230px'
               placement="left"
               trigger="hover"
-              popper-class="Mopopver"
+              popper-class="silderPopver"
               v-slots={{
                 reference: () => (
-                  <div class={classes.silderItem}>
-                    <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>
                 )
               }}
             >
               <div>
-                <div class={classes.codeItem}>
-                  <img src={studentCode} width="111" height="111" />
+                <div class="codeItem">
+                  <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>
+                  <div class='iconItem'>
+                    <img src={andIcon} alt="" />
+                    <span>Andrid</span>
+                  </div>
+                </div>
                 </div>
-                <div class={classes.codeItem}>
-                  <img src={teacherCode} width="111" height="111" />
+                <div class="codeItem">
+                  <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>
+                  <div class='iconItem'>
+                    <img src={andIcon} alt="" />
+                    <span>Andrid</span>
+                  </div>
+                </div>
                 </div>
               </div>
             </ElPopover>
             <ElPopover
               placement="left"
+              width='230px'
               trigger="hover"
-              popper-class="Mopopver"
+              popper-class="silderPopver"
               v-slots={{
                 reference: () => (
-                  <div class={classes.silderItem}>
-                    <img src={silder1} />
-                    <p>关注微信</p>
-                    <div class={classes.wall}></div>
+                  <div
+                    class={classes.silderItem}
+                    onMouseover={() => {
+                      state.hoverChat = true
+                    }}
+                    onMouseout={() => {
+                      state.hoverChat = false
+                    }}
+                  >
+                    {state.hoverChat ? <img src={silder1} /> : <p>关注微信</p>}
+
+                    <div class={classes.line}></div>
+                    {/* <div class={classes.wall}></div> */}
                   </div>
                 )
               }}
             >
               <div>
-                <div class={classes.codeItem}>
-                  <img src={weixin} width="111" height="111" />
-                  <p>微信订阅号</p>
+                <div class="codeItem">
+                  <img class="codeImg" src={weixin} width="111" height="111" />
+                  <p style={{ 'text-align': 'center' }}>打开微信扫一扫 <br />关注酷乐秀公众号</p>
                 </div>
               </div>
             </ElPopover>
-          </div>
-
-          {state.showgo ? (
+            {/* {state.showgo ? ( */}
             <div class={classes.goTop} onClick={gotop}>
-              <img src={silder5} />
-              回到顶部
+              <img src={siderTop} />
+              {/* 回到顶部 */}
             </div>
-          ) : (
+            {/* ) : (
             ''
-          )}
+          )} */}
+          </div>
         </div>
       </>
     )