Commit a3e4ef51 authored by Damon's avatar Damon

fix: 备件选择样式修改

parent a5f0799c
<template> <template>
<view class="u-flex bottom" :style="customStyle"> <view class="u-flex bottom" :style="customStyle">
<view class="select-view"> <view class="select-view" v-if="showChecked">
<view class="u-flex bottom-left" v-if="showChecked"> <view class="u-flex bottom-left">
<view class="left-list"><u-checkbox icon-size="28" size="40" v-model="checked" @change="selectAll" shape="circle"/></view> <view class="left-list"><u-checkbox icon-size="28" size="40" v-model="checked" @change="selectAll" shape="circle"/></view>
<view class="left-list">全选</view> <view class="left-list">全选</view>
</view> </view>
<view class="u-flex bottom-center"> <view class="u-flex bottom-center">
<view class="center-list">已选择 {{ partNum }} 种</view> <view class="center-list">已选择 {{ partNum }} 种</view>
<view class="center-list">合计:<text class="num"> {{ num }} </text> 件</view> <view class="center-list">共:<text class="num"> {{ num }} </text> 件</view>
</view> </view>
</view> </view>
<view class="u-flex select-num" v-if="!showChecked">
<view class="num-left">
<u-badge type="error" :show-zero="true" :count="partNum" :offset="[0, 0]"></u-badge>
<u-image width="72rpx" height="72rpx" :lazy-load="false" :src="partsImage"></u-image>
</view>
<view class="num-right">共:<text class="num"> {{ num }} </text> 件</view>
</view>
<view class="u-flex bottom-right"> <view class="u-flex bottom-right">
<button :class="['btn', btnActive]" @click="submit">{{ submitTxt }}</button> <button :class="['btn', btnActive]" @click="submit">{{ submitTxt }}</button>
</view> </view>
...@@ -55,10 +62,10 @@ ...@@ -55,10 +62,10 @@
return '确定' return '确定'
} }
} }
}, },
customStyle: { customStyle: {
type: String, type: String,
default: 'background-color: #FFFFFF;padding: 0 30rpx;' default: 'background-color: #FFFFFF;padding: 0 30rpx;'
}, },
data() { data() {
return { return {
...@@ -66,6 +73,9 @@ ...@@ -66,6 +73,9 @@
} }
}, },
computed: { computed: {
partsImage() {
return process.uniEnv.qn_base_url + 'part_num.png'
},
btnActive() { btnActive() {
return this.btnStatus ? 'btn-active' : '' return this.btnStatus ? 'btn-active' : ''
} }
...@@ -92,53 +102,70 @@ ...@@ -92,53 +102,70 @@
.bottom { .bottom {
width: 100%; width: 100%;
height: 180rpx; height: 180rpx;
// background: #fff; background: #fff;
justify-content: space-between; justify-content: space-between;
.u-flex { .select-view {
flex-direction: column; display: flex;
align-items: center; align-items: center;
} .u-flex {
.select-view { flex-direction: column;
display: flex; align-items: center;
align-items: center; }
} .bottom-left {
.bottom-left { margin-left: 30rpx;
// margin-left: 30rpx; .left-list {
.left-list { width: 100%;
width: 100%; &:nth-of-type(1) {
&:nth-of-type(1) { padding-left: 3rpx;
padding-left: 3rpx; }
&:nth-of-type(2) {
margin-top: 8rpx;
font-size: 20rpx;
}
} }
&:nth-of-type(2) { }
margin-top: 8rpx; .bottom-center {
font-size: 20rpx; flex: 1;
align-items: flex-start;
margin: 0 20rpx;
.center-list {
&:nth-of-type(1) {
color: #666;
font-size: 26rpx;
}
&:nth-of-type(2) {
color: #333;
font-size: 32rpx;
margin-top: 8rpx;
font-weight: bold;
.num {
color: #2272FF;
padding-right: 10rpx;
}
}
} }
} }
} }
.bottom-center { .select-num {
flex: 1; flex: 1;
align-items: flex-start; .num-left {
// margin: 0 20rpx; position: relative;
.center-list { min-width: 92rpx;
&:nth-of-type(1) { }
color: #666; .num-right {
font-size: 26rpx; color: #333;
} font-size: 32rpx;
&:nth-of-type(2) { margin-left: 10rpx;
color: #333; font-weight: bold;
font-size: 32rpx; .num {
margin-top: 8rpx; color: #2272FF;
font-weight: bold; padding-right: 10rpx;
.num {
color: #2272FF;
padding-right: 10rpx;
}
} }
} }
} }
.bottom-right { .bottom-right {
width: 360rpx; width: 360rpx;
// margin-right: 20rpx; margin-right: 20rpx;
.btn { .btn {
width: 100%; width: 100%;
padding: 30rpx; padding: 30rpx;
......
...@@ -133,6 +133,8 @@ ...@@ -133,6 +133,8 @@
.bar { .bar {
width: 100%; width: 100%;
border-top: 1px solid #F4F5F7; border-top: 1px solid #F4F5F7;
padding: 0 20rpx;
background: #fff;
} }
.empty { .empty {
flex: 1; flex: 1;
......
...@@ -312,6 +312,8 @@ export default { ...@@ -312,6 +312,8 @@ export default {
.bar { .bar {
width: 100%; width: 100%;
border-top: 2rpx solid #F4F5F7; border-top: 2rpx solid #F4F5F7;
padding: 0 20rpx;
background: #fff;
} }
} }
</style> </style>
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