88 lines
1.5 KiB
Vue
88 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import type { goodsServiceItem } from '@/types/goods'
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'close'): void
|
|
}>()
|
|
|
|
//获取服务与承诺信息
|
|
const props = defineProps<{
|
|
list?: goodsServiceItem[]
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<view class="service-panel">
|
|
<text class="close icon-close" @tap="emit('close')"></text>
|
|
<view class="title">服务说明</view>
|
|
<view class="content">
|
|
<view class="item" v-for="item in props.list" :key="item.id">
|
|
<view class="dt">{{ item.name }}</view>
|
|
<view class="dd">
|
|
{{ item.content }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.service-panel {
|
|
padding: 0 30rpx;
|
|
border-radius: 10rpx 10rpx 0 0;
|
|
position: relative;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.title {
|
|
line-height: 1;
|
|
padding: 40rpx 0;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
font-weight: normal;
|
|
border-bottom: 1rpx solid #ddd;
|
|
color: #444;
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
right: 24rpx;
|
|
top: 24rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.content {
|
|
padding: 20rpx 20rpx 150rpx 20rpx;
|
|
|
|
.item {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.dt {
|
|
margin-bottom: 10rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
border-radius: 50%;
|
|
background-color: #eaeaea;
|
|
transform: translateY(-50%);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -20rpx;
|
|
}
|
|
}
|
|
|
|
.dd {
|
|
line-height: 1.6;
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
</style>
|