63 lines
1.2 KiB
Vue
63 lines
1.2 KiB
Vue
<!-- 商品详情：描述卡片 -->
|
||
<template>
|
||
<view class="detail-content-card bg-white ss-m-x-20 ss-p-t-20">
|
||
<view class="card-header ss-flex ss-col-center ss-m-b-30 ss-m-l-20">
|
||
<view class="line" :class="state.themeType ? `${state.themeType}` : ''"></view>
|
||
<view class="title ss-m-l-20 ss-m-r-20">详情</view>
|
||
</view>
|
||
<view class="card-content">
|
||
<mp-html :content="content" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
reactive,
|
||
computed
|
||
} from 'vue';
|
||
import sheep from '@/sheep';
|
||
const app = computed(() => sheep.$store('app'));
|
||
const state = reactive({
|
||
themeType: app.value.platform.themeType
|
||
});
|
||
|
||
const {
|
||
safeAreaInsets
|
||
} = sheep.$platform.device;
|
||
|
||
const props = defineProps({
|
||
content: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.detail-content-card {
|
||
.card-header {
|
||
.line {
|
||
width: 6rpx;
|
||
height: 30rpx;
|
||
background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
|
||
border-radius: 3rpx;
|
||
}
|
||
|
||
.title {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.des {
|
||
font-size: 24rpx;
|
||
color: $dark-9;
|
||
}
|
||
|
||
.more-btn {
|
||
font-size: 24rpx;
|
||
color: var(--ui-BG-Main);
|
||
}
|
||
}
|
||
}
|
||
</style> |