From 3e970c59ecb999d0ee1aa55c3221bc77e0d0d96c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E4=B8=BD=E5=90=9B?= <664953382@qq.com>
Date: Tue, 14 Sep 2021 17:57:02 +0800
Subject: [PATCH] =?UTF-8?q?copy=20=E7=99=BB=E5=BD=95=E6=B3=A8=E5=86=8C?=
 =?UTF-8?q?=E6=96=B9=E6=B3=95=E5=88=B0header=E7=BB=84=E4=BB=B6=E4=B8=AD?=
 =?UTF-8?q?=E5=B9=B6=E4=BF=9D=E5=AD=98=E6=9C=AA=E5=B0=81=E8=A3=85=E5=89=8D?=
 =?UTF-8?q?=E7=9A=84=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/header/index.vue |   3 +
 src/views/index copy.vue              | 334 ++++++++++++++++++++++++++
 src/views/index.vue                   |   3 -
 3 files changed, 337 insertions(+), 3 deletions(-)
 create mode 100644 src/views/index copy.vue

diff --git a/src/views/components/header/index.vue b/src/views/components/header/index.vue
index 1ba8213..a8062d0 100644
--- a/src/views/components/header/index.vue
+++ b/src/views/components/header/index.vue
@@ -55,6 +55,9 @@ export default {
     };
   },
   methods: {
+    handlePage(flag) {
+      this.$router.push({ path: '/login', query: { status: flag } });
+    },
     handlePath(path) {
       this.path = path;
       this.$router.push({ path });
diff --git a/src/views/index copy.vue b/src/views/index copy.vue
new file mode 100644
index 0000000..6b7578c
--- /dev/null
+++ b/src/views/index copy.vue	
@@ -0,0 +1,334 @@
+<template>
+  <div class="index_page">
+    <!-- 右侧悬浮 -->
+    <div class="slid" v-if="path == '/home'">
+      <div class="item-box">
+        <el-tooltip class="item" effect="dark" placement="left-start">
+          <div class="tip_img" slot="content">
+            <img src="@/assets/image/wx.jpg" alt="" />
+          </div>
+          <div>
+            <img src="@/assets/image/weixin.png" />
+            <div class="text">公众号</div>
+          </div>
+        </el-tooltip>
+      </div>
+      <div class="item-box">
+        <el-tooltip class="item" effect="dark" placement="left-start">
+          <div class="tip_img" slot="content">
+            <img src="@/assets/image/qq.jpg" alt="" />
+          </div>
+          <div>
+            <img src="@/assets/image/qq.png" />
+            <div class="text">QQ群</div>
+          </div>
+        </el-tooltip>
+      </div>
+      <router-link to="/customerService" target="_blank">
+        <div class="item-box">
+          <img src="@/assets/image/service.png" />
+          <div class="text">在线客服</div>
+        </div>
+      </router-link>
+    </div>
+    <!-- <div class="img_box">
+      <img src="@/assets/image/toubu.png" alt="" />
+    </div> -->
+    <!-- 整体宽度 -->
+    <div class="content">
+      <!-- 头部 -->
+      <div class="header p0-100">
+        <div class="login_btn" v-if="!avatar">
+          <el-button type="text" @click="handlePage(true)">登录</el-button>
+          <i class="mark">|</i>
+          <el-button type="text" @click="handlePage(false)">注册</el-button>
+        </div>
+        <div class="avatar-wrapper" v-else @click="handlePath('/mine')">
+          <!-- <span>
+            <i>20</i>
+          </span> -->
+          <el-badge :value="badge" :max="10" class="item">
+            <img :src="avatar" class="user-avatar" />
+          </el-badge>
+        </div>
+        <div class="img2_box">
+          <img src="@/assets/image/02.png" alt="" />
+          <div class="search">
+            <el-input
+              v-model.trim="input"
+              placeholder="请输入搜索关键字"
+              @keyup.enter.native="toSearch"
+            ></el-input>
+            <el-button type="warning" @click="toSearch">一站搜</el-button>
+            <!-- <router-link
+              target="_blank"
+              :to="{ path: '/search', query: { val: input } }"
+            >
+              <el-button type="warning">一站搜</el-button>
+            </router-link> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- ul li 列表 -->
+    <div class="uls">
+      <div class="lis content p0-100">
+        <ul>
+          <li
+            :class="path == item.path ? 'is-active' : ''"
+            v-for="item in lisList"
+            :key="item.path"
+            @click="handlePath(item.path)"
+          >
+            {{ item.name }}
+            <!-- <router-link :to="item.path">
+              {{ item.name }}
+            </router-link> -->
+          </li>
+        </ul>
+      </div>
+    </div>
+    <!-- 路由站位 -->
+    <div class="content" style="padding: 10px 0">
+      <router-view></router-view>
+    </div>
+    <footerPage />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import footerPage from './components/footer';
+// import user from '@/store/modules/user';
+// import { getMsgCount } from '@/api/home/news';
+export default {
+  name: 'home',
+  components: {
+    footerPage
+  },
+  data() {
+    return {
+      input: '',
+      lisList: [
+        {
+          path: '/home',
+          name: '首页'
+        },
+        {
+          path: '/notice',
+          name: '通知公告'
+        },
+        {
+          path: '/demand',
+          name: '企业需求'
+        },
+        {
+          path: '/achievements',
+          name: '科技成果'
+        },
+        {
+          path: '/declare',
+          name: '高企申报'
+        },
+        {
+          path: '/qualifications',
+          name: '资质申报'
+        },
+        {
+          path: '/assessment',
+          name: '智能评估'
+        }
+      ],
+      path: this.$route.path == '/' ? '/home' : this.$route.path
+    };
+  },
+  computed: {
+    ...mapGetters(['avatar', 'badge'])
+  },
+  // watch: {
+  //   badge(newVal, oldVal) {
+  //     if (newVal == 0) {
+  //       document.querySelector('.el-badge sup').style = 'display:none';
+  //     }
+  //   }
+  // },
+  methods: {
+    toSearch() {
+      if (!this.input.length) return this.msgError('请输入搜索关键字');
+      this.$router.push({ path: '/search', query: { val: this.input } });
+      // let routerJump = this.$router.resolve({
+      //   path: '/search',
+      //   query: { val: this.input }
+      // });
+      // window.open(routerJump.href, '_blank');
+    },
+    handlePage(flag) {
+      this.$router.push({ path: '/login', query: { status: flag } });
+    },
+    handlePath(path) {
+      this.path = path;
+      this.$router.push({ path });
+    }
+  },
+  created() {
+    // console.log(this.badge);
+    // console.log(user.state.badge);
+    // getMsgCount().then(({ data }) => {
+    //   console.log(data);
+    //   this.$store.commit('SET_BADGE', data);
+    // });
+  },
+  mounted() {
+    // if (this.badge == 0) {
+    //   document.querySelector('.el-badge sup').style = 'display:none';
+    // }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.index_page {
+  // padding-top: 200px;
+  // .img_box {
+  //   width: 100%;
+  //   height: 750px;
+  //   position: absolute;
+  //   top: 0;
+  //   left: 0;
+  //   z-index: -1;
+  // }
+  .slid {
+    width: 82px;
+    height: 246px;
+    position: fixed;
+    left: 50%;
+    border: 1px solid #dcdcdc;
+    border-bottom: 0;
+    background: #ffffff;
+    margin-left: 720px;
+    top: 400px;
+    .item-box {
+      text-align: center;
+      padding: 15px 0;
+      border-bottom: 1px solid #dcdcdc;
+      .text {
+        font-size: 16px;
+        color: #666;
+      }
+    }
+  }
+
+  .header {
+    height: 206px;
+    background-image: url(../assets/image/01.png);
+    .login_btn {
+      height: 60px;
+      text-align: right;
+      .el-button {
+        font-size: 16px;
+        color: #4097e7;
+        font-weight: bold;
+      }
+      .mark {
+        width: 1px;
+        color: #dcdcdc;
+        margin: 0 14px;
+      }
+    }
+    .avatar-wrapper {
+      text-align: right;
+      .el-badge {
+        // display: block;
+        // position: relative;
+        top: 10px;
+        right: 8px;
+        border: 1px solid #ffa32c;
+        border-radius: 50%;
+        box-shadow: 5px 5px 5px 0px #dadada;
+        .user-avatar {
+          vertical-align: middle;
+          cursor: pointer;
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+        }
+      }
+    }
+    .img2_box {
+      display: flex;
+      justify-content: space-between;
+      height: 63px;
+      margin-top: 75px;
+      img {
+        width: 392px;
+        height: 100%;
+      }
+      /deep/.el-input--medium .el-input__inner {
+        height: 40px;
+        line-height: 40px;
+        border-radius: 6px 0 0 6px;
+        border: 1px solid #ffa32c;
+        border-right: 0;
+      }
+      .search {
+        display: flex;
+        height: 40px;
+        .el-button {
+          border-radius: 0 6px 6px 0;
+          background-color: #ffa32c;
+          font-size: 18px;
+        }
+      }
+    }
+  }
+  .uls {
+    background-color: #ffa32c;
+    height: 48px;
+    line-height: 48px;
+    .lis {
+      ul {
+        margin: 0;
+        list-style: none;
+        padding-left: 0;
+        li {
+          float: left;
+          padding: 0 41px;
+          cursor: pointer;
+          color: #fff;
+          font-size: 24px;
+        }
+        li:hover {
+          background-color: #3394ff;
+        }
+        .is-active {
+          position: relative;
+          background-color: #3394ff;
+        }
+        .is-active::after {
+          content: '';
+          display: block;
+          width: 0;
+          height: 0;
+          border-top: 7px solid transparent;
+          border-bottom: 7px solid #fff;
+          border-left: 7px solid transparent;
+          border-right: 7px solid transparent;
+          position: absolute;
+          bottom: -1px;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+      }
+    }
+  }
+}
+/deep/.el-badge__content.is-fixed {
+  top: 5px;
+  right: 15px;
+}
+@media (max-width: 1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}
+</style>
diff --git a/src/views/index.vue b/src/views/index.vue
index 1ecc60f..c936222 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -130,9 +130,6 @@ export default {
       // });
       // window.open(routerJump.href, '_blank');
     },
-    handlePage(flag) {
-      this.$router.push({ path: '/login', query: { status: flag } });
-    },
     handlePath(path) {
       this.path = path;
       this.$router.push({ path });