From 035f4fd656f086803eb7643e73a8a769cf901f69 Mon Sep 17 00:00:00 2001
From: wk
Date: 星期四, 15 八月 2024 15:41:15 +0800
Subject: [PATCH] feat:门卫产品名称
---
pages/password/face.vue | 90 +++++++++++++++++++++++++++++---------------
1 files changed, 59 insertions(+), 31 deletions(-)
diff --git a/pages/password/face.vue b/pages/password/face.vue
index a2aedaa..7f68dc8 100644
--- a/pages/password/face.vue
+++ b/pages/password/face.vue
@@ -3,21 +3,21 @@
<view class="addForm">
<u--form labelPosition="top" :model="form">
<u-form-item labelWidth="25%" label="" @click="beforeRead" required>
- <view class="deleteImg" v-if="fileList1.length" @click="deletePic">
- <u-icon name="close" color="#000000" size="30"></u-icon>
- </view>
- <view class="upload">
- <u-upload
- :fileList="fileList1"
- @afterRead="afterRead"
- @delete="deletePic"
- :maxCount="1"
- width="180"
- height="180"
- customStyle="margin-left:8px;margin-top:8px;"
- previewFullImage
- ></u-upload>
- </view>
+ <view class="views">
+ <view class="upload">
+ <u-upload
+ :fileList="fileList1"
+ @afterRead="afterRead"
+ @delete="deletePic"
+ name="1"
+ :maxCount="1"
+ previewFullImage
+ ></u-upload>
+ </view>
+ <view class="deleteImg" v-if="fileList1.length" @click="deletePic">
+ <u-icon name="close" color="#000000" ></u-icon>
+ </view>
+ </view>
</u-form-item>
</u--form>
</view>
@@ -100,6 +100,7 @@
async afterRead(event) {
// 褰撹缃� mutiple 涓� true 鏃�, file 涓烘暟缁勬牸寮忥紝鍚﹀垯涓哄璞℃牸寮�
let lists = [].concat(event.file);
+ console.log(this.fileList1, event)
let fileListLen = this[`fileList${event.name}`].length;
lists.map((item) => {
this[`fileList${event.name}`].push({
@@ -144,6 +145,7 @@
};
</script>
<style lang="scss" scoped>
+
/deep/.u-form-item__body__right__content__slot {
width: 100%;
display: flex;
@@ -152,36 +154,62 @@
/deep/u-view.u-upload__button[data-v-69e2a36e] {
margin: 0 !important;
}
- .deleteImg {
- width: 20px;
- height: 20px;
- background-color: #ffffff;
- display: flex;
- justify-content: center;
- align-items: center;
- border-radius: 50%;
- position: relative;
- right: -80px;
- top: -25px;
- z-index: 999;
+ .views{
+ width: 30vh;
+ height: 30vh;
+ .deleteImg {
+ width: 5vh;
+ height: 5vh;
+ background-color: #ffffff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 50%;
+ position: relative;
+ left: 80%;
+ bottom: 28vh;
+ z-index: 999;
+ }
}
+
.upload {
- width: 80px;
- height: 77px;
- margin: 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
overflow: hidden;
+ font-size: 3vh;
}
}
.addBtn {
- width: 120px;
+ width: 40vw;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
}
+/deep/ .u-upload__button{
+ margin: 0 !important;
+}
+/deep/ .u-upload{
+ width: 30vh;
+ height: 30vh;
+}
+/deep/ .u-upload__wrap__preview__image{
+ width: 30vh !important;
+ height: 30vh !important;
+}
+/deep/ .u-upload__button{
+ width: 30vh !important;
+ height: 30vh !important;
+}
+
+/deep/ .u-icon__icon {
+ font-size: 4vh !important;
+ font-weight: bold;
+}
+/deep/ .uicon-camera-fill{
+ font-size: 6vh !important;
+}
</style>
--
Gitblit v1.9.1