894 lines
22 KiB
Vue
894 lines
22 KiB
Vue
<template>
|
||
<BasicLayout>
|
||
<!-- Default slot -->
|
||
<scroll-view scroll-y class="form-scroll-view">
|
||
<view class="form-container">
|
||
<view class="info-card main-content-card">
|
||
<view class="form-item cover-section">
|
||
<view class="cover-header">
|
||
<text class="form-label">封面</text>
|
||
<text class="cover-hint">建议尺寸xxx</text>
|
||
<text class="cover-counter"
|
||
>{{ formData.coverImage ? 1 : 0 }}/1</text
|
||
>
|
||
</view>
|
||
<view class="cover-upload-wrapper">
|
||
<CustomUpload
|
||
field="coverImage"
|
||
:value="formData.coverImage"
|
||
@select="handleCoverSelected"
|
||
@close="handleCoverClosed"
|
||
>
|
||
<view class="cover-placeholder">
|
||
<uni-icons type="image" size="40" color="#b0b0b0"></uni-icons>
|
||
<text>添加封面</text>
|
||
</view>
|
||
</CustomUpload>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<uni-easyinput
|
||
type="textarea"
|
||
autoHeight
|
||
v-model="formData.title"
|
||
placeholder="请输入通知标题 (必填)"
|
||
:inputBorder="false"
|
||
placeholder-style="font-weight:bold; font-size: 18px; color: #999;"
|
||
class="title-input"
|
||
></uni-easyinput>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<uni-easyinput
|
||
type="textarea"
|
||
autoHeight
|
||
v-model="formData.content"
|
||
placeholder="请输入通知内容 (必填)"
|
||
:inputBorder="false"
|
||
class="content-input"
|
||
></uni-easyinput>
|
||
</view>
|
||
|
||
<view class="form-item attachments-section">
|
||
<text class="form-label">附件</text>
|
||
<view class="attachment-list">
|
||
<view
|
||
v-for="(att, index) in formData.attachments"
|
||
:key="index"
|
||
class="attachment-item"
|
||
>
|
||
<uni-icons
|
||
:type="getAttachmentIcon(att.type)"
|
||
size="20"
|
||
color="#666"
|
||
class="attachment-icon"
|
||
></uni-icons>
|
||
<text class="attachment-name" @click="previewAttachment(att)">{{
|
||
att.name
|
||
}}</text>
|
||
<uni-icons
|
||
type="closeempty"
|
||
size="18"
|
||
color="#999"
|
||
class="remove-icon"
|
||
@click="removeAttachment(index)"
|
||
></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="add-attachment-placeholder" @click="addAttachment">
|
||
<view class="add-icon"
|
||
><uni-icons type="plusempty" size="20" color="#ccc"></uni-icons
|
||
></view>
|
||
<text class="placeholder-text"
|
||
>添加图文/视频/文件/公众号/小程序等</text
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="info-card">
|
||
<picker
|
||
mode="selector"
|
||
:range="combinedClassRange"
|
||
:value="selectedClassIndex"
|
||
@change="onClassPickerChange"
|
||
>
|
||
<view class="card-header picker-header">
|
||
<text class="section-title">按名单填写</text>
|
||
<view class="target-class">
|
||
<text :class="{ placeholder: !formData.targetClass }">{{
|
||
formData.targetClass || "请选择班级"
|
||
}}</text>
|
||
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</picker>
|
||
<view class="name-tags">
|
||
<text
|
||
v-for="name in formData.targetNames"
|
||
:key="name"
|
||
class="name-tag"
|
||
>{{ name }}</text
|
||
>
|
||
<button
|
||
v-if="formData.targetNames.length > 0"
|
||
size="mini"
|
||
type="default"
|
||
class="modify-btn"
|
||
@click="handleModifyNames"
|
||
>
|
||
修改
|
||
</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="info-card list-item-card">
|
||
<picker
|
||
mode="selector"
|
||
:range="signatureOptions"
|
||
@change="handleSignatureChange"
|
||
>
|
||
<view class="list-item-row">
|
||
<text class="list-label">按名单签字</text>
|
||
<view class="list-value">
|
||
<text>{{ signatureStatusText }}</text>
|
||
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<view class="info-card list-item-card">
|
||
<uni-datetime-picker type="datetime" v-model="formData.startTime">
|
||
<view class="list-item-row">
|
||
<text class="list-label">开始时间</text>
|
||
<view class="list-value">
|
||
<text>{{ formData.startTime || "请选择" }}</text>
|
||
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</uni-datetime-picker>
|
||
|
||
<uni-datetime-picker type="datetime" v-model="formData.endTime">
|
||
<view class="list-item-row no-border">
|
||
<text class="list-label">结束时间</text>
|
||
<view class="list-value">
|
||
<text>{{ formData.endTime || "请选择" }}</text>
|
||
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</uni-datetime-picker>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- Bottom slot -->
|
||
<template #bottom>
|
||
<view class="bottom-actions">
|
||
<button class="action-btn draft-btn" @click="saveDraft">保存草稿</button>
|
||
<button class="action-btn preview-btn" @click="previewNotice">
|
||
预览
|
||
</button>
|
||
<button class="action-btn publish-btn" @click="publishNotice">
|
||
立即发布
|
||
</button>
|
||
</view>
|
||
</template>
|
||
|
||
</BasicLayout>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, reactive, computed } from "vue";
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import CustomUpload from "/src/components/BasicUpload/CustomUpload.vue";
|
||
|
||
interface Attachment {
|
||
name: string;
|
||
type: string;
|
||
url: string;
|
||
size?: number;
|
||
}
|
||
|
||
interface FormData {
|
||
id?: string;
|
||
title: string;
|
||
content: string;
|
||
coverImage: string | null;
|
||
attachments: Attachment[];
|
||
targetClass: string;
|
||
targetNames: string[];
|
||
targetStudentIds: string[];
|
||
signatureRequired: boolean;
|
||
startTime: string;
|
||
endTime: string;
|
||
}
|
||
|
||
const noticeId = ref<string | null>(null);
|
||
const isLoadingStudents = ref(false);
|
||
const formData = reactive<FormData>({
|
||
title: "",
|
||
content: "",
|
||
coverImage: null,
|
||
attachments: [],
|
||
targetClass: "",
|
||
targetNames: [],
|
||
targetStudentIds: [],
|
||
signatureRequired: false,
|
||
startTime: "",
|
||
endTime: "",
|
||
});
|
||
|
||
const signatureOptions = ["不启用", "启用"];
|
||
const signatureStatusText = computed(() => {
|
||
return formData.signatureRequired ? "启用" : "不启用";
|
||
});
|
||
|
||
const classList = ref([
|
||
{ id: "g1c1", name: "一年级1班" },
|
||
{ id: "g1c2", name: "一年级2班" },
|
||
{ id: "g1c3", name: "一年级3班" },
|
||
{ id: "g1c4", name: "一年级4班" },
|
||
{ id: "g1c5", name: "一年级5班" },
|
||
{ id: "g2c1", name: "二年级1班" },
|
||
{ id: "g2c2", name: "二年级2班" },
|
||
{ id: "g2c3", name: "二年级3班" },
|
||
{ id: "g3c1", name: "三年级1班" },
|
||
{ id: "g3c2", name: "三年级2班" },
|
||
{ id: "g3c3", name: "三年级3班" },
|
||
{ id: "g3c4", name: "三年级4班" },
|
||
{ id: "g4c1", name: "四年级1班" },
|
||
{ id: "g4c2", name: "四年级2班" },
|
||
{ id: "g5c1", name: "五年级1班" },
|
||
{ id: "g5c2", name: "五年级2班" },
|
||
{ id: "g5c3", name: "五年级3班" },
|
||
{ id: "g6c1", name: "六年级1班" },
|
||
{ id: "g6c2", name: "六年级2班" },
|
||
]);
|
||
|
||
const combinedClassRange = computed(() => {
|
||
return classList.value.map((cls) => cls.name);
|
||
});
|
||
|
||
const selectedClassIndex = computed(() => {
|
||
const index = classList.value.findIndex(
|
||
(cls) => cls.name === formData.targetClass
|
||
);
|
||
return index >= 0 ? index : 0;
|
||
});
|
||
|
||
const fetchStudentsByClass = async (className: string): Promise<string[]> => {
|
||
console.log(`模拟获取班级 [${className}] 的学生列表...`);
|
||
isLoadingStudents.value = true;
|
||
await new Promise((resolve) => setTimeout(resolve, 400));
|
||
|
||
const mockStudents = [
|
||
"施延兴",
|
||
"安苒溪",
|
||
"罗浩晨",
|
||
"康萌",
|
||
"范文昊",
|
||
"丁贺祥",
|
||
"韦运昊",
|
||
"萧润丽",
|
||
"谢林",
|
||
"鲍泽远",
|
||
"杨俊",
|
||
];
|
||
|
||
isLoadingStudents.value = false;
|
||
return mockStudents;
|
||
};
|
||
|
||
onLoad((options) => {
|
||
if (options && options.id) {
|
||
noticeId.value = options.id;
|
||
uni.setNavigationBarTitle({ title: "编辑通知" });
|
||
formData.title = "关于五一放假的通知 (编辑)";
|
||
formData.content = "根据校历安排，现将2024年五一劳动节放假安排通知如下...";
|
||
formData.targetClass = "二年级1班";
|
||
formData.targetNames = ["张三", "李四"];
|
||
formData.targetStudentIds = ["s201-mock", "s202-mock"];
|
||
formData.signatureRequired = true;
|
||
formData.startTime = "2024-04-30 18:00:00";
|
||
formData.endTime = "2024-05-05 23:59:59";
|
||
if (formData.targetClass && noticeId.value) {
|
||
fetchStudentsByClass(formData.targetClass).then((students) => {
|
||
formData.targetNames = students;
|
||
});
|
||
}
|
||
} else {
|
||
uni.setNavigationBarTitle({ title: "发布通知" });
|
||
}
|
||
});
|
||
|
||
const handleCoverSelected = (e: any) => {
|
||
console.log("选择封面 (CustomUpload):", e);
|
||
if (e.tempFilePaths && e.tempFilePaths.length > 0) {
|
||
formData.coverImage = e.tempFilePaths[0];
|
||
console.log("封面临时路径:", formData.coverImage);
|
||
} else {
|
||
console.error("无法从选择事件中获取封面路径:", e);
|
||
}
|
||
};
|
||
|
||
const handleCoverClosed = (field: string) => {
|
||
console.log(`删除封面 (CustomUpload): field=${field}`);
|
||
if (field === "coverImage") {
|
||
formData.coverImage = null;
|
||
}
|
||
};
|
||
|
||
const addAttachment = () => {
|
||
uni.chooseFile({
|
||
count: 5,
|
||
type: "all",
|
||
success: (res) => {
|
||
const tempFiles = res.tempFiles;
|
||
if (Array.isArray(tempFiles) && tempFiles.length > 0) {
|
||
tempFiles.forEach((file: any) => {
|
||
let fileType = "file";
|
||
const fileName = file.name || "";
|
||
const fileExtension = fileName.split(".").pop()?.toLowerCase();
|
||
|
||
if (
|
||
["png", "jpg", "jpeg", "gif", "bmp", "webp"].includes(
|
||
fileExtension || ""
|
||
)
|
||
) {
|
||
fileType = "image";
|
||
} else if (
|
||
["mp4", "mov", "avi", "wmv", "flv"].includes(fileExtension || "")
|
||
) {
|
||
fileType = "video";
|
||
} else if (
|
||
["mp3", "wav", "aac", "ogg"].includes(fileExtension || "")
|
||
) {
|
||
fileType = "audio";
|
||
}
|
||
|
||
if (
|
||
file.type &&
|
||
typeof file.type === "string" &&
|
||
(file.type.startsWith("image/") ||
|
||
file.type.startsWith("video/") ||
|
||
file.type.startsWith("audio/"))
|
||
) {
|
||
fileType = file.type.split("/")[0];
|
||
}
|
||
|
||
formData.attachments.push({
|
||
name: fileName,
|
||
type: fileType,
|
||
url: file.path,
|
||
size: file.size,
|
||
});
|
||
});
|
||
} else {
|
||
console.log("未选择任何文件或返回结果异常，或 tempFiles 不是数组");
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.error("选择附件失败:", err);
|
||
if (err.errMsg && !err.errMsg.includes("cancel")) {
|
||
uni.showToast({ title: "选择附件失败", icon: "none" });
|
||
}
|
||
},
|
||
});
|
||
};
|
||
|
||
const removeAttachment = (index: number) => {
|
||
formData.attachments.splice(index, 1);
|
||
};
|
||
|
||
const getAttachmentIcon = (type: string): string => {
|
||
if (type === "image") return "image";
|
||
if (type === "video") return "videocam";
|
||
if (type === "audio") return "mic";
|
||
return "paperclip";
|
||
};
|
||
|
||
const previewAttachment = (attachment: Attachment) => {
|
||
console.log("预览附件:", attachment);
|
||
uni.showToast({ title: `预览 ${attachment.name} 功能待实现`, icon: "none" });
|
||
};
|
||
|
||
const onClassPickerChange = async (e: any) => {
|
||
const index = e.detail.value;
|
||
const selectedClass = classList.value[index];
|
||
if (selectedClass && selectedClass.name !== formData.targetClass) {
|
||
formData.targetClass = selectedClass.name;
|
||
formData.targetNames = [];
|
||
formData.targetStudentIds = [];
|
||
try {
|
||
const students = await fetchStudentsByClass(formData.targetClass);
|
||
formData.targetNames = students;
|
||
} catch (error) {
|
||
console.error("获取学生列表失败:", error);
|
||
uni.showToast({ title: "获取学生列表失败", icon: "none" });
|
||
}
|
||
}
|
||
};
|
||
|
||
const handleModifyNames = () => {
|
||
const selectedClassObj = classList.value.find(
|
||
(cls) => cls.name === formData.targetClass
|
||
);
|
||
if (!selectedClassObj) {
|
||
uni.showToast({ title: "请先选择班级", icon: "none" });
|
||
return;
|
||
}
|
||
const classId = selectedClassObj.id;
|
||
uni.navigateTo({
|
||
url: `/pages/view/notice/selectStudents?classId=${classId}`,
|
||
});
|
||
};
|
||
|
||
const handleSignatureChange = (e: any) => {
|
||
const index = e.detail.value;
|
||
formData.signatureRequired = index == 1;
|
||
};
|
||
|
||
const validateForm = (): boolean => {
|
||
if (!formData.title.trim()) {
|
||
uni.showToast({ title: "请输入通知标题", icon: "none" });
|
||
return false;
|
||
}
|
||
if (!formData.content.trim()) {
|
||
uni.showToast({ title: "请输入通知内容", icon: "none" });
|
||
return false;
|
||
}
|
||
if (
|
||
formData.startTime &&
|
||
formData.endTime &&
|
||
formData.startTime >= formData.endTime
|
||
) {
|
||
uni.showToast({ title: "结束时间必须晚于开始时间", icon: "none" });
|
||
return false;
|
||
}
|
||
return true;
|
||
};
|
||
|
||
const saveDraft = () => {
|
||
if (!validateForm()) return;
|
||
console.log("保存草稿", formData);
|
||
uni.showToast({ title: "草稿保存成功 (模拟)", icon: "success" });
|
||
};
|
||
|
||
const previewNotice = () => {
|
||
if (!validateForm()) return;
|
||
console.log("预览通知", formData);
|
||
uni.showToast({ title: "预览功能待实现", icon: "none" });
|
||
};
|
||
|
||
const publishNotice = () => {
|
||
if (!validateForm()) return;
|
||
console.log("发布通知", formData);
|
||
uni.showLoading({ title: "发布中..." });
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
uni.showToast({ title: "发布成功 (模拟)", icon: "success" });
|
||
uni.navigateBack();
|
||
}, 1000);
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
/* Remove original page container styles */
|
||
/*
|
||
.notice-publish-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
background-color: #f4f5f7;
|
||
}
|
||
*/
|
||
|
||
.form-scroll-view {
|
||
/* Let BasicLayout handle height/flex */
|
||
/* flex: 1; */
|
||
/* height: 0; */
|
||
/* BasicLayout default slot might have padding, adjust if needed */
|
||
/* Or keep the scroll view if BasicLayout doesn't provide one */
|
||
height: 100%; // Assume BasicLayout's default slot needs this
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.form-container {
|
||
padding: 12px;
|
||
box-sizing: border-box;
|
||
/* Add padding-bottom if content gets hidden by bottom bar */
|
||
/* padding-bottom: 70px; */
|
||
}
|
||
|
||
.info-card {
|
||
background-color: #ffffff;
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
margin-bottom: 12px;
|
||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.main-content-card {
|
||
padding: 5px 15px;
|
||
|
||
.form-item {
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
&:last-child {
|
||
border-bottom: none;
|
||
padding-bottom: 5px;
|
||
}
|
||
&:first-child {
|
||
padding-top: 10px;
|
||
}
|
||
}
|
||
|
||
.cover-section {
|
||
padding-bottom: 10px;
|
||
|
||
.cover-header {
|
||
display: flex;
|
||
align-items: baseline;
|
||
margin-bottom: 10px;
|
||
width: 100%;
|
||
}
|
||
|
||
.form-label {
|
||
width: auto;
|
||
margin-right: 8px;
|
||
color: #303133;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.cover-hint {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
margin-right: auto;
|
||
padding-left: 5px;
|
||
}
|
||
|
||
.cover-counter {
|
||
font-size: 14px;
|
||
color: #c0c4cc;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.cover-upload-wrapper {
|
||
width: 100%;
|
||
height: 150px;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
border: 1px dashed #dcdcdc;
|
||
background-color: #f8f8f8;
|
||
}
|
||
|
||
.cover-placeholder {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
color: #b0b0b0;
|
||
font-size: 14px;
|
||
box-sizing: border-box;
|
||
cursor: pointer;
|
||
text {
|
||
margin-top: 8px;
|
||
}
|
||
.uni-icons {
|
||
margin-bottom: 4px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.title-input {
|
||
padding-bottom: 5px;
|
||
}
|
||
.content-input {
|
||
padding-top: 5px;
|
||
}
|
||
|
||
.title-input ::v-deep .uni-easyinput__content-textarea {
|
||
font-size: 18px !important;
|
||
font-weight: bold !important;
|
||
color: #303133 !important;
|
||
padding: 0 !important;
|
||
line-height: 1.5;
|
||
}
|
||
.content-input ::v-deep .uni-easyinput__content-textarea {
|
||
font-size: 15px !important;
|
||
color: #606266 !important;
|
||
padding: 0 !important;
|
||
line-height: 1.6;
|
||
min-height: 80px;
|
||
}
|
||
|
||
.attachments-section {
|
||
padding-top: 15px;
|
||
.form-label {
|
||
display: block;
|
||
color: #333;
|
||
font-size: 15px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.attachment-list {
|
||
margin-bottom: 12px;
|
||
}
|
||
.attachment-item {
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #f8f9fa;
|
||
border-radius: 6px;
|
||
padding: 8px 12px;
|
||
margin-bottom: 8px;
|
||
border: 1px solid #e9ecef;
|
||
|
||
.attachment-icon {
|
||
margin-right: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
.attachment-name {
|
||
flex-grow: 1;
|
||
font-size: 14px;
|
||
color: #495057;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
margin-right: 10px;
|
||
cursor: pointer;
|
||
}
|
||
.remove-icon {
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
opacity: 0.7;
|
||
&:hover {
|
||
opacity: 1;
|
||
color: #dc3545 !important;
|
||
}
|
||
}
|
||
}
|
||
.add-attachment-placeholder {
|
||
display: flex;
|
||
align-items: center;
|
||
border: 1px dashed #d5d8de;
|
||
border-radius: 6px;
|
||
padding: 15px;
|
||
background-color: #f8f8f8;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s;
|
||
.add-icon {
|
||
width: 30px;
|
||
height: 30px;
|
||
border: 1px solid #d5d8de;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 12px;
|
||
background-color: #fff;
|
||
.uni-icons {
|
||
color: #999 !important;
|
||
}
|
||
}
|
||
.placeholder-text {
|
||
font-size: 14px;
|
||
color: #909399;
|
||
}
|
||
&:active {
|
||
background-color: #eee;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-card picker {
|
||
width: 100%;
|
||
}
|
||
|
||
.picker-header {
|
||
margin-bottom: 0;
|
||
padding: 14px 0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
.section-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #303133;
|
||
padding-left: 15px;
|
||
}
|
||
.target-class {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #606266;
|
||
padding-right: 15px;
|
||
text {
|
||
margin-right: 5px;
|
||
&.placeholder {
|
||
color: #909399;
|
||
}
|
||
}
|
||
.uni-icons {
|
||
color: #909399 !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.name-tags {
|
||
padding: 15px;
|
||
margin-top: 0;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px 10px;
|
||
position: relative;
|
||
min-height: 30px;
|
||
|
||
.name-tag,
|
||
.modify-btn {
|
||
font-size: 13px;
|
||
padding: 5px 0;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
flex-grow: 0;
|
||
flex-shrink: 0;
|
||
box-sizing: border-box;
|
||
flex-basis: calc((100% - 50px) / 6);
|
||
height: 28px;
|
||
line-height: 18px;
|
||
}
|
||
|
||
.name-tag {
|
||
background-color: #f4f4f5;
|
||
color: #909399;
|
||
}
|
||
|
||
.modify-btn {
|
||
background-color: #ecf5ff;
|
||
color: #409eff;
|
||
border: 1px solid #d9ecff;
|
||
padding: 0;
|
||
margin-left: 0;
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
&::after {
|
||
border: none;
|
||
}
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.loading-spinner {
|
||
position: absolute;
|
||
top: 5px;
|
||
left: 15px;
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.list-item-card {
|
||
padding: 0;
|
||
.uni-datetime-picker,
|
||
.picker {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.list-item-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 14px 15px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s;
|
||
|
||
&:active {
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
&.no-border {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.list-label {
|
||
font-size: 15px;
|
||
color: #303133;
|
||
}
|
||
.list-value {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 15px;
|
||
color: #909399;
|
||
text {
|
||
margin-right: 5px;
|
||
color: #606266;
|
||
&.placeholder {
|
||
color: #909399;
|
||
}
|
||
}
|
||
.uni-icons {
|
||
color: #c0c4cc !important;
|
||
}
|
||
}
|
||
uni-datetime-picker .list-value text,
|
||
picker .list-value text {
|
||
color: #606266;
|
||
}
|
||
uni-datetime-picker .list-value text:empty::before,
|
||
picker .list-value text:empty::before {
|
||
content: "请选择";
|
||
color: #909399;
|
||
}
|
||
picker .list-value text {
|
||
color: #606266;
|
||
}
|
||
}
|
||
|
||
.bottom-actions {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
padding: 12px 15px;
|
||
background-color: #ffffff;
|
||
border-top: 1px solid #e5e5e5;
|
||
|
||
.action-btn {
|
||
width: auto;
|
||
min-width: 90px;
|
||
margin: 0 5px;
|
||
font-size: 15px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
border-radius: 20px;
|
||
padding: 0 20px;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
|
||
&.draft-btn {
|
||
background-color: #f4f4f5;
|
||
color: #909399;
|
||
border: 1px solid #e9e9eb;
|
||
}
|
||
&.preview-btn {
|
||
background-color: #ecf5ff;
|
||
color: #409eff;
|
||
border: 1px solid #d9ecff;
|
||
}
|
||
&.publish-btn {
|
||
background-color: #409eff;
|
||
color: #ffffff;
|
||
border: none;
|
||
}
|
||
&.draft-btn:active {
|
||
background-color: #e0e0e0;
|
||
}
|
||
&.preview-btn:active {
|
||
background-color: #d9ecff;
|
||
}
|
||
&.publish-btn:active {
|
||
background-color: #3a8ee6;
|
||
}
|
||
}
|
||
}
|
||
|
||
.target-class text.placeholder {
|
||
color: #909399;
|
||
}
|
||
|
||
</style>
|