退休计划

src/views/Mall.vue

@@ -1,17 +1,148 @@
 <template>
-  <div class="mall">
-    <h1>商城</h1>
+  <div class="usremei-container">
+    <div class="top-bg"></div>
+    <div class="desc-card">
+      <div class="desc-title">国家社会保险公共服务平台《民生为本》万亿补贴！</div>
+      <div class="desc-content">
+        国家鼓励民众参与《退休计划补贴政策》，使用红旗资产参与退休计划获得退休金，退休金是国家按照社会保障制度规定，根据对社会所作出的贡献和所具备的享有享受养老保险待遇或退休条件，因年老丧失劳动能力退出劳动岗位后的基本生活而建立的一种社会保险制度，主要用于保障职工退休后的生活需要
+      </div>
+    </div>
+    <div
+      class="plan-card"
+      v-for="item in plans"
+      :key="item.level"
+    >
+      <div class="plan-header">
+        {{ item.level }}退休补贴金
+      </div>
+      <div class="plan-table-row">
+        <div class="plan-col">
+          <div class="plan-label">参与金额</div>
+          <div class="plan-value">{{ item.amount }}</div>
+        </div>
+        <div class="plan-col">
+          <div class="plan-label">退休金</div>
+          <div class="plan-value">{{ item.pension }}</div>
+        </div>
+        <div class="plan-col">
+          <div class="plan-label">日收益</div>
+          <div class="plan-value">{{ item.daily }}</div>
+        </div>
+        <div class="plan-col-btn">
+          <button class="plan-btn">立即参与</button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'Mall'
+  name: 'Mall',
+  data() {
+    return {
+      plans: [
+        { level: '初级', amount: '30000红旗资产', pension: '3000元', daily: '10%' },
+        { level: '一级', amount: '60000红旗资产', pension: '6000元', daily: '10%' },
+        { level: '二级', amount: '100000红旗资产', pension: '10000元', daily: '10%' },
+        { level: '三级', amount: '200000红旗资产', pension: '20000元', daily: '10%' },
+      ]
+    }
+  }
 }
 </script>
 
 <style scoped>
-.mall {
-  padding: 20px;
+.usremei-container {
+   min-height: 100vh;
+  background-image: url('../assets/dabag.png');
+  background-size: cover;
+  background-position: center;
+  padding-top: 60px;
+  padding-bottom: 80px; /* 为底部tab预留空间 */
+  box-sizing: border-box; /* 确保padding不会增加容器高度 */
+  overflow-y: auto; /* 允许内容滚动 */
+  position: relative; /* 为fixed定位提供参考 */
+}
+
+.desc-card {
+  background: #fff8e1;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  margin: 0px 16px 24px 16px;
+  padding: 18px 16px 12px 16px;
+  z-index: 2;
+  position: relative;
+}
+.desc-title {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+.desc-content {
+  font-size: 12px;
+  color: #333;
+  line-height: 1.7;
+}
+.plan-card {
+  background: #d0021b;
+  border-radius: 8px;
+  margin: 0 16px 22px 16px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
+  
+}
+.plan-header {
+  background: #fff8e1;
+  color: #333;
+  font-size: 14px;
+  font-weight: bold;
+  padding: 6px 12px;
+  border-bottom: 1px solid #f5c6cb;
+}
+.plan-table-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+  padding: 0 18px;
+  height: 70px;
+}
+.plan-col {
+  width:auto;
+  font-size:12px;
+  white-space: nowrap;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+}
+.plan-label {
+  color: #333;
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 2px;
+}
+.plan-value {
+  margin-top:6px;
+  font-size: 14px;
+  text-align:center;
+}
+.plan-col-btn {
+  
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.plan-btn {
+  background: #b80032;
+  color: #fff;
+  border: none;
+  border-radius: 18px;
+  padding: 2px 6px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.plan-btn:hover {
+  background: #a00028;
 }
 </style>