Browse Source

修改数字为数码形式

master
[liang] 3 years ago
parent
commit
54b09d088f
  1. BIN
      src/assets/img/brand/numberBg.png
  2. 19
      src/components/seamless/index.vue
  3. 28
      src/views/Brand.vue

BIN
src/assets/img/brand/numberBg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

19
src/components/seamless/index.vue

@ -5,22 +5,22 @@
<div class="table-header"> <div class="table-header">
<span style="width: 2rem">时间</span> <span style="width: 2rem">时间</span>
<span style="width: 3rem">停车场</span> <span style="width: 3rem">停车场</span>
<span style="width: 1rem">出入口</span> <span style="width: 1.2rem">出入口</span>
<span style="width: 1rem">车辆类型</span> <span style="width: 1rem">车辆类型</span>
<span style="width: 1.2rem">车牌号</span> <span style="width: 1.1rem">车牌号</span>
<span style="width: 0.8rem">收费金额</span> <span style="width: 0.9rem">收费金额</span>
<span style="width: 0.8rem">状态</span> <span style="width: 0.6rem">状态</span>
</div> </div>
<vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="optionSetting"> <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="optionSetting">
<div class="line" v-for="(item, index) in listData" :key="index" <div class="line" v-for="(item, index) in listData" :key="index"
:class="item.accessType === '入场' ? 'in' : ''"> :class="item.accessType === '入场' ? 'in' : ''">
<span style="width: 2rem">{{ item.createTime }}</span> <span style="width: 2rem">{{ item.createTime }}</span>
<span style="width: 3rem" class='title'>{{ item.parkName }}</span> <span style="width: 3rem" class='title'>{{ item.parkName }}</span>
<span style="width: 1rem">{{ item.entranceChannel }}</span> <span style="width: 1.2rem">{{ item.entranceChannel }}</span>
<span style="width: 1rem">{{ item.carType }}</span> <span style="width: 0.9rem">{{ item.carType }}</span>
<span style="width: 1.2rem">{{ item.plateNumber }}</span> <span style="width: 1.2rem">{{ item.plateNumber }}</span>
<span style="width: 0.8rem">{{ item.orderRealPaidAmout }}</span> <span style="width: 0.9rem">{{ item.orderRealPaidAmout }}</span>
<span style="width: 0.8rem">{{ item.accessType }}</span> <span style="width: 0.6rem">{{ item.accessType }}</span>
</div> </div>
</vue-seamless-scroll> </vue-seamless-scroll>
</div> </div>
@ -86,7 +86,8 @@ export default {
line-height: 0.7rem; line-height: 0.7rem;
font-size: 0.25rem; font-size: 0.25rem;
color: #fff; color: #fff;
background: url(../../assets/img/brand/parkIngo.png); background: url(../../assets/img/brand/parkIngo.png) no-repeat;
background-size: 9.8rem 0.7rem;
} }
.sn-body { .sn-body {

28
src/views/Brand.vue

@ -66,8 +66,10 @@
<span>今日交易金额</span> <span>今日交易金额</span>
</div> </div>
<div class="resume-bd"> <div class="resume-bd">
<countTo :startVal="startNumber" :endVal="endNumber" :duration="1500" separator=""></countTo> <countTo :startVal="startNumber" :endVal="endNumber" :prefix="numberPrefix" :duration="1500" separator="">
<countTo :startVal="startAmount" :endVal="endAmount" :duration="1500" separator=""></countTo> </countTo>
<countTo :startVal="startAmount" :endVal="endAmount" :prefix="amountPrefix" :duration="1500" separator="">
</countTo>
</div> </div>
</div> </div>
@ -174,6 +176,8 @@ export default {
startAmount: 0, startAmount: 0,
endNumber: 0, endNumber: 0,
endAmount: 0, endAmount: 0,
numberPrefix: '00000', //
amountPrefix: '00000', //
realTimeInOutRecord: [],// realTimeInOutRecord: [],//
heartTimes: 0, // heartTimes: 0, //
geoCoordMap: {}, geoCoordMap: {},
@ -242,8 +246,10 @@ export default {
const { totalAmount, totalNum } = res.data const { totalAmount, totalNum } = res.data
this.startNumber = this.endNumber; this.startNumber = this.endNumber;
this.startAmount = this.endAmount; this.startAmount = this.endAmount;
this.endNumber = +totalNum; this.endNumber = +totalNum || 0;
this.endAmount = +totalAmount; this.endAmount = +totalAmount || 0;
this.numberPrefix = '00000'.substr(0, (6 - `${this.endNumber}`.length));
this.amountPrefix = '00000'.substr(0, (6 - `${this.endAmount}`.length));
} }
}); });
// //
@ -817,19 +823,21 @@ export default {
span { span {
margin-top: 0.25rem; margin-top: 0.25rem;
box-shadow: 0rem 0.02rem 0.08rem rgba(38, 228, 245, 0.7); // box-shadow: 0rem 0.02rem 0.08rem rgba(38, 228, 245, 0.7);
width: 3.535rem; width: 3.535rem;
text-align: center; text-align: right;
height: 0.725rem; height: 0.725rem;
line-height: 0.725rem; line-height: 0.725rem;
font-size: 0.45rem; font-size: 0.45rem;
color: #fff; color: #fff;
font-family: "LCD"; font-family: "LCD";
letter-spacing: 0.1rem; letter-spacing: 0.28rem;
text-shadow: 0.02rem 0.02rem 0.04rem #000; text-shadow: 0.02rem 0.02rem 0.04rem #000;
background: linear-gradient(180deg, box-sizing: border-box;
rgba(101, 172, 255, 0) 0%, padding-left: .1rem;
rgba(29, 104, 190, 0.78) 100%); background-image: url(../assets/img/brand/numberBg.png);
background-repeat: repeat-y space;
background-size: 0.6rem 0.725rem
} }
} }
} }

Loading…
Cancel
Save