746 lines
21 KiB
Vue
746 lines
21 KiB
Vue
<template>
|
||
|
||
<view class="">
|
||
<u-loading-page :loading="showLoading"></u-loading-page>
|
||
<view class="" style="width: 100vw; overflow: hidden;" v-show="!showLoading">
|
||
<view class="card">
|
||
<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
|
||
<view class="cards">
|
||
<view class="avter">
|
||
<view class="">
|
||
<text style="color: #f76c7f;font-weight: bold;">*</text>用户头像:
|
||
</view>
|
||
<view class="">
|
||
<view class="" v-if="formData.avatar">
|
||
<!-- {{formData.avatar}} -->
|
||
<image :src="formData.avatar" alt="" style="width:150rpx;height:150rpx;">
|
||
</image>
|
||
</view>
|
||
<view class="uplode" v-else>
|
||
<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
|
||
上传头像
|
||
<view class="up" style="opacity: 0;">
|
||
<u-upload :fileList="formData.avatar?[{url:formData.avatar}]:[]"
|
||
@afterRead="afterReadAvatar" @delete="formData.avatar=''" :maxCount="1">
|
||
</u-upload>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="cards">
|
||
<u-form-item label="电话" required prop="account" borderBottom>
|
||
<u--input v-model="formData.account" placeholder="请输入手机号" type="number"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="密码" required prop="account" borderBottom>
|
||
<u--input v-model="formData.password" placeholder="请输入密码" type="password"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="确认密码" labelWidth="auto" required prop="account" borderBottom>
|
||
<u--input v-model="formData.password_confirm" placeholder="请确认密码"
|
||
type="password"></u--input>
|
||
</u-form-item>
|
||
|
||
<u-form-item label="性别" required prop="sex" borderBottom>
|
||
|
||
<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
|
||
<u-radio v-for="(item, index) in radiolist1" :customStyle="{marginLeft: '20px'}"
|
||
:key="index" :label="item.name" :name="item.name">
|
||
</u-radio>
|
||
</u-radio-group>
|
||
<!-- <u--input v-model="formData.sex" placeholder="请输入姓名"></u--input> -->
|
||
</u-form-item>
|
||
|
||
<u-form-item label="姓名" required prop="nickname" borderBottom>
|
||
<u--input v-model="formData.nickname" placeholder="请输入姓名"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="用户角色" labelWidth="auto" required prop="group_name" borderBottom
|
||
@click="showRole=true" ref="item1">
|
||
<u--input v-model="formData.group_name" placeholder="请选择"></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
<u-form-item labelWidth="auto" label="身份证号" required prop="id_card" borderBottom>
|
||
<u--input v-model="formData.id_card" placeholder="请输入身份证号" @input="c_idcard"
|
||
type="idcard"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="省" required prop="province" @click="changeCity('province')" borderBottom>
|
||
<u--input :value="formData.province" disabled disabledColor="#fff"
|
||
placeholder="请选择省"></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
<u-form-item label="市" required prop="city" @click="changeCity('city')" borderBottom>
|
||
<u--input :value="formData.city" disabled disabledColor="#fff"
|
||
placeholder="请选择市"></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
<u-form-item label="区县" required prop="area" @click="changeCity('area')" borderBottom>
|
||
<u--input :value="formData.area" disabled disabledColor="#fff"
|
||
placeholder="请选择区县"></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
<u-form-item label="乡镇" required prop="street" @click="changeCity('street')" borderBottom>
|
||
<u--input :value="formData.street" disabled disabledColor="#fff"
|
||
placeholder="请选择镇"></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
<u-form-item label="村社" required prop="village" @click="changeCity('village')" borderBottom>
|
||
<u--input :value="formData.village" type="text" disabled disabledColor="#fff"
|
||
placeholder="请选择村"></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
<u-form-item label="小队" required prop="brigade" @click="changeCity('brigade')" borderBottom>
|
||
<u--input :value="formData.brigade" disabled disabledColor="#fff"
|
||
placeholder="请选择小队"></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
|
||
</view>
|
||
<view class="cards">
|
||
<view style="margin-bottom:30rpx ;">
|
||
<text style="color: #f76c7f;font-weight: bold;">*</text>身份证照:
|
||
</view>
|
||
<view class="up_list">
|
||
<view class="" v-if="formData.qualification.id_card">
|
||
<image :src="formData.qualification.id_card" alt=""
|
||
style="width:243.57rpx;height:150rpx;">
|
||
</image>
|
||
</view>
|
||
<view class="uplode" v-else>
|
||
<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
|
||
身份证正面
|
||
<view class="up" style="opacity: 0;">
|
||
<u-upload
|
||
:fileList="formData.qualification.id_card?[{url:formData.qualification.id_card}]:[]"
|
||
@afterRead="afterRead" @delete="formData.qualification.id_card=''"
|
||
name="id_card" :maxCount="1" width="300rpx" height="200rpx"
|
||
style="margin-top: 10rpx;">
|
||
</u-upload>
|
||
</view>
|
||
</view>
|
||
<view class="" v-if="formData.qualification.id_card_b">
|
||
<!-- {{formData.avatar}} -->
|
||
<image :src="formData.qualification.id_card_b" alt=""
|
||
style="width:243.57rpx;height:150rpx;">
|
||
</image>
|
||
</view>
|
||
<view class="uplode" v-else>
|
||
<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
|
||
身份证反面
|
||
<view class="up" style="opacity: 0;">
|
||
|
||
<u-upload
|
||
:fileList="formData.qualification.id_card_b?[{url:formData.qualification.id_card_b}]:[]"
|
||
@afterRead="afterRead" @delete="formData.qualification.id_card_b=''"
|
||
name="id_card_b" :maxCount="1" width="300rpx" height="200rpx"
|
||
style="margin-top: 10rpx;">
|
||
</u-upload>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="cards">
|
||
<view style="margin-bottom:30rpx ;">
|
||
<text style="color: #f76c7f;font-weight: bold;">*</text>银行卡照:
|
||
</view>
|
||
<view class="up_list">
|
||
<view class="" v-if="formData.qualification.bank_account">
|
||
<!-- {{formData.avatar}} -->
|
||
<image :src="formData.qualification.bank_account" alt=""
|
||
style="width:243.57rpx;height:150rpx;">
|
||
</image>
|
||
</view>
|
||
<view class="uplode" v-else>
|
||
<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
|
||
银行卡正面
|
||
<view class="up" style="opacity: 0;">
|
||
|
||
<u-upload
|
||
:fileList="formData.qualification.bank_account?[{url:formData.qualification.bank_account}]:[]"
|
||
@afterRead="afterRead" @delete="formData.qualification.bank_account=''"
|
||
name="bank_account" :maxCount="1" width="300rpx" height="200rpx"
|
||
style="margin-top: 10rpx;">
|
||
</u-upload>
|
||
</view>
|
||
</view>
|
||
<view class="" v-if="formData.qualification.bank_account_b">
|
||
<!-- {{formData.avatar}} -->
|
||
<image :src="formData.qualification.bank_account_b" alt=""
|
||
style="width:243.57rpx;height:150rpx;">
|
||
</image>
|
||
</view>
|
||
<view class="uplode" v-else>
|
||
<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
|
||
银行卡反面
|
||
<view class="up" style="opacity: 0;">
|
||
<u-upload
|
||
:fileList="formData.qualification.bank_account_b?[{url:formData.qualification.bank_account_b}]:[]"
|
||
@afterRead="afterRead" @delete="formData.qualification.bank_account_b=''"
|
||
name="bank_account_b" :maxCount="1" width="300rpx" height="200rpx"
|
||
style="margin-top: 10rpx;">
|
||
</u-upload>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="cards">
|
||
<view style="margin-bottom:30rpx ;">
|
||
驾驶证照:
|
||
</view>
|
||
<view class="up_list">
|
||
<view class="" v-if="formData.qualification.car_card">
|
||
<!-- {{formData.avatar}} -->
|
||
<image :src="formData.qualification.car_card" alt=""
|
||
style="width:243.57rpx;height:150rpx;">
|
||
</image>
|
||
</view>
|
||
<view class="uplode" v-else>
|
||
<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
|
||
驾驶证一页
|
||
<view class="up" style="opacity: 0;">
|
||
<u-upload
|
||
:fileList="formData.qualification.car_card?[{url:formData.qualification.car_card}]:[]"
|
||
@afterRead="afterRead" @delete="formData.qualification.car_card=''"
|
||
name="car_card" :maxCount="1" width="300rpx" height="200rpx"
|
||
style="margin-top: 10rpx;">
|
||
</u-upload>
|
||
</view>
|
||
</view>
|
||
<view class="" v-if="formData.qualification.car_card_b">
|
||
<!-- {{formData.avatar}} -->
|
||
<image :src="formData.qualification.car_card_b" alt=""
|
||
style="width:243.57rpx;height:150rpx;">
|
||
</image>
|
||
</view>
|
||
<view class="uplode" v-else>
|
||
<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
|
||
驾驶证二页
|
||
<view class="up" style="opacity: 0;">
|
||
<u-upload
|
||
:fileList="formData.qualification.car_card_b?[{url:formData.qualification.car_card_b}]:[]"
|
||
@afterRead="afterRead" @delete="formData.qualification.car_card_b=''"
|
||
name="car_card_b" :maxCount="1" width="300rpx" height="200rpx"
|
||
style="margin-top: 10rpx;">
|
||
</u-upload>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</u--form>
|
||
<button @click="modelShow=true" type="primary" class="btn" style="margin: 28rpx;">注册</button>
|
||
</view>
|
||
<u-modal :show="modelShow" title="提示" content='请确认人员信息无误后再创建' closeOnClickOverlay showCancelButton
|
||
@close="modelShow=false" @cancel="modelShow=false" @confirm="$u.throttle(addAcountNum, 2000)"></u-modal>
|
||
|
||
|
||
<u-action-sheet :show="showRole" :actions="actions" title="请选择性别" @close="showRole = false"
|
||
@select="sexSelect">
|
||
</u-action-sheet>
|
||
|
||
|
||
<u-picker @close='showPicker=false' :defaultIndex='defaultIndex' @cancel='showPicker=false'
|
||
:show="showPicker" ref="uPicker" :columns="columns" :keyName='keyName' @confirm="confirm"></u-picker>
|
||
|
||
|
||
<!-- <u-picker :show="showPicker" :columns="columns" keyName="province_name"></u-picker> -->
|
||
|
||
|
||
</view>
|
||
|
||
|
||
</view>
|
||
|
||
|
||
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
commonProvince,
|
||
commonCity,
|
||
commonArea,
|
||
commonStreet,
|
||
commonVillage,
|
||
commonBrigade,
|
||
register
|
||
} from "@/api/enroll.js"
|
||
|
||
import {
|
||
upLoadImage
|
||
} from "@/api/file.js"
|
||
import {
|
||
loginAdd,
|
||
} from "@/api/oaUser.js"
|
||
import {
|
||
Toast
|
||
} from "../../libs/uniApi"
|
||
export default {
|
||
|
||
data() {
|
||
return {
|
||
radiolist1: [{
|
||
name: '男',
|
||
value: 1,
|
||
},
|
||
{
|
||
name: '女',
|
||
value: 2
|
||
},
|
||
|
||
],
|
||
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
|
||
radiovalue1: '男',
|
||
defaultIndex: [0],
|
||
showLoading: true,
|
||
keyName: 'province_name',
|
||
showRole: false,
|
||
showPicker: false,
|
||
areaList: [],
|
||
proList: [],
|
||
cityList: [],
|
||
streetList: [],
|
||
villageList: [],
|
||
brigadeList: [],
|
||
columns: [],
|
||
actions: [{
|
||
name: '镇/街合伙人',
|
||
id: 22
|
||
},
|
||
{
|
||
name: '社区合伙人',
|
||
id: 21
|
||
},
|
||
{
|
||
name: '小区队长',
|
||
id: 20
|
||
},
|
||
{
|
||
name: '村合伙人',
|
||
id: 19
|
||
},
|
||
{
|
||
name: '生产队长',
|
||
id: 18
|
||
},
|
||
|
||
],
|
||
modelShow: false,
|
||
formData: {
|
||
company_id: 0,
|
||
account: '', //账号
|
||
password: '', //密码
|
||
password_confirm: '', //确认密码
|
||
channel: 6, //注册渠道[1-微信小程序 2-微信公众号 3-手机H5 4-电脑PC 5-苹果APP 6-安卓APP]
|
||
id_card: '',
|
||
// is_captain: '', // 队长标识
|
||
// is_service_manager: '', //服务部长标识
|
||
sex: '',
|
||
avatar: '',
|
||
nickname: '',
|
||
// address: '',
|
||
group_id: "",
|
||
group_name: "",
|
||
province: "",
|
||
city: "",
|
||
area: "",
|
||
street: "",
|
||
village: "",
|
||
brigade: "",
|
||
// provinceCode: "",
|
||
cityCode: "",
|
||
areaCode: "",
|
||
streetCode: "",
|
||
villageCode: "",
|
||
brigadeCode: "",
|
||
qualification: {
|
||
id_card: "",
|
||
id_card_b: "",
|
||
car_card: "",
|
||
car_card_b: "",
|
||
bank_account: "",
|
||
bank_account_b: ""
|
||
},
|
||
},
|
||
rules: {
|
||
account: {
|
||
required: true,
|
||
pattern: /^(1[3456789]\d{9})$/,
|
||
message: '请输入正确的手机号码',
|
||
trigger: ['change', 'blur']
|
||
},
|
||
id_card: {
|
||
required: true,
|
||
pattern: /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dxX]$/,
|
||
message: '请输入正确的身份证号',
|
||
trigger: ['change', 'blur']
|
||
},
|
||
},
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getChannel()
|
||
this.setRules()
|
||
commonProvince().then(res => {
|
||
this.proList = res.data
|
||
this.columns = [this.proList]
|
||
this.showLoading = false
|
||
})
|
||
|
||
},
|
||
onReady() {
|
||
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
|
||
this.$refs.uForm.setRules(this.rules)
|
||
|
||
},
|
||
onShow() {},
|
||
methods: {
|
||
getChannel() {
|
||
switch (uni.getSystemInfoSync().platform) {
|
||
case 'android':
|
||
this.formData.channel = 6
|
||
break;
|
||
case 'ios':
|
||
this.formData.channel = 5
|
||
break;
|
||
case "windows":
|
||
this.formData.channel = 4
|
||
break;
|
||
default:
|
||
this.formData.channel = 1
|
||
break;
|
||
}
|
||
//#ifdef MP
|
||
this.formData.channel = 1
|
||
//#endif
|
||
|
||
},
|
||
groupChange(n) {
|
||
n == "男" ? this.formData.sex = 1 : this.formData.sex = 2
|
||
console.log(this.formData);
|
||
},
|
||
|
||
setRules() {
|
||
let ruleKeyList = ['avatar', 'nickname', 'group_name', 'province', 'city', 'area', 'village', 'street',
|
||
'qualification.id_card', 'qualification.bank_account', 'qualification.id_card_b',
|
||
'qualification.bank_account_b'
|
||
]
|
||
|
||
ruleKeyList.forEach(item => {
|
||
this.rules[item] = {
|
||
type: 'string',
|
||
required: true,
|
||
message: '不能为空',
|
||
trigger: ['change', 'blur']
|
||
}
|
||
})
|
||
},
|
||
confirm(e) {
|
||
if (this.keyName == 'province_name') {
|
||
uni.showLoading({
|
||
title: '获取下级区域中'
|
||
})
|
||
this.formData.province = e.value[0].province_name
|
||
this.formData.province_code = e.value[0].province_code
|
||
commonCity({
|
||
city: this.formData.province_code
|
||
}).then(res => {
|
||
this.cityList = res.data
|
||
uni.hideLoading()
|
||
this.defaultIndex = [0]
|
||
})
|
||
}
|
||
if (this.keyName == 'city_name') {
|
||
uni.showLoading({
|
||
title: '获取下级区域中'
|
||
})
|
||
this.formData.city = e.value[0].city_name
|
||
this.formData.cityCode = e.value[0].city_code
|
||
commonArea({
|
||
area: this.formData.cityCode
|
||
}).then(res => {
|
||
this.areaList = res.data
|
||
uni.hideLoading()
|
||
this.defaultIndex = [0]
|
||
})
|
||
}
|
||
if (this.keyName == 'area_name') {
|
||
uni.showLoading({
|
||
title: '获取下级区域中'
|
||
})
|
||
this.formData.area = e.value[0].area_name
|
||
this.formData.areaCode = e.value[0].area_code
|
||
|
||
commonStreet({
|
||
street: this.formData.areaCode
|
||
}).then(res => {
|
||
this.streetList = res.data
|
||
uni.hideLoading()
|
||
this.defaultIndex = [0]
|
||
})
|
||
}
|
||
if (this.keyName == 'street_name') {
|
||
uni.showLoading({
|
||
title: '获取下级区域中'
|
||
})
|
||
this.formData.street = e.value[0].street_name
|
||
this.formData.streetCode = e.value[0].street_code
|
||
commonVillage({
|
||
village: this.formData.streetCode
|
||
}).then(res => {
|
||
this.villageList = res.data
|
||
uni.hideLoading()
|
||
this.defaultIndex = [0]
|
||
})
|
||
}
|
||
if (this.keyName == 'village_name') {
|
||
uni.showLoading({
|
||
title: '获取下级区域中'
|
||
})
|
||
this.formData.village = e.value[0].village_name
|
||
this.formData.villageCode = e.value[0].village_code
|
||
commonBrigade({
|
||
brigade: this.formData.villageCode
|
||
}).then(res => {
|
||
this.brigadeList = res.data
|
||
uni.hideLoading()
|
||
this.defaultIndex = [0]
|
||
})
|
||
}
|
||
if (this.keyName == 'brigade_name') {
|
||
this.formData.brigade = e.value[0].brigade_name
|
||
this.formData.brigadeCode = e.value[0].id
|
||
this.defaultIndex = [0]
|
||
}
|
||
|
||
|
||
this.showPicker = false
|
||
},
|
||
|
||
changeCity(type, toast = false) {
|
||
this.showPicker = true
|
||
if (type == 'role') {
|
||
this.actionList = this.actions
|
||
}
|
||
|
||
|
||
if (type == 'province') {
|
||
this.keyName = 'province_name'
|
||
this.columns = [this.proList]
|
||
|
||
}
|
||
|
||
if (type == 'city') {
|
||
this.keyName = 'city_name'
|
||
this.columns = [this.cityList]
|
||
}
|
||
if (type == 'area') {
|
||
this.keyName = 'area_name'
|
||
this.columns = [this.areaList]
|
||
|
||
}
|
||
if (type == 'street') {
|
||
this.keyName = 'street_name'
|
||
this.columns = [this.streetList]
|
||
|
||
}
|
||
if (type == 'village') {
|
||
this.keyName = 'village_name'
|
||
this.columns = [this.villageList]
|
||
|
||
}
|
||
if (type == 'brigade') {
|
||
this.keyName = 'brigade_name'
|
||
this.columns = [this.brigadeList]
|
||
|
||
}
|
||
|
||
// this.actionList=
|
||
|
||
|
||
// if (this[type + 'List'].length == 0) {
|
||
// if (type == 'brigade') return Toast('小队已经建立完毕');
|
||
// return Toast('请先选择上一级地区');
|
||
// }
|
||
// this.changeType = type;
|
||
// this.showProvince = true;
|
||
},
|
||
sexSelect(e) {
|
||
|
||
|
||
this.formData.group_id = e.id
|
||
this.formData.group_name = e.name
|
||
this.showRole = false
|
||
},
|
||
c_idcard(e) {
|
||
this.$nextTick(() => {
|
||
this.formData.id_card = e.replace(/[^0-9X]/g, '')
|
||
})
|
||
},
|
||
// 上传头像
|
||
async afterReadAvatar(event) {
|
||
uni.showLoading({
|
||
title: '上传中'
|
||
})
|
||
upLoadImage({
|
||
filePath: event.file.url,
|
||
name: 'file'
|
||
}).then(res => {
|
||
this.formData.avatar = res.data.uri;
|
||
}).finally(() => {
|
||
uni.hideLoading();
|
||
})
|
||
},
|
||
// 新增图片
|
||
async afterRead(event) {
|
||
this.upLoad(event.file.url, event.name)
|
||
},
|
||
// 上传图片
|
||
upLoad(url, type) {
|
||
uni.showLoading({
|
||
title: '上传中请稍后'
|
||
})
|
||
upLoadImage({
|
||
filePath: url,
|
||
name: 'file'
|
||
}).then(res => {
|
||
this.formData.qualification[type] = res.data.uri
|
||
}).finally(() => {
|
||
uni.hideLoading();
|
||
})
|
||
},
|
||
// 创建账号
|
||
async addAcountNum() {
|
||
this.modelShow = false;
|
||
await this.$nextTick();
|
||
if (!this.formData.avatar) return Toast('头像未上传');
|
||
if (!this.formData.qualification.id_card || !this.formData.qualification.id_card_b) return Toast(
|
||
'身份证未上传');
|
||
if (!this.formData.qualification.bank_account || !this.formData.qualification.bank_account_b)
|
||
return Toast(
|
||
'银行卡未上传');
|
||
this.$refs.uForm.validate().then(async (e) => {
|
||
if (e) {
|
||
uni.showLoading()
|
||
|
||
|
||
console.log(this.formData)
|
||
|
||
let res = await register({
|
||
...this.formData,
|
||
|
||
});
|
||
|
||
|
||
console.log(res, 'res')
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: "添加成功",
|
||
success: () => {
|
||
// setTimeout(() => {
|
||
// uni.$emit('initPersonnel');
|
||
// uni.navigateBack();
|
||
// }, 1000)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
},
|
||
onPullDownRefresh() {
|
||
uni.stopPullDownRefresh()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.card {
|
||
// background-color: #fff;
|
||
// margin: 28rpx;
|
||
// padding: 28rpx;
|
||
// border-radius: 14rpx;
|
||
|
||
.cards {
|
||
|
||
|
||
margin: 28rpx;
|
||
padding: 28rpx;
|
||
border-radius: 14rpx;
|
||
background-color: #fff;
|
||
|
||
.avter {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
// line-height: 150rpx;
|
||
align-items: center;
|
||
}
|
||
|
||
.up_list {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.uplode {
|
||
width: 243.57rpx;
|
||
height: 173.48rpx;
|
||
box-sizing: border-box;
|
||
padding-top: 30rpx;
|
||
border-radius: 15rpx;
|
||
border: 1px solid $theme-oa-color;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
color: $theme-oa-color;
|
||
position: relative;
|
||
|
||
.up {
|
||
position: absolute;
|
||
color: transparent;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
.title {
|
||
font-weight: 500;
|
||
font-size: 34rpx;
|
||
margin-top: 30rpx;
|
||
|
||
&:nth-child(1) {
|
||
margin-top: 0;
|
||
}
|
||
|
||
&::before {
|
||
width: 8rpx;
|
||
height: 26rpx;
|
||
border-radius: 4rpx;
|
||
background-color: #0122c7;
|
||
content: "";
|
||
display: inline-block;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
margin-top: 32rpx;
|
||
// margin-bottom: 40rpx;
|
||
// width: 100%;
|
||
height: 84rpx;
|
||
background: $theme-oa-color;
|
||
border-radius: 42rpx 42rpx 42rpx 42rpx;
|
||
color: #fff;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style> |