Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
9395e4ea 1 parent 81ccb244

组件显示效果调整

Inline Side-by-side
Showing 6 changed files with 40 additions and 15 deletions
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
18 <nut-row> 18 <nut-row>
19 <nut-col span="18"> 19 <nut-col span="18">
20 <view class="order-card-price-text"> 20 <view class="order-card-price-text">
21 - <text class="left">￥980</text> 21 + <text class="left"><text style="font-size: 30rpx;">￥</text>980</text>
22 <text class="right">￥1280</text> 22 <text class="right">￥1280</text>
23 </view> 23 </view>
24 </nut-col> 24 </nut-col>
......
1 <!-- 1 <!--
2 * @Date: 2023-12-13 13:42:23 2 * @Date: 2023-12-13 13:42:23
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-21 14:41:48 4 + * @LastEditTime: 2023-12-25 11:04:56
5 * @FilePath: /meihuaApp/src/components/roomCard.vue 5 * @FilePath: /meihuaApp/src/components/roomCard.vue
6 * @Description: 房间详情组件 6 * @Description: 房间详情组件
7 --> 7 -->
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
15 <view class="room-info-desc">两室 宜住3人</view> 15 <view class="room-info-desc">两室 宜住3人</view>
16 </nut-col> 16 </nut-col>
17 <nut-col span="6" class="room-info-right"> 17 <nut-col span="6" class="room-info-right">
18 - <view class="room-info-discount">￥980</view> 18 + <view class="room-info-discount"><text style="font-size: 25rpx;">￥</text>980</view>
19 <view class="room-info-price">￥1280</view> 19 <view class="room-info-price">￥1280</view>
20 </nut-col> 20 </nut-col>
21 </nut-row> 21 </nut-row>
...@@ -139,13 +139,19 @@ onMounted(() => { ...@@ -139,13 +139,19 @@ onMounted(() => {
139 padding: 0.5rem; 139 padding: 0.5rem;
140 .room-info-left { 140 .room-info-left {
141 .room-info-title { 141 .room-info-title {
142 - color: #0B0B0B; font-weight: bold; 142 + color: #0B0B0B;
143 + font-weight: bold;
143 } 144 }
144 .room-info-desc { 145 .room-info-desc {
145 - color: #7D7C7C; font-size: 0.8rem; 146 + color: #7D7C7C;
147 + font-size: 0.8rem;
148 + margin-top: 0.1rem;
146 } 149 }
147 } 150 }
148 .room-info-right { 151 .room-info-right {
152 + display: flex;
153 + flex-direction: column;
154 + align-items: flex-end;
149 .room-info-discount { 155 .room-info-discount {
150 float: right; 156 float: right;
151 color: #EB2E2E; 157 color: #EB2E2E;
...@@ -155,6 +161,7 @@ onMounted(() => { ...@@ -155,6 +161,7 @@ onMounted(() => {
155 .room-info-price { 161 .room-info-price {
156 float: right; 162 float: right;
157 color: #7D7C7C; 163 color: #7D7C7C;
164 + // font-weight: bold;
158 font-size: 0.8rem; 165 font-size: 0.8rem;
159 text-decoration: line-through; 166 text-decoration: line-through;
160 } 167 }
......
...@@ -140,16 +140,30 @@ ...@@ -140,16 +140,30 @@
140 padding: 30rpx 30rpx 20rpx 30rpx; 140 padding: 30rpx 30rpx 20rpx 30rpx;
141 box-shadow: 0px -5px 4px 0px rgba(0, 0, 0, 0.07); 141 box-shadow: 0px -5px 4px 0px rgba(0, 0, 0, 0.07);
142 .price { 142 .price {
143 - height: 2rem; margin-left: 0.5rem; display: flex; align-items: center; 143 + height: 2rem;
144 + margin-left: 0.5rem;
145 + display: flex;
146 + align-items: center;
144 .price-text-left { 147 .price-text-left {
145 - color: #EB2E2E; font-size: 1.3rem; font-weight: bold; 148 + color: #eb2e2e;
149 + font-size: 1.3rem;
150 + font-weight: bold;
146 } 151 }
147 .price-text-right { 152 .price-text-right {
148 - color: #7D7C7C; text-decoration: line-through; font-size: 0.85rem; margin-left: 5px; 153 + color: #7d7c7c;
154 + text-decoration: line-through;
155 + font-size: 0.85rem;
156 + margin-left: 5px;
149 } 157 }
150 } 158 }
151 .confirm-btn { 159 .confirm-btn {
152 - background-color: #6A4925; border-radius: 1.25rem; padding: 0.25rem 0.5rem; color: #fff; text-align: center; height: 2rem; line-height: 2rem; 160 + background-color: #6a4925;
161 + border-radius: 1.25rem;
162 + padding: 0.25rem 0.5rem;
163 + color: #fff;
164 + text-align: center;
165 + height: 2rem;
166 + line-height: 2rem;
153 } 167 }
154 } 168 }
155 } 169 }
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-21 14:17:13 4 + * @LastEditTime: 2023-12-25 10:57:42
5 * @FilePath: /meihuaApp/src/pages/confirm/index.vue 5 * @FilePath: /meihuaApp/src/pages/confirm/index.vue
6 * @Description: 确认订单页面 6 * @Description: 确认订单页面
7 --> 7 -->
...@@ -130,7 +130,7 @@ ...@@ -130,7 +130,7 @@
130 <nut-row> 130 <nut-row>
131 <nut-col :span="18"> 131 <nut-col :span="18">
132 <view class="price"> 132 <view class="price">
133 - <text class="price-text-left">￥{{ room_price_info.discount * book_count * booking_info.days }}</text> 133 + <text class="price-text-left"><text style="font-size: 32rpx;">￥</text>{{ room_price_info.discount * book_count * booking_info.days }}</text>
134 <text class="price-text-right">￥{{ room_price_info.price * book_count * booking_info.days }}</text> 134 <text class="price-text-right">￥{{ room_price_info.price * book_count * booking_info.days }}</text>
135 </view> 135 </view>
136 </nut-col> 136 </nut-col>
......
...@@ -4,10 +4,14 @@ ...@@ -4,10 +4,14 @@
4 .detail-info-wrapper { 4 .detail-info-wrapper {
5 padding: 1rem; 5 padding: 1rem;
6 .detail-info-title { 6 .detail-info-title {
7 - color: #0B0B0B; font-size: 1rem; font-weight: bold; 7 + color: #0B0B0B;
8 + font-size: 1rem;
9 + font-weight: bold;
8 } 10 }
9 .detail-info-content { 11 .detail-info-content {
10 - color: #7D7C7C; font-size: 0.8rem; 12 + color: #7D7C7C;
13 + font-size: 0.8rem;
14 + margin-top: 0.1rem;
11 } 15 }
12 } 16 }
13 .book-cal { 17 .book-cal {
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-22 17:38:15 4 + * @LastEditTime: 2023-12-25 10:56:14
5 * @FilePath: /meihuaApp/src/pages/detail/index.vue 5 * @FilePath: /meihuaApp/src/pages/detail/index.vue
6 * @Description: 房间详情页面 6 * @Description: 房间详情页面
7 --> 7 -->
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
30 <nut-row> 30 <nut-row>
31 <nut-col :span="18"> 31 <nut-col :span="18">
32 <view class="book-price"> 32 <view class="book-price">
33 - <text class="price">￥980</text> 33 + <text class="price"><text style="font-size: 32rpx;">￥</text>980</text>
34 <text class="old-price">￥1280</text> 34 <text class="old-price">￥1280</text>
35 </view> 35 </view>
36 </nut-col> 36 </nut-col>
......