From 64baa17519b3ef90322ebf6cc7b01cf5048fa90f Mon Sep 17 00:00:00 2001
From: cxy <1276771477@qq.com>
Date: Fri, 20 Dec 2024 23:32:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=8F=E6=94=B9=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ExamSphere_demo/src/view/student/home.vue | 172 ++++++++++++----------
 1 file changed, 97 insertions(+), 75 deletions(-)

diff --git a/ExamSphere_demo/src/view/student/home.vue b/ExamSphere_demo/src/view/student/home.vue
index adf766f..2a8c77b 100644
--- a/ExamSphere_demo/src/view/student/home.vue
+++ b/ExamSphere_demo/src/view/student/home.vue
@@ -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>