Skip to content

G
gxpt_wechat
Commit 9d82608f by zhangzhen
Options

界面优化

parent f16af687
Showing with 108 additions and 50 deletions
pages/index/index.vue
...@@ -46,15 +46,33 @@ ...@@ -46,15 +46,33 @@
<image :src="assetsPath +'/banner2.png'" mode="widthFix"></image> <image :src="assetsPath +'/banner2.png'" mode="widthFix"></image>
</view> </view>
<view class="flex-col list-box"> <view class="flex-col list-box">
<view class="title titleStyle"> <!-- <view class="title titleStyle">
<text class="text-title">房间预览</text> <text class="text-title">房间预览</text>
</view> </view> -->
<view v-for="(item,index) in roomVoList" :key="index" class="list-item-box" <view v-for="(item,index) in roomVoList" :key="index" class="list-item-box"
@tap="onNavToOrder(item)"> @tap="onNavToOrder(item)">
<view class="itemRow listStyle"> <view class="itemRow listStyle">
<view class="relative part-top"> <view class="relative part-top">
<image class="room-img" :src="item.images[0]" mode="aspectFill" <image class="room-img" :src="item.images[0]" mode="aspectFill"
@tap.stop="onPreview(item.images)"></image> @tap.stop="onPreview(item.images)"></image>
<view class="absolute">
<view class='status-bg bg-gray' v-if="item.roomStat >= 3">
维护
</view>
<view class='status-bg bg-red' v-else-if="item.isDirtyRoom >= 1">
未保洁
</view>
<view v-else-if="item.recordsStatus>=0" class="status-bg bg-red">
{{recordsStatusEnum[item.recordsStatus]}}
</view>
<view v-else class='status-bg'
:class="item.status==0?'bg-green':item.status==1?'bg-pink':'bg-blue'">
{{roomStatusEnum[item.status]}}
{{item.recordsTime? '('+item.recordsTime+'结束)' : ''}}
</view>
</view>
</view> </view>
<view class="flex-col part-bottom"> <view class="flex-col part-bottom">
<view class="flex-between room-title"> <view class="flex-between room-title">
...@@ -62,7 +80,9 @@ ...@@ -62,7 +80,9 @@
<text>{{item.name}}{{item.roomType?'【'+roomTypeEnum[item.roomType]+'】':''}}</text> <text>{{item.name}}{{item.roomType?'【'+roomTypeEnum[item.roomType]+'】':''}}</text>
</view> </view>
<view class="price"> <view class="price">
<view class=""> <!-- <text v-if="item.recordsTime" class="text-sm text-orange text-bold">{{item.recordsTime}} 结束</text> -->
<!-- <view class="">
<view class='cu-tag radius line-orange' v-if="item.roomStat >= 3"> <view class='cu-tag radius line-orange' v-if="item.roomStat >= 3">
维护 维护
</view> </view>
...@@ -78,13 +98,13 @@ ...@@ -78,13 +98,13 @@
:class="item.status==0?'line-green':item.status==1?'line-orange':'line-blue'"> :class="item.status==0?'line-green':item.status==1?'line-orange':'line-blue'">
{{roomStatusEnum[item.status]}} {{roomStatusEnum[item.status]}}
</view> </view>
</view> -->
</view> </view>
</view> </view>
</view> <!-- <view v-if="item.recordsTime" class="flex-between records-time">
<view v-if="item.recordsTime" class="flex-between records-time">
<text></text> <text></text>
<text class="text-sm text-orange text-bold">{{item.recordsTime}} 结束</text> <text class="text-sm text-orange text-bold">{{item.recordsTime}} 结束</text>
</view> </view> -->
<view class="facilitie-box"> <view class="facilitie-box">
<view v-for="(val,i) in item.facilities" :key="i" v-if="i<=7" <view v-for="(val,i) in item.facilities" :key="i" v-if="i<=7"
class='cu-tag radius bg-brown'> class='cu-tag radius bg-brown'>
...@@ -94,24 +114,28 @@ ...@@ -94,24 +114,28 @@
<view class="item-Go"> <view class="item-Go">
<view class="flex-row room-type"> <view class="flex-row room-type">
<view class="flex-col"> <view class="flex-col flex-1">
<view v-for="(val,i) in item.packList" :key="i" v-if="i<2" class="item"> <view v-for="(val,i) in item.packList" :key="i" v-if="i<2" class="item">
<view class="part-2"> <view class="part-2">
<text class="text-sm">{{val.duration}}小时套餐:</text> <text class="text-sm">{{val.duration}}小时套餐:</text>
<text class="text-red text-bold text-xl">{{val.price}}元</text> <text class="text-red text-sm margin-left-sm">￥</text>
<text class="text-red text-bold text-xl">{{val.price}}</text>
</view> </view>
</view> </view>
</view> </view>
<view class="confirm">
<button class="cu-btn">预定</button>
</view>
</view> </view>
</view> </view>
<view class="flex-between confirm-box"> <!-- <view class="flex-between confirm-box">
<view class="flex-priceBox"></view> <view class="flex-priceBox"></view>
<view class="confirm"> <view class="confirm">
<button class="cu-btn">预定</button> <button class="cu-btn">预定</button>
</view> </view>
</view> </view> -->
</view> </view>
</view> </view>
<view class="flex-row list-point-box"> <view class="flex-row list-point-box">
...@@ -529,7 +553,7 @@ ...@@ -529,7 +553,7 @@
<style> <style>
page { page {
background-color: #f5f5f5; background-color: #f9f9f9;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -565,12 +589,13 @@ ...@@ -565,12 +589,13 @@
justify-content: center; justify-content: center;
width: 100%; width: 100%;
min-height: 280upx; min-height: 280upx;
backdrop-filter: blur(5px);
background-color: #E40583; background-color: #E40583;
image { image {
display: block; display: block;
width: 100%; width: 100%;
height: auto; height: auto;
backdrop-filter: blur(5px);
} }
} }
...@@ -753,14 +778,16 @@ ...@@ -753,14 +778,16 @@
// position: relative; // position: relative;
// display: flex; // display: flex;
// flex-direction: column; // flex-direction: column;
width: 92%; width: 100%;
// min-height: 314upx; // min-height: 314upx;
background-color: #FBF6EE; // background-color: #FBF6EE;
background: linear-gradient(to bottom, rgba(229,38,139,0.08),#ffffff);
border-radius: 14upx; border-radius: 14upx;
overflow: hidden; overflow: hidden;
margin: 0 0 20upx 0; margin: 0 0 20upx 0;
padding: 0 12upx; padding: 0 12upx;
border: 2upx solid #DBA556; box-shadow: 0 0 6upx rgba(0, 0, 0, 0.12);
// border: 2upx solid #DBA556;
.part-top { .part-top {
position: relative; position: relative;
...@@ -900,7 +927,6 @@ ...@@ -900,7 +927,6 @@
} }
} }
// 陈晨增加样式
.titleStyle { .titleStyle {
padding: 20rpx 0; padding: 20rpx 0;
margin: 0 !important; margin: 0 !important;
...@@ -930,13 +956,43 @@ ...@@ -930,13 +956,43 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 240rpx; width: 240rpx;
min-height: 280upx; min-height: 300upx;
border-radius: 12upx;
overflow: hidden; overflow: hidden;
.room-img { .room-img {
width: inherit; height: 100%;
height: 96%; }
border-radius: 12rpx !important; .absolute{
position: absolute;
top: auto;
left: 0;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 60upx;
.status-bg{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.bg-gray{
background: rgba(136, 136, 136, 0.96);
color: #ffffff;
}
.bg-pink{
background: rgba(230, 58, 159, 0.8);
}
.bg-green{
background: rgba(57,181,74, 0.8);
}
.bg-red{
background: rgba(229, 77, 66, 0.8);
}
} }
} }
...@@ -959,7 +1015,7 @@ ...@@ -959,7 +1015,7 @@
align-items: center; align-items: center;
text { text {
color: #9e9e9e; // color: #9e9e9e;
} }
} }
...@@ -972,8 +1028,9 @@ ...@@ -972,8 +1028,9 @@
min-height: 88upx; min-height: 88upx;
margin-top: 10upx; margin-top: 10upx;
.bg-brown { .bg-brown {
color: #c98d35; color: rgba(185,75,112, 0.9);
background-color: #f8eddd; background-color: transparent;
border: 1upx solid rgba(185,75,112, 0.9);
margin: 4upx; margin: 4upx;
padding: 0 8upx; padding: 0 8upx;
height: 36upx; height: 36upx;
...@@ -1052,11 +1109,6 @@ ...@@ -1052,11 +1109,6 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
>.flex-col {
width: 100%;
}
.item { .item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -1118,15 +1170,16 @@ ...@@ -1118,15 +1170,16 @@
.confirm { .confirm {
.cu-btn { .cu-btn {
padding: 0 10upx 0 14upx; padding: 8upx 20upx;
height: 52rpx; height: 52rpx;
background: linear-gradient(97deg, #E5268B, #FD5661); background: linear-gradient(97deg, #E5268B, #FD5661);
color: #ffffff; color: #ffffff;
letter-spacing: 8upx; letter-spacing: 4upx;
font-size: 32upx; font-size: 30upx;
text-align: center; text-align: center;
opacity: 0.95; opacity: 0.95;
border-radius: 12rpx; border-radius: 12rpx;
margin-right: 10upx;
} }
.text-lg { .text-lg {
...@@ -1142,22 +1195,24 @@ ...@@ -1142,22 +1195,24 @@
margin-bottom: 20upx; margin-bottom: 20upx;
.bg-pink { .bg-pink {
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(185, 75, 112, 0.7);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.26) inset; // background-color: #fad2bb;
} }
// .bg-gray{ .bg-gray{
// background-color: rgba(255, 255, 255, 0.9); // background-color: rgba(229, 229, 229, 0.9);
// } background-color: transparent;
border: 1px solid #e5e5e5;
}
.flex-col { .flex-col {
align-items: center; align-items: center;
} }
.box { .box {
margin: 0 2upx 6upx; margin: 0 2upx 6upx;
width: 10px; width: 90%;
height: 10px; height: 12px;
border-radius: 5px; border-radius: 5upx;
} }
.text-sm { .text-sm {
......
pages/order/order.vue
...@@ -1918,12 +1918,13 @@ ...@@ -1918,12 +1918,13 @@
display: flex; display: flex;
width: 12px; width: 12px;
height: 12px; height: 12px;
border-radius: 50%; border-radius: 5upx;
margin-right: 12upx; margin-right: 12upx;
} }
.pink { .pink {
background-color: #e03997; // background-color: #fad2bb;
background-color: rgba(185, 75, 112, 0.7);
} }
.blank { .blank {
...@@ -1931,7 +1932,8 @@ ...@@ -1931,7 +1932,8 @@
} }
.gray { .gray {
background-color: #bfbfbf; // background-color: #bfbfbf;
background-color: rgba(197, 197, 197, 0.9);
} }
.error { .error {
...@@ -1946,16 +1948,14 @@ ...@@ -1946,16 +1948,14 @@
.date-point-item { .date-point-item {
display: flex; display: flex;
flex: 1;
flex-direction: column; flex-direction: column;
width: 4.16666%;
align-items: center; align-items: center;
margin: 12upx 0;
.date-point { .date-point {
display: flex; display: flex;
width: 10px; width: 90%;
height: 10px; height: 12px;
border-radius: 5px; border-radius: 5upx;
margin-bottom: 8upx; margin-bottom: 8upx;
} }
...@@ -1964,11 +1964,14 @@ ...@@ -1964,11 +1964,14 @@
} }
.used { .used {
background-color: #bfbfbf; // background-color: #bfbfbf;
background-color: rgba(197, 197, 197, 0.7);
} }
.checked { .checked {
background-color: #e03997; // background-color: #e03997;
// background-color: #fad2bb;
background-color: rgba(185, 75, 112, 0.7);
} }
.error { .error {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment