确认订单页样式优化显示

hookehuyr
Commit 9a7de063b669f7fc1f7206d873531fb8c14f481c 9a7de063 1 parent d67276b1
Showing 3 changed files with 188 additions and 72 deletions
components.d.ts
src/pages/confirm/index.less
src/pages/confirm/index.vue
--- a/components.d.ts
View file @9a7de06
+++ b/components.d.ts
View file @9a7de06
@@ -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']
--- a/src/pages/confirm/index.less
View file @9a7de06
+++ b/src/pages/confirm/index.less
View file @9a7de06
-.calendar-select-page {
+.confirm-page {
-  margin: 1rem;
+  .book-info-desc {
-  background-color: #f6ece1;
+    padding: 1rem;
-  border-radius: 0.5rem;
+  }
-  padding: 1rem 0;
+  .book-count-desc {
-  padding-left: 0.5rem;
+    padding: 0 1rem;
-}
+  }
-
+  .calendar-select-desc {
-.confirm-form {
+    margin: 1rem;
-  padding-right: 1rem;
+    background-color: #f6ece1;
-  .form-text {
+    border-radius: 0.5rem;
-    position: relative;
+    padding: 1rem 0;
-    width: 100%;
+    padding-left: 0.5rem;
-    padding: 20rpx 30rpx;
+    .calendar-select-left,
-    padding-right: 0;
+    .calendar-select-right {
-    display: -webkit-flex;
+      .text {
-    display: -ms-flexbox;
+        color: #7d7c7c;
-    display: flex;
+        font-size: 0.8rem;
-    line-height: 40rpx;
+      }
-    -webkit-box-sizing: border-box;
+      .date {
-    box-sizing: border-box;
+        color: #6a4925;
-    font-size: 27rpx;
+        font-size: 0.85rem;
-  }
+        font-weight: bold;
-  .nut-input {
+      }
-    padding: 20rpx;
+    }
-  }
+    .calendar-select-center {
-  .nut-input-text {
+      view {
-    border-radius: 10rpx;
+        color: #6a4925;
-  }
+        margin-top: 15%;
-  .nut-textarea {
+        font-size: 0.8rem;
-    border-radius: 10rpx;
+        text-align: center;
-    padding: 20rpx;
+        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;
+    }
   }
 }
--- a/src/pages/confirm/index.vue
View file @9a7de06
+++ b/src/pages/confirm/index.vue
View file @9a7de06
 <!--
  * @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 class="confirm-page">
-    <view style="padding: 1rem;">
+    <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">
+        <nut-col span="9" class="calendar-select-left">
-          <view style="color: #7D7C7C; font-size: 0.8rem;">入住日期</view>
+          <view class="text">入住日期</view>
-          <view style="color: #6A4925; font-size: 0.85rem; font-weight: bold;">2023.12.07 星期四</view>
+          <view class="date">2023.12.07 星期四</view>
         </nut-col>
-        <nut-col span="5">
+        <nut-col span="5" class="calendar-select-center">
-          <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;">
+          <view>共1晚</view>
-            共1晚
-          </view>
         </nut-col>
-        <nut-col span="9">
+        <nut-col span="9" class="calendar-select-right">
-          <view style="color: #7D7C7C; font-size: 0.8rem;">退房日期</view>
+          <view class="text">退房日期</view>
-          <view style="color: #6A4925; font-size: 0.85rem; font-weight: bold;">2023.12.08 星期五</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 class="tip">
-        <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-red">*</view>
+        <view class="tip-text">12月7日 20:00后未入住，订单将被取消</view>
       </view>
     </view>
-    <view style="height: 1rem; background-color: #F6F6F6;"></view>
+    <view class="space-line"></view>
-    <view style="text-align: center; padding: 1rem 0;">
+    <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;">
+          <view class="price">
-            <text style="color: #EB2E2E; font-size: 1.3rem; font-weight: bold;">￥980</text>
+            <text class="price-text-left">￥980</text>
-            <text style="color: #7D7C7C; text-decoration: line-through; font-size: 0.85rem; margin-left: 5px;">￥1280</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>