宅基地前端切图

src/router/index.js

@@ -382,6 +382,160 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/authenticRight/login'], resolve)
   },
+  {
+    path: '/onlineHomeLogin',
+    name: 'onlineHomeLogin',
+    meta: {
+      title: '登录页',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHomeLogin'], resolve)
+  },
+  {
+    path: '/onlineHomeIndex',
+    name: 'onlineHomeIndex',
+    meta: {
+      title: '网上家园',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHomeIndex'], resolve)
+  },
+  {
+    path: '/onlineHome/publicity',
+    name: 'onlineHomePublicity',
+    meta: {
+      title: '公示',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/publicity'], resolve)
+  },
+  {
+    path: '/onlineHome/workbench',
+    name: 'onlineHomeWorkbench',
+    meta: {
+      title: '公示',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/workbench'], resolve)
+  },
+  {
+    path: '/onlineHome/home',
+    name: 'onlineHomeHome',
+    meta: {
+      title: '公示',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/home'], resolve)
+  },
+  {
+    path: '/onlineHome/my',
+    name: 'onlineHomeMy',
+    meta: {
+      title: '公示',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/my'], resolve)
+  },
+  {
+    path: '/onlineHome/threeAffairs',
+    name: 'onlineHomeThreeAffairs',
+    meta: {
+      title: '三务公开',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/threeAffairs'], resolve)
+  },
+  {
+    path: '/onlineHome/homePoll',
+    name: 'onlineHomeHomePoll',
+    meta: {
+      title: '投票',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/homePoll'], resolve)
+  },
+  {
+    path: '/onlineHome/incomeDetail',
+    name: 'onlineHomeIncomeDetail',
+    meta: {
+      title: '收入明细公开表',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/incomeDetail'], resolve)
+  },
+  {
+    path: '/onlineHome/expenditureDetail',
+    name: 'onlineHomeExpenditureDetail',
+    meta: {
+      title: '支出明细公开表',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/expenditureDetail'], resolve)
+  },
+  {
+    path: '/onlineHome/inAndOutDetail',
+    name: 'onlineHomeInAndOutDetail',
+    meta: {
+      title: '收支明细公开表',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/inAndOutDetail'], resolve)
+  },
+  {
+    path: '/onlineHome/mailList',
+    name: 'onlineHomeMailList',
+    meta: {
+      title: '通讯录',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/mailList'], resolve)
+  }
+  ,
+  {
+    path: '/onlineHome/password',
+    name: 'onlineHomePassword',
+    meta: {
+      title: '密码修改',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/password'], resolve)
+  },
+  {
+    path: '/onlineHome/livePay',
+    name: 'onlineHomeLivePay',
+    meta: {
+      title: '生活缴费',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/livePay'], resolve)
+  },
+  {
+    path: '/onlineHome/personalPicture',
+    name: 'onlineHomePersonalPicture',
+    meta: {
+      title: '画像',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/personalPicture'], resolve)
+  },
+  {
+    path: '/onlineHome/done',
+    name: 'onlineHomeDone',
+    meta: {
+      title: '我的已办',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/done'], resolve)
+  },
+  {
+    path: '/onlineHome/advice',
+    name: 'onlineHomeAdvice',
+    meta: {
+      title: '投诉建议',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/advice'], resolve)
+  },
   {
     path: '/applicationForm',
     name: 'authenticRightLogin',
@@ -445,8 +599,6 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/circulation/circulationAdd'], resolve)
   }
-
-
 ];
 
 

src/views/index.vue

@@ -38,10 +38,10 @@
           <van-image src="../../static/images/icon/icon_need.png" width="40" height="40" />
           <p>个人供求</p>
         </van-grid-item>
-        <van-grid-item to="/authenticRight">
+<!--        <van-grid-item to="/authenticRight">
           <van-image src="../../static/images/icon/icon_need.png" width="40" height="40" />
           <p>确权调查</p>
-        </van-grid-item>
+        </van-grid-item>-->
       </van-grid>
     </div>
     <p class="newTit">新闻咨询</p>

src/views/onlineHome/advice.vue

@@ -0,0 +1,85 @@
+<template>
+    <div>
+      <van-nav-bar
+        title="投诉建议"
+        left-arrow
+        @click-left="$router.back(-1)"
+      />
+      <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+        <van-cell>
+          <template #title>
+            <van-row style="">
+              <van-col span="4" :offset="1">
+                <h3 style="">类型：</h3>
+              </van-col>
+              <van-col span="10" >
+                <van-radio-group v-model="radio" direction="horizontal">
+                  <van-radio name="1">投诉</van-radio>
+                  <van-radio name="2">建议</van-radio>
+                </van-radio-group>
+              </van-col>
+            </van-row>
+          </template>
+        </van-cell>
+        <van-cell>
+          <template #title>
+            <van-row>
+              <van-col span="24">
+                <van-field
+                  v-model="message"
+                  rows="7"
+                  autosize
+                  type="textarea"
+                  maxlength="1000"
+                  placeholder="请输入您的反馈意见（字数1000以内）"
+                  show-word-limit
+                />
+              </van-col>
+            </van-row>
+          </template>
+        </van-cell>
+      </van-cell-group>
+      <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+        <van-cell>
+          <template #title>
+            <van-row style="">
+              <van-col span="23" :offset="1">
+                <van-uploader :after-read="afterRead" v-model="fileList" multiple/>
+              </van-col>
+            </van-row>
+          </template>
+        </van-cell>
+      </van-cell-group>
+      <van-row style="text-align: center;margin-top: 40px">
+        <van-button color="#1D6FE9" style="border-radius: 6px;width: 90%;margin: 0 auto">提交</van-button>
+      </van-row>
+      <onlineHomeIndex></onlineHomeIndex>
+    </div>
+</template>
+
+<script>
+    import onlineHomeIndex from "../onlineHomeIndex";
+
+    export default {
+      components: {
+        onlineHomeIndex
+      },
+        name: "advice",
+      data() {
+        return {
+          radio: '',
+          message:'',
+          fileList:[]
+        };
+      },  methods: {
+        afterRead(file) {
+          // 此时可以自行将文件上传至服务器
+          console.log(file);
+        },
+      },
+    }
+</script>
+
+<style scoped>
+
+</style>

src/views/onlineHome/done.vue

@@ -0,0 +1,292 @@
+<template>
+  <div>
+    <van-nav-bar
+      title="我的事项"
+      left-arrow
+      @click-left="$router.back(-1)"
+    />
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #title>
+          <van-row style="margin-bottom:10px ">
+            <van-col span="23" :offset="1">
+              <van-image
+                height="20"
+                width="20"
+                style="vertical-align: middle"
+                src="../../../static/images/onlineHome/done.png"></van-image>
+              <h3 style="display: inline-block;line-height: 30px;margin-left: 6px">刘权泽提交的宅基地申请</h3>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row style="margin: 5px 0">
+            <van-col span="15" :offset="1">
+              <p style="font-size: 14px;">申请：张村镇东夼村87号宅基地</p>
+            </van-col>
+            <van-col span="6" :offset="2">
+              <p style="font-size: 14px;font-weight:bold;text-align: right;color: #1D6FE9">审批通过</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+      <van-cell>
+        <template #title>
+          <van-row>
+            <van-col span="6" :offset="1">
+              <p style="color: #878787">2021-08-06</p>
+            </van-col>
+            <van-col span="16" :offset="1">
+              <p style="color: #878787">来自宅基地改革管理</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #title>
+          <van-row style="margin-bottom:10px ">
+            <van-col span="23" :offset="1">
+              <van-image
+                height="20"
+                width="20"
+                style="vertical-align: middle"
+                src="../../../static/images/onlineHome/done.png"></van-image>
+              <h3 style="display: inline-block;line-height: 30px;margin-left: 6px">刘权泽提交的宅基地申请</h3>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row style="margin: 5px 0">
+            <van-col span="15" :offset="1">
+              <p style="font-size: 14px;">申请：张村镇东夼村87号宅基地</p>
+            </van-col>
+            <van-col span="6" :offset="2">
+              <p style="font-size: 14px;font-weight:bold;text-align: right;color: #1D6FE9">审批通过</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+      <van-cell>
+        <template #title>
+          <van-row>
+            <van-col span="6" :offset="1">
+              <p style="color: #878787">2021-08-06</p>
+            </van-col>
+            <van-col span="16" :offset="1">
+              <p style="color: #878787">来自宅基地改革管理</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #title>
+          <van-row style="margin-bottom:10px ">
+            <van-col span="23" :offset="1">
+              <van-image
+                height="20"
+                width="20"
+                style="vertical-align: middle"
+                src="../../../static/images/onlineHome/done.png"></van-image>
+              <h3 style="display: inline-block;line-height: 30px;margin-left: 6px">刘权泽提交的宅基地申请</h3>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row style="margin: 5px 0">
+            <van-col span="15" :offset="1">
+              <p style="font-size: 14px;">申请：张村镇东夼村87号宅基地</p>
+            </van-col>
+            <van-col span="6" :offset="2">
+              <p style="font-size: 14px;font-weight:bold;text-align: right;color: #1D6FE9">审批通过</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+      <van-cell>
+        <template #title>
+          <van-row>
+            <van-col span="6" :offset="1">
+              <p style="color: #878787">2021-08-06</p>
+            </van-col>
+            <van-col span="16" :offset="1">
+              <p style="color: #878787">来自宅基地改革管理</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #title>
+          <van-row style="margin-bottom:10px ">
+            <van-col span="23" :offset="1">
+              <van-image
+                height="20"
+                width="20"
+                style="vertical-align: middle"
+                src="../../../static/images/onlineHome/done.png"></van-image>
+              <h3 style="display: inline-block;line-height: 30px;margin-left: 6px">刘权泽提交的宅基地申请</h3>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row style="margin: 5px 0">
+            <van-col span="15" :offset="1">
+              <p style="font-size: 14px;">申请：张村镇东夼村87号宅基地</p>
+            </van-col>
+            <van-col span="6" :offset="2">
+              <p style="font-size: 14px;font-weight:bold;text-align: right;color: #1D6FE9">审批通过</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+      <van-cell>
+        <template #title>
+          <van-row>
+            <van-col span="6" :offset="1">
+              <p style="color: #878787">2021-08-06</p>
+            </van-col>
+            <van-col span="16" :offset="1">
+              <p style="color: #878787">来自宅基地改革管理</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group><van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+    <van-cell>
+      <template #title>
+        <van-row style="margin-bottom:10px ">
+          <van-col span="23" :offset="1">
+            <van-image
+              height="20"
+              width="20"
+              style="vertical-align: middle"
+              src="../../../static/images/onlineHome/done.png"></van-image>
+            <h3 style="display: inline-block;line-height: 30px;margin-left: 6px">刘权泽提交的宅基地申请</h3>
+          </van-col>
+        </van-row>
+      </template>
+      <template #label>
+        <van-row style="margin: 5px 0">
+          <van-col span="15" :offset="1">
+            <p style="font-size: 14px;">申请：张村镇东夼村87号宅基地</p>
+          </van-col>
+          <van-col span="6" :offset="2">
+            <p style="font-size: 14px;font-weight:bold;text-align: right;color: #1D6FE9">审批通过</p>
+          </van-col>
+        </van-row>
+      </template>
+    </van-cell>
+    <van-cell>
+      <template #title>
+        <van-row>
+          <van-col span="6" :offset="1">
+            <p style="color: #878787">2021-08-06</p>
+          </van-col>
+          <van-col span="16" :offset="1">
+            <p style="color: #878787">来自宅基地改革管理</p>
+          </van-col>
+        </van-row>
+      </template>
+    </van-cell>
+  </van-cell-group>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #title>
+          <van-row style="margin-bottom:10px ">
+            <van-col span="23" :offset="1">
+              <van-image
+                height="20"
+                width="20"
+                style="vertical-align: middle"
+                src="../../../static/images/onlineHome/done.png"></van-image>
+              <h3 style="display: inline-block;line-height: 30px;margin-left: 6px">刘权泽提交的宅基地申请</h3>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row style="margin: 5px 0">
+            <van-col span="15" :offset="1">
+              <p style="font-size: 14px;">申请：张村镇东夼村87号宅基地</p>
+            </van-col>
+            <van-col span="6" :offset="2">
+              <p style="font-size: 14px;font-weight:bold;text-align: right;color: #1D6FE9">审批通过</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+      <van-cell>
+        <template #title>
+          <van-row>
+            <van-col span="6" :offset="1">
+              <p style="color: #878787">2021-08-06</p>
+            </van-col>
+            <van-col span="16" :offset="1">
+              <p style="color: #878787">来自宅基地改革管理</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #title>
+          <van-row style="margin-bottom:10px ">
+            <van-col span="23" :offset="1">
+              <van-image
+                height="20"
+                width="20"
+                style="vertical-align: middle"
+                src="../../../static/images/onlineHome/done.png"></van-image>
+              <h3 style="display: inline-block;line-height: 30px;margin-left: 6px">刘权泽提交的宅基地申请</h3>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row style="margin: 5px 0">
+            <van-col span="15" :offset="1">
+              <p style="font-size: 14px;">申请：张村镇东夼村87号宅基地</p>
+            </van-col>
+            <van-col span="6" :offset="2">
+              <p style="font-size: 14px;font-weight:bold;text-align: right;color: #1D6FE9">审批通过</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+      <van-cell>
+        <template #title>
+          <van-row>
+            <van-col span="6" :offset="1">
+              <p style="color: #878787">2021-08-06</p>
+            </van-col>
+            <van-col span="16" :offset="1">
+              <p style="color: #878787">来自宅基地改革管理</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+
+
+    <onlineHomeIndex></onlineHomeIndex>
+  </div>
+</template>
+
+<script>
+    import onlineHomeIndex from "../onlineHomeIndex";
+
+    export default {
+      components: {
+        onlineHomeIndex
+      },
+        name: "done"
+    }
+</script>
+
+<style scoped>
+
+</style>

src/views/onlineHome/expenditureDetail.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="app-container">
+    <van-nav-bar
+      title="支出明细公开表"
+      left-arrow
+      @click-left="$router.back(-1)"
+    />
+    <van-row style="margin-top: 20px">
+      <van-col span="16" :offset="2">
+        <h3>北行庄村账套</h3>
+      </van-col>
+      <van-col span="6">
+        <van-button size="mini" round>&nbsp日期选择<van-icon name="arrow-down" /></van-button>
+      </van-col>
+    </van-row>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #icon>
+          <p style="line-height: 50px;font-size: 16px">157</p>
+        </template>
+        <template #title>
+          <van-row>
+            <van-col span="11" :offset="1">
+              <p>除草修路费</p>
+            </van-col>
+            <van-col span="12">
+              <p style="color:#E50000;text-align: right">-180.00</p>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row>
+            <van-col span="9" :offset="1">
+              <p>经营支出</p>
+            </van-col>
+            <van-col span="5" :offset="2">
+              记27
+            </van-col>
+            <van-col span="7">
+              <p style="text-align: right">2021-08-06</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #icon>
+          <p style="line-height: 50px;font-size: 16px">157</p>
+        </template>
+        <template #title>
+          <van-row>
+            <van-col span="11" :offset="1">
+              <p>除草修路费</p>
+            </van-col>
+            <van-col span="12">
+              <p style="color:#E50000;text-align: right">-180.00</p>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row>
+            <van-col span="9" :offset="1">
+              <p>经营支出</p>
+            </van-col>
+            <van-col span="5" :offset="2">
+              记27
+            </van-col>
+            <van-col span="7">
+              <p style="text-align: right">2021-08-06</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #icon>
+          <p style="line-height: 50px;font-size: 16px">157</p>
+        </template>
+        <template #title>
+          <van-row>
+            <van-col span="11" :offset="1">
+              <p>除草修路费</p>
+            </van-col>
+            <van-col span="12">
+              <p style="color:#E50000;text-align: right">-180.00</p>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row>
+            <van-col span="9" :offset="1">
+              <p>经营支出</p>
+            </van-col>
+            <van-col span="5" :offset="2">
+              记27
+            </van-col>
+            <van-col span="7">
+              <p style="text-align: right">2021-08-06</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #icon>
+          <p style="line-height: 50px;font-size: 16px">157</p>
+        </template>
+        <template #title>
+          <van-row>
+            <van-col span="11" :offset="1">
+              <p>除草修路费</p>
+            </van-col>
+            <van-col span="12">
+              <p style="color:#E50000;text-align: right">-180.00</p>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row>
+            <van-col span="9" :offset="1">
+              <p>经营支出</p>
+            </van-col>
+            <van-col span="5" :offset="2">
+              记27
+            </van-col>
+            <van-col span="7">
+              <p style="text-align: right">2021-08-06</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #icon>
+          <p style="line-height: 50px;font-size: 16px">157</p>
+        </template>
+        <template #title>
+          <van-row>
+            <van-col span="11" :offset="1">
+              <p>除草修路费</p>
+            </van-col>
+            <van-col span="12">
+              <p style="color:#E50000;text-align: right">-180.00</p>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row>
+            <van-col span="9" :offset="1">
+              <p>经营支出</p>
+            </van-col>
+            <van-col span="5" :offset="2">
+              记27
+            </van-col>
+            <van-col span="7">
+              <p style="text-align: right">2021-08-06</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #icon>
+          <p style="line-height: 50px;font-size: 16px">157</p>
+        </template>
+        <template #title>
+          <van-row>
+            <van-col span="11" :offset="1">
+              <p>除草修路费</p>
+            </van-col>
+            <van-col span="12">
+              <p style="color:#E50000;text-align: right">-180.00</p>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row>
+            <van-col span="9" :offset="1">
+              <p>经营支出</p>
+            </van-col>
+            <van-col span="5" :offset="2">
+              记27
+            </van-col>
+            <van-col span="7">
+              <p style="text-align: right">2021-08-06</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <onlineHomeIndex></onlineHomeIndex>
+  </div>
+</template>
+
+<script>
+    import onlineHomeIndex from "../onlineHomeIndex";
+
+    export default {
+      components: {
+        onlineHomeIndex
+      },
+        name: "expenditureDetail"
+    }
+</script>
+
+<style scoped>
+  >>>.van-cell::after {
+    border-bottom: none;
+  }
+</style>

src/views/onlineHome/home.vue

@@ -0,0 +1,108 @@
+<template>
+    <div class="app-container">
+      <van-nav-bar
+        title="家园"
+      >
+        <template #right>
+          <van-icon name="wap-nav" color="#000" size="18"/>
+        </template>
+      </van-nav-bar>
+      <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 20px;padding-bottom: 20px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+        <van-cell title="村画像" is-link>
+          <template #icon>
+            <van-image
+              fit="contain"
+              height="22"
+              style="margin-right: 15px"
+              src="../../../static/images/onlineHome/home1.png"
+            />
+          </template>
+        </van-cell>
+        <van-cell title="村民信息" is-link >
+          <template #icon>
+            <van-image
+              fit="contain"
+              height="22"
+              style="margin-right: 15px"
+              src="../../../static/images/onlineHome/myIcon1.png"
+            />
+          </template>
+        </van-cell>
+      </van-cell-group>
+      <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 20px;padding-bottom: 20px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+        <van-cell title="宅基地一张图" is-link>
+          <template #icon>
+            <van-image
+              fit="contain"
+              height="22"
+              style="margin-right: 15px"
+              src="../../../static/images/onlineHome/home2.png"
+            />
+          </template>
+        </van-cell>
+        <van-cell title="确权一张图" is-link >
+          <template #icon>
+            <van-image
+              fit="contain"
+              height="22"
+              style="margin-right: 15px"
+              src="../../../static/images/onlineHome/home3.png"
+            />
+          </template>
+        </van-cell>
+      </van-cell-group>
+      <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 20px;padding-bottom: 20px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+        <van-cell title="投票" is-link to="homePoll">
+          <template #icon>
+            <van-image
+              fit="contain"
+              height="22"
+              style="margin-right: 15px"
+              src="../../../static/images/onlineHome/home4.png"
+            />
+          </template>
+        </van-cell>
+        <van-cell title="三务公开" is-link to="threeAffairs">
+          <template #icon>
+            <van-image
+              fit="contain"
+              height="22"
+              style="margin-right: 15px"
+              src="../../../static/images/onlineHome/home5.png"
+            />
+          </template>
+        </van-cell>
+        <van-cell title="村规民约" is-link >
+          <template #icon>
+            <van-image
+              fit="contain"
+              height="22"
+              style="margin-right: 15px"
+              src="../../../static/images/onlineHome/home6.png"
+            />
+          </template>
+        </van-cell>
+      </van-cell-group>
+      <onlineHomeIndex></onlineHomeIndex>
+    </div>
+</template>
+
+<script>
+  import onlineHomeIndex from "../onlineHomeIndex";
+    export default {
+      components: {
+        onlineHomeIndex
+      },
+        name: "home"
+    }
+</script>
+
+<style scoped>
+>>>  .my-swipe .van-swipe-item {
+    color: #fff;
+    font-size: 20px;
+    line-height: 150px;
+    text-align: center;
+    background-color: #39a9ed;
+  }
+</style>

src/views/onlineHome/homePoll.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="app-container">
+    <van-nav-bar
+      title="投票"
+      left-arrow
+      @click-left="$router.back(-1)"
+    >
+      <template #right>
+        <van-image src=""></van-image>
+      </template>
+    </van-nav-bar>
+    <van-row style="margin-top: 20px">
+      <van-col span="20" offset="2">
+        <H3 style="line-height: 20px;">活动主题活动主题活动主题活动主题</H3>
+      </van-col>
+    </van-row>
+    <van-row style="margin-top: 10px">
+      <van-col span="20" offset="2">
+          <h4 style="color: #878787;line-height: 20px;">活动描述活动描述活动描述</h4>
+      </van-col>
+    </van-row>
+
+    <van-row style="margin-top: 10px">
+      <van-col span="9" offset="2">
+        <van-image
+          width="12"
+          height="12"
+          style="display: inline-block;"
+          src="../../../static/images/onlineHome/vote1.png"
+        />
+        <p style="display: inline-block;color:#1D6FE9 ">实名</p>
+        <van-image
+          width="12"
+          height="12"
+          style="display: inline-block;"
+          src="../../../static/images/onlineHome/vote1.png"
+        />
+        <p style="display: inline-block;color:#1D6FE9 ">单选</p>
+        <van-image
+          width="12"
+          height="12"
+          style="display: inline-block;"
+          src="../../../static/images/onlineHome/vote1.png"
+        />
+        <p style="display: inline-block;color:#1D6FE9 ">多选</p>
+      </van-col>
+      <van-col span="8" offset="5">
+        <van-image
+          width="12"
+          height="12"
+          style="display: inline-block;"
+          src="../../../static/images/onlineHome/vote.png"
+        />
+        <p style="display: inline-block">3人已参与</p>
+      </van-col>
+    </van-row>
+    <van-checkbox-group v-model="result" :max="1" style="margin-top: 20px">
+      <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+        <van-cell title="选项1">
+          <template #icon>
+            <van-image
+              fit="contain"
+              height="18"
+              style="margin-right: 10px"
+              src="../../../static/images/onlineHome/home3.png"
+            />
+          </template>
+          <van-checkbox name="a" style="float: right"></van-checkbox>
+        </van-cell>
+        <van-row>
+          <van-col span="15" :offset="2" style="    margin-top: 7px;">
+            <van-progress :percentage="87" :show-pivot="false"/>
+          </van-col>
+          <van-col span="5" :offset="2">
+            57票 87%
+          </van-col>
+        </van-row>
+      </van-cell-group>
+      <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+        <van-cell title="选项1">
+          <template #icon>
+            <van-image
+              fit="contain"
+              height="18"
+              style="margin-right: 10px"
+              src="../../../static/images/onlineHome/home3.png"
+            />
+          </template>
+          <van-checkbox name="b" style="float: right"></van-checkbox>
+        </van-cell>
+        <van-row>
+          <van-col span="15" :offset="2" style="    margin-top: 7px;">
+            <van-progress :percentage="87" :show-pivot="false"/>
+          </van-col>
+          <van-col span="5" :offset="2">
+            57票 87%
+          </van-col>
+        </van-row>
+      </van-cell-group>
+      <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+        <van-cell title="选项1">
+          <template #icon>
+            <van-image
+              fit="contain"
+              height="18"
+              style="margin-right: 10px"
+              src="../../../static/images/onlineHome/home3.png"
+            />
+          </template>
+          <van-checkbox name="c" style="float: right"></van-checkbox>
+        </van-cell>
+        <van-row>
+          <van-col span="15" :offset="2" style="    margin-top: 7px;">
+            <van-progress :percentage="87" :show-pivot="false"/>
+          </van-col>
+          <van-col span="5" :offset="2">
+            57票 87%
+          </van-col>
+        </van-row>
+      </van-cell-group>
+      <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+        <van-cell title="选项1">
+          <template #icon>
+            <van-image
+              fit="contain"
+              height="18"
+              style="margin-right: 10px"
+              src="../../../static/images/onlineHome/home3.png"
+            />
+          </template>
+          <van-checkbox name="d" style="float: right"></van-checkbox>
+        </van-cell>
+        <van-row>
+          <van-col span="15" :offset="2" style="    margin-top: 7px;">
+            <van-progress :percentage="87" :show-pivot="false"/>
+          </van-col>
+          <van-col span="5" :offset="2">
+            57票 87%
+          </van-col>
+        </van-row>
+      </van-cell-group>
+    </van-checkbox-group>
+    <onlineHomeIndex></onlineHomeIndex>
+  </div>
+</template>
+
+<script>
+    import onlineHomeIndex from "../onlineHomeIndex";
+
+    export default {
+      components: {
+        onlineHomeIndex
+      },
+        name: "homePoll",
+      data() {
+        return {
+          activeName: 'a',
+          list: [],
+          loading: false,
+          finished: false,
+          result:[],
+        };
+      },
+    }
+</script>
+
+<style scoped>
+  >>>.van-cell::after {
+     border-bottom: none;
+  }
+</style>

src/views/onlineHome/inAndOutDetail.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="app-container">
+    <van-nav-bar
+      title="收支明细公开表"
+      left-arrow
+      @click-left="$router.back(-1)"
+    />
+    <van-row style="margin-top: 20px">
+      <van-col span="16" :offset="2">
+        <h3>北行庄村账套</h3>
+      </van-col>
+      <van-col span="6">
+        <van-button size="mini" round>&nbsp日期选择<van-icon name="arrow-down" /></van-button>
+      </van-col>
+    </van-row>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #icon>
+          <p style="line-height: 50px;font-size: 16px">157</p>
+        </template>
+        <template #title>
+          <van-row>
+            <van-col span="11" :offset="1">
+              <p>池塘租赁收租</p>
+            </van-col>
+            <van-col span="12">
+              <p style="color:#0AA214;text-align: right">180.00</p>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row>
+            <van-col span="9" :offset="1">
+              <p>经营收入</p>
+            </van-col>
+            <van-col span="5" :offset="2">
+              记27
+            </van-col>
+            <van-col span="7">
+              <p style="text-align: right">2021-08-06</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #icon>
+          <p style="line-height: 50px;font-size: 16px">157</p>
+        </template>
+        <template #title>
+          <van-row>
+            <van-col span="11" :offset="1">
+              <p>除草修路费</p>
+            </van-col>
+            <van-col span="12">
+              <p style="color:#E50000;text-align: right">-180.00</p>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row>
+            <van-col span="9" :offset="1">
+              <p>经营支出</p>
+            </van-col>
+            <van-col span="5" :offset="2">
+              记27
+            </van-col>
+            <van-col span="7">
+              <p style="text-align: right">2021-08-06</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #icon>
+          <p style="line-height: 50px;font-size: 16px">157</p>
+        </template>
+        <template #title>
+          <van-row>
+            <van-col span="11" :offset="1">
+              <p>除草修路费</p>
+            </van-col>
+            <van-col span="12">
+              <p style="color:#E50000;text-align: right">-180.00</p>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row>
+            <van-col span="9" :offset="1">
+              <p>经营支出</p>
+            </van-col>
+            <van-col span="5" :offset="2">
+              记27
+            </van-col>
+            <van-col span="7">
+              <p style="text-align: right">2021-08-06</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #icon>
+          <p style="line-height: 50px;font-size: 16px">157</p>
+        </template>
+        <template #title>
+          <van-row>
+            <van-col span="11" :offset="1">
+              <p>除草修路费</p>
+            </van-col>
+            <van-col span="12">
+              <p style="color:#E50000;text-align: right">-180.00</p>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row>
+            <van-col span="9" :offset="1">
+              <p>经营支出</p>
+            </van-col>
+            <van-col span="5" :offset="2">
+              记27
+            </van-col>
+            <van-col span="7">
+              <p style="text-align: right">2021-08-06</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #icon>
+          <p style="line-height: 50px;font-size: 16px">157</p>
+        </template>
+        <template #title>
+          <van-row>
+            <van-col span="11" :offset="1">
+              <p>除草修路费</p>
+            </van-col>
+            <van-col span="12">
+              <p style="color:#E50000;text-align: right">-180.00</p>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row>
+            <van-col span="9" :offset="1">
+              <p>经营支出</p>
+            </van-col>
+            <van-col span="5" :offset="2">
+              记27
+            </van-col>
+            <van-col span="7">
+              <p style="text-align: right">2021-08-06</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #icon>
+          <p style="line-height: 50px;font-size: 16px">157</p>
+        </template>
+        <template #title>
+          <van-row>
+            <van-col span="11" :offset="1">
+              <p>除草修路费</p>
+            </van-col>
+            <van-col span="12">
+              <p style="color:#E50000;text-align: right">-180.00</p>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row>
+            <van-col span="9" :offset="1">
+              <p>经营支出</p>
+            </van-col>
+            <van-col span="5" :offset="2">
+              记27
+            </van-col>
+            <van-col span="7">
+              <p style="text-align: right">2021-08-06</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <onlineHomeIndex></onlineHomeIndex>
+  </div>
+</template>
+
+<script>
+  import onlineHomeIndex from "../onlineHomeIndex";
+
+  export default {
+    components: {
+      onlineHomeIndex
+    },
+    name: "inAndOutDetail",
+    data() {
+      return {
+        activeName: 'a',
+        list: [],
+        loading: false,
+        finished: false,
+        result:[],
+      };
+    },
+    methods: {
+
+    },
+  }
+</script>
+
+<style scoped>
+  >>>.van-cell::after {
+    border-bottom: none;
+  }
+</style>

src/views/onlineHome/incomeDetail.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="app-container">
+    <van-nav-bar
+      title="收入明细公开表"
+      left-arrow
+      @click-left="$router.back(-1)"
+    />
+    <van-row style="margin-top: 20px">
+      <van-col span="16" :offset="2">
+        <h3>北行庄村账套</h3>
+      </van-col>
+      <van-col span="6">
+        <van-button size="mini" round>&nbsp日期选择<van-icon name="arrow-down" /></van-button>
+      </van-col>
+    </van-row>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #icon>
+            <p style="line-height: 50px;font-size: 16px">157</p>
+        </template>
+        <template #title>
+          <van-row>
+            <van-col span="11" :offset="1">
+              <p>池塘租赁收租</p>
+            </van-col>
+            <van-col span="12">
+              <p style="color:#0AA214;text-align: right">200</p>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row>
+            <van-col span="9" :offset="1">
+              <p>经营收入</p>
+            </van-col>
+            <van-col span="5" :offset="2">
+              记27
+            </van-col>
+            <van-col span="7">
+              <p style="text-align: right">2021-08-06</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #icon>
+          <p style="line-height: 50px;font-size: 16px">157</p>
+        </template>
+        <template #title>
+          <van-row>
+            <van-col span="11" :offset="1">
+              <p>池塘租赁收租</p>
+            </van-col>
+            <van-col span="12">
+              <p style="color:#0AA214;text-align: right">200</p>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row>
+            <van-col span="9" :offset="1">
+              <p>经营收入</p>
+            </van-col>
+            <van-col span="5" :offset="2">
+              记27
+            </van-col>
+            <van-col span="7">
+              <p style="text-align: right">2021-08-06</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #icon>
+          <p style="line-height: 50px;font-size: 16px">157</p>
+        </template>
+        <template #title>
+          <van-row>
+            <van-col span="11" :offset="1">
+              <p>池塘租赁收租</p>
+            </van-col>
+            <van-col span="12">
+              <p style="color:#0AA214;text-align: right">200</p>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row>
+            <van-col span="9" :offset="1">
+              <p>经营收入</p>
+            </van-col>
+            <van-col span="5" :offset="2">
+              记27
+            </van-col>
+            <van-col span="7">
+              <p style="text-align: right">2021-08-06</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #icon>
+          <p style="line-height: 50px;font-size: 16px">157</p>
+        </template>
+        <template #title>
+          <van-row>
+            <van-col span="11" :offset="1">
+              <p>池塘租赁收租</p>
+            </van-col>
+            <van-col span="12">
+              <p style="color:#0AA214;text-align: right">200</p>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row>
+            <van-col span="9" :offset="1">
+              <p>经营收入</p>
+            </van-col>
+            <van-col span="5" :offset="2">
+              记27
+            </van-col>
+            <van-col span="7">
+              <p style="text-align: right">2021-08-06</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #icon>
+          <p style="line-height: 50px;font-size: 16px">157</p>
+        </template>
+        <template #title>
+          <van-row>
+            <van-col span="11" :offset="1">
+              <p>池塘租赁收租</p>
+            </van-col>
+            <van-col span="12">
+              <p style="color:#0AA214;text-align: right">200</p>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row>
+            <van-col span="9" :offset="1">
+              <p>经营收入</p>
+            </van-col>
+            <van-col span="5" :offset="2">
+              记27
+            </van-col>
+            <van-col span="7">
+              <p style="text-align: right">2021-08-06</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #icon>
+          <p style="line-height: 50px;font-size: 16px">157</p>
+        </template>
+        <template #title>
+          <van-row>
+            <van-col span="11" :offset="1">
+              <p>池塘租赁收租</p>
+            </van-col>
+            <van-col span="12">
+              <p style="color:#0AA214;text-align: right">200</p>
+            </van-col>
+          </van-row>
+        </template>
+        <template #label>
+          <van-row>
+            <van-col span="9" :offset="1">
+              <p>经营收入</p>
+            </van-col>
+            <van-col span="5" :offset="2">
+              记27
+            </van-col>
+            <van-col span="7">
+              <p style="text-align: right">2021-08-06</p>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <onlineHomeIndex></onlineHomeIndex>
+  </div>
+</template>
+
+<script>
+    import onlineHomeIndex from "../onlineHomeIndex";
+
+    export default {
+      components: {
+        onlineHomeIndex
+      },
+        name: "incomeDetail",
+      data() {
+        return {
+          activeName: 'a',
+          list: [],
+          loading: false,
+          finished: false,
+          result:[],
+        };
+      },
+      methods: {
+
+      },
+    }
+</script>
+
+<style scoped>
+  >>>.van-cell::after {
+    border-bottom: none;
+  }
+</style>

src/views/onlineHome/livePay.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <van-nav-bar
+      title="生活缴费"
+      left-arrow
+      @click-left="$router.back(-1)"
+    />
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell>
+        <template #title>
+          <h2 style="line-height: 20px;color: #1D6FE9">缴费类型</h2>
+        </template>
+      </van-cell>
+      <van-cell is-link>
+          <template #icon>
+              <van-image
+                height="20"
+                width="20"
+                src="../../../static/images/onlineHome/afford1.png">
+              </van-image>
+          </template>
+        <template #title>
+          <p style="margin-left: 10px;line-height: 20px">水费</p>
+        </template>
+      </van-cell>
+      <van-cell is-link>
+        <template #icon>
+          <van-image
+            height="20"
+            width="20"
+            src="../../../static/images/onlineHome/afford2.png">
+            </van-image>
+        </template>
+        <template #title>
+          <p style="margin-left: 10px">电费</p>
+        </template>
+      </van-cell>
+      <van-cell is-link>
+        <template #icon>
+          <van-image
+            height="20"
+            width="20"
+            src="../../../static/images/onlineHome/afford3.png">
+            </van-image>
+        </template>
+        <template #title>
+          <p style="margin-left: 10px">燃气费</p>
+        </template>
+      </van-cell>
+      <van-cell is-link>
+        <template #icon>
+          <van-image
+            height="20"
+            width="20"
+            src="../../../static/images/onlineHome/afford4.png">
+            </van-image>
+        </template>
+        <template #title>
+          <p style="margin-left: 10px">物业费</p>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <onlineHomeIndex></onlineHomeIndex>
+  </div>
+</template>
+
+<script>
+    import onlineHomeIndex from "../onlineHomeIndex";
+
+    export default {
+      components: {
+        onlineHomeIndex
+      },
+        name: "livePay"
+    }
+</script>
+
+<style scoped>
+
+</style>

src/views/onlineHome/mailList.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="app-container">
+    <van-nav-bar
+      title="通讯录"
+      left-arrow
+      @click-left="$router.back(-1)"
+    />
+    <van-row style="margin-top: 20px">
+      <van-col span="16" :offset="2">
+        <h3>张村村民联系方式</h3>
+      </van-col>
+    </van-row>
+    <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+      <van-cell v-for="item in list">
+        <template #icon>
+          <p style="color: #fff;line-height:14px;background: #1D6FE9;padding:8px 3px;height: 30px;border-radius: 8px;display: inline-block">{{item.name.substring(item.name.length-2)}}</p>
+        </template>
+        <template #title>
+          <van-row>
+            <van-col span="5" :offset="1">
+              <h3 style="line-height: 30px">{{item.name}}</h3>
+            </van-col>
+            <van-col span="5" :offset="1">
+              <h3 style="line-height: 30px;color: #878787">{{item.phone}}</h3>
+            </van-col>
+            <van-col span="2" :offset="10">
+              <van-image
+                height="30"
+                width="20"
+                src="../../../static/images/onlineHome/phone.png"></van-image>
+            </van-col>
+          </van-row>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <onlineHomeIndex></onlineHomeIndex>
+  </div>
+</template>
+
+<script>
+  import onlineHomeIndex from "../onlineHomeIndex";
+
+  export default {
+    components: {
+      onlineHomeIndex
+    },
+    name: "mailList",
+    data() {
+      return {
+        activeName: 'a',
+        list: [
+          {name:"张友全",phone:"13306311234"},
+          {name:"张友全",phone:"13306311234"},
+          {name:"张友全",phone:"13306311234"},
+          {name:"张友全",phone:"13306311234"},
+          {name:"张友全",phone:"13306311234"},
+          {name:"张友全",phone:"13306311234"},
+          {name:"张友全",phone:"13306311234"},
+          {name:"张友全",phone:"13306311234"},
+          {name:"张友全",phone:"13306311234"},
+          {name:"张友全",phone:"13306311234"},
+          {name:"张友全",phone:"13306311234"},
+          {name:"张友全",phone:"13306311234"},
+          {name:"张友全",phone:"13306311234"},
+          {name:"张友全",phone:"13306311234"},
+          {name:"张友全",phone:"13306311234"},
+          {name:"张友全",phone:"13306311234"},
+          {name:"张友全",phone:"13306311234"},
+          {name:"张友全",phone:"13306311234"},
+          ],
+        loading: false,
+        finished: false,
+        result:[],
+
+      };
+    },
+    methods: {
+
+    },
+  }
+</script>
+
+<style scoped>
+</style>

src/views/onlineHome/my.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="app-container">
+      <van-row style="background: url('../../../static/images/onlineHome/bg1.jpg') 50% ;height: 220px;border-radius:0 0 50px 50px;">
+        <van-cell center  style="padding-top: 50px;background: none">
+          <template #title>
+            <p style="color: #fff;margin-left: 10px;font-size: 20px">刘泽权</p>
+          </template>
+          <template #label>
+            <p style="color:#fff;margin-left: 10px">环翠区张村镇柳沟村</p>
+          </template>
+          <template  #right-icon>
+            <van-image width="62"
+                       height="62"
+                       style="border-radius: 10px;overflow: hidden;margin-right: 8px"
+                       src="https://img01.yzcdn.cn/vant/cat.jpeg">
+
+            </van-image>
+          </template>
+        </van-cell>
+      </van-row>
+
+      <van-cell-group style="width: 96%;margin:-50px 2% 2% 2%;border-radius: 6px;overflow: hidden;padding-top: 20px;padding-bottom: 20px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+        <van-cell title="画像（个人/农户）" is-link to="personalPicture">
+          <template #icon>
+            <van-image
+              fit="contain"
+              height="22"
+              style="margin-right: 15px"
+              src="../../../static/images/onlineHome/myIcon1.png"
+            />
+          </template>
+        </van-cell>
+        <van-cell title="我的业务" is-link to="done">
+          <template #icon>
+            <van-image
+              fit="contain"
+              height="22"
+              style="margin-right: 15px"
+              src="../../../static/images/onlineHome/myIcon2.png"
+            />
+          </template>
+        </van-cell>
+        <van-cell title="通讯录" is-link to="mailList">
+          <template #icon>
+            <van-image
+              fit="contain"
+              height="22"
+              style="margin-right: 15px"
+              src="../../../static/images/onlineHome/myIcon5.png"
+            />
+          </template>
+        </van-cell>
+        <van-cell title="生活缴费" is-link to="livePay">
+          <template #icon>
+            <van-image
+              fit="contain"
+              height="22"
+              style="margin-right: 15px"
+              src="../../../static/images/onlineHome/myIcon4.png"
+            />
+          </template>
+        </van-cell>
+        <van-cell title="投诉" is-link to="advice">
+          <template #icon>
+            <van-image
+              fit="contain"
+              height="22"
+              style="margin-right: 15px"
+              src="../../../static/images/onlineHome/myIcon6.png"
+            />
+          </template>
+        </van-cell>
+        <van-cell title="修改密码" is-link to="password">
+          <template #icon>
+            <van-image
+              fit="contain"
+              height="22"
+              style="margin-right: 15px"
+              src="../../../static/images/onlineHome/myIcon7.png"
+            />
+          </template>
+        </van-cell>
+      </van-cell-group>
+      <onlineHomeIndex></onlineHomeIndex>
+    </div>
+</template>
+
+<script>
+  import onlineHomeIndex from "../onlineHomeIndex";
+    export default {
+      components: {
+        onlineHomeIndex
+      },
+        name: "my"
+    }
+</script>
+
+<style scoped>
+>>>  .my-swipe .van-swipe-item {
+    color: #fff;
+    font-size: 22px;
+    line-height: 150px;
+    text-align: center;
+    background-color: #39a9ed;
+  }
+</style>

src/views/onlineHome/password.vue

@@ -0,0 +1,58 @@
+<template>
+<div>
+  <van-nav-bar
+    title="密码修改"
+    left-arrow
+    @click-left="$router.back(-1)"
+  />
+  <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+    <van-field type="password" v-model="oldValue" placeholder="" >
+      <template #left-icon>
+        <van-image
+          height="20"
+          width="16"
+          src="../../../static/images/onlineHome/lock.png"></van-image>
+      </template>
+      <template #label>
+        <H4 style="margin-left: 5px">原密码</H4>
+      </template>
+    </van-field>
+    <van-field type="password" v-model="newValue"  placeholder="" >
+      <template #left-icon>
+        <van-image
+          height="20"
+          width="16"
+          src="../../../static/images/onlineHome/lock.png"></van-image>
+      </template>
+      <template #label>
+        <H4 style="margin-left: 5px">新密码</H4>
+      </template>
+    </van-field>
+  </van-cell-group>
+  <van-row style="text-align: center;margin-top: 40px">
+    <van-button color="#1D6FE9" style="border-radius: 6px;width: 90%;margin: 0 auto">完成</van-button>
+  </van-row>
+  <onlineHomeIndex></onlineHomeIndex>
+</div>
+</template>
+
+<script>
+    import onlineHomeIndex from "../onlineHomeIndex";
+
+    export default {
+      components: {
+        onlineHomeIndex
+      },
+        name: "password",
+      data() {
+        return {
+          oldValue: '',
+          newValue: '',
+        };
+      }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/views/onlineHome/personalPicture.vue

@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <van-nav-bar
+      title="画像"
+      left-arrow
+      @click-left="$router.back(-1)"
+    />
+    <van-tabs v-model="active" title-active-color="#1D6FE9" color="#1D6FE9" line-width="20px" swipeable>
+      <van-tab title="个人画像">
+        <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+          <van-row>
+            <van-col span="22" :offset="2" >
+              <h2 style="color: #1D6FE9;margin: 10px 0">基本信息</h2>
+            </van-col>
+          </van-row>
+          <van-row>
+            <van-col span="10" :offset="2">
+              <h2 style="margin: 10px 0">刘泽权</h2>
+            </van-col>
+            <van-col span="10" :offset="2">
+              <h3 style="margin: 10px 0">张村镇东夼村</h3>
+            </van-col>
+          </van-row>
+          <van-row>
+            <van-col span="10" :offset="2">
+              <h3 style="color: #878787;margin: 6px 0">年龄：23</h3>
+            </van-col>
+            <van-col span="10" :offset="2">
+              <h3 style="color: #878787;margin: 6px 0">民族：汉族</h3>
+            </van-col>
+          </van-row>
+          <van-row>
+            <van-col span="10" :offset="2">
+              <h3 style="color: #878787;margin: 6px 0">性别：男</h3>
+            </van-col>
+            <van-col span="10" :offset="2">
+              <h3 style="color: #878787;margin: 6px 0">学历：本科</h3>
+            </van-col>
+          </van-row>
+          <van-row>
+            <van-col span="22" :offset="2">
+              <h3 style="color: #878787;margin: 6px 0">电话：13306311234</h3>
+            </van-col>
+          </van-row>
+          <van-row>
+            <van-col span="22" :offset="2">
+              <h3 style="color: #878787;margin: 6px 0">身份证号：371481200101042566</h3>
+            </van-col>
+          </van-row>
+          <van-row>
+            <van-col span="22" :offset="2">
+              <h3 style="color: #878787;margin: 6px 0">住址：威海市环翠区张村镇东夼村56号</h3>
+            </van-col>
+          </van-row>
+        </van-cell-group>
+        <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 15px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
+          <van-row>
+            <van-col span="22" :offset="2">
+              <h2 style="color: #1D6FE9;margin: 10px 0">资产信息</h2>
+            </van-col>
+          </van-row>
+          <van-row>
+            <van-col span="10" :offset="2">
+              <h3 style="color: #878787;margin: 6px 0">宅基地信息</h3>
+            </van-col>
+            <van-col span="10" :offset="2">
+              <h3 style="color: #878787;margin: 6px 0">股权信息</h3>
+            </van-col>
+          </van-row>
+          <van-row>
+            <van-col span="10" :offset="2">
+              <h2 style="margin-bottom: 6px">147号1宗</h2>
+            </van-col>
+            <van-col span="10" :offset="2">
+              <h2 style="margin-bottom: 6px">12股</h2>
+            </van-col>
+          </van-row>
+          <van-row>
+            <van-col span="10" :offset="2">
+              <h3 style="color: #878787;margin: 6px 0">承包地信息</h3>
+            </van-col>
+            <van-col span="10" :offset="2">
+              <h3 style="color: #878787;margin: 6px 0">议事会组织</h3>
+            </van-col>
+          </van-row>
+          <van-row>
+            <van-col span="10" :offset="2">
+              <h2 style="margin-bottom: 6px">3亩</h2>
+            </van-col>
+            <van-col span="10" :offset="2">
+              <h2 style="margin-bottom: 6px">议事成员</h2>
+            </van-col>
+          </van-row>
+        </van-cell-group>
+      </van-tab>
+      <van-tab title="农户画像">农户画像</van-tab>
+    </van-tabs>
+    <onlineHomeIndex></onlineHomeIndex>
+  </div>
+</template>
+
+<script>
+    import onlineHomeIndex from "../onlineHomeIndex";
+    export default {
+      components: {
+        onlineHomeIndex
+      },
+        name: "personalPicture",
+      data() {
+        return {
+          active: '个人画像',
+        };
+      },
+    }
+</script>
+
+<style scoped>
+
+</style>

src/views/onlineHome/publicity.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="app-container">
+      <van-nav-bar
+        title="公示公告"
+      >
+        <template #right>
+          <van-icon name="wap-nav" color="#000" size="18"/>
+        </template>
+      </van-nav-bar>
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+      >
+        <van-cell v-for="item in list" :key="item" is-link url="" style="margin:2%;width:96%;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); min-height: 100px;">
+          <template #title>
+            <p style="display:inline-block;background: #EC4B2C;height:20px;width: 20px;border-radius: 2px;margin-right: 10px;float: left"></p><p style="font-weight: bold;font-size: 18px;">{{item}}</p>
+          </template>
+          <template #label>
+            <p style="font-size: 16px">内容</p>
+          </template>
+        </van-cell>
+      </van-list>
+      <onlineHomeIndex></onlineHomeIndex>
+    </div>
+</template>
+
+<script>
+  import onlineHomeIndex from "../onlineHomeIndex";
+    export default {
+      components: {
+        onlineHomeIndex
+      },
+        name: "publicity",
+      data() {
+        return {
+          list: [],
+          loading: false,
+          finished: false,
+        };
+      },
+      methods: {
+        onLoad() {
+          // 异步更新数据
+          // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+          setTimeout(() => {
+            for (let i = 0; i < 10; i++) {
+              this.list.push(this.list.length + 1+"标题");
+            }
+
+            // 加载状态结束
+            this.loading = false;
+
+            // 数据全部加载完成
+            if (this.list.length >= 40) {
+              this.finished = true;
+            }
+          }, 1000);
+        },
+      },
+    }
+</script>
+
+<style scoped>
+>>>  .my-swipe .van-swipe-item {
+    color: #fff;
+    font-size: 20px;
+    line-height: 150px;
+    text-align: center;
+    background-color: #39a9ed;
+  }
+</style>

src/views/onlineHome/threeAffairs.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="app-container">
+    <van-nav-bar
+      title="三务公开"
+      left-arrow
+      @click-left="$router.back(-1)"
+    />
+    <van-tabs v-model="activeName" title-active-color="#1D6FE9" color="#1D6FE9" line-width="20px" swipeable>
+      <van-tab title="村务" name="a">
+        <van-list
+          v-model="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
+        >
+          <van-cell v-for="item in list" :key="item" is-link url="" style="margin:2%;width:96%;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); min-height: 100px;">
+            <template #title>
+              <p style="display:inline-block;background: #EC4B2C;height:20px;width: 20px;border-radius: 2px;margin-right: 10px;float: left"></p><p style="font-weight: bold;font-size: 18px;">{{item}}</p>
+            </template>
+            <template #label>
+              <p style="font-size: 16px">内容</p>
+            </template>
+          </van-cell>
+        </van-list>
+      </van-tab>
+      <van-tab title="党务" name="b">
+        <van-list
+          v-model="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
+        >
+          <van-cell v-for="item in list" :key="item" is-link url="" style="margin:2%;width:96%;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); min-height: 100px;">
+            <template #title>
+              <p style="display:inline-block;background: #FF4646;height:20px;width: 20px;border-radius: 2px;margin-right: 10px;float: left"></p><p style="font-weight: bold;font-size: 18px;">{{item}}</p>
+            </template>
+            <template #label>
+              <p style="font-size: 16px">内容</p>
+            </template>
+          </van-cell>
+        </van-list>
+      </van-tab>
+      <van-tab title="政务" name="c">
+        <van-list
+          v-model="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
+        >
+          <van-cell v-for="item in list" :key="item" is-link url="" style="margin:2%;width:96%;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); min-height: 100px;">
+            <template #title>
+              <p style="display:inline-block;background: #7DDA4F;height:20px;width: 20px;border-radius: 2px;margin-right: 10px;float: left"></p><p style="font-weight: bold;font-size: 18px;">{{item}}</p>
+            </template>
+            <template #label>
+              <p style="font-size: 16px">内容</p>
+            </template>
+          </van-cell>
+        </van-list>
+      </van-tab>
+    </van-tabs>
+    <onlineHomeIndex></onlineHomeIndex>
+  </div>
+</template>
+
+<script>
+    import onlineHomeIndex from "../onlineHomeIndex";
+
+    export default {
+      components: {
+        onlineHomeIndex
+      },
+        name: "threeAffairs",
+      data() {
+        return {
+          activeName: 'a',
+          list: [],
+          loading: false,
+          finished: false,
+        };
+      },
+      methods: {
+        onLoad() {
+          // 异步更新数据
+          // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+          setTimeout(() => {
+            for (let i = 0; i < 10; i++) {
+              this.list.push(this.list.length + 1+"标题");
+            }
+
+            // 加载状态结束
+            this.loading = false;
+
+            // 数据全部加载完成
+            if (this.list.length >= 40) {
+              this.finished = true;
+            }
+          }, 1000);
+        },
+      },
+    }
+</script>
+
+<style scoped>
+
+</style>

src/views/onlineHome/workbench.vue

@@ -0,0 +1,321 @@
+<template>
+    <div class="app-container">
+      <van-nav-bar
+        title="网上家园"
+      >
+        <template #left>
+            <van-icon name="location" color="3A80FB" size="16"/>
+          <p  style="color: #878787;margin-left: 5px">柳沟村</p>
+        </template>
+        <template #right>
+          <van-icon name="wap-nav" color="#000" size="18"/>
+        </template>
+      </van-nav-bar>
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="width: 96%;margin: 2%;height:120px;border-radius: 6px;">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+      <van-row style="margin:2%;width:96%;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); min-height: 100px;background: #fff;">
+        <van-cell style="border-radius: 6px;">
+          <template #title>
+            <p style="display:inline-block;background: #EC4B2C;height:20px;width: 20px;border-radius: 2px;margin-right: 10px;float: left"></p>
+            <p style="font-weight: bold;font-size: 18px;display: inline-block">待办</p>
+          </template>
+          <template #label>
+            <p>暂无代办</p>
+          </template>
+        </van-cell>
+      </van-row>
+      <van-row style="margin:2%;width:96%;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);background: #fff">
+        <van-cell style="border-radius: 6px;">
+          <template #title>
+            <p style="display:inline-block;background: #FFA63E;height:20px;width: 20px;border-radius: 2px;margin-right: 10px;float: left"></p>
+            <p style="font-weight: bold;font-size: 18px;display: inline-block">业务申请</p>
+          </template>
+        </van-cell>
+          <van-grid :gutter="10" :border="false">
+            <van-grid-item text="用章申请" >
+              <div slot="default" style="background:#FFA63E;padding: 10px;text-align:center;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px" >
+                <img src="../../../static/images/onlineHome/icon1.png" style="height: 25px;vertical-align: center;" alt />
+              </div>
+              <p style="margin-top: 5px;color: #666666;">用章申请</p>
+            </van-grid-item>
+            <van-grid-item text="宅基地申请" >
+              <div slot="default">
+                <div style="background:#539FFD;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px">
+                  <img src="../../../static/images/onlineHome/icon2.png" style="width: 25px" alt />
+                </div>
+              </div>
+              <p style="margin-top: 5px;color: #666666;">宅基地申请</p>
+            </van-grid-item>
+            <van-grid-item text="宅基地流转" >
+              <div slot="default">
+                <div style="background:#FFA63E;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
+                  <img src="../../../static/images/onlineHome/icon3.png" style="width: 25px;margin-top:5px;display: inline-block" alt />
+                </div>
+              </div>
+              <p style="margin-top: 5px;color: #666666;">宅基地流转</p>
+            </van-grid-item>
+            <van-grid-item text="宅基地退出" >
+              <div slot="default">
+                <div style="background:#539FFD;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
+                  <img src="../../../static/images/onlineHome/icon4.png" style="width: 25px" alt />
+                </div>
+              </div>
+              <p style="margin-top: 5px;color: #666666;">宅基地退出</p>
+            </van-grid-item>
+            <van-grid-item text="付款申请" >
+              <div slot="default">
+                <div style="background:#FF4646;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
+                  <img src="../../../static/images/onlineHome/icon5.png" style="width: 25px" alt />
+                </div>
+              </div>
+              <p style="margin-top: 5px;color: #666666;">付款申请</p>
+            </van-grid-item>
+            <van-grid-item text="项目申报" >
+              <div slot="default">
+                <div style="background:#FF6464;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
+                  <img src="../../../static/images/onlineHome/icon6.png" style="width: 25px" alt />
+                </div>
+              </div>
+              <p style="margin-top: 5px;color: #666666;">项目申报</p>
+            </van-grid-item>
+            <van-grid-item text="拨付申请" >
+              <div slot="default">
+                <div style="background:#FF7E45;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
+                  <img src="../../../static/images/onlineHome/icon7.png" style="width: 25px" alt />
+                </div>
+              </div>
+              <p style="margin-top: 5px;color: #666666;">拨付申请</p>
+            </van-grid-item>
+            <van-grid-item text="验收申请" >
+              <div slot="default">
+                <div style="background:#7DDA4F;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
+                  <img src="../../../static/images/onlineHome/icon8.png" style="width: 25px" alt />
+                </div>
+              </div>
+              <p style="margin-top: 5px;color: #666666;">验收申请</p>
+            </van-grid-item>
+          </van-grid>
+      </van-row>
+      <van-row  style="margin:2%;width:96%;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);background: #fff">
+        <van-cell style="border-radius: 6px;">
+          <template #title>
+            <p style="font-weight: bold;font-size: 18px;display: inline-block">农村三资管理</p>
+          </template>
+        </van-cell>
+        <van-grid :gutter="10" :border="false">
+          <van-grid-item text="支出明细" to="expenditureDetail">
+            <div slot="default" style="background:#FF4646;padding: 10px;text-align:center;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px" >
+              <img src="../../../static/images/onlineHome/icon9.png" style="height: 25px;vertical-align: center;" alt />
+            </div>
+            <p style="margin-top: 5px;color: #666666;">支出明细</p>
+          </van-grid-item>
+          <van-grid-item text="收入明细" to="incomeDetail">
+            <div slot="default">
+              <div style="background:#FF4646;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px">
+                <img src="../../../static/images/onlineHome/icon9.png" style="width: 25px" alt />
+              </div>
+            </div>
+            <p style="margin-top: 5px;color: #666666;">收入明细</p>
+          </van-grid-item>
+          <van-grid-item text="收支明细" to="inAndOutDetail">
+            <div slot="default">
+              <div style="background:#FF4646;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
+                <img src="../../../static/images/onlineHome/icon9.png" style="width: 25px;" alt />
+              </div>
+            </div>
+            <p style="margin-top: 5px;color: #666666;">收支明细</p>
+          </van-grid-item>
+          <van-grid-item text="现金银行" >
+            <div slot="default">
+              <div style="background:#3AC2DB;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
+                <img src="../../../static/images/onlineHome/icon10.png" style="width: 25px" alt />
+              </div>
+            </div>
+            <p style="margin-top: 5px;color: #666666;">现金银行</p>
+          </van-grid-item>
+        </van-grid>
+      </van-row>
+      <van-row  style="margin:2%;width:96%;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);background: #fff">
+        <van-cell style="border-radius: 6px;">
+          <template #title>
+            <p style="font-weight: bold;font-size: 18px;display: inline-block">农村产权交易管理</p>
+          </template>
+        </van-cell>
+        <van-grid :gutter="10" :border="false">
+          <van-grid-item text="挂牌项目" >
+            <div slot="default" style="background:#FF4646;padding: 10px;text-align:center;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px" >
+              <img src="../../../static/images/onlineHome/icon6.png" style="width: 25px;" alt />
+            </div>
+            <p style="margin-top: 5px;color: #666666;">挂牌项目</p>
+          </van-grid-item>
+          <van-grid-item text="成交公示" >
+            <div slot="default">
+              <div style="background:#C5685F;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px">
+                <img src="../../../static/images/onlineHome/icon11.png" style="width: 25px" alt />
+              </div>
+            </div>
+            <p style="margin-top: 5px;color: #666666;">成交公示</p>
+          </van-grid-item>
+          <van-grid-item text="合同管理" >
+            <div slot="default">
+              <div style="background:#539FFD;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
+                <img src="../../../static/images/onlineHome/icon12.png" style="width: 25px;" alt />
+              </div>
+            </div>
+            <p style="margin-top: 5px;color: #666666;">合同管理</p>
+          </van-grid-item>
+          <van-grid-item text="招标管理" >
+            <div slot="default">
+              <div style="background:#3AC2DB;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
+                <img src="../../../static/images/onlineHome/icon13.png" style="width: 25px" alt />
+              </div>
+            </div>
+            <p style="margin-top: 5px;color: #666666;">招标管理</p>
+          </van-grid-item>
+        </van-grid>
+      </van-row>
+      <van-row  style="margin:2%;width:96%;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);background: #fff">
+        <van-cell style="border-radius: 6px;">
+          <template #title>
+            <p style="font-weight: bold;font-size: 18px;display: inline-block">农村产权交易管理</p>
+          </template>
+        </van-cell>
+        <van-grid :gutter="10" :border="false">
+          <van-grid-item text="宅基地申请" >
+            <div slot="default" style="background:#539FFD;padding: 10px;text-align:center;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px" >
+              <img src="../../../static/images/onlineHome/icon2.png" style="width: 25px;" alt />
+            </div>
+            <p style="margin-top: 5px;color: #666666;">宅基地申请</p>
+          </van-grid-item>
+          <van-grid-item text="证书打印" >
+            <div slot="default">
+              <div style="background:#7790FE;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px">
+                <img src="../../../static/images/onlineHome/icon12.png" style="width: 25px" alt />
+              </div>
+            </div>
+            <p style="margin-top: 5px;color: #666666;">证书打印</p>
+          </van-grid-item>
+          <van-grid-item text="公示查询" >
+            <div slot="default">
+              <div style="background:#C5685F;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
+                <img src="../../../static/images/onlineHome/icon11.png" style="width: 25px;" alt />
+              </div>
+            </div>
+            <p style="margin-top: 5px;color: #666666;">公示查询</p>
+          </van-grid-item>
+          <van-grid-item text="巡查执法" >
+            <div slot="default">
+              <div style="background:#1D6FE9;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
+                <img src="../../../static/images/onlineHome/icon16.png" style="width: 25px" alt />
+              </div>
+            </div>
+            <p style="margin-top: 5px;color: #666666;">巡查执法</p>
+          </van-grid-item>
+          <van-grid-item text="村庄规划" >
+            <div slot="default">
+              <div style="background:#FFCE05;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px">
+                <img src="../../../static/images/onlineHome/icon17.png" style="width: 25px" alt />
+              </div>
+            </div>
+            <p style="margin-top: 5px;color: #666666;">村庄规划</p>
+          </van-grid-item>
+          <van-grid-item text="基础档案" >
+            <div slot="default">
+              <div style="background:#FF7E45;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
+                <img src="../../../static/images/onlineHome/icon18.png" style="width: 25px;" alt />
+              </div>
+            </div>
+            <p style="margin-top: 5px;color: #666666;">基础档案</p>
+          </van-grid-item>
+          <van-grid-item text="盘活利用" >
+            <div slot="default">
+              <div style="background:#7DDA4F;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
+                <img src="../../../static/images/onlineHome/icon19.png" style="width: 25px" alt />
+              </div>
+            </div>
+            <p style="margin-top: 5px;color: #666666;">盘活利用</p>
+          </van-grid-item>
+        </van-grid>
+      </van-row>
+      <van-row  style="margin:2%;width:96%;padding:20px 0;padding:20px 0;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);background: #fff">
+        <van-cell style="border-radius: 6px;">
+          <template #title>
+            <p style="font-weight: bold;font-size: 18px;display: inline-block">农村产权制度改革管理</p>
+          </template>
+        </van-cell>
+        <van-grid :gutter="10" :border="false">
+          <van-grid-item text="财务管理" >
+            <div slot="default" style="background:#FF4646;padding: 10px;text-align:center;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px" >
+              <img src="../../../static/images/onlineHome/icon6.png" style="width: 25px;" alt />
+            </div>
+            <p style="margin-top: 5px;color: #666666;">财务管理</p>
+          </van-grid-item>
+          <van-grid-item text="资产管理" >
+            <div slot="default">
+              <div style="background:#FF6464;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px">
+                <img src="../../../static/images/onlineHome/icon11.png" style="width: 25px" alt />
+              </div>
+            </div>
+            <p style="margin-top: 5px;color: #666666;">资产管理</p>
+          </van-grid-item>
+          <van-grid-item text="合同管理" >
+            <div slot="default">
+              <div style="background:#539FFD;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
+                <img src="../../../static/images/onlineHome/icon12.png" style="width: 25px;" alt />
+              </div>
+            </div>
+            <p style="margin-top: 5px;color: #666666;">合同管理</p>
+          </van-grid-item>
+          <van-grid-item text="股权管理" >
+            <div slot="default">
+              <div style="background:#FFA63E;padding: 10px;border-radius: 10px;box-sizing: border-box;width: 44px;height: 44px ">
+                <img src="../../../static/images/onlineHome/icon13.png" style="width: 25px" alt />
+              </div>
+            </div>
+            <p style="margin-top: 5px;color: #666666;">股权管理</p>
+          </van-grid-item>
+        </van-grid>
+      </van-row>
+      <div style="height:55px"></div>
+      <onlineHomeIndex></onlineHomeIndex>
+    </div>
+</template>
+
+<script>
+  import onlineHomeIndex from "../onlineHomeIndex";
+    export default {
+      components: {
+        onlineHomeIndex
+      },
+        name: "workbench",
+      data() {
+        return {
+          list1: [],
+
+        };
+      },
+    }
+</script>
+
+<style scoped>
+    >>>.my-swipe .van-swipe-item {
+    color: #fff;
+    font-size: 20px;
+    line-height: 144px;
+    text-align: center;
+    background-color: #39a9ed;
+  }
+  >>>.van-grid-item__content{
+    padding:0.213333rem;
+  }
+  >>>.van-cell::after{
+    border: none;
+  }
+  >>>.app-container{
+    padding:0;
+  }
+</style>

src/views/onlineHomeIndex.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="app-container">
+    <router-view />
+    <van-tabbar route>
+      <van-tabbar-item replace to="/onlineHome/publicity" icon="bullhorn-o">公示</van-tabbar-item>
+      <van-tabbar-item replace to="/onlineHome/workbench" icon="apps-o">工作台</van-tabbar-item>
+      <van-tabbar-item replace to="/onlineHome/home" icon="wap-home-o">家园</van-tabbar-item>
+      <van-tabbar-item replace to="/onlineHome/my" icon="manager-o">我的</van-tabbar-item>
+    </van-tabbar>
+  </div>
+</template>
+<script>
+export default {
+  name: "onlineHomeIndex",
+  data() {
+    return {
+      active: 0,
+
+    };
+  },
+  created() {
+;
+  },
+  methods: {
+
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.app-container {
+  padding: 6% 3% 0;
+}
+
+</style>

src/views/onlineHomeLogin.vue

@@ -0,0 +1,481 @@
+<template>
+  <div class="app-container" :style="{height:height+'px'}">
+    <div class="title">
+      <img style="display: inline-block;margin-right: 10px;" src="../../static/images/onlineHome/OHlogo1.png" alt="">
+      <img style="display: inline-block;" src="../../static/images/onlineHome/OHlogoWord.png" alt="">
+    </div>
+    <van-tabs v-model="active" :swipeable="true" style="margin-top:0.5rem;padding:0 10px;">
+      <van-tab title="登录" name="1">
+        <van-form style="margin:50px 0;" v-if="!showMessage">
+          <van-field
+            v-model="formData.mobile"
+            name="请输入手机号"
+            placeholder="请输入手机号"
+            :rules="[{ required: true, message: '请填写手机号' }]"
+          />
+          <van-field
+            v-model="formData.password"
+            type="password"
+            name="请输入密码"
+            style="margin-top: 20px"
+            placeholder="请输入密码"
+            :rules="[{ required: true, message: '请填写密码' }]"
+          />
+          <p style="text-align: right;margin-top:10px;margin-right:20px;color:#1D6FE9 ">忘记密码</p>
+          <div style="margin: 50px 16px 16px;">
+            <van-button block type="info" native-type="submit">登录</van-button>
+            <p style="text-align: center;margin-top: 20px;color:#878787 " @click="showMessagePop">短信验证码登录</p>
+          </div>
+        </van-form>
+        <van-form style="margin:50px 0;" v-if="showMessage">
+          <van-field
+            v-model="formData.mobile"
+            name="请输入手机号"
+            placeholder="请输入手机号"
+            :rules="[{ required: true, message: '请填写用户名' }]"
+          />
+          <div style="margin: 50px 16px 16px;">
+            <van-button block type="info" native-type="submit" @click="showPopup">获取验证码</van-button>
+            <p style="text-align: center;margin-top: 20px;color:#878787 " @click="showMessagePop">密码登录</p>
+          </div>
+        </van-form>
+      </van-tab>
+      <van-tab title="注册" name="2">
+        <van-form style="margin:50px 0;">
+          <van-field
+            v-model="formData.memberName"
+            name="请输入姓名"
+            placeholder="请输入姓名"
+            :rules="[{ required: true, message: '请填写姓名' }]"
+          />
+          <van-field
+            v-model="formData.idcard"
+            name="请输入身份证号"
+            style="margin-top: 20px"
+            placeholder="请输入身份证号"
+            :rules="[{ required: true, message: '请输入身份证号' }]"
+          />
+          <van-field
+            v-model="formData.password"
+            type="password"
+            name="请输入密码"
+            style="margin-top: 20px"
+            placeholder="请输入手机号"
+            :rules="[{ required: true, message: '请填写手机号' }]"
+          />
+          <van-field
+            v-model="formData.smsCode"
+            name="请输入验证码"
+            style="margin-top: 20px"
+            placeholder="请输入验证码"
+            :rules="[{ required: true, message: '请填写验证码' }]"
+          >
+            <template #button>
+              <van-button size="mini" type="info" >获取验证码</van-button>
+            </template>
+          </van-field>
+          <div style="margin: 50px 16px 16px;">
+            <van-button block type="info" native-type="submit">注册</van-button>
+          </div>
+        </van-form>
+      </van-tab>
+    </van-tabs>
+    <van-popup v-model="showKeyboard" :style="{ height: '100%',width:'100%' }" >
+      <van-nav-bar
+        left-arrow
+        fixed
+        placeholder
+        @click-left="showPopup"
+      />
+      <div style="padding: 20px">
+        <h1>输入短信验证码</h1>
+        <h3 style="color: #878787">验证码已发送至13333333333，请在下方输入框内输入4位数字验证码</h3>
+      </div>
+      <van-password-input
+        :value="smsCodeValue"
+        :length="4"
+        :focused="showKeyboard"
+        @focus="showKeyboard = true"
+      />
+      <van-number-keyboard
+        v-model="smsCodeValue"
+        :show="showKeyboard"
+        theme="custom"
+        close-button-text="完成"
+      />
+    </van-popup>
+    <div class="login-main" v-if="false">
+      <ul class="head_nav clear">
+        <li @click="isSmsLogin = false" :class="{ active: !isSmsLogin }">
+          账号登录
+        </li>
+        <li @click="isSmsLogin = true" :class="{ active: isSmsLogin }">
+          验证码登录
+        </li>
+      </ul>
+
+      <div class="form_main">
+        <van-form @submit="handleLogin">
+          <div v-show="!isSmsLogin">
+            <van-field
+              v-model="formData.username"
+              name="username"
+              label="用户名"
+              placeholder="用户名"
+            />
+            <van-field
+              v-model="formData.password"
+              type="password"
+              name="password"
+              label="密码"
+              placeholder="密码"
+            />
+            <van-field
+              v-model="formData.code"
+              center
+              clearable
+              label="验证码"
+              placeholder="图形验证码"
+
+            >
+              <template #button>
+                <img class="code-img" :src="codeUrl" @click="getCode" />
+              </template>
+            </van-field>
+          </div>
+          <div v-show="isSmsLogin">
+            <van-field
+              v-model="formData.mobile"
+              label="手机号"
+              placeholder="请输入手机号码"
+            />
+            <van-field
+              v-model="formData.smsCode"
+              center
+              clearable
+              label="短信验证码"
+              placeholder="请输入短信验证码"
+            >
+              <template #button>
+                <van-button
+                  size="small"
+                  type="primary"
+                  @click.native.prevent="getSmsCode"
+                  >{{
+                    computeTime > 0 ? `(${computeTime}s)已发送` : "获取验证码"
+                  }}</van-button
+                >
+              </template>
+            </van-field>
+          </div>
+          <div class="form-submit">
+            <van-button
+              round
+              block
+              type="info"
+              native-type="submit"
+              :loading="loading"
+              >登录</van-button
+            >
+          </div>
+        </van-form>
+      </div>
+    </div>
+
+    <div class="reveal-modal-con">
+      <div class="dd_txt">
+        <router-link to="register/index">注册账户</router-link>
+      </div>
+<!--      <div class="other-login">-->
+<!--        <p class="desc">—— 更多登录方式 ——</p>-->
+<!--        <p class="icon-other-logins">-->
+<!--          <router-link class="wx" to="/"></router-link>-->
+<!--          <router-link class="rlsb" to="/"></router-link>-->
+<!--        </p>-->
+<!--      </div>-->
+    </div>
+  </div>
+</template>
+<style>
+  .van-tab--active{
+    font-size: .6rem;
+    font-weight: bold;
+  }
+  .van-tabs__line{
+    background:#1D6FE9;
+    width: 0.15rem;
+    height: 0.15rem;
+    border-radius: 0.07rem;
+    bottom: 0.3rem;
+  }
+  .van-tabs__nav{
+    padding:0
+  }
+  .van-tab{
+    display: inline-block;
+    flex: inherit;
+    margin-left: 30px;
+    line-height: .8rem;
+  }
+  .van-tab__text--ellipsis {
+    overflow: auto;
+  }
+  .van-password-input{
+    width: 50%;
+    margin: 0 auto;
+  }
+  [class*=van-hairline]::after{
+    border:none;
+  }
+  .van-password-input__security li{
+    margin: 0 10px;
+    border-bottom: 3px solid black;
+  }
+</style>
+<script>
+import { getCodeImg, getSmsCode } from "@/api/login";
+import Cookies from "js-cookie";
+//引用wx sdk
+import wx from "weixin-js-sdk";
+export default {
+  name: "login",
+  data() {
+    return {
+      showMessage:false,
+      smsCodeValue:"",
+      showKeyboard:false,
+      formData: {
+        username: "admin", //账号
+        password: "admin123", //密码
+        // username:'',
+        // password:'',
+        code: null, //图片验证码
+        uuid: null, //识别uuid
+        mobile: null, //手机号
+        smsCode: null, //短信验证码
+      },
+      loading: false,
+      codeUrl: "", //验证码
+      isSmsLogin: false, //是否手机验证码
+      computeTime: 0,
+      height:0,
+
+      active:1
+    };
+  },
+  created() {
+    this.getCode();
+    this.height = document.body.clientHeight
+    //调用微信公众号方法
+    // wx.config({
+    //     debug: true, // 开启调试模式,
+    //     appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
+    //     timestamp: res.timestamp, // 必填，生成签名的时间戳
+    //     nonceStr: res.nonceStr, // 必填，生成签名的随机串
+    //     signature: res.signature,// 必填，签名，见附录1
+    //     jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
+    //   });
+    //分享要用encodeURIComponent()方法
+  },
+  methods: {
+    showPopup() {
+      this.showKeyboard = !this.showKeyboard;
+    },
+    showMessagePop(){
+      this.showMessage = !this.showMessage
+    },
+    getCode() {
+      getCodeImg().then((res) => {
+        this.formData.uuid = res.uuid;
+        this.codeUrl = "data:image/gif;base64," + res.img;
+      });
+    },
+    getSmsCode() {
+      if (!this.computeTime) {
+        let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
+        if (!myreg.test(this.formData.mobile)) {
+          this.$dialog.alert({
+            message: '手机号格式不正确',
+          });
+          return false;
+        }
+        getSmsCode(this.formData.mobile).then((res) => {
+          if (res.code === 200) {
+             this.$dialog.alert({
+              message: '验证码已发送',
+            });
+            this.loginForm.uuid = res.uuid;
+            this.computeTime = 60;
+            this.timer = setInterval(() => {
+              this.computeTime--;
+              if (this.computeTime <= 0) {
+                clearInterval(this.timer);
+              }
+            }, 1000);
+          }
+        });
+      }
+    },
+    handleLogin(values) {
+      if (this.isSmsLogin) {
+        //短信登录
+        let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
+        if (!myreg.test(this.formData.mobile)) {
+          this.$dialog.alert({
+              message: '手机号格式不正确',
+            });
+          return false;
+        } else if (this.formData.smsCode == "") {
+          this.$dialog.alert({
+              message: '短信验证码不能为空',
+            });
+          return false;
+        }
+        this.loading = true;
+        this.$store
+          .dispatch("SmsLogin", this.formData)
+          .then(() => {
+            this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+          })
+          .catch(() => {
+            this.loading = false;
+          });
+      } else {
+        //账号密码登录
+        if (this.formData.username == "") {
+          this.$dialog.alert({
+              message: '账号不能为空',
+          });
+          return false;
+        } else if (this.formData.password == "") {
+          this.$dialog.alert({
+              message: '密码不能为空',
+          });
+          return false;
+        } else if (this.formData.code == "") {
+          this.$dialog.alert({
+              message: '图片验证码不能为空',
+          });
+          return false;
+        }
+        this.$store
+          .dispatch("Login", this.formData)
+          .then(() => {
+            this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+          })
+          .catch(() => {
+            this.loading = false;
+            this.getCode();
+          });
+      }
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+  >>>.van-tab--active {
+    font-size: 30px!important;
+  }
+.title{
+  padding-top: 20%;
+  width: 84%;
+  margin: 0 auto;
+}
+.title_one{
+  color: #666666;
+  font-size: 0.4rem;
+}
+.title_two{
+  color: #007e72;
+  font-size: 0.6rem;
+}
+.title_three{
+  color: #FFF;
+  font-size: 0.8rem;
+}
+.app-container {
+  background: #fff;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  .focus-logo {
+    width: 310px;
+    margin: 0 auto 40px;
+    padding-top: 60px;
+    img {
+      width: 100%;
+    }
+    .describe{
+      text-align: center;
+      font-size: 34px;
+      padding:10px 0 0;
+      color: #666;
+    }
+  }
+
+  .login-main{
+    width: 95%;
+    margin: 0 auto;
+    background: #fff;
+    border-radius: 20px;
+    overflow: hidden;
+    border: 1px solid #ddd;
+    padding-bottom:40px;
+    margin-top: 0.4rem;
+  }
+  .head_nav {
+    li {
+      width: 50%;
+      float: left;
+      height: 90px;
+      line-height: 90px;
+      text-align: center;
+      font-size: 30px;
+      border-bottom: 2px solid #ddd;
+      &.active {
+        background: #fff;
+        border-bottom: 2px solid #fff;
+        color: #2386ee;
+      }
+      &:last-child {
+        border-left: 2px solid #ddd;
+      }
+    }
+    background: #f5f5f5;
+  }
+  .form_main {
+    padding-top: 20px;
+    .form-submit {
+      margin: 40px 40px 0;
+    }
+    .code-img {
+      width: 220px;
+    }
+  }
+  .reveal-modal-con {
+    margin: 30px 40px 0;
+    .dd_txt {
+      text-align: center;
+      font-size: 28px;
+      a {
+        color: #FFF;
+      }
+    }
+    .other-login {
+      text-align: center;
+      .desc {
+        font-family: PingFangSC-Regular;
+        font-size: 24px;
+        color: #666;
+        letter-spacing: 0;
+        line-height: 30px;
+        height: 30px;
+        margin-top: 40px;
+        opacity: 0.7;
+      }
+    }
+  }
+}
+</style>