You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-app/pages/goods/detail/components/Service.vue

75 lines
1.6 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!--
* @Author: ch
* @Date: 2022-03-24 10:32:58
* @LastEditors: ch
* @LastEditTime: 2022-04-09 15:03:47
* @Description: file content
-->
<template>
<view>
<u-cell label="服务" value="假一赔四 · 全国包邮" :border="false"
isLink @click="showPopup = true"></u-cell>
<!-- 详情内容弹窗 -->
<u-popup mode="bottom" :show="showPopup" :round="12">
<view class="content">
<text class="title">假一赔四</text>
<text class="desc">正品保障假一赔四</text>
<text class="title">全国包邮</text>
<text class="desc">偏远地区青海西藏新疆除外</text>
<text class="title">不支持7天退换</text>
<text class="desc">此商品不支持七天无理由退换</text>
</view>
<button class="btn" @click="showPopup = false">确认</button>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
showPopup: false,
};
},
created() {
// 获取商品服务列表
},
methods: {},
};
</script>
<style lang="scss" scoped>
.content{
padding: 50rpx;
color: $color-grey6;
}
.title{
margin: 50rpx 0 20rpx 0;
display: block;
font-size: $font-size-lg;
::before{
display: inline-block;
content: '';
width: 10rpx;
height: 10rpx;
border-radius: 8rpx;
background: $color-yellow2;
margin-right: 20rpx;
}
}
.desc{
font-size: $font-size-base;
}
.btn{
height: 80rpx;
width: 690rpx;
font-size: 30rpx;
color: $color-grey0;
margin: 100rpx auto 30rpx auto;
border-radius: 100rpx;
background: linear-gradient(270deg, $color-yellow2 0%, $color-yellow1 100%);
}
</style>