jiangchengfeiyi-xiaochengxu/pages/booking/respectable/respectable.vue

<template>
<view class="flex-col page">
  <view class="flex-col justify-start items-start relative group">
    <view class="section"></view>
    <text class="font text pos">填写预约信息</text>
    <view class="flex-col section_2 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=672dbef4c471750012de4bf6&name=8bde7b2f7a6da1a009b89295a48cc8ec.png"
          />
          <text class="font_2 text_2 ml-7">联系人：张三</text>
          <text class="font_2 text_3 ml-7">15888610253</text>
        </view>
        <image
          class="image_2"
          src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=10d9d3f5abdae8518f3c6c3fa1bbb544.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=672dbef4c471750012de4bf6&name=c6dac3074d9c4e4d6286c07f0ea03db5.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=672dbef4c471750012de4bf6&name=10d9d3f5abdae8518f3c6c3fa1bbb544.png"
        />
      </view>
    </view>
  </view>
  <view class="flex-col group_4">
    <text class="self-start font text_4">选择预约类别</text>
    <view class="mt-14 flex-col justify-start self-stretch section_3">
      <view class="flex-row equal-division">
        <view class="flex-col items-center section_4 equal-division-item">
          <image
            class="image_3"
            src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=8d7c72d7541acde36f72d77b0e869448.png"
          />
          <text class="mt-2 font_4 text_5">整套约拍</text>
        </view>
        <view class="flex-col items-center section_5 equal-division-item ml-23">
          <image
            class="image_3"
            src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=0f93b11d2804338440c616b1c69df87b.png"
          />
          <text class="mt-2 font_4">自带服装</text>
          <view class="mt-2 section_6 pos_3"></view>
        </view>
      </view>
    </view>
  </view>
  <view class="flex-col section_7">
    <view class="flex-col group_5">
      <text class="self-start font text_6">选择服装价位</text>
      <view class="flex-row items-center self-stretch section_8 view">
        <view class="flex-row items-center flex-1">
          <image
            class="shrink-0 image_4"
            src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=c58ffae9f1ef4340291223163c7a8297.png"
          />
          <view class="flex-col flex-1 ml-13">
            <text class="self-start font_2 text_7">简约风尚</text>
            <view class="flex-row items-baseline self-stretch mt-11">
              <text class="font_2">价位：</text>
              <text class="font_6 text_8 ml-1">￥100-200</text>
            </view>
            <text class="self-stretch font_7 text_9 mt-11">传承非遗之美，简约演绎经典</text>
          </view>
        </view>
        <view class="flex-row shrink-0 ml-21">
          <view class="flex-col justify-start items-center button"><text class="font_5">选择</text></view>
          <image
            class="ml-8 image_5"
            src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=7d16fc8dfa328fc97ff273ebeab9bc18.png"
          />
        </view>
      </view>
      <view class="flex-row justify-between items-center self-stretch section_8">
        <image
          class="image_4"
          src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=bc0e955304da0a2ccafe3a66ac1f3aca.png"
        />
        <view class="flex-col">
          <text class="self-start font_2 text_10">时尚精选</text>
          <view class="flex-row items-baseline self-stretch mt-11">
            <text class="font_2">价位：</text>
            <text class="font_6 text_12 ml-1">￥200-400</text>
          </view>
          <text class="self-stretch font_7 text_13 mt-11">融合时尚与传统，精选非遗华章</text>
        </view>
        <view class="flex-col justify-start items-center text-wrapper"><text class="font_5 text_11">已选</text></view>
        <image
          class="image_5"
          src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=7d16fc8dfa328fc97ff273ebeab9bc18.png"
        />
      </view>
      <view class="flex-row items-center self-stretch section_8">
        <view class="flex-row items-center flex-1">
          <image
            class="shrink-0 image_6"
            src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=4c1c758fda92536b923ec745cb077f5a.png"
          />
          <view class="flex-col flex-1 ml-13">
            <text class="self-start font_2 text_14">奢华专属</text>
            <view class="flex-row items-baseline self-stretch mt-11">
              <text class="font_2">价位：</text>
              <text class="font_6 text_8 ml-1">￥400-800</text>
            </view>
            <text class="self-stretch font_7 text_9 mt-11">非遗匠心独运，奢华专属定制</text>
          </view>
        </view>
        <view class="flex-row shrink-0 ml-21">
          <view class="flex-col justify-start items-center button"><text class="font_5">选择</text></view>
          <image
            class="ml-8 image_5"
            src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=7d16fc8dfa328fc97ff273ebeab9bc18.png"
          />
        </view>
      </view>
    </view>
    <view class="flex-col">
      <view class="divider"></view>
      <view class="flex-col group_6">
        <view class="flex-col">
          <text class="self-start font text_15">选择拍摄场景</text>
          <view class="flex-row self-stretch mt-15">
            <view class="flex-row justify-center items-center section_9">
              <image
                class="image_7"
                src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=c1648e930bd0a16582101342bc977e3f.png"
              />
              <text class="ml-16 font_8 text_16">室内</text>
              <view class="ml-16 section_10"></view>
            </view>
            <view class="flex-row justify-center items-center section_9 ml-23">
              <image
                class="image_7"
                src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=fdab8bc2c0e97484b59f998d8623f890.png"
              />
              <text class="ml-16 font_8 text_17">室外</text>
              <view class="ml-16 section_10"></view>
            </view>
          </view>
        </view>
        <view class="mt-26 flex-row justify-center items-center">
          <image
            class="badge"
            src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=18dd2fa44538df4392850f46b9b3550e.png"
          />
          <text class="ml-4 font_7 text_18">预约须知</text>
        </view>
      </view>
    </view>
  </view>
  <view class="flex-row justify-between items-center section_11">
    <view class="flex-row items-center group_7">
      <view class="flex-col justify-start items-start shrink-0 relative">
        <text class="font_8">定金：</text>
        <image
          class="image_2 pos_4"
          src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=3393d3563afcfe7dedbadba1ea5328a0.png"
        />
      </view>
      <text class="font_6 text_19">88.</text>
      <text class="text_21">00</text>
    </view>
    <view class="flex-row items-center">
      <view class="flex-row button_3">
        <text class="text_22">费用说明</text>
        <image
          class="shrink-0 image_8 ml-3"
          src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=0455b173571a47fdc438588e788f26c5.png"
        />
      </view>
      <view class="ml-10 flex-col justify-start items-center button_2">
        <text class="font_4 text_20">确定预约</text>
      </view>
    </view>
  </view>
