caimei-applets-caimei/pages/goods/goods-doc-detail.vue

<!-- 自定义页面 -->
<template>
    <view class="goods-doc-detail"> 
        <view class="cm-header">
            <image class="cm-cover" src="https://picsum.photos/750/750" mode=""></image>
            <view class="cm-title">
                韩国恩盛进口氢洁气小气泡清韩国恩韩进口氢洁气小气泡清韩国恩
            </view>
            <view class="cm-params"><text>供应商：</text>科医人医疗激光设备贸易公司</view>
            <view class="cm-params"><text>商品属性：</text>产品</view>
        </view>
        <cm-product-doc v-if="archiveId !== 0" :archiveId="archiveId" :bottom="isIphoneX ? '60rpx' : '10rpx'"></cm-product-doc>
    </view>
</template>

<script>
import { mapState } from 'vuex'
import cmProductDoc from '@/components/cm-module/productDetails/cm-product-doc.vue'
export default {
    components:{
        cmProductDoc
    },
    computed:{
        ...mapState(['isIphoneX']),
    },
    onLoad(e) {
       this.archiveId = e.id || 0
    },
    data() {
        return {
            archiveId: 0
        }
    }
}
</script>

<style lang="scss" scoped>
.goods-doc-detail{
    background: #F7F7F7;
}
.cm-header{
    background: #fff;
    margin-bottom: 16rpx;
    overflow: hidden;
    .cm-cover{
        width: 750rpx;
        height: 750rpx;
    }
    .cm-title,.cm-params{
        padding: 0 24rpx;
    }
    .cm-title{
        margin: 32rpx 0;
        font-size: 34rpx;
        line-height: 1.6;
        color: #333333;
    }
    .cm-params{
        margin: 16rpx 0;
        font-size: 24rpx;
        line-height: 1.6;
        color: #333333;
        text{
            font-size: #999999
        }
    }
}
</style>