mayiming/hldrCenter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成基地页面

Browse Source
This commit is contained in:
马懿铭
2025-10-27 17:22:07 +08:00
parent 2f0b9b652c
commit 7e9c70fe6a
2 changed files with 667 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

412
web/src/views/BaseOverview.vue
View File

@@ -1,145 +1,284 @@
<template>
<div class="base-overview-container">
<!-- 页面标题区域 -->
<div class="page-header">
<h1 class="main-title">基地概况</h1>
<p class="english-title">Base Overview</p>
<!-- 顶部全屏封面图 -->
<div class="page-cover">
<img
:src="pageImageUrl || defaultCover"
alt="基地概况封面图"
class="cover-image"
@error="handleImageError"
>
<!-- 叠加的标题文字 -->
<div class="cover-title">
<h1 class="main-title">基地概况</h1>
<p class="english-title">BASE OVERVIEW</p>
</div>
</div>
<!-- 导航标签区域 -->
<el-tabs
v-model="activeTab"
class="content-tabs"
:border="false"
>
<el-tab-pane label="基地简介" name="introduction">
<div class="tab-content">
<div class="content-layout">
<div class="content-left">
<h2 class="section-title">基地简介</h2>
<p class="section-english">Base Introduction</p>
</div>
<div class="content-right">
<div class="text-content">
<p>探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。</p>
<p>探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。</p>
<p>探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。</p>
<!-- 内容容器 -->
<div class="content-wrapper">
<!-- 导航标签区域 -->
<el-tabs
v-model="activeTab"
class="content-tabs"
:border="false"
>
<el-tab-pane label="基地简介" name="introduction">
<div class="tab-content">
<div class="content-layout">
<div class="content-left">
<h2 class="section-title">基地简介</h2>
<p class="section-english">BASE INTRODUCTION</p>
</div>
<div class="content-right">
<div class="text-content">
<!-- 按处理后的换行符渲染多段落 -->
<p v-for="(paragraph, index) in introductionParagraphs" :key="index">
{{ paragraph }}
</p>
<!-- 若无数据显示提示 -->
<p v-if="!baseInfo.introduction || introductionParagraphs.length === 0">暂无基地简介信息</p>
</div>
</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tab-pane>
<el-tab-pane label="基地成员" name="members">
<div class="tab-content">
<div class="content-layout">
<div class="content-left">
<h2 class="section-title">基地成员</h2>
<p class="section-english">Members</p>
</div>
<div class="content-right">
<div class="text-content">
<p><strong>主任：</strong> 张三</p>
<p><strong>副主任：</strong> 李四</p>
<p><strong>研究人员：</strong> 王五、赵六、孙七 等20余人</p>
</div>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="规章制度" name="regulations">
<div class="tab-content">
<div class="content-layout">
<div class="content-left">
<h2 class="section-title">规章制度</h2>
<p class="section-english">Regulations</p>
</div>
<div class="content-right">
<div class="text-content">
<p><strong>1. 科研项目管理办法</strong>：规范中心科研项目的申报、立项、实施、验收等全流程管理，确保项目质量和成果产出。</p>
<p><strong>2. 学术活动管理规定</strong>：鼓励开展高水平学术交流活动，提升中心学术影响力和社会知名度。</p>
<p><strong>3. 经费使用管理办法</strong>：严格规范科研经费的使用，确保经费专款专用、合理高效。</p>
<p><strong>4. 成果管理办法</strong>：对科研成果的鉴定、登记、转化等进行规范管理，促进成果应用和社会效益发挥。</p>
<el-tab-pane label="基地成员" name="members">
<div class="tab-content">
<div class="content-layout">
<div class="content-left">
<h2 class="section-title">基地成员</h2>
<p class="section-english">BASE MEMBERS</p>
</div>
<div class="content-right">
<div class="text-content">
<p><strong>主任：</strong> {{ baseInfo.director || '暂无信息' }}</p>
<p><strong>副主任：</strong> {{ baseInfo.deputy_director || '暂无信息' }}</p>
<p><strong>研究人员：</strong> {{ baseInfo.researchers || '暂无信息' }}</p>
</div>
</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tab-pane>
<el-tab-pane label="联系我们" name="contact">
<div class="tab-content">
<div class="content-layout">
<div class="content-left">
<h2 class="section-title">联系我们</h2>
<p class="section-english">Contact Us</p>
</div>
<div class="content-right">
<div class="text-content">
<p><strong>地址：</strong> 湖北省武汉市江夏区阳光大道1号 武汉纺织大学 设计学院</p>
<p><strong>邮编：</strong> 430200</p>
<p><strong>电话：</strong> 027-87186XXX</p>
<p><strong>邮箱：</strong> hldrcenter@wtu.edu.cn</p>
<p><strong>网站：</strong> <a href="http://www.wtu.edu.cn/hldrcenter" target="_blank">http://www.wtu.edu.cn/hldrcenter</a></p>
<el-tab-pane label="规章制度" name="regulations">
<div class="tab-content">
<div class="content-layout">
<div class="content-left">
<h2 class="section-title">规章制度</h2>
<p class="section-english">REGULATIONS</p>
</div>
<div class="content-right">
<div class="text-content">
<!-- 按换行分割渲染规章制度 -->
<p v-for="(item, index) in regulationsItems" :key="index">
{{ item }}
</p>
<!-- 若无数据显示提示 -->
<p v-if="!baseInfo.regulations || regulationsItems.length === 0">暂无规章制度信息</p>
</div>
</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</el-tab-pane>
<!-- 底部二维码区域 -->
<div class="qrcode-container">
<div class="qrcode-item">
<img src="https://picsum.photos/100/100?random=1" alt="微信公众号" class="qrcode-img">
</div>
<div class="qrcode-item">
<img src="https://picsum.photos/100/100?random=2" alt="官方网站" class="qrcode-img">
<el-tab-pane label="联系我们" name="contact">
<div class="tab-content">
<div class="content-layout">
<div class="content-left">
<h2 class="section-title">联系我们</h2>
<p class="section-english">CONTACT US</p>
</div>
<div class="content-right">
<div class="text-content">
<p><strong>地址：</strong> {{ baseInfo.address || '暂无信息' }}</p>
<p><strong>电话：</strong> {{ baseInfo.phone || '暂无信息' }}</p>
<p><strong>邮箱：</strong> {{ baseInfo.email || '暂无信息' }}</p>
<p><strong>网站：</strong>
<!-- 修正：使用处理后的完整URL -->
<a
v-if="formattedWebsite"
:href="formattedWebsite"
target="_blank"
>
{{ baseInfo.website }}
</a>
<span v-else>暂无信息</span>
</p>
</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
<!-- 底部二维码区域 -->
<div class="qrcode-container">
<div class="qrcode-item">
<img src="https://picsum.photos/100/100?random=1" alt="微信公众号" class="qrcode-img">
</div>
<div class="qrcode-item">
<img src="https://picsum.photos/100/100?random=2" alt="官方网站" class="qrcode-img">
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ElTabs, ElTabPane } from 'element-plus';
import { ref, reactive, onMounted, computed, watch } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
// 控制当前激活的标签页，默认显示基地简介
// 控制当前激活的标签页
const activeTab = ref('introduction');
// 封面图地址（优先使用管理端上传的图片）
const pageImageUrl = ref('');
// 默认封面图
const defaultCover = 'https://p11-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/6cc03dbbc19040e888533c9c1fd65b06.png~tplv-a9rns2rl98-resize-jpeg-v1.png?rcl=20251027155649B3056BCBCEFDAC17A006&rk3s=8e244e95&rrcfp=8a172a1a&x-expires=1762156610&x-signature=moWHZ%2FOpffhAFvZmA42l0w22M%2B8%3D';
// 存储基地信息的响应式对象（与接口返回字段对应）
const baseInfo = reactive({
id: 0,
introduction: '',
regulations: '',
address: '',
phone: '',
email: '',
website: '', // 网站地址（可能缺少http/https协议）
director: '',
deputy_director: '',
researchers: ''
});
// 页面挂载时加载数据
onMounted(() => {
fetchCoverImage();
fetchBaseInfo();
});
// 从后端获取封面图
const fetchCoverImage = async () => {
try {
const response = await axios.post('http://localhost:8080/api/page-image/get', { page: 'BaseOverview' });
if (response.data.message === '查询成功') {
pageImageUrl.value = response.data.images[0].image_url;
}
console.log("获取封面成功：", response.data);
} catch (error) {
console.log('封面图加载失败，使用默认图', error);
}
};
// 从后端获取基地概况信息并绑定到页面
const fetchBaseInfo = async () => {
try {
const response = await axios.get('http://localhost:8080/api/base-overview');
if (response.data.success) {
Object.assign(baseInfo, response.data.data);
} else {
ElMessage.warning('获取基地信息失败：' + (response.data.message || '未知错误'));
}
} catch (error) {
console.error('获取基地概况信息失败:', error);
ElMessage.error('获取基地信息失败，请刷新页面重试');
}
};
// 图片加载失败时使用默认图
const handleImageError = () => {
pageImageUrl.value = defaultCover;
};
// 处理简介换行
const introductionParagraphs = computed(() => {
if (!baseInfo.introduction) return [];
const unescapedText = baseInfo.introduction.replace(/\\n/g, '\n');
return unescapedText.split(/\r?\n/)
.map(paragraph => paragraph.trim())
.filter(paragraph => paragraph);
});
// 处理规章制度换行
const regulationsItems = computed(() => {
if (!baseInfo.regulations) return [];
const unescapedText = baseInfo.regulations.replace(/\\n/g, '\n');
return unescapedText.split(/\r?\n/)
.map(item => item.trim())
.filter(item => item);
});
// 核心修正：确保网站链接为完整URL（自动补全http/https协议）
const formattedWebsite = computed(() => {
if (!baseInfo.website) return '';
// 检查是否已包含协议头（http:// 或 https://）
const hasProtocol = /^https?:\/\//.test(baseInfo.website);
if (hasProtocol) {
return baseInfo.website; // 已有协议，直接返回
} else {
// 无协议时，默认添加https://（更安全）
return `https://${baseInfo.website}`;
}
});
</script>
<style scoped>
/* 样式保持不变 */
.base-overview-container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 页面标题样式 */
.page-header {
margin-bottom: 40px;
padding-bottom: 15px;
border-bottom: 1px solid #e0e0e0;
.page-cover {
position: relative;
width: 100vw;
height: 400px;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
margin: 0 0 40px 0;
}
.cover-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.cover-title {
position: absolute;
left: 100px;
top: 50%;
transform: translateY(-50%);
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
z-index: 2;
}
.main-title {
font-size: 28px;
color: #333;
margin: 0 0 8px 0;
font-weight: 500;
font-size: 48px;
font-weight: 600;
margin: 0 0 10px 0;
line-height: 1.2;
}
.english-title {
font-size: 16px;
color: #999;
margin: 0;
font-size: 24px;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0;
letter-spacing: 2px;
}
.content-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
/* 标签页样式 */
.content-tabs {
margin-bottom: 40px;
border-bottom: 1px solid #e0e0e0;
@@ -167,15 +306,13 @@ const activeTab = ref('introduction');
background-color: #b50009;
}
/* 内容区域样式 */
.tab-content {
padding: 30px 0;
}
/* 左侧标题 + 右侧内容的布局 */
.content-layout {
display: grid;
grid-template-columns: 280px 1fr; /* 左侧固定宽度，右侧自适应 */
grid-template-columns: 280px 1fr;
gap: 30px;
align-items: start;
}
@@ -206,8 +343,13 @@ const activeTab = ref('introduction');
}
.text-content p {
margin: 0 0 20px 0;
margin: 0 0 24px 0;
text-align: justify;
text-indent: 2em;
}
.text-content p:last-child {
margin-bottom: 0;
}
.text-content a {
@@ -219,10 +361,9 @@ const activeTab = ref('introduction');
text-decoration: underline;
}
/* 底部二维码区域 - 靠右对齐 */
.qrcode-container {
display: flex;
justify-content: flex-end; /* 靠右显示 */
justify-content: flex-end;
gap: 30px;
margin-top: 50px;
padding-top: 20px;
@@ -242,10 +383,44 @@ const activeTab = ref('introduction');
padding: 4px;
}
/* 响应式调整 */
@media (max-width: 1200px) {
.cover-title {
left: 80px;
}
}
@media (max-width: 1024px) {
.page-cover {
height: 300px;
}
.main-title {
font-size: 36px;
}
.english-title {
font-size: 20px;
}
.cover-title {
left: 60px;
}
}
@media (max-width: 768px) {
.page-cover {
height: 200px;
margin-bottom: 20px;
}
.cover-title {
left: 30px;
}
.main-title {
font-size: 28px;
}
.english-title {
font-size: 16px;
}
.content-layout {
grid-template-columns: 1fr; /* 移动端单列布局 */
grid-template-columns: 1fr;
}
.content-left {
@@ -255,15 +430,24 @@ const activeTab = ref('introduction');
margin-bottom: 20px;
}
.qrcode-container {
justify-content: center; /* 移动端居中显示二维码 */
.text-content p {
text-indent: 0;
margin-bottom: 16px;
}
.qrcode-container {
justify-content: center;
}
}
@media (max-width: 480px) {
.cover-title {
left: 20px;
}
.main-title {
font-size: 24px;
}
.text-content {
.english-title {
font-size: 14px;
}
}