<!--
 * @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>
