邀请百姓

src/App.vue

@@ -15,7 +15,7 @@ export default {
   },
   computed: {
     showTabBar() {
-      const hideTabBarRoutes = ['/login', '/register', '/profile/detail', '/culture/detail']
+      const hideTabBarRoutes = ['/login', '/register', '/profile/detail', '/culture/detail','/InvitePeople']
       return !hideTabBarRoutes.includes(this.$route.path)
     }
   }

src/router/index.js

@@ -7,6 +7,7 @@ import Profile from "@/views/Profile.vue";
 import ProfileDetail from "@/views/ProfileDetail.vue";
 import Register from "@/views/register.vue";
 import CultureDetail from "@/views/cultureDetail.vue";
+import InvitePeople from '@/views/InvitePeople.vue'
 Vue.use(VueRouter);
 
 const routes = [
@@ -61,6 +62,11 @@ const routes = [
     name: "CultureDetail",
     component: CultureDetail
   },
+  {
+    path:'/InvitePeople',
+    name:'InvitePeople',
+    component:InvitePeople
+  }
 ];
 
 const router = new VueRouter({

src/views/InvitePeople.vue

@@ -0,0 +1,171 @@
+<template>
+<div>
+<div class="headers">
+      <div class="back" @click="goBack">
+        <img src="@/assets/back.png" alt="">
+      </div>
+      <div class="title">央企文化</div>
+    </div>
+  <div class="invite-page">
+  
+    <!-- 顶部logo和宣传语 -->
+    <div class="top-header">
+      <img class="logo" src="" alt="" />
+      <div class="slogan">红旗资本·民生为本·保障一生</div>
+    </div>
+
+    <!-- 补贴金卡片列表 -->
+    <div class="card-list">
+      <div class="card" v-for="(item, idx) in cards" :key="idx">
+        <div class="card-title">{{ item.title }}</div>
+        <div class="card-table">
+          <div class="row header">
+            <span>收益率</span>
+            <span>每日获得</span>
+            <span>参与份数</span>
+          </div>
+          <div class="row">
+            <span>{{ item.rate }}</span>
+            <span>{{ item.amount }}</span>
+            <span>{{ item.count }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InvitePeople',
+  data() {
+    return {
+      cards: [
+        {
+          title: '初级退休补贴金',
+          rate: '10%',
+          amount: '3000元',
+          count: '1份'
+        },
+        {
+          title: '一级退休补贴金',
+          rate: '10%',
+          amount: '6000元',
+          count: '1份'
+        },
+        {
+          title: '二级退休补贴金',
+          rate: '10%',
+          amount: '10000元',
+          count: '1份'
+        },
+        {
+          title: '三级退休补贴金',
+          rate: '10%',
+          amount: '20000元',
+          count: '1份'
+        }
+      ]
+    }
+  },
+  methods:{
+    goBack() {
+      this.$router.go(-1)
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.invite-page {
+  min-height: 100%;
+  background: url('~@/assets/dabag.png') no-repeat center center;
+  background-size: cover;
+  padding: 0px 16px 32px 16px;
+  box-sizing: border-box;
+}
+ .headers {
+    position: relative;
+    height: 44px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid #eee;
+
+    .back {
+      position: absolute;
+      left: 15px;
+      font-size: 20px;
+      img{
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .title {
+      font-size: 18px;
+      font-weight: 500;
+    }
+  }
+.top-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24px;
+  padding-top:12px;
+  .logo {
+    width: 64px;
+    height: 64px;
+    object-fit: contain;
+    background: #fff;
+    margin-right: 16px;
+  }
+  .slogan {
+    color: #fff;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 1.3;
+    text-shadow: 0 2px 8px rgba(0,0,0,0.12);
+  }
+}
+
+.card-list {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.card {
+  background: #fff;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+  margin-bottom: 8px;
+  .card-title {
+    background: #fdf3d0;
+    color: #000;
+    font-size: 14px;
+    font-weight: bold;
+    padding: 6px 0;
+    text-align: left;
+    padding-left: 16px;
+    border-bottom: 1px solid #f0e6d2;
+  }
+  .card-table {
+    padding: 12px 0;
+    .row {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        align-items: center;
+        padding: 2px 10px;
+        font-size: 14px;
+        color: #000;
+        text-align: center;
+        &.header {
+        color: #333;
+        font-weight: bold;
+        }
+    }
+    }
+}
+</style>

src/views/home/index.vue

@@ -2,7 +2,7 @@
   <div class="home">
     <div class="top-btns">
       <div class="row">
-        <button class="btn">邀请百姓</button>
+        <button class="btn" @click="toInvitePeople">邀请百姓</button>
         <button class="btn" @click="toOfficialGroup">官方群聊</button>
       </div>
       <div class="kefu">
@@ -106,6 +106,9 @@ export default {
     },
     toCultureDetail() {
       this.$router.push('/culture/detail');
+    },
+    toInvitePeople() {
+      this.$router.push('/InvitePeople');
     }
   }
 };