1.修改首页排名排版布局

2.增加解决方案路由

src/components/layout/index.vue

@@ -108,6 +108,10 @@ export default {
           route: "/casesharing",
           name: "案例分享",
         },
+        {
+          route: "/solution",
+          name: "解决方案",
+        },
       ],
       loading: false,
       rules: {
@@ -159,7 +163,9 @@ export default {
               const routerPath =
                 !this.redirect || this.redirect === "/404" ? "/" : this.redirect
               this.$router.push({ path: routerPath }).catch((e) => {})
-              this.loading = false
+              setTimeout(() => {
+                this.loading = false
+              }, 800)
             })
             .catch((e) => {
               this.loading = false

src/router/index.js

@@ -29,8 +29,8 @@ export const constantRoutes = [
         component: () => import("@/views/Home/ScientificResearch/index"),
       },
       {
-        path: "/healthpopularization",
-        component: () => import("@/views/Home/HealthPopularization/index"),
+        path: "/solution",
+        component: () => import("@/views/Home/Solution/index"),
       },
     ],
   },

src/views/Home/Solution/index.vue

+<template>
+  <div>解决方案</div>
+</template>
+<script>
+export default {
+  data() {
+    return {}
+  },
+  methods: {},
+  mounted() {},
+  watch: {},
+}
+</script>
+<style lang="scss" scoped></style>

src/views/Home/index.vue

@@ -35,7 +35,7 @@
           <div class="box_title text-center">联盟地图</div>
           <img class="map" src="~@/assets/img/Home/map.png" alt="" />
         </div>
-        <div class="right box tabbox">
+        <div class="right box tabbox" style="height: 458px">
           <el-tabs v-model="exTab">
             <el-tab-pane
               v-for="(e, index) in example"
@@ -43,7 +43,7 @@
               :label="e.title"
               :name="e.title"
             >
-              <ul class="tabslist" style="height: 100%">
+              <ul class="tabslist" style="height: 380px">
                 <li v-for="(item, index) in exampleList" :key="index">
                   <div class="left">
                     <div class="circle"></div>
@@ -59,19 +59,22 @@
         </div>
       </div>
     </div>
-    <!-- 健康科普 -->
+    <!-- 机构排名 -->
     <div class="dataAnalysis">
       <div class="flex" style="margin-bottom: 0px">
-        <div class="left box cenbox cenboxs" style="background: transparent">
-          <div class="range">
+        <div class="box cenbox cenboxs">
+          <div class="range left_range">
             <div class="box_title text-center">累计上报量机构排名</div>
             <div class="rangecontent">
-              <div class="top10"></div>
+              <div class="top20"></div>
               <ul class="rangeList">
                 <li
                   v-for="(item, index) in rangeList"
                   :key="index"
-                  :style="{ color: index < 3 ? '#4E68FF' : '#333333' }"
+                  :style="{
+                    color: index < 3 ? '#4E68FF' : '#333333',
+                    alignSelf: index > 9 ? 'flex-end' : '',
+                  }"
                 >
                   <div>{{ index + 1 }}</div>
                   <div>{{ item.unionName }}</div>
@@ -88,7 +91,9 @@
                 <li
                   v-for="(item, index) in curQuarterList"
                   :key="index"
-                  :style="{ color: index < 3 ? '#4E68FF' : '#333333' }"
+                  :style="{
+                    color: index < 3 ? '#4E68FF' : '#333333',
+                  }"
                 >
                   <div>{{ index + 1 }}</div>
                   <div>{{ item.unionName }}</div>
@@ -98,36 +103,32 @@
             </div>
           </div>
         </div>
-        <div
-          class="right box tabbox"
-          style="background: transparent; padding-top: 0px"
-        >
-          <!-- 健康科普 -->
-          <div class="healthPopularization">
-            <div class="title_box">
-              <div class="title">健康科普</div>
-              <div class="empty"></div>
-            </div>
-            <ul class="typeList">
-              <li
-                v-for="(item, index) in typeList"
-                :key="index"
-                :style="{ backgroundImage: 'url(' + item.src + ')' }"
-                @click="
-                  $router.push({
-                    path: '/healthpopularization',
-                    query: { tabIndex: index },
-                  })
-                "
-              >
-                {{ item.name }}
-              </li>
-            </ul>
-          </div>
-        </div>
       </div>
     </div>
 
