192 lines
4.2 KiB
Vue
192 lines
4.2 KiB
Vue
<template>
|
||
<view class="flex-col page">
|
||
<view class="flex-row justify-between group">
|
||
<text class="font text">请选择租赁天数</text>
|
||
<image
|
||
class="image"
|
||
:src="clothesRentUrl + '/component/cha.png'"
|
||
/>
|
||
</view>
|
||
<view class="flex-row items-center group view">
|
||
<image
|
||
class="image_2"
|
||
src="https://ide.code.fun/api/image?token=67dd57af4ae84d00122a84d1&name=ef8fd08c2a91d3833c648cd64691f68d.png"
|
||
/>
|
||
<view class="flex-col items-start flex-1 ml-13">
|
||
<text class="font_2 text_2">淡雅古风衣淡雅古风衣淡雅古风衣淡</text>
|
||
<text class="mt-48 font_2 text_3">￥129.00</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row justify-between items-center group_2 view_2">
|
||
<text class="font">租赁天数</text>
|
||
<view class="flex-row">
|
||
<view class="flex-col justify-start items-center image-wrapper">
|
||
<image
|
||
class="image_3"
|
||
:src="clothesRentUrl + '/component/sub.png'"
|
||
/>
|
||
</view>
|
||
<view class="ml-2 flex-col justify-start items-center text-wrapper"><text class="text_4">2</text></view>
|
||
<view class="ml-2 flex-col justify-start items-center image-wrapper_2">
|
||
<image
|
||
class="image_3"
|
||
:src="clothesRentUrl + '/component/add.png'"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="divider"></view>
|
||
<view class="flex-row justify-between items-start group_2 view_3">
|
||
<view class="flex-col justify-start items-start relative group_3">
|
||
<view class="group_4"></view>
|
||
<text class="font text_5 pos">定金：</text>
|
||
<text class="font text_6 pos_2">￥129.00</text>
|
||
</view>
|
||
<view class="flex-col justify-start items-center text-wrapper_2"><text class="text_7">确定</text></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {ref} from 'vue'
|
||
import { clothesRentUrl } from '../../../common/globalImagesUrl';
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
|
||
.ml-13 {
|
||
margin-left: 24.38rpx;
|
||
}
|
||
.page {
|
||
padding-top: 31.88rpx;
|
||
background-color: #ffffff;
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
height: 100%;
|
||
}
|
||
.group {
|
||
padding: 0 22.5rpx;
|
||
}
|
||
.font {
|
||
font-size: 37.5rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 36.04rpx;
|
||
color: #323232;
|
||
}
|
||
.text {
|
||
margin: 3.75rpx 0;
|
||
line-height: 36.34rpx;
|
||
}
|
||
.image {
|
||
width: 52.5rpx;
|
||
height: 41.25rpx;
|
||
}
|
||
.view {
|
||
margin-top: 35.63rpx;
|
||
}
|
||
.image_2 {
|
||
border-radius: 18.75rpx;
|
||
width: 198.75rpx;
|
||
height: 200.63rpx;
|
||
}
|
||
.font_2 {
|
||
font-size: 33.75rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
color: #323232;
|
||
}
|
||
.text_2 {
|
||
line-height: 41.25rpx;
|
||
width: 369.38rpx;
|
||
}
|
||
.text_3 {
|
||
margin-left: 7.5rpx;
|
||
line-height: 22.54rpx;
|
||
}
|
||
.group_2 {
|
||
padding: 0 26.25rpx;
|
||
}
|
||
.view_2 {
|
||
margin-top: 60rpx;
|
||
}
|
||
.image-wrapper {
|
||
padding: 11.25rpx 0;
|
||
background-color: #fbdedf;
|
||
border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
|
||
width: 48.06rpx;
|
||
height: 51.04rpx;
|
||
}
|
||
.image_3 {
|
||
width: 28.13rpx;
|
||
height: 30rpx;
|
||
}
|
||
.text-wrapper {
|
||
padding: 18.25rpx 0 18.75rpx;
|
||
background-color: #fbdedf;
|
||
width: 62.06rpx;
|
||
height: 51.04rpx;
|
||
}
|
||
.text_4 {
|
||
color: #323232b3;
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 19.01rpx;
|
||
}
|
||
.image-wrapper_2 {
|
||
padding: 11.25rpx 0;
|
||
background-color: #fbdedf;
|
||
border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
|
||
width: 48.06rpx;
|
||
height: 51.04rpx;
|
||
}
|
||
.divider {
|
||
margin-top: 30rpx;
|
||
background-color: #0000001f;
|
||
height: 1.88rpx;
|
||
}
|
||
.view_3 {
|
||
margin-top: 37.5rpx;
|
||
}
|
||
.group_3 {
|
||
margin-top: 18.75rpx;
|
||
width: 254.23rpx;
|
||
}
|
||
.group_4 {
|
||
margin-left: 22.5rpx;
|
||
border-radius: 9.38rpx 9.38rpx 0 0;
|
||
width: 123.75rpx;
|
||
height: 89.06rpx;
|
||
}
|
||
.text_5 {
|
||
line-height: 34.42rpx;
|
||
}
|
||
.pos {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 2.46rpx;
|
||
}
|
||
.text_6 {
|
||
color: #c35c5d;
|
||
line-height: 25.05rpx;
|
||
}
|
||
.pos_2 {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 9.17rpx;
|
||
}
|
||
.text-wrapper_2 {
|
||
padding: 22.5rpx 0;
|
||
background-color: #e79ea1;
|
||
border-radius: 187.5rpx;
|
||
width: 241.88rpx;
|
||
height: 76.88rpx;
|
||
}
|
||
.text_7 {
|
||
color: #ffffff;
|
||
font-size: 30rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 28.01rpx;
|
||
}
|
||
@import url(../../../common/css/global.css);
|
||
</style> |