优化:商品添加和编辑兼容供应商商品

This commit is contained in:
wuhui_zzw 2024-02-27 17:05:21 +08:00
parent 1b9f915de5
commit a235982cc9
1 changed files with 517 additions and 460 deletions

View File

@ -2,19 +2,13 @@
<div class="divBox">
<el-card class="box-card">
<div class="clearfix">
<!-- <el-steps :active="currentTab" align-center finish-status="success">
<el-step title="商品信息" />
<el-step title="商品详情" />
<el-step title="其他设置" />
<el-step title="规格设置" />
</el-steps> -->
<el-tabs v-if="headTab.length > 0" v-model="currentTab">
<el-tab-pane
v-for="(item, index) in headTab"
:key="index"
:name="item.name"
:label="item.title"
/>
<el-tabs v-model="currentTab">
<el-tab-pane :name="'1'" label="商品信息" />
<el-tab-pane :name="'2'" label="规格设置" />
<el-tab-pane :name="'3'" label="商品详情" />
<el-tab-pane :name="'4'" label="营销设置" v-if="config.merchant_type != 2"/>
<el-tab-pane :name="'5'" label="积分设置" v-if="config.merchant_type != 2"/>
<el-tab-pane :name="'6'" label="其他设置" />
</el-tabs>
</div>
<el-form
@ -25,21 +19,33 @@
:rules="ruleValidate"
:model="formValidate"
label-width="130px"
@submit.native.prevent
>
<el-row v-if="currentTab == '1'" :gutter="24">
@submit.native.prevent>
<!-- 商品信息-->
<el-row v-if="currentTab == '1'" :gutter="24">
<el-col :span="24">
<el-form-item label="商品类型:" required>
<div
<div class="virtual" :class="formValidate.type == 0 ? 'virtual_boder' : 'virtual_boder2'" @click="virtualbtn(0, 2)">
<div class="virtual_top">普通商品</div>
<div class="virtual_bottom">(物流发货)</div>
<div v-if="formValidate.type == 0" class="virtual_san" />
<div v-if="formValidate.type == 0" class="virtual_dui">
</div>
</div>
<div v-if="config.merchant_type != 2" class="virtual" :class="formValidate.type == 1 ? 'virtual_boder' : 'virtual_boder2'" @click="virtualbtn(1, 2)">
<div class="virtual_top">虚拟商品</div>
<div class="virtual_bottom">(虚拟发货)</div>
<div v-if="formValidate.type == 1" class="virtual_san" />
<div v-if="formValidate.type == 1" class="virtual_dui">
</div>
</div>
<!--<div
v-for="(item, index) in virtual"
:key="index"
class="virtual"
:class="
formValidate.type == item.id
? 'virtual_boder'
: 'virtual_boder2'
"
:class="formValidate.type == item.id ? 'virtual_boder' : 'virtual_boder2'"
@click="virtualbtn(item.id, 2)"
>
<div class="virtual_top">{{ item.tit }}</div>
@ -48,7 +54,7 @@
<div v-if="formValidate.type == item.id" class="virtual_dui">
</div>
</div>
</div>-->
</el-form-item>
</el-col>
<el-col :span="24">
@ -73,7 +79,7 @@
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-col :span="24" v-if="config.merchant_type != 2" >
<el-form-item label="商户商品分类:">
<el-cascader
v-model="formValidate.mer_cate_id"
@ -215,14 +221,29 @@
</el-col>
<el-col :span="24">
<el-form-item label="单位:" prop="unit_name">
<el-input
v-model="formValidate.unit_name"
placeholder="请输入单位"
class="selWidth"
/>
<el-input v-model="formValidate.unit_name" placeholder="请输入单位" class="selWidth" />
</el-form-item>
<template v-if="config.merchant_type == 2 && formValidate.unit_name">
<el-form-item label="是否允许按批购买:">
<el-radio-group v-model="formValidate.is_batch">
<el-radio :label="0" class="radio"></el-radio>
<el-radio :label="1"></el-radio>
</el-radio-group>
</el-form-item>
<template v-if="formValidate.is_batch == 1">
<el-form-item label="一批次的单位:">
<el-input placeholder="箱" v-model="formValidate.batch_unit" class="selWidth"></el-input>
</el-form-item>
<el-form-item label="是否支持按批购买:">
<el-input type="number" placeholder="请输入一批次的数量" max="200" v-model.number="formValidate.batch_num" class="selWidth">
<template slot="prepend">一批次等于</template>
<template slot="append">{{ formValidate.unit_name || '件' }}</template>
</el-input>
</el-form-item>
</template>
</template>
</el-col>
<el-col :span="24">
<el-col :span="24" v-if="config.merchant_type != 2">
<el-form-item label="商品关键字:">
<el-input
v-model="formValidate.keyword"
@ -242,8 +263,7 @@
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-col :span="24" v-if="config.merchant_type != 2">
<el-form-item label="优惠券(赠送券):" class="proCoupon">
<div class="acea-row">
<el-tag
@ -259,14 +279,15 @@
class="mr15"
size="mini"
@click="addCoupon"
>选择优惠券</el-button>
>选择优惠券
</el-button>
</div>
</el-form-item>
</el-col>
</el-row>
<!-- 规格设置 -->
<el-row v-if="currentTab == '2'">
<el-col :span="24">
<el-col :span="24" v-if="config.merchant_type != 2">
<el-form-item
v-if="extensionStatus > 0"
label="佣金设置:"
@ -281,7 +302,7 @@
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-col :span="24" v-if="config.merchant_type != 2">
<el-form-item
v-if="open_svip"
label="付费会员价设置:"
@ -299,10 +320,7 @@
</el-col>
<el-col :span="24">
<el-form-item label="商品规格:" props="spec_type">
<el-radio-group
v-model="formValidate.spec_type"
@change="onChangeSpec(formValidate.spec_type)"
>
<el-radio-group v-model="formValidate.spec_type" @change="onChangeSpec(formValidate.spec_type)">
<el-radio :label="0" class="radio">单规格</el-radio>
<el-radio :label="1">多规格</el-radio>
</el-radio-group>
@ -325,12 +343,14 @@
class="ml15"
size="mini"
@click="confirm"
>确认</el-button>
>确认
</el-button>
<el-button
class="ml15"
size="small"
@click="addRule"
>添加规格模板</el-button>
>添加规格模板
</el-button>
</div>
</el-form-item>
<el-form-item v-if="formValidate.attr.length > 0">
@ -372,7 +392,8 @@
class="button-new-tag"
size="small"
@click="showInput(item)"
>+ 添加</el-button>
>+ 添加
</el-button>
</div>
</div>
</el-form-item>
@ -400,7 +421,8 @@
class="ml15"
size="small"
@click="createAttrName"
>确定</el-button>
>确定
</el-button>
<el-button @click="offAttrName" size="small">取消</el-button>
</el-form-item>
</el-col>
@ -412,14 +434,16 @@
class="mr15"
size="small"
@click="addBtn"
>添加新规格</el-button>
>添加新规格
</el-button>
<el-button
type="success"
icon="md-add"
class="mr15"
size="small"
@click="generate"
>立即生成</el-button>
>立即生成
</el-button>
</el-form-item>
</el-col>
<!-- 批量设置-->
@ -545,7 +569,8 @@
v-if="scope.row.cdkey && !scope.row.cdkey.list && !scope.row.stock"
size="small"
@click="addVirtual(0, 'oneFormBatch')"
>添加卡密</el-button>
>添加卡密
</el-button>
<span v-else class="seeCatMy" @click="seeVirtual(oneFormBatch[0], 'oneFormBatch', 0)">已设置</span>
</template>
</el-table-column>
@ -587,7 +612,8 @@
class="submission"
@click="batchAdd"
size="small"
>批量添加</el-button>
>批量添加
</el-button>
</template>
</el-table-column>
</el-table>
@ -596,12 +622,7 @@
<el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
<!-- 单规格表格-->
<el-form-item v-if="formValidate.spec_type === 0">
<el-table
:data="OneattrValue"
border
class="tabNumWidth"
size="mini"
>
<el-table :data="OneattrValue" border class="tabNumWidth" size="mini">
<el-table-column align="center" label="图片" min-width="80">
<template slot-scope="scope">
<div
@ -617,13 +638,7 @@
</div>
</template>
</el-table-column>
<el-table-column
v-for="(item, iii) in attrValue"
:key="iii"
:label="formThead[iii] && formThead[iii].title"
align="center"
min-width="120"
>
<el-table-column v-for="(item, iii) in attrValue" :key="iii" :label="formThead[iii] && formThead[iii].title" align="center" min-width="120">
<template slot-scope="scope">
<div v-if="formValidate.svip_price_type != 0 && formThead[iii]">
<el-input-number
@ -666,22 +681,9 @@
class="priceBox"
/>
</div>
<div v-else>
<el-input
v-if="formThead[iii].title === '商品编号'"
v-model="scope.row[iii]"
type="text"
class="priceBox"
/>
<el-input-number
v-else
v-model="scope.row[iii]"
:min="0"
:disabled="formThead[iii].title === '库存' && formValidate.type == 2"
class="priceBox"
controls-position="right"
/>
<el-input v-if="formThead[iii].title === '商品编号'" v-model="scope.row[iii]" type="text" class="priceBox" />
<el-input-number v-else v-model="scope.row[iii]" :min="0" :disabled="formThead[iii].title === '库存' && formValidate.type == 2" class="priceBox" controls-position="right" />
</div>
</template>
</el-table-column>
@ -696,7 +698,8 @@
v-if="scope.row.cdkey && !scope.row.cdkey.list && !scope.row.stock"
size="small"
@click="addVirtual(0, 'OneattrValue')"
>添加卡密</el-button>
>添加卡密
</el-button>
<span v-else class="seeCatMy" @click="seeVirtual(OneattrValue[0], 'OneattrValue', 0)">已设置</span>
</template>
</el-table-column>
@ -858,7 +861,8 @@
v-if="!scope.row.cdkey || (scope.row.cdkey && !scope.row.cdkey.list && !scope.row.stock)"
size="small"
@click="addVirtual(scope.$index, 'ManyAttrValue')"
>添加卡密</el-button>
>添加卡密
</el-button>
<span v-else class="seeCatMy" @click="seeVirtual(ManyAttrValue[scope.$index], 'ManyAttrValue', scope.$index)">已设置</span>
</template>
</el-table-column>
@ -918,11 +922,7 @@
<el-row v-if="currentTab == '3'">
<el-col :span="24">
<el-form-item label="商品详情:">
<vue-ueditor-wrap
v-model="formValidate.content"
:config="myConfig"
@beforeInit="addCustomDialog"
/>
<vue-ueditor-wrap v-model="formValidate.content" :config="myConfig" @beforeInit="addCustomDialog" />
</el-form-item>
</el-col>
</el-row>
@ -1002,10 +1002,13 @@
<el-radio :label="1">固定数量</el-radio>
</el-radio-group>
<div v-if="formValidate.integral_give_type == 1">
赠送<el-input-number v-model="formValidate.integral_give_money" :min="1" :step="1" controls-position="right" placeholder="请输入数量" />积分
赠送
<el-input-number v-model="formValidate.integral_give_money" :min="1" :step="1" controls-position="right" placeholder="请输入数量" />
积分
</div>
<div v-else>
<el-input-number v-model="formValidate.integral_give_rate" :min="0.01" :max="100" :step="0.01" controls-position="right" placeholder="请输入比例" />%
<el-input-number v-model="formValidate.integral_give_rate" :min="0.01" :max="100" :step="0.01" controls-position="right" placeholder="请输入比例" />
%
</div>
<div class="tips">百分比当前订单该商品实际支付总金额 * 设置的比例 = 赠送的积分固定数量指定数量 * 购买的商品数量 = 赠送的积分</div>
</el-form-item>
@ -1029,10 +1032,13 @@
<el-radio :label="1">固定数量</el-radio>
</el-radio-group>
<div v-if="formValidate.integral_deduction_type == 1">
抵扣<el-input-number v-model="formValidate.integral_deduction_money" :min="0.01" :step="0.01" controls-position="right" placeholder="请输入抵扣金额" />
抵扣
<el-input-number v-model="formValidate.integral_deduction_money" :min="0.01" :step="0.01" controls-position="right" placeholder="请输入抵扣金额" />
</div>
<div v-else>
<el-input-number v-model="formValidate.integral_rate" :min="0.01" :max="100" :step="0.01" controls-position="right" placeholder="请输入抵扣比例" />%
<el-input-number v-model="formValidate.integral_rate" :min="0.01" :max="100" :step="0.01" controls-position="right" placeholder="请输入抵扣比例" />
%
</div>
<div class="tips">百分比当前订单该商品实际支付总金额 * 设置的比例 = 可以抵扣的金额固定数量指定数量 * 购买的商品数量 = 可以抵扣的金额</div>
</el-form-item>
@ -1042,7 +1048,7 @@
</el-row>
<!-- 其它设置 -->
<el-row v-if="currentTab == '6'">
<el-col>
<el-col v-if="config.merchant_type != 2">
<el-form-item label="支持退款:">
<el-switch
v-model="formValidate.refund_switch"
@ -1112,7 +1118,8 @@
class="ml15"
size="small"
@click="addTem"
>添加运费模板</el-button>
>添加运费模板
</el-button>
</div>
</el-form-item>
</el-col>
@ -1182,7 +1189,8 @@
class="ml15"
size="small"
@click="addServiceTem"
>添加服务说明模板</el-button>
>添加服务说明模板
</el-button>
</div>
</el-form-item>
</el-col>
@ -1239,7 +1247,8 @@
type="text"
class="submission"
@click.native.prevent="delSpecs(scope.$index)"
>删除</el-button>
>删除
</el-button>
</template>
</el-table-column>
</el-table>
@ -1248,7 +1257,8 @@
size="small"
class="mt20"
@click="addSpecs"
>添加参数</el-button>
>添加参数
</el-button>
<el-select
v-model="customSpecs"
multiple
@ -1323,39 +1333,10 @@
</el-col>
</el-row>
<el-form-item style="margin-top:30px;">
<el-button
v-show="currentTab > 1"
type="primary"
class="submission"
size="small"
@click="handleSubmitUp"
>上一步
</el-button>
<el-button
v-show="currentTab < 5"
type="primary"
class="submission"
size="small"
@click="handleSubmitNest('formValidate')"
>下一步
</el-button>
<el-button
v-show="currentTab == '5' || $route.params.id"
:loading="loading"
type="primary"
class="submission"
size="small"
@click="handleSubmit('formValidate')"
>提交
</el-button>
<el-button
:loading="loading"
type="primary"
class="submission"
size="small"
@click="handlePreview('formValidate')"
>预览
</el-button>
<el-button v-show="currentTab > 1" type="primary" class="submission" size="small" @click="handleSubmitUp">上一步</el-button>
<el-button v-show="currentTab < 6" type="primary" class="submission" size="small" @click="handleSubmitNest('formValidate')">下一步</el-button>
<el-button v-show="currentTab == '6' || $route.params.id" :loading="loading" type="primary" class="submission" size="small" @click="handleSubmit('formValidate')">提交</el-button>
<!--<el-button :loading="loading" type="primary" class="submission" size="small" @click="handlePreview('formValidate')">预览</el-button>-->
</el-form-item>
</el-form>
</el-card>
@ -1427,6 +1408,9 @@ const defaultObj = {
mer_cate_id: [], // id
param_temp_id: [],
unit_name: '',
is_batch: 0, //
batch_num: 0, //
batch_unit: '', //
sort: 0,
once_max_count: 0,
is_good: 0,
@ -1518,8 +1502,7 @@ export default {
draggable: vuedraggable,
},
data() {
const url =
SettingMer.https + '/upload/image/0/file?ueditor=1&token=' + getToken()
const url = SettingMer.https + '/upload/image/0/file?ueditor=1&token=' + getToken()
return {
myConfig: {
autoHeightEnabled: false, //
@ -1650,11 +1633,11 @@ export default {
previewVisible: false,
previewKey: '',
deliveryType: [],
virtual: [
{ tit: '普通商品', id: 0, tit2: '物流发货' },
{ tit: '虚拟商品', id: 1, tit2: '虚拟发货' }
// { tit: '/', id: 2, tit2: '' }
],
// virtual: [
// {tit: '', id: 0, tit2: ''},
// {tit: '', id: 1, tit2: ''}
// // { tit: '/', id: 2, tit2: '' }
// ],
customBtn: 0, //
//
CustomList: [
@ -1694,14 +1677,6 @@ export default {
customess: {
content: []
}, //
headTab: [
{ title: '商品信息', name: '1' },
{ title: '规格设置', name: '2' },
{ title: '商品详情', name: '3' },
{ title: '营销设置', name: '4' },
{ title: '积分设置', name: '5' },
{ title: '其他设置', name: '6' }
],
type: 0,
modals: false,
attrVal: {
@ -1752,11 +1727,22 @@ export default {
align: "center",
width: 95,
},
config: {},//
}
},
computed: {
attrValue() {
const obj = Object.assign({}, this.attrVal)
if (this.config.merchant_type == 2) {
delete obj['cost']
delete obj['ot_price']
delete obj['bar_code']
delete obj['weight']
delete obj['volume']
}
console.log(obj)
return obj
},
// oneFormBatch() {
@ -1776,6 +1762,14 @@ export default {
immediate: false,
deep: true
},
'formValidate.batch_num': {
handler: function (val) {
let num = this.formValidate.batch_num || 0
if (Number(num) > 200) this.formValidate.batch_num = 200
},
immediate: false,
deep: true
},
currentTab(newVal) {
if (newVal == 5) {
this.$nextTick(e => {
@ -1817,7 +1811,10 @@ export default {
} else {
this.type = 0
}
//
this.$root.getConfig().then((res) => {
this.config = res
})
},
destroyed() {
window.removeEventListener('popstate', this.goBack, false)
@ -1950,7 +1947,9 @@ export default {
res.data.mer_svip_status == 1 && res.data.svip_switch_status == 1
this.svip_rate = res.data.svip_store_rate
const name = this.formValidate.type == 0 ? '快递配送' : this.formValidate.type == 1 ? '虚拟发货' : '卡密发货'
if (!this.$route.params.id) { this.formValidate.delivery_way = this.deliveryType }
if (!this.$route.params.id) {
this.formValidate.delivery_way = this.deliveryType
}
if (this.deliveryType.length == 2) {
if (this.formValidate.type == 2) {
this.deliveryList = [
@ -2124,6 +2123,7 @@ export default {
let data = [], that = this;
let res = []
return format(arr)
function format(arr) {
if (arr.length > 1) {
arr.forEach((v, i) => {
@ -2489,10 +2489,12 @@ export default {
var s2 = arg2.toString()
try {
max += s1.split('.')[1].length
} catch (e) {}
} catch (e) {
}
try {
max += s2.split('.')[1].length
} catch (e) {}
} catch (e) {
}
return (
(Number(s1.replace('.', '')) * Number(s2.replace('.', ''))) /
Math.pow(10, max)
@ -2695,7 +2697,11 @@ export default {
integral_give_money: info.integral_give_money || 0,
//
integral_deduction_type: info.integral_deduction_type || 0,
integral_deduction_money: info.integral_deduction_money || 0
integral_deduction_money: info.integral_deduction_money || 0,
//
is_batch: info.is_batch || 0,
batch_num: info.batch_num || 0,
batch_unit: info.batch_unit || '',
};
if (info.svip_price_type != 0 && info.mer_svip_status) {
this.attrVal = {
@ -2764,12 +2770,16 @@ export default {
}, tit);
},
handleSubmitUp() {
this.currentTab = (Number(this.currentTab) - 1).toString();
let currentTab = (Number(this.currentTab) - 1).toString();
if(this.config.merchant_type == 2 && (currentTab == 4 || currentTab == 5)) currentTab = '3';
this.currentTab = currentTab;
},
handleSubmitNest(name) {
this.$refs[name].validate(valid => {
if (valid) {
this.currentTab = (Number(this.currentTab) + 1).toString();
let currentTab = (Number(this.currentTab) + 1).toString();
if(this.config.merchant_type == 2 && (currentTab == 4 || currentTab == 5)) currentTab = '6';
this.currentTab = currentTab;
}
});
},
@ -2959,9 +2969,11 @@ export default {
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.goods_detail .goods_detail_wrapper {
z-index: -10;
}
/deep/ .upLoadPicBox {
.upLoad {
-webkit-box-orient: vertical;
@ -2972,72 +2984,90 @@ export default {
flex-direction: column;
line-height: 20px;
}
span {
font-size: 10px;
}
}
.proCoupon {
/deep/ .el-form-item__content {
margin-top: 5px;
}
}
.tabPic {
width: 40px !important;
height: 40px !important;
img {
width: 100%;
height: 100%;
}
}
.noLeft {
/deep/ .el-form-item__content {
margin-left: 0 !important;
}
}
.tabNumWidth {
/deep/ .el-input-number--medium {
width: 100px;
}
/deep/ .el-input-number__increase {
width: 20px !important;
font-size: 12px !important;
}
/deep/ .el-input-number__decrease {
width: 20px !important;
font-size: 12px !important;
}
/deep/ .el-input-number--medium .el-input__inner {
padding-left: 25px !important;
padding-right: 25px !important;
}
/deep/ .priceBox .el-input-number__decrease,
/deep/ .priceBox .el-input-number__increase {
display: none;
}
/deep/ .priceBox .el-input-number.is-controls-right .el-input__inner {
padding: 0 5px;
}
/deep/ thead {
line-height: normal !important;
}
/deep/ .cell {
line-height: normal !important;
text-overflow: clip !important;
}
}
.seeCatMy {
color: #437FFD;
cursor: pointer;
}
.selectOn {
color: #437FFD;
}
.virtual_boder {
border: 1px solid #437FFD;
}
.virtual_boder2 {
border: 1px solid #e7e7e7;
}
.virtual_san {
position: absolute;
bottom: 0;
@ -3047,6 +3077,7 @@ export default {
border-bottom: 26px solid #437FFD;
border-left: 26px solid transparent;
}
.virtual_dui {
position: absolute;
bottom: -2px;
@ -3054,6 +3085,7 @@ export default {
color: #ffffff;
font-family: system-ui;
}
.virtual {
width: 120px;
height: 60px;
@ -3065,20 +3097,24 @@ export default {
position: relative;
cursor: pointer;
line-height: 23px;
.virtual_top {
font-size: 14px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
}
.virtual_bottom {
font-size: 12px;
font-weight: 400;
color: #999999;
}
}
.virtual:nth-child(2n) {
margin: 0 12px;
}
.addfont {
display: inline-block;
font-size: 13px;
@ -3087,49 +3123,60 @@ export default {
margin-left: 14px;
cursor: pointer;
}
.titTip {
display: inline-bolck;
font-size: 12px;
font-weight: 400;
color: #999999;
}
.addCustom_content {
margin-top: 20px;
.custom_box {
margin-bottom: 10px;
}
}
.addCustomBox {
margin-top: 12px;
font-size: 13px;
font-weight: 400;
color: #437FFD;
.btn {
cursor: pointer;
width: max-content;
}
.remark {
display: flex;
margin-top: 14px;
}
}
.selWidth {
width: 50%;
}
.ml15 {
margin-left: 15px;
}
.button-new-tag {
height: 28px;
line-height: 26px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
.pictrue {
width: 60px;
height: 60px;
@ -3137,11 +3184,13 @@ export default {
margin-right: 10px;
position: relative;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.iview-video-style {
width: 40%;
height: 180px;
@ -3151,6 +3200,7 @@ export default {
position: relative;
overflow: hidden;
}
.iconv {
color: #fff;
line-height: 180px;
@ -3161,6 +3211,7 @@ export default {
left: 50%;
margin-left: -25px;
}
.iview-video-style .mark {
position: absolute;
width: 100%;
@ -3169,15 +3220,19 @@ export default {
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
}
.uploadVideo {
margin-left: 10px;
}
.perW50 {
width: 50%;
}
.submission {
margin-left: 10px;
}
.btndel {
position: absolute;
z-index: 1;
@ -3186,6 +3241,7 @@ export default {
left: 46px;
top: -4px;
}
.labeltop {
/deep/ .el-form-item__label {
float: none !important;
@ -3194,6 +3250,7 @@ export default {
width: auto !important;
}
}
.tips {
height: 50px;
line-height: 50px;