阳光村务：资产负债表

config/index.js

@@ -14,7 +14,8 @@ module.exports = {
         // 请求的目标主机
         // target: 'http://116.255.223.226:8082/nsgk_test/',  // 公网测试环境
         // target: `http://192.168.0.116:8091/nsgk_api/`, // 内网测试环境
-        target: 'http://localhost:8080/',
+        //target: 'http://localhost:8080/',
+        target: 'http://192.168.0.106:8080/',
         changeOrigin: true,
         pathRewrite: {
           '^/api': ''

package-lock.json

@@ -1351,6 +1351,11 @@
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
       "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
     },
+    "bignumber.js": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmmirror.com/bignumber.js/-/bignumber.js-9.1.2.tgz",
+      "integrity": "sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug=="
+    },
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -4281,7 +4286,7 @@
     "fastclick": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/fastclick/-/fastclick-1.0.6.tgz",
-      "integrity": "sha1-FhYlsnsaWAZAWTa9qaLBkm0Gvmo=",
+      "integrity": "sha512-cXyDBT4g0uWl/Xe75QspBDAgAWQ0lkPi/zgp6YFEUHj6WV6VIZl7R6TiDZhdOVU3W4ehp/8tG61Jev1jit+ztQ==",
       "dev": true
     },
     "fastparse": {
@@ -4436,7 +4441,7 @@
     "font-awesome.css": {
       "version": "4.7.2",
       "resolved": "https://registry.npmjs.org/font-awesome.css/-/font-awesome.css-4.7.2.tgz",
-      "integrity": "sha1-B1pCARQo8gJyVO9phgx1ergWyVI="
+      "integrity": "sha512-FIyRbig4PDY15NGzejM3b8OQ/lWvId8PHnE4CnuDtc8/YYs07cvnqLCyfvIJPwJl5SA/Rq+9jAe9W+Fr1pv0DA=="
     },
     "for-in": {
       "version": "1.0.2",
@@ -12355,7 +12360,7 @@
     "vue-html5-editor": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/vue-html5-editor/-/vue-html5-editor-1.1.1.tgz",
-      "integrity": "sha1-WRAhCoMNjI00eaHx/shHMZKqA7M=",
+      "integrity": "sha512-Ckmb8djta+XQMUQaxRcCUNBXEzjPF5p6c2nQ5ICcIuR8eYz4b0HAGzXlSDfL3ZxkrVHO2Hx0VrUORLu2Lwem4g==",
       "dev": true
     },
     "vue-lazyload": {

package.json

@@ -10,6 +10,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "bignumber.js": "^9.1.2",
     "@vant/area-data": "^1.2.2",
     "axios": "^0.21.1",
     "echarts": "^5.3.3",

src/api/sunVillage_info/fixedAssets.js

@@ -1166,4 +1166,20 @@ export function assetResourceDetail(id, parms) {
   });
 }
 
+// 公式科目模板分类列表
+export function expressionReportByCategory(name) {
+  return request({
+    url: '/finance/expressionReport/category/' + name,
+    method: 'get',
+  })
+}
+
 
+//查询资产负债表(公式报表模板)
+export const assetLiabilityReportByExpTpl = (data) => {
+  return request({
+    url: '/finance/report/assetLiabilityReportByExpTpl',
+    method: 'get',
+    params: data
+  })
+}

src/router/index.js

@@ -4245,6 +4245,15 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/sunVillage_info/resourceDetail'], resolve)
   },
