logo+menu更新

src/layout/index/native.vue

@@ -1,25 +1,21 @@
 <template>
   <div id="native">
     <el-row>
-      <el-col :span="24">
-          <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" background-color="#336699"
-                   text-color="#fff" active-text-color="#fff" style="height:40px;" :router="true">
-            <template v-for="(item, index) in menu">
-              <el-submenu :index="`${index}`" :key="index" v-if="item.type !== 'url' && item.type !== 'content'">
-                <template slot="title">
-                  {{ item.title }}
-                </template>
-                <template v-for="(sub, subIndex) in item.children">
-                  <el-menu-item :index="`${index}-${subIndex}`" :key="subIndex+'sub'" v-if="sub.children"
-                                style="float:left">
-                    <template slot="title">
-                      {{ sub.title }}
-                    </template>
-                  </el-menu-item>
-                </template>
-              </el-submenu>
-            </template>
-          </el-menu>
+      <el-col :span="24" class="info">
+        <ul class="menu">
+          <li class="submenu">新闻资讯
+            <ul class="submenu-ul">
+              <li>新闻资讯</li>
+              <li>新闻资讯</li>
+            </ul>
+          </li>
+          <li class="submenu">计算服务
+            <ul class="submenu-ul">
+              <li>计算服务</li>
+              <li>计算服务</li>
+            </ul>
+          </li>
+        </ul>
       </el-col>
     </el-row>
   </div>
@@ -48,8 +44,58 @@ export default {
 </script>
 
 <style lang="less" scoped>
-/deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
-  height: 40px;
-  line-height: 40px;
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.info {
+  height: 70px;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.menu {
+  text-align: left;
+  display: inline-block;
+}
+.menu .submenu {
+  float: left;
+  position: relative;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  padding: 20px 21px;
+  font-size: 23px;
+  color: #fff;
+  border-right: 1px solid #ccc;
+  cursor: pointer;
+}
+.menu .submenu:hover {
+  background-color: #215299;
+}
+.submenu-ul {
+  position: fixed;
+  top: 120px;
+  left: 76px;
+  width: 1200px;
+  display: none;
+  z-index: 1;
+  background: rgba(0, 0, 0, 0.4);
+  text-align: center;
+  border-radius: 10px;
+  -webkit-box-shadow: 0 0 5px #ccc;
+  box-shadow: 0 0 5px #ccc;
+}
+
+/*这里定义了二级菜单的子项的宽度*/
+.submenu-ul li {
+  width: 135px;
+  height: 70px;
+  line-height: 70px;
+  float: left;
+}
+.submenu-ul li:hover {
+  background-color: #215299;
+}
+li:hover ul {
+  display: block; /*当鼠标放到一级菜单上的li时为li下的ul标签也就是二级菜单附加类，使其能够显示*/
 }
 </style>

src/layout/index/top.vue

@@ -4,7 +4,7 @@
       <el-col :span="24" class="image">
         <!-- <el-image :src="topInfo.logo" v-if="topInfo && topInfo.logo"></el-image> -->
          <!-- <el-image :src="topInfo.logo"></el-image> -->
-         <el-image :src="topInfos.logo" @click="$router.push({ path: '/' })"></el-image>
+         <el-image :src="logo" @click="$router.push({ path: '/' })"></el-image>
       </el-col>
     </el-row>
   </div>
@@ -18,7 +18,9 @@ export default {
     topInfos:null,
   },
   components: {},
-  data: () => ({}),
+  data: () => ({
+    logo: require('../../assets/logo.png'),
+  }),
   created() {},
   computed: {},
   methods: {},

src/views/index/index.vue

@@ -100,7 +100,7 @@ export default {
 }
 .menu {
   margin-bottom: 20px;
-  height: 40px;
+  height: 70px;
 }
 .main {
   margin-bottom: 20px;