555 lines
20 KiB
Vue
555 lines
20 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 顶部操作条 -->
|
||
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
|
||
<block slot="backText">返回</block>
|
||
<block slot="content">任务大厅</block>
|
||
</cu-custom>
|
||
<view class="sticky-bar" :style="[{top: stickyTop + 'px'}]">
|
||
<!-- 搜索栏 -->
|
||
<view class="cu-bar search bg-white">
|
||
<view class="search-form round">
|
||
<text class="cuIcon-search"></text>
|
||
<input @confirm="searchTasks" v-model="inputGoodsName" :adjust-position="true" type="text" placeholder="输入搜索的内容"
|
||
confirm-type="search"></input>
|
||
</view>
|
||
<view class="action">
|
||
<button class="cu-btn bg-main-color shadow-blur round" @click="searchTasks">搜索</button>
|
||
</view>
|
||
</view>
|
||
<!-- 条件筛选栏 -->
|
||
<scroll-view scroll-x class="bg-white nav text-center" :scroll-with-animation="true"
|
||
:scroll-left="scrollLeft">
|
||
<view class="cu-item" v-for="(item,index) in taskConditions" v-if="item.type !== 1" :key="index"
|
||
@tap="tabSelect" :data-id="index">
|
||
<!-- 区域筛选picker -->
|
||
<picker v-if="item.code === 'countryId'" :mode="'multiSelector'" @change="regionChange" @columnchange="regionColChange"
|
||
:value="areaMultiIndex" :range-key="'areaName'" :range="areaList">
|
||
<view class="flex justify-start">
|
||
<view class="text-cut search-nav-item-text">
|
||
{{chosenArea && chosenArea.length ? chosenArea[2].areaName : item.title}}
|
||
</view>
|
||
<text class="text-lg"><text class="cuIcon-triangledownfill"></text></text>
|
||
</view>
|
||
</picker>
|
||
<!-- 品类筛选picker -->
|
||
<picker v-else-if="item.code === 'goodsCategoryId'" :mode="'multiSelector'" @change="categoryChange"
|
||
@columnchange="categoryColChange" :value="categoryMultiIndex" :range-key="'goodsCategoryName'"
|
||
:range="categoryList">
|
||
<view class="flex justify-start">
|
||
<view class="text-cut search-nav-item-text">
|
||
{{chosenCategory && chosenCategory.length ? chosenCategory[2].goodsCategoryName : item.title}}
|
||
</view>
|
||
<text class="text-lg"><text class="cuIcon-triangledownfill"></text></text>
|
||
</view>
|
||
</picker>
|
||
<view v-else class="flex justify-start">
|
||
<view class="search-nav-item-text">{{item.title}}</view>
|
||
<text v-if="item.type === 0" class="text-lg"><text
|
||
:class="item.value === 0 ? 'cuIcon-triangleupfill' : 'cuIcon-triangledownfill'"></text></text>
|
||
<text v-else class="text-lg"><text class="cuIcon-triangledownfill"></text></text>
|
||
</view>
|
||
</view>
|
||
<view class="cu-item" v-else>
|
||
<button class="cu-btn bg-grey round shadow-blur" @click="barBtnClick(index)">{{item.title}}</button>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<!-- 任务单 -->
|
||
<view class="margin-lr-sm margin-bottom-lg">
|
||
<view v-for="(task, index) in tasks" class="padding bg-white margin-top-sm">
|
||
<view class="flex justify-between">
|
||
<view class="text-lg text-bold text-cut" style="width: 70%;">{{task.goodsName}}</view>
|
||
<view class="text-right">
|
||
<view class="text-lg text-price text-red text-bold">{{task.totalMoney}}</view>
|
||
<view v-if="task.expeditedPrice">
|
||
<text>加急：</text><text class="text-price text-red text-bold">{{task.expeditedPrice}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex justify-start" v-if="task.tag">
|
||
<view v-for="(tagContent, index1) in task.tag" class='cu-tag margin-right-xs'>{{tagContent}}</view>
|
||
</view>
|
||
<view class="margin-top-sm">
|
||
<text class="text-main-color text-lg margin-right-xs"><text
|
||
class="cuIcon-locationfill"></text></text>
|
||
<text>{{task.address}}</text>
|
||
</view>
|
||
<view class="margin-top-sm">
|
||
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-timefill"></text></text>
|
||
<text>{{task.expectTimeStart + '~' + task.expectTimeEnd}}</text>
|
||
</view>
|
||
<view class="padding-top-sm flex justify-end">
|
||
<button class="cu-btn bg-main-color margin-right-xs shadow-blur" data-modal="showForwardModal"
|
||
@click="showModal($event, task)">转发</button>
|
||
<button class="cu-btn bg-main-color margin-right-xs shadow-blur" data-modal="showAddPriceModal"
|
||
@click="showModal($event, task)">加价</button>
|
||
<button class="cu-btn bg-main-color margin-right-xs shadow-blur" v-if="task.canQuote">报价</button>
|
||
<button class="cu-btn bg-main-color margin-right-xs shadow-blur"
|
||
@click="showDemandDetail($event, task)">查看</button>
|
||
<button class="cu-btn bg-main-color shadow-blur" data-take-modal="showTakeSuccessModal"
|
||
data-certify-modal="showTakeCertifiedModal" @click="takeTask($event, task)">接单</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<load-status-bar ref="loadStatusBar" @loadMore="loadMasterOrderPage"></load-status-bar>
|
||
|
||
<!-- 加价模态框 -->
|
||
<view class="cu-modal" :class="showAddPriceModal?'show':''">
|
||
<view class="cu-dialog">
|
||
<view class="cu-bar bg-white justify-end solid-bottom">
|
||
<view class="content">加价申请</view>
|
||
<view class="action" data-modal="showAddPriceModal" @tap="hideModal">
|
||
<text class="cuIcon-close text-red"></text>
|
||
</view>
|
||
</view>
|
||
<view class="padding-xl bg-white text-left">
|
||
<view class="flex justify-center align-center margin-top-sm">
|
||
<text>加价金额：</text>
|
||
<input class="radius-input" type="digit"></input>
|
||
<text>元</text>
|
||
</view>
|
||
<view class="margin-top-sm flex justify-center">
|
||
<textarea class="solid radius text-left padding-sm" maxlength="-1" name="comments"
|
||
placeholder="加价原因备注"></textarea>
|
||
</view>
|
||
</view>
|
||
<view class="cu-bar bg-white solid-top">
|
||
<view class="action margin-0 flex-sub text-black" data-modal="showAddPriceModal" @tap="hideModal">取消
|
||
</view>
|
||
<view class="action margin-0 flex-sub text-main-color solid-left" @tap="hideModal"
|
||
data-modal="showAddPriceModal" @click="applyAddPrice">立即提交</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 推荐奖励模态框 -->
|
||
<view class="cu-modal" :class="showForwardModal?'show':''">
|
||
<view class="cu-dialog">
|
||
<view class="cu-bar bg-white justify-end solid-bottom">
|
||
<view class="content">推荐奖励</view>
|
||
<view class="action" data-modal="showForwardModal" @tap="hideModal">
|
||
<text class="cuIcon-close text-red"></text>
|
||
</view>
|
||
</view>
|
||
<view class="padding-xl bg-white">
|
||
<view>推荐转发有奖励，按每个奖励链接计算累计200单每单一元合计200元进行持续奖励：</view>
|
||
<view class="margin-top-sm">推荐本单另行奖励的金额如下</view>
|
||
<view class="flex justify-center align-center margin-top-sm">
|
||
<text>奖励金额：</text>
|
||
<input class="radius-input" type="digit"></input>
|
||
<text>元</text>
|
||
</view>
|
||
</view>
|
||
<view class="cu-bar bg-white solid-top">
|
||
<view class="action margin-0 flex-sub text-black" data-modal="showForwardModal" @tap="hideModal">取消
|
||
</view>
|
||
<view class="action margin-0 flex-sub text-main-color solid-left" data-modal="showForwardModal"
|
||
@tap="hideModal" @click="forwardTask">立即推荐</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 接单认证模态框 -->
|
||
<view class="cu-modal" :class="showTakeCertifiedModal?'show':''">
|
||
<view class="cu-dialog">
|
||
<view class="padding-xl">
|
||
<view class="cuIcon-profile big-icon padding-tb text-main-color"></view>
|
||
<view>您还未进行认证</view>
|
||
</view>
|
||
<view class="cu-bar bg-white solid-top">
|
||
<view class="action margin-0 flex-sub text-black" data-modal="showTakeCertifiedModal"
|
||
@tap="hideModal">以后认证</view>
|
||
<view class="action margin-0 flex-sub text-main-color solid-left"
|
||
data-modal="showTakeCertifiedModal" @tap="hideModal" @click="goToCertify">立即认证</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 接单成功模态框 -->
|
||
<view class="cu-modal" :class="showTakeSuccessModal?'show':''">
|
||
<view class="cu-dialog">
|
||
<view class="padding-xl">
|
||
<view class="cuIcon-roundcheck big-icon padding-tb text-main-color"></view>
|
||
<view class="text-bold text-lg margin-bottom-sm">接单成功</view>
|
||
<view>请在30分钟内联系客户，预约好上门时间，并在订单中操作排单时间，超时6倍将受平台处罚管理；该订单佣金在完成任务24小时内计入您的账户</view>
|
||
</view>
|
||
<view class="cu-bar bg-white solid-top">
|
||
<view class="action margin-0 flex-sub text-black" data-modal="showTakeSuccessModal"
|
||
@click="contactCustomer">联系客户</view>
|
||
<view class="action margin-0 flex-sub text-main-color solid-left" data-modal="showTakeSuccessModal"
|
||
@tap="hideModal">继续接单</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 账户及实名弹窗 -->
|
||
<vertify-bank-bind ref="vertifyBankBind"></vertify-bank-bind>
|
||
<vertify-certify ref="vertifyCertify"></vertify-certify>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import loadStatusBar from '@/components/custom-bar/load-status-bar.vue';
|
||
|
||
export default {
|
||
components: {
|
||
loadStatusBar
|
||
},
|
||
data() {
|
||
return {
|
||
tabCur: 0,
|
||
scrollLeft: 0,
|
||
stickyTop: this.CustomBar,
|
||
pageNum: 1,
|
||
pageSize: 0,
|
||
// type: 0=升降序，1=功能按钮；order: 0=升序，1=降序；
|
||
taskConditions: [{
|
||
code: 'countryId',
|
||
title: '区域',
|
||
type: 2
|
||
}, {
|
||
code: 'goodsCategoryId',
|
||
title: '品类',
|
||
type: 2
|
||
},
|
||
// {
|
||
// code: 'distance',
|
||
// title: '距离',
|
||
// type: 0,
|
||
// value: 0,
|
||
// },
|
||
{
|
||
code: 'createTimeSort',
|
||
title: '时间',
|
||
type: 0,
|
||
value: 1,
|
||
}, {
|
||
code: 'reset',
|
||
type: 1,
|
||
title: '重置',
|
||
action: 'resetConditions'
|
||
}],
|
||
originTaskConditions: [{
|
||
code: 'countryId',
|
||
title: '区域',
|
||
type: 2
|
||
}, {
|
||
code: 'goodsCategoryId',
|
||
title: '品类',
|
||
type: 2
|
||
},
|
||
// {
|
||
// code: 'distance',
|
||
// title: '距离',
|
||
// type: 0,
|
||
// value: 0,
|
||
// },
|
||
{
|
||
code: 'createTimeSort',
|
||
title: '时间',
|
||
type: 0,
|
||
value: 1,
|
||
}, {
|
||
code: 'reset',
|
||
type: 1,
|
||
title: '重置',
|
||
action: 'resetConditions'
|
||
}],
|
||
tasks: [],
|
||
curTask: null,
|
||
takeCertify: false,
|
||
showAddPriceModal: false,
|
||
showForwardModal: false,
|
||
showTakeCertifiedModal: false,
|
||
showTakeSuccessModal: false,
|
||
curUserInfo: {},
|
||
inputGoodsName: null,
|
||
areaList: [],
|
||
areaMultiIndex: [0, 0, 0],
|
||
chosenArea: [],
|
||
categoryList: [],
|
||
categoryMultiIndex: [0, 0, 0],
|
||
chosenCategory: [],
|
||
bankCard: null,
|
||
certifyInfo: null
|
||
}
|
||
},
|
||
onShow() {
|
||
this.loadData();
|
||
},
|
||
methods: {
|
||
async loadData() {
|
||
this.curUserInfo = this.$request.getCurUserInfo();
|
||
this.checkBankAndCertify();
|
||
// this.tasks = await this.$api.data('tasks');
|
||
this.reloadMasterOrderPage();
|
||
// this.takeCertify = await this.$api.data('takeCertify');
|
||
// this.areaList = await this.$api.data('areaList');
|
||
// this.categoryList = await this.$api.data('categoryList');
|
||
this.loadCategoryList();
|
||
this.loadRegionList();
|
||
},
|
||
async checkBankAndCertify() {
|
||
// 查询账户绑定信息
|
||
let bankCardRes = await this.$request.getBindBankCardByWorkerId({
|
||
workerId: this.curUserInfo.workerId
|
||
});
|
||
this.bankCard = bankCardRes.data;
|
||
// 查询实名信息
|
||
let certifyInfoRes = await this.$request.getWorkerCertify();
|
||
this.certifyInfo = certifyInfoRes.data;
|
||
if ((!this.bankCard || !this.bankCard.bankNum) && this.curUserInfo.status != -1) {
|
||
this.$refs.vertifyBankBind.showModal();
|
||
return false;
|
||
} else if (!this.certifyInfo || !this.certifyInfo.workerCertificationId) {
|
||
this.$refs.vertifyCertify.showModal();
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
async loadMasterOrderPage(params = {}) {
|
||
params.pageSize = this.$globalData.initPageSize;
|
||
params.pageNum = this.pageNum;
|
||
params.orderStatus = 0;
|
||
params.workerId = -1;
|
||
params.goodsName = this.inputGoodsName;
|
||
this.taskConditions.forEach((condition) => {
|
||
if (condition.type === 2) {
|
||
params[condition.code] = condition.value;
|
||
} else if (condition.type === 0) {
|
||
params.params = params.params ? params.params : {};
|
||
params.params[condition.code] = condition.value === 1 ? 'desc' : 'asc';
|
||
}
|
||
})
|
||
|
||
this.$refs.loadStatusBar.showLoading();
|
||
try {
|
||
let res = await this.$request.qryMasterOrderPage(params);
|
||
if (res && res.rows) {
|
||
let rowsLength = res.rows.length;
|
||
if (rowsLength > 0) {
|
||
this.tasks = this.tasks.concat(res.rows);
|
||
// this.pageParams[this.tabCur].pageNum++;
|
||
this.pageNum++;
|
||
if (rowsLength === params.pageSize) {
|
||
this.$refs.loadStatusBar.showLoadMore();
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
this.$refs.loadStatusBar.showLoadOver();
|
||
} catch (e) {
|
||
console.error(e)
|
||
this.$refs.loadStatusBar.showLoadErr();
|
||
}
|
||
},
|
||
reloadMasterOrderPage(params = {}) {
|
||
this.pageNum = 1;
|
||
this.tasks = [];
|
||
this.$refs.loadStatusBar.showLoadMore();
|
||
this.loadMasterOrderPage(params);
|
||
},
|
||
tabSelect(e) {
|
||
this.tabCur = e.currentTarget.dataset.id;
|
||
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 70;
|
||
let conditionType = this.taskConditions[this.tabCur].type;
|
||
let conditionCode = this.taskConditions[this.tabCur].code;
|
||
if (conditionType === 0) {
|
||
// 升降序类型的条件切换升降序
|
||
let orderVal = this.taskConditions[this.tabCur].value;
|
||
this.taskConditions[this.tabCur].value = orderVal === 0 ? 1 : 0;
|
||
this.searchTasks();
|
||
}
|
||
},
|
||
barBtnClick(index) {
|
||
this[this.taskConditions[index].action]();
|
||
},
|
||
async loadCategoryList(idArr) {
|
||
let typeList = await this.$request.listByStep();
|
||
typeList = typeList.data;
|
||
let col1Id = idArr ? idArr[0] : typeList[0].goodsCategoryId;
|
||
let subTypeList = await this.$request.listByStep({
|
||
goodsCategoryId: col1Id
|
||
});
|
||
subTypeList = subTypeList.data;
|
||
let col2Id = idArr ? idArr[1] : subTypeList[0].goodsCategoryId;
|
||
let subSubTypeList = await this.$request.listByStep({
|
||
goodsCategoryId: col2Id
|
||
});
|
||
subSubTypeList = subSubTypeList.data;
|
||
this.categoryList.push(typeList);
|
||
this.categoryList.push(subTypeList);
|
||
this.categoryList.push(subSubTypeList);
|
||
},
|
||
async loadRegionList() {
|
||
let regionList = await this.$request.areaListByStep();
|
||
regionList = regionList.data;
|
||
let subRegionList = [];
|
||
let subSubRegionList = [];
|
||
if (regionList && regionList.length > 0) {
|
||
subRegionList = await this.$request.areaListByStep({
|
||
parentCode: regionList[0].areaCode
|
||
});
|
||
subRegionList = subRegionList.data;
|
||
}
|
||
if (subRegionList && subRegionList.length > 0) {
|
||
subSubRegionList = await this.$request.areaListByStep({
|
||
parentCode: subRegionList[0].areaCode
|
||
});
|
||
subSubRegionList = subSubRegionList.data;
|
||
}
|
||
this.areaList.push(regionList);
|
||
this.areaList.push(subRegionList);
|
||
this.areaList.push(subSubRegionList);
|
||
},
|
||
searchTasks() {
|
||
this.reloadMasterOrderPage();
|
||
},
|
||
resetConditions() {
|
||
this.inputGoodsName = null;
|
||
for(let i = 0; i < this.originTaskConditions.length; i++) {
|
||
this.taskConditions[i].value = this.originTaskConditions[i].value;
|
||
}
|
||
this.chosenArea = [];
|
||
this.chosenCategory = [];
|
||
// this.$forceUpdate();
|
||
this.reloadMasterOrderPage();
|
||
},
|
||
regionChange(e) {
|
||
this.areaMultiIndex = e.detail.value;
|
||
let chosenArea = [];
|
||
for (let i = 0; i < this.areaList.length; i++) {
|
||
chosenArea.push(this.areaList[i][this.areaMultiIndex[i]]);
|
||
}
|
||
this.chosenArea = chosenArea;
|
||
this.taskConditions[this.tabCur].value = chosenArea[chosenArea.length - 1].areaId;
|
||
this.searchTasks();
|
||
},
|
||
async regionColChange(e) {
|
||
let colObj = e.detail;
|
||
if (colObj.column == 0) {
|
||
// 通过一级查二级
|
||
let subAreaList = await this.$request.areaListByStep({parentCode: this.areaList[0][colObj.value].areaCode});
|
||
subAreaList = subAreaList.data;
|
||
let subSubAreaList = [];
|
||
if (subAreaList.length) {
|
||
subSubAreaList = await this.$request.areaListByStep({parentCode: subAreaList[0].areaCode});
|
||
subSubAreaList = subSubAreaList.data;
|
||
}
|
||
this.areaList.pop();
|
||
this.areaList.pop();
|
||
this.areaList.push(subAreaList);
|
||
this.areaList.push(subSubAreaList);
|
||
this.areaMultiIndex = [colObj.value, 0, 0];
|
||
} else if (colObj.column == 1) {
|
||
// 通过二级查三级
|
||
let subAreaList = await this.$request.areaListByStep({parentCode: this.areaList[1][colObj.value].areaCode});
|
||
subAreaList = subAreaList.data;
|
||
this.areaList.pop();
|
||
this.areaList.push(subAreaList);
|
||
this.areaMultiIndex = [this.areaMultiIndex[0], colObj.value, 0];
|
||
}
|
||
},
|
||
async categoryChange(e) {
|
||
this.categoryMultiIndex = e.detail.value;
|
||
let chosenCategory = [];
|
||
for (let i = 0; i < this.categoryList.length; i++) {
|
||
chosenCategory.push(this.categoryList[i][this.categoryMultiIndex[i]]);
|
||
}
|
||
this.chosenCategory = chosenCategory;
|
||
this.taskConditions[this.tabCur].value = chosenCategory[chosenCategory.length - 1].goodsCategoryId;
|
||
this.searchTasks();
|
||
},
|
||
async categoryColChange(e) {
|
||
let colObj = e.detail;
|
||
if (colObj.column == 0) {
|
||
// 通过一级查询二级
|
||
let subTypeList = await this.$request.listByStep({
|
||
goodsCategoryId: this.categoryList[0][colObj.value].goodsCategoryId
|
||
});
|
||
subTypeList = subTypeList.data;
|
||
let subSubTypeList = await this.$request.listByStep({
|
||
goodsCategoryId: subTypeList[0].goodsCategoryId
|
||
});
|
||
subSubTypeList = subSubTypeList.data;
|
||
this.categoryList.pop();
|
||
this.categoryList.pop();
|
||
this.categoryList.push(subTypeList);
|
||
this.categoryList.push(subSubTypeList);
|
||
this.categoryMultiIndex = [colObj.value, 0, 0];
|
||
} else if (colObj.column == 1) {
|
||
// 通过二级查三级
|
||
let subSubTypeList = await this.$request.listByStep({
|
||
goodsCategoryId: this.categoryList[1][colObj.value].goodsCategoryId
|
||
});
|
||
subSubTypeList = subSubTypeList.data;
|
||
this.categoryList.pop();
|
||
this.categoryList.push(subSubTypeList);
|
||
this.categoryMultiIndex = [this.categoryMultiIndex[0], colObj.value, 0];
|
||
}
|
||
},
|
||
showDemandDetail(e, task) {
|
||
let paramObj = {
|
||
orderMasterId: task.orderMasterId
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/demand-center/demand-detail?paramObj=' + encodeURIComponent(JSON.stringify(
|
||
paramObj))
|
||
})
|
||
},
|
||
async takeTask(e, task) {
|
||
let checkRes = await this.checkBankAndCertify();
|
||
if (!checkRes) {
|
||
return;
|
||
}
|
||
|
||
if (this.curUserInfo.status !== 0 || this.curUserInfo.type !== 0) {
|
||
// 未认证需提示前往认证
|
||
e.currentTarget.dataset.modal = e.currentTarget.dataset.certifyModal;
|
||
} else {
|
||
// 已认证可直接接单
|
||
let res = await this.$request.updateOrder({
|
||
workerId: this.curUserInfo.workerId,
|
||
id: task.orderMasterId
|
||
});
|
||
if (res && res.code === 0) {
|
||
e.currentTarget.dataset.modal = e.currentTarget.dataset.takeModal;
|
||
this.reloadMasterOrderPage();
|
||
}
|
||
}
|
||
this.showModal(e, task);
|
||
},
|
||
contactCustomer(e) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: this.curTask.customerPhone
|
||
})
|
||
},
|
||
goToCertify() {
|
||
uni.navigateTo({
|
||
url: '/pages/my/master-settled-info'
|
||
})
|
||
},
|
||
showModal(e, task) {
|
||
this.curTask = task;
|
||
this[e.currentTarget.dataset.modal] = true;
|
||
},
|
||
hideModal(e) {
|
||
this.curTask = null;
|
||
this[e.currentTarget.dataset.modal] = false;
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.search-nav-item-text {
|
||
width: 100rpx;
|
||
}
|
||
|
||
.nav .cu-item {
|
||
height: 90rpx;
|
||
display: inline-block;
|
||
line-height: 90rpx;
|
||
margin: 0;
|
||
padding: 0 10rpx;
|
||
width: 180rpx;
|
||
}
|
||
</style>
|