250 lines
6.4 KiB
Vue
250 lines
6.4 KiB
Vue
<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 items-baseline self-stretch">
|
||
<text class="font text">简约风尚</text>
|
||
<text class="font_2 text_2 ml-19">传承非遗之美，简约演绎经典</text>
|
||
</view>
|
||
<text class="self-start font_3 text_3">服装特点</text>
|
||
<view class="flex-col items-start self-stretch group_2">
|
||
<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_3">
|
||
<text class="font_2">专业化妆及基础发型设计</text>
|
||
<text class="mt-2 font_2">服装租赁服务</text>
|
||
<text class="mt-2 font_2">基础摄影服务（不含精修）</text>
|
||
</view>
|
||
<image
|
||
class="image pos"
|
||
src="https://ide.code.fun/api/image?token=6711f04f38a7c1001587de59&name=d6d88e3f45498775df202023e1df0871.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=1c18c9d6f08498ff9a0cf7a598a0d271.png"
|
||
/>
|
||
<view class="ml-10 flex-col flex-1">
|
||
<view class="flex-row justify-end self-stretch group_4">
|
||
<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">彩绣菊花纹刺绣长袍</text>
|
||
<view class="self-stretch group_5">
|
||
<text class="font_7">服装简介：</text>
|
||
<text class="font_6">
|
||
用上等丝绸，质地细腻、柔软且富有光泽，触感极佳。统手工刺绣技艺，每一针每一线都凝聚着匠人的心血与智慧，图案精美绝伦，色彩丰富和谐...
|
||
</text>
|
||
</view>
|
||
<text class="self-end font_8">￥150</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mt-26 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>
|
||
.ml-19 {
|
||
margin-left: 35.63rpx;
|
||
}
|
||
.mt-11 {
|
||
margin-top: 20.63rpx;
|
||
}
|
||
.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: #f3fff3;
|
||
border-radius: 18.75rpx 18.75rpx 0rpx 0rpx;
|
||
}
|
||
.font {
|
||
font-size: 30rpx;
|
||
font-family: Open Sans;
|
||
line-height: 27.71rpx;
|
||
}
|
||
.text {
|
||
color: #323232;
|
||
}
|
||
.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_2 {
|
||
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.36rpx;
|
||
}
|
||
.text_4 {
|
||
margin-top: 26.25rpx;
|
||
line-height: 20.77rpx;
|
||
}
|
||
.group_3 {
|
||
margin-top: 15rpx;
|
||
padding: 0 24.38rpx;
|
||
}
|
||
.image {
|
||
width: 127.5rpx;
|
||
height: 127.5rpx;
|
||
}
|
||
.pos {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 13.13rpx;
|
||
}
|
||
.section_3 {
|
||
padding: 37.5rpx 30rpx 52.5rpx;
|
||
background-color: #fffef8;
|
||
border-radius: 18.75rpx;
|
||
}
|
||
.text_5 {
|
||
color: #000000;
|
||
}
|
||
.list-item {
|
||
padding: 22.5rpx;
|
||
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_4 {
|
||
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 {
|
||
margin-top: 15rpx;
|
||
line-height: 24.23rpx;
|
||
}
|
||
.group_5 {
|
||
margin-top: 11.25rpx;
|
||
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(../../../common/css/global.css);
|
||
</style> |