+  { ////阳光村务（新）-- 修改资源
+    path: '/sunVillage_info/detailed_liabilities',
+    name: 'sunVillageInfoDetailedLiabilities',
+    meta: {
+      title: '负债表',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage_info/detailed_liabilities'], resolve)
+  },
   { ////农业综合行政执法公众平台
     path: '/lawEnforcement/index_new',
     name: 'lawEnforcementIndexNew',

src/utils/finance.js

@@ -0,0 +1,259 @@
+import {numFormat} from "@/utils/index";
+import BigNumber from "bignumber.js";
+
+export const FINANCE = {
+  CONFIG_KEY: '_Finance_config',
+  EXPRESSION_REPORT_TEMPLATE: {
+    ASSET_AND_LIABILITY: "资产负债表",
+    QUARTER_REPORT: "季度报表",
+    INCOME_DISTRIBUTION_REPORT: "收益分配表",
+  },
+
+  VOUCHER_CACHE_LIFECYCLE: 300000,
+
+  getConfig(name, defVal) {
+    let config = localStorage.getItem(this.CONFIG_KEY);
+    if(config)
+    {
+      config = JSON.parse(config);
+      if(config.hasOwnProperty(name))
+        return config[name];
+    }
+    return defVal;
+  },
+  setConfig(name, val) {
+    let config = localStorage.getItem(this.CONFIG_KEY);
+    if(!config)
+      config = {};
+    else
+      config = JSON.parse(config);
+    config[name] = val;
+    localStorage.setItem(this.CONFIG_KEY, JSON.stringify(config));
+  },
+  makeSubjectsTree(SubjectsList, subjectTypes) {
+    let func = (pid) => {
+      let arr = null;
+      for(let v of SubjectsList)
+      {
+        let parentId = v.parentId || v.subjectId.substr(0, v.subjectId.length - 3) || null;
+        if(parentId == pid)
+        {
+          if(!arr) arr = [];
+          let a = func(v.subjectId);
+          if(a)
+          {
+            v.children = a;
+            v.is_last = 'N';
+          }
+          else
+            v.is_last = 'Y';
+          v.disabled = false;
+          v.label = v.subjectId + ' ' + v.subjectName;
+          v.label2 = v.subjectId + ' ' + v.subjectNameAll;
+          v.id = v.subjectId;
+          arr.push(v);
+        }
+      }
+      return arr;
+    };
+    let res = func(null) || [];
+    if(!subjectTypes)
+      return res;
+    let r = [];
+    res.forEach((x) => {
+      let subjectIdStart = x.subjectId[0];
+      let item = r.find((y) => y.subjectId == subjectIdStart);
+      if(!item)
+      {
+        let type = subjectTypes.find((y) => y.dictValue == subjectIdStart);
+        if(!type)
+          return;
+        item = {
+          id: type.dictValue,
+          subjectId: type.dictValue,
+          label: type.dictLabel,
+          label2: type.dictLabel,
+          sortFlag: type.dictSort,
+          is_last: 'N',
+          subjectName: '',
+          subjectNameAll: '',
+          children: [],
+          disabled: true,
+        };
+        r.push(item);
+      }
+      item.children.push(x);
+    });
+    r.sort((a, b) => a.dictSort - b.dictSort);
+    return r;
+  },
+  makeSubjectsTree_filter(SubjectsList, subjectTypes, filterFunc) {
+    let func = (pid) => {
+      let arr = null;
+      for(let v of SubjectsList)
+      {
+        let parentId = v.parentId || v.subjectId.substr(0, v.subjectId.length - 3) || null;
+        if(parentId == pid)
+        {
+          if(!arr) arr = [];
+          let a = func(v.subjectId);
+          if(a)
+          {
+            v.children = a;
+            v.is_last = 'N';
+          }
+          else
+            v.is_last = 'Y';
+          v.label = v.subjectId + ' ' + v.subjectName;
+          v.label2 = v.subjectId + ' ' + v.subjectNameAll;
+          v.disabled = !filterFunc(v);
+          arr.push(v);
+        }
+      }
+      return arr;
+    };
+    let filter_func = (children) => {
+      let res = null;
+      if(children)
+      {
+        let newChildren = [];
+        for(let v of children)
+        {
+          let b = filterFunc(v);
+          let arr = filter_func(v.children);
+          if(!arr)
+            delete v.children;
+          else
+          {
+            v.children = arr;
+            b = true;
+          }
+          if(b)
+            newChildren.push(v);
+        }
+        let r = newChildren.length > 0;
+        if(r)
+          res = newChildren;
+      }
+      return res;
+    };
+    let res = filter_func(func(null) || []) || [];
+    let r = [];
+    res.forEach((x) => {
+      let subjectIdStart = x.subjectId[0];
+      let item = r.find((y) => y.subjectId == subjectIdStart);
+      if(!item)
+      {
+        let type = subjectTypes.find((y) => y.dictValue == subjectIdStart);
+        if(!type)
+          return;
+        item = {
+          id: type.dictValue,
+          label: type.dictLabel,
+          label2: type.dictLabel,
+          subjectId: type.dictValue,
+          sortFlag: type.dictSort,
+          is_last: 'N',
+          subjectNameAll: '',
+          children: [],
+          disabled: true,
+        };
+        r.push(item);
+      }
+      item.children.push(x);
+    });
+    r.sort((a, b) => a.dictSort - b.dictSort);
+    return r;
+  },
+  /*数字每隔3位一位小数: 0返回空白 */
+  formatNum(value) {
+    if(value === undefined || value === null)
+      return '';
+    if(typeof(value) === "string")
+    {
+      if(value.indexOf(',') !== -1)
+        return value;
+      value = Number(value);
+      if(isNaN(value))
+        return '';
+    }
+    if(value === 0)
+      return '';
+    return numFormat(value);
+  },
+  formatList(list) {
+    if(!list || !Array.isArray(list) && !list.length && arguments.length > 1)
+      return [];
+    list.forEach((x) => {
+      for(let i = 1; i < arguments.length; i++)
+      {
+        let k = arguments[i];
+        if(!x.hasOwnProperty(k))
+          continue;
+        x[k] = this.formatNum(x[k]);
+      }
+    });
+    return list;
+  },
+  obtainAssetSubject(str) {
+    if(!str)
+      return null;
+    let i = str.indexOf(":");
+    if(i > 0)
+      return str.substring(0, i);
+    else if(/^\d+$/g.test(str))
+      return str;
+    else
+      return null;
+  },
+  Number(a) {
+    return new BigNumber(a, 10);
+  },
+  zero() {
+    return new BigNumber(0, 10);
+  },
+  add(a, b) {
+    if(!(a instanceof BigNumber))
+      a = new BigNumber(a, 10);
+    if(!(b instanceof BigNumber))
+      b = new BigNumber(b, 10);
+    return a.plus(b, 10);
+  },
+  subtract(a, b) {
+    if(!(a instanceof BigNumber))
+      a = new BigNumber(a, 10);
+    if(!(b instanceof BigNumber))
+      b = new BigNumber(b, 10);
+    return a.minus(b, 10);
+  },
+  neg(a) {
+    if(!(a instanceof BigNumber))
+      a = new BigNumber(a, 10);
+    return a.negated();
+  },
+  isZero(a) {
+    if(!(a instanceof BigNumber))
+      a = new BigNumber(a, 10);
+    return a.isZero();
+  },
+  toNumber(a) {
+    if(typeof(a) === 'number')
+      return a;
+    if(a instanceof BigNumber)
+      return a.toNumber();
+    return Number(a);
+  },
+  calcFontSizeFromTextLength(text, baseSize) {
+    if(!text)
+      return baseSize;
+    const N = 28;
+    let length = 0;
+    for(let i = 0; i < text.length; i++)
+    {
+      length += text.charCodeAt(i) > 127 ? 2 : 1;
+    }
+    const r = Math.round(baseSize - (Math.max(length / N, 1.0)) + 1);
+    //console.log(text, r);
+    return r;
+  },
+};

src/views/sunVillage_info/detailed_liabilities.vue

@@ -0,0 +1,752 @@
+<template>
+    <div class="home_wrapper">
+      <div class="header_main">
+        资产负债表
+        <div class="return_btn" @click="onClickLeft"></div>
+<!--            <div class="add_btn" v-show="showBtn" @click="goAdd"></div>-->
+      </div>
+
+
+      <div class="search_info">
+        <div class="date_box" @click="showPickerTime = true">
+          <img src="../../assets/images/sunVillage_info/date_icon.png">
+          <p>{{date}}</p>
+        </div>
+        <van-popup v-model="showPickerTime" position="bottom">
+          <van-datetime-picker
+            v-model="currentDate"
+            type="year-month"
+            title="选择年月"
+            :min-date="minDate"
+            :max-date="maxDate"
+            @confirm="onConfirm"
+            @cancel="showPicker = false"
+            :formatter="formatter"
+          />
+        </van-popup>
+        <div class="search_block">
+          <i class="icon"></i>
+          <input readonly type="text" class="ipt" v-model="searchDate.templateName" placeholder="请选择科目查询" @click="visible=true">
+        </div>
+        <van-popup v-model="visible" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="expressionOptions"
+            value-key="name"
+            @confirm="onConfirmExpression"
+            @cancel="visible = false"
+          />
+        </van-popup>
+<!--        <div class="total">共{{listLength}}个资产</div> @input="getSearch"-->
+      </div>
+
+<!--      <div class="radio_box">-->
+<!--        <van-checkbox v-model="queryParams.showSubSubject" @change="showSub" checked-color="#2facfe">显示明细</van-checkbox>-->
+<!--        <div class="total">共{{listLength}}条</div>-->
+<!--      </div>-->
+
+      <div class="balance-main">
+        <div class="main-title">
+          <div class="company">编制单位：{{ this.$store.getters.bookName }}</div>
+          <div class="nper">{{ accountingYear }}年{{ accountingMonth }}期</div>
+          <div class="amountOf">金额单位:元</div>
+        </div>
+        <div class="main-center">
+          <div class="datagrid">
+            <div class="header">
+              <div class="xmmc">资产</div>
+              <div class="qj">年初余额</div>
+              <div class="zy">期末余额</div>
+              <div class="dfje">负债与所有者权益</div>
+              <div class="fx">年初余额</div>
+              <div class="ye">期末余额</div>
+            </div>
+            <div class="mok_list">
+              <ul class="list">
+                <li v-for="(item, index) in list" :key="index">
+                  <div class="xmmc">{{ item.subjectNameLeft }}</div>
+                  <div class="qj">{{ item.ncyeLeft }}</div>
+                  <div class="zy">{{ item.qmyeLeft }}</div>
+                  <div class="dfje">{{ item.subjectNameRight }}</div>
+                  <div class="fx">{{ item.ncyeRight }}</div>
+                  <div class="ye">{{ item.qmyeRight }}</div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+</template>
+
+<script>
+  import { trailBalanceList , expressionReportByCategory,getLoginBook,assetLiabilityReportByExpTpl } from "@/api/sunVillage_info/fixedAssets";
+  import SubjectTreeChooser from "@/components/form/SubjectTreeChooser";
+  import Cookies from "js-cookie";
+  import request from '@/utils/request'
+  import {FINANCE} from "@/utils/finance";
+  export default {
+    name: "certificateList",
+    components: { SubjectTreeChooser },
+    data() {
+      return {
+        expressionOptions:[],
+        searchDate: {
+          bookDate: "",
+          templateName: '资产负债表',
+          signature: false, // 添加底部落款
+        },
+
+        list: [],
+        accountingYear: "",
+        accountingMonth: "",
+        // 显示搜索条件
+        visible: false,
+        showPickerTime: false,
+
+        minDate: new Date(2020, 0, 1),
+        maxDate: new Date(2025, 10, 1),
+        currentDate: new Date(),
+        date:''
+      };
+    },
+    created() {
+      getLoginBook().then((res) => {
+        if (res.code == 200) {
+          let currentDays = res.data.currentDay;
+          if (currentDays == null) {
+            this.$message.error("当前账套未开启!");
+            return false;
+          }
+
+          let dealDays = currentDays.split("-");
+          this.accountingYear = dealDays[0]; //当前帐套年
+          this.accountingMonth = dealDays[1]; //当前帐套月
+
+          this.date = dealDays[0]+'年'+dealDays[1]+'月';
+
+          this.$set(this.searchDate, "bookDate", currentDays);
+          this.initPage();
+        }
+      });
+      expressionReportByCategory('资产负债表').then((resp) => {
+        this.expressionOptions = resp.data;
+      });
+    },
+    methods: {
+      initPage() {
+        assetLiabilityReportByExpTpl(this.searchDate).then((res) => {
+          if (res.code == 200) {
+            let content = res.data;
+            this.list = content.list.map((x) => {
+              x.ncyeLeft = FINANCE.formatNum(x.ncyeLeft);
+              x.qmyeLeft = FINANCE.formatNum(x.qmyeLeft);
+              x.ncyeRight = FINANCE.formatNum(x.ncyeRight);
+              x.qmyeRight = FINANCE.formatNum(x.qmyeRight);
+              return x;
+            });
+          }
+        });
+      },
+      searchFrom() {
+        this.voucherFormShow = false;
+        let dealDays = this.searchDate.bookDate.split("-");
+        this.accountingYear = dealDays[0]; //当前帐套年
+        this.accountingMonth = dealDays[1]; //当前帐套月
+        this.initPage();
+      },
+      onConfirm(time) {
+        this.date = this.format(time,'yyyy年MM月');
+        this.searchDate.bookDate = this.format(time,'yyyy-MM');
+        this.initPage();
+        this.showPickerTime = false;
+      },
+      onConfirmExpression(data){
+        this.searchDate.templateName = data.name;
+        this.visible = false;
+        this.initPage();
+      },
+      formatter(type, val) {
+        if (type === 'year') {
+          return `${val}年`;
+        } else if (type === 'month') {
+          return `${val}月`;
+        }
+        return val;
+      },
+      getSearch(val){
+        console.log(val)
+        this.subjectName = val.subjectId + " " + val.subjectName;
+        this.queryParams.endSubjectId = this.queryParams.startSubjectId;
+        this.getList();
+      }
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+
+  .balance-main {
+    background: #fff;
+    .main-title {
+      margin-bottom: 5PX;
+      padding: 0 10PX;
+      height: 33PX;
+      line-height: 33PX;
+      color: #333;
+      font-size: 13PX;
+      display: flex;
+      justify-content: space-between;
+      .company {
+      }
+      .nper {
+        text-align: center;
+      }
+      .amountOf {
+        text-align: right;
+      }
+    }
+    .main-center {
+      // min-height: 404PX;
+      border: 1PX solid #CACBCC;
+      border-bottom: 0;
+      overflow-x: scroll;
+      .datagrid {
+        min-height: 100PX;
+        width: 300%;
+        .header {
+          background: #f8f8f9;
+          font-weight: bold;
+          display: flex;
+        }
+        .kmbm,
+        .xmmc,
+        .qj,
+        .zy,
+        .jfje,
+        .dfje,
+        .fx,
+        .ye {
+          height: 29PX;
+          line-height: 29PX;
+          font-size: 13PX;
+          border-bottom: 1PX solid #CACBCC;
+          border-right: 1PX solid #CACBCC;
+          text-align: center;
+        }
+        .xmmc {
+          width: 26%;
+          text-align: left;
+          padding-left: 10PX;
+        }
+        .qj {
+          width: 12%;
+          text-align: right;
+          padding-right: 10PX;
+        }
+        .zy {
+          width: 12%;
+          text-align: right;
+          padding-right: 10PX;
+        }
+
+        .dfje {
+          width: 26%;
+          text-align: left;
+          padding-left: 10PX;
+        }
+        .fx {
+          width: 12%;
+          text-align: right;
+          padding-right: 10PX;
+        }
+        .ye {
+          width: 12%;
+          text-align: right;
+          padding-right: 10PX;
+          border-right: 0;
+        }
+        .mok_list {
+          display: block;
+          overflow-y: scroll;
+          height: calc(100vh - 200PX);
+          //background: url("~@/assets/images/report_line.png") repeat;
+        }
+        .list {
+          width: 100%;
+        }
+        ul {
+          margin: 0;
+          padding: 0;
+          li {
+            display: block;
+            overflow: hidden;
+            list-style: none;
+            &.header {
+              background: #f8f8f9;
+              font-weight: bold;
+            }
+            .kmbm,
+            .xmmc,
+            .qj,
+            .zy,
+            .jfje,
+            .dfje,
+            .fx,
+            .ye {
+              height: 29PX;
+              line-height: 29PX;
+              float: left;
+              font-size: 13PX;
+              border-bottom: 1PX solid #CACBCC;
+              border-right: 1PX solid #CACBCC;
+              text-align: center;
+            }
+            .xmmc {
+              width: 26%;
+              text-align: left;
+              padding-left: 10PX;
+            }
+            .qj {
+              width: 12%;
+              text-align: right;
+              padding-right: 10PX;
+            }
+            .zy {
+              width: 12%;
+              text-align: right;
+              padding-right: 10PX;
+            }
+
+            .dfje {
+              width: 26%;
+              text-align: left;
+              padding-left: 10PX;
+            }
+            .fx {
+              width: 12%;
+              text-align: right;
+              padding-right: 10PX;
+            }
+            .ye {
+              width: 12%;
+              text-align: right;
+              padding-right: 10PX;
+              border-right: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /deep/ .van-radio__label{
+    font-size: 14PX;
+    color: #2facfe;
+  }
+  .radio_box{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding:20px 23px;
+  }
+  .date_box{
+    display: flex;
+    align-items: center;
+    img{
+      width: 30PX;
+      border-radius: 100%;
+      box-shadow: 0px 6px 10px rgba(63,68,75,0.5);
+    }
+    p{
+      font-size: 14PX;
+      margin-left: 5PX;
+      color: #2facfe;
+    }
+  }
+  .search_info{
+    padding:20px 23px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .search_block{
+      height: 59px;
+      width: 450px;
+      border-radius: 59px;
+      background: #fff;
+      display: flex;
+      padding-right: 35px;
+      align-items: center;
+      box-shadow: 0px 6px 5px rgba(63,68,75,0.2);
+      .icon{
+        width: 30px;
+        height: 30px;
+        background: url('../../assets/images/sunVillage_info/fixedAssets_icon_1.png') no-repeat;
+        background-size: 100% 100%;
+        display: block;
+        margin:0 8px 0 26px;
+      }
+      .delete_icon{
+        width: 15PX;
+        height: 15PX;
+        background: url('../../assets/images/sunVillage_info/delete_icon_input.png') no-repeat;
+        background-size: 100% 100%;
+        display: block;
+        margin:0 8px 0 26px;
+      }
+      .ipt{
+        flex: 1;
+        font-size: 26px;
+        background: none;
+        border:0 none;
+        line-height: 59px;
+      }
+    }
+  }
+  .total{
+    font-size: 14PX;
+    color: #858585;
+  }
+.home_wrapper{
+    background: #e9e9e9;
+    min-height: 100vh;
+    width: 100vw;
+    .header_main{
+        height: 116px;
+        background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
+        background-size: 100% 100%;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        font-size: 36px;
+        line-height: 116px;
+        text-align: center;
+        color: #fff;
+        position: relative;
+        .return_btn{
+            width: 24px;
+            height: 43.2px;
+            background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
+            background-size: 20px 36px;
+            position: absolute;
+            left: 38px;
+            top: 36px;
+        }
+        .add_btn{
+            width: 56.4px;
+            height: 40.8px;
+            background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
+            background-size: 47px 34px;
+            position: absolute;
+            right: 38px;
+            top: 36px;
+        }
+    }
+    .record_main{
+        padding:30px 22px;
+        .record_det{
+            height: 38px;
+            line-height: 38px;
+            display: flex;
+            justify-content:space-between;
+            .year_l{
+                font-size: 30px;
+                display: flex;
+                align-items: center;
+                color: #858585;
+
+                .unit{
+                    padding-left: 5px;
+                }
+                .icon{
+                    width: 23px;
+                    height: 12px;
+                    display: block;
+                    background: url('../../assets/images/sunVillage_info/list_icon_1.png') no-repeat;
+                    background-size: 100% 100%;
+                    margin-bottom: 4px;
+                    margin-right: 8px;
+                    &.zk {
+                        transform: rotate(0deg)
+                    }
+                    &.ss{
+                        transform: rotate(180deg)
+                    }
+
+                }
+            }
+            .total_r{
+                font-size: 26px;
+                letter-spacing: 2px;
+            }
+        }
+        .record_list{
+            display: flex;
+            flex-flow: wrap;
+            margin-top: 12PX;
+            .flex_block{
+                font-size: 30px;
+                color: #878787;
+                padding-right: 30px;
+                &.current{
+                    color: #4199fe;
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+    .list_main{
+        padding:0 22px;
+        .item{
+            height: 100px;
+            border-radius: 30px;
+            background: #fff;
+            box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
+            padding:15px 32px;
+            display: flex;
+            margin-bottom: 20px;
+            .info{
+                flex:1;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .title{
+                    display: flex;
+                    font-size: 32px;
+                    align-items: center;
+                    height: 58px;
+                    .icon_box{
+                        width: 34px;
+                        display: block;
+                        height: 30px;
+                        background: url('../../assets/images/sunVillage_info/list_icon_2.png') no-repeat;
+                        background-size: 100% 100%;
+                        margin-right: 10px;
+                    }
+                    .news_title{
+                        max-width:416px;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        -o-text-overflow: ellipsis;
+                    }
+                    .tips_mark{
+                        width: 34px;
+                        height: 34px;
+                        background: #fa0c0c;
+                        border-radius: 8px;
+                        font-size: 24px;
+                        color: #fff;
+                        text-align: center;
+                        line-height: 34px;
+                        margin-left: 10px;
+                    }
+                }
+                .red{
+                  color: #fa0c0c;
+                }
+                .green{
+                  color: #4caf50;
+                }
+                .time{
+                    font-size: 32px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: right;
+                    height: 30px;
+                    margin-top: 6px;
+                    .icon_time{
+                        width: 25px;
+                        height: 25px;
+                        background: url('../../assets/images/sunVillage_info/list_icon_4.png') no-repeat;
+                        background-size: 100% 100%;
+                        margin-right: 10px;
+                    }
+                }
+            }
+            .operation{
+                flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+                text-align: right;
+                .opera_btn{
+                    width: 52px;
+                    height: 52px;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content:center;
+
+                    &.delete{
+                        background:#df0707;
+                        margin-left: 28px;
+                        .icon{
+                            width: 22px;
+                            height: 29px;
+                            background: url('../../assets/images/sunVillage_info/list_icon_7.png') no-repeat;
+                            background-size: 100% 100%;
+                            display: block;
+                        }
+                    }
+                    &.edit{
+                        background: #79cf13;
+                        .icon {
+                            width: 26px;
+                            height: 25px;
+                            background: url('../../assets/images/sunVillage_info/list_icon_6.png') no-repeat;
+                            background-size: 100% 100%;
+                            display: block;
+                        }
+                    }
+                     &.view{
+                        background: #3494ff;
+                        .icon {
+                            width: 29px;
+                            height: 21px;
+                            background: url('../../assets/images/sunVillage_info/list_icon_3.png') no-repeat;
+                            background-size: 100% 100%;
+                            display: block;
+                        }
+                    }
+                }
+            }
+        }
+
+    }
+    .bottom_tips{
+        font-size: 24px;
+         color: #a7a6a6;
+         text-align: center;
+         margin-top: 32px;
+         background: url('../../assets/images/sunVillage_info/list_icon_8.png') center center no-repeat;
+         background-size: 260px 2px;
+         .xs{
+            padding:0 8px;
+            background: #e9e9e9;
+         }
+    }
+    .banner {
+      display: flex;
+      background:#3494ff;
+      color:#fff;
+      text-align: center;
+      margin:3%;
+      border-radius: 10PX;
+    }
+    .banner_tabs{
+      flex:1;
+      padding:10PX 0;
+      font-size: 16PX;
+      div:nth-child(2){
+        font-size: 14PX;
+        margin-top: 5PX;
+      }
+    }
+}
+.top_head_title{
+  font-size: 16PX;
+  text-align: center;
+  padding: 15PX 0;
+}
+  .name_box{
+    float: left;
+    width: 180PX;
+    position: relative;
+    .name_bg{
+      background-color: rgba(47,172,254,0.2);
+      width: 180PX;
+      height: 100%;
+      position: absolute;
+      top: 0;
+    }
+    .name_icon{
+      position: absolute;
+      top: 60PX;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    .van-row:nth-child(odd){
+      .van-col {
+        background-color: #ffffff;
+      }
+    }
+    .van-row:nth-child(1){
+      border-top-left-radius: 10PX;
+      border-bottom-left-radius: 10PX;
+      background-color: #ffffff;
+      .van-col {
+        background-color: #2facfe;
+        color: #ffffff;
+        border-radius: 10PX;
+        line-height: 60PX;
+        text-align: center;
+      }
+    }
+    .van-col{
+      font-size: 16PX;
+      padding: 0PX 5PX;
+      text-align: left;
+      line-height: 40PX;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      word-break: break-all;
+      overflow: hidden;
+    }
+  }
+  .center_box{
+    padding: 0 3%;
+  }
+  .right_box{
+    float: left;
+    width: calc(100%);
+    overflow:hidden;
+    overflow-x: scroll;
+    white-space:nowrap;
+    display: -webkit-box;
+    -webkit-overflow-scrolling: touch;
+    .right_box_box{
+      width: 600PX;
+    }
+    .van-row:nth-child(odd){
+      .van-col{
+        background-color: #ffffff;
+      }
+    }
+    .van-row:nth-child(1){
+      .van-col{
+        color: #2facfe;
+        height: 60PX;
+        text-align: center;
+        line-height: 30PX;
+        border-right: 1px solid #ccc;
+      }
+    }
+    .van-col{
+      font-size: 16PX;
+      text-align: right;
+      height: 40PX;
+      line-height: 40PX;
+      &:nth-child(2n){
+        border-right: 1px solid #ccc;
+      }
+    }
+
+    .yue_type{
+      display: flex;
+      border-top: 1px solid #2facfe;
+      p{
+        width: 50%;
+        line-height: 30PX;
+        color: #333333;
+      }
+    }
+
+  }
+  .clear{
+    clear: both;
+  }
+</style>