menu style

杨泽宇
1 parent e65b2377
Showing 1 changed file with 197 additions and 5 deletions
src/views/user/cnlive_login.vue
@@ -94,6 +94,20 @@ const handleCommand = (data: any) =&gt; {
     router.push({ path: "/" });
   }
 };
+// 鼠标移入移出菜单效果
+const handleMouseEnter = (ele) => {
+  if (ele.target.childNodes[1].classList) {
+    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";
+  }
+};
 onMounted(() => {
   window.localStorage.setItem("isCnlive", true);
   fetch("http://systk.cnlive.com/ocms/.content/function_provider/menu.json", {
@@ -101,6 +115,7 @@ onMounted(() =&gt; {
   })
     .then((data) => data.json())
     .then((res) => {
+      console.log(res);
       menu.data = res?.menu;
     });
 });
@@ -114,6 +129,7 @@ onMounted(() =&gt; {
           <div id="gtco-logo">
             <a href="http://cnlive.com/">
               <img
+                height="72"
                 src="https://cnlive-resweb.ks3-cn-beijing.ksyuncs.com/sites/cnlive_web/new-images/logo.png"
                 alt=""
               />
@@ -121,10 +137,14 @@ onMounted(() =&gt; {
           </div>
  
           <div class="cnlive-list">
-            <template v-for="(item, index) in menu.data" :key="index">
+            <!-- <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 }}
@@ -133,6 +153,7 @@ onMounted(() =&gt; {
                 <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"
@@ -142,7 +163,29 @@ onMounted(() =&gt; {
                 </template>
               </el-dropdown>
               <span class="cnlive-single-menu" v-else><a :href="item.url? item.url: '/'">{{item.title}}</a></span>
-            </template>
+            </template> -->
+            <div class="text-left menu-1">
+              <ul>
+                <li
+                  class="has-dropdown"
+                  @mouseenter="handleMouseEnter"
+                  @mouseleave="handleMouseLeave"
+                  v-for="(item, index) in menu.data"
+                  :key="index"
+                >
+                  <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>
+              </ul>
+            </div>
           </div>
  
           <div class="cnlive-download">
@@ -230,12 +273,15 @@ onMounted(() =&gt; {
       <p>
         网家家APP、Cnlive.com 《信息网络传播视听节目许可证》、许可证号：0105123
       </p>
-      <p>京ICP证090477号、京ICP备11041453号-1、京公网安备11010802024488号、联系电话：010-65832485</p>
+      <p>
+        京ICP证090477号、京ICP备11041453号-1、京公网安备11010802024488号、联系电话：010-65832485
+      </p>
     </div>
   </div>
 </template>
  
 <style lang="scss">
+@import "https://ks3-cn-beijing.ksyuncs.com/cnlive-resweb/sites/cnlive_web/css/animate.css";
 .cnlive {
   background-color: #f6f7f9;
   &-nav {
@@ -264,8 +310,10 @@ onMounted(() =&gt; {
         }
         .cnlive-list {
           float: left;
+          letter-spacing: 1px;
           margin-top: 20px;
-          font-weight: 800;
+          margin-left: 20px;
+          // font-weight: 800;
           .el-dropdown {
             margin-left: 60px;
             font-size: 20px;
@@ -280,7 +328,8 @@ onMounted(() =&gt; {
           text-align: center;
           font-size: 18px;
           padding: 0;
-          color: white;
+          letter-spacing: 1px;
+          color: white!important;
           line-height: 46px;
           background-color: #f5a623;
           border-radius: 24px;
@@ -366,6 +415,15 @@ onMounted(() =&gt; {
     position: absolute;
   }
 }
+.gold-color {
+  span {
+    color: #f5a623;
+  }
+}
+.cnlive-dropdown-item {
+  width: 160px;
+  text-align: center;
+}
 .clearfix {
   zoom: 1;
 }
@@ -373,3 +431,137 @@ onMounted(() =&gt; {
   text-align: left;
 }
 </style>
+
+<style lang="scss" scoped>
+a {
+  text-decoration: none;
+  // color: #000;
+  // *color: #3a3a3a;
+  outline: none;
+}
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.clearfix {
+  zoom: 1;
+}
+.clearfix:after {
+  display: block;
+  content: "clear";
+  clear: both;
+  line-height: 0;
+  visibility: hidden;
+}
+html,
+body {
+  background: #f6f7f9;
+  min-width: 1346px;
+  letter-spacing: 1px;
+  font-family: 微软雅黑, "Droid Sans", Arial, sans-serif;
+}
+.gtco-nav .menu-1 {
+  float: left;
+}
+.gtco-nav ul li.has-dropdown .dropdown:before {
+  bottom: 100%;
+  left: 50%;
+  border: solid transparent;
+  content: " ";
+  position: absolute;
+  border-width: 8px;
+  margin-left: -10px;
+  background: url(https://cnlive-resweb.ks3-cn-beijing.ksyuncs.com/sites/cnlive_web/new-images/top-jian.jpg)
+    center -2px no-repeat;
+  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;
+  position: relative;
+}
+.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;
+}
+.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;
+  text-align: left;
+  -webkit-transition: 0s;
+  -o-transition: 0s;
+  transition: 0s;
+  padding: 10px 0;
+  margin: 5px 0;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  background: #fff;
+}
+.gtco-nav .menu-1 ul li.has-dropdown .dropdown li {
+  margin: 0;
+  width: 100%;
+  text-align: center;
+  line-height: 53px;
+  height: 53px;
+}
+.gtco-nav .menu-1 ul li.has-dropdown .dropdown li a {
+  color: #333;
+  font-size: 18px;
+  height: 53px;
+  line-height: 53px;
+  display: block;
+  font-weight: normal;
+}
+.gtco-nav .menu-1 ul li.has-dropdown .dropdown li a:hover {
+  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 {
+    opacity: 0;
+    visibility: hidden;
+    -webkit-transform: translate3d(0, 20px, 0);
+    transform: translate3d(0, 20px, 0);
+  }
+  to {
+    visibility: visible;
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+.fadeInUpMenu {
+  -webkit-animation-name: fadeInUpMenu;
+  animation-name: fadeInUpMenu;
+}
+</style>