Project Overview

Project Screenshot

Implementation Approach

1. Framework

The project uses Element Plus as the UI framework. This section focuses on implementing the header component, with the main content and footer sections to follow.

Element Plus Documentation

2. Header Components:

The header consists of three main parts:

• First row: main icon + search component + three hyperlinks
• Second row: navigation menu (componentized)
• Third row: carousel (componentized)

Implementation

1. Container Layout

##MainPage.vue
<template>
    <div class="mainpage-layout">
        <el-container>
          <el-header>Header</el-header>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
    </div>
</template>

2. MainPage.vue Home Page Design

##MainPage.vue
<template>
  <div class="mainpage-layout">
    <el-container>
      <el-header class="header-container">
        <!--headerNav-->
        <el-row class="header-nav">
          <!--main-icon-->
            <!--Column layout-->
          <el-col :span="11">
            <img class="main-icon" src="../assets/image/main icon.png" alt="Logo" />
          </el-col>
          <!--search-->
          <el-col :span="8">
            <SearchBar />
          </el-col>
          <!--link-container-->
          <el-col :span="5">
            <div class="link-container">
              <el-link href="https://www.zcst.edu.cn/" target="_blank" type="info"
                >School Website</el-link
              >
              <span>|</span>
              <el-link
                href="https://vpn.zcst.edu.cn/webvpn/LjE1NC4yMTcuMTcwLjE2OC4xNjg=/LjE1OC4yMDYuMTUyLjE3MC4xNTAuMTY4LjE2OS4xMDIuMTc0LjE5Ni4yMTcuMjE0Ljk4LjE0OS4xNDguMjE2LjE0My4xOTkuMTY0/"
                target="_blank"
                type="info"
                >Library</el-link
              >
              <span>|</span>
              <el-link
                href="https://vpn.zcst.edu.cn/frontend_static/frontend/login/index.html#/"
                target="_blank"
                type="info"
                >Campus Resources</el-link
              >
            </div>
          </el-col>
        </el-row>
        <!--menu-->
        <!--banner-->
        <div class="banner"></div>
      </el-header>
      <el-main>Main Content</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import SearchBar from '@/components/SearchBar.vue'
</script>

<style scoped>
.header-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: flex-start;
  background-color: aliceblue;
}
.header-nav {
  height: 60px;
  background-color: snow;
}
.main-icon {
  margin-right: 100px;
  top: 0px;
  width: 350px;
  height: auto;
}
.SearchBar {
  top: 30px;
  left: 200px;
  width: 450px;
  height: 100%;
}
.menu {
  height: 60px;
  background-color: rgb(184, 18, 54);
}
.banner {
  width: 80%;
  height: 120%;
  margin: 0 auto;
  background-color: azure;
}
</style>

3. SearchBar.vue Search Component

<template>
  <div class="search-bar">
    <el-input v-model="searchQuery" style="width: 240px" placeholder="Enter keywords to search...">
      <template #append>
        <el-button :icon="SearchIcon" />
      </template>
    </el-input>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
const searchQuery = ref('')
</script>

<style scoped></style>

4. ImageCarousel.vue Carousel Component

<template>
  <div class="image-carousel">
    <el-carousel trigger="click" height="500px" motion-blur>
      <el-carousel-item v-for="(imageUrl, index) in imageList" :key="index">
        <img
          :src="imageUrl"
          class="carousel-image"
          alt="Carousel Image"
          style="width: 100%; height: auto"
        />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const imageList = ref([
  'src/assets/image/library-front-02.jpeg',
  'src/assets/image/library-front-01.jpeg',
  'src/assets/image/globe.jpeg',
  'src/assets/image/library-02.jpeg'
])
</script>

<style scoped>
.carousel-image {
  width: 100%;
  height: 100%;
}
</style>

Mock data integration is in progress... (will update when complete)

"Edu-Web Development Log" - Apifox Mock exploration in progres...

Implementation Screenshot

Previous Development Logs

"Edu-Web Development Log (Reset Version)" - Using Git and GitHub in VS Code

"Edu-Web Development Log (Reset Version)" - Building a Vue3 project from scratch

"Edu-Web Development Log (Initial Vertion)" - Exploring Git & GitHub Desktop

"Edu-Web Development Log (Initial Version)" - Setting up a new Vue3 project