272 lines
6.8 KiB
Vue
272 lines
6.8 KiB
Vue
|
<template>
|
|||
|
|
<view class="flex-col page">
|
|||
|
|
<view class="flex-col self-stretch section">
|
|||
|
|
<view class="flex-row items-center section_2">
|
|||
|
|
<image
|
|||
|
|
class="image_2"
|
|||
|
|
src="https://ide.code.fun/api/image?token=6753b6f64ae84d00121f2f30&name=75f234eb83cd7a5f71855f98a032e4ec.png"
|
|||
|
|
/>
|
|||
|
|
<text class="font text ml-13">玲泷水月阁</text>
|
|||
|
|
<image
|
|||
|
|
class="image ml-13"
|
|||
|
|
src="https://ide.code.fun/api/image?token=6753b6f64ae84d00121f2f30&name=3a5de3282a233625f0aeb36d18f12110.png"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<image
|
|||
|
|
class="image_3"
|
|||
|
|
src="https://ide.code.fun/api/image?token=6753b6f64ae84d00121f2f30&name=af8962eb86012862edbadd7512290883.png"
|
|||
|
|
/>
|
|||
|
|
<view class="flex-col list">
|
|||
|
|
<view class="flex-col section_3">
|
|||
|
|
<view class="self-start group">
|
|||
|
|
<text class="font_2 text_3">￥</text>
|
|||
|
|
<text class="text_2">299</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-col self-stretch mt-15">
|
|||
|
|
<text class="font text_4">【非遗手工艺体验】纸笺加工技艺-流沙笺团扇制作体验</text>
|
|||
|
|
<text class="font_2 text_5 mt-11">
|
|||
|
|
产品简介：纸笺加工技艺-流沙笺团扇制作体验，带您领略国家级非物质文化遗产的魅力。本活动让您亲手体验传统纸笺加工技艺，感受流沙笺团扇的制作过程，传承千年匠心精神。
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-row items-baseline self-stretch group_2 mt-15">
|
|||
|
|
<text class="font_3">最近可预约时间：2024.11.11</text>
|
|||
|
|
<text class="font_3 ml-1">9：30 - 10：30</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-col section_4 mt-6">
|
|||
|
|
<text class="self-start font text_6">用户须知</text>
|
|||
|
|
<text class="self-start font_2 text_7 text_1 mt-16">
|
|||
|
|
1.请根据预约时间，提前10-15分钟到达活动地点，以便顺利参与体验。
|
|||
|
|
</text>
|
|||
|
|
<text class="self-start font_2 text_8 mt-16">2.穿着轻便、易清洗的衣物，以防止材料染色。</text>
|
|||
|
|
<text class="self-stretch font_2 text_9 mt-16">
|
|||
|
|
3.如您在购买服务后，因个人原因需要取消服务或者变更服务的预约时间，请您务必联系我们的客服。
|
|||
|
|
</text>
|
|||
|
|
<text class="self-start font_2 text_7 mt-16">
|
|||
|
|
4.只要您在体验活动开始前取消购买，我们将为您提供全额退款服务。
|
|||
|
|
</text>
|
|||
|
|
<text class="self-stretch font_2 text_10 mt-16">
|
|||
|
|
5.如遇特殊情况，如突发疾病或其他不可抗力因素，请及时与客服沟通，我们将根据实际情况处理退款事宜。
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-row section_5">
|
|||
|
|
<view class="flex-col items-center shrink-0 self-start">
|
|||
|
|
<image
|
|||
|
|
class="image_4"
|
|||
|
|
src="https://ide.code.fun/api/image?token=6753b6f64ae84d00121f2f30&name=b51a8f2b2d8a67d51ce7365971207fdc.png"
|
|||
|
|
/>
|
|||
|
|
<text class="text_13 mt-3">客服</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-row flex-1 self-center ml-26">
|
|||
|
|
<view class="flex-col justify-start items-center text-wrapper">
|
|||
|
|
<text class="font_3 text_11">加入购物车</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-col justify-start items-center text-wrapper_2 ml-31">
|
|||
|
|
<text class="font text_12">立即预约</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<text class="self-start text_14">服务详情</text>
|
|||
|
|
<image
|
|||
|
|
class="self-stretch image_5"
|
|||
|
|
src="https://ide.code.fun/api/image?token=6753b6f64ae84d00121f2f30&name=15cfcb6dc1d8e692d8b51cd736373921.png"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.ml-13 {
|
|||
|
|
margin-left: 24.38rpx;
|
|||
|
|
}
|
|||
|
|
.mt-11 {
|
|||
|
|
margin-top: 20.63rpx;
|
|||
|
|
}
|
|||
|
|
.mt-15 {
|
|||
|
|
margin-top: 28.13rpx;
|
|||
|
|
}
|
|||
|
|
.ml-1 {
|
|||
|
|
margin-left: 1.88rpx;
|
|||
|
|
}
|
|||
|
|
.mt-3 {
|
|||
|
|
margin-top: 5.63rpx;
|
|||
|
|
}
|
|||
|
|
.ml-31 {
|
|||
|
|
margin-left: 58.13rpx;
|
|||
|
|
}
|
|||
|
|
.page {
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
width: 100%;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.section {
|
|||
|
|
padding-bottom: 41.25rpx;
|
|||
|
|
background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FJULGLADX-feiyigongfang.png');
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
}
|
|||
|
|
.section_2 {
|
|||
|
|
padding: 22.5rpx 22.5rpx 20.63rpx;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.image_2 {
|
|||
|
|
width: 33.75rpx;
|
|||
|
|
height: 35.63rpx;
|
|||
|
|
}
|
|||
|
|
.font {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|||
|
|
line-height: 29.7rpx;
|
|||
|
|
}
|
|||
|
|
.text {
|
|||
|
|
color: #000000;
|
|||
|
|
line-height: 28.37rpx;
|
|||
|
|
}
|
|||
|
|
.image {
|
|||
|
|
border-radius: 50%;
|
|||
|
|
width: 46.88rpx;
|
|||
|
|
height: 46.88rpx;
|
|||
|
|
}
|
|||
|
|
.image_3 {
|
|||
|
|
margin-top: 15rpx;
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 70vw;
|
|||
|
|
}
|
|||
|
|
.list {
|
|||
|
|
margin-top: 18.75rpx;
|
|||
|
|
}
|
|||
|
|
.section_3 {
|
|||
|
|
padding: 36.73rpx 17.1rpx 39.64rpx 17.12rpx;
|
|||
|
|
background-color: #ffffffcc;
|
|||
|
|
border-radius: 37.5rpx;
|
|||
|
|
}
|
|||
|
|
.group {
|
|||
|
|
margin-left: 12.04rpx;
|
|||
|
|
line-height: 29.7rpx;
|
|||
|
|
}
|
|||
|
|
.font_2 {
|
|||
|
|
font-size: 26.25rpx;
|
|||
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|||
|
|
line-height: 31.88rpx;
|
|||
|
|
color: #323232;
|
|||
|
|
}
|
|||
|
|
.text_3 {
|
|||
|
|
color: #ff0000;
|
|||
|
|
line-height: 16.91rpx;
|
|||
|
|
}
|
|||
|
|
.text_2 {
|
|||
|
|
color: #ff0000;
|
|||
|
|
font-size: 45rpx;
|
|||
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|||
|
|
line-height: 29.7rpx;
|
|||
|
|
}
|
|||
|
|
.text_4 {
|
|||
|
|
color: #323233;
|
|||
|
|
line-height: 35.63rpx;
|
|||
|
|
}
|
|||
|
|
.text_5 {
|
|||
|
|
margin-left: 5.79rpx;
|
|||
|
|
margin-right: 3.58rpx;
|
|||
|
|
}
|
|||
|
|
.group_2 {
|
|||
|
|
padding: 0 14.94rpx;
|
|||
|
|
}
|
|||
|
|
.font_3 {
|
|||
|
|
font-size: 26.25rpx;
|
|||
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|||
|
|
line-height: 24.92rpx;
|
|||
|
|
color: #000000;
|
|||
|
|
}
|
|||
|
|
.section_4 {
|
|||
|
|
padding: 31.63rpx 18.04rpx 56.83rpx 26.76rpx;
|
|||
|
|
background-color: #ffffffcc;
|
|||
|
|
border-radius: 37.5rpx;
|
|||
|
|
}
|
|||
|
|
.text_6 {
|
|||
|
|
margin-left: 3.71rpx;
|
|||
|
|
color: #323232;
|
|||
|
|
line-height: 28.01rpx;
|
|||
|
|
text-decoration: underline;
|
|||
|
|
}
|
|||
|
|
.text_7 {
|
|||
|
|
width: 648.75rpx;
|
|||
|
|
}
|
|||
|
|
.text_1 {
|
|||
|
|
margin-left: 3.66rpx;
|
|||
|
|
}
|
|||
|
|
.text_8 {
|
|||
|
|
margin-left: 3.86rpx;
|
|||
|
|
line-height: 25.63rpx;
|
|||
|
|
}
|
|||
|
|
.text_9 {
|
|||
|
|
margin-left: 3.96rpx;
|
|||
|
|
}
|
|||
|
|
.text_10 {
|
|||
|
|
margin-left: 3.96rpx;
|
|||
|
|
margin-right: 3.77rpx;
|
|||
|
|
}
|
|||
|
|
.section_5 {
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
margin-top: 31.88rpx;
|
|||
|
|
padding: 22.5rpx 33.75rpx 30.13rpx 39.38rpx;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.image_4 {
|
|||
|
|
width: 46.88rpx;
|
|||
|
|
height: 46.88rpx;
|
|||
|
|
}
|
|||
|
|
.text_13 {
|
|||
|
|
color: #9d2624;
|
|||
|
|
font-size: 22.5rpx;
|
|||
|
|
font-family: Open Sans;
|
|||
|
|
line-height: 20.72rpx;
|
|||
|
|
}
|
|||
|
|
.text-wrapper {
|
|||
|
|
padding: 29.1rpx 0 28.69rpx;
|
|||
|
|
flex: 1 1 260.63rpx;
|
|||
|
|
background-color: #e79ea14d;
|
|||
|
|
border-radius: 93.75rpx;
|
|||
|
|
height: 82.5rpx;
|
|||
|
|
}
|
|||
|
|
.text_11 {
|
|||
|
|
color: #ffffff;
|
|||
|
|
line-height: 24.71rpx;
|
|||
|
|
}
|
|||
|
|
.text-wrapper_2 {
|
|||
|
|
padding: 26.49rpx 0 28.57rpx;
|
|||
|
|
flex: 1 1 260.63rpx;
|
|||
|
|
background-color: #e79ea1;
|
|||
|
|
border-radius: 93.75rpx;
|
|||
|
|
height: 82.5rpx;
|
|||
|
|
}
|
|||
|
|
.text_12 {
|
|||
|
|
color: #ffffff;
|
|||
|
|
line-height: 27.43rpx;
|
|||
|
|
}
|
|||
|
|
.text_14 {
|
|||
|
|
margin-left: 4.74rpx;
|
|||
|
|
margin-top: 32.87rpx;
|
|||
|
|
color: #000000;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-family: Open Sans;
|
|||
|
|
line-height: 27.71rpx;
|
|||
|
|
}
|
|||
|
|
.image_5 {
|
|||
|
|
margin-top: 18.17rpx;
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 531.5vw;
|
|||
|
|
}
|
|||
|
|
@import url(../../../common/css/global.css);
|
|||
|
|
</style>
|