zhangzl
/
nsgk_mobile
2
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

task 阳光村务 新增 收支表 盈余表 公开表

rongxin_test
makaba 1年前
父节点
2e1b4f7f60
当前提交
39a36bed3c
共有 5 个文件被更改，包括 2434 次插入 和 0 次删除
分列视图
Diff 选项
显示统计 下载 Patch 文件 下载 Diff 文件
  1. +27
    -0
      src/api/sunVillage_info/fixedAssets.js
  2. +27
    -0
      src/router/index.js
  3. +813
    -0
      src/views/sunVillage_info/detailed_income.vue
  4. +798
    -0
      src/views/sunVillage_info/detailed_incomeAndExpenditurePublic.vue
  5. +769
    -0
      src/views/sunVillage_info/detailed_incomeDistribution.vue

+ 27
- 0
src/api/sunVillage_info/fixedAssets.js 查看文件

@@ -1175,6 +1175,33 @@ export function expressionReportByCategory(name) {
}


//查询收支明細表
export const incomeAndExpenditureDetailReport = (data) => {
return request({
url: '/finance/report/incomeAndExpenditureDetailReport',
method: 'get',
params: data
})
}

//查询收益及收益分配表(模板)
export const incomeDistributionReportByExpTpl = (data) => {
return request({
url: '/finance/report/incomeDistributionReportByExpTpl',
method: 'get',
params: data
})
}

//查询收支公开榜
export function financialIncomeExpenditurePublic(data) {
return request({
url: '/finance/open/financialIncomeExpenditurePublic',
method: 'get',
params: data
})
}

