assess-app/pages/task/module/item-title.vue

<template>
  <view class="item-line" :class="{'line-one':lineType===1,'line-two':lineType===2,'line-three':lineType===3}">
    <view class="item-title" :class="{'title-two':titleType===2}">
      <view class="title-circle"></view>
      <view class="title-text">{{label}}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "item-title",
  components: {},
  props: {
    lineType:{
      type:Number,
      default:0
    },
    titleType:{
      type:Number,
      default:1
    },
    label: {
      type: String,
      default: '标题'
    },
  },
  data() {
    return {}
  },
  watch: {},
  mounted() {

  },
  methods: {}
}
</script>

<style scoped lang="scss">
.item-line{
  padding: 16rpx 0;
  .item-title{
    display: flex;
    justify-content: left;
    height: 45rpx;
    .title-circle{
      margin-top: 19rpx;
      margin-right: 8rpx;
      width: 12rpx;
      height: 12rpx;
      border-radius: 50%;
      background: #306AFB;
    }
    .title-text{
      font-size: 32rpx;
      color: #333;
      font-weight: 600;
      line-height: 45rpx;
    }
  }
  .title-two{
    .title-circle{
      display: none;
    }
    .title-text{
      color: #333333;
      font-weight: 400;
      font-size: 28rpx;
    }
  }
}
.line-one{
  padding-top: 0;
}
.line-two{
  padding-bottom: 0;
}
.line-three{
  padding-top: 32rpx;
}

</style>