Skip to content

G
gxpt_wechat
Commit 704f6e29 by zhangzhen
Options

细节优化

parent 9468ff19
Showing with 38 additions and 32 deletions
pages/order/order.vue
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
</view> </view>
<view class="part-right"> <view class="part-right">
<text <text
class="text-title text-xl text-bold">{{roomInfo.name||'一帆风顺'}}{{roomInfo.roomType?'【'+roomTypeEnum[roomInfo.roomType]+'】':''}}</text> class="text-title text-xl text-bold">{{roomInfo.name||'凑角'}}{{roomInfo.roomType?'【'+roomTypeEnum[roomInfo.roomType]+'】':''}}</text>
<view class="status-icon-box"> <view class="status-icon-box">
<view class="status-box" :class="'status-box-'+roomInfo.status"> <view class="status-box" :class="'status-box-'+roomInfo.status">
<text>{{roomStatusEnum[roomInfo.status]}}</text> <text>{{roomStatusEnum[roomInfo.status]}}</text>
...@@ -15,21 +15,22 @@ ...@@ -15,21 +15,22 @@
</view> </view>
</view> </view>
<view class="part-left"> <view class="part-left">
<image :src="roomInfo.images.length?roomInfo.images[0]:'../../static/blank2.jpg'" mode="widthFix"> <image :src="roomInfo.images.length?roomInfo.images[0]: assetsPath+'/blank2.jpg'" mode="widthFix">
</image> </image>
</view> </view>
</view> </view>
<view class="order-type-box">
<view class="tab-box"> <view class="tab-box">
<view v-for="(item,i) in orderTypeList" :key="i" class="tab-item" :class="{active:i ===index}" <view v-for="(item,i) in orderTypeList" :key="i" class="tab-item" :class="{active:i ===index}"
@tap="onTypeChange(i)"> @tap="onTypeChange(i)">
<text class="text-gray text-xl text-bold">{{item.label}}</text> <text class="text-gray text-xl text-bold">{{item.label}}</text>
<view class="line"> <view v-if="item.type == 2" class="hot-icon">
<view class="img-icon">
<image src="../../static/hot_icon.png" mode="widthFix"></image>
</view> </view>
</view> </view>
</view> </view>
</view>
<view class="order-type-box">
<view class="flex-col date-content-box"> <view class="flex-col date-content-box">
<view class="flex-row date-tips"> <view class="flex-row date-tips">
<text class="text-xl margin-right">选择日期</text> <text class="text-xl margin-right">选择日期</text>
...@@ -1524,57 +1525,62 @@ ...@@ -1524,57 +1525,62 @@
} }
} }
.order-type-box {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 30upx;
min-height: 600upx;
overflow: hidden;
.tab-box { .tab-box {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
width: 100%; width: 92%;
margin: 20upx 0 30upx;
background: #ffffff; background: #ffffff;
border-radius: 10upx;
overflow: hidden;
.tab-item { .tab-item {
position: relative; position: relative;
display: flex; display: flex;
flex: 1;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 80upx; height: 80upx;
width: 36%;
text { text {
color: #000000; color: #000000;
font-size: 34upx; font-size: 34upx;
font-weight: 600; font-weight: 700;
} }
.hot-icon{
.line { position: relative;
height: 40upx;
.img-icon{
position: absolute; position: absolute;
width: 30%; top: -4upx;
height: 2px; left: 4upx;
bottom: 0; width: 46upx;
background: transparent; image{
transition: all 0.3s ease-in-out; width: 100%;
}
}
} }
} }
.active { .active {
background-color: #dc4397;
text { text {
color: #DBA556; color: #ffffff;
} font-weight: 800;
.line {
background: #DBA556;
} }
} }
} }
.order-type-box {
display: flex;
flex-direction: column;
width: 100%;
min-height: 600upx;
overflow: hidden;
border: 4upx solid #DC4397;
box-shadow: 0 0 8upx #DC4397;
border-radius: 12upx 12upx 0 0;
.date-content-box { .date-content-box {
width: 100%; width: 100%;
background-color: #FFF7F5; background-color: #FFF7F5;
......
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