bufix

src/components/Header.vue

+<template>
+  <div class="header_topBar">
+    <router-link to="/homePage" style="cursor: pointer; display: flex">
+      <img class="tabar_logo" src="../../public/logo.png" alt="土星云" />
+      <span class="tabar_title">土星云</span>
+    </router-link>
+    <div class="navBar">
+      <div class="navBarLine"></div>
+      <div class="navBarLine"></div>
+      <div class="navBarLine"></div>
+      <van-dropdown-menu>
+        <van-dropdown-item
+          :value="active"
+          :options="list"
+          @change="toHandler"
+        />
+      </van-dropdown-menu>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      options: [
+        { text: '首页', to: '/' },
+        { text: '私有云', to: '/' },
+        { text: '公有云', to: '/publicScs' },
+        { text: '生态合作', to: '/cooperate' },
+        { text: '关于我们', to: '/aboutUs' },
+        { text: '控制台', to: 'https://xxyy.co/#/dashboard', target: '_blank' },
+      ],
+    }
+  },
+  computed: {
+    active() {
+      return this.list.find((item) => item.to === this.$route.path)?.value || 0
+    },
+    list() {
+      return this.options.map((item, value) => ({
+        ...item,
+        value,
+      }))
+    },
+  },
+  methods: {
+    toHandler(ind) {
+      const path = this.options[ind].to
+      if (path.startsWith('http')) {
+        window.open(path)
+      } else {
+        this.$router.push(path)
+      }
+    },
+  },
+}
+</script>

src/main.js

@@ -4,16 +4,18 @@ import App from './App.vue'
 import router from './router'
 import 'amfe-flexible/index'
 import './services/vant'
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
-import applyFriendLink from './utils/applyFriendLink';
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import applyFriendLink from './utils/applyFriendLink'
+import Header from './components/Header'
 
-applyFriendLink();
+applyFriendLink()
 
-Vue.config.productionTip = false;
-Vue.use(ElementUI);
+Vue.config.productionTip = false
+Vue.use(ElementUI)
+Vue.component('website-header', Header)
 
 new Vue({
   router,
-  render: h => h(App)
+  render: (h) => h(App),
 }).$mount('#app')