ExamSphere/admin/firstpage.vue

<template>
  <el-container style="height: 1600px;">
	 
    <el-main style="height: 500px;">
      <div>
        <el-carousel indicator-position="none" height="500px" autoplay>
          <el-carousel-item v-for="item in items" :key="item.id" style="height: 500px;">
            <img :src="item.src" alt="image" style="width: 100%; height: 100%; object-fit: cover;" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-main>

    <h1>通知</h1>

    <el-main>
      <el-tabs v-model="activeTab" class="header" @tab-click="handleTabClick">
        <el-tab-pane label="通知1" name="first"></el-tab-pane>
        <el-tab-pane label="通知2" name="second"></el-tab-pane>
        <el-tab-pane label="通知3" name="third"></el-tab-pane>
        <el-tab-pane label="通知4" name="fourth"></el-tab-pane>
      </el-tabs>
      <router-view></router-view>
    </el-main>

    <el-footer>
      <!-- <div class="news-section">
        <div class="foot">
          <h2>用户建议</h2>
          <button class="view-all-btn" @click="goToInformation">查看全部</button>

        </div>
        <div class="news-container">
          <div class="news-item" v-for="(news, index) in newsList" :key="index" :class="{ large: index === 1 }">
            <img :src="news.image" :alt="news.title" class="news-image" />
            <div class="news-content">
              <p>{{ news.title }}</p>
            </div>
          </div>
        </div>
      </div> -->
    </el-footer>
  </el-container>
</template>


<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const activeTab = ref('first');
const router = useRouter();

function handleTabClick(tab) {
  console.log('Tab clicked:', tab.name);
  
  const tabRoutes = {
    first: { name: 'FirstPage1' },  // Navigate using named routes
    second: { name: 'FirstPage2' },
    third: { name: 'FirstPage3' },
    fourth: { name: 'FirstPage4' }
  };
  
  const route = tabRoutes[tab.props.name]; // Ensure correct name
  if (route) {
    router.push(route); // Use named route
  }
}

const items = [
  { id: 1, src: "/1.jpg" },
  { id: 2, src: "/2.jpg" },
  { id: 3, src: "/3.png" }
];



function goToInformation() {
  router.push({ name: 'Information' }); // Use named route
}
</script>


<style scoped>
.header {
  text-align: center;
}

.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

.news-section {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.foot h2 {
  font-size: 24px;
  font-weight: bold;
}

.view-all-btn {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px 10px;
  background-color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.view-all-btn:hover {
  background-color: #f0f0f0;
}

.news-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.news-item {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.3s ease;
}



.news-item:hover {
  transform: translateY(-5px);
}

.news-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.news-item.large .news-image {
  width: 100%;
  height: 200px;
}

.news-content {
  padding: 10px;
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;
}

.news-item.large .news-content {
  padding: 10px 20px;
  font-size: 16px;
}
::-webkit-scrollbar {
	  display: none;
	}
</style>