buffeyu
4 years ago
5 changed files with 1015 additions and 6 deletions
Split View
Diff Options
-
14pages.json
-
208pages/add-address-manage/index.vue
-
200pages/address-manage/index.vue
-
592pages/for-comparison/index.vue
-
7pages/paper-details/index.vue
@ -0,0 +1,208 @@ |
|||
<template> |
|||
<view class="warpper"> |
|||
<view class="qn-form-item"> |
|||
<view class="label"><text class="label__text">收货人</text></view> |
|||
<view class="value"> |
|||
<qn-easyinput :maxlength="20" @blur="showCompany" v-model="form.name" :inputBorder="false" text="left" placeholder="请填写收货人姓名"></qn-easyinput> |
|||
</view> |
|||
</view> |
|||
<view class="qn-form-item"> |
|||
<view class="label"><text class="label__text">手机号</text></view> |
|||
<view class="value"> |
|||
<qn-easyinput :maxlength="11" type="number" v-model="form.contactMobile" :inputBorder="false" text="left" placeholder="请填写收货人手机号"></qn-easyinput> |
|||
</view> |
|||
</view> |
|||
<view class="qn-form-item"> |
|||
<view class="label"><text class="label__text">所在地区</text></view> |
|||
<view class="value"> |
|||
<!-- <qn-easyinput v-model="form.shortName" :inputBorder="false" text="right" placeholder="选择所在区域"></qn-easyinput> --> |
|||
<qn-data-picker |
|||
:readonly="hasSelected" |
|||
text="left" |
|||
:border="false" |
|||
class="qn-picker" |
|||
placeholder="点击选择" |
|||
popup-title="请选择城市" |
|||
:map="{ text: 'name', value: 'id' }" |
|||
@change="onAreaChange" |
|||
:clear-icon="true" |
|||
:localdata="items" |
|||
> |
|||
<text v-if="form.locDistrictId">{{ `${form.locProvinceName || ''}/${form.locCityName || ''}/${form.locDistrictName || ''}/${form.locStreetName || ''}` }}</text> |
|||
</qn-data-picker> |
|||
</view> |
|||
</view> |
|||
<view class="qn-form-item"> |
|||
<view class="label"><text class="label__text">详细地址</text></view> |
|||
<view class="value"> |
|||
<qn-easyinput :maxlength="120" @blur="showCompany" v-model="form.name" :inputBorder="false" text="left" placeholder="街道/门牌号/小区/乡镇/村等"></qn-easyinput> |
|||
</view> |
|||
</view> |
|||
<uGap></uGap> |
|||
<view class="default-address"> |
|||
<view class=""> |
|||
<view class="title">设置为默认地址</view> |
|||
<view class="tip">提醒：每次下单会默认使用该地址</view> |
|||
</view> |
|||
<view class=""> |
|||
<switch checked style="transform:scale(0.8)"/> |
|||
</view> |
|||
</view> |
|||
<qn-footer fixed height="120rpx"> |
|||
<view class="button-area"> |
|||
<!-- <view class="button button__cancel" @click="back"> |
|||
<text class="text">取消</text> |
|||
</view> --> |
|||
<view class="button button__submit" @click="addTap"><text class="text" style="color: white">保存</text></view> |
|||
</view> |
|||
</qn-footer> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import uGap from '@/components/u-gap/u-gap.vue' |
|||
import { getArea } from '@/apis/commonApi.js' |
|||
import qnFooter from '@/components/qn-footer/qn-footer.vue' |
|||
import qnDataPicker from '@/components/qn-data-picker/qn-data-picker.vue' |
|||
export default { |
|||
components: { uGap, qnFooter, qnDataPicker }, |
|||
data() { |
|||
return { |
|||
form: { |
|||
name: null, |
|||
contactMobile: null, |
|||
locProvinceId: null, |
|||
locCityId: null, |
|||
locDistrictId: null, |
|||
locProvinceName: null, |
|||
locCityName: null, |
|||
locDistrictName: null |
|||
}, |
|||
hasSelected: false, |
|||
items: [] |
|||
} |
|||
}, |
|||
mounted() { |
|||
getArea().then(res => { |
|||
if (res) { |
|||
this.items = res |
|||
} |
|||
}) |
|||
}, |
|||
onLoad() {}, |
|||
methods: { |
|||
onAreaChange(e) { |
|||
if (e.detail.value && e.detail.value.length > 0) { |
|||
const [province, city, district, street] = e.detail.value |
|||
this.form.locProvinceId = province.value |
|||
this.form.locProvinceName = province.text |
|||
this.form.locCityId = city.value |
|||
this.form.locCityName = city.text |
|||
this.form.locDistrictId = district.value |
|||
this.form.locDistrictName = district.text |
|||
this.form.locStreetId = street.value |
|||
this.form.locStreetName = street.text |
|||
} else { |
|||
this.form.locProvinceId = null |
|||
this.form.locProvinceName = null |
|||
this.form.locCityId = null |
|||
this.form.locCityName = null |
|||
this.form.locDistrictId = null |
|||
this.form.locDistrictName = null |
|||
this.form.locStreetId = null |
|||
this.form.locStreetName = null |
|||
} |
|||
}, |
|||
showCompany() {}, |
|||
// 保存 |
|||
addTap() {} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.warpper { |
|||
.qn-form-item { |
|||
width: 750rpx; |
|||
padding: 0rpx 32rpx; |
|||
background-color: #fff; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
// justify-content: space-between; |
|||
border-bottom: 2rpx solid #d8d8d8; |
|||
min-height: 88rpx; |
|||
.label { |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
margin-right: 20rpx; |
|||
.label__text { |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
} |
|||
} |
|||
.value { |
|||
flex-grow: 1; |
|||
flex-shrink: 1; |
|||
text-align: right; |
|||
} |
|||
} |
|||
.default-address { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0rpx 32rpx; |
|||
height: 133rpx; |
|||
background: #ffffff; |
|||
.title { |
|||
font-size: 30rpx; |
|||
color: #333333; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
.tip { |
|||
padding-top: 10rpx; |
|||
font-size: 24rpx; |
|||
color: #888888; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
} |
|||
.button-area { |
|||
width: 750rpx; |
|||
padding: 0 32rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
// justify-content: space-between; |
|||
.button { |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 10rpx; |
|||
.text { |
|||
font-size: 30rpx; |
|||
font-weight: 500; |
|||
text-align: center; |
|||
} |
|||
} |
|||
.button__cancel { |
|||
width: 270rpx; |
|||
height: 88rpx; |
|||
border: 2rpx solid #979797; |
|||
} |
|||
.button__submit { |
|||
width: 100%; |
|||
height: 88rpx; |
|||
background: #007aff; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,592 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<view> |
|||
<view class="hint-box">全网优质原纸供应商，20分钟极速响应。</view> |
|||
<view class="qn-form-item qn-form-item"> |
|||
<view class="label"> |
|||
<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons> |
|||
<text class="label__text">纸种</text> |
|||
</view> |
|||
<view class="value"> |
|||
<picker :value="paperIndex" :range="paperGradesList"> |
|||
<view> |
|||
<text class="uni-input">{{ paperGradesList[paperIndex] }}</text> |
|||
<uni-icons type="right" color="#000000" size="16"></uni-icons> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
<view class="qn-form-item qn-form-item"> |
|||
<view class="label"> |
|||
<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons> |
|||
<text class="label__text">品牌</text> |
|||
</view> |
|||
<view class="value"> |
|||
<picker :value="paperIndex" :range="brandList"> |
|||
<view> |
|||
<text class="uni-input">{{ brandList[paperIndex] }}</text> |
|||
<uni-icons type="right" color="#000000" size="16"></uni-icons> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
<view class="qn-form-item qn-form-item"> |
|||
<view class="label"> |
|||
<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons> |
|||
<text class="label__text">纸品名称</text> |
|||
</view> |
|||
<view class="value"><qn-easyinput :maxlength="20" v-model="form.shortName" :inputBorder="false" text="right" placeholder="请输入纸品名称"></qn-easyinput></view> |
|||
</view> |
|||
<view class="qn-form-item qn-form-item"> |
|||
<view class="label"> |
|||
<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons> |
|||
<text class="label__text">克重(g)</text> |
|||
</view> |
|||
<view class="value"> |
|||
<picker :value="paperIndex" :range="gramWeightList"> |
|||
<view> |
|||
<text class="uni-input">{{ gramWeightList[paperIndex] }}</text> |
|||
<uni-icons type="right" color="#000000" size="16"></uni-icons> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
<view class="qn-form-item-gg "> |
|||
<view class="label"> |
|||
<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons> |
|||
<text class="label__text">规格(mm)</text> |
|||
</view> |
|||
<view class="value"> |
|||
<view class="value"> |
|||
<!-- <qn-easyinput :maxlength="20" v-model="form.shortName" :inputBorder="false" text="right" placeholder="请输入数量"></qn-easyinput> --> |
|||
<radio-group> |
|||
<label v-for="(item, index) in radioGroupList" :key="index"> |
|||
<radio :value="item" :checked="index === 0" style="transform:scale(0.7)" /> |
|||
<text class="uni-input">{{ item }}</text> |
|||
</label> |
|||
</radio-group> |
|||
</view> |
|||
<view class="input-row"> |
|||
<view class=""><uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="form.shortName" placeholder="请输入"></uni-easyinput></view> |
|||
<view class="symbol">x</view> |
|||
<view class=""><uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="form.shortName" placeholder="请输入"></uni-easyinput></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="qn-form-item qn-form-item"> |
|||
<view class="label"> |
|||
<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons> |
|||
<text class="label__text">数量(张)</text> |
|||
</view> |
|||
<view class="value"> |
|||
<view class="value"><qn-easyinput :maxlength="20" v-model="form.shortName" :inputBorder="false" text="right" placeholder="请输入数量"></qn-easyinput></view> |
|||
</view> |
|||
</view> |
|||
<view class="qn-form-item qn-form-item"> |
|||
<view class="label"><text class="label__text">交货时间</text></view> |
|||
<view class="value"> |
|||
<picker :value="paperIndex" :range="deliveryTimeList"> |
|||
<view> |
|||
<text class="uni-input">{{ deliveryTimeList[paperIndex] }}</text> |
|||
<uni-icons type="right" color="#000000" size="16"></uni-icons> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
<view class="qn-form-item qn-form-item" style="border: none;"> |
|||
<view class="label"> |
|||
<!-- <uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons> --> |
|||
<text class="label__text">交货区域</text> |
|||
</view> |
|||
<view class="value"> |
|||
<!-- <qn-easyinput v-model="form.shortName" :inputBorder="false" text="right" placeholder="选择所在区域"></qn-easyinput> --> |
|||
<qn-data-picker |
|||
:readonly="hasSelected" |
|||
text="right" |
|||
:border="false" |
|||
class="qn-picker" |
|||
placeholder="区域" |
|||
popup-title="请选择城市" |
|||
:map="{ text: 'name', value: 'id' }" |
|||
@change="onAreaChange" |
|||
:clear-icon="true" |
|||
:localdata="items" |
|||
> |
|||
<text v-if="form.locDistrictId"> |
|||
{{ `${form.locProvinceName || ''}/${form.locCityName || ''}/${form.locDistrictName || ''}/${form.locStreetName || ''}` }} |
|||
</text> |
|||
</qn-data-picker> |
|||
</view> |
|||
</view> |
|||
<uGap></uGap> |
|||
<view class="qn-form-item-remark"> |
|||
<view class="label"><text class="label__text">询价备注</text></view> |
|||
<view class="value"> |
|||
<qn-easyinput |
|||
class="paper-price-textArea" |
|||
:maxlength="200" |
|||
:styles="{ disableColor: '#F7F8FA' }" |
|||
v-model="form.shortName" |
|||
:inputBorder="false" |
|||
type="textarea" |
|||
placeholder="请输入拜访对象" |
|||
></qn-easyinput> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<qn-footer fixed height="120rpx"> |
|||
<view class="button-area"> |
|||
<!-- <view class="button button__cancel" @click="back"><text class="text">取消</text></view> --> |
|||
<view class="button button__submit" @click="addUser"><text class="text" style="color: white">提交询价</text></view> |
|||
</view> |
|||
</qn-footer> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { back, uploadImage } from '@/utils/hook.js' |
|||
import { getArea } from '@/apis/commonApi.js' |
|||
import qnEasyinput from '@/components/qn-easyinput/qn-easyinput.vue' |
|||
import qnDataPicker from '@/components/qn-data-picker/qn-data-picker.vue' |
|||
import qnDatetimePicker from '@/components/qn-datetime-picker/qn-datetime-picker.vue' |
|||
import qnFooter from '@/components/qn-footer/qn-footer.vue' |
|||
import uGap from '@/components/u-gap/u-gap.vue' |
|||
const validateFields = [ |
|||
'name', |
|||
'uniformSocialCreditCode', |
|||
'legalPersonName', |
|||
'locProvinceId', |
|||
'locCityId', |
|||
'locDistrictId', |
|||
'locStreetId', |
|||
'locProvinceName', |
|||
'locCityName', |
|||
'locDistrictName', |
|||
'locStreetName', |
|||
'locDetail', |
|||
'legalPersonIdCardNo', |
|||
'legalPersonIdCardFrontImg', |
|||
'legalPersonIdCardBackImg', |
|||
'businessLicenseImg', |
|||
'registeredCapital', |
|||
'foundDate' |
|||
] |
|||
export default { |
|||
components: { qnEasyinput, qnDataPicker, qnDatetimePicker, qnFooter, uGap }, |
|||
data() { |
|||
return { |
|||
paperIndex: 0, |
|||
paperGradesList: ['白卡板', '黑板纸', '灰板纸'], |
|||
brandList: ['朱雀', '金蝶兰', '骄阳', '太阳', '丽品'], |
|||
gramWeightList: ['300', '345', '350'], |
|||
deliveryTimeList: ['当天到', '明天到'], |
|||
radioGroupList: ['正度', '大度', '特规'], |
|||
form: { |
|||
id: null, |
|||
name: null, |
|||
shortName: null, |
|||
contactName: null, |
|||
contactMobile: null, |
|||
contactTitle: null, |
|||
uniformSocialCreditCode: null, |
|||
locProvinceId: null, |
|||
locCityId: null, |
|||
locDistrictId: null, |
|||
locStreetId: null, |
|||
locProvinceName: null, |
|||
locCityName: null, |
|||
locDistrictName: null, |
|||
locStreetName: null, |
|||
locDetail: null, |
|||
legalPersonName: null, |
|||
legalPersonMobile: null, |
|||
legalPersonIdCardNo: null, |
|||
legalPersonIdCardFrontImg: null, |
|||
legalPersonIdCardBackImg: null, |
|||
businessLicenseImg: null, |
|||
registeredCapital: null, |
|||
foundDate: null |
|||
}, |
|||
searchList: [], |
|||
hasSelected: false, |
|||
items: [] |
|||
} |
|||
}, |
|||
mounted() { |
|||
getArea().then(res => { |
|||
if (res) { |
|||
this.items = res |
|||
} |
|||
}) |
|||
}, |
|||
methods: { |
|||
back, |
|||
showCompany(e) { |
|||
let enterpriseName = e.detail.value.trim() |
|||
if (enterpriseName) { |
|||
getCompanyList({ enterpriseName }).then(res => { |
|||
if (res) { |
|||
this.searchList = res.records |
|||
if (this.searchList.length > 0) { |
|||
this.$refs.popup.open('bottom') |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
selectCompany(enterpriseId) { |
|||
this.$refs.popup.close() |
|||
getCompanyInfoById({ enterpriseId }).then(res => { |
|||
if (res) { |
|||
this.form.id = enterpriseId |
|||
this.form.name = res.name |
|||
// 信息反显 |
|||
this.reflectiveCompany(res) |
|||
setTimeout(() => { |
|||
this.hasSelected = true |
|||
}, 0) |
|||
} |
|||
}) |
|||
}, |
|||
reflectiveCompany(info) { |
|||
this.form.uniformSocialCreditCode = info.uniformSocialCreditCode |
|||
this.form.locProvinceId = info.locProvinceId |
|||
this.form.locCityId = info.locCityId |
|||
this.form.locStreetId = info.locStreetId |
|||
this.form.locDistrictId = info.locDistrictId |
|||
this.form.locProvinceName = info.locProvinceName |
|||
this.form.locCityName = info.locCityName |
|||
this.form.locStreetName = info.locStreetName |
|||
this.form.locDistrictName = info.locDistrictName |
|||
this.form.locDetail = info.locDetail |
|||
this.form.registeredCapital = info.registeredCapital |
|||
this.form.foundDate = info.foundDate |
|||
}, |
|||
onAreaChange(e) { |
|||
if (e.detail.value && e.detail.value.length > 0) { |
|||
const [province, city, district, street] = e.detail.value |
|||
this.form.locProvinceId = province.value |
|||
this.form.locProvinceName = province.text |
|||
this.form.locCityId = city.value |
|||
this.form.locCityName = city.text |
|||
this.form.locDistrictId = district.value |
|||
this.form.locDistrictName = district.text |
|||
this.form.locStreetId = street.value |
|||
this.form.locStreetName = street.text |
|||
} else { |
|||
this.form.locProvinceId = null |
|||
this.form.locProvinceName = null |
|||
this.form.locCityId = null |
|||
this.form.locCityName = null |
|||
this.form.locDistrictId = null |
|||
this.form.locDistrictName = null |
|||
this.form.locStreetId = null |
|||
this.form.locStreetName = null |
|||
} |
|||
}, |
|||
selectedImage(type) { |
|||
uploadImage() |
|||
.then(urls => { |
|||
if (urls) { |
|||
this.form[type] = urls[0] |
|||
} |
|||
}) |
|||
.catch(e => { |
|||
uni.showToast({ |
|||
title: '上传失败', |
|||
icon: 'fail' |
|||
}) |
|||
}) |
|||
}, |
|||
showImage() { |
|||
uni.previewImage({ |
|||
urls: [this.form.businessLicenseImg] |
|||
}) |
|||
}, |
|||
addUser() { |
|||
if (!this.form.id) { |
|||
for (let i = 0; i < validateFields.length; i++) { |
|||
if (this.form[validateFields[i]] === null || this.form[validateFields[i]] === '') { |
|||
uni.showToast({ |
|||
title: '请完善信息', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
} |
|||
if (!/^1[3456789]\d{9}$/.test(this.form['legalPersonMobile'])) { |
|||
uni.showToast({ |
|||
title: '请输入正确法人手机号', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
// if (!/^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/.test(this.form['legalPersonIdCardNo'])) { |
|||
// uni.showToast({ |
|||
// title: '请输入正确法人身份证号', |
|||
// icon: 'none' |
|||
// }) |
|||
// return |
|||
// } |
|||
} |
|||
if (this.form.contactMobile && !/^1[3456789]\d{9}$/.test(this.form['contactMobile'])) { |
|||
uni.showToast({ |
|||
title: '请输入正确联系人手机号', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
addCustomer(this.form).then(res => { |
|||
if (res) { |
|||
uni.showToast({ |
|||
title: '添加成功', |
|||
icon: 'success' |
|||
}) |
|||
setTimeout(() => { |
|||
back() |
|||
}, 1000) |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
watch: { |
|||
['form.name'](val) { |
|||
if (this.hasSelected) { |
|||
console.log('watch:', val) |
|||
this.hasSelected = false |
|||
this.form.id = null |
|||
this.reflectiveCompany({}) |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
frontIDCard() { |
|||
let url = 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/frontIDCard.png' |
|||
if (this.hasSelected || !this.form.legalPersonIdCardFrontImg) { |
|||
return url |
|||
} |
|||
return this.form.legalPersonIdCardFrontImg |
|||
}, |
|||
backIDCard() { |
|||
let url = 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/backDCard.png' |
|||
if (this.hasSelected || !this.form.legalPersonIdCardBackImg) { |
|||
return url |
|||
} |
|||
return this.form.legalPersonIdCardBackImg |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.content { |
|||
width: 750rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background-color: #f7f8fa; |
|||
} |
|||
.hint-box { |
|||
padding: 0rpx 32rpx; |
|||
height: 76rpx; |
|||
line-height: 76rpx; |
|||
background: #e5f1ff; |
|||
font-size: 30rpx; |
|||
color: #007aff; |
|||
letter-spacing: 0; |
|||
font-weight: 400; |
|||
} |
|||
.uni-input { |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
letter-spacing: 0; |
|||
text-align: right; |
|||
font-weight: 400; |
|||
padding-right: 16rpx; |
|||
} |
|||
.qn-form-item-remark { |
|||
width: 750rpx; |
|||
padding: 28rpx 32rpx 10rpx 32rpx; |
|||
background-color: #fff; |
|||
.label { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
margin-right: 20rpx; |
|||
|
|||
.label__text { |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
} |
|||
} |
|||
.value { |
|||
padding: 16rpx 0rpx; |
|||
} |
|||
.paper-price-textArea { |
|||
background: #f7f8fa; |
|||
border-radius: 20rpx; |
|||
padding: 10rpx; |
|||
height: 155rpx; |
|||
} |
|||
} |
|||
.qn-form-item-gg { |
|||
width: 750rpx; |
|||
padding: 24rpx 32rpx; |
|||
background-color: #fff; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
border-bottom: 2rpx solid #d8d8d8; |
|||
.label { |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-start; |
|||
margin-right: 20rpx; |
|||
.label__text { |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
} |
|||
} |
|||
.value { |
|||
flex-grow: 1; |
|||
flex-shrink: 1; |
|||
text-align: right; |
|||
} |
|||
.input-row { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
padding-top: 20rpx; |
|||
.easyinput { |
|||
height: 64rpx; |
|||
width: 160rpx; |
|||
background: #f5f5f5; |
|||
border-radius: 8rpx; |
|||
} |
|||
.symbol { |
|||
padding: 0rpx 16rpx; |
|||
font-size: 32rpx; |
|||
color: rgba(0, 0, 0, 0.85); |
|||
font-weight: 400; |
|||
} |
|||
} |
|||
} |
|||
.qn-form-item { |
|||
width: 750rpx; |
|||
padding: 0rpx 32rpx; |
|||
background-color: #fff; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
border-bottom: 2rpx solid #d8d8d8; |
|||
min-height: 80rpx; |
|||
.label { |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
margin-right: 20rpx; |
|||
.label__text { |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
} |
|||
} |
|||
.value { |
|||
flex-grow: 1; |
|||
flex-shrink: 1; |
|||
text-align: right; |
|||
} |
|||
} |
|||
.qn-form-item__title { |
|||
background-color: #f7f8fa; |
|||
padding: 20rpx 32rpx; |
|||
border: none; |
|||
.title { |
|||
font-size: 30rpx; |
|||
color: #888888; |
|||
} |
|||
} |
|||
.popup_modal { |
|||
width: 750rpx; |
|||
height: 600rpx; |
|||
background-color: #fff; |
|||
border-radius: 10px 10px 0 0; |
|||
.popup_modal-title { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 750rpx; |
|||
height: 88rpx; |
|||
font-weight: 600; |
|||
border-bottom: 2rpx solid #d8d8d8; |
|||
} |
|||
.popup_modal-scroll { |
|||
width: 750rpx; |
|||
height: 600rpx; |
|||
.popup_modal-scroll-item { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
width: 750rpx; |
|||
height: 88rpx; |
|||
padding: 0rpx 32rpx; |
|||
border-bottom: 2rpx solid #d8d8d8; |
|||
} |
|||
} |
|||
} |
|||
.upload-area { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-top: 10rpx; |
|||
margin-bottom: 24rpx; |
|||
.idCard { |
|||
width: 324rpx; |
|||
height: 280rpx; |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
} |
|||
} |
|||
.button-area { |
|||
width: 750rpx; |
|||
padding: 0 32rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
// justify-content: space-between; |
|||
.button { |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 10rpx; |
|||
.text { |
|||
font-size: 30rpx; |
|||
font-weight: 500; |
|||
text-align: center; |
|||
} |
|||
} |
|||
.button__cancel { |
|||
width: 270rpx; |
|||
height: 88rpx; |
|||
border: 2rpx solid #979797; |
|||
} |
|||
.button__submit { |
|||
// width: 400rpx; |
|||
width: 100%; |
|||
height: 88rpx; |
|||
background: #007aff; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save