You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

111 lines
2.5 KiB
Vue

<template>
<view>
<view class="cu-form-group " style="margin: 10upx;">
<view style="width: 21%;">
</view>
<view >
2021 年门店成本利润表
</view>
<button class="cu-btn bg-green shadow">上一年</button>
</view>
<view style="padding: 10upx;">
<view style="margin: 10upx auto;"
class="bg-red flex solid-bottom padding justify-start text-white text-center">
<view class="text-header" style="width:15%">
<text>月份</text>
</view>
<view class="text-header" style="width:20%">
<text>成本</text>
</view>
<view class="text-header" style="width:20%">
<text>收入</text>
</view>
<view class="text-header" style="width:20%">
<text>利润</text>
</view>
<view class="text-header" style="width:20%">
<text>利润率</text>
</view>
</view>
<view v-if="targetList.length==0">
<view class='empty cuIcon-info'></view>
<view class='empty-text text-gray'>暂无数据</view>
</view>
<view class=" light flex justify-start text-black text-center text-main"
style="padding-left: 10upx;" v-for="(item,index) in targetList" :key='index'>
<view class="text-header" style="width:15%">
<text>{{item.date}}</text>
</view>
<view class="text-header" style="width:20%">
<text>{{item.mbMoney}}</text>
</view>
<view class="text-header" style="width:20%">
<text>{{item.sjMoney}}</text>
</view>
<view class="text-header " style="width:20%;">
<text>{{item.difference}}</text>
</view>
<view class="text-header " style="width:20%;">
<text>{{item.ratio}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
targetList: [{
date: "2021-01",
mbMoney: 150000,
sjMoney: 265500,
difference: "115500",
ratio: "177.00%"
},
{
date: "2021-02",
mbMoney: 120000,
sjMoney: 138650,
difference: "18650",
ratio: "115.54%"
},
{
date: "2021-03",
mbMoney: 150000,
sjMoney: 289500,
difference: "139500",
ratio: "193.00%"
},
{
date: "2021-04",
mbMoney: 150000,
sjMoney: 250603,
difference: 100603,
ratio: "167.08%"
},
]
}
},
methods: {
}
}
</script>
<style>
.text-main {
font-size: 28upx;
height: 80upx;
width: 100%;
line-height: 80upx;
margin-top: 15upx;
color: #000000;
border-bottom: #e6e6e6 1upx solid;
text-align: center;
}
</style>