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