官网导航改造

1

src/components/col-header/index.css

@@ -4,15 +4,18 @@
   /* @apply bg-black/[.2] */
   background: rgba(0, 0, 0, 0.2);
 }
+
 .wall {
-  height:60px;
+  height: 60px;
 }
+
 .logoWrap {
-  margin-left: 80px;
-  margin-right:55px;
-  width: 113px;
-  height: 26px;
+  margin-left: 44px;
+  margin-right: 80px;
+  width: 304px;
+  height: 47px;
   cursor: pointer;
+  overflow: hidden;
 }
 
 .normalItem {
@@ -20,7 +23,7 @@
 }
 
 .activeItem {
-  color: #1FF0C9 !important;
+  color: var(--theme-color) !important;
   font-weight: 600;
 }
 
@@ -28,24 +31,29 @@
   position: absolute;
   content: "";
   top: 37px;
-  left: 25%;
-  width: 50%;
+  left: 51%;
+  width: 102%;
   height: 3px;
-  background-color: #1FF0C9;
+  margin-left: -51%;
+  background-color: var(--theme-color);
   z-index: 100;
   transform: scaleX(1);
-  transition: all 0.5s;
+  transition: all .2s;
   transform-origin: left;
+  border-radius: 2px;
 }
 
 .activeItem:hover::after {
-  transform: scaleX(1);
+  transform: scaleX(0);
 }
 
 .itemCenter {
   position: relative;
-  margin-right: 74px;
-  line-height: 60px;
+  margin-right: 40px;
+  line-height: 72px;
+  font-size: 20px;
+  font-weight: 500;
+
 }
 
 .navWrap {
@@ -60,20 +68,31 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  background-color: #383838;
+  background-color: rgba(30, 31, 34, .4);
   position: fixed;
   width: 100%;
   top: 0px;
   z-index: 1200;
-  height: 60px;
-  line-height: 60px;
+  height: 72px;
+  line-height: 72px;
 }
+
 .isdark.headerSection {
-  background-color: #383838!important;
+  background-color: rgba(30, 31, 34, .4) !important;
 }
+
 .rightWrap {
-  margin-right: 130px;
+  margin-right: 44px;
 }
+
+.rightWrap .logoBtn {
+  width: 107px;
+  height: 40px;
+  background: #2DC7AA;
+  border-radius: 20px;
+  font-size: 16px;
+}
+
 .top {
   background-color: rgba(0, 0, 0, 0.2) !important;
 }

src/components/col-header/index.tsx

@@ -45,9 +45,9 @@ export default defineComponent({
       scrollTop > 70 ? (this.isTop = true) : (this.isTop = false)
     })
   },
