1

src/components/common/top copy.vue

@@ -0,0 +1,126 @@
+<template>
+  <div id="top">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          环南湖科创先导区双创服务平台
+        </el-col>
+        <el-col :span="24" class="two">
+          环南湖科创先导区双创服务平台
+        </el-col>
+        <el-col :span="24" class="thr">
+          <div class="w_1200">
+            <el-col :span="24" class="menuInfo">
+              <ul>
+                <li :class="isTab('news') ? 'active' : ''">
+                  <a @click="turnTo('news')" target="">新闻资讯</a>
+                </li>
+                <li :class="isTab('service') ? 'active' : ''">
+                  <a @click="turnTo('service')" target="">科技服务</a>
+                </li>
+                <li :class="isTab('market') ? 'active' : ''">
+                  <a @click="turnTo('market')" target="">技术超市</a>
+                </li>
+                <li :class="isTab('train') ? 'active' : ''">
+                  <a @click="turnTo('train')" target="">宣传培训</a>
+                </li>
+                <li :class="isTab('dynamic') ? 'active' : ''">
+                  <a @click="turnTo('dynamic')" target="">数据动态</a>
+                </li>
+              </ul>
+            </el-col>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'top',
+  props: {},
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {
+    turnTo(type) {
+      this.$router.push({ path: `/${type}/index` });
+    },
+    // 选中
+    isTab(type) {
+      return this.$route.path.includes(`/${type}`);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.main {
+  height: 150px;
+  border-bottom: 1px solid #ff0000;
+  // .one {
+  // }
+  // .two {
+  // }
+  .thr {
+    .menuInfo {
+      height: 50px;
+      overflow: hidden;
+      background: #0085d2;
+      ul {
+        margin: 0;
+        padding: 0;
+        li {
+          float: left;
+          width: 239px;
+          height: 50px;
+          line-height: 50px;
+          list-style: none;
+          text-align: center;
+          font-size: 20px;
+          border-right: 1px solid #f1f1f1;
+          color: #fff;
+          a {
+            float: left;
+            width: 100%;
+            height: 50px;
+            line-height: 50px;
+          }
+        }
+        li:hover {
+          cursor: pointer;
+          background-color: #fe950e;
+        }
+      }
+      ul .active {
+        background-color: #fe950e;
+      }
+      ul li:last-child {
+        width: 240px;
+        border-right: 0;
+      }
+    }
+  }
+}
+</style>

src/components/common/top.vue

@@ -3,33 +3,13 @@
     <el-row>
       <el-col :span="24" class="main">
         <el-col :span="24" class="one">
-          环南湖科创先导区双创服务平台
+          第一部分
         </el-col>
-        <el-col :span="24" class="two">
-          环南湖科创先导区双创服务平台
+        <el-col :span="24" class="tow">
+          第二
         </el-col>
         <el-col :span="24" class="thr">
-          <div class="w_1200">
-            <el-col :span="24" class="menuInfo">
-              <ul>
-                <li :class="isTab('news') ? 'active' : ''">
-                  <a @click="turnTo('news')" target="">新闻资讯</a>
-                </li>
-                <li :class="isTab('service') ? 'active' : ''">
-                  <a @click="turnTo('service')" target="">科技服务</a>
-                </li>
-                <li :class="isTab('market') ? 'active' : ''">
-                  <a @click="turnTo('market')" target="">技术超市</a>
-                </li>
-                <li :class="isTab('train') ? 'active' : ''">
-                  <a @click="turnTo('train')" target="">宣传培训</a>
-                </li>
-                <li :class="isTab('dynamic') ? 'active' : ''">
-                  <a @click="turnTo('dynamic')" target="">数据动态</a>
-                </li>
-              </ul>
-            </el-col>
-          </div>
+          <el-image :src="beijing"></el-image>
         </el-col>
       </el-col>
     </el-row>
@@ -43,18 +23,12 @@ export default {
   props: {},
   components: {},
   data: function() {
-    return {};
+    return {
+      beijing: require('@a/beijing.png'),
+    };
   },
   created() {},
-  methods: {
-    turnTo(type) {
-      this.$router.push({ path: `/${type}/index` });
-    },
-    // 选中
-    isTab(type) {
-      return this.$route.path.includes(`/${type}`);
-    },
-  },
+  methods: {},
   computed: {
     ...mapState(['user']),
   },
@@ -71,56 +45,4 @@ export default {
 };
 </script>
 
-<style lang="less" scoped>
-.w_1200 {
-  width: 1200px;
-  margin: 0 auto;
-}
-.main {
-  height: 150px;
-  border-bottom: 1px solid #ff0000;
-  // .one {
-  // }
-  // .two {
-  // }
-  .thr {
-    .menuInfo {
-      height: 50px;
-      overflow: hidden;
-      background: #0085d2;
-      ul {
-        margin: 0;
-        padding: 0;
-        li {
-          float: left;
-          width: 239px;
-          height: 50px;
-          line-height: 50px;
-          list-style: none;
-          text-align: center;
-          font-size: 20px;
-          border-right: 1px solid #f1f1f1;
-          color: #fff;
-          a {
-            float: left;
-            width: 100%;
-            height: 50px;
-            line-height: 50px;
-          }
-        }
-        li:hover {
-          cursor: pointer;
-          background-color: #fe950e;
-        }
-      }
-      ul .active {
-        background-color: #fe950e;
-      }
-      ul li:last-child {
-        width: 240px;
-        border-right: 0;
-      }
-    }
-  }
-}
-</style>
+<style lang="less" scoped></style>