147 lines
2.7 KiB
Vue
147 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<view class="num-display1"
|
||
|
|
:style="{ 'background-color': backColor,'marginTop':marginTop+'px','marginBottom':marginBottom+'px' }">
|
||
|
|
|
||
|
|
<view class="title">
|
||
|
|
<view v-if="showIcon" class="icon" :style="{ 'background-color': iconBackColor }">
|
||
|
|
<u-icon :name="icon" :color="iconColor"></u-icon>
|
||
|
|
</view>
|
||
|
|
<view class="text" :style="{ 'color': nameColor}">{{templateName}}</view>
|
||
|
|
<view class="tab" v-if="value.isReadonly === 1">
|
||
|
|
<image style="width: 16px;height: 16px;" src="/static/read.png"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="content">
|
||
|
|
<span :style="{ 'color': numColor}">{{numValue}}</span>
|
||
|
|
<span :style="{ 'color': numColor}">{{unit}}</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "numDisplay1",
|
||
|
|
props: {
|
||
|
|
marginTop: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
marginBottom: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
backColor: {
|
||
|
|
type: String,
|
||
|
|
default: 'rgba(255, 255, 255, 1)'
|
||
|
|
},
|
||
|
|
nameColor: {
|
||
|
|
type: String,
|
||
|
|
default: 'rgba(51, 51, 51, 1)'
|
||
|
|
},
|
||
|
|
numColor: {
|
||
|
|
type: String,
|
||
|
|
default: 'rgba(51, 51, 51, 1)'
|
||
|
|
},
|
||
|
|
showIcon: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
iconColor: {
|
||
|
|
type: String,
|
||
|
|
default: 'rgba(66, 134, 222, 1)'
|
||
|
|
},
|
||
|
|
iconBackColor: {
|
||
|
|
type: String,
|
||
|
|
default: 'rgba(235, 244, 255, 1)'
|
||
|
|
},
|
||
|
|
templateName: {
|
||
|
|
type: String,
|
||
|
|
default: '数值展示1'
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
type: Object,
|
||
|
|
require: true
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
numValue: null,
|
||
|
|
unit: '',
|
||
|
|
icon:''
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.init()
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
value: {
|
||
|
|
handler(newVal) {
|
||
|
|
this.init()
|
||
|
|
},
|
||
|
|
deep: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
init() {
|
||
|
|
this.numValue = this.value.value!==null? this.value.value : '--';
|
||
|
|
this.unit = this.value.unit;
|
||
|
|
this.icon = this.value.icon !== null && this.value.icon !== "" ? this.value.icon : 'edit-pen';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.num-display1 {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 30rpx;
|
||
|
|
// border-radius: 20rpx;
|
||
|
|
height: 90rpx;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.title {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
max-width: 90%;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
width: 70rpx;
|
||
|
|
height: 70rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
border-radius: 100%;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text {
|
||
|
|
font-size: 30rpx;
|
||
|
|
min-width: 80rpx;
|
||
|
|
max-width: 240rpx;
|
||
|
|
max-height: 80rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
height: 40rpx;
|
||
|
|
width: 40rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
font-size: 36rpx;
|
||
|
|
max-width: 100rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|