//查询资产负债表(公式报表模板)
export const assetLiabilityReportByExpTpl = (data) => {
return request({


+ 27
- 0
src/router/index.js 查看文件

@@ -4254,6 +4254,33 @@ export const constantRoutes = [
},
component: (resolve) => require(['@/views/sunVillage_info/detailed_liabilities'], resolve)
},
{ ////阳光村务（新）-- 收支表
path: '/sunVillage_info/detailed_income',
name: 'sunVillageInfoIncomeDetails',
meta: {
title: '收支表',
hidden: true,
},
component: (resolve) => require(['@/views/sunVillage_info/detailed_income'], resolve)
},
{ ////阳光村务（新）-- 盈余表
path: '/sunVillage_info/detailed_incomeDistribution',
name: 'sunVillageInfoAssetsLiabilities',
meta: {
title: '盈余表',
hidden: true,
},
component: (resolve) => require(['@/views/sunVillage_info/detailed_incomeDistribution'], resolve)
},
{ ////阳光村务（新）-- 公开表
path: '/sunVillage_info/detailed_incomeAndExpenditurePublic',
name: 'sunVillageInfoExpenditure',
meta: {
title: '公开表',
hidden: true,
},
component: (resolve) => require(['@/views/sunVillage_info/detailed_incomeAndExpenditurePublic'], resolve)
},
{ ////农业综合行政执法公众平台
path: '/lawEnforcement/index_new',
name: 'lawEnforcementIndexNew',


+ 813
- 0
src/views/sunVillage_info/detailed_income.vue 查看文件

@@ -0,0 +1,813 @@
<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="left">
<ul class="list">
<li class="header">
<div class="xmmc">科目</div>
<div class="qj">本期发生</div>
<div class="zy">本年累计发生</div>
</li>
<li v-for="(item, index) in list.incomes" :key="index">
<div class="xmmc">{{ item.subjectName }}</div>
<div class="qj">{{ item.bqfs }}</div>
<div class="zy">{{ item.bnljfs }}</div>
</li>
</ul>
</div>
<div class="right">
<ul class="list ft">
<li class="header">
<div class="dfje">科目</div>
<div class="fx">本期发生</div>
<div class="ye">本年累计发生</div>
</li>
<li v-for="(item, index) in list.expenditures" :key="index">
<div class="dfje">{{ item.subjectName }}</div>
<div class="fx">{{ item.bqfs }}</div>
<div class="ye">{{ item.bnljfs }}</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>

<script>
import { trailBalanceList , expressionReportByCategory,getLoginBook,assetLiabilityReportByExpTpl,incomeAndExpenditureDetailReport } 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:["2024年新制度","2023前旧制度"],
searchDate: {
bookDate: "",
templateName: '2024年新制度',
signature: false, // 添加底部落款
year: "2024",
},

list: {
expenditures: [],
incomes: [],
},
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();
}
});
},
methods: {
initPage() {
incomeAndExpenditureDetailReport(this.searchDate).then((res) => {
if (res.code == 200) {
this.loading = false;
let content = res.data;
FINANCE.formatList(content.expenditures, 'bqfs', 'bnljfs');
FINANCE.formatList(content.incomes, 'bqfs', 'bnljfs');
let expenditures = content.expenditures;
let incomes = content.incomes;

let incomesOutput = ""; //左
let expendituresOutput = ""; //右

if (expenditures.length == incomes.length) {
expendituresOutput = content.expenditures;
incomesOutput = content.incomes;
} else if (expenditures.length < incomes.length) {
let expendituresList = JSON.parse(
JSON.stringify(content.expenditures)
);
let between = incomes.length - expenditures.length;
for (let i = 0; i < between; i++) {
expendituresList.push({ subjectName: "", bqfs: "", bnljfs: "" });
}
expendituresOutput = expendituresList;
incomesOutput = content.incomes;
} else {
let between = expenditures.length - incomes.length;
let incomesList = JSON.parse(JSON.stringify(content.incomes));
for (let i = 0; i < between; i++) {
incomesList.push({ subjectName: "", bqfs: "", bnljfs: "" });
}
incomesOutput = incomesList;
expendituresOutput = content.expenditures;
}

this.$set(this.list, "expenditures", expendituresOutput);
this.$set(this.list, "incomes", incomesOutput);
}
});
},
searchFrom() {
this.voucherFormShow = false;
let dealDays = this.searchDate.bookDate.split("-");
this.accountingYear = dealDays[0]; //当前帐套年
this.accountingMonth = dealDays[1]; //当前帐套月
this.initPage();
},
onConfirm(time) {
console.log(this.format(time,'yyyy-MM'))
this.date = this.format(time,'yyyy年MM月');
this.searchDate.bookDate = this.format(time,'yyyy-MM');
this.initPage();
this.showPickerTime = false;
let dealDays = this.searchDate.bookDate.split("-");
this.accountingYear = dealDays[0]; //当前帐套年
this.accountingMonth = dealDays[1]; //当前帐套月
},
onConfirmExpression(data){
if(data === "2023前旧制度"){
this.searchDate.year = "";
this.searchDate.templateName = "2023前旧制度";
}else{
this.searchDate.year = "2024";
this.searchDate.templateName = "2024年新制度";
}
this.visible = false;
this.initPage();
},
formatter(type, val) {
if (type === 'year') {
return `${val}年`;
} else if (type === 'month') {
return `${val}月`;
}
return val;
},
getSearch(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;
}
}
.left {
width: 50%;
}
.right{
width: 50%;
}
.main-center {
// min-height: 404PX;
border: 1PX solid #CACBCC;
border-bottom: 0;
overflow-x: scroll;
.datagrid {
min-height: 100PX;
width: 250%;
display: inline-block;
.block {
display: block;
overflow: hidden;
//background: url("~@/assets/images/report_line.png") repeat;
}
.header {
background: #f8f8f9;
font-weight: bold;
display: block;
}
.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: auto;
&.ft {
//margin-left: -2px;
text-align: right;
}
}
ul {
margin: 0;
padding: 0;
li {
display: flex;
overflow: hidden;
list-style: none;
width: auto;
&.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: 52%;
text-align: left;
padding-left: 10PX;
}
.qj {
width: 24%;
text-align: right;
padding-right: 10PX;
}
.zy {
width: 24%;
text-align: right;
padding-right: 10PX;
}

.dfje {
width: 52%;
text-align: left;
padding-left: 10PX;
}
.fx {
width: 24%;
text-align: right;
padding-right: 10PX;
}
.ye {
width: 24%;
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>

+ 798
- 0
src/views/sunVillage_info/detailed_incomeAndExpenditurePublic.vue 查看文件

@@ -0,0 +1,798 @@
<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="header-title income" >收入</div>
<div class="header-title expenditure ">支出</div>
</div>
<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 pageDataList" :key="index">
<div class="xmmc">{{ item.incomeDate }}</div>
<div class="qj">{{ item.incomeSummary }}</div>
<div class="zy">{{ item.incomeAmount }}</div>
<div class="dfje">{{ item.expenditureDate }}</div>
<div class="fx">{{ item.expenditureSummary }}</div>
<div class="ye">{{ item.expenditureAmount }}</div>
</li>
</ul>
</div>
</div>
</div>

</div>

</div>
</template>

<script>
import { financialIncomeExpenditurePublic , 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:[],
// 格数据
loading: false,
finished: false,
pageDataList: [],
searchDate: {
bookDate: "",
templateName: '收支公开榜',
signature: false, // 添加底部落款
},
// 查询参数
queryParams: {
// 分页
pageNum: 1,
pageSize: 50,
deptId:this.$store.state.user.loginDeptId,
bookType:this.$store.getters.bookType,
bookId:this.$store.state.user.loginBookId,
startYyyy_MM: null,
endYyyy_MM: null,
title: '收支公开榜',
combineTitle: false,
// 查询排序
//orderByColumn: "id",
//isAsc: "desc",
},

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.queryParams.startYyyy_MM = res.data.currentDay;
this.queryParams.endYyyy_MM = res.data.currentDay;
this.initPage();
}
});
expressionReportByCategory('收支公开榜').then((resp) => {
this.expressionOptions = resp.data;
});
},
methods: {
initPage() {
financialIncomeExpenditurePublic(this.queryParams).then(res =>{
this.pageDataList = res.rows;
this.total=res.total;
}).catch((e) => {}).finally(() => {});
},
searchFrom() {
this.voucherFormShow = false;
let dealDays = this.searchDate.bookDate.split("-");
this.accountingYear = dealDays[0]; //当前帐套年
this.accountingMonth = dealDays[1]; //当前帐套月
this.initPage();
},
onConfirm(time) {
console.log(this.format(time,'yyyy-MM'))
this.date = this.format(time,'yyyy年MM月');
this.searchDate.bookDate = this.format(time,'yyyy-MM');
this.queryParams.startYyyy_MM = this.searchDate.bookDate;
this.queryParams.endYyyy_MM = this.searchDate.bookDate;
this.initPage();
this.showPickerTime = false;
let dealDays = this.searchDate.bookDate.split("-");
this.accountingYear = dealDays[0]; //当前帐套年
this.accountingMonth = dealDays[1]; //当前帐套月
},
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: 250%;
.header {
background: #f8f8f9;
font-weight: bold;
display: flex;
}
.header-title {
font-weight: bold;
text-align: center;
margin-bottom: 5px; /* 根据需要调整间距 */
}
/* 确保收入和支出部分的宽度相同 */
.header-title.income, .header.income {
width: 50%;
border-bottom: 1PX solid #CACBCC;

}

.header-title.expenditure, .header.expenditure {
width: 50%;
border-bottom: 1PX solid #CACBCC;

}

.kmbm,
.header-title.expenditure,
.header-title.income,
.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: 12%;
text-align: left;
padding-left: 10PX;
}
.qj {
width: 26%;
text-align: right;
padding-right: 10PX;
}
.zy {
width: 12%;
text-align: right;
padding-right: 10PX;
}