-  methods:{
-    gotoMain(){
-      this.$router.push({path:'/'})
+  methods: {
+    gotoMain() {
+      this.$router.push({ path: '/' })
     }
   },
   watch: {
@@ -77,10 +77,11 @@ export default defineComponent({
             this.isdark ? 'isdark' : ''
           ]}
         >
+
           <div class="flex items-center h-full">
-            <div class="logoWrap" onClick={()=>this.gotoMain()}>
-              <img class="w-full" src={logo} alt="" />
-            </div>
+          <div class="logoWrap" onClick={() => this.gotoMain()}>
+            <img class="w-full" src={logo} alt="" />
+          </div>
             <div class="flex">
               {this.navigator.map((item: any) => (
                 <div
@@ -108,12 +109,13 @@ export default defineComponent({
             {!this.isLogin ? (
               <ElButton
                 type="primary"
+                class="logoBtn"
                 round
                 onClick={() => {
                   state.loginPopupStatus = true
                 }}
               >
-                登录/注册
+                登录注册
               </ElButton>
             ) : (
               <>

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

@@ -1,6 +1,6 @@
 .userInfoWrap {
-  min-height: 60px;
-  line-height: 60px;
+  min-height: 72px;
+  line-height: 72px;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -11,36 +11,83 @@
     color: #ffffff;
   }
   .userHeader {
-    width: 30px;
-    height: 30px;
-    margin-left: 12px;
+    width: 40px;
+    height: 40px;
+    // margin-left: 12px;
     border-radius: 50%;
     overflow: hidden;
+    border: 2px solid var(--theme-color);
+    background-color: #fff;
   }
 }
 .dropdownWrap {
   padding: 0 !important;
-  width: 250px;
+  width: 304px;
 
   overflow: hidden;
   .dropdownWrapUser {
     position: relative;
-    .userInfoWrap {
+    .userInfoWrap1 {
       z-index: 100;
       left: 16px;
       top: 15px;
-      position: absolute;
+      // position: absolute;
       min-height: 60px;
       line-height: 60px;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      .title {
-        font-size: 16px;
-        font-family: PingFangSC-Regular, PingFang SC;
-        font-weight: 400;
-        color: #ffffff;
+      // display: flex;
+      // flex-direction: row;
+      // align-items: center;
+      padding: 28px 20px;
+      .titleWrap {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .title {
+          font-size: 18px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #333333;
+          line-height: 25px;
+          font-weight: 500;
+          margin-right: 10px;
+        }
+        .vipLogo {
+          width: 34px;
+          height: 15px;
+        }
+      }
+      .iconList {
+        display: flex;
+        flex-direction: row;
+        margin-top: 9px;
+        .teacherTag {
+          width: 38px;
+          height: 22px;
+          background: #cffff0;
+          border-radius: 11px;
+          line-height: 22px;
+          font-weight: 400;
+          color: #00ab76;
+          text-align: center;
+        }
+        .studentTag {
+          width: 38px;
+          height: 22px;
+          background: #ffe7cf;
+          border-radius: 11px;
+          line-height: 22px;
+          font-weight: 400;
+          color: #ab5400;
+          text-align: center;
+        }
+        .icon {
+          margin-left: 14px;
+          width: 21px;
+          height: 20px;
+        }
       }
+
       .userHeader {
         width: 44px;
         height: 44px;
@@ -62,23 +109,40 @@
     flex-direction: row;
     justify-content: space-around;
     text-align: center;
-    margin-top: 10px;
+    // margin-top: 10px;
     // margin-bottom: 10px;
-    .dropdownItemTitle {
-      font-size: 18px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      color: #333;
-      line-height: 25px;
-    }
-    .dropdownItemsubTitle {
-      width: 40px;
-      height: 28px;
-      font-size: 12px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #666666;
-      line-height: 28px;
+    .dropdownItem {
+      position: relative;
+      width: 50%;
+      &:nth-last-child(1) {
+        &::after {
+        width: 0px;
+        border: 0px;}
+      }
+      &::after {
+        content: '';
+        width: 1px;
+        height: 39px;
+        border: 1px solid #e7e6e6;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+      }
+      .dropdownItemTitle {
+        font-size: 28px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333;
+        line-height: 40px;
+      }
+      .dropdownItemsubTitle {
+        height: 22px;
+        font-size: 16px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 500;
+        color: #999;
+        line-height: 22px;
+      }
     }
   }
 }
@@ -87,6 +151,24 @@
     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-menu__item {
     line-height: 42px !important;
     img {

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

@@ -21,6 +21,19 @@ import changeIcon from '../images/changeIcon.png'
 import backIcon from '../images/backIcon.png'
 import peopleIcon from '../images/peopleIcon.png'
 import planIcon from '../images/planIcon.png'
+import ablumIcon from '../images/ablumIcon.png'
+import noAblumIcon from '../images/ablumIcon.png'
+import memberIcon from '../images/memberIcon.png'
+import noMemberIcon from '../images/noMemberIcon.png'
+import onlineIcon from '../images/onlineIcon.png'
+import noOnlineIcon from '../images/onlineIcon.png'
+import styleIcon from '../images/styleIcon.png'
+import nostyleIcon from '../images/styleIcon.png'
+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 { getUserInfo, getUserType, getAuth, setAuth } from '@/helpers/utils'
 import { useRoute, useRouter } from 'vue-router'
 import request from '@/helpers/request'
@@ -39,7 +52,8 @@ export default defineComponent({
       title: props.title,
       user: {} as any,
       userType: '',
-      showChange: false
+      showChange: false,
+      iconList:[] as any
     })
     mitt.on('mittFn',()=>{
       console.log('mittFn')
@@ -65,6 +79,34 @@ export default defineComponent({
           states.showChange = false
         }
       }
+      // iconList
+
+      if(states.userType == 'TEACHER'){
+        states.iconList = []
+        if(states.user.tag.indexOf('STYLE') != -1){
+          states.iconList.push(styleIcon)
+        }else{
+          states.iconList.push(nostyleIcon)
+        }
+        if(states.user.tag.indexOf('VIDEO') != -1){
+          states.iconList.push(videoIcon)
+        }else{
+          states.iconList.push(noVideoIcon)
+        }
+        if(states.user.tag.indexOf('LIVE') != -1){
+          states.iconList.push(onlineIcon)
+        }else{
+          states.iconList.push(noOnlineIcon)
+        }
+        if(states.user.tag.indexOf('MUSIC') != -1){
+          states.iconList.push(ablumIcon)
+        }else{
+          states.iconList.push(noAblumIcon)
+        }
+      }else {
+        states.iconList = []
+      }
+      console.log('查看用户登录态',states.user)
     }
     const gotoPage = (val: string) => {
       router.push({ path: val })
@@ -140,13 +182,15 @@ export default defineComponent({
       <>
         <ElDropdown
           onCommand={val => this.changeState(val)}
+          popper-class='loginPopper'
+          trigger="click"
           v-slots={{
             dropdown: () => (
               <>
                 <div class={classes.dropdownWrap}>
                   <div class={classes.dropdownWrapUser}>
-                    <div class={classes.userInfoWrap}>
-                      <img
+                    <div class={classes.userInfoWrap1}>
+                      {/* <img
                         src={
                           this.user.heardUrl
                             ? this.user.heardUrl
@@ -154,10 +198,18 @@ export default defineComponent({
                         }
                         class={classes.userHeader}
                         alt=""
-                      />
+                      /> */}
+                      <div class={classes.titleWrap}>
                       <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="" /> )}
+                      </div>
+
                     </div>
-                    <img src={userBanner} alt="" />
+                    {/* <img src={userBanner} alt="" /> */}
                   </div>
 
                   {this.userType == 'TEACHER' ? (
@@ -230,7 +282,7 @@ export default defineComponent({
           }}
         >
           <div class={classes.userInfoWrap}>
-            <p class={classes.title}>{this.user.username}</p>
+            {/* <p class={classes.title}>{this.user.username}</p> */}
             <img
               src={this.user.heardUrl ? this.user.heardUrl : teacherHeader}
               class={classes.userHeader}

src/views/App.module.less

@@ -12,3 +12,6 @@
   }
 }
 
+:root {
+--theme-color:#1FF0C9;
+}