Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
9a7de063 1 parent d67276b1

确认订单页样式优化显示

Inline Side-by-side
Showing 3 changed files with 188 additions and 72 deletions
......@@ -18,7 +18,6 @@ declare module '@vue/runtime-core' {
NutCalendar: typeof import('@nutui/nutui-taro')['Calendar']
NutCol: typeof import('@nutui/nutui-taro')['Col']
NutConfigProvider: typeof import('@nutui/nutui-taro')['ConfigProvider']
NutCountdown: typeof import('@nutui/nutui-taro')['Countdown']
NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview']
NutInput: typeof import('@nutui/nutui-taro')['Input']
NutInputNumber: typeof import('@nutui/nutui-taro')['InputNumber']
......
.calendar-select-page {
margin: 1rem;
background-color: #f6ece1;
border-radius: 0.5rem;
padding: 1rem 0;
padding-left: 0.5rem;
}
.confirm-form {
padding-right: 1rem;
.form-text {
position: relative;
width: 100%;
padding: 20rpx 30rpx;
padding-right: 0;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
line-height: 40rpx;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 27rpx;
}
.nut-input {
padding: 20rpx;
}
.nut-input-text {
border-radius: 10rpx;
}
.nut-textarea {
border-radius: 10rpx;
padding: 20rpx;
.confirm-page {
.book-info-desc {
padding: 1rem;
}
.book-count-desc {
padding: 0 1rem;
}
.calendar-select-desc {
margin: 1rem;
background-color: #f6ece1;
border-radius: 0.5rem;
padding: 1rem 0;
padding-left: 0.5rem;
.calendar-select-left,
.calendar-select-right {
.text {
color: #7d7c7c;
font-size: 0.8rem;
}
.date {
color: #6a4925;
font-size: 0.85rem;
font-weight: bold;
}
}
.calendar-select-center {
view {
color: #6a4925;
margin-top: 15%;
font-size: 0.8rem;
text-align: center;
background-color: #fff;
padding: 0.25rem 0;
border-radius: 0.5rem;
}
}
}
.calendar-select-info {
padding: 0 1rem 1rem;
.check-in-text {
color: #060606;
font-size: 0.85rem;
}
.check-in-time {
color: #010101;
font-size: 0.85rem;
font-weight: bold;
text-align: right;
}
.check-out-text {
color: #060606;
font-size: 0.85rem;
margin: 0.25rem 0;
}
.check-out-time {
color: #010101;
font-size: 0.85rem;
font-weight: bold;
text-align: right;
margin: 0.25rem 0;
}
.meal-text {
color: #060606;
font-size: 0.85rem;
}
.meal-count {
color: #010101;
font-size: 0.85rem;
font-weight: bold;
text-align: right;
}
.tip {
font-size: 0.85rem;
margin-top: 0.25rem;
.tip-red {
color: red;
margin: auto;
display: inline-block;
margin-right: 10rpx;
}
.tip-text {
color: #6a4925;
margin: auto;
display: inline-block;
}
}
}
.space-line {
height: 1rem;
background-color: #f6f6f6;
}
.select-user {
text-align: center;
padding: 1rem 0;
}
.confirm-form {
padding-right: 1rem;
.form-text {
position: relative;
width: 100%;
padding: 20rpx 30rpx;
padding-right: 0;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
line-height: 40rpx;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 27rpx;
&.required::before {
content: "*";
color: red;
margin-right: 0.1rem;
display: inline-block;
}
}
.form-input {
border: 1px solid #dedede;
border-radius: 10rpx;
}
.nut-input {
padding: 20rpx;
}
.nut-input-text {
border-radius: 10rpx;
}
.nut-textarea {
border-radius: 10rpx;
padding: 20rpx;
}
}
.confirm-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
height: 4rem;
padding: 30rpx 30rpx 20rpx 30rpx;
box-shadow: 0px -5px 4px 0px rgba(0, 0, 0, 0.07);
.price {
height: 2rem; margin-left: 0.5rem; display: flex; align-items: center;
.price-text-left {
color: #EB2E2E; font-size: 1.3rem; font-weight: bold;
}
.price-text-right {
color: #7D7C7C; text-decoration: line-through; font-size: 0.85rem; margin-left: 5px;
}
}
.confirm-btn {
background-color: #6A4925; border-radius: 1.25rem; padding: 0.25rem 0.5rem; color: #fff; text-align: center; height: 2rem; line-height: 2rem;
}
}
}
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-19 16:55:06
* @LastEditTime: 2023-12-20 13:35:22
* @FilePath: /meihuaApp/src/pages/confirm/index.vue
* @Description: 文件描述
* @Description: 确认订单页面
-->
<template>
<view>
<view style="padding: 1rem;">
<view class="confirm-page">
<view class="book-info-desc">
<nut-row>
<nut-col :span="16">
<view style="font-weight: bold; color: #0B0B0B; font-size: 1.15rem;">非凡魅力豪华总统套房</view>
......@@ -18,7 +18,7 @@
</nut-col>
</nut-row>
</view>
<view style="padding: 0 1rem;">
<view class="book-count-desc">
<nut-row>
<nut-col :span="16">
<view style="font-weight: bold; color: #0B0B0B; font-size: 1rem;">预定房间数</view>
......@@ -28,54 +28,53 @@
</nut-col>
</nut-row>
</view>
<view class="calendar-select-page">
<view class="calendar-select-desc">
<nut-row gutter="10">
<nut-col span="9">
<view style="color: #7D7C7C; font-size: 0.8rem;">入住日期</view>
<view style="color: #6A4925; font-size: 0.85rem; font-weight: bold;">2023.12.07 星期四</view>
<nut-col span="9" class="calendar-select-left">
<view class="text">入住日期</view>
<view class="date">2023.12.07 星期四</view>
</nut-col>
<nut-col span="5">
<view style="color: #6A4925; margin-top: 15%; font-size: 0.8rem; text-align: center; background-color: #fff; padding: 0.25rem 0; border-radius: 0.5rem;">
共1晚
</view>
<nut-col span="5" class="calendar-select-center">
<view>共1晚</view>
</nut-col>
<nut-col span="9">
<view style="color: #7D7C7C; font-size: 0.8rem;">退房日期</view>
<view style="color: #6A4925; font-size: 0.85rem; font-weight: bold;">2023.12.08 星期五</view>
<nut-col span="9" class="calendar-select-right">
<view class="text">退房日期</view>
<view class="date">2023.12.08 星期五</view>
</nut-col>
</nut-row>
</view>
<view style="padding: 0 1rem 1rem;">
<view class="calendar-select-info">
<nut-row>
<nut-col span="12">
<view style="color: #060606; font-size: 0.85rem;">入住时间</view>
<view class="check-in-text">入住时间</view>
</nut-col>
<nut-col span="12">
<view style="color: #010101; font-size: 0.85rem; font-weight: bold; text-align: right;">12月7日 14:00后</view>
<view class="check-in-time">12月7日 14:00后</view>
</nut-col>
</nut-row>
<nut-row>
<nut-col span="12">
<view style="color: #060606; font-size: 0.85rem; margin: 0.25rem 0;">退房日期</view>
<view class="check-out-text">退房日期</view>
</nut-col>
<nut-col span="12">
<view style="color: #010101; font-size: 0.85rem; font-weight: bold; text-align: right; margin: 0.25rem 0;">12月8日 12:00前</view>
<view class="check-out-time">12月8日 12:00前</view>
</nut-col>
</nut-row>
<nut-row>
<nut-col span="12">
<view style="color: #060606; font-size: 0.85rem;">早餐</view>
<view class="meal-text">早餐</view>
</nut-col>
<nut-col span="12">
<view style="color: #010101; font-size: 0.85rem; font-weight: bold; text-align: right;">3份</view>
<view class="meal-count">3份</view>
</nut-col>
</nut-row>
<view style="font-size: 0.85rem; margin-top: 0.25rem;">
<view style="color: red; margin: auto; display: inline-block;">*</view> <view style="color: #6A4925; margin: auto; display: inline-block;">12月7日 20:00后未入住，订单将被取消</view>
<view class="tip">
<view class="tip-red">*</view>
<view class="tip-text">12月7日 20:00后未入住，订单将被取消</view>
</view>
</view>
<view style="height: 1rem; background-color: #F6F6F6;"></view>
<view style="text-align: center; padding: 1rem 0;">
<view class="space-line"></view>
<view class="select-user">
<nut-radio-group v-model="radioVal" direction="horizontal">
<nut-radio label="1">
本人入住
......@@ -92,20 +91,20 @@
<view class="confirm-form">
<nut-row>
<nut-col :span="6">
<view class="form-text"><view style="color: red; margin-right: 0.1rem;display: inline-block;">*</view>联系人</view>
<view class="form-text required">联系人</view>
</nut-col>
<nut-col :span="18">
<view style="border: 1px solid #DEDEDE; border-radius: 10rpx;">
<view class="form-input">
<nut-input v-model="basicData.name" class="nut-input-text" placeholder="请输入联系人" type="text" :border="false" />
</view>
</nut-col>
</nut-row>
<nut-row style="margin: 30rpx 0;">
<nut-col :span="6">
<view class="form-text"><view style="color: red; margin-right: 0.1rem;display: inline-block;">*</view>联系电话</view>
<view class="form-text required">联系电话</view>
</nut-col>
<nut-col :span="18">
<view style="border: 1px solid #DEDEDE; border-radius: 10rpx;">
<view class="form-input">
<nut-input v-model="basicData.tel" class="nut-input-text" placeholder="请输入联系电话" type="number" :border="false" />
</view>
</nut-col>
......@@ -115,25 +114,23 @@
<view class="form-text" style="padding-left: 45rpx;">备注</view>
</nut-col>
<nut-col :span="18">
<view style="border: 1px solid #DEDEDE; border-radius: 10rpx;">
<view class="form-input">
<nut-textarea v-model="basicData.note" class="nut-input-text" placeholder="如有其他需求，请在此填写" :autosize="{ maxHeight: 100, minHeight: 50 }" />
</view>
</nut-col>
</nut-row>
<!-- <nut-textarea v-model="basicData.note" class="nut-input-text" placeholder="如有其他需求，请在此填写" :autosize="{ maxHeight: 100, minHeight: 50 }" /> -->
<nut-number-keyboard v-model:visible="visible" v-model="basicData.tel" maxlength="11" @close="close"> </nut-number-keyboard>
</view>
<view style="position: fixed; bottom: 0; left: 0; right: 0; background-color: #fff; height: 4rem; padding: 30rpx 30rpx 20rpx 30rpx;box-shadow: 0px -5px 4px 0px rgba(0,0,0,0.07);">
<view class="confirm-bar">
<nut-row>
<nut-col :span="18">
<view style="height: 2rem; margin-left: 0.5rem; display: flex; align-items: center;">
<text style="color: #EB2E2E; font-size: 1.3rem; font-weight: bold;">￥980</text>
<text style="color: #7D7C7C; text-decoration: line-through; font-size: 0.85rem; margin-left: 5px;">￥1280</text>
<view class="price">
<text class="price-text-left">￥980</text>
<text class="price-text-right">￥1280</text>
</view>
</nut-col>
<nut-col :span="6">
<view @tap="goPay" style="background-color: #6A4925; border-radius: 1.25rem; padding: 0.25rem 0.5rem; color: #fff; text-align: center; height: 2rem; line-height: 2rem;">提交订单</view>
<view @tap="goPay" class="confirm-btn">提交订单</view>
</nut-col>
</nut-row>
</view>
......