xiug

src/views/home/index.vue

@@ -1,30 +1,32 @@
 <template>
   <div class="home">
-    <div class="top-btns">
-      <div class="row">
-        <button class="btn" @click="toInvitePeople">
-          <img src="@/assets/1.png" alt="邀请百姓" class="btn-icon" />
-          <span>邀请百姓</span>
-        </button>
-        <button class="btn" @click="toOfficialGroup">
-          <img src="@/assets/2.png" alt="官方群聊" class="btn-icon" />
-          <span>官方群聊</span>
-        </button>
-      </div>
-      <div class="kefu" @click="toKefu">
-        <img src="@/assets/kefu.jpg" alt="客服" />
-      </div>
-      <div class="row" >
-        <button class="btn" @click="toAppDownload" style="padding:0 6px;">
-          <img src="@/assets/3.png" alt="APP下载" class="btn-icon" style="width: 22px; height: 22px;" />
-          <span>APP下载</span>
-        </button>
-        <button class="btn" @click="toCultureDetail">
-          <img src="@/assets/4.png" alt="央企文化" class="btn-icon" />
-          <span>央企文化</span>
-        </button>
-      </div>
+    <!-- 顶部标题 -->
+    <div class="header-title">
+      <div class="main-title">中国建科</div>
+      <div class="sub-title">守正守望 致高致远</div>
     </div>
+    
+    <!-- 四个功能按钮 -->
+    <div class="function-buttons">
+      <button class="function-btn" @click="toInvitePeople">
+        <img src="@/assets/1.png" alt="邀请人民" class="btn-icon" />
+        <span>邀请人民</span>
+      </button>
+      <button class="function-btn" @click="toKefu">
+        <img src="@/assets/2.png" alt="客服中心" class="btn-icon" />
+        <span>客服中心</span>
+      </button>
+      <button class="function-btn" @click="toOfficialGroup">
+        <img src="@/assets/3.png" alt="人民群聊" class="btn-icon" />
+        <span>人民群聊</span>
+      </button>
+      <button class="function-btn" @click="toAppDownload">
+        <img src="@/assets/4.png" alt="APP下载" class="btn-icon" />
+        <span>APP下载</span>
+      </button>
+    </div>
+
+    <!-- 轮播图 -->
     <div class="carousel">
       <van-swipe
         :autoplay="3000"
@@ -40,29 +42,19 @@
         </van-swipe-item>
       </van-swipe>
     </div>
+    
+    <!-- 团队奖励部分 -->
     <div class="reward-section">
-      <div class="reward-table">
-        <div class="reward-row header">
-          <span>团队奖励</span>
-          <span>一级</span>
-          <span>二级</span>
-          <span>三级</span>
-        </div>
-        <div class="reward-row value">
-          <span></span>
-          <span>20%</span>
-          <span>10%</span>
-          <span>5%</span>
-        </div>
+      <div class="reward-content">
+        <span class="reward-label">团队奖励：</span>
+        <span class="reward-item">一级20%</span>
+        <span class="reward-item">二级15%</span>
+        <span class="reward-item">三级10%</span>
+        <span class="reward-more">更多</span>
       </div>
-      <button 
-        class="party-btn" 
-        :class="{ 'is-member': userInfo.isdangyuan === 1 }"
-        @click="userInfo.isdangyuan === 0 && toApply()"
-      >
-        {{ userInfo.isdangyuan === 1 ? '已是党员' : '党员申请' }}
-      </button>
     </div>
+
+    <!-- 新闻中心 -->
     <div class="news-title">新闻中心</div>
     <div class="news-list">
       <div
@@ -78,6 +70,7 @@
         </template>
       </div>
     </div>
+
     <!-- <van-dialog
       v-model="showAuthDialog"
       :show-confirm-button="false"
