input禁止输入时的文字显示,select下拉框颜色统一
This commit is contained in:
BIN
src/assets/arrow_bot.png
Normal file
BIN
src/assets/arrow_bot.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.6 KiB |
@ -8,9 +8,6 @@ select{
|
|||||||
background-color: transparent; /* 设置透明背景色 */
|
background-color: transparent; /* 设置透明背景色 */
|
||||||
border: none; /* 取消边框 */
|
border: none; /* 取消边框 */
|
||||||
outline: none;
|
outline: none;
|
||||||
/* 右侧添加箭头的背景图 自行调整位置 */
|
|
||||||
//background: url('@/assets/copy.png') 20px center no-repeat #fff;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
.van-toast--html, .van-toast--text {
|
.van-toast--html, .van-toast--text {
|
||||||
z-index: 100000000002 !important;
|
z-index: 100000000002 !important;
|
||||||
|
@ -20,7 +20,7 @@
|
|||||||
<img class="startImg" src="@/assets/start.png" />
|
<img class="startImg" src="@/assets/start.png" />
|
||||||
<span>准驾车型</span>
|
<span>准驾车型</span>
|
||||||
</div>
|
</div>
|
||||||
<select id="mySelect" v-model="drivingModel" class="chosen-select" style="width: 44px">
|
<select id="mySelect" class="mySelect" v-model="drivingModel" >
|
||||||
<option value="A1">A1</option>
|
<option value="A1">A1</option>
|
||||||
<option value="A2">A2</option>
|
<option value="A2">A2</option>
|
||||||
<option value="A3">A3</option>
|
<option value="A3">A3</option>
|
||||||
@ -165,6 +165,17 @@ export default {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-left: 16px;
|
padding-left: 16px;
|
||||||
}
|
}
|
||||||
|
.mySelect{
|
||||||
|
@include fontWeightSize(bold,13px);
|
||||||
|
width: 44px;
|
||||||
|
color: #323643;
|
||||||
|
appearance: none;
|
||||||
|
padding-right: 16px;
|
||||||
|
background-image: url('@/assets/arrow_bot.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right center;
|
||||||
|
background-size: 15px 14px; /* 自定义图像的大小 */
|
||||||
|
}
|
||||||
.navBar{
|
.navBar{
|
||||||
//height: 46px;
|
//height: 46px;
|
||||||
margin-bottom: 46px;
|
margin-bottom: 46px;
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
<img class="startImg" src="@/assets/start.png" />
|
<img class="startImg" src="@/assets/start.png" />
|
||||||
<span>车辆类型</span>
|
<span>车辆类型</span>
|
||||||
</div>
|
</div>
|
||||||
<select id="mySelect" v-model="selectedOption">
|
<select id="mySelect" class="mySelect" v-model="selectedOption">
|
||||||
<option v-for="(item,index) in typeList" :key="index" :value="index">{{item}}</option>
|
<option v-for="(item,index) in typeList" :key="index" :value="index">{{item}}</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
@ -198,6 +198,16 @@ export default {
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@import "@/styles/mixin.scss";
|
@import "@/styles/mixin.scss";
|
||||||
@import "@/styles/common.scss";
|
@import "@/styles/common.scss";
|
||||||
|
.mySelect{
|
||||||
|
@include fontWeightSize(bold,13px);
|
||||||
|
color: #323643;
|
||||||
|
appearance: none;
|
||||||
|
padding-right: 16px;
|
||||||
|
background-image: url('@/assets/arrow_bot.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right center;
|
||||||
|
background-size: 15px 14px; /* 自定义图像的大小 */
|
||||||
|
}
|
||||||
.checkbox-group {
|
.checkbox-group {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -104,15 +104,15 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="flex-between" >
|
<div class="flex-between" >
|
||||||
<div>基本费用:</div>
|
<div>基本费用:</div>
|
||||||
<div class="halfOpcity inputContent" ><input type="number" :disabled="basePriceDisabled" v-model="form.supplierBasePrice"/>元</div>
|
<div class="halfOpcity inputContent " ><input :class="basePriceDisabled ? 'disable' : ''" type="number" :readonly="basePriceDisabled" v-model="form.supplierBasePrice"/><span :class="basePriceDisabled ? 'disable' : ''">元</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-between" >
|
<div class="flex-between" >
|
||||||
<div>额外费用总计:</div>
|
<div>额外费用总计:</div>
|
||||||
<div class="halfOpcity inputContent" ><input type="number" :disabled="true" v-model="form.supplierExtraPrice"/>元</div>
|
<div class="halfOpcity inputContent" ><input class="disable" type="number" :readonly="true" v-model="form.supplierExtraPrice"/><span class="disable">元</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-between">
|
<div class="flex-between">
|
||||||
<div>费用总计: </div>
|
<div>费用总计: </div>
|
||||||
<div class="halfOpcity inputContent" ><input type="number" :disabled="true" v-model="form.supplierSettleAmount"/>元</div>
|
<div class="halfOpcity inputContent" ><input class="disable" type="number" :readonly="true" v-model="form.supplierSettleAmount"/><span class="disable">元</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-between">
|
<div class="flex-between">
|
||||||
<div> </div>
|
<div> </div>
|
||||||
@ -172,11 +172,11 @@
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="col1">基本费用:{{orderInfo.basePrice +'元'}}</td>
|
<td class="col1">基本费用:{{orderInfo.basePrice +'元'}}</td>
|
||||||
<td class="col2 halfOpc" ><input :disabled="basePriceDisabled" v-model="form.supplierBasePrice"/></td>
|
<td class="col2 halfOpc" :style="{ opacity: basePriceDisabled ? '1' : '0.5' }"><input :class="basePriceDisabled ? 'disable' : ''" :readonly="basePriceDisabled" v-model="form.supplierBasePrice"/></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="col1">额外费用总计:{{orderInfo.extraPrice +'元'}}</td>
|
<td class="col1">额外费用总计:{{orderInfo.extraPrice +'元'}}</td>
|
||||||
<td class="col2 halfOpc" ><input :disabled="true" v-model="form.supplierExtraPrice"/></td>
|
<td class="col2 halfOpc" style="opacity: 1;"><input class="disable" :readonly="true" v-model="form.supplierExtraPrice"/></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="col1">收取客户:{{orderInfo.customerAmount +'元'}}</td>
|
<td class="col1">收取客户:{{orderInfo.customerAmount +'元'}}</td>
|
||||||
@ -185,7 +185,7 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<td class="col1">费用总计:{{orderInfo.settleAmount +'元'}}</td>
|
<td class="col1">费用总计:{{orderInfo.settleAmount +'元'}}</td>
|
||||||
<td class="col2" style="width: 100%;display: flex;justify-content: center;box-sizing: border-box">
|
<td class="col2" style="width: 100%;display: flex;justify-content: center;box-sizing: border-box">
|
||||||
<input :disabled="true" v-model="form.supplierSettleAmount"/>
|
<input class="disable" :readonly="true" v-model="form.supplierSettleAmount"/>
|
||||||
<button class="btnCom" @click="compute">计算</button>
|
<button class="btnCom" @click="compute">计算</button>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -352,6 +352,7 @@ export default {
|
|||||||
},
|
},
|
||||||
computed:{
|
computed:{
|
||||||
basePriceDisabled(){
|
basePriceDisabled(){
|
||||||
|
// return false
|
||||||
return !(this.serviceType == '困境救援' || this.serviceType == '困境-吊车' || this.serviceType == '困境救援-事故' || this.serviceType == '困境救援-故障'
|
return !(this.serviceType == '困境救援' || this.serviceType == '困境-吊车' || this.serviceType == '困境救援-事故' || this.serviceType == '困境救援-故障'
|
||||||
|| (this.fixedPrice && parseFloat(this.fixedPrice) > 0 && this.fixedPriceType) || this.supplierId == 500921)
|
|| (this.fixedPrice && parseFloat(this.fixedPrice) > 0 && this.fixedPriceType) || this.supplierId == 500921)
|
||||||
},
|
},
|
||||||
@ -582,6 +583,9 @@ export default {
|
|||||||
background-color: #F4F5F7;
|
background-color: #F4F5F7;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
.disable{
|
||||||
|
color: #999999;;
|
||||||
|
}
|
||||||
.navBar{
|
.navBar{
|
||||||
margin-bottom: 46px;
|
margin-bottom: 46px;
|
||||||
}
|
}
|
||||||
@ -630,6 +634,8 @@ img{
|
|||||||
input{
|
input{
|
||||||
border: none;
|
border: none;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
padding-right: 3px;
|
||||||
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
.titleContent{
|
.titleContent{
|
||||||
@include fontWeightSize(bold,13px);
|
@include fontWeightSize(bold,13px);
|
||||||
@ -763,17 +769,15 @@ img{
|
|||||||
}
|
}
|
||||||
.btn{
|
.btn{
|
||||||
margin-top: 31px;
|
margin-top: 31px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 31px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
//padding: 0 8px;
|
|
||||||
button{
|
button{
|
||||||
@include wh(105px,39px);
|
@include wh(105px,39px);
|
||||||
line-height: 39px;
|
line-height: 39px;
|
||||||
background: #9EA7C0;
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
color: #FFFFFF;
|
@include bgFontColor(#FFFFFF,#9EA7C0);
|
||||||
@include fontWeightSize(bold,14px);
|
@include fontWeightSize(bold,14px);
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user