郭庆泰
cf5790229a
主要改动: - SQL: biz_support_unit → biz_org, 加 org_type, 加 business_nature; 删 biz_execution_unit, biz_service_org - SQL: biz_project.support_unit_id/name + service_org_id/name → org_id/name/type - SQL: biz_meeting.support_unit_name → org_name - SQL: biz_person.work_unit → org_id (FK) - 后端: 新 BizOrg entity/mapper/service/controller - 后端: BizProject/BizMeeting 字段重命名 - 后端: 删 12 个 BizSupportUnit/BizExecutionUnit/BizServiceOrg Java 文件 - 后端: BizPersonImportVO.workUnit → orgName (导入时查 biz_org 取 org_id) - 后端: BizAuthController.registerExecutor 完整实现 (原 registerSupplier stub) - 前端: 新 admin/Orgs.vue + manager/Orgs.vue (原 SupportUnits) - 前端: RegisterExecutor.vue (原 RegisterSupplier, 单页 2 步) - 前端: sponsor/executor/manager 多个文件 workUnit → orgId/orgName 重命名 - 前端: 统一 supplier → executor, 业务命名 sponsor(赞助方) / executor(执行方=供应商) - 前端: 全工程 execution → executor (company type / role / person unit_type)
1212 lines
32 KiB
Vue
1212 lines
32 KiB
Vue
<template>
|
|
<div class="detail-page">
|
|
<header class="top-nav" :class="topNavClass">
|
|
<a class="logo" title="返回首页" @click.prevent="goHome">
|
|
<div class="logo-icon">医</div>
|
|
<div class="logo-text">
|
|
<span class="logo-title">北京整合医学学会</span>
|
|
<span class="logo-subtitle">Beijing Association of Holistic Integrative Medicine</span>
|
|
</div>
|
|
</a>
|
|
<ul class="nav-list">
|
|
<li class="nav-item"><a class="nav-link" @click.prevent="goHome">年度项目规划</a></li>
|
|
<li class="nav-item"><a class="nav-link active" @click.prevent="goPublicity">项目公示</a></li>
|
|
</ul>
|
|
<div class="top-tools">
|
|
<template v-if="!loggedIn">
|
|
<span class="login-btn" @click="goLogin">登录</span>
|
|
</template>
|
|
<template v-else>
|
|
<el-dropdown trigger="click" @command="onUserCmd">
|
|
<a class="user-link" @click.prevent>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="12" cy="7" r="4"/>
|
|
</svg>
|
|
<span>{{ userName }}</span>
|
|
</a>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item command="account">我的主页</el-dropdown-item>
|
|
<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</template>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<a class="back-link" @click.prevent="goPublicity">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="15 18 9 12 15 6"/>
|
|
</svg>
|
|
返回项目公示
|
|
</a>
|
|
|
|
<div class="detail-layout">
|
|
<!-- 左: 项目名 + 公告 tabs -->
|
|
<aside class="detail-side">
|
|
<ul class="ann-menu">
|
|
<li
|
|
v-for="t in tabList"
|
|
:key="t.key"
|
|
:class="['ann-menu-item', { active: activeTab === t.key, skeleton: t._skeleton }]"
|
|
@click="!t._skeleton && (activeTab = t.key)"
|
|
>
|
|
<i v-if="!t._skeleton" class="dot"></i>
|
|
<span v-if="!t._skeleton">{{ t.label }}</span>
|
|
<span v-else class="skeleton-bar" :style="{ width: 60 + (t.key.length * 4) + 'px' }"></span>
|
|
</li>
|
|
<li v-if="!loading && !tabList.filter(t=>!t._skeleton).length" class="ann-menu-empty">暂无公告文件</li>
|
|
</ul>
|
|
</aside>
|
|
|
|
<!-- 中: 内容预览 -->
|
|
<main class="detail-main">
|
|
<div v-if="loading && !currentTab?.fileUrl" class="main-skeleton">
|
|
<div class="skeleton-bar skeleton-title"></div>
|
|
<div class="skeleton-bar skeleton-text"></div>
|
|
<div class="skeleton-bar skeleton-text short"></div>
|
|
<div class="skeleton-loading-tip">公示信息加载中...</div>
|
|
</div>
|
|
<div v-else class="main-content">
|
|
<iframe v-if="isPdf(currentTab?.fileUrl)"
|
|
:src="proxyUrl(currentTab.fileUrl)"
|
|
class="content-frame"
|
|
style="width: 100%; height: 700px; border: 0;"
|
|
frameborder="0"></iframe>
|
|
<img v-else-if="isImg(currentTab?.fileUrl)"
|
|
:src="proxyUrl(currentTab.fileUrl)"
|
|
class="content-img"
|
|
style="width: 100%; display: block;"
|
|
alt="公告图片" />
|
|
<div v-else class="content-empty">
|
|
<el-icon size="64"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/></svg></el-icon>
|
|
<p>该公告暂无文件</p>
|
|
<p class="hint">公示信息将以文字说明形式展示</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- 右: 操作按钮 - 悬浮固定到页面最右 -->
|
|
<aside class="detail-actions">
|
|
<button class="action-btn primary signup-btn" :disabled="signing || signed" @click="onSignup">
|
|
<svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor" width="14" height="14">
|
|
<path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13z"/>
|
|
</svg>
|
|
<span>{{ signed ? '已报名' : (signing ? '报名中…' : '立即报名') }}</span>
|
|
</button>
|
|
<button class="action-btn primary share-btn" @click="showQr = true">
|
|
<svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor" width="14" height="14">
|
|
<path d="M3 11h8V3H3v8zm2-6h4v4H5V5zm8-2v8h8V3h-8zm6 6h-4V5h4v4zM3 21h8v-8H3v8zm2-6h4v4H5v-4z"/>
|
|
</svg>
|
|
<span>分享二维码</span>
|
|
</button>
|
|
</aside>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-main">
|
|
<div class="footer-brand">
|
|
<div class="brand-row">
|
|
<div class="footer-logo-icon">医</div>
|
|
<div>
|
|
<div class="footer-brand-name">北京整合医学学会</div>
|
|
<div class="footer-brand-en">Beijing Association of Holistic Integrative Medicine</div>
|
|
</div>
|
|
</div>
|
|
<p class="footer-desc">依托"健康中国2030"战略,整合医学资源,推动健康科普与公益事业,助力全民健康素养提升,共建共享健康中国。</p>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>快速导航</h4>
|
|
<a @click.prevent="goHome">首页</a>
|
|
<a @click.prevent="goHome">年度项目规划</a>
|
|
<a @click.prevent="goPublicity">项目公示</a>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>学会项目</h4>
|
|
<a>百姓巡常行</a>
|
|
<a>专病联盟暨全国专家智库</a>
|
|
<a>乡村幸福安康</a>
|
|
<a>临床科研资助计划</a>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>联系方式</h4>
|
|
<p>电话: 010-82089470</p>
|
|
<p>邮箱: contactus@bahim.org.cn</p>
|
|
<p>地址: 北京市海淀区知春路1号学院国际大厦908-2室</p>
|
|
<p>邮编: 100083</p>
|
|
</div>
|
|
<div class="footer-qr">
|
|
<div class="qr-image">
|
|
<svg width="52" height="52" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M3 11h8V3H3v8zm2-6h4v4H5V5zm8-2v8h8V3h-8zm6 6h-4V5h4v4zM3 21h8v-8H3v8zm2-6h4v4H5v-4zm13-2h-2v2h2v-2zm-2 2h-2v2h2v-2zm2 2h-2v2h2v-2zm2-2h-2v2h2v-2zm-2-2h-2v2h2v-2zm-2-2h-2v2h2v-2zm-2-2h-2v2h2v-2zm-2-2h-2v2h2v-2zm0 0h-2v2h2v-2z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="qr-label">公众号二维码</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<span>© 北京整合医学学会 BAHIM</span>
|
|
<span>京ICP备2020035479号-1 京公网安备11010802034820</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- 分享二维码弹窗 -->
|
|
<div class="modal-overlay" :class="showQr ? 'active' : ''" @click.self="showQr = false">
|
|
<div class="modal" @click.stop>
|
|
<h3 class="modal-title">分享本页</h3>
|
|
<div class="modal-qr-wrap">
|
|
<span class="qr-corner qr-corner-tl"></span>
|
|
<span class="qr-corner qr-corner-tr"></span>
|
|
<span class="qr-corner qr-corner-bl"></span>
|
|
<span class="qr-corner qr-corner-br"></span>
|
|
<div class="modal-qr">
|
|
<img v-if="qrUrl" :src="qrUrl" alt="分享二维码" class="qr-img" />
|
|
<span v-else class="qr-loading">
|
|
<span class="qr-dot"></span><span class="qr-dot"></span><span class="qr-dot"></span>
|
|
生成中...
|
|
</span>
|
|
</div>
|
|
<div class="qr-brand">北京整合医学学会</div>
|
|
</div>
|
|
<p class="modal-tip">扫码查看「{{ ann?.projectName || '项目公示' }}」公示详情</p>
|
|
<button class="modal-close" @click="showQr = false">关 闭</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { ElMessage } from 'element-plus'
|
|
import { useUserStore } from '@/store/user'
|
|
import { logout as logoutApi } from '@/api/auth'
|
|
import request from '@/utils/request'
|
|
import QRCode from 'qrcode'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const userStore = useUserStore()
|
|
|
|
const isScrolled = ref(false)
|
|
const topNavClass = computed(() => isScrolled.value ? 'is-scrolled' : '')
|
|
const loggedIn = computed(() => !!userStore.token)
|
|
const userName = computed(() => userStore.user?.userName || '用户')
|
|
|
|
const showQr = ref(false)
|
|
const qrUrl = ref('')
|
|
// 分享 URL: 当前页面地址 (window.location.href)
|
|
const shareUrl = computed(() => window.location.href)
|
|
|
|
// 打开二维码弹窗时生成二维码 (避免页面加载时就调 QRCode.toDataURL)
|
|
watch(showQr, async (v) => {
|
|
if (v && !qrUrl.value) {
|
|
try {
|
|
qrUrl.value = await QRCode.toDataURL(shareUrl.value, {
|
|
width: 260,
|
|
margin: 2,
|
|
// 深色用品牌主色 (#1890ff), 让二维码更精致
|
|
color: { dark: '#1f2937', light: '#ffffff' },
|
|
errorCorrectionLevel: 'H'
|
|
})
|
|
} catch (e) {
|
|
console.error('二维码生成失败', e)
|
|
}
|
|
}
|
|
})
|
|
|
|
// 公示详情核心数据
|
|
const ann = ref(null)
|
|
const activeTab = ref('invitation')
|
|
|
|
// 按 URL 字段定义 4 个固定 tab (key 必须与 biz_project 字段名后缀一致)
|
|
const TAB_DEFS = [
|
|
{ key: 'invitation', label: '邀请函', urlKey: 'invitationUrl' },
|
|
{ key: 'supportLetter', label: '支持函', urlKey: 'supportLetterUrl' },
|
|
{ key: 'notice', label: '通知', urlKey: 'noticeUrl' },
|
|
{ key: 'schedule', label: '日程', urlKey: 'scheduleUrl' }
|
|
]
|
|
|
|
// 只显示项目里"实际有文件 URL"的 tab
|
|
// 加载中时显示 4 个骨架 tab (灰色块) 让左侧菜单先出现
|
|
const tabList = computed(() => {
|
|
const p = ann.value
|
|
if (!p) return []
|
|
if (p._skeleton) {
|
|
// 加载中: 返回 4 个骨架 tab, 高度/样式与真实 tab 一致
|
|
return TAB_DEFS.map(t => ({ ...t, _skeleton: true, fileUrl: null }))
|
|
}
|
|
return TAB_DEFS.filter(t => p[t.urlKey]).map(t => ({
|
|
...t,
|
|
fileUrl: p[t.urlKey]
|
|
}))
|
|
})
|
|
|
|
const currentTab = computed(() => tabList.value.find(t => t.key === activeTab.value) || tabList.value[0])
|
|
|
|
// 判断文件类型: 通过 URL 扩展名 (兼容 OSS 签名 URL)
|
|
function isPdf(url) {
|
|
if (!url) return false
|
|
// 去掉查询参数后看扩展名
|
|
const path = url.split('?')[0].toLowerCase()
|
|
return /\.pdf$/.test(path)
|
|
}
|
|
function isImg(url) {
|
|
if (!url) return false
|
|
const path = url.split('?')[0].toLowerCase()
|
|
return /\.(png|jpg|jpeg|gif|webp)$/.test(path)
|
|
}
|
|
// OSS bucket 设置了 Content-Disposition: attachment, iframe/embed 直接访问会被强制下载.
|
|
// 所有 OSS 文件 URL 走 /common/oss/proxy 后端代理 (重写为 inline)
|
|
// 必须加 /dev-api 前缀: Vite dev server proxy 只代理 /dev-api/* 到后端, 其他相对 URL 会 SPA fallback 到 index.html
|
|
// #toolbar=0 隐藏 Chrome PDF viewer 工具栏, #zoom=page-width 强制 PDF 撑满 iframe 宽度
|
|
function proxyUrl(url) {
|
|
if (!url) return url
|
|
if (url.includes('hwtossbamlorgcn.oss-cn-beijing.aliyuncs.com')) {
|
|
return '/dev-api/common/oss/proxy?url=' + encodeURIComponent(url) + '#toolbar=0&zoom=page-width'
|
|
}
|
|
return url
|
|
}
|
|
|
|
function onView() {
|
|
const url = proxyUrl(currentTab.value?.fileUrl)
|
|
if (!url) return ElMessage.warning('该公告暂无文件')
|
|
window.open(url, '_blank')
|
|
}
|
|
function onDownload() {
|
|
const url = currentTab.value?.fileUrl
|
|
if (!url) return ElMessage.warning('该公告暂无文件')
|
|
// 下载直接用 OSS 原始 URL (OSS bucket 自带 Content-Disposition: attachment)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = `${ann.value?.projectName || '公告'}_${currentTab.value.label}`
|
|
a.target = '_blank'
|
|
document.body.appendChild(a); a.click(); document.body.removeChild(a)
|
|
}
|
|
|
|
function fmt(d) {
|
|
if (!d) return ''
|
|
// 只显示年月日, 不显示时分秒
|
|
const date = new Date(d)
|
|
const y = date.getFullYear()
|
|
const m = String(date.getMonth() + 1).padStart(2, '0')
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|
return `${y}-${m}-${day}`
|
|
}
|
|
|
|
const loading = ref(false)
|
|
|
|
async function load() {
|
|
const projectId = route.params.projectId || route.params.annId
|
|
if (!projectId) return
|
|
loading.value = true
|
|
// 立即显示一个空骨架 (不要等接口)
|
|
ann.value = { _skeleton: true }
|
|
activeTab.value = null
|
|
signed.value = false
|
|
try {
|
|
const res = await request({ url: `/business/public/project/${projectId}`, method: 'get' })
|
|
const project = res.data?.data || res.data
|
|
ann.value = project
|
|
// 默认 tab: 取第一个有文件的 tab
|
|
const firstKey = TAB_DEFS.find(t => project?.[t.urlKey])?.key
|
|
if (firstKey) activeTab.value = firstKey
|
|
// 项目加载完, 同步查"是否已报名"
|
|
checkSigned()
|
|
} catch (e) {
|
|
console.error('[publicity-detail] load failed', e)
|
|
ann.value = null
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function goHome() { router.push('/') }
|
|
function goPublicity() { router.push('/publicity') }
|
|
function goLogin() { router.push('/login') }
|
|
function goUser() { /* placeholder */ }
|
|
async function goLogout() { try { await logoutApi() } catch {}; userStore.logout(); router.replace('/login') }
|
|
async function onUserCmd(cmd) {
|
|
if (cmd === 'logout') return goLogout()
|
|
if (cmd === 'account') {
|
|
const r = (userStore.user?.role || '')
|
|
const map = { admin: '/leader/home', leader: '/leader/home', manager: '/manager/workbench', doctor: '/doctor/home', executor: '/executor/meetings', sponsor: '/sponsor/home' }
|
|
router.push(map[r] || '/leader/home')
|
|
}
|
|
}
|
|
|
|
const signed = ref(false)
|
|
async function checkSigned() {
|
|
if (!loggedIn.value) return
|
|
const proj = ann.value || {}
|
|
const projectId = proj.projectId || proj.id
|
|
if (!projectId) return
|
|
try {
|
|
const res = await request.get('/business/executionIntent/hasSigned', { params: { projectId } })
|
|
signed.value = res?.data === true
|
|
} catch (e) { /* silent */ }
|
|
}
|
|
const signing = ref(false)
|
|
async function onSignup() {
|
|
if (!loggedIn.value) {
|
|
ElMessage.warning('请先登录系统')
|
|
router.push('/login')
|
|
return
|
|
}
|
|
if (signing.value || signed.value) return
|
|
const proj = ann.value || {}
|
|
const projectId = proj.projectId || proj.id
|
|
if (!projectId) {
|
|
ElMessage.warning('项目ID缺失,无法报名')
|
|
return
|
|
}
|
|
signing.value = true
|
|
try {
|
|
const res = await request({ url: '/business/executionIntent/signup', method: 'post', data: { params: { projectId } } })
|
|
if (res?.code === 200) {
|
|
signed.value = true
|
|
ElMessage.success('报名成功')
|
|
} else {
|
|
ElMessage.error(res?.msg || '报名失败,请稍后再试')
|
|
// 如果后端说"已报名",也灰显
|
|
if (typeof res?.msg === 'string' && res.msg.includes('已报名')) signed.value = true
|
|
}
|
|
} catch (e) {
|
|
console.error('[publicity-detail] signup failed', e)
|
|
ElMessage.error('报名失败,请稍后再试')
|
|
} finally {
|
|
signing.value = false
|
|
}
|
|
}
|
|
|
|
function onKeydown(e) { if (e.key === 'Escape') showQr.value = false }
|
|
function handleScroll() { isScrolled.value = window.scrollY > 10 }
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('scroll', handleScroll, { passive: true })
|
|
window.addEventListener('keydown', onKeydown)
|
|
load()
|
|
})
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('scroll', handleScroll)
|
|
window.removeEventListener('keydown', onKeydown)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.detail-layout {
|
|
display: grid;
|
|
/* 只有 左 + 中, 右 改悬浮 */
|
|
grid-template-columns: 220px 1fr;
|
|
gap: 20px;
|
|
background: transparent; /* 不要 card 包裹 */
|
|
padding: 24px 0; /* 去掉左右内边距让内容铺满 */
|
|
/* 给悬浮按钮留右边距,避免按钮遮住内容 */
|
|
padding-right: 80px;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.detail-side {
|
|
/* 没有 card 后, 左侧也不需要分隔线 */
|
|
border-right: none;
|
|
padding: 0;
|
|
min-height: 480px; /* 与主区一致, 让两侧等高 */
|
|
}
|
|
|
|
.detail-main { min-height: 480px; min-width: 0; align-self: stretch; }
|
|
.project-name-card {
|
|
background: #f7faff;
|
|
padding: 14px;
|
|
border-radius: 6px;
|
|
margin-bottom: 16px;
|
|
border-left: 3px solid var(--brand-primary, #1890ff);
|
|
}
|
|
.card-label { font-size: 12px; color: #909399; margin-bottom: 4px; }
|
|
.card-value { font-size: 15px; font-weight: 600; color: #1a1a1a; line-height: 1.4; }
|
|
.card-sub { font-size: 12px; color: #909399; margin-top: 6px; }
|
|
.ann-menu {
|
|
list-style: none;
|
|
margin: 0; padding: 0;
|
|
min-height: 360px;
|
|
}
|
|
.ann-menu-item {
|
|
display: flex; align-items: center; gap: 10px;
|
|
height: 44px; padding: 0 16px;
|
|
font-size: 14px; color: #606266;
|
|
cursor: pointer; border-radius: 4px;
|
|
margin-bottom: 4px;
|
|
transition: all 0.2s;
|
|
}
|
|
.ann-menu-item:hover { background: #f5f7fa; color: var(--brand-primary, #1890ff); }
|
|
.ann-menu-item.active { background: #e6f4ff; color: var(--brand-primary, #1890ff); font-weight: 600; }
|
|
.ann-menu-item .dot {
|
|
width: 6px; height: 6px; border-radius: 50%;
|
|
background: #dcdfe6;
|
|
}
|
|
.ann-menu-item.active .dot { background: var(--brand-primary, #1890ff); }
|
|
.ann-menu-empty { color: #c0c4cc; font-size: 13px; padding: 12px 16px; }
|
|
|
|
.detail-main { min-height: 480px; min-width: 0; }
|
|
.main-header h2 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
|
|
.main-header .muted { color: #909399; font-size: 13px; margin: 4px 0; }
|
|
.main-content {
|
|
margin-top: 0;
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: 400px;
|
|
/* 不要 card 包裹, 直接展示 */
|
|
border: none;
|
|
border-radius: 0;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
}
|
|
.content-frame { width: 100%; height: 700px; display: block; border: 0; min-width: 0; }
|
|
.content-img { width: 100%; max-width: 100%; display: block; margin: 0 auto; }
|
|
.content-empty {
|
|
padding: 80px 20px;
|
|
text-align: center;
|
|
color: #c0c4cc;
|
|
}
|
|
.content-empty p { margin: 8px 0 0; }
|
|
.content-empty .hint { font-size: 12px; }
|
|
|
|
/* ========== 骨架屏 (加载中) ========== */
|
|
.skeleton-bar {
|
|
display: block;
|
|
height: 14px;
|
|
background: linear-gradient(90deg, #f2f3f5 0%, #e6e8eb 50%, #f2f3f5 100%);
|
|
background-size: 200% 100%;
|
|
border-radius: 4px;
|
|
margin: 8px 0;
|
|
animation: skeleton-shimmer 1.4s ease-in-out infinite;
|
|
}
|
|
.skeleton-title { height: 18px; width: 30%; }
|
|
.skeleton-text { width: 90%; }
|
|
.skeleton-text.short { width: 60%; }
|
|
.ann-menu-item.skeleton { padding: 10px 16px; cursor: default; }
|
|
.ann-menu-item.skeleton .skeleton-bar { height: 12px; margin: 0; background: #f2f3f5; }
|
|
.main-skeleton {
|
|
margin-top: 16px;
|
|
padding: 24px 0;
|
|
border: none;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
min-height: 400px;
|
|
}
|
|
.skeleton-loading-tip {
|
|
margin-top: 24px;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
color: #9ca3af;
|
|
}
|
|
@keyframes skeleton-shimmer {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
|
|
/* 悬浮固定到页面右侧中部 - 不占 detail-main 空间 */
|
|
.detail-actions {
|
|
position: fixed;
|
|
right: 24px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 100;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
width: 132px;
|
|
}
|
|
.action-btn {
|
|
display: flex; align-items: center; justify-content: center; gap: 6px;
|
|
height: 38px; padding: 0 18px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
border: 1px solid transparent;
|
|
outline: none;
|
|
font-family: inherit;
|
|
white-space: nowrap;
|
|
transition: background .2s, border-color .2s, color .2s;
|
|
}
|
|
.action-btn .btn-icon { transition: none; }
|
|
.action-btn:active:not(:disabled) { transform: none; }
|
|
|
|
/* primary: 实色品牌主蓝 (与页面 filter-btn 同风格) */
|
|
.action-btn.primary {
|
|
background: var(--brand-primary, #1890ff);
|
|
color: #fff;
|
|
border-color: var(--brand-primary, #1890ff);
|
|
}
|
|
.action-btn.primary:hover:not(:disabled) {
|
|
background: var(--brand-primary-deep, #096dd9);
|
|
border-color: var(--brand-primary-deep, #096dd9);
|
|
}
|
|
|
|
/* 立即报名 / 分享二维码 都是同款 primary (沉稳商务风, 单色) */
|
|
.signup-btn, .share-btn { }
|
|
|
|
.action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
|
|
@media (max-width: 900px) {
|
|
.detail-layout { grid-template-columns: 1fr; padding-right: 24px; }
|
|
.detail-side { border: none; padding: 0; }
|
|
/* 移动端隐藏悬浮按钮, 改成底部固定按钮栏 */
|
|
.detail-actions {
|
|
position: fixed;
|
|
right: auto;
|
|
left: 0;
|
|
top: auto;
|
|
bottom: 0;
|
|
transform: none;
|
|
width: 100%;
|
|
flex-direction: row;
|
|
padding: 8px;
|
|
background: #fff;
|
|
border-top: 1px solid #ebeef5;
|
|
}
|
|
.action-btn { flex: 1; }
|
|
}
|
|
|
|
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
color: #1f2937;
|
|
background: #f5f6f8;
|
|
min-width: 1354px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
a { color: inherit; text-decoration: none; }
|
|
|
|
/* ========== 顶部导航 ========== */
|
|
.top-nav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
height: 72px;
|
|
padding: 0 60px;
|
|
background: var(--brand-primary);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
|
|
transition: box-shadow 0.3s;
|
|
}
|
|
|
|
.top-nav.is-scrolled {
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: #fff;
|
|
color: var(--brand-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.logo-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.logo-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.logo-subtitle {
|
|
font-size: 11px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
margin-top: 2px;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.nav-list {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 36px;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-item {
|
|
position: relative;
|
|
height: 72px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-link {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
cursor: pointer;
|
|
transition: color 0.25s;
|
|
position: relative;
|
|
height: 72px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-link::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
width: 0;
|
|
height: 2px;
|
|
background: #fff;
|
|
transform: translateX(-50%);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.nav-item:hover .nav-link,
|
|
.nav-link.active {
|
|
color: #fff;
|
|
}
|
|
|
|
.nav-item:hover .nav-link::after,
|
|
.nav-link.active::after {
|
|
width: 100%;
|
|
}
|
|
|
|
.top-tools {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.login-btn {
|
|
padding: 7px 20px;
|
|
background: #fff;
|
|
color: var(--brand-primary);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.login-btn:hover {
|
|
background: #f3f4f6;
|
|
}
|
|
|
|
/* ========== 主体 ========== */
|
|
.container {
|
|
max-width: 1354px;
|
|
margin: 0 auto;
|
|
padding: 0 60px 60px;
|
|
}
|
|
|
|
.back-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin: 28px 0 20px;
|
|
font-size: 13px;
|
|
color: #6b7280;
|
|
cursor: pointer;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.back-link:hover { color: var(--brand-primary); }
|
|
|
|
/* ========== 邀请函红头文件 ========== */
|
|
.letter {
|
|
background: #fff;
|
|
border: 1px solid #e5e7eb;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
|
padding: 64px 72px 48px;
|
|
font-family: "SimSun", "Songti SC", serif;
|
|
color: #1f2937;
|
|
position: relative;
|
|
}
|
|
|
|
/* 红头 */
|
|
.letter-head {
|
|
text-align: center;
|
|
color: #c00;
|
|
}
|
|
|
|
.letter-org {
|
|
font-size: 40px;
|
|
font-weight: 700;
|
|
letter-spacing: 14px;
|
|
margin-right: -14px;
|
|
font-family: "SimSun", "Songti SC", serif;
|
|
}
|
|
|
|
.letter-docno {
|
|
margin-top: 18px;
|
|
font-size: 15px;
|
|
color: #1f2937;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.letter-redline {
|
|
height: 2px;
|
|
background: #c00;
|
|
margin: 16px 0 34px;
|
|
}
|
|
|
|
/* 标题 */
|
|
.letter-title {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.letter-title h1 {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.letter-title h2 {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
letter-spacing: 12px;
|
|
margin-right: -12px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
/* 正文 */
|
|
.letter-body p {
|
|
font-size: 15px;
|
|
line-height: 2;
|
|
text-indent: 2em;
|
|
margin-bottom: 4px;
|
|
text-align: justify;
|
|
}
|
|
|
|
.letter-body .salutation {
|
|
text-indent: 0;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.letter-body .lead {
|
|
text-indent: 2em;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
/* 章节 */
|
|
.letter-section {
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.letter-section-title {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
line-height: 2;
|
|
}
|
|
|
|
.letter-section p {
|
|
font-size: 15px;
|
|
line-height: 2;
|
|
text-indent: 2em;
|
|
}
|
|
|
|
.letter-section p.no-indent {
|
|
text-indent: 0;
|
|
padding-left: 2em;
|
|
}
|
|
|
|
.letter-section a {
|
|
color: #c00;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* 日程表 */
|
|
.schedule-table {
|
|
width: 78%;
|
|
margin: 12px auto 4px;
|
|
border-collapse: collapse;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.schedule-table th,
|
|
.schedule-table td {
|
|
border: 1px solid #1f2937;
|
|
padding: 7px 12px;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.schedule-table th {
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* 落款 */
|
|
.letter-sign {
|
|
margin-top: 44px;
|
|
text-align: right;
|
|
position: relative;
|
|
padding-right: 40px;
|
|
}
|
|
|
|
.letter-sign .sign-org {
|
|
font-size: 16px;
|
|
line-height: 2;
|
|
}
|
|
|
|
.letter-sign .sign-date {
|
|
font-size: 16px;
|
|
line-height: 2;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
/* 公章 */
|
|
.seal {
|
|
position: absolute;
|
|
right: 24px;
|
|
top: -52px;
|
|
width: 150px;
|
|
height: 150px;
|
|
transform: rotate(-8deg);
|
|
pointer-events: none;
|
|
mix-blend-mode: multiply;
|
|
}
|
|
|
|
/* 底部红线 + 地址 */
|
|
.letter-foot {
|
|
margin-top: 56px;
|
|
}
|
|
|
|
.letter-foot .redline {
|
|
height: 1.5px;
|
|
background: #c00;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.letter-foot p {
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #4b5563;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* ========== 操作按钮 (右侧悬浮) ========== */
|
|
.action-bar {
|
|
position: fixed;
|
|
left: calc(50% + 697px); /* 紧贴版心右侧 (版心半宽677 + 20间距) */
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
z-index: 900;
|
|
}
|
|
|
|
.btn-primary {
|
|
padding: 12px 0;
|
|
width: 120px;
|
|
background: var(--brand-primary);
|
|
color: #fff;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
border: none;
|
|
cursor: pointer;
|
|
letter-spacing: 2px;
|
|
text-align: center;
|
|
box-shadow: 0 4px 14px rgba(30, 58, 138, 0.3);
|
|
transition: background 0.2s, transform 0.2s;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--brand-primary-deep);
|
|
transform: translateX(-3px);
|
|
}
|
|
|
|
.btn-primary.signed {
|
|
background: #9ca3af;
|
|
cursor: default;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn-secondary {
|
|
padding: 12px 0;
|
|
width: 120px;
|
|
background: #fff;
|
|
color: var(--brand-primary);
|
|
border: 1px solid var(--brand-primary);
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
letter-spacing: 2px;
|
|
text-align: center;
|
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #f0f4ff;
|
|
transform: translateX(-3px);
|
|
}
|
|
|
|
/* 窄屏时按钮贴右边缘,避免溢出 */
|
|
@media (max-width: 1660px) {
|
|
.action-bar {
|
|
left: auto;
|
|
right: 12px;
|
|
}
|
|
}
|
|
|
|
/* ========== 二维码弹窗 ========== */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2000;
|
|
}
|
|
|
|
.modal-overlay.active { display: flex; }
|
|
|
|
.modal {
|
|
background: #fff;
|
|
padding: 32px 36px;
|
|
width: 320px;
|
|
text-align: center;
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin-bottom: 20px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.modal-qr-wrap {
|
|
position: relative;
|
|
width: 220px;
|
|
margin: 0 auto 20px;
|
|
padding: 12px 12px 8px;
|
|
background: linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 16px rgba(24, 144, 255, 0.08), 0 1px 3px rgba(0,0,0,0.04);
|
|
}
|
|
.modal-qr {
|
|
width: 200px;
|
|
height: 200px;
|
|
margin: 0 auto;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #fff;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.qr-img { width: 200px; height: 200px; display: block; border-radius: 8px; }
|
|
.qr-loading {
|
|
font-size: 12px;
|
|
color: #9ca3af;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.qr-loading .qr-dot {
|
|
width: 4px;
|
|
height: 4px;
|
|
background: #9ca3af;
|
|
border-radius: 50%;
|
|
animation: qr-bounce 1.2s ease-in-out infinite;
|
|
}
|
|
.qr-loading .qr-dot:nth-child(2) { animation-delay: 0.15s; }
|
|
.qr-loading .qr-dot:nth-child(3) { animation-delay: 0.3s; }
|
|
@keyframes qr-bounce {
|
|
0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
|
|
40% { transform: translateY(-4px); opacity: 1; }
|
|
}
|
|
.qr-brand {
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: var(--brand-primary, #1890ff);
|
|
letter-spacing: 2px;
|
|
margin-top: 10px;
|
|
padding-top: 8px;
|
|
border-top: 1px dashed #e5e7eb;
|
|
font-weight: 500;
|
|
}
|
|
.qr-corner {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 14px;
|
|
border: 2px solid var(--brand-primary, #1890ff);
|
|
}
|
|
.qr-corner-tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 12px; }
|
|
.qr-corner-tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 12px; }
|
|
.qr-corner-bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 12px; }
|
|
.qr-corner-br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 12px; }
|
|
|
|
.modal-tip {
|
|
font-size: 12px;
|
|
color: #9ca3af;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.modal-close {
|
|
width: 100%;
|
|
height: 38px;
|
|
background: var(--brand-primary);
|
|
color: #fff;
|
|
border: none;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.modal-close:hover { background: var(--brand-primary-deep); }
|
|
|
|
/* ========== 底部 ========== */
|
|
.footer {
|
|
background: var(--brand-primary-darker);
|
|
color: rgba(255, 255, 255, 0.65);
|
|
padding: 48px 0 0;
|
|
}
|
|
|
|
.footer-main {
|
|
display: grid;
|
|
grid-template-columns: 1.4fr 1fr 1fr 1.2fr auto;
|
|
gap: 48px;
|
|
padding-bottom: 36px;
|
|
}
|
|
|
|
.footer-brand .brand-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.footer-logo-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: #fff;
|
|
color: var(--brand-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.footer-brand-name {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.footer-brand-en {
|
|
font-size: 10px;
|
|
color: rgba(255, 255, 255, 0.4);
|
|
letter-spacing: 0.5px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.footer-desc {
|
|
font-size: 13px;
|
|
line-height: 1.9;
|
|
color: rgba(255, 255, 255, 0.55);
|
|
}
|
|
|
|
.footer-col h4 {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 16px;
|
|
padding-bottom: 10px;
|
|
position: relative;
|
|
}
|
|
|
|
.footer-col h4::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 24px;
|
|
height: 2px;
|
|
background: #93c5fd;
|
|
}
|
|
|
|
.footer-col a,
|
|
.footer-col p {
|
|
display: block;
|
|
font-size: 13px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
line-height: 2.1;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.footer-col a { cursor: pointer; }
|
|
|
|
.footer-col a:hover { color: #fff; }
|
|
|
|
.footer-qr {
|
|
text-align: center;
|
|
}
|
|
|
|
.qr-image {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.qr-label {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.footer-bottom {
|
|
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
|
padding: 18px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
</style>
|