+    <!-- 健康科普 -->
+    <div class="healthPopularization">
+      <div class="title_box">
+        <div class="title">健康科普</div>
+        <div class="empty"></div>
+      </div>
+      <ul class="typeList">
+        <li
+          v-for="(item, index) in typeList"
+          :key="index"
+          :style="{ backgroundImage: 'url(' + item.src + ')' }"
+          @click="
+            $router.push({
+              path: '/healthpopularization',
+              query: { tabIndex: index },
+            })
+          "
+        >
+          {{ item.name }}
+        </li>
+      </ul>
+    </div>
+
     <!--  科学研究 -->
     <div class="scientificresearch">
       <div class="title_box">
@@ -205,34 +206,6 @@ 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",
-        },
       ],
       curTab: "新闻会议",
       rangeList: [], // 上报排名
@@ -297,14 +270,42 @@ export default {
     getRankTotal() {
       getRankTotal().then((res) => {
         if (res.code == 1) {
-          this.rangeList = res.data
+          // 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 },
+          ]
         }
       })
     },
     getCurrentQuarter() {
       getCurrentQuarter().then((res) => {
         if (res.code == 1) {
-          this.curQuarterList = res.data
+          // 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 },
+          ]
         }
       })
     },
@@ -319,7 +320,7 @@ export default {
     margin-bottom: 38px;
     .box {
       width: 48%;
-      // height: 300px;
+      height: 300px;
       // background: blue;
       background: #fff;
       .video {
@@ -364,6 +365,9 @@ export default {
     }
   }
   .dataAnalysis {
+    background: #fff;
+    margin-bottom: 32px;
+    padding: 32px;
     .box_title {
       width: 180px;
       height: 36px;
@@ -377,8 +381,6 @@ export default {
     }
     .cenbox {
       height: 458px;
-      // background: url("~@/assets/img/Home/map.png") no-repeat center center;
-      // background-size: cover;
       .map {
         width: 100%;
         height: 422px;
@@ -386,21 +388,20 @@ export default {
       }
     }
     .cenboxs {
+      width: 100%;
       display: flex;
       justify-content: space-between;
-
       .range {
-        width: 46%;
+        width: 32%;
         background: #ffffff;
         border-radius: 4px;
-        border: 1px solid #d2d7f5;
         padding: 0 7px;
         .rangecontent {
-          margin-top: 6px;
+          margin-top: 24px;
           height: 408px;
-          background: rgba(78, 104, 255, 0.06);
+          background: rgba(78, 104, 255, 0.04);
           border-radius: 4px;
-          padding: 8px;
+          padding: 24px 32px;
           font-size: 14px;
           font-family: AlibabaPuHuiTiM;
           // color: #4e68ff;
@@ -426,7 +427,41 @@ export default {
           background: url("~@/assets/img/Home/top10.png") no-repeat center
             center;
           background-size: contain;
-          margin-bottom: 8px;
+          margin-bottom: 18px;
+        }
+        .top20 {
+          height: 32px;
+          background: url("~@/assets/img/Home/top20.png") no-repeat center
+            center;
+          background-size: contain;
+          margin-bottom: 18px;
+        }
+      }
+      .left_range {
+        width: 60%;
+        .rangecontent {
+          .rangeList {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: wrap;
+            li {
+              width: 40%;
+              margin-bottom: 14px;
+              display: flex;
+              justify-content: space-between;
+
+              div:nth-child(1) {
+                width: 20px;
+              }
+              div:nth-child(2) {
+                flex: 1;
+              }
+              div:nth-child(3) {
+                text-align: right;
+              }
+            }
+          }
         }
       }
     }
@@ -438,7 +473,7 @@ export default {
       justify-content: space-between;
       li {
         cursor: pointer;
-        width: 43%;
+        width: 23%;
         margin-bottom: 24px;
         height: 188px;
         display: flex;