官网登录页改样式

杨泽宇
1 parent 983a7b70
Showing 1 changed file with 82 additions and 76 deletions
src/views/user/cnlive_login.vue
@@ -31,6 +31,7 @@ let errorMsg = reactive({
 });
 let menu = reactive({
   data: [],
+  platform: [],
 });
 /**
  * 登录框上面标题
@@ -97,15 +98,15 @@ const handleCommand = (data: any) =&gt; {
 // 鼠标移入移出菜单效果
 const handleMouseEnter = (ele) => {
   if (ele.target.childNodes[1].classList) {
+    ele.target.childNodes[1].style.display = "block";
     ele.target.childNodes[1].classList.add("animated-fast");
     ele.target.childNodes[1].classList.add("fadeInUpMenu");
-    ele.target.childNodes[1].style.display = "block";
   }
 };
 const handleMouseLeave = (ele) => {
   if (ele.target.childNodes[1].classList) {
-    ele.target.childNodes[1].classList = ["dropdown"];
     ele.target.childNodes[1].style.display = "none";
+    ele.target.childNodes[1].classList = ["dropdown"];
   }
 };
 onMounted(() => {
@@ -115,8 +116,8 @@ onMounted(() =&gt; {
   })
     .then((data) => data.json())
     .then((res) => {
-      console.log(res);
       menu.data = res?.menu;
+      menu.platform = res?.menu[2]?.children;
     });
 });
 </script>
@@ -129,7 +130,7 @@ onMounted(() =&gt; {
           <div id="gtco-logo">
             <a href="http://cnlive.com/">
               <img
-                height="72"
+                height="88"
                 src="https://cnlive-resweb.ks3-cn-beijing.ksyuncs.com/sites/cnlive_web/new-images/logo.png"
                 alt=""
               />
@@ -137,53 +138,35 @@ onMounted(() =&gt; {
           </div>
           <div class="cnlive-list">
-            <!-- <template v-for="(item, index) in menu.data" :key="index">
-              <el-dropdown 
-                v-if="item.children.length"
-                @command="handleCommand"
-                @mouseenter="handleMouseEnter"
-                @mouseleave="handleMouseLeave"
-                :show-timeout="500"
-                :hide-timeout="500"
-              >
-                <span>
-                  {{ item.title }}
-                  <el-icon class="el-icon--right"> </el-icon>
-                </span>
-                <template #dropdown v-if="item.children.length">
-                  <el-dropdown-menu v-if="item.children.length">
-                    <el-dropdown-item
-                      class="cnlive-dropdown-item"
-                      v-for="(ele, i) in item.children"
-                      :key="i"
-                      :command="ele.url"
-                      >{{ ele.title }}</el-dropdown-item
-                    >
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-              <span class="cnlive-single-menu" v-else><a :href="item.url? item.url: '/'">{{item.title}}</a></span>
-            </template> -->
             <div class="text-left menu-1">
-              <ul>
-                <li
-                  class="has-dropdown"
-                  @mouseenter="handleMouseEnter"
-                  @mouseleave="handleMouseLeave"
-                  v-for="(item, index) in menu.data"
+              <div class="menu-one">
+                <a
+                  :href="item.url ? item.url : '/'"
+                  v-for="(item, index) in menu.platform"
                   :key="index"
+                  >{{ item.title }}</a
                 >
-                  <div class="button fadeInUpMenu">
-                    <a :href="item.url ? item.url : '/'"
-                      ><span>{{ item.title }}</span></a
-                    >
-                  </div>
-                  <ul class="dropdown" v-if="item.children.length">
-                    <li v-for="(ele, i) in item.children" :key="i">
-                      <a :href="ele.url ? ele.url : '/'">{{ ele.title }}</a>
-                    </li>
-                  </ul>
-                </li>
+              </div>
+              <ul>
+                <template v-for="(item, index) in menu.data" :key="index">
+                  <li
+                    v-if="index !== 2"
+                    :class="item.children.length ? 'has-dropdown' : ''"
+                    @mouseenter="handleMouseEnter"
+                    @mouseleave="handleMouseLeave"
+                  >
+                    <div class="button">
+                      <a :href="item.url ? item.url : '/'">
+                        <span>{{ item.title }}</span>
+                      </a>
+                    </div>
+                    <ul class="dropdown" v-if="item.children.length">
+                      <li v-for="(ele, i) in item.children" :key="i">
+                        <a :href="ele.url ? ele.url : '/'">{{ ele.title }}</a>
+                      </li>
+                    </ul>
+                  </li>
+                </template>
               </ul>
             </div>
           </div>
@@ -283,36 +266,34 @@ onMounted(() =&gt; {
 @import "https://ks3-cn-beijing.ksyuncs.com/cnlive-resweb/sites/cnlive_web/css/animate.css";
 .cnlive {
   background-color: #f6f7f9;
+  font-family: 微软雅黑, "Droid Sans", Arial, sans-serif;
   &-nav {
     .gtco-nav {
       top: 0;
       margin: 0;
       width: 100%;
-      padding: 20px 0;
+      padding: 17px 0;
       z-index: 1001;
       position: initial;
-      height: 106px;
+      height: 156px;
       background-color: #feffff;
       .wrap {
         width: 1346px;
         margin: 0 auto;
         #gtco-logo {
-          width: 200px;
+          width: 256px;
           display: flex;
           flex-direction: row;
           align-items: center;
           float: left;
           font-size: 20px;
-          margin: 0;
+          margin: 23px 15px 0 0;
           padding: 0;
           text-transform: uppercase;
         }
         .cnlive-list {
           float: left;
           letter-spacing: 1px;
-          margin-top: 20px;
-          margin-left: 20px;
-          // font-weight: 800;
           .el-dropdown {
             margin-left: 60px;
             font-size: 20px;
@@ -323,13 +304,13 @@ onMounted(() =&gt; {
         .cnlive-download {
           width: 170px;
           height: 46px;
-          margin-top: 10px;
+          line-height: 46px;
+          margin-top: 65px;
           text-align: center;
           font-size: 18px;
           padding: 0;
           letter-spacing: 1px;
-          color: white!important;
-          line-height: 46px;
+          color: white !important;
           background-color: #f5a623;
           border-radius: 24px;
           float: right;
@@ -434,8 +415,6 @@ onMounted(() =&gt; {
 <style lang="scss" scoped>
 a {
   text-decoration: none;
-  // color: #000;
-  // *color: #3a3a3a;
   outline: none;
 }
 * {
@@ -462,6 +441,7 @@ body {
 }
 .gtco-nav .menu-1 {
   float: left;
+  margin-top: 25px;
 }
 .gtco-nav ul li.has-dropdown .dropdown:before {
   bottom: 100%;
@@ -476,40 +456,46 @@ body {
   background-size: 20px 12px;
 }
 .gtco-nav ul {
-  padding: 0;
-  margin: 0;
   list-style: none;
   display: inline;
 }
 .gtco-nav .menu-1 ul li {
   float: left;
-  margin-left: 60px;
+  margin-left: 70px;
+  margin-top: 5px;
   position: relative;
+  &:last-child {
+    margin-left: 80px;
+  }
 }
 .gtco-nav .menu-1 ul li a {
   color: #333333;
   font-size: 20px;
-  // font-weight: bold;
 }
 .gtco-nav .menu-1 ul li.has-dropdown:hover a,
 .gtco-nav .menu-1 ul li.has-dropdown:focus a {
   color: #f5a623;
 }
 .gtco-nav .menu-1 ul li.has-dropdown .button a {
-  padding-bottom: 55px;
-  padding-right: 20px;
-  // padding: 14px 10px;
+  padding: 15px 18px;
+  background: url(https://cnlive-resweb.ks3-cn-beijing.ksyuncs.com/sites/cnlive_web/new-images/menu-icon.png)
+    center right no-repeat;
+  background-size: 10px 7px;
+}
+.gtco-nav .menu-1 ul li.has-dropdown:hover .button a {
+  color: #f5a623;
+  background: url(https://cnlive-resweb.ks3-cn-beijing.ksyuncs.com/sites/cnlive_web/new-images/menuhover-icon.png)
+    center right no-repeat;
+  background-size: 10px 7px;
 }
 .gtco-nav .menu-1 ul li.has-dropdown .dropdown {
   border: 1px solid #ccc;
   width: 160px;
   z-index: 1002;
-  // visibility: hidden;
-  // opacity: 0;
   position: absolute;
   display: none;
-  top: 45px;
-  left: -26px;
+  top: 40px;
+  left: 4px;
   text-align: left;
   -webkit-transition: 0s;
   -o-transition: 0s;
@@ -525,8 +511,8 @@ body {
   margin: 0;
   width: 100%;
   text-align: center;
-  line-height: 53px;
   height: 53px;
+  line-height: 53px;
 }
 .gtco-nav .menu-1 ul li.has-dropdown .dropdown li a {
   color: #333;
@@ -540,10 +526,6 @@ body {
   background: #ecf5ff;
   color: #66b1ff;
 }
-.gtco-nav .menu-1 ul li.has-dropdown:nth-child(1) .dropdown,
-.gtco-nav .menu-1 ul li.has-dropdown:nth-child(2) .dropdown {
-  left: -8px;
-}
 /**注册**/
 @keyframes fadeInUpMenu {
   from {
@@ -563,4 +545,28 @@ body {
   -webkit-animation-name: fadeInUpMenu;
   animation-name: fadeInUpMenu;
 }
+.menu-one {
+  margin: 0 0 25px 90px;
+  text-align: left;
+  a {
+    font-size: 18px;
+    height: 24px;
+    line-height: 24px;
+    color: #999;
+    margin: 0;
+    margin-left: 6px;
+    padding: 0 40px;
+    letter-spacing: 1px;
+    border-right: 1px solid #d8d8d8;
+    display: inline-block;
+    &:first-child {
+      padding-left: 0;
+      margin-left: 0;
+    }
+    &:last-child {
+      border: none;
+      padding-right: 0;
+    }
+  }
+}
 </style>