fdzcxy212206203
/
ExamSphere
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

小改首页

Browse Source
wqf
cxy 7 months ago
parent cbf8a57393
commit 64baa17519
1 changed files with 97 additions and 75 deletions
Show Stats Download Patch File Download Diff File

172
ExamSphere_demo/src/view/student/home.vue
Unescape View File

@ -1,65 +1,66 @@
<template>
<div class="all">
<div>
<el-row :gutter="20" class="equal-height">
<!-- 轮播图 -->
<div class="carousel">
<div v-for="(item, index) in carouselItems" :key="index"
class="carousel-item" :class="{ active: currentIndex === index }">
<img :src="item.image" alt="轮播图" />
<el-col :span="15">
<div class="carousel">
<div v-for="(item, index) in carouselItems" :key="index"
class="carousel-item" :class="{ active: currentIndex === index }">
<img :src="item.image" alt="轮播图" />
</div>
<button @click="prevSlide" class="carousel-control prev"><i class="fas fa-angle-left"></i></button>
<button @click="nextSlide" class="carousel-control next"><i class="fas fa-angle-right"></i></button>
</div>
<button @click="prevSlide" class="carousel-control prev"><i class="fas fa-angle-left"></i></button>
<button @click="nextSlide" class="carousel-control next"><i class="fas fa-angle-right"></i></button>
</div>
</el-col>
<!-- 温馨提示 -->
<el-col :span="9">
<el-card style="height: 400px;overflow-y: auto;" class="card1">
<el-divider><span style="font-size: 20px;">温馨提示</span></el-divider>
<el-card class="card1">
<el-divider><span class="caption-title">温馨提示</span></el-divider>
<el-text style="text-align: left;">
<p v-for="(tip, index) in tips" :key="index">{{ tip }}</p>
</el-text>
</el-card>
</el-col>
</el-row>
<el-row :gutter="20" class="part2" style="margin-bottom: 60px;">
<!-- 相关资讯 -->
<el-col :span="15">
<div>
<el-divider><span class="caption-title">相关资讯</span></el-divider>
<el-card v-for="(news, index) in news" :key="index" class="news-card" style="margin-bottom: 10px;">
<h2>{{ news.title }}</h2>
<template v-for="(item, idx) in news.content" :key="idx">
<h3>{{ item.heading }}</h3>
<p>{{ item.paragraph }}</p>
</template>
</el-card>
</div>
</el-col>
<el-row :gutter="10" style="margin-bottom: 60px;" class="part2">
<!-- 相关资讯 -->
<el-col :span="15">
<div>
<el-divider><span style="font-size: 20px;">相关资讯</span></el-divider>
<el-card style="margin-bottom: 10px;" v-for="(news, index) in news" :key="index">
<h2>{{ news.title }}</h2>
<template v-for="(item, idx) in news.content" :key="idx">
<h3>{{ item.heading }}</h3>
<p>{{ item.paragraph }}</p>
</template>
</el-card>
<!-- 公告栏 -->
<el-col :span="9" style="margin-top: 30px;">
<el-card class="announcement-card">
<el-divider><span class="announcement-title">公告栏</span></el-divider>
<div class="announcement-content">
<el-timeline>
<el-timeline-item v-for="(announcement, index) in announcements" :key="index"
:timestamp="announcement.date" placement="top">
<h4 class="announcement-heading">{{ announcement.title }}</h4>
<p class="announcement-message">{{ announcement.message }}</p>
</el-timeline-item>
</el-timeline>
</div>
</el-col>
<!-- 公告栏 -->
<el-col :span="9" style="margin-top: 30px;">
<el-card class="announcement-card">
<el-divider><span class="announcement-title">公告栏</span></el-divider>
<div class="announcement-content">
<el-timeline>
<el-timeline-item v-for="(announcement, index) in announcements" :key="index"
:timestamp="announcement.date" placement="top">
<h4 class="announcement-heading">{{ announcement.title }}</h4>
<p class="announcement-message">{{ announcement.message }}</p>
</el-timeline-item>
</el-timeline>
</div>
</el-card>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue';
// 温馨提示
const tips = [
"ExamSphere在线考试系统温馨提示尊敬的用户，您好！",
"• 请遵守考试规则，诚信应考。",
@ -71,8 +72,6 @@ const tips = [
"我们祝您考试顺利，并期待为您提供卓越的在线考试体验。",
"ExamSphere，让考试更简单，让学习更高效。ExamSphere团队敬上"
];
// 相关咨询
const news = [
{
title: "一、最新发展动态",
@ -122,40 +121,46 @@ const announcements = reactive([{
message: "如遇问题，请联系技术支持团队，联系方式已更新。"
},
])
// 轮播图
const carouselItems = ref([
{ image: '轮播图1.png'},
{ image: '轮播图2.png'},
{ image: '轮播图3.png'},
{ image: '轮播图4.png'}
{ image: '轮播图1.png' },
{ image: '轮播图2.png' },
{ image: '轮播图3.jpg' },
{ image: '轮播图4.jpg' }
]);
const currentIndex = ref(0);
const nextSlide = () => {
currentIndex.value = (currentIndex.value + 1) % carouselItems.value.length;
};
const prevSlide = () => {
currentIndex.value = (currentIndex.value - 1 + carouselItems.value.length) % carouselItems.value.length;
};
// 自动播放
const nextSlide = () => { currentIndex.value = (currentIndex.value + 1) % carouselItems.value.length; };
const prevSlide = () => { currentIndex.value = (currentIndex.value - 1 + carouselItems.value.length) % carouselItems.value.length; };
onMounted(() => {
setInterval(() => {
nextSlide();
}, 5000); // 每5秒自动切换一次
setInterval(() => { nextSlide(); }, 5000);
});
</script>
<style scoped>
.all {
padding: 20px;
}
.equal-height {
display: flex;
align-items: stretch;
}
.carousel {
position: relative;
overflow: hidden;
height: 400px;
width: 100%;
margin: 20px 0;
margin: 0;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card1 {
height: 400px;
margin: 0;
overflow-y: auto;
}
.carousel-item {
position: absolute;
top: 0;
@ -163,7 +168,7 @@ onMounted(() => {
width: 100%;
height: 100%;
display: none;
transition: transform 0.5s ease;
transition: opacity 0.5s ease;
}
.carousel-item.active {
@ -177,16 +182,6 @@ onMounted(() => {
border-radius: 8px;
}
.carousel-caption {
position: absolute;
bottom: 30px;
left: 30px;
color: #fff;
background: rgba(0, 0, 0, 0.5);
padding: 10px 20px;
border-radius: 4px;
}
.carousel-control {
position: absolute;
top: 50%;
@ -195,11 +190,15 @@ onMounted(() => {
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s ease;
}
.carousel-control:hover {
background-color: rgba(0, 0, 0, 0.7);
}
.carousel-control.prev {
left: 20px;
}
@ -207,4 +206,27 @@ onMounted(() => {
.carousel-control.next {
right: 20px;
}
.caption-title {
font-size: 20px;
font-weight: bold;
}
.news-card {
border: 1px solid #f9f9f9;
border-radius: 8px;
}
.announcement-card {
background-color: #f9f9f9;
border-radius: 8px;
}
.announcement-heading {
color: #333;
}
.announcement-message {
color: #666;
}
</style>

Write Preview
Loading…
Cancel
Save