“wangzihua”
3 months ago
5 changed files with 1733 additions and 66 deletions
Binary file not shown.
File diff suppressed because it is too large
@ -0,0 +1,812 @@ |
|||
<template> |
|||
<div class="mobile-detail-page"> |
|||
<!-- 头部导航 --> |
|||
<div class="page-header"> |
|||
<div class="header-left"> |
|||
<button class="back-btn" @click="handleBack"> |
|||
<span>←</span> |
|||
</button> |
|||
</div> |
|||
<div class="header-title"> |
|||
{{ readonlyMode ? '申报详情' : '编辑申报' }} |
|||
</div> |
|||
<div class="header-right"> |
|||
<!-- 占位 --> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 表单内容 --> |
|||
<div class="form-content"> |
|||
<!-- 基础信息 --> |
|||
<div class="form-section"> |
|||
<div class="section-title">一、基础信息</div> |
|||
|
|||
<!-- 姓名 --> |
|||
<div class="form-item"> |
|||
<label class="form-label">姓名</label> |
|||
<input |
|||
v-model="form.actualName" |
|||
class="form-input" |
|||
placeholder="员工姓名" |
|||
readonly |
|||
/> |
|||
</div> |
|||
|
|||
<!-- 执业证号 --> |
|||
<div class="form-item"> |
|||
<label class="form-label">执业证号</label> |
|||
<input |
|||
v-model="form.certificateNumber" |
|||
class="form-input" |
|||
placeholder="执业证号" |
|||
readonly |
|||
/> |
|||
</div> |
|||
|
|||
<!-- 执业机构 --> |
|||
<div class="form-item"> |
|||
<label class="form-label">执业机构</label> |
|||
<input |
|||
v-model="form.firmName" |
|||
class="form-input" |
|||
placeholder="执业机构名称" |
|||
readonly |
|||
/> |
|||
</div> |
|||
|
|||
<!-- 职务 --> |
|||
<div class="form-item"> |
|||
<label class="form-label">职务</label> |
|||
<template v-if="readonlyMode"> |
|||
<input |
|||
v-model="form.positionName" |
|||
class="form-input" |
|||
placeholder="职务" |
|||
readonly |
|||
/> |
|||
</template> |
|||
<template v-else> |
|||
<select |
|||
v-model="form.positionId" |
|||
class="form-select" |
|||
:disabled="readonlyMode" |
|||
> |
|||
<option value="">请选择职务</option> |
|||
<option |
|||
v-for="position in positionList" |
|||
:key="position.positionId" |
|||
:value="position.positionId" |
|||
> |
|||
{{ position.positionName }} |
|||
</option> |
|||
</select> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 服务信息 --> |
|||
<div class="form-section"> |
|||
<div class="section-title">二、服务信息</div> |
|||
|
|||
<!-- 服务开始时间 --> |
|||
<div class="form-item"> |
|||
<label class="form-label">服务开始时间</label> |
|||
<input |
|||
v-model="form.serviceStart" |
|||
class="form-input" |
|||
placeholder="服务开始时间" |
|||
:readonly="readonlyMode" |
|||
/> |
|||
</div> |
|||
|
|||
<!-- 服务结束时间 --> |
|||
<div class="form-item"> |
|||
<label class="form-label">服务结束时间</label> |
|||
<input |
|||
v-model="form.serviceEnd" |
|||
class="form-input" |
|||
placeholder="服务结束时间" |
|||
:readonly="readonlyMode" |
|||
/> |
|||
</div> |
|||
|
|||
<!-- 服务时长 --> |
|||
<div class="form-item"> |
|||
<label class="form-label">服务时长（小时）</label> |
|||
<input |
|||
v-model="form.serviceDuration" |
|||
class="form-input" |
|||
placeholder="服务时长（小时）" |
|||
:readonly="readonlyMode" |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 活动信息 --> |
|||
<div class="form-section"> |
|||
<div class="section-title">三、活动信息</div> |
|||
|
|||
<!-- 活动类型 --> |
|||
<div class="form-item"> |
|||
<label class="form-label">活动类型</label> |
|||
<template v-if="readonlyMode"> |
|||
<input |
|||
v-model="form.activityCategoryName" |
|||
class="form-input" |
|||
placeholder="活动类型" |
|||
readonly |
|||
/> |
|||
</template> |
|||
<template v-else> |
|||
<select |
|||
v-model="form.activityCategoryId" |
|||
class="form-select" |
|||
@change="onActivityCategoryChange" |
|||
> |
|||
<option value="">请选择活动类型</option> |
|||
<option |
|||
v-for="category in activityCategoryList" |
|||
:key="category.categoryId" |
|||
:value="category.categoryId" |
|||
> |
|||
{{ category.categoryName }} |
|||
</option> |
|||
</select> |
|||
</template> |
|||
</div> |
|||
|
|||
<!-- 活动名称 --> |
|||
<div class="form-item"> |
|||
<label class="form-label">活动名称</label> |
|||
<template v-if="readonlyMode"> |
|||
<input |
|||
v-model="form.activityName" |
|||
class="form-input" |
|||
placeholder="活动名称" |
|||
readonly |
|||
/> |
|||
</template> |
|||
<template v-else> |
|||
<select |
|||
v-model="form.activityNameId" |
|||
class="form-select" |
|||
:disabled="!form.activityCategoryId" |
|||
> |
|||
<option value="">请选择活动名称</option> |
|||
<option |
|||
v-for="activity in activityList" |
|||
:key="activity.goodsId" |
|||
:value="activity.goodsId" |
|||
> |
|||
{{ activity.goodsName }} |
|||
</option> |
|||
</select> |
|||
</template> |
|||
</div> |
|||
|
|||
<!-- 参加人数（受益人数） --> |
|||
<div class="form-item"> |
|||
<label class="form-label">参加人数（受益人数）</label> |
|||
<input |
|||
v-model="form.beneficiaryCount" |
|||
class="form-input" |
|||
placeholder="参加人数（受益人数）" |
|||
:readonly="readonlyMode" |
|||
/> |
|||
</div> |
|||
|
|||
<!-- 组织单位名称 --> |
|||
<div class="form-item"> |
|||
<label class="form-label">组织单位名称</label> |
|||
<input |
|||
v-model="form.organizerName" |
|||
class="form-input" |
|||
placeholder="组织单位名称" |
|||
:readonly="readonlyMode" |
|||
/> |
|||
</div> |
|||
|
|||
<!-- 服务对象负责人/联系人姓名 --> |
|||
<div class="form-item"> |
|||
<label class="form-label">服务对象负责人/联系人姓名</label> |
|||
<input |
|||
v-model="form.organizerContact" |
|||
class="form-input" |
|||
placeholder="服务对象负责人/联系人姓名" |
|||
:readonly="readonlyMode" |
|||
/> |
|||
</div> |
|||
|
|||
<!-- 联系方式 --> |
|||
<div class="form-item"> |
|||
<label class="form-label">联系方式</label> |
|||
<input |
|||
v-model="form.organizerPhone" |
|||
class="form-input" |
|||
placeholder="联系方式" |
|||
:readonly="readonlyMode" |
|||
/> |
|||
</div> |
|||
|
|||
<!-- 服务内容 --> |
|||
<div class="form-item"> |
|||
<label class="form-label">服务内容描述</label> |
|||
<template v-if="readonlyMode"> |
|||
<div class="service-content-display"> |
|||
{{ stripHtmlTags(form.serviceContent) || '无' }} |
|||
</div> |
|||
</template> |
|||
<template v-else> |
|||
<textarea |
|||
v-model="form.serviceContent" |
|||
class="form-textarea" |
|||
placeholder="服务内容描述" |
|||
rows="3" |
|||
></textarea> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 证明材料 --> |
|||
<div class="form-section"> |
|||
<div class="section-title">四、证明材料</div> |
|||
|
|||
<!-- 文件列表 --> |
|||
<div class="form-item"> |
|||
<label class="form-label">证明材料</label> |
|||
<div class="file-list" v-if="uploadedFiles.length > 0"> |
|||
<div |
|||
v-for="file in uploadedFiles" |
|||
:key="file.id" |
|||
class="file-item" |
|||
> |
|||
<span class="file-name">{{ file.name || file.fileName || '未命名文件' }}</span> |
|||
</div> |
|||
</div> |
|||
<div v-else-if="form.attachmentIds && form.attachmentIds.trim()"> |
|||
<div class="form-tip">证明材料已上传，但文件列表为空</div> |
|||
</div> |
|||
<div v-else> |
|||
<div class="form-tip">暂无证明材料</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 审核信息 --> |
|||
<div class="form-section"> |
|||
<div class="section-title">五、审核信息</div> |
|||
|
|||
<!-- 审核状态 --> |
|||
<div class="form-item"> |
|||
<div class="status-display" :class="getStatusClass(form.firmAuditStatus)"> |
|||
{{ getStatusText(form.firmAuditStatus) }} |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 审核意见 --> |
|||
<div class="form-item" v-if="form.auditRemark"> |
|||
<label class="form-label">审核意见</label> |
|||
<textarea |
|||
v-model="form.auditRemark" |
|||
class="form-textarea" |
|||
placeholder="审核意见" |
|||
rows="3" |
|||
readonly |
|||
></textarea> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 操作按钮 --> |
|||
<div class="action-buttons"> |
|||
<button class="btn btn-secondary" @click="handleBack"> |
|||
返回 |
|||
</button> |
|||
<template v-if="!readonlyMode"> |
|||
<button class="btn btn-secondary" @click="handleSave" :disabled="loading"> |
|||
保存草稿 |
|||
</button> |
|||
<button class="btn btn-primary" @click="handleSubmit" :disabled="loading"> |
|||
提交申报 |
|||
</button> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, reactive, onMounted } from 'vue' |
|||
import { useRouter, useRoute } from 'vue-router' |
|||
import { serviceApplicationsApi } from '/@/api/business/service-applications/service-applications-api' |
|||
import { message } from 'ant-design-vue' |
|||
import { loginApi } from '/@/api/system/login-api' |
|||
import { positionApi } from '/@/api/system/position-api' |
|||
import { categoryApi } from '/@/api/business/category/category-api' |
|||
import { goodsApi } from '/@/api/business/goods/goods-api' |
|||
import { fileApi } from '/@/api/support/file-api' |
|||
import { FILE_FOLDER_TYPE_ENUM } from '/@/constants/support/file-const' |
|||
|
|||
const router = useRouter() |
|||
const route = useRoute() |
|||
const loading = ref(false) |
|||
const readonlyMode = ref(true) // 默认只读模式 |
|||
|
|||
// 表单数据 |
|||
const form = reactive({ |
|||
applicationId: undefined, //申报ID |
|||
userId: undefined, //申报律师ID |
|||
actualName: '', //员工姓名 |
|||
certificateNumber: '', //执业证号 |
|||
firmId: undefined, //执业机构ID |
|||
firmName: '', //部门名称 |
|||
positionId: '', //职务ID |
|||
positionName: '', //职务名称 |
|||
serviceStart: '', //服务开始时间 |
|||
serviceEnd: '', //服务结束时间 |
|||
serviceDuration: null, //服务时长（小时） |
|||
activityCategoryId: '', //活动类型ID |
|||
activityNameId: '', //活动名称ID |
|||
activityName: '', //活动名称 |
|||
beneficiaryCount: null, //参加人数（受益人数） |
|||
organizerName: '', //组织单位名称 |
|||
organizerContact: '', //负责人姓名 |
|||
organizerPhone: '', //联系方式 |
|||
serviceContent: '', //服务内容描述 |
|||
proofMaterials: [], //证明材料 |
|||
attachmentIds: undefined, //附件ID列表 |
|||
status: undefined, //申报状态 |
|||
firmAuditStatus: null, //执业机构审核状态 |
|||
auditRemark: '' //审核备注 |
|||
}) |
|||
|
|||
// 下拉选项数据 |
|||
const positionList = ref([]) |
|||
const activityCategoryList = ref([]) |
|||
const activityList = ref([]) |
|||
const uploadedFiles = ref([]) |
|||
|
|||
// 获取申报详情 |
|||
async function getDetail() { |
|||
const applicationId = route.query.applicationId |
|||
if (!applicationId) { |
|||
message.error('申报ID不存在') |
|||
router.back() |
|||
return |
|||
} |
|||
|
|||
loading.value = true |
|||
try { |
|||
const res = await serviceApplicationsApi.queryDetail(applicationId) |
|||
if (res.code === 0) { |
|||
Object.assign(form, res.data) |
|||
|
|||
// 根据申报状态设置编辑模式 |
|||
// status=0：草稿状态，可以编辑 |
|||
// status>=1：已提交状态，只能查看 |
|||
readonlyMode.value = form.status !== 0 |
|||
|
|||
// 如果是草稿状态，获取下拉选项数据 |
|||
if (!readonlyMode.value) { |
|||
await getSelectOptions() |
|||
} |
|||
|
|||
// 5. 如果有附件ID，则加载文件列表（与PC端逻辑一致） |
|||
if (form.attachmentIds && form.attachmentIds.trim()) { |
|||
await getFileListByAttachmentIds(form.attachmentIds) |
|||
} |
|||
|
|||
console.log('详情数据加载完成:', form) |
|||
console.log('附件ID:', form.attachmentIds) |
|||
console.log('文件列表:', uploadedFiles.value) |
|||
} else { |
|||
message.error(res.msg || '获取详情失败') |
|||
} |
|||
} catch (error) { |
|||
console.error('获取详情失败:', error) |
|||
message.error('网络错误，请稍后重试') |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} |
|||
|
|||
// 根据attachmentIds获取文件列表 |
|||
async function getFileListByAttachmentIds(attachmentIds) { |
|||
try { |
|||
if (!attachmentIds || !attachmentIds.trim()) { |
|||
uploadedFiles.value = [] |
|||
console.log('attachmentIds为空，清空文件列表') |
|||
return |
|||
} |
|||
|
|||
console.log('开始获取文件列表，attachmentIds:', attachmentIds) |
|||
|
|||
// 直接传递attachmentIds字符串，后端接口接收字符串参数 |
|||
const result = await fileApi.getFileList(attachmentIds) |
|||
console.log('文件列表API返回结果:', result) |
|||
|
|||
if (result && result.code === 0 && result.data && result.data.length > 0) { |
|||
// 将文件信息转换为移动端需要的格式 |
|||
uploadedFiles.value = result.data.map(file => ({ |
|||
id: file.id, |
|||
name: file.fileName || file.name || '未命名文件', |
|||
fileName: file.fileName || file.name || '未命名文件', |
|||
fileUrl: file.fileUrl, |
|||
fileSize: file.fileSize, |
|||
uploadTime: file.uploadTime |
|||
})) |
|||
|
|||
console.log('文件列表加载成功，文件数量:', uploadedFiles.value.length) |
|||
console.log('文件详情:', uploadedFiles.value) |
|||
} else { |
|||
uploadedFiles.value = [] |
|||
console.log('文件列表为空或获取失败，result:', result) |
|||
} |
|||
} catch (error) { |
|||
console.error('获取文件列表失败:', error) |
|||
uploadedFiles.value = [] |
|||
message.error('获取文件列表失败') |
|||
} |
|||
} |
|||
|
|||
// 获取下拉选项数据 |
|||
async function getSelectOptions() { |
|||
try { |
|||
// 获取职务列表 |
|||
const positionRes = await positionApi.queryList() |
|||
positionList.value = positionRes.data || [] |
|||
|
|||
// 获取活动类型列表 |
|||
const categoryRes = await categoryApi.queryCategoryTree({ |
|||
categoryType: 1 // 商品分类 |
|||
}) |
|||
activityCategoryList.value = categoryRes.data || [] |
|||
} catch (error) { |
|||
console.error('获取选项数据失败:', error) |
|||
} |
|||
} |
|||
|
|||
// 活动类型改变事件 |
|||
async function onActivityCategoryChange() { |
|||
if (form.activityCategoryId) { |
|||
try { |
|||
const activityRes = await goodsApi.queryGoodsList({ |
|||
categoryId: form.activityCategoryId, |
|||
shelvesFlag: true, |
|||
pageNum: 1, |
|||
pageSize: 100 |
|||
}) |
|||
activityList.value = activityRes.data?.list || [] |
|||
} catch (error) { |
|||
console.error('获取活动列表失败:', error) |
|||
activityList.value = [] |
|||
} |
|||
} else { |
|||
activityList.value = [] |
|||
} |
|||
form.activityNameId = '' |
|||
} |
|||
|
|||
// 返回 |
|||
function handleBack() { |
|||
router.back() |
|||
} |
|||
|
|||
// 保存草稿 |
|||
async function handleSave() { |
|||
if (readonlyMode.value) return |
|||
|
|||
loading.value = true |
|||
try { |
|||
const submitData = { |
|||
...form, |
|||
status: 0 // 草稿状态 |
|||
} |
|||
|
|||
const res = await serviceApplicationsApi.update(submitData) |
|||
|
|||
if (res.code === 0) { |
|||
message.success('保存成功') |
|||
router.push('/mobile/service') |
|||
} else { |
|||
message.error(res.msg || '保存失败') |
|||
} |
|||
} catch (error) { |
|||
console.error('保存失败:', error) |
|||
message.error('保存失败，请稍后重试') |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} |
|||
|
|||
// 提交申报 |
|||
async function handleSubmit() { |
|||
if (readonlyMode.value) return |
|||
|
|||
// 表单验证 |
|||
if (!form.positionId) { |
|||
message.error('请选择职务') |
|||
return |
|||
} |
|||
|
|||
if (!form.serviceStart) { |
|||
message.error('请选择服务开始时间') |
|||
return |
|||
} |
|||
|
|||
if (!form.serviceEnd) { |
|||
message.error('请选择服务结束时间') |
|||
return |
|||
} |
|||
|
|||
if (!form.activityCategoryId) { |
|||
message.error('请选择活动类型') |
|||
return |
|||
} |
|||
|
|||
if (!form.activityNameId) { |
|||
message.error('请选择活动名称') |
|||
return |
|||
} |
|||
|
|||
if (!form.serviceContent) { |
|||
message.error('请输入服务内容描述') |
|||
return |
|||
} |
|||
|
|||
loading.value = true |
|||
|
|||
try { |
|||
const submitData = { |
|||
...form, |
|||
status: 1 // 提交状态 |
|||
} |
|||
|
|||
const res = await serviceApplicationsApi.submit(form.applicationId) |
|||
|
|||
if (res.code === 0) { |
|||
message.success('申报提交成功') |
|||
setTimeout(() => { |
|||
router.push('/mobile/service') |
|||
}, 1000) |
|||
} else { |
|||
message.error(res.msg || '提交失败') |
|||
} |
|||
} catch (error) { |
|||
console.error('提交失败:', error) |
|||
message.error(error.message || '提交失败，请稍后重试') |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} |
|||
|
|||
// 状态文本映射 |
|||
function getStatusText(status) { |
|||
const statusMap = { |
|||
0: '未提交', |
|||
1: '待审核', |
|||
2: '审核中', |
|||
3: '已通过', |
|||
4: '驳回' |
|||
} |
|||
return statusMap[status] || '未知状态' |
|||
} |
|||
|
|||
// 状态样式类 |
|||
function getStatusClass(status) { |
|||
const classMap = { |
|||
0: 'status-pending', |
|||
1: 'status-approved', |
|||
2: 'status-rejected', |
|||
3: 'status-completed', |
|||
4: 'status-draft' |
|||
} |
|||
return classMap[status] || 'status-unknown' |
|||
} |
|||
|
|||
// HTML标签过滤函数 |
|||
function stripHtmlTags(html) { |
|||
if (!html) return '' |
|||
// 移除HTML标签，保留纯文本 |
|||
return html.replace(/<[^>]*>/g, '').trim() |
|||
} |
|||
|
|||
onMounted(() => { |
|||
getDetail() |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.mobile-detail-page { |
|||
min-height: 100vh; |
|||
background-color: #f5f5f5; |
|||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; |
|||
} |
|||
|
|||
/* 头部导航 */ |
|||
.page-header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
height: 44px; |
|||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%); |
|||
color: white; |
|||
padding: 0 16px; |
|||
position: sticky; |
|||
top: 0; |
|||
z-index: 100; |
|||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.back-btn { |
|||
background: none; |
|||
border: none; |
|||
color: white; |
|||
font-size: 20px; |
|||
padding: 8px; |
|||
border-radius: 50%; |
|||
transition: background-color 0.3s; |
|||
} |
|||
|
|||
.back-btn:active { |
|||
background-color: rgba(255, 255, 255, 0.2); |
|||
} |
|||
|
|||
.header-title { |
|||
font-size: 17px; |
|||
font-weight: 600; |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
|
|||
/* 表单内容 */ |
|||
.form-content { |
|||
padding: 16px; |
|||
padding-bottom: 80px; |
|||
} |
|||
|
|||
.form-section { |
|||
background: white; |
|||
border-radius: 12px; |
|||
padding: 16px; |
|||
margin-bottom: 16px; |
|||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); |
|||
border: 1px solid #e8e8e8; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
color: #1890ff; |
|||
margin-bottom: 16px; |
|||
padding-bottom: 8px; |
|||
border-bottom: 2px solid #e8f4ff; |
|||
position: relative; |
|||
} |
|||
|
|||
.section-title::before { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: -2px; |
|||
width: 60px; |
|||
height: 2px; |
|||
background: #1890ff; |
|||
border-radius: 1px; |
|||
} |
|||
|
|||
.form-item { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.form-label { |
|||
display: block; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
color: #333; |
|||
margin-bottom: 6px; |
|||
line-height: 1.4; |
|||
} |
|||
|
|||
.form-input, .form-textarea { |
|||
width: 100%; |
|||
padding: 12px; |
|||
border: 1px solid #d9d9d9; |
|||
border-radius: 8px; |
|||
font-size: 14px; |
|||
background: #f5f5f5; |
|||
color: #666; |
|||
transition: all 0.3s; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.form-textarea { |
|||
resize: vertical; |
|||
min-height: 80px; |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
/* 状态显示 */ |
|||
.status-display { |
|||
padding: 8px 12px; |
|||
border-radius: 6px; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
text-align: center; |
|||
} |
|||
|
|||
.status-pending { |
|||
background: #fff7e6; |
|||
color: #fa8c16; |
|||
border: 1px solid #ffd591; |
|||
} |
|||
|
|||
.status-approved { |
|||
background: #f6ffed; |
|||
color: #52c41a; |
|||
border: 1px solid #b7eb8f; |
|||
} |
|||
|
|||
.status-rejected { |
|||
background: #fff2f0; |
|||
color: #ff4d4f; |
|||
border: 1px solid #ffccc7; |
|||
} |
|||
|
|||
.status-completed { |
|||
background: #e6f7ff; |
|||
color: #1890ff; |
|||
border: 1px solid #91d5ff; |
|||
} |
|||
|
|||
.status-draft { |
|||
background: #f5f5f5; |
|||
color: #666; |
|||
border: 1px solid #d9d9d9; |
|||
} |
|||
|
|||
/* 操作按钮 */ |
|||
.action-buttons { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background: white; |
|||
padding: 12px 16px; |
|||
border-top: 1px solid #e8e8e8; |
|||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.btn { |
|||
width: 100%; |
|||
padding: 12px 16px; |
|||
border: none; |
|||
border-radius: 8px; |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
cursor: pointer; |
|||
transition: all 0.3s; |
|||
text-align: center; |
|||
} |
|||
|
|||
.btn-primary { |
|||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%); |
|||
color: white; |
|||
} |
|||
|
|||
.btn-primary:hover { |
|||
transform: translateY(-1px); |
|||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4); |
|||
} |
|||
|
|||
/* 响应式调整 */ |
|||
@media (max-width: 375px) { |
|||
.form-content { |
|||
padding: 12px; |
|||
padding-bottom: 80px; |
|||
} |
|||
|
|||
.form-section { |
|||
padding: 12px; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue