4 changed files with 407 additions and 402 deletions
@ -1,412 +1,417 @@ |
|||
<template> |
|||
<view> |
|||
<view class="top-bg"></view> |
|||
<view class="container"> |
|||
<u-form :model="form" ref="uForm" label-width="90"> |
|||
<view class="info-card"> |
|||
<u-form-item label="身份证号" prop="idCard"> |
|||
<u-input |
|||
v-model="form.idCard" |
|||
placeholder="请输入身份证号" |
|||
border="none" |
|||
input-align="left" |
|||
suffixIcon="search" |
|||
suffixIconStyle="color: #909399" |
|||
@confirm="handleQuery" |
|||
/> |
|||
</u-form-item> |
|||
</view> |
|||
<view> |
|||
<view class="top-bg"></view> |
|||
<view class="container"> |
|||
<u-form :model="form" ref="uForm" label-width="90"> |
|||
<view class="info-card"> |
|||
<u-form-item prop="idCard"> |
|||
<u-input v-model="form.idCard" placeholder="请输入身份证号" border="none" input-align="left" |
|||
suffixIcon="search" suffixIconStyle="color: #909399" @confirm="handleQuery" /> |
|||
</u-form-item> |
|||
</view> |
|||
<view class="cont" v-if="showInfo"> |
|||
<view class="info-card"> |
|||
<u-form-item label="姓名" prop="name" required> |
|||
<text style="text-align: right">{{ baseInfo.graduateName }}</text> |
|||
|
|||
<view class="info-card"> |
|||
<u-form-item label="姓名" prop="name" required> |
|||
<text style="text-align: right">{{ baseInfo.graduateName }}</text> |
|||
<!-- <u-input |
|||
v-model="baseInfo.graduateName" |
|||
placeholder="请输入姓名" |
|||
border="none" |
|||
input-align="right" |
|||
:disabled="true" |
|||
/> --> |
|||
</u-form-item> |
|||
<view style="border-bottom: 2rpx solid #e5e5e5; margin: 0"></view> |
|||
<u-form-item label="房间" prop="room" required> |
|||
<text style="text-align: right">{{ roomAllPath }}</text> |
|||
|
|||
<!-- <u-input |
|||
v-model="baseInfo.graduateName" |
|||
placeholder="请输入姓名" |
|||
border="none" |
|||
input-align="right" |
|||
:disabled="true" |
|||
/> --> |
|||
</u-form-item> |
|||
<view style="border-bottom: 2rpx solid #e5e5e5; margin: 0"></view> |
|||
<u-form-item label="房间" prop="room" required> |
|||
<text style="text-align: right">{{ roomAllPath }}</text> |
|||
<!-- <u-input |
|||
v-model="roomAllPath" |
|||
placeholder="请输入房间" |
|||
border="none" |
|||
input-align="right" |
|||
:disabled="true" |
|||
/> --> |
|||
</u-form-item> |
|||
<view style="border-bottom: 2rpx solid #e5e5e5; margin: 0"></view> |
|||
<u-form-item label="手机号" prop="phone" required> |
|||
<text style="text-align: right">{{ baseInfo.telephone }}</text> |
|||
|
|||
<!-- <u-input |
|||
v-model="roomAllPath" |
|||
placeholder="请输入房间" |
|||
border="none" |
|||
input-align="right" |
|||
:disabled="true" |
|||
/> --> |
|||
</u-form-item> |
|||
<view style="border-bottom: 2rpx solid #e5e5e5; margin: 0"></view> |
|||
<u-form-item label="手机号" prop="phone" required> |
|||
<text style="text-align: right">{{ baseInfo.telephone }}</text> |
|||
<!-- <u-input |
|||
v-model="baseInfo.telephone" |
|||
placeholder="请输入手机号" |
|||
border="none" |
|||
input-align="right" |
|||
:disabled="true" |
|||
/> --> |
|||
</u-form-item> |
|||
<view style="border-bottom: 2rpx solid #e5e5e5; margin: 0"></view> |
|||
<u-form-item label="退房日期" prop="leaveDate" required @click="showDate = false"> |
|||
<text style="text-align: right">{{ baseInfo.checkOutTime }}</text> |
|||
<!-- <u--input |
|||
v-model="baseInfo.checkOutTime" |
|||
placeholder="请选择退房日期" |
|||
border="none" |
|||
readonly |
|||
input-align="right" |
|||
></u--input> --> |
|||
</u-form-item> |
|||
<!-- <u-form-item |
|||
label="问题类型" |
|||
prop="problemType" |
|||
required |
|||
@click="showProblemTypePicker = true" |
|||
> |
|||
<u-input |
|||
v-model="form.problemType" |
|||
placeholder="请选择问题类型" |
|||
border="none" |
|||
input-align="right" |
|||
readonly |
|||
/> |
|||
</u-form-item> --> |
|||
</view> |
|||
<view class="desc-card"> |
|||
<view class="label-des">说明</view> |
|||
<u-textarea v-model="forceCheckoutDesc" ref="textarea" placeholder="请输入内容（不超过500字）" |
|||
maxlength="500" height="150" border="none" |
|||
custom-style="background:#f7f7f7;border-radius:12rpx;padding:16rpx;"></u-textarea> |
|||
<view class="label-des">上传图片/视频</view> |
|||
<u-upload accept="all" :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple |
|||
:maxCount="10" uploadIconColor="#12c3c3" :previewImage="true"> |
|||
<view class="custom-upload-btn"> |
|||
<view class="icon-box"> |
|||
<image class="camera-icon" src="/static/img/camera-icon.png" mode="aspectFill"> |
|||
</image> |
|||
</view> |
|||
|
|||
<!-- <u-input |
|||
v-model="baseInfo.telephone" |
|||
placeholder="请输入手机号" |
|||
border="none" |
|||
input-align="right" |
|||
:disabled="true" |
|||
/> --> |
|||
</u-form-item> |
|||
<view style="border-bottom: 2rpx solid #e5e5e5; margin: 0"></view> |
|||
<u-form-item |
|||
label="退房日期" |
|||
prop="leaveDate" |
|||
required |
|||
@click="showDate = false" |
|||
> |
|||
<text style="text-align: right">{{ baseInfo.checkOutTime }}</text> |
|||
<!-- <u--input |
|||
v-model="baseInfo.checkOutTime" |
|||
placeholder="请选择退房日期" |
|||
border="none" |
|||
readonly |
|||
input-align="right" |
|||
></u--input> --> |
|||
</u-form-item> |
|||
<!-- <u-form-item |
|||
label="问题类型" |
|||
prop="problemType" |
|||
required |
|||
@click="showProblemTypePicker = true" |
|||
> |
|||
<u-input |
|||
v-model="form.problemType" |
|||
placeholder="请选择问题类型" |
|||
border="none" |
|||
input-align="right" |
|||
readonly |
|||
/> |
|||
</u-form-item> --> |
|||
</view> |
|||
<view class="desc-card"> |
|||
<view class="label-des">说明</view> |
|||
<u-textarea |
|||
v-model="forceCheckoutDesc" |
|||
ref="textarea" |
|||
placeholder="请输入内容（不超过500字）" |
|||
maxlength="500" |
|||
height="150" |
|||
border="none" |
|||
custom-style="background:#f7f7f7;border-radius:12rpx;padding:16rpx;" |
|||
></u-textarea> |
|||
<view class="label-des">上传图片/视频</view> |
|||
<u-upload |
|||
accept="all" |
|||
:fileList="fileList" |
|||
@afterRead="afterRead" |
|||
@delete="deletePic" |
|||
multiple |
|||
:maxCount="10" |
|||
uploadIconColor="#12c3c3" |
|||
:previewImage="true" |
|||
> |
|||
<view class="custom-upload-btn"> |
|||
<view class="icon-box"> |
|||
<image |
|||
class="camera-icon" |
|||
src="/static/img/camera-icon.png" |
|||
mode="aspectFill" |
|||
></image> |
|||
</view> |
|||
<view class="upload-tips">点击上传</view> |
|||
</view> |
|||
</u-upload> |
|||
</view> |
|||
<view class="submit-box"> |
|||
<u-button type="primary" shape="circle" @click="submit" :custom-style="btnStyle">提交</u-button> |
|||
</view> |
|||
|
|||
<view class="upload-tips">点击上传</view> |
|||
</view> |
|||
</u-upload> |
|||
</view> |
|||
<view class="submit-box"> |
|||
<u-button |
|||
type="primary" |
|||
shape="circle" |
|||
@click="submit" |
|||
:custom-style="btnStyle" |
|||
>提交</u-button |
|||
> |
|||
</view> |
|||
</u-form> |
|||
<u-datetime-picker |
|||
:show="showDate" |
|||
v-model="form.pickerValue" |
|||
mode="date" |
|||
@confirm="onDateConfirm" |
|||
@cancel="showDate = false" |
|||
/> |
|||
<u-picker |
|||
:show="showProblemTypePicker" |
|||
:columns="[problemTypeOptions]" |
|||
@confirm="onProblemTypeConfirm" |
|||
@cancel="showProblemTypePicker = false" |
|||
keyName="label" |
|||
/> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</u-form> |
|||
<u-datetime-picker :show="showDate" v-model="form.pickerValue" mode="date" @confirm="onDateConfirm" |
|||
@cancel="showDate = false" /> |
|||
<u-picker :show="showProblemTypePicker" :columns="[problemTypeOptions]" @confirm="onProblemTypeConfirm" |
|||
@cancel="showProblemTypePicker = false" keyName="label" /> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { uploadImage, getResidentInfo, forceRelease } from "../../../pages/api"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
btnStyle: |
|||
"background:linear-gradient(90deg,#0DC6C6 0%,#13C2C2 100%);font-size:36rpx;border-radius:48rpx;width:60vw;height:80rpx; margin-bottom:60rpx;", |
|||
form: { |
|||
room: "", |
|||
name: "", |
|||
idCard: "", |
|||
phone: "", |
|||
leaveDate: "", |
|||
desc: "", |
|||
imageUrl: "", |
|||
pickerValue: "", |
|||
problemType: "", |
|||
}, |
|||
forceCheckoutDesc: "", |
|||
baseInfo: { |
|||
roomId: "", |
|||
}, |
|||
descRemark: "", |
|||
fileList: [], |
|||
img1: [], |
|||
showDate: false, |
|||
minDate: "2000-01-01", |
|||
maxDate: "2100-12-31", |
|||
descStyle: |
|||
"background:#f7f8fa;border-radius:12rpx;padding:24rpx;font-size:28rpx;color:#222;min-height:250rpx;box-sizing:border-box;", |
|||
problemTypeOptions: [ |
|||
{ label: "违法居住条款，故意破坏房间设施", value: 1 }, |
|||
], |
|||
showProblemTypePicker: false, // 控制选择器显示 |
|||
}; |
|||
}, |
|||
computed: { |
|||
roomAllPath() { |
|||
const { apartmentName, buildingName, unitName, roomTypeName } = |
|||
this.baseInfo; |
|||
return `${apartmentName || ""}${buildingName || ""}${unitName || ""}${ |
|||
import { |
|||
uploadImage, |
|||
getResidentInfo, |
|||
forceRelease |
|||
} from "../../../pages/api"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
btnStyle: "background:linear-gradient(90deg,#0DC6C6 0%,#13C2C2 100%);font-size:36rpx;border-radius:48rpx;width:60vw;height:80rpx; margin-bottom:60rpx;", |
|||
form: { |
|||
room: "", |
|||
name: "", |
|||
idCard: "", |
|||
phone: "", |
|||
leaveDate: "", |
|||
desc: "", |
|||
imageUrl: "", |
|||
pickerValue: "", |
|||
problemType: "", |
|||
}, |
|||
forceCheckoutDesc: "", |
|||
baseInfo: { |
|||
roomId: "", |
|||
}, |
|||
descRemark: "", |
|||
fileList: [], |
|||
img1: [], |
|||
showDate: false, |
|||
minDate: "2000-01-01", |
|||
maxDate: "2100-12-31", |
|||
descStyle: "background:#f7f8fa;border-radius:12rpx;padding:24rpx;font-size:28rpx;color:#222;min-height:250rpx;box-sizing:border-box;", |
|||
problemTypeOptions: [{ |
|||
label: "违法居住条款，故意破坏房间设施", |
|||
value: 1 |
|||
}, ], |
|||
showProblemTypePicker: false, // 控制选择器显示 |
|||
showInfo: true |
|||
}; |
|||
}, |
|||
computed: { |
|||
roomAllPath() { |
|||
const { |
|||
apartmentName, |
|||
buildingName, |
|||
unitName, |
|||
roomTypeName |
|||
} = |
|||
this.baseInfo; |
|||
return `${apartmentName || ""}${buildingName || ""}${unitName || ""}${ |
|||
roomTypeName || "" |
|||
}`; |
|||
}, |
|||
}, |
|||
methods: { |
|||
handleQuery() { |
|||
getResidentInfo({ idCard: this.form.idCard }).then((res) => { |
|||
if (res.code === 200) { |
|||
console.log("查询结果:", res); |
|||
this.baseInfo = res.data; |
|||
this.baseInfo.roomId = res.data.roomId; |
|||
} |
|||
}); |
|||
}, |
|||
// 上传前校验 |
|||
beforeRead(event) { |
|||
// 可以在这里做文件大小、类型校验 |
|||
const { file } = event; |
|||
if (file.size > 10 * 1024 * 1024) { |
|||
// 10MB |
|||
uni.showToast({ title: "文件过大", icon: "none" }); |
|||
return false; |
|||
} |
|||
return true; |
|||
}, |
|||
}, |
|||
}, |
|||
methods: { |
|||
handleQuery() { |
|||
getResidentInfo({ |
|||
idCard: this.form.idCard |
|||
}).then((res) => { |
|||
if (res.code === 200) { |
|||
console.log("查询结果:", res); |
|||
this.baseInfo = res.data; |
|||
if (this.baseInfo) { |
|||
this.showInfo = true |
|||
} |
|||
this.baseInfo.roomId = res.data.roomId; |
|||
} |
|||
}); |
|||
}, |
|||
// 上传前校验 |
|||
beforeRead(event) { |
|||
// 可以在这里做文件大小、类型校验 |
|||
const { |
|||
file |
|||
} = event; |
|||
if (file.size > 10 * 1024 * 1024) { |
|||
// 10MB |
|||
uni.showToast({ |
|||
title: "文件过大", |
|||
icon: "none" |
|||
}); |
|||
return false; |
|||
} |
|||
return true; |
|||
}, |
|||
|
|||
// 选择文件后上传 |
|||
async afterRead(event) { |
|||
let lists = [].concat(event.file); |
|||
let fileListLen = this[`fileList${event.name}`].length; |
|||
lists.map((item) => { |
|||
this[`fileList${event.name}`].push({ |
|||
...item, |
|||
status: "uploading", |
|||
message: "上传中", |
|||
}); |
|||
}); |
|||
for (let i = 0; i < lists.length; i++) { |
|||
const result = await uploadImage(lists[i].url); |
|||
let item = this[`fileList${event.name}`][fileListLen]; |
|||
// 选择文件后上传 |
|||
async afterRead(event) { |
|||
let lists = [].concat(event.file); |
|||
let fileListLen = this[`fileList${event.name}`].length; |
|||
lists.map((item) => { |
|||
this[`fileList${event.name}`].push({ |
|||
...item, |
|||
status: "uploading", |
|||
message: "上传中", |
|||
}); |
|||
}); |
|||
for (let i = 0; i < lists.length; i++) { |
|||
const result = await uploadImage(lists[i].url); |
|||
let item = this[`fileList${event.name}`][fileListLen]; |
|||
|
|||
this[`fileList${event.name}`].splice( |
|||
fileListLen, |
|||
1, |
|||
Object.assign(item, { |
|||
status: "success", |
|||
message: "", |
|||
url: result.url, |
|||
}) |
|||
); |
|||
fileListLen++; |
|||
} |
|||
var arry = []; |
|||
this.fileList.filter((v, i) => { |
|||
arry.push(v.url); |
|||
}); |
|||
this.img1 = arry; |
|||
}, |
|||
// 删除文件 |
|||
deletePic(event) { |
|||
this[`fileList${event.name}`].splice(event.index, 1); |
|||
var arry = []; |
|||
this.fileList.filter((v, i) => { |
|||
arry.push(v.url); |
|||
}); |
|||
this.img1 = arry; |
|||
}, |
|||
onProblemTypeConfirm(e) { |
|||
const selectedItem = e.value[0]; |
|||
this.form.problemType = selectedItem.label; // 显示标签 |
|||
this.form.problemTypeValue = selectedItem.value; // 保存值 |
|||
this.showProblemTypePicker = false; |
|||
}, |
|||
submit() { |
|||
const params = { |
|||
// idCard: this.baseInfo.idCard, |
|||
chooseRoomRecId: this.baseInfo.chooseRecId, |
|||
checkOutType: 1, //0正常退房1强制退房 |
|||
// questionType: this.form.problemTypeValue, |
|||
content: this.forceCheckoutDesc, |
|||
imageList: this.fileList, //退房检查图片 |
|||
}; |
|||
console.log(params, "params"); |
|||
this[`fileList${event.name}`].splice( |
|||
fileListLen, |
|||
1, |
|||
Object.assign(item, { |
|||
status: "success", |
|||
message: "", |
|||
url: result.url, |
|||
}) |
|||
); |
|||
fileListLen++; |
|||
} |
|||
var arry = []; |
|||
this.fileList.filter((v, i) => { |
|||
arry.push({ |
|||
name: v.name || '', |
|||
format: v.type, |
|||
url: v.url |
|||
}); |
|||
}); |
|||
// this.img1 = arry; |
|||
}, |
|||
// 删除文件 |
|||
deletePic(event) { |
|||
this[`fileList${event.name}`].splice(event.index, 1); |
|||
var arry = []; |
|||
this.fileList.filter((v, i) => { |
|||
arry.push({ |
|||
name: v.name || '', |
|||
format: v.type, |
|||
url: v.url |
|||
}); |
|||
}); |
|||
// this.img1 = arry; |
|||
}, |
|||
onProblemTypeConfirm(e) { |
|||
const selectedItem = e.value[0]; |
|||
this.form.problemType = selectedItem.label; // 显示标签 |
|||
this.form.problemTypeValue = selectedItem.value; // 保存值 |
|||
this.showProblemTypePicker = false; |
|||
}, |
|||
submit() { |
|||
const params = { |
|||
// idCard: this.baseInfo.idCard, |
|||
chooseRoomRecId: this.baseInfo.chooseRecId, |
|||
checkOutType: 1, //0正常退房1强制退房 |
|||
// questionType: this.form.problemTypeValue, |
|||
content: this.forceCheckoutDesc, |
|||
imageList: this.fileList, //退房检查图片 |
|||
}; |
|||
console.log(params, "params"); |
|||
|
|||
this.handleTempSave(params); |
|||
}, |
|||
handleTempSave(params) { |
|||
forceRelease(params).then((res) => { |
|||
uni.showToast({ title: res.msg, icon: "success" }); |
|||
uni.switchTab({ url: "/pages/tabBar/work/index" }); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
this.handleTempSave(params); |
|||
}, |
|||
handleTempSave(params) { |
|||
forceRelease(params).then((res) => { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: "success" |
|||
}); |
|||
uni.switchTab({ |
|||
url: "/pages/tabBar/work/index" |
|||
}); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.top-bg { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100vw; |
|||
height: 220rpx; |
|||
background: linear-gradient(120deg, #c6e6f7 0%, #e3e5fc 100%); |
|||
z-index: 0; |
|||
} |
|||
.container { |
|||
position: relative; |
|||
z-index: 1; |
|||
padding: 32rpx 24rpx 0 24rpx; |
|||
background: transparent; |
|||
min-height: 80vh; |
|||
} |
|||
.info-card { |
|||
background: #fff; |
|||
border-radius: 24rpx; |
|||
padding: 0rpx 24rpx 0 24rpx; |
|||
margin-bottom: 24rpx; |
|||
box-shadow: 0 4rpx 16rpx 0 #e6f6fd; |
|||
} |
|||
::v-deep .u-form-item__body__left { |
|||
color: #6a7fa3 !important; |
|||
font-size: 28rpx !important; |
|||
font-weight: 500; |
|||
} |
|||
.u-form-item__body__left .u-form-item__body__left__required { |
|||
color: #ff5a5a !important; |
|||
margin-right: 4rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
.top-bg { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100vw; |
|||
height: 260rpx; |
|||
background: linear-gradient(120deg, #c6e6f7 0%, #e3e5fc 100%); |
|||
z-index: 0; |
|||
} |
|||
|
|||
.container { |
|||
position: relative; |
|||
z-index: 1; |
|||
padding: 32rpx 24rpx 0 24rpx; |
|||
background: transparent; |
|||
min-height: 80vh; |
|||
} |
|||
|
|||
.info-card { |
|||
background: #fff; |
|||
border-radius: 24rpx; |
|||
padding: 0rpx 24rpx 0 24rpx; |
|||
margin-bottom: 24rpx; |
|||
box-shadow: 0 4rpx 16rpx 0 #e6f6fd; |
|||
} |
|||
|
|||
::v-deep .u-form-item__body__left { |
|||
color: #6a7fa3 !important; |
|||
font-size: 28rpx !important; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.u-form-item__body__left .u-form-item__body__left__required { |
|||
color: #ff5a5a !important; |
|||
margin-right: 4rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.u-form-item__body__right { |
|||
text-align: right; |
|||
color: #222; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.u-form-item { |
|||
border-bottom: 1rpx solid #f2f4f8 !important; |
|||
margin-bottom: 0 !important; |
|||
padding-bottom: 0 !important; |
|||
} |
|||
|
|||
.u-form-item:last-child { |
|||
border-bottom: none !important; |
|||
} |
|||
|
|||
.desc-card { |
|||
background: #fff; |
|||
border-radius: 20rpx; |
|||
padding: 24rpx 20rpx 24rpx 20rpx; |
|||
margin-bottom: 24rpx; |
|||
box-shadow: 0 2rpx 8rpx #f2f4f8; |
|||
} |
|||
|
|||
.label-des { |
|||
color: #68758b; |
|||
font-size: 30rpx; |
|||
margin: 20rpx 0; |
|||
} |
|||
|
|||
.custom-desc-textarea { |
|||
background: #f7f8fa !important; |
|||
border-radius: 12rpx !important; |
|||
padding: 24rpx !important; |
|||
font-size: 28rpx !important; |
|||
color: #222 !important; |
|||
min-height: 500rpx !important; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.custom-upload-btn { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
background: #fafafa; |
|||
border: 2rpx solid #f0f0f0; |
|||
border-radius: 16rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin: 20rpx 16rpx 0 0; |
|||
} |
|||
|
|||
.icon-box { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
background: #ceeced; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.camera-icon { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
} |
|||
|
|||
.upload-tips { |
|||
color: #bbb; |
|||
font-size: 24rpx; |
|||
margin-top: 8rpx; |
|||
} |
|||
|
|||
/* u-upload自定义按钮样式（如需更改） */ |
|||
.u-upload__wrap__button { |
|||
background: #f7f8fa !important; |
|||
border-radius: 16rpx !important; |
|||
width: 120rpx !important; |
|||
height: 120rpx !important; |
|||
display: flex !important; |
|||
flex-direction: column !important; |
|||
align-items: center !important; |
|||
justify-content: center !important; |
|||
} |
|||
|
|||
.u-form-item__body__right { |
|||
text-align: right; |
|||
color: #222; |
|||
font-size: 28rpx; |
|||
} |
|||
.u-upload__wrap__button .u-icon { |
|||
color: #2fd7e6 !important; |
|||
font-size: 48rpx !important; |
|||
} |
|||
|
|||
.u-form-item { |
|||
border-bottom: 1rpx solid #f2f4f8 !important; |
|||
margin-bottom: 0 !important; |
|||
padding-bottom: 0 !important; |
|||
} |
|||
.u-form-item:last-child { |
|||
border-bottom: none !important; |
|||
} |
|||
.u-upload__wrap__button .u-upload__wrap__button__text { |
|||
color: #b0b0b0 !important; |
|||
font-size: 24rpx !important; |
|||
margin-top: 8rpx; |
|||
} |
|||
|
|||
.desc-card { |
|||
background: #fff; |
|||
border-radius: 20rpx; |
|||
padding: 24rpx 20rpx 24rpx 20rpx; |
|||
margin-bottom: 24rpx; |
|||
box-shadow: 0 2rpx 8rpx #f2f4f8; |
|||
} |
|||
.label-des { |
|||
color: #68758b; |
|||
font-size: 30rpx; |
|||
margin: 20rpx 0; |
|||
} |
|||
.custom-desc-textarea { |
|||
background: #f7f8fa !important; |
|||
border-radius: 12rpx !important; |
|||
padding: 24rpx !important; |
|||
font-size: 28rpx !important; |
|||
color: #222 !important; |
|||
min-height: 500rpx !important; |
|||
box-sizing: border-box; |
|||
} |
|||
.custom-upload-btn { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
background: #fafafa; |
|||
border: 2rpx solid #f0f0f0; |
|||
border-radius: 16rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin: 20rpx 16rpx 0 0; |
|||
} |
|||
.icon-box { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
background: #ceeced; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.camera-icon { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
} |
|||
.upload-tips { |
|||
color: #bbb; |
|||
font-size: 24rpx; |
|||
margin-top: 8rpx; |
|||
} |
|||
/* u-upload自定义按钮样式（如需更改） */ |
|||
.u-upload__wrap__button { |
|||
background: #f7f8fa !important; |
|||
border-radius: 16rpx !important; |
|||
width: 120rpx !important; |
|||
height: 120rpx !important; |
|||
display: flex !important; |
|||
flex-direction: column !important; |
|||
align-items: center !important; |
|||
justify-content: center !important; |
|||
} |
|||
.u-upload__wrap__button .u-icon { |
|||
color: #2fd7e6 !important; |
|||
font-size: 48rpx !important; |
|||
} |
|||
.u-upload__wrap__button .u-upload__wrap__button__text { |
|||
color: #b0b0b0 !important; |
|||
font-size: 24rpx !important; |
|||
margin-top: 8rpx; |
|||
} |
|||
::v-deep .u-form-item__body__left__content__label span { |
|||
color: #68758b; |
|||
font-size: 30rpx; |
|||
} |
|||
::v-deep .u-form-item__body__left__content__label span { |
|||
color: #68758b; |
|||
font-size: 30rpx; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue