shop4.3.57/components/page-component/goods/bd-detail.vue

<template>
    <view class="bd-detail">
        <view class="detail" v-if="newDetail">
            <view class="detail-title dir-left-nowrap main-center">
                <view class="dir-left-nowrap cross-center">
                    <view class="border"></view>
                    <view class="text">商品详情</view>
                    <view class="border"></view>
                </view>
            </view>
            <app-rich-text
                :content="newDetail"
                class-name="rich-text"
            ></app-rich-text>
        </view>
    </view>
</template>

<script>
import appRichText from "../../basic-component/app-rich/parse";

export default {
    name: "bd-detail",

    components: {
        'app-rich-text': appRichText,
    },

    props: {
        detail: {
            type: String,
            default() {
                return '';
            }
        },
    },
    created() {
        this.$store.dispatch('gConfig/setImageWidth', 48);
    },
    computed: {
        newDetail() {
            let detail = '正在加载数据，模拟网络延迟2秒😝';
            if (this.detail) {
                detail = this.detail;
            }
            return detail;
        },
    }
}
</script>

<style scoped lang="scss">

.bd-detail {
    width: 100%;
    margin-top: 16upx;
    image {
        width: 100%;
        height: #{80rpx};
        display: block;
    }
    .detail-title {
        margin: #{40rpx} 0 #{32rpx} 0;
        font-size: $uni-font-size-weak-one;
        color: $uni-general-color-two;
        .text {
            color: #333;
            font-size: #{30rpx};
        }
        .border {
            border-top: 2px solid #E56283;
            height: 0;
            width: #{40rpx};
            margin: 0 #{45rpx};
        }


        image {
            width: #{24rpx};
            height: #{24rpx};
            display: block;
            margin-right: #{12rpx};
        }
    }
}

</style>