vue css动态控制宽度百分比

最新推荐文章于 2023-12-06 00:00:59 发布

B2689429488

最新推荐文章于 2023-12-06 00:00:59 发布

阅读量1.1k

点赞数

分类专栏： uni vue 文章标签： css vue.js javascript

本文链接：https://blog.csdn.net/B2689429488/article/details/125208511

版权

vue 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

uni

19 篇文章 0 订阅

订阅专栏

<!--				电量-->
				<view class="electricity">
					<view class="electricity_have" :style="`width: ${scrollerWidth}%`">
					</view>
					<view class="electricity_have_a">
						<text style="font-weight: bold">{{mainEle}}%</text>
						<text>智能鞋电量</text>
					</view>
				</view>

js部分

onShow() {
this.scrollerWidth = 10 //在需要控制的地方赋值
}

css

.electricity {
					margin-top: 110rpx;
					width: 100%;
					height: 116rpx;
					background-color: #9DBDFA;
					border-radius: 40rpx;

					.electricity_have {
						background-color: #FFFFFF;
						height: 116rpx;
						border-radius: 40rpx 0rpx 0rpx 40rpx;
						text-align: center;
					}
					.electricity_have_a {
						width: 90%;
						position: absolute;
						top:894rpx;
						height: 116rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						@include fontNSY(24rpx, 400, #4A8DFF)
					}
				}