yinchuan-community-all/mini-program/smart-city-yinchuan-wx/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="https://szsq.nxzhsq.cn/community/miniofile/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 20 upx;
        margin-top: 60 upx;
    }

    .titleContent {
        display: flex;
        align-items: center;

        .title {
            font-size: 42 upx;
            font-weight: 800;
            color: rgba(0, 0, 0, 1);
            line-height: 42 upx;
        }

        .dian {
            width: 8 upx;
            height: 8 upx;
            background: $dt-color-primary;
            border-radius: 50%;
            margin: 0 6 upx;
        }

        .strongTitle {
            font-size: 42 upx;
            font-weight: 800;
            color: $dt-color-primary;
        }
    }

    .goods-text-title {
        display: flex;
        justify-content: space-between;
        height: 70 upx;
        align-items: center;

        .mode {
            display: flex;
            justify-content: space-between;
            height: 24 upx;
            align-items: center;

            .more-arrow-img {
                margin-left: 10 upx;
                width: 12 upx;
                height: 12 upx;
            }
        }

        .text {
            font-size: 24 upx;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
        }
    }

</style>