css样式

最新推荐文章于 2024-09-11 22:31:16 发布

前端猫

最新推荐文章于 2024-09-11 22:31:16 发布

阅读量407

点赞数 3

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_60559048/article/details/142025657

版权

<template>
	<view>
		<view class="line_box">
			<view class="line_con left" :style="{background: backBg}">
				<text class="txt left_out" v-if="leftNum <= 25">{{ leftTexts }}</text>
				<view class="line" :style="{'background': leftBg, 'width': leftNum + '%'}">
					<text class="txt" v-if="leftNum > 25">{{ leftTexts }}</text>
				</view>
			</view>
			<view class="line_con right" :style="{background: backBg}">
				<view class="line" :style="{'background': rightBg, 'width': rightNum + '%'}">
					<text class="txt" v-if="rightNum > 25">{{ rightTexts }}</text>
				</view>
				<text class="txt right_out" v-if="rightNum <= 25">{{ rightTexts }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
			// 左侧背景
			leftBg: {
				type: String,
				default: 'linear-gradient(to right, #ff9d6f, #f6544f)'
			},
			// 右侧背景
			rightBg: {
				type: String,
				default: 'linear-gradient(to right, #296bf0, #80d8fe)'
			},
			// 底色背景
			backBg: {
				type: String,
				default: '#edf2fb'
			},
			// 左侧长度
			leftNum: {
				type: Number,
				default: 0
			},
			// 右侧长度
			rightNum: {
				type: Number,
				default: 0
			},
			// 左侧文本
			leftText: {
				type: String,
				default: ''
			},
			// 右侧文本
			rightText: {
				type: String,
				default: ''
			}
		},
		computed: {
			leftTexts() {
				if(this.leftText) {
					return this.leftText
				} else {
					return this.leftNum + '%'
				}
			},
			rightTexts() {
				if(this.rightText) {
					return this.rightText
				} else {
					return this.rightNum + '%'
				}
			}
		},
		data() {
			return {}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.line_box{
	display: flex;
	.line_con{
		flex: 1;
		height: 40rpx;
		border-radius: 40rpx;
		display: flex;
		&.left{
			margin-right: 40rpx;
			justify-content: flex-end;
			.line{
				text-align: left;
			}
		}
		&.right{
			.line{
				text-align: right;
			}
		}
	}
	.line{
		border-radius: 40rpx;
		height: 100%;
	}
}
.txt{
	color: #fff;
	margin: 0 20rpx;
	&.left_out{
		color: #f55d59
	}
	&.right_out{
		color: #1d61ef
	}
}

.back{
	background: linear-gradient(#ff9d6f, #f6544f);
}
</style>