阳光村务增加股权查询页

src/components/sunVillage/common/header.vue

@@ -19,6 +19,7 @@
           民生直通车
         </div>
         <div
+          @click="skip('/sunVillage/equity')"
           class="flex_navigation"
           :class="[currentNav == '3' ? 'current' : '']"
         >

src/components/sunVillage/equity_header.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="navigation_main">
+    <router-link
+      tag="div"
+      to="/sunVillage/equity"
+      class="flex_wrap"
+      :class="serialTag == 1 ? 'current' : ''"
+      >股民信息</router-link
+    >
+    <router-link
+      tag="div"
+      to="/sunVillage/shareBonus"
+      class="flex_wrap"
+      :class="serialTag == 2 ? 'current' : ''"
+      >股权分红</router-link
+    >
+  </div>
+</template>
+
+<style scoped lang="scss">
+.navigation_main {
+  margin: 0 24px;
+  display: flex;
+  justify-content: space-between;
+  padding: 30px 0 10px;
+  .flex_wrap {
+    height: 80px;
+    background: #f8f8f8;
+    color: #07c160;
+    font-size: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 340px;
+    border-radius: 12px;
+    &.current {
+      color: #fff;
+      background: #07c160;
+    }
+  }
+}
+</style>
+
+<script>
+export default {
+  props: ["serialTag"],
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
+</script>

src/permission.js

@@ -89,6 +89,11 @@ const whiteList = [
   '/sunVillage/consulting/inquiries',  //民生直通车-咨询
   "/sunVillage/consulting/my_consulting",  //民生直通车-我的咨询详情
   '/sunVillage/consulting/kanban', //民生直通车-民生看板
+  '/sunVillage/equity', //股权查询-股民信息
+  '/sunVillage/equity_desc', // 股权查询-股民信息-详情
+  '/sunVillage/shareBonus', //股权查询-股权分红
+  '/sunVillage/shareBonus_num', //股权查询-股权分红-股数详情页
+  '/sunVillage/shareBonus_amount', //股权查询-股权分红-分红详情页
   //阳光村务公众号 -- 待删
 ]
 

src/router/index.js

@@ -2643,6 +2643,52 @@ export const constantRoutes = [
       hidden: true,
     },
     component: (resolve) => require(['@/views/sunVillage/throughTrain/kanban'], resolve)
+  },
+  {
+    path: '/sunVillage/equity',
+    name: 'sunVillageEquity',
+    meta: {
+      title: '股权查询', //民生直通车-股民信息
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage/equity/info'], resolve)
+  },
+  {
+    path: '/sunVillage/equity_desc',
+    name: 'sunVillageEquityDesc',
+    meta: {
+      title: '股权查询', //民生直通车-股民信息-详情页
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage/equity/info_desc'], resolve)
+  },
+  {
+    path: '/sunVillage/shareBonus',
+    name: 'sunVillageShareBonus',
+    meta: {
+      title: '股权查询', //民生直通车-股权分红
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage/equity/shareBonus'], resolve)
+  },
+  {
+    path: '/sunVillage/shareBonus_num',
+    name: 'sunVillageShareBonusNum',
+    meta: {
+      title: '股权查询', //民生直通车-股权分红-详股数情页
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage/equity/shareBonus_num'], resolve)
+  }
+  ,
+  {
+    path: '/sunVillage/shareBonus_amount',
+    name: 'sunVillageShareBonusAmount',
+    meta: {
+      title: '股权查询', //民生直通车-股权分红-分红详情页
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage/equity/shareBonus_amount'], resolve)
   }
 
 

src/views/sunVillage/dynamic/financial/index.vue

@@ -16,19 +16,13 @@
     </div>
     <div class="news_list">
       <ul>
-        <li
-          class="item_block"
-          @click="skip('/sunVillage/financial/details')"
-        >
+        <li class="item_block" @click="skip('/sunVillage/financial/details')">
           <div class="title">金融政策项目01</div>
           <div class="insets">
             <img src="@/assets/images/sunVillage/2.jpg" />
           </div>
         </li>
-        <li
-          class="item_block"
-          @click="skip('/sunVillage/financial/details')"
-        >
+        <li class="item_block" @click="skip('/sunVillage/financial/details')">
           <div class="title">金融政策项目01</div>
           <div class="insets">
             <img src="@/assets/images/sunVillage/2.jpg" />

src/views/sunVillage/dynamic/injoint/assetsPublic.vue

@@ -21,13 +21,19 @@
           <div class="flex f4">构建时间</div>
         </div>
         <div class="tbody_main">
-          <div class="item_list" @click="skip('/sunVillage/injoint/assetsPublic_desc')">
+          <div
+            class="item_list"
+            @click="skip('/sunVillage/injoint/assetsPublic_desc')"
+          >
             <div class="flex f1">18号大楼1233</div>
             <div class="flex f2">1</div>
             <div class="flex f3">经营</div>
             <div class="flex f4">2022/02/25</div>
           </div>
-          <div class="item_list" @click="skip('/sunVillage/injoint/assetsPublic_desc')">
+          <div
+            class="item_list"
+            @click="skip('/sunVillage/injoint/assetsPublic_desc')"
+          >
             <div class="flex f1">18号大楼1233</div>
             <div class="flex f2">1</div>
             <div class="flex f3">经营</div>

src/views/sunVillage/dynamic/injoint/index.vue

@@ -14,19 +14,13 @@
     </div>
     <div class="news_list">
       <ul>
-        <li
-          class="item_block"
-          @click="skip('/sunVillage/injoint/details')"
-        >
+        <li class="item_block" @click="skip('/sunVillage/injoint/details')">
           <div class="title">一季度收入说明</div>
           <div class="insets">
             <img src="@/assets/images/sunVillage/2.jpg" />
           </div>
         </li>
-        <li
-          class="item_block"
-          @click="skip('/sunVillage/injoint/details')"
-        >
+        <li class="item_block" @click="skip('/sunVillage/injoint/details')">
           <div class="title">一季度收入说明</div>
           <div class="insets">
             <img src="@/assets/images/sunVillage/2.jpg" />

src/views/sunVillage/dynamic/public/index.vue

@@ -14,19 +14,13 @@
     </div>
     <div class="news_list">
       <ul>
-        <li
-          class="item_block"
-          @click="skip('/sunVillage/public/details')"
-        >
+        <li class="item_block" @click="skip('/sunVillage/public/details')">
           <div class="title">阳光村务内容01</div>
           <div class="insets">
             <img src="@/assets/images/sunVillage/2.jpg" />
           </div>
         </li>
-        <li
-          class="item_block"
-          @click="skip('/sunVillage/public/details')"
-        >
+        <li class="item_block" @click="skip('/sunVillage/public/details')">
           <div class="title">阳光村务内容01</div>
           <div class="insets">
             <img src="@/assets/images/sunVillage/2.jpg" />

src/views/sunVillage/equity/info.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="home_wrapper">
+    <header-nav :currentNav="3" returnUrl="/sunVillage/index"></header-nav>
+    <equityHeader :serialTag="1"></equityHeader>
+    <div class="equity_main">
+      <div class="header_mian">
+        <div class="flex3">
+          <div class="title">户人数</div>
+          <div class="cont">4</div>
+        </div>
+        <div class="flex4">
+          <div class="title">宅基地㎡</div>
+          <div class="cont">4500</div>
+        </div>
+        <div class="flex4">
+          <div class="title">宅基地㎡</div>
+          <div class="cont">4500</div>
+        </div>
+      </div>
+      <div class="households_main">
+        <div class="flex_block" @click="skip('/sunVillage/equity_desc')">
+          <div class="unit">户主</div>
+          <div class="head">
+            <img src="../../../assets/images/sunVillage/head_portrait.jpg" />
+          </div>
+          <div class="name">刘嘘唏</div>
+          <div class="sex">男</div>
+          <div class="meberCode">
+            <div class="text">成员户编码</div>
+            <div class="code">15456456464646</div>
+          </div>
+        </div>
+        <div class="flex_block" @click="skip('/sunVillage/equity_desc')">
+          <div class="unit">妻子</div>
+          <div class="head">
+            <img src="../../../assets/images/sunVillage/head_portrait.jpg" />
+          </div>
+          <div class="name">刘淼</div>
+          <div class="sex">女</div>
+          <div class="meberCode">
+            <div class="text">成员户编码</div>
+            <div class="code">15456456464646</div>
+          </div>
+        </div>
+        <div class="flex_block" @click="skip('/sunVillage/equity_desc')">
+          <div class="unit">长子</div>
+          <div class="head">
+            <img src="../../../assets/images/sunVillage/head_portrait.jpg" />
+          </div>
+          <div class="name">刘大壮</div>
+          <div class="sex">男</div>
+          <div class="meberCode">
+            <div class="text">成员户编码</div>
+            <div class="code">15456456464646</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.home_wrapper {
+  width: 100%;
+  min-height: 100vh;
+  background: #fff;
+  .equity_main {
+    margin: 0 24px;
+    padding: 15px 0;
+    .header_mian {
+      height: 80px;
+      display: flex;
+      margin-bottom: 15px;
+      justify-content: center; /* 相对父元素水平居中 */
+      align-items: center; /*  子元素相对父元素垂直居中 */
+      .flex3 {
+        flex: 3;
+        display: flex;
+      }
+      .flex4 {
+        flex: 4;
+        display: flex;
+      }
+      .title {
+        font-size: 30px;
+        padding: 0 15px;
+        color: #999;
+      }
+      .cont {
+        font-size: 30px;
+        color: #07c160;
+        flex: 1;
+        text-align: center;
+      }
+    }
+    .households_main {
+      .flex_block {
+        height: 115px;
+        position: relative;
+        margin-bottom: 18px;
+        margin-left: 60px;
+        display: flex;
+        border-bottom: 1px solid #e6e6e6;
+        justify-content: center; /* 相对父元素水平居中 */
+        align-items: center; /*  子元素相对父元素垂直居中 */
+        .unit {
+          width: 34px;
+          display: flex;
+          position: absolute;
+          left: -40px;
+          font-size: 28px;
+          color: #07c160;
+        }
+        .head {
+          width: 64px;
+          height: 64px;
+          margin-left: 10px;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .name {
+          width: 170px;
+          text-align: center;
+          font-size: 30px;
+        }
+        .sex {
+          width: 100px;
+          font-size: 24px;
+          text-align: center;
+        }
+        .meberCode {
+          flex: 1;
+          text-align: center;
+          .text {
+            color: #999;
+            margin-bottom: 8px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+
+<script>
+import headerNav from "@/components/sunVillage/common/header.vue";
+import equityHeader from "@/components/sunVillage/equity_header";
+export default {
+  name: "sunVillageEquity",
+  components: { headerNav, equityHeader },
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {
+    skip(url) {
+      this.$router.push(url);
+    },
+  },
+};
+</script>

src/views/sunVillage/equity/info_desc.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="home_wrapper">
+    <header-nav
+      :headings="headingsTitle"
+      :currentNav="3"
+      returnUrl="/sunVillage/equity"
+    ></header-nav>
+    <equityHeader :serialTag="1"></equityHeader>
+
+    <div class="info_main">
+      <div class="info_item">
+        <div class="v_title">成员姓名</div>
+        <div class="v_content single">王万多</div>
+      </div>
+      <div class="info_item">
+        <div class="v_title">成员户编码</div>
+        <div class="v_content single">1231231231231231</div>
+      </div>
+      <div class="info_item">
+        <div class="v_title">家庭身份</div>
+        <div class="v_content single">户主</div>
+      </div>
+      <div class="info_item">
+        <div class="v_title">民族</div>
+        <div class="v_content single">汉</div>
+      </div>
+      <div class="info_item">
+        <div class="v_title">身份证号码</div>
+        <div class="v_content single">123111111111111123</div>
+      </div>
+      <div class="info_item">
+        <div class="v_title">户主联系电话</div>
+        <div class="v_content single">158545645121</div>
+      </div>
+      <div class="info_item">
+        <div class="v_title">承包地面积(㎡)</div>
+        <div class="v_content single">1500</div>
+      </div>
+      <div class="info_item">
+        <div class="v_title">宅基地面积(㎡)</div>
+        <div class="v_content single">
+          <input
+            type="text"
+            class="input_style"
+            placeholder="请输入宅基地面积"
+            maxlength="8"
+          />
+        </div>
+      </div>
+      <div class="info_item">
+        <div class="v_title">开户银行</div>
+        <div class="v_content single">农业银行西峡村支行</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.home_wrapper {
+  width: 100%;
+  min-height: 100vh;
+  background: #fff;
+  .info_main {
+    margin: 0 24px;
+    .info_item {
+      margin: 20px 20px 0;
+
+      display: flex;
+      font-size: 28px;
+      border-bottom: 1px solid #e6e6e6;
+      .v_title {
+        width: 308px;
+        color: #999;
+        height: 112px;
+        padding-right: 90px;
+        justify-content: flex-end;
+        display: flex;
+        align-items: center;
+      }
+      .v_content {
+        flex: 1;
+        &.single {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .input_style {
+            width: 100%;
+            text-align: center;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+
+
+<script>
+import headerNav from "@/components/sunVillage/common/header.vue";
+import equityHeader from "@/components/sunVillage/equity_header";
+export default {
+  name: "sunVillageInjointMeansOfDesc",
+  components: { headerNav, equityHeader },
+  data() {
+    return {
+      headingsTitle: "股民信息",
+    };
+  },
+  mounted() {},
+  methods: {
+    skip(url) {
+      this.$router.push(url);
+    },
+  },
+};
+</script>

src/views/sunVillage/equity/shareBonus.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="home_wrapper">
+    <header-nav :currentNav="3" returnUrl="/sunVillage/index"></header-nav>
+    <equityHeader :serialTag="2"></equityHeader>
+    <div class="equity_main">
+      <div class="date_main" @click="selectDateFun">
+        <i class="icon"></i>
+        <div class="year">2022<span class="unit">年</span></div>
+      </div>
+      <div class="header_mian">
+        <div class="flex3">
+          <div class="title">户人数</div>
+          <div class="cont">4</div>
+        </div>
+        <div class="flex4">
+          <div class="title">总股数</div>
+          <div class="cont">4500</div>
+        </div>
+        <div class="flex4">
+          <div class="title">总分红</div>
+          <div class="cont">4500</div>
+        </div>
+      </div>
+      <div class="households_main">
+        <div class="flex_block">
+          <div class="unit">户主</div>
+          <div class="head">
+            <img src="../../../assets/images/sunVillage/head_portrait.jpg" />
+          </div>
+          <div class="name">刘嘘唏</div>
+          <div class="numberShare" @click="skip('/sunVillage/shareBonus_num')">
+            <div class="text">股数</div>
+            <div class="code">1000</div>
+          </div>
+          <div class="bonus" @click="skip('/sunVillage/shareBonus_amount')">
+            <div class="text">总分红(元)</div>
+            <div class="code">3000</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <van-popup v-model:show="dateVisbile" round position="bottom">
+      <van-picker
+        title="选择年"
+        show-toolbar
+        :columns="yearColumns"
+        :default-index="yearSelect"
+        @confirm="yearConfirm"
+        @cancel="dateVisbile = false"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.home_wrapper {
+  width: 100%;
+  min-height: 100vh;
+  background: #fff;
+  .equity_main {
+    margin: 0 24px;
+    padding: 15px 0;
+    .date_main {
+      width: 220px;
+      height: 68px;
+      border-bottom: 2px solid #ededed;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 28px;
+      .icon {
+        width: 26px;
+        height: 26px;
+        background: url("../../../assets/images/sunVillage/select_date_icon.jpg")
+          no-repeat;
+        background-size: 100% 100%;
+        display: block;
+        margin: 0 25px 0 12px;
+      }
+      .year {
+        .unit {
+          padding: 0 10px;
+        }
+      }
+    }
+    .header_mian {
+      height: 80px;
+      display: flex;
+      margin-bottom: 15px;
+      justify-content: center; /* 相对父元素水平居中 */
+      align-items: center; /*  子元素相对父元素垂直居中 */
+      .flex3 {
+        flex: 3;
+        display: flex;
+      }
+      .flex4 {
+        flex: 4;
+        display: flex;
+      }
+      .title {
+        font-size: 30px;
+        padding: 0 15px;
+        color: #999;
+      }
+      .cont {
+        font-size: 30px;
+        color: #07c160;
+        flex: 1;
+        text-align: center;
+      }
+    }
+    .households_main {
+      .flex_block {
+        height: 115px;
+        position: relative;
+        margin-bottom: 18px;
+        margin-left: 60px;
+        display: flex;
+        border-bottom: 1px solid #e6e6e6;
+        justify-content: center; /* 相对父元素水平居中 */
+        align-items: center; /*  子元素相对父元素垂直居中 */
+        .unit {
+          width: 34px;
+          display: flex;
+          position: absolute;
+          left: -40px;
+          font-size: 28px;
+          color: #07c160;
+        }
+        .head {
+          width: 64px;
+          height: 64px;
+          margin-left: 10px;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .name {
+          width: 150px;
+          text-align: center;
+          font-size: 30px;
+        }
+
+        .bonus,
+        .numberShare {
+          flex: 1;
+          font-size: 28px;
+          text-align: center;
+          .text {
+            color: #999;
+            margin-bottom: 8px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+
+<script>
+import headerNav from "@/components/sunVillage/common/header.vue";
+import equityHeader from "@/components/sunVillage/equity_header";
+export default {
+  name: "sunVillageEquity",
+  components: { headerNav, equityHeader },
+  data() {
+    return {
+      dateVisbile: false,
+      yearColumns: [2000, 2001, 2002],
+      yearSelect: null,
+    };
+  },
+  mounted() {
+    this.yearData();
+  },
+  methods: {
+    skip(url) {
+      this.$router.push(url);
+    },
+    selectDateFun() {
+      this.dateVisbile = !this.dateVisbile;
+    },
+    yearData() {
+      for (let i = 2000; i < 2060; i++) {
+        this.yearColumns.push(i);
+      }
+      //显示当前年份
+
+      var year = new Date().getFullYear();
+      this.yearSelect = this.yearColumns.indexOf(Number(year));
+    },
+    yearConfirm(value) {
+      //   this.formatDate = value + "年";
+      //   this.form.reportDate = value.toString();
+      //   this.yearShow = false;
+      this.dateVisbile = false;
+    },
+  },
+};
+</script>

src/views/sunVillage/equity/shareBonus_amount.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="home_wrapper">
+    <header-nav
+      :headings="headingsTitle"
+      :currentNav="3"
+      returnUrl="/sunVillage/shareBonus"
+    ></header-nav>
+    <equityHeader :serialTag="2"></equityHeader>
+    <div class="holding_header">
+      <div class="unit">户主</div>
+      <div class="head">
+        <img src="../../../assets/images/sunVillage/head_portrait.jpg" />
+      </div>
+      <div class="name">刘说的</div>
+    </div>
+    <div class="info_main">
+      <div class="info_item">
+        <div class="v_title">年度</div>
+        <div class="v_content single"><i class="icon_date"></i> 2022</div>
+      </div>
+      <div class="info_item">
+        <div class="v_title">分红金额</div>
+        <div class="v_content single">10000</div>
+      </div>
+      <div class="info_item">
+        <div class="v_title">集体分红金额</div>
+        <div class="v_content single">10000</div>
+      </div>
+      <div class="info_item">
+        <div class="v_title">股民分红金额</div>
+        <div class="v_content single">10000</div>
+      </div>
+      <div class="info_item">
+        <div class="v_title">分红时间</div>
+        <div class="v_content single"><i class="icon_date"></i> 2022-02-11</div>
+      </div>
+
+      <div class="info_item">
+        <div class="v_title">分红说明</div>
+        <div class="v_content single">
+          <input
+            type="text"
+            class="input_style"
+            placeholder="请输入宅基地面积"
+            maxlength="8"
+          />
+        </div>
+      </div>
+      <div class="info_item">
+        <div class="v_title">凭证号</div>
+        <div class="v_content single">记-01</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.home_wrapper {
+  width: 100%;
+  min-height: 100vh;
+  background: #fff;
+  .holding_header {
+    margin: 20px 24px 0;
+    height: 112px;
+    display: flex;
+
+    align-items: center; /*  子元素相对父元素垂直居中 */
+    text-align: center;
+    font-size: 30px;
+    .unit {
+      width: 98px;
+
+      color: #07c160;
+    }
+    .head {
+      width: 64px;
+      height: 64px;
+      margin-left: 20px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .name {
+      width: 150px;
+    }
+    .allNum {
+      flex: 1;
+      color: #999;
+      text-align: left;
+      .num {
+        color: #07c160;
+        padding-left: 10px;
+      }
+    }
+  }
+  .info_main {
+    margin: 0 24px;
+    .info_item {
+      margin: 20px 20px 0;
+
+      display: flex;
+      font-size: 28px;
+      border-bottom: 1px solid #e6e6e6;
+      .v_title {
+        width: 308px;
+        color: #999;
+        height: 112px;
+        padding-right: 90px;
+        justify-content: flex-end;
+        display: flex;
+        align-items: center;
+      }
+      .v_content {
+        flex: 1;
+        .icon_date {
+          width: 26px;
+          height: 26px;
+          background: url("../../../assets/images/sunVillage/select_date_icon.jpg")
+            no-repeat;
+          background-size: 100% 100%;
+          display: block;
+          margin-right: 12px;
+        }
+        &.single {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .input_style {
+            width: 100%;
+            text-align: center;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+
+
+<script>
+import headerNav from "@/components/sunVillage/common/header.vue";
+import equityHeader from "@/components/sunVillage/equity_header";
+export default {
+  name: "sunVillageInjointMeansOfDesc",
+  components: { headerNav, equityHeader },
+  data() {
+    return {
+      headingsTitle: "股民信息",
+    };
+  },
+  mounted() {},
+  methods: {
+    skip(url) {
+      this.$router.push(url);
+    },
+  },
+};
+</script>

src/views/sunVillage/equity/shareBonus_num.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="home_wrapper">
+    <header-nav
+      :headings="headingsTitle"
+      :currentNav="3"
+      returnUrl="/sunVillage/shareBonus"
+    ></header-nav>
+    <equityHeader :serialTag="2"></equityHeader>
+    <div class="holding_header">
+      <div class="unit">户主</div>
+      <div class="head">
+        <img src="../../../assets/images/sunVillage/head_portrait.jpg" />
+      </div>
+      <div class="name">刘说的</div>
+      <div class="allNum">总股数<span class="num">4500</span></div>
+    </div>
+    <div class="info_main">
+      <div class="info_item">
+        <div class="v_title">人人股</div>
+        <div class="v_content single">400</div>
+      </div>
+      <div class="info_item">
+        <div class="v_title">土土股</div>
+        <div class="v_content single">400</div>
+      </div>
+      <div class="info_item">
+        <div class="v_title">劳劳股</div>
+        <div class="v_content single">400</div>
+      </div>
+      <div class="info_item">
+        <div class="v_title">资资股</div>
+        <div class="v_content single">400</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.home_wrapper {
+  width: 100%;
+  min-height: 100vh;
+  background: #fff;
+  .holding_header {
+    margin: 20px 24px 0;
+    height: 112px;
+    display: flex;
+    justify-content: center; /* 相对父元素水平居中 */
+    align-items: center; /*  子元素相对父元素垂直居中 */
+    text-align: center;
+    font-size: 30px;
+    .unit {
+      width: 98px;
+
+      color: #07c160;
+    }
+    .head {
+      width: 64px;
+      height: 64px;
+      margin-left: 20px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .name {
+      width: 150px;
+    }
+    .allNum {
+      flex: 1;
+      color: #999;
+      text-align: left;
+      .num {
+        color: #07c160;
+        padding-left: 10px;
+      }
+    }
+  }
+  .info_main {
+    margin: 0 24px;
+    .info_item {
+      margin: 20px 20px 0;
+
+      display: flex;
+      font-size: 28px;
+      border-bottom: 1px solid #e6e6e6;
+      .v_title {
+        width: 308px;
+        color: #999;
+        height: 112px;
+        padding-right: 90px;
+        justify-content: flex-end;
+        display: flex;
+        align-items: center;
+      }
+      .v_content {
+        flex: 1;
+        &.single {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .input_style {
+            width: 100%;
+            text-align: center;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+
+
+<script>
+import headerNav from "@/components/sunVillage/common/header.vue";
+import equityHeader from "@/components/sunVillage/equity_header";
+export default {
+  name: "sunVillageInjointMeansOfDesc",
+  components: { headerNav, equityHeader },
+  data() {
+    return {
+      headingsTitle: "股权分红",
+    };
+  },
+  mounted() {},
+  methods: {
+    skip(url) {
+      this.$router.push(url);
+    },
+  },
+};
+</script>

src/views/sunVillage/login.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="login_wrapper">
+  <div class="home_wrapper">
     <div class="login_title">
       <div class="title">登录</div>
       <div class="desc">阳光村务公众号</div>
@@ -25,7 +25,7 @@
 </template>
 
 <style scoped lang="scss">
-.login_wrapper {
+.home_wrapper {
   background: #fff;
   min-width: 100%;
   min-height: 100vh;