css实现电池刻度效果

最新推荐文章于 2024-04-25 16:03:09 发布

Smile_ping

最新推荐文章于 2024-04-25 16:03:09 发布

阅读量324

点赞数

分类专栏： css 文章标签： css css实现电池刻度效果

本文链接：https://blog.csdn.net/Smile_ping/article/details/131145089

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

css实现电池刻度效果

这里用 uniapp 方式写，临时使用比较粗暴方式实现~~~欢迎指教!

效果图

在这里插入图片描述

template

<view class="progress-wrap">
	<view class="progress-line">
		<view class="line-box">
			<block v-for="(len, index) in 10" :key="index">
				<view class="cross" :style="{ left: index * 16 +'px' }">
					<view class="crosses"></view>
				</view>
			</block>
            
			<view class="cPart light-part" v-for="item in colorList" :key="item.id" :style="{ background: item.color }"></view>
			<view class="cPart gray-part" :style="{ width: Number(100 - curQuantity) + '%' }"></view>
		</view>
	</view>
</view>

js

<script>
	export default {
		data() {
			return {
				colorList:[
				   {id: 1, color: "#ff0000"},
				   {id: 2, color: "#ff0000"},
				   {id: 3, color: "#3cff01"},
				   {id: 4, color: "#3cff01"},
				   {id: 5, color: "#3cff01"},
				   {id: 6, color: "#3cff01"},
				   {id: 7, color: "#3cff01"},
				   {id: 8, color: "#3cff01"},
				   {id: 9, color: "#3cff01"},
				   {id: 10, color: "#3cff01"},
				],
				quantity: 98
			};
		},
		onLoad() {

		},
		computed: {
			curQuantity: {
				get() {
					if (this.quantity > 100) {
						this.quantity = 100
					} else if (this.quantity < 0 || this.quantity === 0) {
						this.quantity = 0
					} else {
						return parseInt(this.quantity)
					}
				}
			}
		}
	}
</script>

css

.progress-wrap {
	width: 174px;
	.progress-line {
		background-color: #0d3ba4;
		padding-left: 4px;
		border-radius: 8rpx;
		border: 1px solid #f5af19;
		.line-box {
			display: flex;
			align-items: center;
			width: 160px;
			position: relative;
			z-index: 1;
		}
		.cross {
			position: absolute;
          	top: 0;
			z-index: 999;
			width: 12rpx;
			height: 80rpx;
			background: #0d3ba4;
			.crosses {
				width: 100%;
				height: 100%;
				position: relative;
			}
		}
		.cPart {
			height: 80rpx;
			box-sizing: border-box;
		}
		.light-part {
			width: 16px;
			z-index: 9;
		}
		.gray-part {
			position: absolute;
			right: 0;
			z-index: 99;
			background-color: #898989;
          	transition: width 1s ease-out;
		}
	}
}

使用scss遍历色值

<view class="cPart light-part" :class="[`item-${(cIdx + 1)}`]" v-for="(item, cIdx) in 10" :key="cIdx"></view>

<style lang="scss" scoped>
// 颜色列表
$color-list: #FDC376, #7474ec, #5da6fb, #ffad27, #d75efb, #9fff10, #FF691D, #FF1D17, #46ffe9, #5da6fb;

@for $i from 1 through length($color-list) {
  // 获取数组 $i 对应的下标值 即颜色值
	$item: nth($color-list, $i);
  	.item-#{$i} {
    	background: rgba($color: $item, $alpha: 1);
  	}
}
</style>