444 lines
11 KiB
Vue
444 lines
11 KiB
Vue
<template>
|
||
<view class="flex-col justify-start page">
|
||
<view class="flex-col section">
|
||
<view class="flex-col justify-start items-start relative group">
|
||
<view class="section_2"></view>
|
||
<text class="font text pos">填写预约信息</text>
|
||
<view class="flex-col section_3 pos_2">
|
||
<view class="flex-row justify-between items-center group_2">
|
||
<view class="flex-row items-center">
|
||
<image
|
||
class="shrink-0 image"
|
||
src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=bb513bb96b7e8c5705f06c4bfc640618.png"
|
||
/>
|
||
<text class="font_2 ml-7">联系人：张三</text>
|
||
<text class="font_2 ml-7">15888610253</text>
|
||
</view>
|
||
<image
|
||
class="image_2"
|
||
src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=6a472e2ad5dc2aec534bd3b852a38986.png"
|
||
/>
|
||
</view>
|
||
<view class="flex-row justify-between items-center group_3">
|
||
<view class="flex-row items-center">
|
||
<image
|
||
class="image"
|
||
src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=62c3ebe2e0dfac0ba2ddec26fdcb54ec.png"
|
||
/>
|
||
<view class="flex-col items-start ml-9">
|
||
<text class="font_3">到店日期：2024-10-15</text>
|
||
<text class="mt-2 font_3">具体场次：上午场（09:30-12:00）</text>
|
||
</view>
|
||
</view>
|
||
<image
|
||
class="image_2"
|
||
src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=6a472e2ad5dc2aec534bd3b852a38986.png"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col group_4">
|
||
<view class="flex-col self-stretch">
|
||
<text class="self-start font text_2">选择预约类别</text>
|
||
<view class="mt-14 flex-col justify-start self-stretch section_4">
|
||
<view class="flex-row equal-division">
|
||
<view class="flex-col items-center section_5 equal-division-item">
|
||
<image
|
||
class="image_3"
|
||
src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=b5db39327852641a550d033d1026764f.png"
|
||
/>
|
||
<text class="font_4 text_3 mt-11">租赁服装</text>
|
||
</view>
|
||
<view class="flex-col items-center section_6 equal-division-item ml-23">
|
||
<image
|
||
class="image_3"
|
||
src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=ee3cc136b2309fda20df9a345ce1ef05.png"
|
||
/>
|
||
<text class="font_4 text_3 text_4">自带服装</text>
|
||
<view class="section_7 pos_3"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<text class="self-start font text_5 mt-23">提供免费的服务</text>
|
||
</view>
|
||
<view class="flex-col section_8">
|
||
<view class="flex-row items-center section_9">
|
||
<image
|
||
class="shrink-0 image_4"
|
||
src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=0ee5b9f55ce6aef46d889234d99afe33.png"
|
||
/>
|
||
<view class="flex-col flex-1 ml-7">
|
||
<text class="self-start font_2 text_6">妆发服务</text>
|
||
<text class="mt-6 self-stretch font_5">
|
||
包括底妆、眉毛、眼妆、腮红和唇妆，根据您的肤色和服装风格进行个性化设计。
|
||
</text>
|
||
<text class="mt-6 self-stretch font_5">
|
||
根据您的脸型和服装风格，提供合适的发型设计，包括但不限于编发、盘发、吹风造型等。
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row items-center section_10">
|
||
<image
|
||
class="shrink-0 image_4"
|
||
src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=e853d682e2b7bbba7c02051808f75a0b.png"
|
||
/>
|
||
<view class="flex-col flex-1 ml-7">
|
||
<text class="self-start font_2 text_7">摄影服务</text>
|
||
<text class="mt-6 self-stretch font_5">
|
||
提供专业的摄影棚和灯光设备，为客户打造舒适的拍摄环境。
|
||
<br />
|
||
</text>
|
||
<text class="mt-6 self-stretch font_5">
|
||
拍摄完成后，摄影师将精选照片进行后期处理，包括色彩调整、亮度优化、瑕疵去除等。
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="divider"></view>
|
||
<view class="flex-row section_11">
|
||
<image
|
||
class="shrink-0 self-center image_5"
|
||
src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=ca917a0e9fb6b228f113a8850988a754.png"
|
||
/>
|
||
<view class="flex-col shrink-0 self-start group_5">
|
||
<text class="self-start font_2 text_8">联系客服</text>
|
||
<text class="mt-10 self-stretch font_5">请提供详细的问题描述，以便我们更快地为您解决问题。</text>
|
||
</view>
|
||
<image
|
||
class="shrink-0 self-center image image_6"
|
||
src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=a36c51a83d47fe9c04ecc0b3af4443ad.png"
|
||
/>
|
||
</view>
|
||
<view class="flex-row justify-center items-center group_6">
|
||
<image
|
||
class="image_7"
|
||
src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=7857ecaca482cebbdd382382920634a0.png"
|
||
/>
|
||
<text class="ml-4 font_5 text_9">预约须知</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row items-center section_12">
|
||
<view class="flex-row items-center shrink-0 group_7">
|
||
<view class="flex-col justify-start items-start shrink-0 relative">
|
||
<text class="text_10">预约费用：</text>
|
||
</view>
|
||
<text class="text_11">￥88.</text>
|
||
<text class="text_13">00</text>
|
||
</view>
|
||
<view class="flex-row items-center flex-1 ml-51">
|
||
<view class="flex-row shrink-0 section_13">
|
||
<text class="text_14">费用说明</text>
|
||
<image
|
||
class="shrink-0 image_8 ml-3"
|
||
src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=1a5714d6e445a76940d6217416bffd25.png"
|
||
/>
|
||
</view>
|
||
<view class="ml-10 flex-col justify-start items-center flex-1 text-wrapper">
|
||
<text class="font_4 text_12">确定预约</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.ml-7 {
|
||
margin-left: 13.13rpx;
|
||
}
|
||
.ml-9 {
|
||
margin-left: 16.88rpx;
|
||
}
|
||
.mt-11 {
|
||
margin-top: 20.63rpx;
|
||
}
|
||
.ml-23 {
|
||
margin-left: 43.13rpx;
|
||
}
|
||
.mt-23 {
|
||
margin-top: 43.13rpx;
|
||
}
|
||
.ml-51 {
|
||
margin-left: 95.63rpx;
|
||
}
|
||
.ml-3 {
|
||
margin-left: 5.63rpx;
|
||
}
|
||
.page {
|
||
background-color: #ffffff;
|
||
height: 100%;
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
}
|
||
.section {
|
||
padding-top: 45rpx;
|
||
background-color: #f5f5dc;
|
||
}
|
||
.group {
|
||
padding-top: 11.25rpx;
|
||
}
|
||
.section_2 {
|
||
margin-left: 71.25rpx;
|
||
background-color: #ffffff00;
|
||
border-radius: 18.75rpx;
|
||
width: 281.25rpx;
|
||
height: 281.25rpx;
|
||
}
|
||
.font {
|
||
font-size: 30rpx;
|
||
font-family: Open Sans;
|
||
line-height: 26.25rpx;
|
||
color: #323232;
|
||
}
|
||
.text {
|
||
line-height: 27.96rpx;
|
||
}
|
||
.pos {
|
||
position: absolute;
|
||
left: 21.62rpx;
|
||
top: 0;
|
||
}
|
||
.section_3 {
|
||
padding-left: 33.75rpx;
|
||
padding-right: 28.13rpx;
|
||
background-color: #fffef8;
|
||
border-radius: 18.75rpx;
|
||
}
|
||
.pos_2 {
|
||
position: absolute;
|
||
left: 20.63rpx;
|
||
right: 20.63rpx;
|
||
top: 53.63rpx;
|
||
}
|
||
.group_2 {
|
||
padding: 31.88rpx 0 15rpx;
|
||
border-bottom: solid 1.88rpx #e2e0e0;
|
||
}
|
||
.image {
|
||
width: 43.13rpx;
|
||
height: 43.13rpx;
|
||
}
|
||
.font_2 {
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 24rpx;
|
||
color: #323232;
|
||
}
|
||
.image_2 {
|
||
width: 33.75rpx;
|
||
height: 33.75rpx;
|
||
}
|
||
.group_3 {
|
||
padding: 22.5rpx 0 37.5rpx;
|
||
}
|
||
.font_3 {
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 31.88rpx;
|
||
color: #323232;
|
||
}
|
||
.group_4 {
|
||
margin-top: 26.25rpx;
|
||
padding: 0 30rpx;
|
||
}
|
||
.text_2 {
|
||
line-height: 27.69rpx;
|
||
}
|
||
.section_4 {
|
||
padding: 31.88rpx 0;
|
||
background-color: #fffef8;
|
||
border-radius: 18.75rpx;
|
||
}
|
||
.equal-division {
|
||
margin: 0 41.25rpx;
|
||
}
|
||
.section_5 {
|
||
flex: 1 1 281.25rpx;
|
||
}
|
||
.image_3 {
|
||
width: 159.99rpx;
|
||
height: 159.99rpx;
|
||
}
|
||
.font_4 {
|
||
font-size: 30rpx;
|
||
font-family: Inter;
|
||
line-height: 26.25rpx;
|
||
color: #323232;
|
||
}
|
||
.text_3 {
|
||
line-height: 27.75rpx;
|
||
}
|
||
.section_6 {
|
||
position: relative;
|
||
flex: 1 1 281.25rpx;
|
||
}
|
||
.equal-division-item {
|
||
padding: 30rpx 0 41.25rpx;
|
||
background-color: #fff291;
|
||
border-radius: 18.75rpx;
|
||
height: 281.25rpx;
|
||
}
|
||
.text_4 {
|
||
margin-top: 18.75rpx;
|
||
}
|
||
.section_7 {
|
||
background-color: #ffffff99;
|
||
border-radius: 18.75rpx;
|
||
width: 281.25rpx;
|
||
height: 281.25rpx;
|
||
}
|
||
.pos_3 {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
.text_5 {
|
||
line-height: 27.79rpx;
|
||
}
|
||
.section_8 {
|
||
margin: 26.25rpx 0 100rpx 0;
|
||
|
||
padding: 28.13rpx 24.38rpx 0;
|
||
background-color: #fff3c3;
|
||
}
|
||
.section_9 {
|
||
margin: 0 7.5rpx;
|
||
padding: 33.75rpx 30rpx 26.25rpx;
|
||
background-color: #fffef8;
|
||
border-radius: 18.75rpx;
|
||
}
|
||
.image_4 {
|
||
border-radius: 9.38rpx;
|
||
width: 129.38rpx;
|
||
height: 166.88rpx;
|
||
}
|
||
.text_6 {
|
||
line-height: 24.3rpx;
|
||
}
|
||
.section_10 {
|
||
margin: 18.75rpx 7.5rpx 0;
|
||
padding: 30rpx;
|
||
background-color: #fffef8;
|
||
border-radius: 18.75rpx;
|
||
}
|
||
.text_7 {
|
||
line-height: 24.23rpx;
|
||
}
|
||
.divider {
|
||
margin-top: 39.38rpx;
|
||
background-color: #e3e3e3;
|
||
height: 1.88rpx;
|
||
}
|
||
.section_11 {
|
||
margin: 31.88rpx 7.5rpx 0;
|
||
padding: 15rpx 26.25rpx;
|
||
background-color: #fffef8;
|
||
border-radius: 18.75rpx;
|
||
}
|
||
.image_5 {
|
||
border-radius: 9.38rpx;
|
||
width: 93.75rpx;
|
||
height: 118.13rpx;
|
||
}
|
||
.group_5 {
|
||
margin-left: 22.5rpx;
|
||
margin-top: 15rpx;
|
||
width: 405rpx;
|
||
}
|
||
.text_8 {
|
||
line-height: 24.36rpx;
|
||
}
|
||
.image_6 {
|
||
margin-left: 48.75rpx;
|
||
}
|
||
.group_6 {
|
||
margin-top: 37.5rpx;
|
||
padding: 22.5rpx 0;
|
||
}
|
||
.image_7 {
|
||
width: 28.13rpx;
|
||
height: 28.13rpx;
|
||
}
|
||
.font_5 {
|
||
font-size: 22.5rpx;
|
||
font-family: Open Sans;
|
||
line-height: 26.25rpx;
|
||
color: #898989;
|
||
}
|
||
.text_9 {
|
||
color: #000000;
|
||
line-height: 20.77rpx;
|
||
}
|
||
.section_12 {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 15rpx 22.5rpx;
|
||
background-color: #fffef8;
|
||
}
|
||
.group_7 {
|
||
width: 236.23rpx;
|
||
}
|
||
.text_10 {
|
||
color: #000000;
|
||
font-size: 26.25rpx;
|
||
font-family: Inter;
|
||
line-height: 24.28rpx;
|
||
}
|
||
.pos_4 {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
}
|
||
.text_11 {
|
||
color: #fbb612;
|
||
font-size: 33.75rpx;
|
||
font-family: Open Sans;
|
||
font-weight: 700;
|
||
line-height: 24.84rpx;
|
||
}
|
||
.text_13 {
|
||
color: #fbb612;
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
font-weight: 700;
|
||
line-height: 19.29rpx;
|
||
}
|
||
.section_13 {
|
||
padding: 9.38rpx 11.25rpx;
|
||
background-color: #d9d9d9;
|
||
border-radius: 9.38rpx;
|
||
height: 37.5rpx;
|
||
}
|
||
.text_14 {
|
||
color: #323232;
|
||
font-size: 18.75rpx;
|
||
font-family: Inter;
|
||
line-height: 17.36rpx;
|
||
}
|
||
.image_8 {
|
||
width: 18.75rpx;
|
||
height: 18.75rpx;
|
||
}
|
||
.text-wrapper {
|
||
padding: 26.25rpx 0;
|
||
background-color: #fbb612;
|
||
border-radius: 75rpx;
|
||
height: 82.5rpx;
|
||
}
|
||
.text_12 {
|
||
color: #ffffff;
|
||
line-height: 27.75rpx;
|
||
}
|
||
@import url(../../../common/css/global.css);
|
||
</style>
|