<template>
	<view class="flex-col justify-start relative page" :style="{ backgroundImage: 'url(' + bkgUrl + ')'}">
	  <image
	    class="image pos"
	    src="https://ide.code.fun/api/image?token=67dd8f7cdefdb1001119a623&name=06dd963dd45f6b4d3acf6fa059cd0ec6.png"
	  />
	  <view class="flex-col items-start section_2 pos_2">
	    <text class="font text">汉服—曲裾系列</text>
	    <text class="mt-20 font text_2">￥129/天</text>
	  </view>
	  <view class="section_3 pos_3"></view>
	  <view class="flex-col justify-start items-center section_4 pos_4">
	    <view class="flex-col justify-start items-center text-wrapper"><text class="text_3">立即租赁</text></view>
	  </view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import { bookUrl } from '../../../common/globalImagesUrl';
	const bkgUrl = ref(bookUrl + '/myPhotoProductDetail/bkg.png')
</script>

<style scoped lang="scss">
.page {
  background-color: #ffffff;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
}
.image {
  width: 100vw;
  height: 106vw;
}
.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.section_2 {
  padding: 37.5rpx 52.5rpx 45rpx;
  background-color: #ffffff;
  border-radius: 18.75rpx;
  box-shadow: 11.25rpx 11.25rpx 11.25rpx #00000026;
}
.pos_2 {
  position: absolute;
  left: 18.75rpx;
  right: 18.77rpx;
  top: 750rpx;
}
.font {
  font-size: 45rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  color: #323232;
}
.text {
  line-height: 43.76rpx;
}
.text_2 {
  line-height: 33.22rpx;
}
.section_3 {
  background-color: #ffffff;
  border-radius: 18.75rpx;
  width: 712.5rpx;
  height: 913.13rpx;
}
.pos_3 {
  margin: 984.38rpx 18.75rpx 200rpx;
}
.section_4 {
  padding: 24.38rpx 0 16.88rpx;
  background-color: #ffffff;
}
.pos_4 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.text-wrapper {
  padding: 26.25rpx 0;
  background-color: #e79ea1;
  border-radius: 187.5rpx;
  width: 573.75rpx;
}
.text_3 {
  color: #ffffff;
  font-size: 30rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 28.84rpx;
}
@import url(../../../common/css/global.css);
</style>
