<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>