【Edu-Web 柒沐の项目开发日志】——首页制作【一】

柒沐·我学学学学学学学

已于 2024-04-14 17:34:04 修改

阅读量323

点赞数 7

文章标签： html 前端

于 2024-04-12 23:22:00 首次发布

本文链接：https://blog.csdn.net/m0_71506747/article/details/137695992

版权

4.MyCarousel.vue轮播图组件

往期开发日志

一、项目梳理

项目效果图

实现思路

1、框架

选的是Element Plus的界面框架，今天在这里主要先写Header部分，Main和Footer正在路上了

Element Plus手册

2、header parts:

3个parts：
第一行：main-icon + search搜索框（组件化） + 3*超链接

第二行：导航栏 menu （组件化）

第三行：轮播图 Carousel （组件化）

二、开始实现吧！！！

1.容器总布局

##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主页设计

##MainPage.vue
<template>
  <div class="mainpage-layout">
    <el-container>
      <el-header class="header-container">
        <!--headerNav-->
        <el-row class="header-nav">
          <!--main-icon-->
            <!--分栏-->
          <el-col :span="11">
            <img class="main-icon" src="../assets/image/main icon.png" alt="图片" />
          </el-col>
          <!--search-->
          <el-col :span="8">
            <MySearch />
          </el-col>
          <!--link-container-->
          <el-col :span="5">
            <div class="link-container">
              <el-link href="https://www.zcst.edu.cn/" target="_blank" type="info"
                >学校官网</el-link
              >
              <span>|</span>
              <el-link
                href="https://vpn.zcst.edu.cn/webvpn/LjE1NC4yMTcuMTcwLjE2OC4xNjg=/LjE1OC4yMDYuMTUyLjE3MC4xNTAuMTY4LjE2OS4xMDIuMTc0LjE5Ni4yMTcuMjE0Ljk4LjE0OS4xNDguMjE2LjE0My4xOTkuMTY0/"
                target="_blank"
                type="info"
                >图书馆</el-link
              >
              <span>|</span>
              <el-link
                href="https://vpn.zcst.edu.cn/frontend_static/frontend/login/index.html#/"
                target="_blank"
                type="info"
                >校内资源访问</el-link
              >
            </div>
          </el-col>
        </el-row>
        <!--menu-->
        <!--banner-->
        <div class="banner"></div>
      </el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import MySearch from '@/components/MySearch.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;
}
.MySearch {
  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.MySearch.vue搜索框组件

<template>
  <div class="MySearch">
    <el-input v-model="input" style="width: 240px" placeholder="请输入关键字搜索...">
      <template #append>
        <el-button :icon="Search" />
      </template>
    </el-input>
  </div>
</template>

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

<style scoped></style>

4.MyCarousel.vue轮播图组件

<template>
  <div class="MyCarousel">
    <el-carousel trigger="click" height="500px" motion-blur>
      <el-carousel-item v-for="(itemUrl, index) in carouselItems" :key="index">
        <img
          :src="itemUrl"
          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 carouselItems = ref([
  'src/assets/image/图书馆正02.jpeg',
  'src/assets/image/图书馆正01.jpeg',
  'src/assets/image/地球仪.jpeg',
  'src/assets/image/图书馆02.jpeg'
])
</script>

<style scoped>
.Carousel_img {
  width: 100%;
  height: 100%;
}
</style>

因为要用Mock引入，后续代码正在努力更新中...（写完了再发笔记）

【Edu-Web 柒沐の项目开发日志】——Apifox Mockの探索篇正在更新ing...

实现效果图

往期开发日志

【Edu-Web 柒沐の项目开发日志（重置版）】——VS Code版Git和GitHub的使用

【Edu-Web 柒沐の项目开发日志（重置版）】——从0开始搭vue3项目

【Edu-Web柒沐の项目开发日志(初版)】——Git & GitHub Desktop 的探索

【Edu-Web 柒沐の项目开发日志（初版）】——搭建新的Vue3项目