@@ -190,15 +183,9 @@ export default {
     toAppDownload() {
       window.open(this.userInfo.link[1].value, '_blank');
     },
-    toCultureDetail() {
-      this.$router.push('/culture/detail');
-    },
     toInvitePeople() {
       this.$router.push('/dynamic');
     },
-    toApply(){
-      this.$router.push('/Apply');
-    },
     toAuth() {
       this.$router.push('/user-center');
       this.showAuthDialog = false;
@@ -225,163 +212,130 @@ export default {
 .home {
   min-height: 100vh;
   width: 100%;
-  background: url('~@/assets/dabag.png') no-repeat;
-  background-size: cover;
-  background-attachment: fixed;
+  background: #b43a39;
   display: flex;
   flex-direction: column;
-  padding:100px 18px 80px;
+  padding: 40px 18px 80px;
   box-sizing: border-box;
   position: relative;
 }
 
-.top-btns {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  margin-top: 15px;
+/* 顶部标题样式 */
+.header-title {
+  text-align: center;
+  margin-bottom: 20px;
   
-  .row {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    margin-bottom: 12px;
-    width: 28%;
+  .main-title {
+    color: #fff;
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 8px;
   }
-
-  .kefu {
-    height: 80px;
-    background: #fff;
-    border: 2px solid #fff;
-    width: 24%;
-    border-radius: 50%;
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 50%;
-    }
+  
+  .sub-title {
+    color: #fff;
+    font-size: 16px;
+    opacity: 0.9;
   }
+}
 
-  .btn {
-    width: 100%;
-    height: 36px;
-    background: #fff;
-    border: none;
-    border-radius: 6px;
-    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;
+/* 四个功能按钮样式 */
+.function-buttons {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px 15px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  
+  .function-btn {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    padding: 0 8px;
-    white-space: nowrap;
-
+    background: none;
+    border: none;
+    padding: 10px 5px;
+    cursor: pointer;
+    transition: all 0.2s;
+    
     &:hover {
-      background: #ffeaea;
+      background: #f5f5f5;
+      border-radius: 8px;
     }
-
+    
     .btn-icon {
-      width: 18px;
-      height: 18px;
-      margin-right: 4px;
-      flex-shrink: 0;
+      width: 32px;
+      height: 32px;
+      margin-bottom: 8px;
     }
-
+    
     span {
-      flex: 0 1 auto;
-      text-align: left;
+      font-size: 12px;
+      color: #333;
+      text-align: center;
+      white-space: nowrap;
     }
   }
 }
+
+/* 轮播图样式 */
 .carousel {
   width: 100%;
-  max-width: 500px;
   margin: 0 auto 16px auto;
   height: 200px;
   background: #fff;
   border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
-  color: #b20000;
-  font-weight: 500;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 }
 
+/* 团队奖励样式 */
 .reward-section {
-  box-sizing: border-box;
-  width: 100%;
   background: #fff;
-  border-radius: 8px;
-  margin: 0 auto 16px auto;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 15px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
-  margin-bottom: 10px;
-  .reward-table {
-    display: grid;
-    grid-template-columns: 1.5fr 1fr 1fr 1fr;
-    width: 100%;
-    .reward-row {
-      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 {
+  border-radius: 25px;
+  padding: 12px 20px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  
+  .reward-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    
+    .reward-label {
+      color: #333;
       font-weight: 500;
     }
-  }
-  .party-btn {
-    width: 130px;
-    background: #ed4b39;
-    color: #fff;
-    border: none;
-    border-radius: 20px;
-    padding: 4px 8px;
-    font-size: 14px;
-    font-weight: 500;
-    margin-left: 12px;
-    cursor: pointer;
-    transition: all 0.2s;
     
-    &:hover {
-      background: #c9301c;
+    .reward-item {
+      color: #333;
+      margin: 0 8px;
     }
-
-    &.is-member {
-      background: #999;
-      cursor: not-allowed;
+    
+    .reward-more {
+      color: #666;
+      cursor: pointer;
       
       &:hover {
-        background: #999;
+        color: #b43a39;
       }
     }
   }
 }
 
+/* 新闻中心标题 */
 .news-title {
-  width: 90%;
   color: #fff;
-  font-size: 20px;
+  font-size: 18px;
   font-weight: bold;
-  text-shadow: 0 2px 8px rgba(0,0,0,0.12);
+  margin-bottom: 12px;
+  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
 }
+
+/* 新闻列表样式 */
 .news-list {
   width: 100%;
   padding-bottom: 40px;
@@ -462,6 +416,7 @@ export default {
   }
 }
 
+/* 弹窗样式 */
 .close-icon-wrapper {
   position: absolute;
   top: 16px;