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>
<view class="container">
<uni-nav-bar
v-if="!selectedCount"
:fixed="true"
background-color="rgba(214, 240, 255, 0.0)"
status-bar
rightWidth="300"
>
<block slot="left">
<view @click="back">
<text class="iconfont icon-fanhui"></text>
</view>
</block>
<block slot="right" class="nav-right">
<view class="header-buttons">
<text class="iconfont icon-shuoming"></text>
</view>
</block>
</uni-nav-bar>
<uni-nav-bar
v-else
:fixed="true"
background-color="#FFF"
status-bar
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
<view class="container">
<uni-nav-bar v-if="!selectedCount" :fixed="true" background-color="rgba(214, 240, 255, 0.0)" status-bar
rightWidth="300">
<block slot="left">
<view @click="back">
<text class="iconfont icon-fanhui"></text>
</view>
</block>
<block slot="right" class="nav-right">
<view class="header-buttons" @click="showDescDialog = true">
<text class="iconfont icon-shuoming"></text>
</view>
</block>
</uni-nav-bar>
<uni-nav-bar v-else :fixed="true" background-color="#FFF" status-bar 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"
@click.stop="toggleSelectAll"
></text> -->
<text class="iconfont icon-shanchu" @click.stop="deletePhotos"
>删除</text
>
</view>
</block>
</uni-nav-bar>
<view class="photo-box">
<view class="photo-list">
<view
v-for="(group, date) in photoGroups"
:key="date"
class="photo-group"
>
<view class="group-header">
<view
class="circle-button"
:class="{ active: isDateAllSelected(group, date) }"
@click.stop="toggleSelectDate(date)"
>
<text
v-if="isDateAllSelected(group, date)"
class="iconfont icon-wancheng"
></text>
</view>
<text class="date">{{ date }}</text>
</view>
<view class="card-list">
<view
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
<text class="iconfont icon-shanchu" @click.stop="deletePhotos">删除</text>
</view>
</block>
</uni-nav-bar>
<view class="photo-box">
<view class="photo-list">
<view v-for="(group, date) in photoGroups" :key="date" class="photo-group">
<view class="group-header">
<view class="circle-button" :class="{ active: isDateAllSelected(group, date) }"
@click.stop="toggleSelectDate(date)">
<text v-if="isDateAllSelected(group, date)" class="iconfont icon-wancheng"></text>
</view>
<text class="date">{{ date }}</text>
</view>
<view class="card-list">
<view 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"
@click.stop="deletePhoto(photo)"
></text> -->
<view class="type">{{
<view class="type">{{
photo.synchronization ? "已同步" : "待同步"
}}</view>
<view class="photo-info">
照片编号：{{ photo.id }}
</view>
</view>
</view>
</view>
</view>
</view>
<view
v-if="selectedCount"
class="inspection-button"
@click="showSyncDialog = true"
>数据同步</view
>
<view v-else class="inspection-button" @click="takePhoto">设备拍照</view>
<Dialog
v-show="showSyncDialog"
ref="Dialog"
:list="selectedPhotos"
:photos="photos"
@close="showSyncDialog = false"
@getDetails="getDetails"
></Dialog>
</view>
<view class="photo-info">
照片编号：{{ photo.id }}
</view>
</view>
</view>
</view>
</view>
</view>
<view v-if="selectedCount" class="inspection-button" @click="showSyncDialog = true">数据同步</view>
<view v-else class="inspection-button" @click="takePhoto">设备拍照</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>
</template>
<script>
import moment from "moment";
import Dialog from "./dialog.vue";
import {
addLog,
getLogContent,
LOG_TYPE_ENUM,
writeDeviceData,
} from "@/utils/IoReadingAndWriting.js";
import { getDeviceDataDetails } from "@/request/index.js";
export default {
components: {
Dialog,
},
data() {
return {
showSyncDialog: false,
photos: [],
selectedPhotos: [],
};
},
computed: {
photoGroups() {
const groups = {};
this.photos.forEach((photo) => {
const date = photo.date;
if (!groups[date]) {
groups[date] = [];
}
groups[date].push(photo);
});
return groups;
},
selectedCount() {
return this.selectedPhotos.length;
},
userInfo() {
return this.$store.state.now_user || {};
},
},
onLoad() {
this.getDetails();
},
methods: {
back() {
uni.navigateTo({
url: "/pages/home/home",
});
},
headerClose() {
this.clearSelection();
},
clearSelection() {
this.photos.forEach((photo) => (photo.selected = false));
this.selectedPhotos = [];
},
// 数据获取
getDetails() {
uni.showLoading();
getDeviceDataDetails()
.then((res) => {
this.photos = res;
uni.hideLoading();
})
.catch((error) => {
uni.showToast({ title: error.msg, icon: "none" });
uni.hideLoading();
});
},
// 拍照功能
async takePhoto() {
try {
const res = await uni.chooseImage({ count: 1, sourceType: ["camera"] });
const tempFilePath = res.tempFilePaths[0];
const saveRes = await uni.saveImageToPhotosAlbum({
filePath: tempFilePath,
});
const base64 = await this.convertFileToBase64(tempFilePath);
const newPhoto = {
id: this.getFileName(tempFilePath),
// url: base64,
imgPath: saveRes.path,
date: moment().format("YYYY-MM-DD"),
time: moment().format("YYYY-MM-DD HH:mm"),
selected: false,
synchronization: false,
};
this.photos.unshift(newPhoto);
this.addPhotos(this.photos, `照片编号(${newPhoto.id})`, "设备上架");
} catch (err) {
console.error("拍照保存失败:", err);
}
},
// 选择功能
toggleSelect(photo) {
photo.selected = !photo.selected;
if (photo.selected) {
this.selectedPhotos.push(photo);
} else {
this.selectedPhotos = this.selectedPhotos.filter(
(p) => p.id !== photo.id
);
}
},
isDateAllSelected(group, date) {
return group.every((photo) => photo.selected);
},
toggleSelectDate(date) {
const group = this.photoGroups[date];
const isGroupAllSelected = this.isDateAllSelected(group, date);
group.forEach((photo) => {
photo.selected = !isGroupAllSelected;
this.updateSelectedPhotos(photo);
});
},
toggleSelectAll() {
const isAllSelected = this.photos.length === this.selectedCount;
this.photos.forEach((photo) => {
photo.selected = !isAllSelected;
this.updateSelectedPhotos(photo);
});
},
updateSelectedPhotos(photo) {
if (photo.selected) {
if (!this.selectedPhotos.some((p) => p.id === photo.id)) {
this.selectedPhotos.push(photo);
}
} else {
this.selectedPhotos = this.selectedPhotos.filter(
(p) => p.id !== photo.id
);
}
},
// 删除功能
deletePhoto(photo) {
this.photos = this.photos.filter((p) => p.id !== photo.id);
this.selectedPhotos = this.selectedPhotos.filter(
(p) => p.id !== photo.id
);
this.addPhotos(this.photos, "删除照片", "删除");
},
deletePhotos() {
uni.showModal({
title: "提示",
content: "确认删除选中的照片？",
success: (res) => {
if (res.confirm) {
const selectedIds = this.selectedPhotos.map((p) => p.id);
this.photos = this.photos.filter(
(p) => !selectedIds.includes(p.id)
);
this.clearSelection();
this.addPhotos(this.photos, "批量删除照片", "删除");
uni.showToast({ title: "删除成功", icon: "success" });
}
},
});
},
// 其他功能
previewPhoto(photo, index) {
// uni.previewImage({
// urls: this.photos.map((p) => p.url),
// current: photo.url,
// });
uni.previewImage({
urls: this.photos.map((p) => p.imgPath),
current: index,
});
},
async convertFileToBase64(filePath) {
return new Promise((resolve, reject) => {
plus.io.resolveLocalFileSystemURL(
filePath,
(entry) => {
entry.file((file) => {
const reader = new plus.io.FileReader();
reader.onloadend = (evt) => resolve(evt.target.result);
reader.readAsDataURL(file);
}, reject);
},
reject
);
});
},
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);
},
},
};
import moment from "moment";
import Dialog from "./dialog.vue";
import descDialog from "./descdialog.vue";
import {
addLog,
getLogContent,
LOG_TYPE_ENUM,
writeDeviceData,
} from "@/utils/IoReadingAndWriting.js";
import {
getDeviceDataDetails
} from "@/request/index.js";
export default {
components: {
Dialog,
descDialog
},
data() {
return {
showSyncDialog: false,
photos: [],
selectedPhotos: [],
showDescDialog: false
};
},
computed: {
photoGroups() {
const groups = {};
this.photos.forEach((photo) => {
const date = photo.date;
if (!groups[date]) {
groups[date] = [];
}
groups[date].push(photo);
});
return groups;
},
selectedCount() {
return this.selectedPhotos.length;
},
userInfo() {
return this.$store.state.now_user || {};
},
},
onLoad() {
this.getDetails();
},
methods: {
close(key) {
this.showDescDialog = false
if (key == 'photo') this.takePhoto()
},
showDesc() {
this.showDesc = true
},
back() {
uni.navigateTo({
url: "/pages/home/home",
});
},
headerClose() {
this.clearSelection();
},
clearSelection() {
this.photos.forEach((photo) => (photo.selected = false));
this.selectedPhotos = [];
},
// 数据获取
getDetails() {
uni.showLoading();
getDeviceDataDetails()
.then((res) => {
this.photos = res;
uni.hideLoading();
})
.catch((error) => {
uni.showToast({
title: error.msg,
icon: "none"
});
uni.hideLoading();
});
},
// 拍照功能
async takePhoto() {
try {
const res = await uni.chooseImage({
count: 1,
sourceType: ["camera"]
});
const tempFilePath = res.tempFilePaths[0];
const saveRes = await uni.saveImageToPhotosAlbum({
filePath: tempFilePath,
});
const base64 = await this.convertFileToBase64(tempFilePath);
const newPhoto = {
id: this.getFileName(tempFilePath),
// url: base64,
imgPath: saveRes.path,
date: moment().format("YYYY-MM-DD"),
time: moment().format("YYYY-MM-DD HH:mm"),
selected: false,
synchronization: false,
};
this.photos.unshift(newPhoto);
this.addPhotos(this.photos, `照片编号(${newPhoto.id})`, "设备上架");
} catch (err) {
console.error("拍照保存失败:", err);
}
},
// 选择功能
toggleSelect(photo) {
photo.selected = !photo.selected;
if (photo.selected) {
this.selectedPhotos.push(photo);
} else {
this.selectedPhotos = this.selectedPhotos.filter(
(p) => p.id !== photo.id
);
}
},
isDateAllSelected(group, date) {
return group.every((photo) => photo.selected);
},
toggleSelectDate(date) {
const group = this.photoGroups[date];
const isGroupAllSelected = this.isDateAllSelected(group, date);
group.forEach((photo) => {
photo.selected = !isGroupAllSelected;
this.updateSelectedPhotos(photo);
});
},
toggleSelectAll() {
const isAllSelected = this.photos.length === this.selectedCount;
this.photos.forEach((photo) => {
photo.selected = !isAllSelected;
this.updateSelectedPhotos(photo);
});
},
updateSelectedPhotos(photo) {
if (photo.selected) {
if (!this.selectedPhotos.some((p) => p.id === photo.id)) {
this.selectedPhotos.push(photo);
}
} else {
this.selectedPhotos = this.selectedPhotos.filter(
(p) => p.id !== photo.id
);
}
},
// 删除功能
deletePhoto(photo) {
this.photos = this.photos.filter((p) => p.id !== photo.id);
this.selectedPhotos = this.selectedPhotos.filter(
(p) => p.id !== photo.id
);
this.addPhotos(this.photos, "删除照片", "删除");
},
deletePhotos() {
uni.showModal({
title: "提示",
content: "确认删除选中的照片？",
success: (res) => {
if (res.confirm) {
const selectedIds = this.selectedPhotos.map((p) => p.id);
this.photos = this.photos.filter(
(p) => !selectedIds.includes(p.id)
);
this.clearSelection();
this.addPhotos(this.photos, "批量删除照片", "删除");
uni.showToast({
title: "删除成功",
icon: "success"
});
}
},
});
},
// 其他功能
previewPhoto(photo, index) {
// uni.previewImage({
// urls: this.photos.map((p) => p.url),
// current: photo.url,
// });
uni.previewImage({
urls: this.photos.map((p) => p.imgPath),
current: index,
});
},
async convertFileToBase64(filePath) {
return new Promise((resolve, reject) => {
plus.io.resolveLocalFileSystemURL(
filePath,
(entry) => {
entry.file((file) => {
const reader = new plus.io.FileReader();
reader.onloadend = (evt) => resolve(evt.target.result);
reader.readAsDataURL(file);
}, reject);
},
reject
);
});
},
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>
<style lang="less" scoped>
/* 保持原有的样式不变 */
.container {
background-image: linear-gradient(115deg, #e8f0fb 0%, #e1ebfa 100%);
height: 100%;
}
.uni-nav-bar-text {
height: 28.8px;
width: 28.8px;
background: #ffffff;
border: 0.32px solid rgba(224, 224, 224, 1);
border-radius: 14.4px;
color: #333;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
.iconfont {
font-size: 16px;
line-height: 28.8px;
}
}
.header-left {
display: flex;
justify-content: flex-start;
.close {
font-size: 20px;
}
.selected-count {
font-size: 14.4px;
line-height: 27px;
color: #000000;
font-weight: 500;
margin-left: 6.4px;
}
}
.nav-right {
width: 192px;
}
::v-deep .uni-navbar__header-btns-left {
width: 300px !important;
}
.header-buttons {
display: flex;
align-items: center;
margin-left: auto;
width: 28.8px;
height: 28.8px;
border-radius: 50%;
background: #fff;
.iconfont {
margin: 0 auto;
&.icon-shuoming {
}
}
}
.header-right {
.iconfont {
margin: 0 auto;
&.icon-quanxuan {
margin-right: 19.2px;
}
}
}
.photo-box {
width: 100%;
height: 100%;
overflow: hidden;
.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);
/* 保持原有的样式不变 */
.container {
background-image: linear-gradient(115deg, #e8f0fb 0%, #e1ebfa 100%);
height: 100%;
}
.uni-nav-bar-text {
height: 28.8px;
width: 28.8px;
background: #ffffff;
border: 0.32px solid rgba(224, 224, 224, 1);
border-radius: 14.4px;
color: #333;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
.iconfont {
font-size: 16px;
line-height: 28.8px;
}
}
.header-left {
display: flex;
justify-content: flex-start;
.close {
font-size: 20px;
}
.selected-count {
font-size: 14.4px;
line-height: 27px;
color: #000000;
font-weight: 500;
margin-left: 6.4px;
}
}
.nav-right {
width: 192px;
}
::v-deep .uni-navbar__header-btns-left {
width: 300px !important;
}
.header-buttons {
display: flex;
align-items: center;
margin-left: auto;
width: 28.8px;
height: 28.8px;
border-radius: 50%;
background: #fff;
.iconfont {
margin: 0 auto;
&.icon-shuoming {}
}
}
.header-right {
.iconfont {
margin: 0 auto;
&.icon-quanxuan {
margin-right: 19.2px;
}
.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>
}
}
.photo-box {
width: 100%;
height: 100%;
overflow: hidden;
.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;
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论