From ebc96a1cf0424c04dceacbc42f9ad2a897223be9 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期二, 25 六月 2024 14:42:04 +0800
Subject: [PATCH] css
---
h5/pages/driver/taskConfirm.vue | 777 ++++++++++++++++++++++++++++++-----------------------------
1 files changed, 395 insertions(+), 382 deletions(-)
diff --git a/h5/pages/driver/taskConfirm.vue b/h5/pages/driver/taskConfirm.vue
index 1cf5578..592c807 100644
--- a/h5/pages/driver/taskConfirm.vue
+++ b/h5/pages/driver/taskConfirm.vue
@@ -1,435 +1,448 @@
<template>
- <view class="main_app">
- <view class="status_wrap">
- <image class="bg" src="../../static/driver/bg_renwu@2x.png" mode=""></image>
- <view class="name">浣滀笟宸插畬鎴�</view>
- <view class="id_card">鐨朅D1212</view>
- <view class="status">浣滀笟瀹屾垚</view>
- </view>
- <!-- -->
- <view class="main_content">
- <view class="line">
- <view class="label">鍙告満濮撳悕</view>
- <view class="value">鍒樻煇</view>
- </view>
- <view class="line">
- <view class="label">鎵嬫満鍙�</view>
- <view class="value">188</view>
- </view>
- <view class="line">
- <view class="label">杩愯緭鍗曞彿</view>
- <view class="value" @click="showDetail = true">
- <text class="waybill_num">Y111</text>
- <text class="btn">杩愬崟璇︽儏</text>
- </view>
- </view>
- <view class="line">
- <view class="label">浣滀笟绫诲瀷</view>
- <view class="value">鍏ュ洯瑁呰揣</view>
- </view>
- <view class="empty"></view>
- <!-- -->
- <view class="line">
- <view class="label">杞﹀墠鐗岀収鍙�</view>
- <view class="value" @click="openInput(1)">
- <text :style="{ color: param.carNos ? '#000000' : '#999999' }">{{ param.carNos ? param.carNos : '璇疯緭鍏ヨ溅鍓嶇墝鐓у彿'
- }}</text>
- </view>
- </view>
- <view class="line">
- <view class="label">杞﹀悗鐗岀収鍙�</view>
- <view class="value">
- <text @click="openInput(1)" :style="{ color: param.carNos ? '#000000' : '#999999' }">{{ param.carNos ?
- param.carNos : '璇疯緭鍏ヨ溅鍚庣墝鐓у彿' }}</text>
- <text class="copy">澶嶅埗杞﹀墠鐗岀収鍙�</text>
- </view>
- </view>
- <!-- -->
+ <view class="main_app">
+ <view class="status_wrap">
+ <image
+ class="bg"
+ src="../../static/driver/bg_renwu@2x.png"
+ mode=""
+ ></image>
+ <view class="name">浣滀笟宸插畬鎴�</view>
+ <view class="id_card">鐨朅D1212</view>
+ <view class="status">浣滀笟瀹屾垚</view>
+ </view>
+ <!-- -->
+ <view class="main_content">
+ <view class="line">
+ <view class="label">鍙告満濮撳悕</view>
+ <view class="value">鍒樻煇</view>
+ </view>
+ <view class="line">
+ <view class="label">鎵嬫満鍙�</view>
+ <view class="value">188</view>
+ </view>
+ <view class="line">
+ <view class="label">杩愯緭鍗曞彿</view>
+ <view class="value" @click="showDetail = true">
+ <text class="waybill_num">Y111</text>
+ <text class="btn">杩愬崟璇︽儏</text>
+ </view>
+ </view>
+ <view class="line">
+ <view class="label">浣滀笟绫诲瀷</view>
+ <view class="value">鍏ュ洯瑁呰揣</view>
+ </view>
+ <view class="empty"></view>
+ <!-- -->
+ <view class="line">
+ <view class="label">杞﹀墠鐗岀収鍙�</view>
+ <view class="value" @click="openInput(1)">
+ <text :style="{ color: param.carNos ? '#000000' : '#999999' }">{{
+ param.carNos ? param.carNos : "璇疯緭鍏ヨ溅鍓嶇墝鐓у彿"
+ }}</text>
+ </view>
+ </view>
+ <view class="line">
+ <view class="label">杞﹀悗鐗岀収鍙�</view>
+ <view class="value">
+ <text
+ @click="openInput(1)"
+ :style="{ color: param.carNos ? '#000000' : '#999999' }"
+ >{{ param.carNos ? param.carNos : "璇疯緭鍏ヨ溅鍚庣墝鐓у彿" }}</text
+ >
+ <text class="copy">澶嶅埗杞﹀墠鐗岀収鍙�</text>
+ </view>
+ </view>
+ <!-- -->
+ </view>
+ <view class="space"></view>
+ <!-- 绛夊緟鍙彿 -->
+ <view class="sub_wrap">
+ <view class="btn check">纭浠诲姟</view>
+ </view>
- </view>
- <view class="space"></view>
- <!-- 绛夊緟鍙彿 -->
- <view class="sub_wrap">
- <view class="btn check">纭浠诲姟</view>
- </view>
-
- <!-- modal -->
- <u-popup :show="showDetail" :round="10" :safeAreaInsetBottom="true" closeOnClickOverlay :closeable="true"
- mode="bottom" @close="showDetail = false">
- <view class="detail_modal">
- <view class="modal_title">杩愬崟璇︽儏</view>
- <view class="id_card">
- <view class="last">鐨�</view>
- <view class="name">AD1111</view>
- </view>
- <!-- -->
- <view class="info">
- <view class="line">
- <view class="label">杩愯緭鍗曞彿</view>
- <view class="value">2222</view>
- </view>
- <view class="line">
- <view class="label">椹鹃┒鍛�</view>
- <view class="value">2222</view>
- </view>
- <view class="line">
- <view class="label">鎬昏繍杈撻噺</view>
- <view class="value">2222</view>
- </view>
- <view class="line">
- <view class="label">杩愯緭鍏徃</view>
- <view class="value">2222</view>
- </view>
- </view>
- <view class="separate"></view>
- <view class="contract_list">
- <view class="title">鍚堝悓鍙凤細111</view>
- <view class="address">aadd</view>
- <view class="list">
- <view class="line">
- <view class="label">鐗╂枡锛�</view>
- <view class="value">榛勫北榛戦┈</view>
- </view>
- <view class="line">
- <view class="label">鏁伴噺锛�</view>
- <view class="value">榛勫北榛戦┈</view>
- </view>
- <view class="line">
- <view class="label">鐗╂枡锛�</view>
- <view class="value">榛勫北榛戦┈</view>
- </view>
- <view class="line">
- <view class="label">鏁伴噺锛�</view>
- <view class="value">榛勫北榛戦┈</view>
- </view>
- </view>
- </view>
- </view>
- </u-popup>
- <keyboardInput ref="keyboard" @export="setPlate" @close="closeInput" />
- </view>
- <!-- -->
+ <!-- modal -->
+ <u-popup
+ :show="showDetail"
+ :round="10"
+ :safeAreaInsetBottom="true"
+ closeOnClickOverlay
+ :closeable="true"
+ mode="bottom"
+ @close="showDetail = false"
+ >
+ <view class="detail_modal">
+ <view class="modal_title">杩愬崟璇︽儏</view>
+ <view class="id_card">
+ <view class="last">鐨�</view>
+ <view class="name">AD1111</view>
+ </view>
+ <!-- -->
+ <view class="info">
+ <view class="line">
+ <view class="label">杩愯緭鍗曞彿</view>
+ <view class="value">2222</view>
+ </view>
+ <view class="line">
+ <view class="label">椹鹃┒鍛�</view>
+ <view class="value">2222</view>
+ </view>
+ <view class="line">
+ <view class="label">鎬昏繍杈撻噺</view>
+ <view class="value">2222</view>
+ </view>
+ <view class="line">
+ <view class="label">杩愯緭鍏徃</view>
+ <view class="value">2222</view>
+ </view>
+ </view>
+ <view class="separate"></view>
+ <view class="contract_list">
+ <view class="title">鍚堝悓鍙凤細111</view>
+ <view class="address">aadd</view>
+ <view class="list">
+ <view class="line">
+ <view class="label">鐗╂枡锛�</view>
+ <view class="value">榛勫北榛戦┈</view>
+ </view>
+ <view class="line">
+ <view class="label">鏁伴噺锛�</view>
+ <view class="value">榛勫北榛戦┈</view>
+ </view>
+ <view class="line">
+ <view class="label">鐗╂枡锛�</view>
+ <view class="value">榛勫北榛戦┈</view>
+ </view>
+ <view class="line">
+ <view class="label">鏁伴噺锛�</view>
+ <view class="value">榛勫北榛戦┈</view>
+ </view>
+ </view>
+ </view>
+ </view>
+ </u-popup>
+ <keyboardInput ref="keyboard" @export="setPlate" @close="closeInput" />
+ </view>
+ <!-- -->
</template>
<script>
import keyboardInput from '@/components/keyboard-input/keyboard-input.vue'
export default {
- components: {
- keyboardInput
- },
- data() {
- return {
- param: {
- status: '0'
- },
- showDetail: false,
+ components: {
+ keyboardInput
+ },
+ data() {
+ return {
+ param: {
+ status: '0'
+ },
+ showDetail: false,
- inputType: ''
- }
- },
- methods: {
- handleSignIn() {
- const { param } = this
- this.param.status = param.status == '0' ? '1' : '0'
- },
- getLocation() {
- uni.getLocation({
- type: 'wgs84',
- success: function (res) {
- console.log('褰撳墠浣嶇疆鐨勭粡搴︼細' + res.longitude)
- console.log('褰撳墠浣嶇疆鐨勭含搴︼細' + res.latitude)
- }
- })
- },
- openInput(type) {
- this.inputType = type
- this.$refs.keyboard.open()
- },
- setPlate(e) {
- if (this.inputType === 1) {
- this.param.carNos = e
- } else if (this.inputType === 2) {
- this.param.carNos = e
- }
- this.$forceUpdate()
- this.closeInput()
- },
- closeInput() {
- this.$refs.keyboard.close()
- }
- }
+ inputType: ''
+ }
+ },
+ methods: {
+ handleSignIn() {
+ const { param } = this
+ this.param.status = param.status == '0' ? '1' : '0'
+ },
+ getLocation() {
+ uni.getLocation({
+ type: 'wgs84',
+ success: function (res) {
+ console.log('褰撳墠浣嶇疆鐨勭粡搴︼細' + res.longitude)
+ console.log('褰撳墠浣嶇疆鐨勭含搴︼細' + res.latitude)
+ }
+ })
+ },
+ openInput(type) {
+ this.inputType = type
+ this.$refs.keyboard.open()
+ },
+ setPlate(e) {
+ if (this.inputType === 1) {
+ this.param.carNos = e
+ } else if (this.inputType === 2) {
+ this.param.carNos = e
+ }
+ this.$forceUpdate()
+ this.closeInput()
+ },
+ closeInput() {
+ this.$refs.keyboard.close()
+ }
+ }
}
</script>
<style lang="scss">
page {
- background-color: #f7f7f7;
+ background-color: #f7f7f7;
}
.main_app {
- padding: 0;
+ padding: 0;
- .main_content {
- background: #FFFFFF;
- border-radius: 20rpx 20rpx 0rpx 0rpx;
- padding: 16rpx 30rpx;
- position: relative;
- bottom: 32rpx;
+ .main_content {
+ background: #ffffff;
+ border-radius: 20rpx 20rpx 0rpx 0rpx;
+ padding: 16rpx 30rpx;
+ position: relative;
+ bottom: 32rpx;
- .line {
- padding: 24rpx 0 28rpx;
- border-bottom: 1rpx solid #E5E5E5;
+ .line {
+ padding: 24rpx 0 28rpx;
+ border-bottom: 1rpx solid #e5e5e5;
- .label {
- font-size: 26rpx;
- color: #666666;
- margin-bottom: 20rpx;
- }
+ .label {
+ font-size: 26rpx;
+ color: #666666;
+ margin-bottom: 20rpx;
+ }
- .value {
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-size: 30rpx;
+ .value {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 30rpx;
- .waybill_num {
- flex: 1;
- }
+ .waybill_num {
+ flex: 1;
+ }
- .copy {
- font-size: 26rpx;
- color: $uni-color-primary;
- }
+ .copy {
+ font-size: 26rpx;
+ color: $uni-color-primary;
+ }
- .btn {
- font-size: 28rpx;
- color: $uni-color-primary;
- display: flex;
- }
- }
- }
- .empty{
- width: 750rpx;
- height: 20rpx;
- background-color: #f7f7f7;
- margin: 0 -30rpx;
- }
- .warnning {
- display: flex;
- color: #ED4545;
- align-items: center;
- margin: 40rpx 0;
- }
+ .btn {
+ font-size: 28rpx;
+ color: $uni-color-primary;
+ display: flex;
+ }
+ }
+ }
+ .empty {
+ width: 750rpx;
+ height: 20rpx;
+ background-color: #f7f7f7;
+ margin: 0 -30rpx;
+ }
+ .warnning {
+ display: flex;
+ color: #ed4545;
+ align-items: center;
+ margin: 40rpx 0;
+ }
- .signIn_wrap {
- margin: 80rpx auto;
- width: 260rpx;
- height: 260rpx;
- position: relative;
- color: #fff;
- z-index: 1;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
+ .signIn_wrap {
+ margin: 80rpx auto;
+ width: 260rpx;
+ height: 260rpx;
+ position: relative;
+ color: #fff;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
- .handle {
- font-weight: 500;
- font-size: 40rpx;
- line-height: 56rpx;
- }
+ .handle {
+ font-weight: 600;
+ font-size: 40rpx;
+ line-height: 56rpx;
+ }
- .time {
- color: rgba(255, 255, 255, 0.7);
- }
+ .time {
+ color: rgba(255, 255, 255, 0.7);
+ }
- .img {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- z-index: -1;
- }
- }
- }
+ .img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ z-index: -1;
+ }
+ }
+ }
- .status_wrap {
- height: 200rpx;
- width: 100%;
- padding: 30rpx;
- position: relative;
- z-index: 99;
- color: #fff;
- .bg {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
- }
+ .status_wrap {
+ height: 200rpx;
+ width: 100%;
+ padding: 30rpx;
+ position: relative;
+ z-index: 99;
+ color: #fff;
+ .bg {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ }
- .name {
- font-weight: 500;
- font-size: 40rpx;
- line-height: 56rpx;
- margin-bottom: 12rpx;
- }
+ .name {
+ font-weight: 600;
+ font-size: 40rpx;
+ line-height: 56rpx;
+ margin-bottom: 12rpx;
+ }
- .id_card {
- color: rgba(255, 255, 255, 0.8);
- }
- .status {
- position: absolute;
- right: 0;
- top: 30rpx;
- height: 68rpx;
- line-height: 68rpx;
- background: #FFFFFF;
- padding: 0 24rpx;
- border-radius: 34rpx 0rpx 0rpx 34rpx;
- font-size: 26rpx;
- color: $uni-color-primary;
+ .id_card {
+ color: rgba(255, 255, 255, 0.8);
+ }
+ .status {
+ position: absolute;
+ right: 0;
+ top: 30rpx;
+ height: 68rpx;
+ line-height: 68rpx;
+ background: #ffffff;
+ padding: 0 24rpx;
+ border-radius: 34rpx 0rpx 0rpx 34rpx;
+ font-size: 26rpx;
+ color: $uni-color-primary;
+ }
+ }
- }
- }
+ .space {
+ width: 750rpx;
+ height: 200rpx;
+ }
- .space {
- width: 750rpx;
- height: 200rpx;
- }
+ .sub_wrap {
+ position: fixed;
+ padding: 16rpx 30rpx 64rpx;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ display: flex;
+ z-index: 1;
+ justify-content: space-between;
+ background-color: #fff;
+ .btn {
+ height: 96rpx;
+ line-height: 96rpx;
+ text-align: center;
+ width: 690rpx;
+ font-size: 36rpx;
+ color: #333333;
+ background: #ffffff;
+ border-radius: 48rpx;
+ border: 1rpx solid #999999;
+ }
- .sub_wrap {
- position: fixed;
- padding: 16rpx 30rpx 64rpx;
- bottom: 0;
- left: 0;
- width: 100%;
- display: flex;
- z-index: 1;
- justify-content: space-between;
- background-color: #fff;
- .btn {
- height: 96rpx;
- line-height: 96rpx;
- text-align: center;
- width: 690rpx;
- font-size: 36rpx;
- color: #333333;
- background: #FFFFFF;
- border-radius: 48rpx;
- border: 1rpx solid #999999;
- }
-
- .check {
- background: $uni-color-primary;
- border: 1rpx solid $uni-color-primary;
- color: #fff;
- }
- }
+ .check {
+ background: $uni-color-primary;
+ border: 1rpx solid $uni-color-primary;
+ color: #fff;
+ }
+ }
}
.detail_modal {
- padding: 36rpx 30rpx;
+ padding: 36rpx 30rpx;
- .modal_title {
- font-weight: 500;
- font-size: 32rpx;
- color: #222222;
- line-height: 44rpx;
- text-align: center;
- margin-bottom: 36rpx;
- }
+ .modal_title {
+ font-weight: 600;
+ font-size: 32rpx;
+ color: #222222;
+ line-height: 44rpx;
+ text-align: center;
+ margin-bottom: 36rpx;
+ }
- .contract_list {
- .list {
- background: #F7F7F7;
- border-radius: 8rpx;
- padding: 20rpx;
+ .contract_list {
+ .list {
+ background: #f7f7f7;
+ border-radius: 8rpx;
+ padding: 20rpx;
- .line {
- display: flex;
- margin-bottom: 20rpx;
+ .line {
+ display: flex;
+ margin-bottom: 20rpx;
- &:nth-of-type(3n) {
- border-top: 1rpx solid #E5E5E5;
- padding-top: 20rpx;
- }
+ &:nth-of-type(3n) {
+ border-top: 1rpx solid #e5e5e5;
+ padding-top: 20rpx;
+ }
- .label {
- color: #666666;
- width: 86rpx;
- }
+ .label {
+ color: #666666;
+ width: 86rpx;
+ }
- .value {
- flex: 1;
- color: #222222;
- }
- }
- }
+ .value {
+ flex: 1;
+ color: #222222;
+ }
+ }
+ }
- .title {
- font-weight: 500;
- font-size: 30rpx;
- color: $uni-color-primary;
- margin-bottom: 12rpx;
- }
+ .title {
+ font-weight: 600;
+ font-size: 30rpx;
+ color: $uni-color-primary;
+ margin-bottom: 12rpx;
+ }
- .address {
- font-size: 26rpx;
- color: #666666;
- margin-bottom: 20rpx;
- }
- }
+ .address {
+ font-size: 26rpx;
+ color: #666666;
+ margin-bottom: 20rpx;
+ }
+ }
- .info {
- .line {
- display: flex;
- margin-bottom: 20rpx;
+ .info {
+ .line {
+ display: flex;
+ margin-bottom: 20rpx;
- .label {
- font-size: 30rpx;
- color: #666666;
- width: 150rpx;
- }
+ .label {
+ font-size: 30rpx;
+ color: #666666;
+ width: 150rpx;
+ }
- .value {
- flex: 1;
- font-size: 30rpx;
- color: #222222;
- }
- }
- }
+ .value {
+ flex: 1;
+ font-size: 30rpx;
+ color: #222222;
+ }
+ }
+ }
- .separate {
- width: 750rpx;
- height: 2rpx;
- margin: 30rpx -30rpx;
- border: 1rpx solid #E5E5E5;
- }
+ .separate {
+ width: 750rpx;
+ height: 2rpx;
+ margin: 30rpx -30rpx;
+ border: 1rpx solid #e5e5e5;
+ }
- .id_card {
- border-radius: 8rpx;
- display: flex;
- height: 60rpx;
- line-height: 60rpx;
- font-weight: 600;
- font-size: 36rpx;
- color: #111111;
- text-align: center;
- margin-bottom: 30rpx;
+ .id_card {
+ border-radius: 8rpx;
+ display: flex;
+ height: 60rpx;
+ line-height: 60rpx;
+ font-weight: 600;
+ font-size: 36rpx;
+ color: #111111;
+ text-align: center;
+ margin-bottom: 30rpx;
- .last {
- background: #E9F5F6;
- width: 60rpx;
- border-radius: 8rpx 0rpx 0rpx 8rpx;
- border: 1rpx solid #DFDEDE;
- }
+ .last {
+ background: #e9f5f6;
+ width: 60rpx;
+ border-radius: 8rpx 0rpx 0rpx 8rpx;
+ border: 1rpx solid #dfdede;
+ }
- .name {
- width: 186rpx;
- border: 1rpx solid #DFDEDE;
- }
- }
+ .name {
+ width: 186rpx;
+ border: 1rpx solid #dfdede;
+ }
+ }
}
</style>
--
Gitblit v1.9.3