391 lines
7.7 KiB
Vue
391 lines
7.7 KiB
Vue
<template>
|
||
<div class="app-container home">
|
||
<!-- 上半部分：校园风景图片轮播 -->
|
||
<div class="carousel-section">
|
||
<el-carousel :interval="4000" type="card" height="400px" indicator-position="outside" arrow="always" class="campus-carousel">
|
||
<el-carousel-item v-for="(image, index) in campusImages" :key="index">
|
||
<div class="carousel-item">
|
||
<img :src="image.url" :alt="image.title" class="carousel-image" />
|
||
<div class="carousel-overlay">
|
||
<h3 class="carousel-title">{{ image.title }}</h3>
|
||
<p class="carousel-description">{{ image.description }}</p>
|
||
</div>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
|
||
<!-- 下半部分：原有内容 -->
|
||
<div class="construction-container">
|
||
<div class="construction-content">
|
||
<!-- 系统标题 -->
|
||
<h1 class="system-title">杭州第一技师学院智慧校园管理系统</h1>
|
||
|
||
<!-- 待建设图标 -->
|
||
<div class="construction-icon">
|
||
<el-icon :size="120" color="#409EFF">
|
||
<Tools />
|
||
</el-icon>
|
||
</div>
|
||
|
||
<!-- 待建设提示 -->
|
||
<div class="construction-text">
|
||
<h2>页面建设中</h2>
|
||
<p class="description">我们正在努力完善系统功能，请耐心等待...</p>
|
||
<p class="sub-description">如有紧急需求，请联系系统管理员</p>
|
||
</div>
|
||
|
||
<!-- 进度条 -->
|
||
<div class="progress-section">
|
||
<p class="progress-label">建设进度</p>
|
||
<el-progress :percentage="75" :stroke-width="15" :text-inside="true" status="success" class="progress-bar" />
|
||
</div>
|
||
|
||
<!-- 预计完成时间 -->
|
||
<div class="completion-info">
|
||
<el-tag type="info" size="large">
|
||
<el-icon class="tag-icon"><Calendar /></el-icon>
|
||
预计完成时间：{{ expectedDate }}
|
||
</el-tag>
|
||
</div>
|
||
|
||
<!-- 联系信息 -->
|
||
<div class="contact-section">
|
||
<el-card class="contact-card" shadow="hover">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<el-icon><Service /></el-icon>
|
||
<span>联系我们</span>
|
||
</div>
|
||
</template>
|
||
<div class="contact-content">
|
||
<p>
|
||
<el-icon><Phone /></el-icon> 技术支持：0571-XXXXXXX
|
||
</p>
|
||
<p>
|
||
<el-icon><Message /></el-icon> 邮箱：support@hzdyjs.edu.cn
|
||
</p>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup name="Index" lang="ts">
|
||
import { computed } from 'vue';
|
||
import { Tools, Calendar, Service, Phone, Message } from '@element-plus/icons-vue';
|
||
|
||
// 校园风景图片数据
|
||
const campusImages = [
|
||
{
|
||
url: '/assets/images/01.jpg',
|
||
title: '校园正门',
|
||
description: '绿意盎然的校园入口，展现学院的自然之美'
|
||
},
|
||
{
|
||
url: '/assets/images/02.jpg',
|
||
title: '校园风光',
|
||
description: '现代化的校园建筑与自然景观的完美融合'
|
||
},
|
||
{
|
||
url: '/assets/images/03.jpg',
|
||
title: '校园全景',
|
||
description: '鸟瞰校园全景，展现学院的整体风貌'
|
||
}
|
||
];
|
||
|
||
// 计算预计完成时间（当前时间后30天）
|
||
const expectedDate = computed(() => {
|
||
const date = new Date();
|
||
date.setDate(date.getDate() + 30);
|
||
return date.toLocaleDateString('zh-CN', {
|
||
year: 'numeric',
|
||
month: 'long',
|
||
day: 'numeric'
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.home {
|
||
min-height: calc(100vh - 200px);
|
||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||
}
|
||
|
||
// 上半部分：轮播图样式
|
||
.carousel-section {
|
||
padding: 40px 20px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
|
||
.campus-carousel {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||
|
||
:deep(.el-carousel__item) {
|
||
border-radius: 16px;
|
||
}
|
||
}
|
||
|
||
.carousel-item {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
border-radius: 16px;
|
||
}
|
||
|
||
.carousel-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.carousel-item:hover .carousel-image {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.carousel-overlay {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
||
color: white;
|
||
padding: 40px 30px 30px;
|
||
text-align: left;
|
||
}
|
||
|
||
.carousel-title {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
margin: 0 0 10px 0;
|
||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.carousel-description {
|
||
font-size: 16px;
|
||
margin: 0;
|
||
opacity: 0.9;
|
||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
// 下半部分：原有样式
|
||
.construction-container {
|
||
width: 100%;
|
||
max-width: 800px;
|
||
padding: 40px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.construction-content {
|
||
text-align: center;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 20px;
|
||
padding: 60px 40px;
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.system-title {
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
margin-bottom: 40px;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.construction-icon {
|
||
margin-bottom: 30px;
|
||
animation: float 3s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes float {
|
||
0%,
|
||
100% {
|
||
transform: translateY(0px);
|
||
}
|
||
50% {
|
||
transform: translateY(-10px);
|
||
}
|
||
}
|
||
|
||
.construction-text {
|
||
margin-bottom: 40px;
|
||
|
||
h2 {
|
||
font-size: 24px;
|
||
font-weight: 500;
|
||
color: #409eff;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.description {
|
||
font-size: 16px;
|
||
color: #606266;
|
||
margin-bottom: 10px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.sub-description {
|
||
font-size: 14px;
|
||
color: #909399;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
|
||
.progress-section {
|
||
margin-bottom: 30px;
|
||
|
||
.progress-label {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
margin-bottom: 10px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.progress-bar {
|
||
max-width: 400px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
.completion-info {
|
||
margin-bottom: 40px;
|
||
|
||
.el-tag {
|
||
padding: 12px 20px;
|
||
font-size: 14px;
|
||
|
||
.tag-icon {
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.contact-section {
|
||
max-width: 400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.contact-card {
|
||
border-radius: 12px;
|
||
border: none;
|
||
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-weight: 500;
|
||
color: #409eff;
|
||
}
|
||
}
|
||
|
||
.contact-content {
|
||
p {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 12px;
|
||
font-size: 14px;
|
||
color: #606266;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.el-icon {
|
||
color: #409eff;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 响应式设计
|
||
@media (max-width: 768px) {
|
||
.carousel-section {
|
||
padding: 20px 10px;
|
||
}
|
||
|
||
.campus-carousel {
|
||
height: 300px !important;
|
||
}
|
||
|
||
.carousel-overlay {
|
||
padding: 30px 20px 20px;
|
||
}
|
||
|
||
.carousel-title {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.carousel-description {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.construction-container {
|
||
padding: 20px;
|
||
}
|
||
|
||
.construction-content {
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
.system-title {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.construction-icon {
|
||
.el-icon {
|
||
font-size: 80px !important;
|
||
}
|
||
}
|
||
|
||
.construction-text h2 {
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
|
||
// 深色主题适配
|
||
html.dark {
|
||
.carousel-section {
|
||
background: rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.construction-content {
|
||
background: rgba(30, 30, 30, 0.95);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.system-title {
|
||
color: #e5eaf3;
|
||
}
|
||
|
||
.construction-text {
|
||
.description {
|
||
color: #a3a6ad;
|
||
}
|
||
|
||
.sub-description {
|
||
color: #6c6e72;
|
||
}
|
||
}
|
||
|
||
.progress-section .progress-label {
|
||
color: #a3a6ad;
|
||
}
|
||
|
||
.contact-content p {
|
||
color: #a3a6ad;
|
||
}
|
||
}
|
||
</style>
|