<template>
<view class="flex-col justify-start page">
<view class="flex-col section">
<view class="flex-col group">
<view class="flex-col relative section_2">
<view class="flex-row justify-center items-baseline self-stretch relative group_2">
<text class="font text pos">精致体验</text>
<text class="font_2 text_2">融合时尚与传统，精选非遗华章</text>
</view>
<text class="self-start font_3 text_3">服装特点</text>
<view class="flex-col items-start self-stretch group_3">
<text class="font_2">提供更为精致的汉服款式，如刺绣襦裙、改良旗袍等。</text>
<text class="mt-2 font_2">服装细节丰富，面料上乘，适合追求品质的用户。</text>
<text class="mt-2 font_2">配饰精美，增添拍摄效果。</text>
</view>
<text class="self-start font_3 text_4">服务内容</text>
<view class="flex-col items-start self-stretch group_4">
<text class="font_2">高级化妆及发型设计。</text>
<text class="mt-2 font_2">服装租赁服务。</text>
<text class="mt-2 font_2">专业摄影服务（含5张精修照片）。</text>
</view>
<image
class="image pos_2"
src="https://ide.code.fun/api/image?token=6711f04f38a7c1001587de59&name=9462be138086344171b159fb470bb8e3.png"
/>
</view>
<view class="mt-12 flex-col section_3">
<text class="self-start font text_5">服装选择</text>
<view class="flex-col self-stretch mt-11">
<view class="flex-row items-center mt-10 list-item" v-for="(item, index) in items" :key="index">
<image
class="shrink-0 image_3"
src="https://ide.code.fun/api/image?token=6711f04f38a7c1001587de59&name=45ad24ebaf7ffeee80d7804168b1c012.png"
/>
<view class="flex-col flex-1 ml-11">
<view class="flex-col self-stretch">
<view class="flex-row justify-end self-stretch group_5">
<text class="font_4">详细信息</text>
<image
class="image_2"
src="https://ide.code.fun/api/image?token=6711f04f38a7c1001587de59&name=1484e0cc6274180ba7c91cddf1ec833b.png"
/>
</view>
<text class="self-start font_5 text_6 mt-3">“锦绣中华”系列汉服</text>
</view>
<view class="self-stretch group_6 mt-5">
<text class="font_7">服装简介：</text>
<text class="font_6">
“瑞凤呈祥”以凤凰为主题，象征着吉祥、和谐与美好。交领的设计，端庄大气，展现东方女性的温婉气质；直裾流畅，行走间尽显风华。衣襟上的凤凰图案...
</text>
</view>
<text class="self-end font_8 mt-5">￥350</text>
</view>
</view>
</view>
</view>
</view>
<view class="mt-48 flex-row">
<view class="flex-col items-center shrink-0 section_4">
<image
class="image_4"
src="https://ide.code.fun/api/image?token=6711f04f38a7c1001587de59&name=4b56fed14a39630ca2312edf6e34c024.png"
/>
<text class="mt-2 text_8">客服</text>
</view>
<view class="flex-col justify-start items-end flex-1 section_5">
<view class="flex-col justify-start items-center text-wrapper"><text class="text_7">现在去预约</text></view>
</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style lang="scss" scoped>
.mt-11 {
margin-top: 20.63rpx;
}
.ml-11 {
margin-left: 20.63rpx;
}
.mt-3 {
margin-top: 5.63rpx;
}
.mt-5 {
margin-top: 9.38rpx;
}
.page {
background-color: #ffffff;
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.section {
padding-top: 22.5rpx;
background-color: #f5f5dc;
}
.group {
padding: 0 16.88rpx;
}
.section_2 {
padding: 37.5rpx 41.25rpx 30rpx;
background-color: #ffe8e8;
border-radius: 18.75rpx 18.75rpx 0rpx 0rpx;
}
.group_2 {
padding-top: 7.5rpx;
}
.font {
font-size: 30rpx;
font-family: Open Sans;
}
.text {
color: #323232;
line-height: 27.9rpx;
}
.pos {
position: absolute;
left: 0.13rpx;
top: 50%;
transform: translateY(-50%);
}
.font_3 {
font-size: 22.5rpx;
font-family: Open Sans;
line-height: 22.5rpx;
color: #323232;
}
.text_3 {
margin-top: 22.5rpx;
line-height: 20.79rpx;
}
.group_3 {
margin-top: 15rpx;
padding: 0 22.5rpx;
}
.font_2 {
font-size: 22.5rpx;
font-family: Open Sans;
line-height: 26.25rpx;
color: #696969;
}
.text_2 {
line-height: 21.38rpx;
}
.text_4 {
margin-top: 24.38rpx;
line-height: 20.77rpx;
}
.group_4 {
margin-top: 15rpx;
padding: 0 24.38rpx;
}
.image {
width: 127.5rpx;
height: 127.5rpx;
}
.pos_2 {
position: absolute;
right: 7.5rpx;
bottom: 15rpx;
}
.section_3 {
padding: 37.5rpx 30rpx;
background-color: #fffef8;
border-radius: 18.75rpx;
}
.text_5 {
color: #000000;
line-height: 27.71rpx;
}
.list-item {
padding: 22.5rpx 22.5rpx 22.5rpx 30rpx;
background-color: #fff3c3;
border-radius: 9.38rpx;
}
.list-item:first-child {
margin-top: 0;
}
.image_3 {
border-radius: 9.38rpx;
width: 148.13rpx;
height: 165rpx;
}
.group_5 {
padding: 0 3.75rpx;
}
.font_4 {
font-size: 18.75rpx;
font-family: Open Sans;
line-height: 17.44rpx;
color: #323232;
}
.image_2 {
width: 15rpx;
height: 15rpx;
}
.font_5 {
font-size: 26.25rpx;
font-family: Open Sans;
line-height: 22.5rpx;
color: #323232;
}
.text_6 {
line-height: 24.26rpx;
}
.group_6 {
line-height: 22.5rpx;
}
.font_7 {
font-size: 18.75rpx;
font-family: Open Sans;
line-height: 22.5rpx;
color: #323232;
}
.font_6 {
font-size: 18.75rpx;
font-family: Open Sans;
line-height: 22.5rpx;
color: #828282;
}
.font_8 {
font-size: 33.75rpx;
font-family: Times New Roman;
line-height: 24.73rpx;
color: #ff3c3c;
}
.section_4 {
padding: 15rpx 0;
background-color: #ffc470;
width: 118.13rpx;
height: 114.38rpx;
}
.image_4 {
width: 52.5rpx;
height: 52.5rpx;
}
.text_8 {
color: #fffef8;
font-size: 26.25rpx;
font-family: Inter;
line-height: 24.17rpx;
}
.section_5 {
padding: 15rpx 0;
background-color: #fffef8;
height: 114.38rpx;
}
.text-wrapper {
margin-right: 20.63rpx;
padding: 26.25rpx 0;
background-color: #fbb612;
border-radius: 75rpx;
width: 457.5rpx;
}
.text_7 {
color: #ffffff;
font-size: 30rpx;
font-family: Inter;
line-height: 27.86rpx;
}
@import url(@import url(../../../common/css/global.css););
</style>