847 lines
19 KiB
Vue
847 lines
19 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 主页面内容 -->
|
||
<view>
|
||
<image class="logo" src="/static/logo.jpg"></image>
|
||
<text class="title">{{ title }}</text>
|
||
<view class="btn-view">
|
||
<button type="primary" class="btn" @click="handleStartCapture">
|
||
开始拍摄
|
||
</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 隐藏的canvas用于水印处理（仅App/小程序端使用） -->
|
||
<!-- #ifndef H5 -->
|
||
<canvas
|
||
canvas-id="watermarkCanvas"
|
||
style="
|
||
position: fixed;
|
||
top: -9999px;
|
||
left: -9999px;
|
||
width: 2000px;
|
||
height: 2000px;
|
||
"
|
||
></canvas>
|
||
<!-- #endif -->
|
||
|
||
<!-- 弹窗内容 -->
|
||
<uni-popup
|
||
ref="popup"
|
||
:is-mask-click="false"
|
||
type="bottom"
|
||
border-radius="0 0 0 0"
|
||
>
|
||
<view class="container">
|
||
<view style="height: 80rpx"></view>
|
||
|
||
<!-- 图片预览区域 -->
|
||
<view class="preview-box">
|
||
<text class="preview-title">图片预览</text>
|
||
<view class="preview-img">
|
||
<image
|
||
:src="imageSrc"
|
||
@click="handlePreviewImage"
|
||
mode="aspectFit"
|
||
class="img"
|
||
></image>
|
||
</view>
|
||
|
||
<!-- 图片尺寸和文件大小信息 -->
|
||
<view
|
||
class="size-info"
|
||
v-if="imageSizeInfo.original.width > 0 && false"
|
||
>
|
||
<text class="size-text">
|
||
原图尺寸: {{ imageSizeInfo.original.width }} x
|
||
{{ imageSizeInfo.original.height }}
|
||
</text>
|
||
<text class="size-text" v-if="imageSizeInfo.original.fileSize">
|
||
原图大小: {{ imageSizeInfo.original.fileSize.sizeKB }} KB
|
||
</text>
|
||
<text class="size-text">
|
||
水印图片尺寸: {{ imageSizeInfo.watermark.width }} x
|
||
{{ imageSizeInfo.watermark.height }}
|
||
</text>
|
||
<text class="size-text" v-if="imageSizeInfo.watermark.fileSize">
|
||
水印图片大小: {{ imageSizeInfo.watermark.fileSize.sizeKB }} KB
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<!-- 表单区域 -->
|
||
<view class="form-item">
|
||
<text class="label">位置：</text>
|
||
<input
|
||
v-model="locationInfo"
|
||
type="text"
|
||
class="input worker-input"
|
||
disabled
|
||
/>
|
||
</view>
|
||
<!-- 表单区域 -->
|
||
<view class="form-item">
|
||
<text class="label">请填写工作内容：</text>
|
||
<uni-combox
|
||
:candidates="candidates"
|
||
:clear-able="true"
|
||
placeholder="请填写工作内容"
|
||
@select="handleComboxSelect"
|
||
v-model="workContent"
|
||
></uni-combox>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">请选择部门：</text>
|
||
<picker :range="departments" @change="handleDeptChange">
|
||
<view class="picker">{{ departments[deptIndex] }}</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">请填写施工人员：</text>
|
||
<view
|
||
v-for="(worker, index) in workers"
|
||
:key="index"
|
||
class="worker-row"
|
||
>
|
||
<input
|
||
type="text"
|
||
v-model="workers[index]"
|
||
class="input worker-input"
|
||
/>
|
||
<view class="btns">
|
||
<button class="btn_f" size="mini" @click="addWorker">+</button>
|
||
<button
|
||
v-if="workers.length > 0"
|
||
class="btn_f"
|
||
size="mini"
|
||
@click="removeWorker(index)"
|
||
>
|
||
-
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">请选择项目状态：</text>
|
||
<picker :range="statusList" @change="handleStatusChange">
|
||
<view class="picker">{{ statusList[statusIndex] }}</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<!-- 底部操作按钮 -->
|
||
<view class="footer">
|
||
<button type="primary" class="btn-cancel" @click="handleRetakePhoto">
|
||
重拍
|
||
</button>
|
||
<button type="primary" class="btn-cancel" @click="handleRetakeCancel">
|
||
清空
|
||
</button>
|
||
<button
|
||
type="primary"
|
||
class="btn-save"
|
||
@click="handleSaveImage"
|
||
:disabled="isSubmitting"
|
||
>
|
||
保存图片
|
||
</button>
|
||
<button
|
||
type="primary"
|
||
class="btn-submit"
|
||
@click="handleSaveAndSubmit"
|
||
:disabled="isSubmitting"
|
||
>
|
||
提交数据
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from "vue";
|
||
// import eruda from "eruda";
|
||
import {
|
||
getLocation,
|
||
chooseImage,
|
||
addWatermark,
|
||
formatDate,
|
||
getCachedLogo,
|
||
saveImageToPhotosAlbum,
|
||
imageToBase64,
|
||
} from "../../common/utils";
|
||
import {
|
||
getLocationTranslate,
|
||
getLocationGeocoder,
|
||
} from "../../common/mapTranslateResult";
|
||
import { getConfig, addWatermarkRecord } from "../../common/server";
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
// 简单初始化
|
||
// window.erudaInstance = eruda.init();
|
||
// ==================== 响应式数据 ====================
|
||
// 基础数据
|
||
const title = ref("随工水印相机");
|
||
const candidates = ref([]);
|
||
const workContent = ref(""); // 工作内容
|
||
const popup = ref(null);
|
||
|
||
// 位置信息
|
||
const locations = ref({
|
||
location: {
|
||
lat: null,
|
||
lng: null,
|
||
},
|
||
translate: {
|
||
lat: null,
|
||
lng: null,
|
||
locationInfo: null,
|
||
},
|
||
});
|
||
|
||
// 图片相关
|
||
const imageSrc = ref("");
|
||
const originalImageSrc = ref("");
|
||
const imageSizeInfo = ref({
|
||
original: {
|
||
width: 0,
|
||
height: 0,
|
||
fileSize: null,
|
||
},
|
||
watermark: {
|
||
width: 0,
|
||
height: 0,
|
||
fileSize: null,
|
||
},
|
||
});
|
||
|
||
// 表单数据
|
||
const departments = ref(["请选择"]);
|
||
const deptIndex = ref(0);
|
||
const workers = ref([""]);
|
||
const statusList = ref([]);
|
||
const statusIndex = ref(0);
|
||
var locationData = new Map();
|
||
// 其他信息
|
||
const locationInfo = ref("");
|
||
const currentTime = ref("");
|
||
const isSubmitting = ref(false); // 防抖状态
|
||
let logo = ""; // 非响应式数据
|
||
|
||
// ==================== 事件处理函数 ====================
|
||
// 开始拍摄
|
||
const handleStartCapture = async () => {
|
||
uni.showLoading({
|
||
title: "加载中。。。",
|
||
});
|
||
|
||
try {
|
||
// 获取位置信息
|
||
const _locationData = await getLocation();
|
||
console.log("系统坐标", _locationData);
|
||
|
||
const location = _locationData.latitude + "," + _locationData.longitude;
|
||
console.log("经纬度", location);
|
||
|
||
const translate = await getLocationTranslate(location);
|
||
console.log("转换后", translate);
|
||
|
||
const t_location = translate.lat + "," + translate.lng;
|
||
const geocoderResult = await getLocationGeocoder(t_location);
|
||
console.log("地理编码结果", geocoderResult);
|
||
|
||
// 保存位置信息
|
||
locations.value.location.lat = _locationData.latitude;
|
||
locations.value.location.lng = _locationData.longitude;
|
||
locations.value.translate.lat = translate.lat;
|
||
locations.value.translate.lng = translate.lng;
|
||
locations.value.translate.locationInfo = geocoderResult || "未知位置";
|
||
locationInfo.value = geocoderResult || "未知位置";
|
||
currentTime.value = new Date();
|
||
|
||
// 选择图片
|
||
const image = await chooseImage();
|
||
console.log("图片", image);
|
||
originalImageSrc.value = image.tempFilePaths[0];
|
||
imageSrc.value = image.tempFilePaths[0];
|
||
|
||
await addWatermarkToImage();
|
||
uni.hideLoading();
|
||
popup.value.open();
|
||
} catch (error) {
|
||
console.log("错误", error);
|
||
uni.hideLoading();
|
||
}
|
||
};
|
||
|
||
// 预览图片
|
||
const handlePreviewImage = () => {
|
||
uni.previewImage({
|
||
urls: [imageSrc.value],
|
||
});
|
||
};
|
||
|
||
// 表单事件处理
|
||
const handleComboxSelect = async (value) => {
|
||
console.log("选择的工作内容:", value);
|
||
if (locationData[value] != null) {
|
||
var tempData = locationData[value];
|
||
|
||
// 设置部门
|
||
if (tempData.dept && departments.value.includes(tempData.dept)) {
|
||
deptIndex.value = departments.value.indexOf(tempData.dept);
|
||
}
|
||
|
||
// 设置项目状态
|
||
if (tempData.status && statusList.value.includes(tempData.status)) {
|
||
statusIndex.value = statusList.value.indexOf(tempData.status);
|
||
}
|
||
|
||
// 设置施工人员
|
||
if (tempData.workers && Array.isArray(tempData.workers)) {
|
||
workers.value.splice(0, workers.value.length);
|
||
workers.value.push(...tempData.workers);
|
||
}
|
||
await addWatermarkToImage(value);
|
||
console.log("加载的历史数据:", tempData);
|
||
}
|
||
};
|
||
|
||
const handleDeptChange = (e) => {
|
||
deptIndex.value = e.detail.value;
|
||
};
|
||
|
||
const handleStatusChange = (e) => {
|
||
statusIndex.value = e.detail.value;
|
||
};
|
||
|
||
// 施工人员管理
|
||
const addWorker = () => {
|
||
workers.value.push("");
|
||
};
|
||
|
||
const removeWorker = (index) => {
|
||
if (workers.value.length > 1) {
|
||
workers.value.splice(index, 1);
|
||
}
|
||
};
|
||
|
||
// ==================== 业务逻辑函数 ====================
|
||
// 添加水印
|
||
const addWatermarkToImage = async (work = "") => {
|
||
try {
|
||
const watermarkInfo = {
|
||
time: formatDate(currentTime.value),
|
||
location: locationInfo.value,
|
||
longitude: locations.value.translate.lng,
|
||
latitude: locations.value.translate.lat,
|
||
department: departments.value[deptIndex.value],
|
||
workers: workers.value.filter((worker) => worker.trim() !== ""),
|
||
status: statusList.value[statusIndex.value],
|
||
remarks: workContent.value,
|
||
};
|
||
if (workContent.value == "" && work != "") {
|
||
watermarkInfo.remarks = work;
|
||
}
|
||
console.log("水印信息:", watermarkInfo);
|
||
console.log("原图路径:", originalImageSrc.value);
|
||
|
||
const watermarkResult = await addWatermark(
|
||
originalImageSrc.value,
|
||
watermarkInfo,
|
||
logo,
|
||
1
|
||
);
|
||
|
||
console.log("水印结果:", watermarkResult);
|
||
imageSrc.value = watermarkResult.filePath;
|
||
imageSizeInfo.value = {
|
||
original: watermarkResult.originalSize,
|
||
watermark: watermarkResult.watermarkSize,
|
||
};
|
||
} catch (error) {
|
||
console.error("添加水印失败:", error);
|
||
uni.showToast({
|
||
title: "添加水印失败",
|
||
icon: "error",
|
||
});
|
||
}
|
||
};
|
||
|
||
// 重新拍照
|
||
const handleRetakePhoto = () => {
|
||
popup.value.close();
|
||
resetFormData();
|
||
};
|
||
|
||
// 保存图片（仅生成水印并保存到相册）
|
||
const handleSaveImage = async () => {
|
||
// 防抖检查
|
||
if (isSubmitting.value) {
|
||
return;
|
||
}
|
||
|
||
// 基本验证
|
||
if (!validateFormData(false)) {
|
||
return;
|
||
}
|
||
|
||
isSubmitting.value = true;
|
||
|
||
try {
|
||
uni.showLoading({
|
||
title: "保存中...",
|
||
});
|
||
|
||
// 先添加水印
|
||
await addWatermarkToImage();
|
||
|
||
// 保存水印图片到相册
|
||
if (imageSrc.value) {
|
||
await saveImageToPhotosAlbum(imageSrc.value);
|
||
}
|
||
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: "图片保存成功",
|
||
icon: "success",
|
||
});
|
||
} catch (error) {
|
||
console.error("保存图片失败:", error);
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: "保存图片失败",
|
||
icon: "error",
|
||
});
|
||
} finally {
|
||
// 延迟重置状态，防止快速重复点击
|
||
setTimeout(() => {
|
||
isSubmitting.value = false;
|
||
}, 1000);
|
||
}
|
||
};
|
||
|
||
const handleRetakeCancel = async () => {
|
||
workers.value.splice(0, workers.value.length);
|
||
workers.value.push("");
|
||
statusIndex.value = 0;
|
||
deptIndex.value = 0;
|
||
workContent.value = "";
|
||
loadCandidates();
|
||
await addWatermarkToImage();
|
||
};
|
||
|
||
// 保存并提交
|
||
const handleSaveAndSubmit = async () => {
|
||
// 防抖检查
|
||
if (isSubmitting.value) {
|
||
return;
|
||
}
|
||
|
||
// 参数验证
|
||
if (!validateFormData(true)) {
|
||
return;
|
||
}
|
||
|
||
isSubmitting.value = true;
|
||
|
||
try {
|
||
uni.showLoading({
|
||
title: "保存中...",
|
||
});
|
||
|
||
// 先添加水印
|
||
await addWatermarkToImage();
|
||
|
||
var saveData = {
|
||
workContent: workContent.value,
|
||
workers: workers.value.filter((worker) => worker.trim() !== ""),
|
||
status: statusList.value[statusIndex.value],
|
||
dept: departments.value[deptIndex.value],
|
||
date: new Date().toISOString(), // 使用ISO格式确保时间格式一致
|
||
};
|
||
console.log("locationData", locationData);
|
||
|
||
locationData[workContent.value] = saveData;
|
||
|
||
uni.setStorageSync("locationData", locationData);
|
||
|
||
var fromData = {
|
||
locations: locations.value,
|
||
workContent: workContent.value,
|
||
workers: workers.value,
|
||
status: statusList.value[statusIndex.value],
|
||
dept: departments.value[deptIndex.value],
|
||
};
|
||
|
||
var _remarks = JSON.stringify(locations.value);
|
||
|
||
var imageBase64 = await imageToBase64(imageSrc.value);
|
||
|
||
console.log(fromData);
|
||
const camRecordWorkDto = {
|
||
// 部门名称
|
||
DeptName: departments.value[deptIndex.value],
|
||
// 图片地址
|
||
Image: imageBase64,
|
||
// 工作记录时间
|
||
RecordTime: formatDate(currentTime.value),
|
||
// 经度
|
||
Longitude: locations.value.translate.lng,
|
||
// 纬度
|
||
Latitude: locations.value.translate.lat,
|
||
// 工作地点
|
||
Address: locationInfo.value,
|
||
// 工作内容
|
||
Content: workContent.value,
|
||
// 状态
|
||
StatusName: statusList.value[statusIndex.value],
|
||
// 备注
|
||
Remarks: _remarks,
|
||
|
||
// 工作人员列表
|
||
Workers: workers.value,
|
||
};
|
||
var res = await addWatermarkRecord(camRecordWorkDto);
|
||
console.log(res);
|
||
|
||
if (res.code != 200) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: "error",
|
||
});
|
||
return;
|
||
}
|
||
|
||
uni.hideLoading();
|
||
|
||
uni.showToast({
|
||
title: "提交成功",
|
||
icon: "success",
|
||
});
|
||
} catch (error) {
|
||
console.error("保存失败:", error);
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: "保存失败",
|
||
icon: "error",
|
||
});
|
||
} finally {
|
||
// 延迟重置状态，防止快速重复点击
|
||
setTimeout(() => {
|
||
isSubmitting.value = false;
|
||
}, 1000);
|
||
}
|
||
|
||
try {
|
||
// 保存水印图片到相册
|
||
if (imageSrc.value) {
|
||
await saveImageToPhotosAlbum(imageSrc.value);
|
||
}
|
||
} catch (error) {
|
||
console.error("保存图片失败", error);
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: "保存图片失败",
|
||
icon: "error",
|
||
});
|
||
}
|
||
handleRetakePhoto();
|
||
};
|
||
|
||
// ==================== 工具函数 ====================
|
||
// 验证表单数据
|
||
const validateFormData = (isSubmit = false) => {
|
||
// 基本验证 - 位置信息
|
||
if (!locationInfo.value || locationInfo.value.trim() === "") {
|
||
uni.showToast({
|
||
title: "位置信息不能为空",
|
||
icon: "error",
|
||
});
|
||
return false;
|
||
}
|
||
|
||
// 如果是提交操作，需要更严格的验证
|
||
if (isSubmit) {
|
||
if (!workContent.value || workContent.value.trim() === "") {
|
||
uni.showToast({
|
||
title: "请填写工作内容",
|
||
icon: "error",
|
||
});
|
||
return false;
|
||
}
|
||
|
||
if (deptIndex.value === 0) {
|
||
uni.showToast({
|
||
title: "请选择部门",
|
||
icon: "error",
|
||
});
|
||
return false;
|
||
}
|
||
|
||
const validWorkers = workers.value.filter((worker) => worker.trim() !== "");
|
||
if (validWorkers.length === 0) {
|
||
uni.showToast({
|
||
title: "请填写施工人员",
|
||
icon: "error",
|
||
});
|
||
return false;
|
||
}
|
||
|
||
// if (statusIndex.value === 0) {
|
||
// uni.showToast({
|
||
// title: "请选择项目状态",
|
||
// icon: "error",
|
||
// });
|
||
// return false;
|
||
// }
|
||
}
|
||
|
||
return true;
|
||
};
|
||
|
||
// 重置表单数据
|
||
const resetFormData = () => {
|
||
imageSrc.value = "";
|
||
originalImageSrc.value = "";
|
||
locationInfo.value = "";
|
||
currentTime.value = "";
|
||
imageSizeInfo.value = {
|
||
original: {
|
||
width: 0,
|
||
height: 0,
|
||
fileSize: null,
|
||
},
|
||
watermark: {
|
||
width: 0,
|
||
height: 0,
|
||
fileSize: null,
|
||
},
|
||
};
|
||
workers.value.splice(0, workers.value.length);
|
||
workers.value.push("");
|
||
statusIndex.value = 0;
|
||
deptIndex.value = 0;
|
||
workContent.value = "";
|
||
loadCandidates();
|
||
};
|
||
|
||
const loadCandidates = () => {
|
||
candidates.value.splice(0, candidates.value.length);
|
||
|
||
// 将对象转换为数组并按时间倒序排序
|
||
const sortedEntries = Object.entries(locationData)
|
||
.filter(([key, data]) => data && data.date) // 过滤掉没有时间字段的数据
|
||
.sort((a, b) => {
|
||
const dateA = new Date(a[1].date);
|
||
const dateB = new Date(b[1].date);
|
||
return dateB - dateA; // 倒序排列（最新的在前）
|
||
});
|
||
|
||
// 提取排序后的键名
|
||
sortedEntries.forEach(([key, data]) => {
|
||
console.log(`工作内容: ${key}, 时间: ${data.date}`);
|
||
candidates.value.push(key);
|
||
});
|
||
};
|
||
// ==================== 生命周期 ====================
|
||
onLoad(async () => {
|
||
uni.showLoading({
|
||
title: "loading...",
|
||
});
|
||
|
||
try {
|
||
const config = await getConfig();
|
||
console.log("配置", config);
|
||
|
||
logo = config.logo;
|
||
departments.value.push(...config.deptList);
|
||
statusList.value.push(...config.construction);
|
||
|
||
// 缓存logo
|
||
await getCachedLogo(logo);
|
||
|
||
var _locationData = uni.getStorageSync("locationData");
|
||
if (_locationData != null && _locationData != "") {
|
||
locationData = _locationData;
|
||
loadCandidates();
|
||
}
|
||
} catch (error) {
|
||
console.error("初始化失败:", error);
|
||
} finally {
|
||
uni.hideLoading();
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.logo {
|
||
height: 200px;
|
||
width: 200px;
|
||
margin: 0 auto;
|
||
position: absolute;
|
||
top: 25%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.btn {
|
||
width: 100px;
|
||
margin: 0 auto;
|
||
position: absolute;
|
||
bottom: 22%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.title {
|
||
margin: 0 auto;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #000;
|
||
text-align: center;
|
||
position: absolute;
|
||
top: 35%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.container {
|
||
padding: 20rpx;
|
||
background: #fff;
|
||
height: 100vh;
|
||
overflow: auto;
|
||
}
|
||
|
||
.preview-box {
|
||
background: #fff;
|
||
padding: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.preview-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.preview-img {
|
||
margin: 20rpx 0;
|
||
width: 100%;
|
||
height: 400rpx;
|
||
background: #ddd;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.img {
|
||
max-width: 100%;
|
||
max-height: 400rpx;
|
||
}
|
||
|
||
.preview-info {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
text-align: left;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.form-item {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.label {
|
||
font-size: 28rpx;
|
||
margin-bottom: 10rpx;
|
||
display: block;
|
||
}
|
||
|
||
.input {
|
||
border: 1px solid #ddd;
|
||
border-radius: 8rpx;
|
||
padding: 10rpx;
|
||
background: #fff;
|
||
}
|
||
|
||
.picker {
|
||
border: 1px solid #ddd;
|
||
border-radius: 8rpx;
|
||
padding: 10rpx;
|
||
background: #fff;
|
||
}
|
||
|
||
.worker-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.worker-input {
|
||
flex: 1;
|
||
}
|
||
|
||
.btns {
|
||
display: flex;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.btn_f {
|
||
margin-left: 5rpx;
|
||
}
|
||
|
||
.footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.btn-cancel {
|
||
background: #007aff;
|
||
color: #fff;
|
||
}
|
||
|
||
.btn-save {
|
||
background: #28a745;
|
||
color: #fff;
|
||
}
|
||
|
||
.btn-submit {
|
||
background: #007aff;
|
||
color: #fff;
|
||
}
|
||
|
||
.btn-save:disabled,
|
||
.btn-submit:disabled {
|
||
background: #ccc !important;
|
||
color: #999 !important;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.watermark-btn {
|
||
margin-top: 20rpx;
|
||
background: #28a745;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
padding: 10rpx 30rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.size-info {
|
||
margin-top: 20rpx;
|
||
padding: 20rpx;
|
||
background: #f8f9fa;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.size-text {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
margin-bottom: 10rpx;
|
||
text-align: center;
|
||
}
|
||
</style> |