hs_control_app/components/zai-lattice/index.vue

<template name="zai-lattice">
	<view class="zai-lattice-box" :class="shadow?'zai-lattice-box-shadow':''" :style="{'background':backgroundColor}">
		<view class="zai-lattice-box-p">
			<!-- 			<progress :percent="progressPercent" class="zai-progress" active stroke-width="5"
				:backgroundColor="backgroundColor" :activeColor="progressColor" /> -->
			<u-line-progress v-if="showNow" :percentage="progressPercent" class="zai-progress" active stroke-width="5"
				:showText="false" :activeColor="progressColor" :inactiveColor="backgroundColor" />
			<view class="zai-lattice-title" :style="{color:titleColor}">{{title}}</view>
			<view v-if="showNow">
				<text class="zai-lattice-now-day" :style="{color:numColor}">今日累计</text>
			</view>
			<view v-if="showNow" class="zai-lattice-num">
				<text class="zai-lattice-num-title" :style="{color:numColor}">{{num}}</text>
				<text class="zai-lattice-num-unit" :style="{color:unitColor}">{{unit}}</text>
			</view>
			<view class="zai-lattice-icon" v-if="type=='icon'" :class="icon"
				:style="{color:iconColor,'font-size':fontSize}"></view>
			<view class="zai-lattice-img" v-if="type=='img'" :style="{width:fontSize,height:fontSize}"
				@click="onClick()">
				<image :src="src" mode="aspectFit" class="zai-lattice-image" :style="{width:fontSize,height:fontSize}">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "zai-lattice",
		props: {
			//背景颜色
			backgroundColor: {
				type: [String],
				default: '#f6fff9'
			},
			//是否开启阴影
			shadow: Boolean,
			//进度条颜色
			progressColor: {
				type: [String],
				default: '#26a495'
			},
			//进度条位置
			progressPercent: {
				type: [Number],
				default: 0
			},
			//名称
			title: String,
			//数量
			num: {
				type: [Number, String],
				default: 0
			},
			//单位
			unit: String,
			//字体图标
			icon: String,
			//图片地址
			src: {
				type: [String],
				default: '../../static/img/control/close.png'
			},
			//图标颜色
			iconColor: {
				type: [String],
				default: '#A1A0B5'
			},
			//单位颜色
			unitColor: {
				type: [String],
				default: '#26a495'
			},
			//数量颜色
			numColor: {
				type: [String],
				default: '#26a495'
			},
			//名称颜色
			titleColor: {
				type: [String],
				default: '#EFEEF2'
			},
			//图标或图片大小
			size: {
				type: [Number, String],
				default: 33
			},
			//图标类型
			type: {
				type: [String],
				default: 'icon'
			},
			//显示今日累计
			showNow: {
				type: [Boolean],
				default: true
			},
		},
		computed: {
			fontSize() {
				var size = Number(this.size)
				size = isNaN(size) ? 33 : size
				return `${size}px`
			}
		},
		methods: {
			onClick() {
				this.$emit('click')
			}
		}
	}
</script>

<style>
	@import "./index.css";
</style>