.dfje {
width: 12%;
text-align: left;
padding-left: 10PX;
}
.fx {
width: 26%;
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: 12%;
text-align: left;
padding-left: 10PX;
}
.qj {
width: 26%;
text-align: right;
padding-right: 10PX;
}
.zy {
width: 12%;
text-align: right;
padding-right: 10PX;
}

.dfje {
width: 12%;
text-align: left;
padding-left: 10PX;
}
.fx {
width: 26%;
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>

+ 769
- 0
src/views/sunVillage_info/detailed_incomeDistribution.vue 查看文件

@@ -0,0 +1,769 @@
<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="block" >
<ul class="list">
<li class="header">
<div class="xmmc" v-for="(item, index) in headers" :style="{width: item.width + '%', 'text-align': 'center',}" :key="index">{{item.name}}</div>
</li>
</ul>
<div class="list_block">
<ul class="list">
<li v-for="(item, index) in list" :key="index">
<div class="xmmc" v-for="(header, hindex) in headers" :style="{width: header.width + '%', 'text-align': header.align, padding: '0 10px',}" :key="hindex">{{ item[header.prop] }}</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

</div>
</template>

<script>
import { trailBalanceList , expressionReportByCategory,getLoginBook,incomeDistributionReportByExpTpl } 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, // 添加底部落款
},
headers: [],
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() {
incomeDistributionReportByExpTpl(this.searchDate).then((res) => {
if (res.code == 200) {
this.loading = false;
let content = res.data;
this.list = content.list.map((x) => {
if(x.hasOwnProperty('amountLeft')) x.amountLeft = FINANCE.formatNum(x.amountLeft);
if(x.hasOwnProperty('amountRight')) x.amountRight = FINANCE.formatNum(x.amountRight);
if(x.hasOwnProperty('lastYearAmountLeft')) x.lastYearAmountLeft = FINANCE.formatNum(x.lastYearAmountLeft);
return x;
});
const sectionPercent = content.headers.length;
this.headers = content.headers.map((x) => {
let align;
if(x.name.indexOf('金') >= 0 || x.name.indexOf('额') >= 0)
{
align = 'right';
}
else if(x.name.indexOf('目') >= 0)
{
align = 'left';
}
else
{
align = 'center';
}
x.align = align;
x.width = 100 / sectionPercent;
return x;
});
}
});
},
searchFrom() {
this.voucherFormShow = false;
let dealDays = this.searchDate.bookDate.split("-");
this.accountingYear = dealDays[0]; //当前帐套年
this.accountingMonth = dealDays[1]; //当前帐套月
this.initPage();
},
onConfirm(time) {
console.log(this.format(time,'yyyy-MM'))
this.date = this.format(time,'yyyy年MM月');
this.searchDate.bookDate = this.format(time,'yyyy-MM');
this.initPage();
this.showPickerTime = false;
let dealDays = this.searchDate.bookDate.split("-");
this.accountingYear = dealDays[0]; //当前帐套年
this.accountingMonth = dealDays[1]; //当前帐套月
},
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: 250%;
.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>

撰写 预览
正在加载...
取消
保存