From 01e96c8855927df67ac8a6831e345b6cb33140d1 Mon Sep 17 00:00:00 2001 From: qingyiay <2386314947@qq.com> Date: 星期二, 09 五月 2023 18:49:40 +0800 Subject: [PATCH] 样式修改 --- pages/freight-forwarder-page/freightForwarder-index/freightForwarder-index.vue | 116 +++++++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 83 insertions(+), 33 deletions(-) diff --git a/pages/freight-forwarder-page/freightForwarder-index/freightForwarder-index.vue b/pages/freight-forwarder-page/freightForwarder-index/freightForwarder-index.vue index 756f545..522c0dc 100644 --- a/pages/freight-forwarder-page/freightForwarder-index/freightForwarder-index.vue +++ b/pages/freight-forwarder-page/freightForwarder-index/freightForwarder-index.vue @@ -26,15 +26,23 @@ </view> </view> <view class="second-line"> - <view class="coal-name">{{ item.coalName }}</view> - <view class="black-block"></view> - <view class="coal-type">{{ item.orderType }}</view> + <view class="coal-name"> + <view class="">{{ item.coalName }}</view> + <view class="black-bar"></view> + <view class="coal-type" v-if="item.orderType">{{ item.orderType }}</view> + </view> </view> <view class="third-line"> - <view class="time-icon"><u-icon name="clock" color="#515151" size="40"></u-icon></view> + <view class="time-icon"> + <view + style="width: 24rpx;height: 24rpx;line-height: 24rpx;background: url('https://mx.jzeg.cn:9095/appimg/image/banner/clock.png') no-repeat;background-size: cover" + ></view> + </view> <view class="send-date">{{ item.sendDate }}</view> </view> - <view class="fourth-line"><u-button text="杞彂" type="primary" @tap.stop="forwardClick(item)" shape="circle"></u-button></view> + <view class="fourth-line"> + <view class="forward" @click.stop="forwardClick(item)"><view class="button-image">杞彂</view></view> + </view> </view> </view> <!-- <view class="transparent"> @@ -50,7 +58,7 @@ <view class=""><u-icon name="arrow-right" color="#999999" size="40"></u-icon></view> </view> <view class="second"> - <view class="">{{ item.coalName || '' }}</view> + <view class="coal-name">{{ item.coalName || '' }}</view> <view class="order-type" v-if="item.orderType">{{ item.orderType || '' }}</view> </view> <view class="third"> @@ -69,11 +77,19 @@ </view> </view> <view class="fourth"> - <view class="fourth-icon"><u-icon name="clock" color="#999999" size="40"></u-icon></view> + <view class="fourth-icon"> + <view + style="width: 24rpx;height: 24rpx;line-height: 24rpx;background: url('https://mx.jzeg.cn:9095/appimg/image/banner/clock.png') no-repeat;background-size: cover" + ></view> + </view> <view class="senddate">{{ item.sendDate }}</view> </view> <view class="fourth"> - <view class="fourth-icon"><u-icon name="clock" color="#999999" size="40"></u-icon></view> + <view class="fourth-icon"> + <view + style="width: 26rpx;height: 26rpx;line-height: 26rpx;background: url('https://mx.jzeg.cn:9095/appimg/image/banner/carnNUm.png') no-repeat;background-size: cover" + ></view> + </view> <view class="senddate">{{ item.orderCode }}</view> </view> </view> @@ -145,16 +161,18 @@ methods: { // 鑾峰彇鍘嗗彶鎻愮叅鍗� getJhOrderPlanDataPage() { - this.loading = true; + uni.showLoading({ + title: '鍔犺浇涓�' + }); this.$reqGet('getJhOrderPlanDataPage', { current: this.pageCurrent, size: this.pageSize }).then(res => { if (res.data.records) { if (this.pageCurrent > 1) { this.historyCoalData = this.historyCoalData.concat(res.data.records); this.historyCoalData = this.ArrSet(this.historyCoalData, 'id'); - this.loading = false; + uni.hideLoading(); } else { this.historyCoalData = res.data.records; - this.loading = false; + uni.hideLoading(); } } }); @@ -251,7 +269,7 @@ margin: vww(10) vww(10) 0; } .second { - width: 50%; + width: 100%; height: 31rpx; font-size: 30rpx; font-family: Microsoft YaHei; @@ -259,6 +277,12 @@ color: #515151; margin: vww(10) vww(10) 0; @include flex; + justify-content: flex-start; + .coal-name { + min-width: vww(30); + height: vww(20); + margin-right: vww(21); + } .order-type { color: #035cfb; border: 2px solid #035cfb; @@ -295,6 +319,14 @@ color: #515151; margin: vww(10) vww(10) 0; @include flex; + .fourth-icon { + width: vww(13); + height: vww(13); + margin-right: vww(14); + } + .senddate { + flex: 1; + } } } } @@ -376,13 +408,14 @@ } } .second-line { - width: 60%; + width: 100%; height: vww(30); + margin-left: vww(12); display: flex; - justify-content: space-evenly; + justify-content: flex-start; align-items: center; .coal-name { - width: 30%; + flex-grow: 1; height: 30rpx; font-size: 30rpx; font-family: Microsoft YaHei; @@ -390,20 +423,23 @@ color: #515151; position: relative; display: flex; - justify-content: space-between; - } - .black-block { - width: 2rpx; - height: 30rpx; - background: #515151; - } - .coal-type { - width: 24%; - height: 30rpx; - font-size: 30rpx; - font-family: Microsoft YaHei; - font-weight: 300; - color: #515151; + align-items: center; + .black-bar { + width: 2rpx; + height: 30rpx; + background: #515151; + margin-left: vww(12); + } + .coal-type { + margin-left: vww(12); + min-width: vww(50); + height: 30rpx; + line-height: 30rpx; + font-size: 30rpx; + font-family: Microsoft YaHei; + font-weight: 300; + color: #515151; + } } } .third-line { @@ -411,11 +447,12 @@ height: vww(30); margin-left: vww(15); display: flex; - justify-content: space-between; + justify-content: flex-start; align-items: center; .send-date { width: 148rpx; height: 24rpx; + margin-left: vww(14); line-height: 24rpx; font-size: 28rpx; font-family: Microsoft YaHei; @@ -430,9 +467,22 @@ position: relative; left: 60%; bottom: vww(10); - .u-button { - width: vww(50); - height: vww(30); + .forward { + width: vww(123); + height: vww(48); + left: vww(140); + .button-image { + width: 100%; + height: 100%; + background: url('../../../static/image/banner/button.png') no-repeat; + background-size: cover; + font-size: 28rpx; + font-family: Microsoft YaHei; + font-weight: 300; + color: #fff; + text-align: center; + line-height: vww(45); + } } } } -- Gitblit v1.9.1