nsgk_mobile/src/views/onlineHome/villagePortrait.vue

<template>
    <div class="app-container">
      <van-nav-bar
        title="村画像"
        left-arrow
        @click-left="$router.back(-1)"
      >
      </van-nav-bar>
      <van-cell-group class="van-cell-group" style="padding:10px;">
          <p style="color: #1D6FE9;padding:10px;font-size: 16px">基本情况</p>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <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>
        <div style="line-height: 20px;overflow: auto;padding:5px 10px;">
          <p style="float: left;width: 50%;font-size: 14px">户籍人口：2000人</p>
          <p style="float: left;width: 50%;font-size: 14px">村长：李四</p>
        </div>
        <div style="line-height: 20px;overflow: auto;padding:5px 10px;">
          <p style="float: left;width: 50%;font-size: 14px">总资产：2000万元</p>
          <p style="float: left;width: 50%;font-size: 14px">村支书：李琪琪</p>
        </div>
      </van-cell-group>
      <van-cell-group class="van-cell-group" style="padding:10px;">
        <p style="color: #1D6FE9;padding:10px;font-size: 16px">财务情况</p>
        <div style="line-height: 20px;overflow: auto;padding:5px 10px;">
          <p style="float: left;width: 50%;font-size: 14px">现金：200万</p>
          <p style="float: left;width: 50%;font-size: 14px">总负债：152万元</p>
        </div>
        <div style="line-height: 20px;overflow: auto;padding:5px 10px;">
          <p style="float: left;width: 50%;font-size: 14px">银行存款：1500万元</p>
          <p style="float: left;width: 50%;font-size: 14px">总收入：2053万元</p>
        </div>
        <div style="line-height: 20px;overflow: auto;padding:5px 10px;">
          <p style="float: left;width: 50%;font-size: 14px">总资产：2000万元</p>
          <p style="float: left;width: 50%;font-size: 14px">总支出：2053万元</p>
        </div>
      </van-cell-group>
      <van-cell-group class="van-cell-group" style="padding:10px;">
        <p style="color: #1D6FE9;padding:10px;font-size: 16px">产改情况</p>
        <div style="line-height: 20px;overflow: auto;padding:5px 10px;">
          <p style="float: left;width: 50%;font-size: 14px">量化总资产：54312万元</p>
          <p style="float: left;width: 50%;font-size: 14px">成员清册：1157人</p>
        </div>
        <div style="line-height: 20px;overflow: auto;padding:5px 10px;">
          <p style="float: left;width: 50%;font-size: 14px">股份总数：12000股</p>
          <p style="float: left;width: 50%;font-size: 14px">成员占股：78%</p>
        </div>
      </van-cell-group>
      <van-cell-group class="van-cell-group" style="padding:10px;">
        <p style="color: #1D6FE9;padding:10px;font-size: 16px">人居环境</p>
        <div style="line-height: 20px;overflow: auto;padding:5px 10px;">
          <p style="float: left;width: 50%;font-size: 14px">户厕：300个</p>
          <p style="float: left;width: 50%;font-size: 14px">污水站：2个</p>
        </div>
        <div style="line-height: 20px;overflow: auto;padding:5px 10px;">
          <p style="float: left;width: 50%;font-size: 14px">公厕：2个</p>
          <p style="float: left;width: 50%;font-size: 14px">路灯：130个</p>
        </div>
        <div style="line-height: 20px;overflow: auto;padding:5px 10px;">
          <p style="float: left;width: 50%;font-size: 14px">垃圾点：2个</p>
          <p style="float: left;width: 50%;font-size: 14px">监控：130个</p>
        </div>
      </van-cell-group>
      <van-cell-group class="van-cell-group" style="padding:10px;">
        <p style="color: #1D6FE9;padding:10px;font-size: 16px">行政管理</p>
        <div style="line-height: 20px;overflow: auto;padding:5px 10px;">
          <p style="float: left;width: 50%;font-size: 14px">党委管理：300个</p>
          <p style="float: left;width: 50%;font-size: 14px">单元数量：2个</p>
        </div>
        <div style="line-height: 20px;overflow: auto;padding:5px 10px;">
          <p style="float: left;width: 50%;font-size: 14px">网格数：2个</p>
        </div>
      </van-cell-group>
      <van-cell-group class="van-cell-group" style="padding:10px;">
        <p style="color: #1D6FE9;padding:10px;font-size: 16px">宅基地概况</p>
        <div style="line-height: 20px;overflow: auto;padding:5px 10px;">
          <p style="float: left;width: 50%;font-size: 14px">宗数：200宗</p>
          <p style="float: left;width: 50%;font-size: 14px">一宅多户：18户</p>
        </div>
        <div style="line-height: 20px;overflow: auto;padding:5px 10px;">
          <p style="float: left;width: 50%;font-size: 14px">面积：25000m²</p>
          <p style="float: left;width: 50%;font-size: 14px">闲置：380亩</p>
        </div>
        <div style="line-height: 20px;overflow: auto;padding:5px 10px;">
          <p style="float: left;width: 50%;font-size: 14px">规划指标：25000m²</p>
          <p style="float: left;width: 50%;font-size: 14px">流转：380亩</p>
        </div>
      </van-cell-group>
      <van-cell-group class="van-cell-group" style="padding:10px;">
        <p style="color: #1D6FE9;padding:10px;font-size: 16px">承包地概况</p>
        <div style="line-height: 20px;overflow: auto;padding:5px 10px;">
          <p style="float: left;width: 50%;font-size: 14px">宗数：200宗</p>
          <p style="float: left;width: 50%;font-size: 14px">承包合同数：18个</p>
        </div>
        <div style="line-height: 20px;overflow: auto;padding:5px 10px;">
          <p style="float: left;width: 50%;font-size: 14px">面积：25000m²</p>
          <p style="float: left;width: 50%;font-size: 14px">流转亩数：380亩</p>
        </div>
        <div style="line-height: 20px;overflow: auto;padding:5px 10px;">
          <p style="float: left;width: 50%;font-size: 14px">确权户数：157户</p>
          <p style="float: left;width: 50%;font-size: 14px">流转合同数：38个</p>
        </div>
      </van-cell-group>
    </div>
</template>

<script>
  import onlineHomeIndex from "../onlineHomeIndex";
    export default {
      components: {
        onlineHomeIndex
      },
        name: "villagePortrait",
      data() {
        return {

        };
      },
    }
</script>

<style scoped>
  >>> .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 300px;
    text-align: center;
    background-color: #39a9ed;
    border-radius: 10px;
  }
  >>> .van-cell-group{
    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);
  }
</style>