vuex/uni-demo/components/manage.vue

131 lines
2.4 KiB
Vue

<template>
<view class="content">
<view class="title">管理项目总览</view>
<view class="table_view">
<view class="table_header">
<view class="th th1">地区</view>
<view class="th th2">项目名称</view>
</view>
<view class="table_cell">
<view class="td td1">未知地区</view>
<view class="listarea">
<view class="td td2" v-for="item in wzList" :key="item.id">{{item.proName}}</view>
</view>
</view>
<view class="table_cell">
<view class="td td1">昆明</view>
<view class="listarea">
<view class="td td2" v-for="item in kmList" :key="item.id">{{item.proName}}</view>
</view>
</view>
<view class="table_cell">
<view class="td td1">禄丰</view>
<view class="listarea">
<view class="td td2" v-for="item in lfList" :key="item.id">{{item.proName}}</view>
</view>
</view>
<view class="table_cell">
<view class="td td1">合计</view>
<view class="listarea">
<view class="td td2">/</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "manage",
data() {
return {
wzList: [{
id: 0,
proName: '大姚开投2020资产收益权融资工程'
},
{
id: 1,
proName: '大姚开投2021债权收益'
},
{
id: 2,
proName: '安发展2021年债权融资计划'
},
{
id: 3,
proName: '河口滨河城投2020年应收款债权计划'
},
{
id: 4,
proName: '河口滨河城投2020年应收款债权计划'
},
],
kmList: [{
id: 0,
proName: '昆明高新水科2022非公开债权融资计划'
},
{
id: 1,
proName: '昆明高新水科2023非公开债权融资计划'
},
],
lfList:[{
id:0,
proName:"禄丰2020年债权融资计划"
}]
}
}
}
</script>
<style scoped>
.content {
margin-bottom: 50rpx;
}
.table_view {
border: 1px solid #ddd;
border-bottom: 0;
border-right: 0;
widtd: 98%;
margin: 1%;
}
.table_header,
.table_cell {
display: flex;
text-align: center;
line-height: 47rpx;
}
.th,.td {
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
white-space: nowrap;
}
.th1{
width: 25%;
font-weight: bold;
}
.th2 {
width: 75%;
font-weight: bold;
}
.td1{
width: 25%;
}
.listarea{
width: 75%;
}
.td2{
width: 100%;
}
</style>