56 lines
917 B
Vue
56 lines
917 B
Vue
<template>
|
|
<view class="line-text" :style="{color: textColor}" @click="onClick">
|
|
{{text}}
|
|
<view class="line-block"
|
|
:style="{
|
|
background: active ? `linear-gradient(to right, ${lineColor}, #ffffff00)` : null
|
|
}"/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "LineText",
|
|
props: {
|
|
text: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
lineColor: {
|
|
type: String,
|
|
default: '#12cb74'
|
|
},
|
|
textColor: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
active: {
|
|
type: Boolean,
|
|
default: true,
|
|
}
|
|
},
|
|
methods: {
|
|
onClick() {
|
|
this.$emit('click')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.line-text {
|
|
position: relative;
|
|
width: fit-content;
|
|
text-align: left;
|
|
margin-bottom: 16rpx;
|
|
.line-block {
|
|
position: absolute;
|
|
bottom: -16rpx;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 12rpx;
|
|
}
|
|
|
|
}
|
|
</style>
|