From 3f10299a92e23fd902e4bd51a6d59f9bf0c7d7ec Mon Sep 17 00:00:00 2001 From: qingyiay <2386314947@qq.com> Date: 星期二, 20 六月 2023 10:08:18 +0800 Subject: [PATCH] 增加用户绑定页面 --- pages/driver-page/driver-index/driver-index.vue | 1120 ++++++++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 810 insertions(+), 310 deletions(-) diff --git a/pages/driver-page/driver-index/driver-index.vue b/pages/driver-page/driver-index/driver-index.vue index d8a4eba..b00d209 100644 --- a/pages/driver-page/driver-index/driver-index.vue +++ b/pages/driver-page/driver-index/driver-index.vue @@ -1,125 +1,223 @@ <template> - <view class="driver-index"> - <view class="driver-index-body"> - <!-- 寰呴鍙栨彁鐓ゅ崟 --> - <combined-title title="寰呴鍙�"></combined-title> - <u-empty - mode="data" - icon="http://cdn.uviewui.com/uview/empty/data.png" - textSize="30" - iconSize="1000" - v-if="driverBillOfLoadingData.list1 ? (driverBillOfLoadingData.list1.length == 0 ? true : false) : true" - ></u-empty> - <card v-for="(item, index) in driverBillOfLoadingData.list1" :key="index" :name="item.id" backgroundType="2"> - <template v-slot:left> - <view class="card-left__top"> - <text>{{ item.carNum }}</text> - 寮� - </view> - <view class="card-left__utils"><u-button @tap.stop="qiangDanBtn(item)" text="鎶㈠崟" type="primary" shape="circle"></u-button></view> - </template> - <template v-slot:right-top> - <view class="right-top"> - <view class="card-right-top-row"> - <view> - <text>{{ item.deptName || '' }}</text> - </view> - <view> - <text>{{ item.coalName || '' }}</text> - </view> - </view> - <view class="card-right-top-row"> - <view> - <text>鍓╀綑{{ item.carNum - item.taskNum }}寮�</text> - </view> - </view> - <view class="card-right-top-row"> - <view> - <text>{{ item.filedName || '' }}</text> - </view> - </view> - <view class="card-right-top-row"> - <view> - <text>{{ item.orderCode || '' }}</text> - </view> - </view> - </view> - </template> - </card> - - <!-- 鎶㈠崟鎻愮ず妯℃�佹 --> - <view class="qianDanModel"> - <u-modal :show="qiangDanShow" :title="qiangDanTitle" showCancelButton :content="qiangDanContent" @confirm="qiangDanConfirm" @cancel="qiangDanCancel"></u-modal> - </view> - - <!-- 寰呴绾︽彁鐓ゅ崟 --> - <combined-title title="寰呴绾︽彁鐓ゅ崟"></combined-title> - <u-empty - mode="data" - icon="http://cdn.uviewui.com/uview/empty/data.png" - textSize="30" - iconSize="1000" - v-if="driverBillOfLoadingData.list3 ? (driverBillOfLoadingData.list3.length == 0 ? true : false) : true" - ></u-empty> - <view> - <!-- 寰呴绾︽彁鐓ゅ崟 --> - <view class="daiYuYue" v-for="(item, index) in driverBillOfLoadingData.list3" :key="index"> - <view class="daiYuYueTop"> - <text>鎻愮叅鍗曠紪鍙凤細{{ item.code }}</text> - </view> - <view class="daiYuYueTable"> - <!-- <view>{{ item.deptName }}</view> - <view>{{ item.coalName }}</view> - <view>宸查绾︼細{{ item.cars }} 杞�</view> --> - <uni-table border stripe emptyText="鏆傛棤鏇村鏁版嵁"> - <uni-tr> - <uni-th align="center">鐓ゅ満</uni-th> - <uni-th align="center">鐓ょ</uni-th> - <uni-th align="center">宸查绾�</uni-th> - </uni-tr> - <uni-tr> - <uni-td align="left">{{ item.deptName || '' }}</uni-td> - <uni-td align="left">{{ item.coalName || '' }}</uni-td> - <uni-td align="left">{{ item.cars || '' }} 杞�</uni-td> - </uni-tr> - <uni-tr> - <uni-th align="center">鍙戣繍鏃ユ湡</uni-th> - <uni-th align="center">鐓ゅ満</uni-th> - <uni-th align="center">瀹㈡埛</uni-th> - </uni-tr> - <uni-tr> - <uni-td align="left">{{ item.sendDate || '' }}</uni-td> - <uni-td align="left">{{ item.filedName || '' }}</uni-td> - <uni-td align="left">{{ item.customerName || '' }}</uni-td> - </uni-tr> - </uni-table> - </view> - <view><u-button text="棰勭害" type="primary" @click="toAppointmentClick(item)"></u-button></view> + <view class=""> + <view class="driver-index"> + <view class="driver-index-body"> + <!-- 寰呴鍙栨彁鐓ゅ崟 --> + <view class="wait-collection" + style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/diverbanner.png') no-repeat;background-size:contain"> </view> - </view> + <view class="collection-form"> + <view class="collection-form-item" + v-for="(item, index) in driverBillOfLoadingData.list1" + :key="index"> + <view class="main-divider"></view> + <view class="first-line"> + <view class="main-information"> + <view class="sign">瑁�</view> + <view class="filedname exceedHide"> + <text + v-if="item.orderType == '澶栭攢' || item.orderType == '鍐呴攢' ">{{ item.deptName|| '' }}</text> + <text + v-else-if="item.orderType == '澶栬喘' || item.orderType == '鍐呰喘' ">{{ item.customerId?item.customerName:item.customerNameCopy|| '' }}</text> + <text v-else-if="item.orderType == '杞嚭'|| item.orderType == '杞叆'">{{item.filedName}} - <!-- 宸查绾︽彁鐓ゅ崟 --> - <combined-title title="宸查绾︽彁鐓ゅ崟"></combined-title> - <u-empty - mode="data" - icon="http://cdn.uviewui.com/uview/empty/data.png" - textSize="30" - iconSize="1000" - v-if="driverBillOfLoadingData.list2 ? (driverBillOfLoadingData.list2.length == 0 ? true : false) : true" - ></u-empty> - <view class=""> - <view @click="list3CardIconClick(item)" class="haveYuYue" v-for="(item, index) in driverBillOfLoadingData.list2" :key="index"> - <view class="haveYuYueTop"> - <text>鎻愮叅鍗曠紪鍙凤細{{ item.code || '' }}</text> + </text> + </view> + </view> + <view class="point-number"> + <text class="residue">{{ item.carNum - item.taskNum }}</text> + <text>/{{ item.carNum }}</text> + </view> + </view> + <view class="first-extra"> + <view class="main-information"> + <view class="sign">鍗�</view> + <view class="filedname exceedHide"> + <text v-if="item.orderType == '澶栭攢' || item.orderType == '鍐呴攢' "> + {{ item.customerNameCopy ? item.customerNameCopy : item.customerName|| '' }} + </text> + <text + v-else-if="item.orderType == '澶栬喘' || item.orderType == '鍐呰喘' ">{{ item.deptName|| '' }}</text> + <text + v-else-if="item.orderType == '杞嚭'|| item.orderType == '杞叆'">{{item.toFiledName}} + + </text> + </view> + </view> + </view> + <!-- <view class="second-line"> + <view class="coal-name">{{ item.coalName }}</view> + </view> --> + <view class="third-line"> + <view class="time-icon"><u-icon name="clock" + color="#515151" + size="40"></u-icon></view> + <view class="send-date">{{ item.sendDate }}</view> + <view class="type"> + <view class="coal-name">{{ item.coalName }}</view> + </view> + </view> + <view class="fourth-line" + @click="qiangDanBtn(item)" + v-if="item.carNum - item.taskNum !== 0"> + <view class="button-img">绔嬪嵆鎶㈠崟</view> + </view> </view> - <view class="haveYuYueCenter"> - <view>{{ item.deptName || '' }}</view> - <view>{{ item.coalName || '' }}</view> - <view>鎺掗槦鏁帮細鏆傛棤{{}}</view> + </view> + <!-- 鎶㈠崟鎻愮ず妯℃�佹 --> + <view class="qianDanModel"> + <u-modal :show="qiangDanShow" + :title="qiangDanTitle" + showCancelButton + :content="qiangDanContent" + @confirm="qiangDanConfirm" + @cancel="qiangDanCancel"></u-modal> + </view> + + <!-- 寰呴绾︽彁鐓ゅ崟 --> + <view class="wait-appointment"> + <combined-title title="寰呴绾︽彁鐓ゅ崟"></combined-title> + <u-empty mode="data" + icon="http://cdn.uviewui.com/uview/empty/data.png" + textSize="30" + iconSize="1000" + v-if="driverBillOfLoadingData.list3 ? (driverBillOfLoadingData.list3.length == 0 ? true : false) : true"></u-empty> + + <view class="appointment-form"> + <view class="appointment-form-item" + v-for="(item, index) in driverBillOfLoadingData.list3" + :key="index"> + <view class="main-divider"></view> + <view class="first-line"> + <view class="main-information"> + <view class="sign">瑁�</view> + <view class="filedname exceedHide"> + <text + v-if="item.orderType == '澶栭攢' || item.orderType == '鍐呴攢' ">{{ item.deptName }}</text> + <text + v-else-if="item.orderType == '澶栬喘' || item.orderType == '鍐呰喘' ">{{ item.customerName }}</text> + <text + v-else-if="item.orderType == '杞嚭'|| item.orderType == '杞叆'">{{item.filedName}} + </text> + </view> + </view> + <view class="map-icon" + @click.stop="skipMap(item)"> + <view><u-icon name="map" + color="#4978F0" + size="40"></u-icon></view> + </view> + </view> + <view class="first-extra"> + <view class="main-information"> + <view class="sign">鍗�</view> + <view class="filedname exceedHide"> + <text + v-if="item.orderType == '澶栭攢' || item.orderType == '鍐呴攢' ">{{ item.customerName }}</text> + <text + v-else-if="item.orderType == '澶栬喘' || item.orderType == '鍐呰喘' ">{{ item.deptName }}</text> + <text + v-else-if="item.orderType == '杞嚭'|| item.orderType == '杞叆'">{{item.toFiledName}}</text> + </view> + </view> + <view class="map-icon" + @click.stop="skipMap(item)"> + <view><u-icon name="map" + color="#4978F0" + size="40"></u-icon></view> + </view> + </view> + <view class="third-line"> + <view class="clock"> + <view class="time-icon"><u-icon name="clock" + color="#515151" + size="40"></u-icon></view> + <view class="send-date">{{ item.sendDate }}</view> + </view> + <view class="type"> + <view class="coal-name">{{ item.coalName }}</view> + <!-- <view class="order-type">{{ item.orderType }}</view> --> + </view> + </view> + <view class="fourth-line" + @click="toAppointmentClick(item)"> + <view class="button-img">绔嬪嵆棰勭害</view> + </view> + </view> </view> - <view class="haveYuYueBottom"> - <text>{{ item.yuYueTime || '鏃舵' }}</text> + </view> + + <!-- 宸查绾︽彁鐓ゅ崟 --> + <view class="Reserved"> + <combined-title title="宸查绾︽彁鐓ゅ崟"></combined-title> + <u-empty mode="data" + icon="http://cdn.uviewui.com/uview/empty/data.png" + textSize="30" + iconSize="1000" + v-if="driverBillOfLoadingData.list2 ? (driverBillOfLoadingData.list2.length == 0 ? true : false) : true"></u-empty> + <view class="appointment-form"> + <view class="appointment-form-item" + v-for="(item, index) in driverBillOfLoadingData.list2" + :key="index" + @click="list3CardIconClick(item)"> + <view class="main-divider"></view> + <view class="first-line"> + <view class="main-information"> + <view class="sign">瑁�</view> + <view class="filedname exceedHide"> + <text + v-if="item.orderType == '澶栭攢' || item.orderType == '鍐呴攢' ">{{ item.deptName }}</text> + <text + v-else-if="item.orderType == '澶栬喘' || item.orderType == '鍐呰喘' ">{{ item.customerName }}</text> + <text v-else-if="item.orderType == '杞嚭'||item.orderType == '杞叆'"> + {{item.filedName}} + + </text> + </view> + </view> + <view class="map-icon" + @click.stop="skipMap(item)"> + <view><u-icon name="map" + color="#4978F0" + size="40"></u-icon></view> + </view> + </view> + <view class="second-line"> + <view class="main-information"> + <view class="sign">鍗�</view> + <view class="filedname exceedHide"> + <text + v-if="item.orderType == '澶栭攢' || item.orderType == '鍐呴攢' ">{{ item.customerName }}</text> + <text + v-else-if="item.orderType == '澶栬喘' || item.orderType == '鍐呰喘'">{{ item.deptName }}</text> + <text v-else-if="item.orderType == '杞嚭'||item.orderType == '杞叆'"> + {{item.toFiledName}} + + </text> + </view> + </view> + <view class="map-icon" + @click.stop="skipMap(item)"> + <view><u-icon name="map" + color="#4978F0" + size="40"></u-icon></view> + </view> + </view> + <view class="third-line"> + <view class="clock havedclock"> + <view class="time-icon"><u-icon name="clock" + color="#515151" + size="40"></u-icon></view> + <view class="send-date">{{ item.yuYueSection|| '' }}</view> + </view> + <view class="type"> + <view class="coal-name">{{ item.coalName || '' }}</view> + <!-- <view class="order-type">{{ item.orderType }}</view> --> + </view> + </view> + </view> </view> + <view class="white-block"></view> </view> </view> </view> @@ -127,212 +225,614 @@ </template> <script> -import { customerId } from '@/utils/status'; + import { customerId } from '@/utils/status'; + import combinedTitle from '@/components/combined-title/combined-title.vue'; -export default { - data() { - return { - driverBillOfLoadingData: [], - // 鎶㈠崟妯℃�佹 - qiangDanShow: false, - qiangDanTitle: '鎶㈠崟鎻愮ず', - qiangDanContent: '', - qiangDanOrderPlanId: null, - fleetId: '' - }; - }, - onShow() { - this.init(); - }, - methods: { - init() { - this.qiangDanList(); + export default { + components: { + combinedTitle }, - // 鍙告満棣栭〉鍒楄〃 - qiangDanList() { - uni.showLoading({ - title: '鍔犺浇涓�...' - }); - this.$reqGet('qiangDanList').then(res => { - uni.hideLoading(); - this.driverBillOfLoadingData = res.data; - }); - }, - // 鎶㈠崟鎸夐挳 - qiangDanBtn(value) { - if (value.tmcCount == '0') { - this.qiangDan(value.orderPlanId, value.fleetId); - } else { - this.qiangDanOrderPlanId = value.orderPlanId; - this.fleetId = value.fleetId; - this.qiangDanShow = true; - this.qiangDanContent = `宸叉姠${value.tmcCount}鍗曪紝纭畾鎶㈠崟锛焋; + props: { + indexdriverBillOfLoadingData: { + type: Object, + default: {} } }, - // 鎶㈠崟妯℃�佹 - qiangDanConfirm() { - this.qiangDanContent = ''; - this.qiangDanShow = false; - this.qiangDan(this.qiangDanOrderPlanId, this.fleetId); + watch: { + indexdriverBillOfLoadingData: { + handler(v) { + this.driverBillOfLoadingData = v; + }, + deep: true, + immediate: true + } }, - qiangDanCancel() { - this.qiangDanShow = false; + data() { + return { + driverBillOfLoadingData: { + list1: [], + list2: [], + list3: [] + }, + // 鎶㈠崟妯℃�佹 + qiangDanShow: false, + qiangDanTitle: '鎶㈠崟鎻愮ず', + qiangDanContent: '', + qiangDanOrderPlanId: null, + fleetId: '', + xsUserId: '', + customerId: '' + }; }, - // 鎶㈠崟璇锋眰 - qiangDan(id, fleetId) { - this.$reqPost('qiangDan', { orderPlanId: id, fleetId: fleetId }, 'params') - .then(res => { - if (res.code == 0) { - this.$u.toast('鎶㈠崟鎴愬姛'); - } else { - this.$u.toast(res.data ? res.data : '鎶㈠崟澶辫触'); - } - }) - .then(() => { - setTimeout(() => { - this.qiangDanList(); - }, 1000); + onShow() { + this.init(); + }, + methods: { + // 璺宠浆鍦板浘 + skipMap(val) { + uni.navigateTo({ + url: `/pages/public-page/mapRoute/mapRoute?customerId=${val.customerId}&filedId=${val.filedId}&orderType=${val.orderType}${ + val.toFiledId ? `&toFiledId=${val.toFiledId}&filedId=${val.filedId}` : '' + }` }); - }, - list3CardIconClick(value) { - uni.navigateTo({ - url: `/pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details?orderPlanId=${value.id}&yyId=${value.yyId}` - }); - }, - // 鎻愮叅鍗曡鎯� - cardBodyClick(name) { - uni.navigateTo({ - url: `/pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details?orderPlanId=${name}` - }); - }, - // 鍘婚绾� - toAppointmentClick(value) { - uni.navigateTo({ - url: `/pages/driver-page/appointment/appointment?takeCoalId=${value.id}&filedId=${value.filedId}&deptId=${value.deptId}&sendDate=${value.sendDate}` - }); + }, + init() { + this.qiangDanList(); + }, + // 鍙告満棣栭〉鍒楄〃 + qiangDanList() { + uni.showLoading({ + title: '鍔犺浇涓�...' + }); + this.$reqGet('qiangDanList').then(res => { + uni.hideLoading(); + this.driverBillOfLoadingData = res.data; + }); + }, + // 鎶㈠崟鎸夐挳 + qiangDanBtn(value) { + if (value.tmcCount == '0') { + this.qiangDan(value.orderPlanId, value.fleetId, value.customerId === null ? '0' : value.customerId, + value.xsUserId === null ? '0' : value.xsUserId); + } else { + this.qiangDanOrderPlanId = value.orderPlanId; + this.fleetId = value.fleetId; + this.customerId = value.customerId === null ? '0' : value.customerId; + this.xsUserId = value.xsUserId === null ? '0' : value.xsUserId; + this.qiangDanShow = true; + this.qiangDanContent = `宸叉姠${value.tmcCount}鍗曪紝纭畾鎶㈠崟锛焋; + } + }, + // 鎶㈠崟妯℃�佹 + qiangDanConfirm() { + this.qiangDanContent = ''; + this.qiangDanShow = false; + this.qiangDan(this.qiangDanOrderPlanId, this.fleetId, this.customerId, this.xsUserId); + }, + qiangDanCancel() { + this.qiangDanShow = false; + }, + // 鎶㈠崟璇锋眰 + qiangDan(id, fleetId, customerId, xsUserId) { + this.$reqPost('qiangDan', { + orderPlanId: id, + fleetId: fleetId, + customerId: customerId, + xsUserId: xsUserId + }, 'params') + .then(res => { + if (res.code == 0) { + this.$u.toast('鎶㈠崟鎴愬姛'); + } else { + this.$u.toast(res.msg ? res.msg : '鎶㈠崟澶辫触'); + } + }) + .then(() => { + setTimeout(() => { + this.qiangDanList(); + }, 1000); + }); + }, + list3CardIconClick(value) { + uni.navigateTo({ + url: `/pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details?orderPlanId=${value.id}&yyId=${value.yyId}` + }); + }, + // 鎻愮叅鍗曡鎯� + cardBodyClick(name) { + uni.navigateTo({ + url: `/pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details?orderPlanId=${name}` + }); + }, + // 鍘婚绾� + toAppointmentClick(value) { + uni.navigateTo({ + url: `/pages/driver-page/appointment/appointment?takeCoalId=${value.id}&filedId=${value.filedId}&deptId=${value.deptId}&sendDate=${value.sendDate}` + }); + } } - } -}; + }; </script> -<style lang="scss" scoped> -::v-deep.driver-index { - width: 94%; - margin: 0 auto; - // 涓讳綋 - .driver-index-body { - margin-bottom: vww(56); - // 鍗$墖鏍峰紡 - .card-left__top { - margin-top: vww(26); - text-align: center; - color: #ffffff; - text { - font-size: vww(48); - font-weight: 800; - } - } - .card-left__utils { - display: flex; - padding: 0 vww(15) 0 vww(15); - .u-button { - width: vww(55); - height: vww(24); - background-color: #fff; - color: #1987ff; - } - } - .right-top { - display: flex; - flex-flow: column nowrap; - align-content: space-around; - .card-right-top-row { - margin-top: vww(8); - text-align: center; - &:nth-child(1) { - display: flex; - justify-content: space-between; - view { - text-align: center; - width: 50%; - } - } - } +<style lang="scss" + scoped> + @mixin formItem { + width: vww(345); + height: vww(150); + margin-top: vww(5); + background: #ffffff; + box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15); + border-radius: 20rpx; + position: relative; + display: flex; + flex-direction: column; + justify-content: space-around; + } + + @mixin firstLine { + width: 94%; + height: vww(68); + margin: vww(18) vww(16) 0 vww(16); + display: flex; + justify-content: space-between; + } + + @mixin thirdLine { + width: 30%; + height: vww(68); + margin-left: vww(15); + display: flex; + justify-content: space-between; + align-items: center; + + .send-date { + width: 148rpx; + height: 24rpx; + line-height: 24rpx; + font-size: 28rpx; + font-weight: 300; + color: #515151; } - // 寰呴绾� - .daiYuYue { - margin-top: vww(24); - font-size: 16px; - font-weight: 300; - &Top { - background-color: #f5f5f5; - height: vww(40); - padding-left: vww(12); - line-height: vww(40); - border: vww(1) solid #eeeeee; - font-weight: 400; - } - &Table { - .uni-table { - min-width: 94% !important; - .uni-table-tr { - padding: 0; - .uni-table-th { - width: 33.3%; - line-height: 58rpx; - padding: vww(5) vww(10); - color: #111111; - font-weight: 400; - background: #f5f5f5; - } - .uni-table-td { - font-weight: 400; - line-height: 58rpx; - padding: vww(5) vww(10); - color: #111111; - } - } - } - } - } - // 宸查绾� - .haveYuYue { - font-size: 16px; - font-weight: 300; - margin-top: vww(24); - &Top { - background-color: #f5f5f5; - height: vww(40); - padding-left: vww(12); - line-height: vww(40); - border: vww(1) solid #eeeeee; - font-weight: 400; - } - &Center { - border: vww(1) solid #eeeeee; - border-top: none; - display: flex; - flex: 1; - height: vww(40); - line-height: vww(40); - view { - border-right: vww(1) solid #eeeeee; - width: 33.3%; - text-align: center; - &:nth-child(3) { - border-right: none; - } - } - } - &Bottom { - border: vww(1) solid #eeeeee; - border-top: none; - height: vww(40); - line-height: vww(40); - text-align: center; + .havedclock { + width: 58% !important; + margin-right: 0 !important; + + .send-date { + width: 100%; + margin-left: vww(12); } } } -} -</style> + + @mixin flex { + display: flex; + justify-content: space-between; + align-items: center; + } + + @mixin fourthLine { + width: 34%; + height: vww(68); + display: flex; + align-items: center; + position: relative; + left: vww(203); + bottom: vww(3); + + .button-img { + width: 100%; + height: 100%; + background: url('https://mx.jzeg.cn:9095/appimg/image/banner/button.png') no-repeat; + background-size: cover; + font-size: 28rpx; + font-weight: 300; + color: #ffffff; + text-align: center; + line-height: vww(40); + } + } + + .exceedHide { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + ::v-deep.driver-index { + width: 100%; + margin: 0 auto; + + // 涓讳綋 + .driver-index-body { + + // margin-bottom: vww(56); + // 寰呴鍙栨彁鐓ゅ崟 + .wait-collection { + width: 100%; + height: 600rpx; + } + + .collection-form { + width: vww(345); + margin: 0 vww(15); + position: relative; + top: vww(-120); + + .collection-form-item { + width: vww(345); + height: vww(185); + margin-top: vww(5); + background: #ffffff; + box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15); + border-radius: 20rpx; + position: relative; + display: flex; + flex-direction: column; + justify-content: space-around; + + .main-divider { + width: 560rpx; + height: 2rpx; + background: #e3e3e3; + position: absolute; + top: 122rpx; + left: 128rpx; + } + + .first-line { + width: 94%; + height: vww(68); + margin: vww(18) vww(16) 0 vww(16); + display: flex; + justify-content: space-between; + + .main-information { + width: 88%; + height: vww(28); + display: flex; + justify-content: flex-start; + align-items: center; + + .sign { + width: vww(28); + height: vww(28); + line-height: vww(28); + text-align: center; + background: url('https://mx.jzeg.cn:9095/appimg/image/banner/blueblock.png') no-repeat; + background-size: contain; + font-size: 30rpx; + font-weight: 400; + color: #ffffff; + margin-right: vww(20); + } + } + + .point-number { + position: absolute; + right: 0; + width: 15%; + + text { + font-size: 24rpx; + font-weight: 400; + color: #c78a64; + } + + .residue { + font-size: 40rpx; + font-weight: 400; + color: #f81414; + } + } + } + + .first-extra { + @include firstLine; + + .main-information { + width: 100%; + height: vww(28); + display: flex; + justify-content: flex-start; + align-items: center; + + .sign { + width: vww(28); + height: vww(28); + line-height: vww(28); + text-align: center; + background: url('https://mx.jzeg.cn:9095/appimg/image/banner/redblock.png') no-repeat; + background-size: contain; + font-size: 30rpx; + font-weight: 400; + color: #ffffff; + margin-right: vww(20); + } + } + } + + .second-line { + width: 100%; + height: vww(68); + margin-left: vww(21); + display: flex; + justify-content: flex-start; + align-items: center; + + .coal-name { + min-width: vww(50); + height: 35rpx; + font-size: 30rpx; + font-weight: 300; + color: #515151; + position: relative; + display: flex; + justify-content: flex-start; + } + + .black-block { + min-width: vww(50); + height: 30rpx; + font-size: 30rpx; + font-weight: 300; + color: #515151; + position: relative; + top: vww(2); + display: flex; + justify-content: center; + align-items: center; + + .black-bar { + width: 2rpx; + height: 30rpx; + background: #515151; + } + } + + .coal-type { + min-width: vww(50); + height: 30rpx; + font-size: 30rpx; + font-weight: 300; + color: #515151; + text-align: center; + } + } + + .third-line { + width: 100%; + height: vww(68); + margin-left: vww(21); + display: flex; + justify-content: flex-start; + align-items: center; + + .send-date { + width: 148rpx; + height: 24rpx; + margin-left: vww(14); + margin-right: vww(56); + line-height: 24rpx; + font-size: 28rpx; + font-weight: 300; + color: #515151; + } + + .type { + flex: 1; + margin-right: vww(10); + display: flex; + justify-content: center; + align-items: center; + + .coal-name { + width: 120rpx; + height: 42rpx; + line-height: 42rpx; + border: 2px solid #035cfb; + border-radius: 4rpx; + font-size: 28rpx; + font-weight: 300; + color: #035cfb; + text-align: center; + padding: vww(3) vww(11); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + + .fourth-line { + width: 30%; + height: vww(68); + margin-left: vww(15); + display: flex; + justify-content: flex-end; + position: relative; + left: vww(203); + bottom: vww(3); + + .button-img { + width: 100%; + height: 100%; + background: url('https://mx.jzeg.cn:9095/appimg/image/banner/button.png') no-repeat; + background-size: cover; + font-size: 28rpx; + font-weight: 300; + color: #ffffff; + text-align: center; + line-height: vww(33); + } + } + } + } + + .wait-appointment, + .Reserved { + position: relative; + top: vww(-120); + } + + .appointment-form { + width: vww(345); + margin: 0 vww(15); + + .appointment-form-item { + @include formItem; + height: vww(191); + justify-content: space-between; + overflow: hidden; + + .main-divider { + width: 560rpx; + height: 1rpx; + background: #e3e3e3; + position: absolute; + top: 122rpx; + left: 128rpx; + } + + .first-line { + position: relative; + @include firstLine; + + .main-information { + width: 100%; + height: vww(28); + display: flex; + justify-content: flex-start; + align-items: center; + + .sign { + width: vww(28); + height: vww(28); + line-height: vww(28); + text-align: center; + background: url('https://mx.jzeg.cn:9095/appimg/image/banner/blueblock.png') no-repeat; + background-size: contain; + font-size: 30rpx; + font-weight: 400; + color: #ffffff; + margin-right: vww(20); + } + } + } + + .first-extra { + @include firstLine; + + .main-information { + width: 100%; + height: vww(28); + display: flex; + justify-content: flex-start; + align-items: center; + + .sign { + width: vww(28); + height: vww(28); + line-height: vww(28); + text-align: center; + background: url('https://mx.jzeg.cn:9095/appimg/image/banner/redblock.png') no-repeat; + background-size: contain; + font-size: 30rpx; + font-weight: 400; + color: #ffffff; + margin-right: vww(20); + } + } + } + + .second-line { + @include firstLine; + margin: 0; + margin-left: vww(16); + + .main-information { + width: 100%; + height: vww(28); + display: flex; + justify-content: flex-start; + align-items: center; + + .sign { + width: vww(28); + height: vww(28); + line-height: vww(28); + text-align: center; + background: url('https://mx.jzeg.cn:9095/appimg/image/banner/redblock.png') no-repeat; + background-size: contain; + font-size: 30rpx; + font-weight: 400; + color: #ffffff; + margin-right: vww(20); + } + } + } + + .third-line { + @include thirdLine; + width: 94%; + justify-content: flex-start; + margin-left: vww(18); + + .clock { + width: 40%; + height: vww(21); + margin-right: vww(50); + line-height: vww(21); + @include flex; + justify-content: flex-start; + + .send-date { + margin-left: vww(14); + } + } + + .type { + flex: 1; + margin-right: vww(10); + display: flex; + justify-content: center; + align-items: center; + + .order-type, + .coal-name { + width: 120rpx; + height: 42rpx; + line-height: 42rpx; + border: 2px solid #035cfb; + border-radius: 4rpx; + font-size: 28rpx; + font-weight: 300; + color: #035cfb; + text-align: center; + padding: vww(3) vww(11); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + + .fourth-line { + @include fourthLine; + } + } + } + + .Reserved { + .white-block { + width: 100%; + height: vww(50); + line-height: vww(50); + text-align: center; + color: #333; + margin-top: vww(10); + } + } + } + } +</style> \ No newline at end of file -- Gitblit v1.9.1