</view>
</template>

<script setup>
import { ref } from 'vue';
	
	const Whole = ref([
		tab:'选择服装价位'
		{
			img:'',
		    name:'简约风尚',
			price:'100-200',
			title:'传承非遗之美，简约演绎经典'
		},
		{
			img:'',
			name:'时尚精选',
			price:'200-400',
			title:'融合时尚与传统，精选非遗划账'
		},
		{
			img:'',
			name:'奢华专属',
			price:'400-800',
			title:'非遗匠心独运，奢华专属定制'
		}
	])
const own=ref([
	tab:'选择服务'
	{
		img:'',
	    name:'妆发预约',
		price:'20',
		title:'包括底妆，眉毛，眼妆，腮红和唇妆，根据您的肤色和服装风格进行个性化设计'
	},
	{
		img:'',
	    name:'摄影服务',
		price:'15',
		title:'提供专业的摄影棚和灯光设备，为客户打造舒适的拍摄环境'
	},
])
</script>

<style lang="scss" scoped>
.ml-7 {
  margin-left: 13.13rpx;
}
.ml-9 {
  margin-left: 16.88rpx;
}
.ml-13 {
  margin-left: 24.38rpx;
}
.ml-21 {
  margin-left: 39.38rpx;
}
.ml-1 {
  margin-left: 1.88rpx;
}
.mt-15 {
  margin-top: 28.13rpx;
}
.ml-23 {
  margin-left: 43.13rpx;
}
.mt-11 {
  margin-top: 20.63rpx;
}
.ml-3 {
  margin-left: 5.63rpx;
}
.page {
  padding-top: 45rpx;
  background-color: #f5f5dc;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group {
  padding-top: 11.25rpx;
}
.section {
  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: 27.75rpx;
  color: #323232;
}
.text {
  line-height: 27.96rpx;
}
.pos {
  position: absolute;
  left: 21.62rpx;
  top: 0;
}
.section_2 {
  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: 24.3rpx;
  color: #323232;
}
.text_2 {
  line-height: 24rpx;
}
.text_3 {
  line-height: 24rpx;
}
.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_4 {
  line-height: 27.69rpx;
}
.section_3 {
  padding: 31.88rpx 0;
  background-color: #fffef8;
  border-radius: 18.75rpx;
}
.equal-division {
  margin: 0 41.25rpx;
}
.section_4 {
  flex: 1 1 281.25rpx;
}
.image_3 {
  width: 192rpx;
  height: 192rpx;
}
.font_4 {
  font-size: 30rpx;
  font-family: Inter;
  line-height: 27.75rpx;
  color: #323232;
}
.text_5 {
  line-height: 27.99rpx;
}
.section_5 {
  position: relative;
  flex: 1 1 281.25rpx;
}
.equal-division-item {
  padding: 15rpx 0 41.25rpx;
  background-color: #fff291;
  border-radius: 18.75rpx;
  height: 281.25rpx;
}
.section_6 {
  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;
}
.section_7 {
  margin-top: 30rpx;
  padding-bottom: 46.88rpx;
  background-color: #fff3c3;
}
.group_5 {
  padding: 30rpx 30rpx 37.5rpx;
}
.text_6 {
  line-height: 27.86rpx;
}
.section_8 {
  margin-top: 16.88rpx;
  padding: 26.25rpx 26.25rpx 26.25rpx 39.38rpx;
  background-color: #fffef8;
  border-radius: 18.75rpx;
}
.view {
  margin-top: 41.25rpx;
}
.image_4 {
  border-radius: 9.38rpx;
  width: 118.13rpx;
  height: 151.88rpx;
}
.text_7 {
  line-height: 24.26rpx;
}
.font_6 {
  font-size: 33.75rpx;
  font-family: Open Sans;
  line-height: 24.3rpx;
  color: #ff3c3c;
}
.text_8 {
  line-height: 24.81rpx;
}
.button {
  padding: 7.5rpx 0;
  background-color: #fbb612;
  border-radius: 9.38rpx;
  width: 75rpx;
  height: 37.5rpx;
}
.font_5 {
  font-size: 22.5rpx;
  font-family: Open Sans;
  line-height: 20.72rpx;
  color: #ffffff;
}
.image_5 {
  width: 37.5rpx;
  height: 37.5rpx;
}
.text_10 {
  line-height: 24.15rpx;
}
.text_12 {
  line-height: 24.81rpx;
}
.text-wrapper {
  padding: 7.5rpx 0;
  background-color: #d9d9d9;
  border-radius: 9.38rpx;
  width: 75rpx;
  height: 37.5rpx;
}
.text_11 {
  line-height: 20.61rpx;
}
.image_6 {
  width: 118.13rpx;
  height: 151.88rpx;
}
.text_14 {
  line-height: 24.23rpx;
}
.divider {
  margin: 0 22.5rpx;
  background-color: #ff8550;
  height: 1.88rpx;
}
.group_6 {
  padding: 22.5rpx 30rpx 0;
}
.text_15 {
  line-height: 27.64rpx;
}
.section_9 {
  flex: 1 1 322.5rpx;
  padding: 26.25rpx 0;
  background-color: #fffef8;
  border-radius: 18.75rpx;
  height: 153.75rpx;
}
.image_7 {
  border-radius: 9.38rpx;
  width: 123.75rpx;
  height: 101.25rpx;
}
.font_8 {
  font-size: 26.25rpx;
  font-family: Inter;
  line-height: 24.3rpx;
  color: #000000;
}
.text_16 {
  line-height: 24.21rpx;
}
.section_10 {
  background-color: #ffffff;
  border-radius: 50%;
  width: 33.75rpx;
  height: 33.75rpx;
  border-left: solid 1.88rpx #c4c4c4;
  border-right: solid 1.88rpx #c4c4c4;
  border-top: solid 1.88rpx #c4c4c4;
  border-bottom: solid 1.88rpx #c4c4c4;
}
.text_17 {
  line-height: 24.09rpx;
}
.badge {
  width: 28.13rpx;
  height: 28.13rpx;
}
.font_7 {
  font-size: 22.5rpx;
  font-family: Open Sans;
  line-height: 20.72rpx;
  color: #8a8a8a;
}
.text_13 {
  line-height: 21.38rpx;
}
.text_9 {
  line-height: 21.36rpx;
}
.text_18 {
  color: #000000;
  line-height: 20.77rpx;
}
.section_11 {
  margin-top: 48.75rpx;
  padding: 15rpx 22.5rpx;
  background-color: #fffef8;
}
.group_7 {
  width: 180.06rpx;
}
.pos_4 {
  position: absolute;
  right: 0;
  bottom: 0;
}
.text_19 {
  color: #fbb612;
  font-weight: 700;
  line-height: 24.84rpx;
}
.text_21 {
  color: #fbb612;
  font-size: 26.25rpx;
  font-family: Open Sans;
  font-weight: 700;
  line-height: 19.29rpx;
}
.button_3 {
  padding: 9.38rpx 11.25rpx;
  background-color: #d9d9d9;
  border-radius: 9.38rpx;
  height: 37.5rpx;
}
.text_22 {
  color: #323232;
  font-size: 18.75rpx;
  font-family: Inter;
  line-height: 17.36rpx;
}
.image_8 {
  width: 18.75rpx;
  height: 18.75rpx;
}
.button_2 {
  padding: 26.25rpx 0;
  background-color: #fbb612;
  border-radius: 75rpx;
  width: 238.13rpx;
  height: 82.5rpx;
}
.text_20 {
  color: #ffffff;
}
@import url(/common/css/global.css);
</style>