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 @@
<image :src="assetsPath +'/banner2.png'" mode="widthFix"></image>
</view>
<view class="flex-col list-box">
<view class="title titleStyle">
<!-- <view class="title titleStyle">
<text class="text-title">房间预览</text>
</view>
</view> -->
<view v-for="(item,index) in roomVoList" :key="index" class="list-item-box"
@tap="onNavToOrder(item)">
<view class="itemRow listStyle">
<view class="relative part-top">
<image class="room-img" :src="item.images[0]" mode="aspectFill"
@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 class="flex-col part-bottom">
<view class="flex-between room-title">
......@@ -62,7 +80,9 @@
<text>{{item.name}}{{item.roomType?'【'+roomTypeEnum[item.roomType]+'】':''}}</text>
</view>
<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>
......@@ -78,13 +98,13 @@
:class="item.status==0?'line-green':item.status==1?'line-orange':'line-blue'">
{{roomStatusEnum[item.status]}}
</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 class="text-sm text-orange text-bold">{{item.recordsTime}} 结束</text>
</view>
</view> -->
<view class="facilitie-box">
<view v-for="(val,i) in item.facilities" :key="i" v-if="i<=7"
class='cu-tag radius bg-brown'>
......@@ -94,24 +114,28 @@
<view class="item-Go">
<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 class="part-2">
<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 class="confirm">
<button class="cu-btn">预定</button>
</view>
</view>
</view>
<view class="flex-between confirm-box">
<!-- <view class="flex-between confirm-box">
<view class="flex-priceBox"></view>
<view class="confirm">
<button class="cu-btn">预定</button>
</view>
</view>
</view> -->
</view>
</view>
<view class="flex-row list-point-box">
......@@ -529,7 +553,7 @@
<style>
page {
background-color: #f5f5f5;
background-color: #f9f9f9;
}
</style>
<style lang="scss" scoped>
......@@ -565,12 +589,13 @@
justify-content: center;
width: 100%;
min-height: 280upx;
backdrop-filter: blur(5px);
background-color: #E40583;
image {
display: block;
width: 100%;
height: auto;
backdrop-filter: blur(5px);
}
}
......@@ -753,14 +778,16 @@
// position: relative;
// display: flex;
// flex-direction: column;
width: 92%;
width: 100%;
// min-height: 314upx;
background-color: #FBF6EE;
// background-color: #FBF6EE;
background: linear-gradient(to bottom, rgba(229,38,139,0.08),#ffffff);
border-radius: 14upx;
overflow: hidden;
margin: 0 0 20upx 0;
padding: 0 12upx;
border: 2upx solid #DBA556;
box-shadow: 0 0 6upx rgba(0, 0, 0, 0.12);
// border: 2upx solid #DBA556;
.part-top {
position: relative;
......@@ -900,7 +927,6 @@
}
}
// 陈晨增加样式
.titleStyle {
padding: 20rpx 0;
margin: 0 !important;
......@@ -930,13 +956,43 @@
justify-content: center;
align-items: center;
width: 240rpx;
min-height: 280upx;
min-height: 300upx;
border-radius: 12upx;
overflow: hidden;
.room-img {
width: inherit;
height: 96%;
border-radius: 12rpx !important;
height: 100%;
}
.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 @@
align-items: center;
text {
color: #9e9e9e;
// color: #9e9e9e;
}
}
......@@ -972,8 +1028,9 @@
min-height: 88upx;
margin-top: 10upx;
.bg-brown {
color: #c98d35;
background-color: #f8eddd;
color: rgba(185,75,112, 0.9);
background-color: transparent;
border: 1upx solid rgba(185,75,112, 0.9);
margin: 4upx;
padding: 0 8upx;
height: 36upx;
......@@ -1052,11 +1109,6 @@
display: flex;
flex-direction: row;
align-items: center;
>.flex-col {
width: 100%;
}
.item {
display: flex;
flex-direction: row;
......@@ -1118,15 +1170,16 @@
.confirm {
.cu-btn {
padding: 0 10upx 0 14upx;
padding: 8upx 20upx;
height: 52rpx;
background: linear-gradient(97deg, #E5268B, #FD5661);
color: #ffffff;
letter-spacing: 8upx;
font-size: 32upx;
letter-spacing: 4upx;
font-size: 30upx;
text-align: center;
opacity: 0.95;
border-radius: 12rpx;
margin-right: 10upx;
}
.text-lg {
......@@ -1142,22 +1195,24 @@
margin-bottom: 20upx;
.bg-pink {
background-color: rgba(0, 0, 0, 0.2);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.26) inset;
background-color: rgba(185, 75, 112, 0.7);
// background-color: #fad2bb;
}
// .bg-gray{
// background-color: rgba(255, 255, 255, 0.9);
// }
.bg-gray{
// background-color: rgba(229, 229, 229, 0.9);
background-color: transparent;
border: 1px solid #e5e5e5;
}
.flex-col {
align-items: center;
}
.box {
margin: 0 2upx 6upx;
width: 10px;
height: 10px;
border-radius: 5px;
width: 90%;
height: 12px;
border-radius: 5upx;
}
.text-sm {
......
pages/order/order.vue
......@@ -1918,12 +1918,13 @@
display: flex;
width: 12px;
height: 12px;
border-radius: 50%;
border-radius: 5upx;
margin-right: 12upx;
}
.pink {
background-color: #e03997;
// background-color: #fad2bb;
background-color: rgba(185, 75, 112, 0.7);
}
.blank {
......@@ -1931,7 +1932,8 @@
}
.gray {
background-color: #bfbfbf;
// background-color: #bfbfbf;
background-color: rgba(197, 197, 197, 0.9);
}
.error {
......@@ -1946,16 +1948,14 @@
.date-point-item {
display: flex;
flex: 1;
flex-direction: column;
width: 4.16666%;
align-items: center;
margin: 12upx 0;
.date-point {
display: flex;
width: 10px;
height: 10px;
border-radius: 5px;
width: 90%;
height: 12px;
border-radius: 5upx;
margin-bottom: 8upx;
}
......@@ -1964,11 +1964,14 @@
}
.used {
background-color: #bfbfbf;
// background-color: #bfbfbf;
background-color: rgba(197, 197, 197, 0.7);
}
.checked {
background-color: #e03997;
// background-color: #e03997;
// background-color: #fad2bb;
background-color: rgba(185, 75, 112, 0.7);
}
.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