Skip to content

I
inspection-pad-web
提交 85cd384e authored 作者: zs's avatar zs
浏览文件
操作

edit

上级 d405e5ed
隐藏空白字符变更
内嵌 并排
正在显示 包含 919 行增加 和 576 行删除
pages/listingManagement/descdialog.vue 0 → 100644
浏览文件 @ 85cd384e
<template>
<view class="desc-dialog">
<view class="desc-content">
<view class="title">设备上架操作说明</view>
<view class="tips">请参考下图进行拍摄设备上架照片</view>
<view class="flex">
<view class="text-center">
<image src="@/static/img/add-img/desc1.png" class="image" style="margin-bottom:6.4px"></image>
设备所在机柜正面照片
</view>
<view class="text-center">
<image src="@/static/img/add-img/desc2.png" class="image" style="margin: 0 6.4px 6.4px 6.4px;"></image>
设备所在机柜背面照片
</view>
<view class="text-center">
<image src="@/static/img/add-img/desc3.png" class="image" style="margin-bottom:6.4px"></image>
设备大图(含资产标识)
</view>
</view>
<view class="subtitle">操作说明：</view>
<view class="subitem">
<view>1、设备完成上架后，请按下列示例图要求对上架没备进行拍照操作;</view>
<view>2、拍照完成后，将PAD连接至专网电脑，进行照片同步;</view>
<view>3、进入专网侧进行设备上架执行，选择本次上架的设备申请单，将照片与设备进行关联。";</view>
</view>
<view class="row-item bottom-row">
<button class="button" :loading="loading" @click="close('photo')">
设备上架拍照
</button>
</view>
<!-- 关闭按钮 -->
<div class="close-button">
<text class="iconfont icon-shibai1" @click="close('close')"></text>
</div>
</view>
</view>
</template>
<script>
import {
SYNCHRONIZE_DATA_PAD,
checkAndCreateDirectory,
createFileWithPlusIO,
setSm2,
USER_FILE_NAME,
getUserList,
} from "@/utils/systemCofig";
import {
copyDirectory,
deleteAllFilesInDirectory,
addLog,
getLogContent,
LOG_TYPE_ENUM,
writeDeviceData,
copyImagesToFolder,
} from "@/utils/IoReadingAndWriting.js";
import moment from "moment";
import {
Base64
} from "js-base64";
export default {
props: {
},
components: {},
data() {
return {
loading: false,
};
},
mounted() {},
watch: {
},
methods: {
close(key) {
this.$emit("close",key);
},
getDetails() {
this.$emit("getDetails");
},
/**
* 1.生成两个文件. 机房文件 和 井道文件
* 2. 更新巡检数据状态 synchronization 置为 1
* 3. 写入数据
* 读取上一次打包的文件, 复制到 [ history ] 文件夹中
*/
clickHandle() {
if (this.loading) return;
this.coverData();
},
// 保存图片到指定地址
copyImages(imagePaths, userName) {
const targetPath = `${SYNCHRONIZE_DATA_PAD}/设备上架照片/${userName}`;
console.log("imagePath打包", imagePaths);
//请空文件夹
deleteAllFilesInDirectory(targetPath).then(() => {
// 复制
copyImagesToFolder(imagePaths, targetPath).then((res) => {
uni.showToast({
title: "打包成功",
icon: "none",
duration: 1000,
});
setTimeout(() => {
this.loading = false;
this.close();
uni.navigateTo({
url: "/pages/listingManagement/index?backValue=home",
});
}, 1000);
});
});
},
// 处理数据
coverData() {
const userName = this.$store.state.now_user.user;
let syncedData = this.list;
let imagePaths = this.list.map((user) => user.imgPath);
// 保存照片
let timeStr = moment().format("yyyy_MM_DD_hh_mm_ss");
syncedData.forEach((item) => {
item.synchronization = true;
item.selected = false;
item.status = "已同步";
});
console.log("syncedData", syncedData);
this.loading = true;
let SBSJ_DATA_FILE_NAME = `${userName}_SBSJ_${timeStr}.txt`;
const tmepList = this.packedData(syncedData, SBSJ_DATA_FILE_NAME);
let arr = this.photos.map((item) => {
// 查找 B 数组中是否有对应的对象
const updatedItem = syncedData.find((bItem) => bItem.id === item.id);
// 如果有，则返回 B 数组中的对象，否则返回原对象
return updatedItem ? updatedItem : item;
});
// writeDeviceData(tmepList, userName)
// .then((res) => {
// console.log("tmepList", tmepList);
this.$store.commit("SET_DEVICEDATA", arr);
setTimeout(
() => {
let length = arr.length;
// 生成日志
const logContent = getLogContent(
LOG_TYPE_ENUM.sys,
`${length}张照同步`,
"同步"
);
this.$logApi.addlog(logContent)
const log_list = this.$store.state.log_list;
log_list.push(logContent);
this.$store.commit("SET_LOG_LIST", log_list);
addLog(log_list).then(() => {});
// 更新同步时间
this.updateSysTime();
this.copyImages(imagePaths, userName);
// this.getDetails();
},
2 * 1000
// uni.navigateTo({
// url: "/pages/listingManagement/index?backValue=home",
// })
);
// })
// .catch((error) => {
// this.loading = false;
// uni.showToast({
// title: error,
// icon: "none",
// duration: 2000,
// });
// })
// .catch(() => {
// setTimeout(() => {
// uni.showToast({
// title: "打包失败",
// icon: "none",
// duration: 2000,
// });
// this.loading = false;
// }, 2 * 1000);
// });
},
// 打包文件
packedData(content, fileName) {
const fileContent = setSm2(content);
return createFileWithPlusIO(
`${SYNCHRONIZE_DATA_PAD}/发送数据`,
fileName,
fileContent
);
},
// 更新最近一次同步时间
updateSysTime() {
getUserList().then((personList) => {
const now_user = this.$store.state.now_user;
const key = personList.findIndex(
(item) => item.userId == now_user.userId
);
// 更新用户同步时间
const userInfo = personList[key];
const LastSynchronizationTime = moment().format("yyyy-MM-DD HH:mm");
personList[key].LastSynchronizationTime = LastSynchronizationTime;
userInfo.LastSynchronizationTime = LastSynchronizationTime;
this.$store.commit("SET_USER", userInfo);
uni.setStorageSync("last_time", userInfo.LastSynchronizationTime || "");
// 更新用户数据
const fileContent = JSON.stringify(
Base64.encode(JSON.stringify(personList))
);
uni.setStorage({
key: "user_data",
data: JSON.stringify(personList),
fail: (error) => {
console.log("APP.vue 存储数据失败", error);
},
});
createFileWithPlusIO(SYNCHRONIZE_DATA_PAD, USER_FILE_NAME, fileContent)
.then(() => {
console.log("---用户数据更新成功");
})
.catch((error) => {
console.log("---用户数据更新失败", error);
});
});
},
},
};
</script>
<style scoped lang="less">
.desc-dialog {
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
.desc-content {
padding: 3% 20px 32px 24px;
width: 674px;
min-height: 515px;
box-sizing: border-box;
background-image: linear-gradient(-6deg,
#f9ffe7 0%,
#ffffff 12%,
#fcfeff 73%,
#ccf1ff 100%);
border: 0.4px solid rgba(224, 224, 224, 1);
border-radius: 12px;
position: relative;
.image {
width: 202px;
height: 186px;
}
.title {
font-family: PingFangSC-Medium;
font-size: 14.4px;
color: #000000;
text-align: center;
line-height: 26px;
font-weight: bold;
}
.tips {
font-family: PingFangSC-Regular;
font-size: 12.8px;
color: #4A4A4A;
text-align: center;
line-height: 19.2px;
font-weight: 400;
margin: 12.8px 0 9.6px
}
.subtitle{
font-family: PingFangSC-Medium;
font-size: 16px;
color: #4A4A4A;
line-height: 24px;
font-weight: 500;
margin:26px 0 9.6px
}
.subitem{
font-family: PingFangSC-Regular;
font-size: 11.2px;
color: #7C7C7C;
line-height: 22px;
font-weight: 400;
}
// 打包按钮
.bottom-row {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
.button {
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(180deg, #3773f6 0%, #2c57f6 99%);
box-shadow: 0px 10px 24px 0px rgba(51, 104, 246, 0.24);
border-radius: 27px;
width: 160px;
height: 40px;
color: #fff;
}
}
// 关闭按钮
.close-button {
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
.iconfont {
font-size: 24px;
}
}
}
}
.flex {
display: flex;
align-items: center;
}
.text-center {
text-align: center;
}
</style>
\ No newline at end of file
pages/listingManagement/index.vue
浏览文件 @ 85cd384e
<template> <template>
<view class="container"> <view class="container">
<uni-nav-bar <uni-nav-bar v-if="!selectedCount" :fixed="true" background-color="rgba(214, 240, 255, 0.0)" status-bar
v-if="!selectedCount" rightWidth="300">
:fixed="true" <block slot="left">
background-color="rgba(214, 240, 255, 0.0)" <view @click="back">
status-bar <text class="iconfont icon-fanhui"></text>
rightWidth="300" </view>
> </block>
<block slot="left"> <block slot="right" class="nav-right">
<view @click="back"> <view class="header-buttons" @click="showDescDialog = true">
<text class="iconfont icon-fanhui"></text> <text class="iconfont icon-shuoming"></text>
</view> </view>
</block> </block>
<block slot="right" class="nav-right"> </uni-nav-bar>
<view class="header-buttons"> <uni-nav-bar v-else :fixed="true" background-color="#FFF" status-bar leftWidth="300" rightWidth="300">
<text class="iconfont icon-shuoming"></text> <block slot="left">
</view> <view class="header-left" @click="headerClose">
</block> <text class="close">X</text>
</uni-nav-bar> <view class="selected-count"> 已选择{{ selectedCount }}张图片</view>
<uni-nav-bar </view>
v-else </block>
:fixed="true" <block slot="right" class="nav-right">
background-color="#FFF" <view class="header-right">
status-bar <!-- <text
leftWidth="300"
rightWidth="300"
>
<block slot="left">
<view class="header-left" @click="headerClose">
<text class="close">X</text
><view class="selected-count"> 已选择{{ selectedCount }}张图片</view>
</view>
</block>
<block slot="right" class="nav-right">
<view class="header-right">
<!-- <text
class="iconfont icon-quanxuan" class="iconfont icon-quanxuan"
@click.stop="toggleSelectAll" @click.stop="toggleSelectAll"
></text> --> ></text> -->
<text class="iconfont icon-shanchu" @click.stop="deletePhotos" <text class="iconfont icon-shanchu" @click.stop="deletePhotos">删除</text>
>删除</text </view>
> </block>
</view> </uni-nav-bar>
</block>
</uni-nav-bar> <view class="photo-box">
<view class="photo-list">
<view class="photo-box"> <view v-for="(group, date) in photoGroups" :key="date" class="photo-group">
<view class="photo-list"> <view class="group-header">
<view <view class="circle-button" :class="{ active: isDateAllSelected(group, date) }"
v-for="(group, date) in photoGroups" @click.stop="toggleSelectDate(date)">
:key="date" <text v-if="isDateAllSelected(group, date)" class="iconfont icon-wancheng"></text>
class="photo-group" </view>
> <text class="date">{{ date }}</text>
<view class="group-header"> </view>
<view <view class="card-list">
class="circle-button" <view v-for="(photo, index) in group" :key="index" class="card"
:class="{ active: isDateAllSelected(group, date) }" @click="previewPhoto(photo, index)">
@click.stop="toggleSelectDate(date)" <image :src="photo.imgPath" mode="aspectFill" class="photo"></image>
> <view class="photo-mask">
<text <view>照片编号：{{photo.id}}</view>
v-if="isDateAllSelected(group, date)" <view>拍摄时间：{{photo.time}}</view>
class="iconfont icon-wancheng" <view>数据同步：{{ photo.synchronization ? "已同步" : "待同步"}}</view>
></text> </view>
</view> <view class="check-icon" :class="{ active: photo.selected }"
<text class="date">{{ date }}</text> @click.stop="toggleSelect(photo)">
</view> <text v-if="photo.selected" class="iconfont icon-wancheng"></text>
<view class="card-list"> </view>
<view <!-- <text
v-for="(photo, index) in group"
:key="index"
class="card"
@click="previewPhoto(photo, index)"
>
<image
:src="photo.imgPath"
mode="aspectFill"
class="photo"
></image>
<view class="photo-mask">
<view>照片编号：{{photo.id}}</view>
<view>拍摄时间：{{photo.time}}</view>
<view>数据同步：{{ photo.synchronization ? "已同步" : "待同步"}}</view>
</view>
<view
class="check-icon"
:class="{ active: photo.selected }"
@click.stop="toggleSelect(photo)"
>
<text
v-if="photo.selected"
class="iconfont icon-wancheng"
></text>
</view>
<!-- <text
class="delete-icon iconfont icon-shanchu" class="delete-icon iconfont icon-shanchu"
@click.stop="deletePhoto(photo)" @click.stop="deletePhoto(photo)"
></text> --> ></text> -->
<view class="type">{{ <view class="type">{{
photo.synchronization ? "已同步" : "待同步" photo.synchronization ? "已同步" : "待同步"
}}</view> }}</view>
<view class="photo-info"> <view class="photo-info">
照片编号：{{ photo.id }} 照片编号：{{ photo.id }}
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view <view v-if="selectedCount" class="inspection-button" @click="showSyncDialog = true">数据同步</view>
v-if="selectedCount"
class="inspection-button" <view v-else class="inspection-button" @click="takePhoto">设备拍照</view>
@click="showSyncDialog = true"
>数据同步</view <Dialog v-show="showSyncDialog" ref="Dialog" :list="selectedPhotos" :photos="photos"
> @close="showSyncDialog = false" @getDetails="getDetails"></Dialog>
<desc-Dialog v-show="showDescDialog" ref="descDialog" @close="close"></desc-Dialog>
<view v-else class="inspection-button" @click="takePhoto">设备拍照</view> </view>
<Dialog
v-show="showSyncDialog"
ref="Dialog"
:list="selectedPhotos"
:photos="photos"
@close="showSyncDialog = false"
@getDetails="getDetails"
></Dialog>
</view>
</template> </template>
<script> <script>
import moment from "moment"; import moment from "moment";
import Dialog from "./dialog.vue"; import Dialog from "./dialog.vue";
import { import descDialog from "./descdialog.vue";
addLog, import {
getLogContent, addLog,
LOG_TYPE_ENUM, getLogContent,
writeDeviceData, LOG_TYPE_ENUM,
} from "@/utils/IoReadingAndWriting.js"; writeDeviceData,
import { getDeviceDataDetails } from "@/request/index.js"; } from "@/utils/IoReadingAndWriting.js";
import {
export default { getDeviceDataDetails
components: { } from "@/request/index.js";
Dialog,
}, export default {
data() { components: {
return { Dialog,
showSyncDialog: false, descDialog
photos: [], },
selectedPhotos: [], data() {
}; return {
}, showSyncDialog: false,
computed: { photos: [],
photoGroups() { selectedPhotos: [],
const groups = {}; showDescDialog: false
this.photos.forEach((photo) => { };
const date = photo.date; },
if (!groups[date]) { computed: {
groups[date] = []; photoGroups() {
} const groups = {};
groups[date].push(photo); this.photos.forEach((photo) => {
}); const date = photo.date;
return groups; if (!groups[date]) {
}, groups[date] = [];
selectedCount() { }
return this.selectedPhotos.length; groups[date].push(photo);
}, });
userInfo() { return groups;
return this.$store.state.now_user || {}; },
}, selectedCount() {
}, return this.selectedPhotos.length;
onLoad() { },
this.getDetails(); userInfo() {
}, return this.$store.state.now_user || {};
methods: { },
back() { },
uni.navigateTo({ onLoad() {
url: "/pages/home/home", this.getDetails();
}); },
}, methods: {
headerClose() { close(key) {
this.clearSelection(); this.showDescDialog = false
}, if (key == 'photo') this.takePhoto()
clearSelection() { },
this.photos.forEach((photo) => (photo.selected = false)); showDesc() {
this.selectedPhotos = []; this.showDesc = true
}, },
back() {
// 数据获取 uni.navigateTo({
getDetails() { url: "/pages/home/home",
uni.showLoading(); });
getDeviceDataDetails() },
.then((res) => { headerClose() {
this.photos = res; this.clearSelection();
uni.hideLoading(); },
}) clearSelection() {
.catch((error) => { this.photos.forEach((photo) => (photo.selected = false));
uni.showToast({ title: error.msg, icon: "none" }); this.selectedPhotos = [];
uni.hideLoading(); },
});
}, // 数据获取
getDetails() {
// 拍照功能 uni.showLoading();
async takePhoto() { getDeviceDataDetails()
try { .then((res) => {
const res = await uni.chooseImage({ count: 1, sourceType: ["camera"] }); this.photos = res;
const tempFilePath = res.tempFilePaths[0]; uni.hideLoading();
const saveRes = await uni.saveImageToPhotosAlbum({ })
filePath: tempFilePath, .catch((error) => {
}); uni.showToast({
title: error.msg,
const base64 = await this.convertFileToBase64(tempFilePath); icon: "none"
const newPhoto = { });
id: this.getFileName(tempFilePath), uni.hideLoading();
// url: base64, });
imgPath: saveRes.path, },
date: moment().format("YYYY-MM-DD"),
time: moment().format("YYYY-MM-DD HH:mm"), // 拍照功能
selected: false, async takePhoto() {
synchronization: false, try {
}; const res = await uni.chooseImage({
count: 1,
this.photos.unshift(newPhoto); sourceType: ["camera"]
this.addPhotos(this.photos, `照片编号(${newPhoto.id})`, "设备上架"); });
} catch (err) { const tempFilePath = res.tempFilePaths[0];
console.error("拍照保存失败:", err); const saveRes = await uni.saveImageToPhotosAlbum({
} filePath: tempFilePath,
}, });
// 选择功能 const base64 = await this.convertFileToBase64(tempFilePath);
toggleSelect(photo) { const newPhoto = {
photo.selected = !photo.selected; id: this.getFileName(tempFilePath),
if (photo.selected) { // url: base64,
this.selectedPhotos.push(photo); imgPath: saveRes.path,
} else { date: moment().format("YYYY-MM-DD"),
this.selectedPhotos = this.selectedPhotos.filter( time: moment().format("YYYY-MM-DD HH:mm"),
(p) => p.id !== photo.id selected: false,
); synchronization: false,
} };
},
this.photos.unshift(newPhoto);
isDateAllSelected(group, date) { this.addPhotos(this.photos, `照片编号(${newPhoto.id})`, "设备上架");
return group.every((photo) => photo.selected); } catch (err) {
}, console.error("拍照保存失败:", err);
}
toggleSelectDate(date) { },
const group = this.photoGroups[date];
const isGroupAllSelected = this.isDateAllSelected(group, date); // 选择功能
toggleSelect(photo) {
group.forEach((photo) => { photo.selected = !photo.selected;
photo.selected = !isGroupAllSelected; if (photo.selected) {
this.updateSelectedPhotos(photo); this.selectedPhotos.push(photo);
}); } else {
}, this.selectedPhotos = this.selectedPhotos.filter(
(p) => p.id !== photo.id
toggleSelectAll() { );
const isAllSelected = this.photos.length === this.selectedCount; }
},
this.photos.forEach((photo) => {
photo.selected = !isAllSelected; isDateAllSelected(group, date) {
this.updateSelectedPhotos(photo); return group.every((photo) => photo.selected);
}); },
},
toggleSelectDate(date) {
updateSelectedPhotos(photo) { const group = this.photoGroups[date];
if (photo.selected) { const isGroupAllSelected = this.isDateAllSelected(group, date);
if (!this.selectedPhotos.some((p) => p.id === photo.id)) {
this.selectedPhotos.push(photo); group.forEach((photo) => {
} photo.selected = !isGroupAllSelected;
} else { this.updateSelectedPhotos(photo);
this.selectedPhotos = this.selectedPhotos.filter( });
(p) => p.id !== photo.id },
);
} toggleSelectAll() {
}, const isAllSelected = this.photos.length === this.selectedCount;
// 删除功能 this.photos.forEach((photo) => {
deletePhoto(photo) { photo.selected = !isAllSelected;
this.photos = this.photos.filter((p) => p.id !== photo.id); this.updateSelectedPhotos(photo);
this.selectedPhotos = this.selectedPhotos.filter( });
(p) => p.id !== photo.id },
);
this.addPhotos(this.photos, "删除照片", "删除"); updateSelectedPhotos(photo) {
}, if (photo.selected) {
if (!this.selectedPhotos.some((p) => p.id === photo.id)) {
deletePhotos() { this.selectedPhotos.push(photo);
uni.showModal({ }
title: "提示", } else {
content: "确认删除选中的照片？", this.selectedPhotos = this.selectedPhotos.filter(
success: (res) => { (p) => p.id !== photo.id
if (res.confirm) { );
const selectedIds = this.selectedPhotos.map((p) => p.id); }
this.photos = this.photos.filter( },
(p) => !selectedIds.includes(p.id)
); // 删除功能
this.clearSelection(); deletePhoto(photo) {
this.addPhotos(this.photos, "批量删除照片", "删除"); this.photos = this.photos.filter((p) => p.id !== photo.id);
uni.showToast({ title: "删除成功", icon: "success" }); this.selectedPhotos = this.selectedPhotos.filter(
} (p) => p.id !== photo.id
}, );
}); this.addPhotos(this.photos, "删除照片", "删除");
}, },
// 其他功能 deletePhotos() {
previewPhoto(photo, index) { uni.showModal({
// uni.previewImage({ title: "提示",
// urls: this.photos.map((p) => p.url), content: "确认删除选中的照片？",
// current: photo.url, success: (res) => {
// }); if (res.confirm) {
uni.previewImage({ const selectedIds = this.selectedPhotos.map((p) => p.id);
urls: this.photos.map((p) => p.imgPath), this.photos = this.photos.filter(
current: index, (p) => !selectedIds.includes(p.id)
}); );
}, this.clearSelection();
this.addPhotos(this.photos, "批量删除照片", "删除");
async convertFileToBase64(filePath) { uni.showToast({
return new Promise((resolve, reject) => { title: "删除成功",
plus.io.resolveLocalFileSystemURL( icon: "success"
filePath, });
(entry) => { }
entry.file((file) => { },
const reader = new plus.io.FileReader(); });
reader.onloadend = (evt) => resolve(evt.target.result); },
reader.readAsDataURL(file);
}, reject); // 其他功能
}, previewPhoto(photo, index) {
reject // uni.previewImage({
); // urls: this.photos.map((p) => p.url),
}); // current: photo.url,
}, // });
uni.previewImage({
getFileName(filePath) { urls: this.photos.map((p) => p.imgPath),
return filePath.split("/").pop().split(".").shift(); current: index,
}, });
},
addPhotos(photos, title, type) {
this.$store.commit("SET_DEVICEDATA", photos); async convertFileToBase64(filePath) {
writeDeviceData(photos, this.userInfo.user); return new Promise((resolve, reject) => {
plus.io.resolveLocalFileSystemURL(
const logContent = getLogContent(LOG_TYPE_ENUM.edit, title, type); filePath,
this.$logApi.addlog(logContent) (entry) => {
const log_list = [ entry.file((file) => {
...this.$store.state.log_list, const reader = new plus.io.FileReader();
{ reader.onloadend = (evt) => resolve(evt.target.result);
...logContent, reader.readAsDataURL(file);
inspectionType: "3", }, reject);
}, },
]; reject
);
this.$store.commit("SET_LOG_LIST", log_list); });
addLog(log_list); },
},
}, getFileName(filePath) {
}; return filePath.split("/").pop().split(".").shift();
},
addPhotos(photos, title, type) {
this.$store.commit("SET_DEVICEDATA", photos);
writeDeviceData(photos, this.userInfo.user);
const logContent = getLogContent(LOG_TYPE_ENUM.edit, title, type);
this.$logApi.addlog(logContent)
const log_list = [
...this.$store.state.log_list,
{
...logContent,
inspectionType: "3",
},
];
this.$store.commit("SET_LOG_LIST", log_list);
addLog(log_list);
},
},
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
/* 保持原有的样式不变 */ /* 保持原有的样式不变 */
.container { .container {
background-image: linear-gradient(115deg, #e8f0fb 0%, #e1ebfa 100%); background-image: linear-gradient(115deg, #e8f0fb 0%, #e1ebfa 100%);
height: 100%; height: 100%;
} }
.uni-nav-bar-text { .uni-nav-bar-text {
height: 28.8px; height: 28.8px;
width: 28.8px; width: 28.8px;
background: #ffffff; background: #ffffff;
border: 0.32px solid rgba(224, 224, 224, 1); border: 0.32px solid rgba(224, 224, 224, 1);
border-radius: 14.4px; border-radius: 14.4px;
color: #333; color: #333;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
.iconfont {
font-size: 16px; .iconfont {
line-height: 28.8px; font-size: 16px;
} line-height: 28.8px;
} }
}
.header-left {
display: flex; .header-left {
justify-content: flex-start; display: flex;
.close { justify-content: flex-start;
font-size: 20px;
} .close {
.selected-count { font-size: 20px;
font-size: 14.4px; }
line-height: 27px;
color: #000000; .selected-count {
font-weight: 500; font-size: 14.4px;
margin-left: 6.4px; line-height: 27px;
} color: #000000;
} font-weight: 500;
.nav-right { margin-left: 6.4px;
width: 192px; }
} }
::v-deep .uni-navbar__header-btns-left {
width: 300px !important; .nav-right {
} width: 192px;
.header-buttons { }
display: flex;
align-items: center; ::v-deep .uni-navbar__header-btns-left {
margin-left: auto; width: 300px !important;
width: 28.8px; }
height: 28.8px;
border-radius: 50%; .header-buttons {
background: #fff; display: flex;
.iconfont { align-items: center;
margin: 0 auto; margin-left: auto;
&.icon-shuoming { width: 28.8px;
} height: 28.8px;
} border-radius: 50%;
} background: #fff;
.header-right {
.iconfont { .iconfont {
margin: 0 auto; margin: 0 auto;
&.icon-quanxuan {
margin-right: 19.2px; &.icon-shuoming {}
} }
} }
}
.header-right {
.photo-box { .iconfont {
width: 100%; margin: 0 auto;
height: 100%;
overflow: hidden; &.icon-quanxuan {
margin-right: 19.2px;
.photo-list {
padding: 19.2px 0;
overflow: auto;
.photo-group {
margin-bottom: 12.8px;
.group-header {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 6.4px;
padding: 0 25.6px;
position: relative;
.circle-button {
width: 14.4px;
height: 14.4px;
line-height: 14.4px;
border-radius: 50%;
border: 1px solid rgba(199, 199, 199, 1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 2px;
text-align: center;
position: absolute;
bottom: 4px;
.icon-wancheng {
color: #3774f6;
font-size: 16px;
border: 1px solid #fff;
background-color: #fff;
border-radius: 50%;
}
}
.date {
font-size: 20.8px;
color: #000000;
line-height: 14.4px;
font-weight: 500;
margin-left: 18px;
margin-bottom: 6.4px;
}
}
.card-list {
display: flex;
flex-wrap: wrap;
gap: 3.2px;
.card {
width: 168px;
height: 188.8px;
margin-bottom: 17.6px;
position: relative;
.photo {
width: 168px;
height: 168px;
}
.check-icon {
position: absolute;
top: 6.4px;
left: 6.4px;
border-radius: 50%;
width: 20px;
height: 20px;
border: 1px solid #fff;
display: flex;
justify-content: center;
align-items: center;
line-height: 20px;
.icon-wancheng {
color: #3774f6;
font-size: 20px;
// border: 1px solid #fff;
background-color: #fff;
border-radius: 50%;
}
}
.delete-icon {
position: absolute;
bottom: 26.4px;
left: 6.4px;
border-radius: 50%;
width: 19.2px;
height: 19.2px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.type {
width: 41.6px;
padding: 0 6.4px;
text-align: center;
background: rgba(0, 0, 0, 0.5);
border-radius: 8.8px;
font-size: 9.6px;
color: #ffffff;
text-align: left;
line-height: 16px;
font-weight: 400;
position: absolute;
right: 10.8px;
top: 6.4px;
}
.photo-mask{
background: rgba(0, 0, 0, 0.5);
color: #ffffff;
position: absolute;
bottom: 26.4px;
width: 148px;
left: 0;
right: 0;
border-radius: 4.8px;
margin:0 auto;
padding:4.8px;
font-size: 9.6px;
color: #ffffff;
line-height: 16px;
text-shadow: 0 0 2px rgba(0,0,0,0.30);
} }
.photo-info { }
text-align: center; }
font-family: PingFangSC-Regular;
font-size: 11.2px; .photo-box {
color: #000000; width: 100%;
line-height: 17.6px; height: 100%;
font-weight: 400; overflow: hidden;
}
} .photo-list {
} padding: 19.2px 0;
} overflow: auto;
}
} .photo-group {
margin-bottom: 12.8px;
.inspection-button {
display: flex; .group-header {
align-items: center; display: flex;
justify-content: center; justify-content: flex-start;
position: fixed; align-items: center;
bottom: 25.6px; margin-bottom: 6.4px;
width: 224px; padding: 0 25.6px;
height: 38.4px; position: relative;
left: 50%;
transform: translateX(-50%); .circle-button {
background-image: linear-gradient(180deg, #3773f6 0%, #2c57f6 99%); width: 14.4px;
box-shadow: 0px 8px 19.2px 0px rgba(51, 104, 246, 0.24); height: 14.4px;
border-radius: 21.6px; line-height: 14.4px;
font-family: PingFangSC-Regular; border-radius: 50%;
font-size: 16px; border: 1px solid rgba(199, 199, 199, 1);
line-height: 38.4px; display: flex;
color: #ffffff; align-items: center;
text-align: center; justify-content: center;
font-weight: 400; cursor: pointer;
} transition: all 0.3s ease;
</style> margin-bottom: 2px;
text-align: center;
position: absolute;
bottom: 4px;
.icon-wancheng {
color: #3774f6;
font-size: 16px;
border: 1px solid #fff;
background-color: #fff;
border-radius: 50%;
}
}
.date {
font-size: 20.8px;
color: #000000;
line-height: 14.4px;
font-weight: 500;
margin-left: 18px;
margin-bottom: 6.4px;
}
}
.card-list {
display: flex;
flex-wrap: wrap;
gap: 3.2px;
.card {
width: 168px;
height: 188.8px;
margin-bottom: 17.6px;
position: relative;
.photo {
width: 168px;
height: 168px;
}
.check-icon {
position: absolute;
top: 6.4px;
left: 6.4px;
border-radius: 50%;
width: 20px;
height: 20px;
border: 1px solid #fff;
display: flex;
justify-content: center;
align-items: center;
line-height: 20px;
.icon-wancheng {
color: #3774f6;
font-size: 20px;
// border: 1px solid #fff;
background-color: #fff;
border-radius: 50%;
}
}
.delete-icon {
position: absolute;
bottom: 26.4px;
left: 6.4px;
border-radius: 50%;
width: 19.2px;
height: 19.2px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.type {
width: 41.6px;
padding: 0 6.4px;
text-align: center;
background: rgba(0, 0, 0, 0.5);
border-radius: 8.8px;
font-size: 9.6px;
color: #ffffff;
text-align: left;
line-height: 16px;
font-weight: 400;
position: absolute;
right: 10.8px;
top: 6.4px;
}
.photo-mask {
background: rgba(0, 0, 0, 0.5);
color: #ffffff;
position: absolute;
bottom: 26.4px;
width: 148px;
left: 0;
right: 0;
border-radius: 4.8px;
margin: 0 auto;
padding: 4.8px;
font-size: 9.6px;
color: #ffffff;
line-height: 16px;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
.photo-info {
text-align: center;
font-family: PingFangSC-Regular;
font-size: 11.2px;
color: #000000;
line-height: 17.6px;
font-weight: 400;
}
}
}
}
}
}
.inspection-button {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 25.6px;
width: 224px;
height: 38.4px;
left: 50%;
transform: translateX(-50%);
background-image: linear-gradient(180deg, #3773f6 0%, #2c57f6 99%);
box-shadow: 0px 8px 19.2px 0px rgba(51, 104, 246, 0.24);
border-radius: 21.6px;
font-family: PingFangSC-Regular;
font-size: 16px;
line-height: 38.4px;
color: #ffffff;
text-align: center;
font-weight: 400;
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论