CommunityApp/comps/dt_unit_head_v2.vue

<template>
  <view class="comp-goods-wrap">
	  <view class="titleContent">
		  <view class="title">{{ titleLeft }}</view>
		  <view class="dian"></view>
		  <view class="strongTitle">{{titleRight}}</view>
	  </view>
    <view v-if="isShowMore" class="goods-text-title">
      <view class="text">{{memo}}</view>
      <view class="mode" @tap="tapMore">
        <text class="text">查看更多</text>
        <image src="http://139.9.103.171:1888/img/image/arrow.png" class="more-arrow-img"></image>
      </view>
    </view>
  </view>
</template>
<script>
export default {
	data(){
		return{
			titleLeft:'',
			titleRight:''
		}
	},
  props: {
    title: {
      type: String,
      default: ""
    },
	memo:{
		type:String,
		default:""
	},
	isShowMore:{
      type: Boolean,
      default: true
	}
  },
  created(){
	  let titLen = this.title.length;
	  this.titleLeft = this.title.substring(0,titLen-2)
	  this.titleRight = this.title.substring(titLen-2,titLen)
	  // console.log(this.titleLeft)
  },
  methods: {
    tapMore() {
      this.$emit("more");
    }
  }
};
</script>

<style lang="scss">
	.comp-goods-wrap{
		margin:0 20upx;
		margin-top: 60upx;
	}
	
	.titleContent{
		display: flex;
		align-items: center;
		.title{
			font-size:42upx;
			font-weight:800;
			color:rgba(0,0,0,1);
			line-height:42upx;
		}
		.dian{
			width:8upx;
			height:8upx;
			background:$dt-color-primary;
			border-radius:50%;
			margin: 0 6upx;
		}
		.strongTitle{	
			font-size:42upx;
			font-weight:800;
			color:$dt-color-primary;
		}
	}
.goods-text-title {
  display: flex;
  justify-content: space-between;
  height: 70upx;
  align-items: center;
  .mode{
	  display: flex;
	  justify-content: space-between;
	  height: 24upx;
	  align-items: center;
	  .more-arrow-img{
	  	margin-left: 10upx;
	  	width: 12upx;
	  	height:12upx;
	  }
  }
  .text {
    font-size:24upx;
    font-weight:400;
    color:rgba(102,102,102,1);
  }
}

</style>