jiangchengfeiyi-xiaochengxu/pages/booking/respectable/respectable.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="ml-20 font_2 text_2">非遗匠心独运，奢华专属定制</text>
        </view>
        <text class="self-start font_2 text_3">服装特点</text>
        <view class="flex-col items-start self-stretch group_2">
          <text class="font_3">提供限量版或定制款汉服，如宫廷风格龙袍、凤冠霞帔等。</text>
          <text class="mt-2 font_3">服装工艺精湛，面料奢华，适合特殊场合或高端体验。</text>
          <text class="mt-2 font_3">配饰豪华，尽显尊贵气质。</text>
        </view>
        <text class="self-start font_2 text_4">服务内容</text>
        <view class="flex-col items-start self-stretch group_3">
          <text class="font_3">定制化妆及发型设计。</text>
          <text class="mt-2 font_3">服装租赁服务。</text>
          <text class="mt-2 font_3">高端摄影服务（含10张精修照片）。</text>
        </view>
        <image
          class="image pos"
          src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=a708765f6b985078e3f28954b3fe4dcd.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 fuzhuang" :key="index">
            <image
              class="shrink-0 image_3"
              src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=91d23f14317358e61b5b6e64919fcf05.png"
            />
            <view class="flex-col flex-1 ml-11">
              <view class="flex-col self-stretch">
                <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=6714723d38a7c1001587fbb0&name=9975609994c07321ade6a37bb7864447.png"
                  />
                </view>
                <text class="self-start font_5 text_6 mt-3">龙凤呈祥华丽长袍</text>
              </view>
              <view class="mt-4 self-stretch group_5">
                <text class="font_7">服装简介：</text>
                <text class="font_6">
                  这件京剧服饰色彩鲜艳，以红色和绿色为主色调，配以金色和银色的点缀。它使用了传统的云纹、凤凰和其他吉祥图案，这些图案通过精细的刺绣工艺...
                </text>
              </view>
              <text class="mt-4 self-end font_8">￥550</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="mt-40 flex-row section6">
      <view class="flex-col items-center shrink-0 section_4">
        <image
          class="image_4"
          src="https://ide.code.fun/api/image?token=6714723d38a7c1001587fbb0&name=47be6e2fba9a351ce021444d1113200f.png"
        />
        <text class="mt-2 text_8">客服</text>
      </view>
      <view class="flex-col justify-start items-end flex-1 section_5" @click="jump_xuzhi">
        <view class="flex-col justify-start items-center text-wrapper"><text class="text_7">现在去预约</text></view>
      </view>
    </view>
  </view>
</view>
</template>

<script setup>
	import {ref} from 'vue'
	const fuzhuang = ref([null,null,null,null,null,null])
	const jump_xuzhi =()=>{
		uni.navigateTo({
			url: '../../../pages/booking/BillingOfFees/BillingOfFees'
		})
	}
</script>

<style lang="scss" scoped>
.mt-11 {
  margin-top: 20.63rpx;
}
.ml-11 {
  margin-left: 20.63rpx;
}
.mt-3 {
  margin-top: 5.63rpx;
}
.page {
  background-color: #f5f5dc;
  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: #fffdbb;
  border-radius: 18.75rpx 18.75rpx 0rpx 0rpx;
}
.font {
  font-size: 30rpx;
  font-family: Open Sans;
}
.text {
  color: #323232;
  line-height: 27.86rpx;
}
.font_2 {
  font-size: 22.5rpx;
  font-family: Open Sans;
  line-height: 22.5rpx;
  color: #323232;
}
.text_2 {
  color: #898989;
  line-height: 21.36rpx;
}
.text_3 {
  margin-top: 22.5rpx;
  line-height: 20.79rpx;
}
.group_2 {
  margin-top: 15rpx;
  padding: 0 22.5rpx;
}
.font_3 {
  font-size: 22.5rpx;
  font-family: Open Sans;
  line-height: 26.25rpx;
  color: #696969;
}
.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: 18.77rpx;
  bottom: 11.25rpx;
}
.section_3 {
  padding: 37.5rpx 30rpx;
  background-color: #fffef8;
  border-radius: 18.75rpx;
  margin-bottom: 80rpx;
}
.text_5 {
  color: #000000;
  line-height: 27.71rpx;
}
.list-item {
  padding: 22.5rpx 18.75rpx 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_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 {
  line-height: 24.28rpx;
}
.group_5 {
  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;
}
.section6 {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding-bottom: 10rpx;
	background-color: #f5f5dc;
}
	@import url(../../../common/css/global.css);
</style>