首页内容:

1.修改客服邮箱和地址
2.修改上报排名样式
3.修改健康科普页面

src/router/index.js

@@ -20,6 +20,10 @@ export const constantRoutes = [
         path: "/allianceintroduction",
         component: () => import("@/views/Home/AllianceIntroduction/index"),
       },
+      {
+        path: "/healthpopularization",
+        component: () => import("@/views/Home/HealthPopularization/index"),
+      },
       {
         path: "/casesharing",
         component: () => import("@/views/Home/CaseSharing/index"),

src/views/Home/index.vue

@@ -5,7 +5,7 @@
         <video :src="videoSrc" controls class="video" />
       </div>
       <!-- 新闻会议tab -->
-      <div class="right box tabbox">
+      <div class="right box tabbox videoboxs">
         <el-tabs v-model="curTab">
           <el-tab-pane
             v-for="(e, index) in tabList"
@@ -28,8 +28,8 @@
         </el-tabs>
       </div>
     </div>
-    <!-- 数据分析 -->
-    <div class="dataAnalysis">
+    <!-- 联盟地图 -->
+    <div class="dataAnalysis map_box">
       <div class="flex">
         <div class="left box cenbox">
           <div class="box_title text-center">联盟地图</div>
@@ -60,11 +60,15 @@
       </div>
     </div>
     <!-- 机构排名 -->
-    <div class="dataAnalysis">
+    <div class="dataAnalysis" style="background: #fff">
       <div class="flex" style="margin-bottom: 0px">
         <div class="box cenbox cenboxs">
           <div class="range left_range">
-            <div class="box_title text-center">累计上报量机构排名</div>
+            <div class="text-center">
+              <span class="range_title text-center">
+                累计上报合格病例数机构排名
+              </span>
+            </div>
             <div class="rangecontent">
               <div class="top20"></div>
               <ul class="rangeList">
@@ -84,7 +88,10 @@
             </div>
           </div>
           <div class="range">
-            <div class="box_title text-center">当前季度上报量机构排名</div>
+            <div class="text-center">
+              <span class="range_title text-center">近90天上报量机构排名</span>
+            </div>
+
             <div class="rangecontent">
               <div class="top10"></div>
               <ul class="rangeList">
@@ -153,12 +160,32 @@
     <!-- 粘性定位 -->
     <div v-show="showFixed" class="fixed_box">
       <ul class="f_list">
-        <li v-for="(item, index) in rigBarList" :key="index">
-          <img :src="item.src" alt="" /><span>{{ item.name }}</span>
-        </li>
-        <li class="qrc_Box">
-          <div class="qr_name">问题反馈群</div>
-        </li>
+        <el-popover
+          popper-class="poperbackground"
+          v-for="(item, index) in rigBarList"
+          :key="index"
+          placement="left-start"
+          title=""
+          width="200"
+          trigger="hover"
+          :content="item.content"
+        >
+          <li
+            slot="reference"
+            :style="{ background: fixIndex == index ? '#4e68ff' : '#fff' }"
+            @mouseenter="fixIndex = index"
+            @mouseleave="fixIndex = -1"
+          >
+            <template v-if="fixIndex == index">
+              <img :src="item.src2" alt="" /><span style="color: #fff">{{
+                item.name
+              }}</span>
+            </template>
+            <template v-else>
+              <img :src="item.src1" alt="" /><span>{{ item.name }}</span>
+            </template>
+          </li>
+        </el-popover>
       </ul>
     </div>
   </div>
@@ -168,6 +195,7 @@ import { getRankTotal, getCurrentQuarter } from "@/api/Home"
 export default {
   data() {
     return {
+      fixIndex: -1,
       // videoSrc: require("../../../public/aaa.mp4"),
       videoSrc: "",
       exTab: "浙江省典型案例",
@@ -185,6 +213,62 @@ export default {
           title: "典型案例小标题典型案例小标题",
           date: "2022-09-26",
         },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
       ],
       tabList: [
         {
@@ -206,6 +290,42 @@ export default {
           title: "典型案例小标题典型案例小标题",
           date: "2022-09-26",
         },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
       ],
       curTab: "新闻会议",
       rangeList: [], // 上报排名
@@ -231,15 +351,21 @@ export default {
       ],
       rigBarList: [
         {
-          src: require("@/assets/img/Home/kefu.png"),
+          src1: require("@/assets/img/Home/kefu.png"),
+          src2: require("@/assets/img/Home/kefuwhite.png"),
+          content: "",
           name: "客服",
         },
         {
-          src: require("@/assets/img/Home/youxiang.png"),
+          src1: require("@/assets/img/Home/youxiang.png"),
+          src2: require("@/assets/img/Home/youxiangwhite.png"),
+          content: "service@gecachina.cn",
           name: "邮箱",
         },
         {
-          src: require("@/assets/img/Home/dizhi.png"),
+          src1: require("@/assets/img/Home/dizhi.png"),
+          src2: require("@/assets/img/Home/dizhiwhite.png"),
+          content: "上海市杨浦区长海路168号综合保障楼4楼",
           name: "地址",
         },
       ],
@@ -247,7 +373,6 @@ export default {
       showFixed: false,
     }
   },
-  watch: {},
   mounted() {
     this.getRankTotal()
     this.getCurrentQuarter()
@@ -270,42 +395,14 @@ export default {
     getRankTotal() {
       getRankTotal().then((res) => {
         if (res.code == 1) {
-          // this.rangeList = res.data
-          this.rangeList = [
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-            { unionName: "包头医学", nums: 12311 },
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-          ]
+          this.rangeList = res.data
         }
       })
     },
     getCurrentQuarter() {
       getCurrentQuarter().then((res) => {
         if (res.code == 1) {
-          // this.curQuarterList = res.data
-          this.curQuarterList = [
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-            { unionName: "包头医学院第二附属医院", nums: 12311 },
-          ]
+          this.curQuarterList = res.data
         }
       })
     },
@@ -315,25 +412,27 @@ export default {
 <style lang="scss" scoped>
 #con {
   .flex {
+    height: 100%;
     display: flex;
     justify-content: space-between;
     margin-bottom: 38px;
     .box {
       width: 48%;
-      height: 300px;
+      height: 100%;
       // background: blue;
       background: #fff;
       .video {
         width: 100%;
-        height: 100%;
-        object-fit: cover;
+        height: 400px;
+        object-fit: fill;
       }
     }
     .tabbox {
       padding: 8px 16px;
+      border-radius: 8px;
       overflow: hidden;
       .tabslist {
-        height: 220px;
+        height: 332px;
         padding-right: 8px;
         overflow: hidden;
         &:hover {
@@ -363,9 +462,11 @@ export default {
         }
       }
     }
+    .videoboxs {
+      height: 100%;
+    }
   }
   .dataAnalysis {
-    background: #fff;
     margin-bottom: 32px;
     padding: 32px;
     .box_title {
@@ -379,6 +480,27 @@ export default {
       margin: 0 auto;
       line-height: 36px;
     }
+    .range_title {
+      position: relative;
+      font-size: 20px;
+      font-family: AlibabaPuHuiTiB;
+      color: #333333;
+      font-weight: bold;
+      &::after {
+        content: "实时统计";
+        font-size: 14px;
+        font-family: AlibabaPuHuiTiR;
+        color: #4e68ff;
+        background: rgba(78, 104, 255, 0.1);
+        border-radius: 2px;
+        width: 62px;
+        height: 20px;
+        font-weight: normal;
+        position: absolute;
+        right: -74px;
+        top: 4px;
+      }
+    }
     .cenbox {
       height: 458px;
       .map {
@@ -466,6 +588,9 @@ export default {
       }
     }
   }
+  .map_box {
+    padding: 0;
+  }
   .healthPopularization {
     .typeList {
       display: flex;
@@ -529,7 +654,7 @@ export default {
   .fixed_box {
     background: #fff;
     position: fixed;
-    padding: 20px 10px;
+    padding: 20px 0px;
     right: 30px;
     bottom: 300px;
     z-index: 1000;
@@ -537,7 +662,8 @@ export default {
       li {
         display: flex;
         align-items: center;
-        margin-bottom: 30px;
+        padding: 16px 14px;
+        cursor: pointer;
         img {
           width: 20px;
           height: 20px;
@@ -550,27 +676,17 @@ export default {
           color: #333333;
         }
       }
-      .qrc_Box {
-        right: 0;
-        display: block;
-        position: absolute;
-        width: 180px;
-        height: 214px;
-        background: #546184
-          linear-gradient(225deg, #707c9c 0%, #94a0c1 0%, #546184 100%);
-        border-radius: 4px;
-        padding: 10px;
-        text-align: center;
-        .qr_name {
-          width: 100%;
-          height: 24px;
-          font-size: 18px;
-          font-family: AlibabaPuHuiTiM;
-          color: #ffffff;
-          line-height: 24px;
-        }
-      }
     }
   }
 }
 </style>
+<style lang="scss">
+.poperbackground {
+  background-color: #4e68ff !important;
+  border-color: #4e68ff !important;
+  color: #ffffff;
+}
+.poperbackground[x-placement^="left"] .popper__arrow::after {
+  border-left-color: #4e68ff;
+}
+</style>