党员申请

src/router/index.js

@@ -21,6 +21,7 @@ import OrderList from "@/views/OrderList.vue";
 import LeverList from "@/views/LeverList.vue";
 import CultureDetail from "@/views/cultureDetail.vue";
 import InvitePeople from '@/views/InvitePeople.vue'
+import Apply from '@/views/Apply.vue'
 Vue.use(VueRouter);
 
 const routes = [
@@ -183,6 +184,14 @@ const routes = [
     path:'/InvitePeople',
     name:'InvitePeople',
     component:InvitePeople
+  },
+    {
+      path: "/Apply",
+      name: "Apply",
+      component: Apply,
+      meta: {
+        hideTabBar: true
+    },
   }
 ];
 

src/views/Apply.vue

@@ -0,0 +1,157 @@
+<template>
+<div style="height:100%">
+    <div class="headers">
+      <div class="back" @click="goBack">
+        <img src="@/assets/back.png" alt="">
+      </div>
+      <div class="title">党员申请</div>
+    </div>
+  <div class="invite-page">
+    <div class="apply-card">
+      <div class="apply-title">党员招募</div>
+      <div class="apply-divider"></div>
+      <div class="apply-desc">
+        国家平台总部招募党员团队主管，团队总人数达到100人即可成为党员主管，每月可享受60000元党员团队奖励金直接到账银行卡。加入中国共产党那一刻起，都必须无一例外地履行党员义务！
+      </div>
+      <button class="apply-btn">我要参党</button>
+    </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/dangyuan.jpg') no-repeat center center;
+  background-size: 100% 100%;
+  padding: 0px 16px 32px 16px;
+  box-sizing: border-box;
+  position:relative;
+}
+ .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;
+    }
+  }
+
+.apply-card {
+  width: 80%;
+  max-width: 420px;
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+  padding: 28px 18px 24px 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position:absolute;
+  bottom:55px;
+  left:5%;
+}
+
+.apply-title {
+  color: #ed145b;
+  font-size: 22px;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 12px;
+  letter-spacing: 2px;
+}
+
+.apply-divider {
+  width: 100%;
+  height: 1px;
+  background: #e0e0e0;
+  margin-bottom: 18px;
+}
+
+.apply-desc {
+  color: #222;
+  font-size: 16px;
+  line-height: 1.8;
+  text-align: left;
+  margin-bottom: 32px;
+  word-break: break-all;
+}
+
+.apply-btn {
+  width: 50%;
+  max-width: 260px;
+  height: 36px;
+  background: #ed145b;
+  color: #000;
+  border: none;
+  border-radius: 24px;
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0 auto;
+  cursor: pointer;
+  transition: background 0.2s;
+  box-shadow: 0 2px 8px rgba(237, 20, 91, 0.08);
+  letter-spacing: 2px;
+}
+
+.apply-btn:hover {
+  background: #c9104a;
+}
+</style>

src/views/home/index.vue

@@ -43,11 +43,14 @@
           <span>5%</span>
         </div>
       </div>
-      <button class="party-btn">党员申请</button>
+      <button class="party-btn" @click="toApply">党员申请</button>
     </div>
     <div class="news-title">新闻中心</div>
-    <div class="news_content" v-html="newsList[2].content">
-    </div>
+    <div
+      class="news_content"
+      v-if="newsList[2]"
+      v-html="newsList[2].content"
+    ></div>
     <!-- <iframe
       class="news-iframe"
       src="https://www.nongfuspring.com/en/aboutus/management.html"
@@ -105,6 +108,9 @@ export default {
     toInvitePeople() {
       this.$router.push('/InvitePeople');
     },
+    toApply(){
+      this.$router.push('/Apply');
+    }
   }
 };
 </script>