<template>
|
<div class="mine-service-detail-view-wrapper">
|
<div class="mine-service-detail-view-address mine-service-detail-card">
|
<div class="mine-service-detail-view-title-wrapper">
|
<div class="mine-service-detail-view-title">服务地址</div>
|
</div>
|
<div class="mine-service-detail-view-item">浙江省宁波市鄞州区河清北路55号博浪大厦24层</div>
|
<div class="mine-service-detail-view-item">阳阳 13333333333</div>
|
</div>
|
<div class="mine-service-detail-card">
|
<nut-card
|
:img-url="'//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg'"
|
:title="'服务名称'"
|
:price="'155.00'"
|
>
|
<template #prolist>
|
<div class="card-tag-list">
|
<span class="tag">活鲜</span>
|
<span class="tag">礼盒</span>
|
<span class="tag">国产</span>
|
</div>
|
</template>
|
<template #origin>
|
<div></div>
|
</template>
|
</nut-card>
|
</div>
|
|
<List>
|
<ListItem title="订单状态" :showArrow="false">
|
<template #extra>
|
<div class="mine-service-detail-view-list-item">{{ '订单状态' }}</div>
|
</template>
|
</ListItem>
|
<ListItem title="服务时间" :showArrow="false">
|
<template #extra>
|
<div class="mine-service-detail-view-list-item">
|
{{ '2025-12-12 12:00-14:00' }}
|
</div>
|
</template>
|
</ListItem>
|
<ListItem title="服务机构" :showArrow="false">
|
<template #extra>
|
<div class="mine-service-detail-view-list-item">{{ 'xxxxx公司' }}</div>
|
</template>
|
</ListItem>
|
<ListItem title="备注" :showArrow="false">
|
<template #extra>
|
<div class="mine-service-detail-view-list-item">{{ '我是备注信息' }}</div>
|
</template>
|
</ListItem>
|
</List>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import Taro from '@tarojs/taro';
|
import { List, ListItem } from '@12333/components';
|
|
defineOptions({
|
name: 'MineServiceDetailView',
|
});
|
|
// type Props = {
|
|
// }
|
|
// const props = withDefaults(defineProps<Props>(), {
|
|
// })
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.mine-service-detail-view-wrapper {
|
.mine-service-detail-card {
|
padding: 24px 32px;
|
margin-bottom: 24px;
|
background-color: #fff;
|
border-radius: 12px;
|
|
.card-tag-list {
|
margin: 6px 0 2px;
|
height: 30px;
|
overflow: hidden;
|
display: flex;
|
|
.tag {
|
padding: 0 10px;
|
border-radius: 2px;
|
font-size: 20px;
|
height: 30px;
|
line-height: 30px;
|
color: #999;
|
background-color: #f2f2f7;
|
margin-right: 10px;
|
}
|
}
|
}
|
|
.mine-service-detail-view-address {
|
.mine-service-detail-view-title-wrapper {
|
display: flex;
|
align-items: center;
|
margin-bottom: 14px;
|
|
.mine-service-detail-view-title {
|
flex: 1;
|
min-width: 0;
|
@include ellipsis;
|
font-size: 30px;
|
color: boleGetCssVar('text-color', 'primary');
|
line-height: 42px;
|
}
|
}
|
|
.mine-service-detail-view-item {
|
font-weight: 400;
|
@include ellipsis;
|
font-size: 24px;
|
color: boleGetCssVar('text-color', 'primary');
|
line-height: 36px;
|
|
& + .mine-service-detail-view-item {
|
margin-top: 14px;
|
}
|
}
|
}
|
|
.mine-service-detail-view-list-item {
|
font-weight: 400;
|
font-size: 28px;
|
color: boleGetCssVar('text-color', 'secondary');
|
line-height: 40px;
|
}
|
}
|
</style>
|
