首页

src/api/home.js

@@ -1,3 +1,4 @@
 import request from "@/utils/request";
 //获取轮播图
-export const getBanners = (data) => request({ url: "index/get_banners", method: "post", data,loading:true });
+export const getBanners = (data) => request({ url: "index/get_banners", method: "post", data,loading:true });
+export const getUserInfo = (data) => request({ url: "user/get_userinfo", method: "post", data,loading:true });

src/views/home/index.vue

@@ -3,28 +3,27 @@
     <div class="top-btns">
       <div class="row">
         <button class="btn">邀请百姓</button>
-        <button class="btn">APP下载</button>
+        <button class="btn" @click="toOfficialGroup">官方群聊</button>
+      </div>
+      <div class="kefu">
+        <img src="@/assets/kefu.jpg" alt="客服" />
       </div>
-      
       <div class="row">
-        <button class="btn">党员申请</button>
-        <button class="btn">党员申请</button>
+        <button class="btn" @click="toAppDownload">APP下载</button>
+        <button class="btn">央企文化</button>
       </div>
     </div>
-    <div class="avatar-box">
-      <img class="avatar" src="" alt="客服" />
-    </div>
     <div class="carousel">
       <van-swipe
         :autoplay="3000"
         indicator-color="#ed4b39"
-        style="width: 100%; height: 80px; border-radius: 8px; overflow: hidden;"
+        style="width: 100%; height: 100px; border-radius: 8px; overflow: hidden;"
       >
         <van-swipe-item v-for="(banner, index) in banners" :key="index">
           <img
             :src="banner"
             alt="轮播图"
-            style="width: 100%; height: 80px; object-fit: cover;"
+            style="width: 100%; height: 100px; object-fit: cover;"
           />
         </van-swipe-item>
       </van-swipe>
@@ -37,7 +36,7 @@
           <span>二级</span>
           <span>三级</span>
         </div>
-        <div class="reward-row">
+        <div class="reward-row value">
           <span></span>
           <span>20%</span>
           <span>10%</span>
@@ -70,13 +69,14 @@
 </template>
 
 <script>
-import { getBanners } from '@/api/home';
+import { getBanners, getUserInfo } from '@/api/home';
 import { Swipe, SwipeItem } from 'vant';
 export default {
   name: "Home",
   data() {
     return {
-      banners: []
+      banners: [],
+      userInfo: {}
     };
   },
   components: {
@@ -85,14 +85,24 @@ export default {
   },
   mounted() {
     this.getBanners();
+    this.getUserInfo();
   },
   methods: {
+    async getUserInfo() {
+      const res = await getUserInfo();
+      this.userInfo = res.data;
+    },
     async getBanners() {
       const formData = new FormData();
       formData.append('cid', 5);
       const res = await getBanners(formData);
       this.banners = res.data.map(url => url.replace(/^https:/, 'http:'));
-      console.log(this.banners);
+    },
+    toOfficialGroup() {
+      window.open(this.userInfo.link[2].value, '_blank');
+    },
+    toAppDownload() {
+      window.open(this.userInfo.link[1].value, '_blank');
     }
   }
 };
@@ -112,51 +122,50 @@ export default {
 }
 
 .top-btns {
-  width: 90%;
-  margin: 60px auto 16px auto;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
   .row {
     display: flex;
     justify-content: center;
-    gap: 24px;
+    flex-direction: column;
     margin-bottom: 12px;
+    width: 28%;
   }
+   .kefu{
+      height: 80px;
+      background: #fff;
+      border: 2px solid #fff;
+      width: 24%;
+      img{
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
   .btn {
-    width: 120px;
+    width: 100%;
     height: 36px;
     background: #fff;
     border: none;
     border-radius: 6px;
-    font-size: 16px;
-    color: #b20000;
+    font-size: 14px;
+    color: #000;
     font-weight: 500;
     box-shadow: 0 2px 8px rgba(0,0,0,0.04);
     cursor: pointer;
     transition: background 0.2s;
+    margin-bottom: 12px;
     &:hover {
       background: #ffeaea;
     }
   }
 }
-
-.avatar-box {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 16px;
-  .avatar {
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    object-fit: cover;
-    background: #fff;
-    border: 2px solid #fff;
-  }
-}
-
 .carousel {
   width: 100%;
   max-width: 500px;
   margin: 0 auto 16px auto;
-  height: 80px;
+  height: 100px;
   background: #fff;
   border-radius: 8px;
   display: flex;
@@ -180,25 +189,34 @@ export default {
   box-shadow: 0 2px 8px rgba(0,0,0,0.04);
 
   .reward-table {
-    flex: 1;
+    display: grid;
+    grid-template-columns: 1.5fr 1fr 1fr 1fr;
+    width: 100%;
     .reward-row {
-      display: flex;
-      justify-content: space-between;
-      font-size: 15px;
-      color: #b20000;
-      margin-bottom: 2px;
-      &.header {
+      display: contents;
+      &.header span,
+      &.value span {
+        padding: 4px 0;
+        text-align: center;
+        font-size: 12px;
+        color: #000;
+      }
+      &.header span {
         font-weight: bold;
       }
     }
+    .reward-row.value span {
+      font-weight: 500;
+    }
   }
   .party-btn {
+    width: 130px;
     background: #ed4b39;
     color: #fff;
     border: none;
     border-radius: 20px;
-    padding: 8px 18px;
-    font-size: 15px;
+    padding: 4px 8px;
+    font-size: 14px;
     font-weight: 500;
     margin-left: 12px;
     cursor: pointer;