旅游网站（携程旅行网页学习 vue3+element）

旅游网站

1. 创建项目

在你要创建项目的路径下打开vscode，新建终端，然后输入vue ui,进入Vue项目管理器。
选择“创建”，确定项目路径，并点击“在此创建新项目”。
在项目文件夹中输入项目名称，点击下一步；
选择“手动配置项目”，然后点击下一步；
增加选择“router”和“css”两个配置项，然后点击下一步；
选择 CSS 预处理器。node-sass 是自动编译实时的，dart-sass 需要保存后才会生效，此处建议选择 Sass/SCSS(with dart-sass)；pick a linter / formatter config可以选择第一个，只检查错误。选择完成后就可以创建项目。
提示创建成功后可以用vscode打开新建的项目。

2. 新建首页

注意：App.vue是整个项目的入口文件，这个文件保持干净，后续内容多了，结构才不出错，所以新建一个首页index.vue

为避免系统提示要组合词命名文件的错误，在package.json文件中修改“rules”的值：
```
"rules": {
      "vue/multi-word-component-names": "off"
    }
```
在src文件夹下的views文件夹中新建index.vue。在index.vue文件中，先设置一个简单页面，输入如下代码：（安装了插件就可以输入vue，然后选择默认vue结构，会自动补全vue结构）
```
<template>
  <h1>首页h1>
template>

<script>
export default {

}
script>

<style>

style>
```

按照路由的配置方法，在router文件下设置index.js文件，把不需要的路由删除或者注释。两步走，1引入子页面，2设置路由。

代码如下

import { createRouter, createWebHashHistory } from 'vue-router'
// 1.引入
import Index from '../views/index.vue'

const routes = [
  // 2.设置路由
  {
    path: '/',
    name: 'home',
    component: Index
  } 
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

如果显示index出错
error Component name "index" should always be multi-word
解决方式：
在vue.config.js中添加代码lintOnSave:false
后重启项目即可

修改App.vue文件为如下代码，在这个页面中引入需要的页
```
<template>
  <router-view/>
template>
```

效果图：
在这里插入图片描述

3. 引入ElementPlus组件

用vscode打开项目，然后在终端中，项目路径下运行命令：npm install element-plus --save

在main.js文件中配置elementplus和ico图标库，导入方法见element官网，
https://element-plus.org/zh-CN/，修改main.js为如下代码：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// ElementPlus 相关库的导入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// 导入icon图标库
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 导入暗黑模式主题，在index.html文件中：需在 html 上添加一个名为 dark 的类 
import 'element-plus/theme-chalk/dark/css-vars.css'

// 创建一个应用
const app = createApp(App)
// 注册elementplus
app.use(ElementPlus, {
  locale: zhCn,
})
// 注册elementplus图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
// 注册路由后挂载
app.use(router).mount('#app')

4. 高仿携程旅游页面，制作index.vue

https://hotels.ctrip.com/?allianceid=4897&sid=799747&ouid=xiecheng370&bd_creative=27771225887&bd_vid=11944392447257964181&keywordid=137481675338【携程旅游】

在这里插入图片描述

首页布局。进入element官网，https://element-plus.org/zh-CN/，选择组件，然后选择Basic 基础组件中的Container 布局容器。根据上面的图，选择左上下结构，复制代码。

粘贴到index.vue中里面并进行修改。此时也可以启动服务器查看布局结果
代码如下：

<template>
  
  <div class="common-layout">
    <el-container>
      <el-aside width="200px" class="test1">Asideel-aside>
      <el-container>
        <el-header class="test2">Headerel-header>
        <el-main class="test3">Mainel-main>
      el-container>
    el-container>
  div>
template>

<script>
export default {

}
script>

<style lang="scss">
.test1{
    background-color: rgb(177, 208, 255);
    height: 100vh;
}
.test2{
    background-color: rgb(110, 160, 235);
}
.test3{
    background-color: rgb(187, 239, 255);
}

style>

效果图：
在这里插入图片描述

将index.vue页面中的三个组成部分拆分成menu.vue、logo.vue和main.vue三个页
(1)在views文件夹中新建menu.vue、logo.vue和main.vue三个页面，然后将这三个组成部分的代码分别输入到对应的页面中。具体如下：

menu.vue代码：
<template>
   <el-aside width="200px">Asideel-aside>
template>

<script>
export default {

}
script>

<style lang="scss">
.el-aside{
    background-color: rgb(177, 208, 255);
    height: 100vw;
}
style>

logo.vue代码：
<template>
  <el-header>Headerel-header>
template>

<script>
export default {

}
script>

<style lang="scss">

.el-header{
  background-color: rgb(110, 160, 235);
}
style>

main.vue代码：
<template>
  <el-main>Mainel-main>
template>

<script>
export default {

}
script>

<style lang="scss">

.el-main{
  background-color: rgb(187, 239, 255);
}

style>

(2)修改index.vue,将三个组件页面引入到index.vue中，然后设置组件标签，代码如下：

<template>
  
  <div class="common-layout">
    <el-container>
      <MenuView>MenuView>
      <el-container>
        <el-header><LogoView>LogoView>el-header>
        <el-main><MainView>MainView>el-main>
      el-container>
    el-container>
  div>
template>

<script setup>
// 1.script 里加setup，引入要加载的子页面
    import MenuView from './menu.vue'
    import MainView from './main.vue'
    import LogoView from './logo.vue'
script>

<style lang="scss">


style>

效果图：
在这里插入图片描述

5. 制作左边菜单栏

功能是可以展开和隐藏菜单栏，所以要在elementplus中找到相对应的组件，想要的效果是munu菜单中的Collapse 折叠面板。
在这里插入图片描述

打开Collapse 折叠面板的代码，分析其哪些功能代码是我们需要的，不要直接全部复制。leftmenu.vue的代码如下：

<template>
  <el-aside width="200px">
    
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
        <el-radio-button :value="false">expandel-radio-button>
        <el-radio-button :value="true">collapseel-radio-button>
      el-radio-group>
      
      <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
    >
      
      <el-menu-item index="2">
        <el-icon><icon-menu />el-icon>
        <template #title>酒店template>
      el-menu-item>
    el-menu>

  el-aside>
template>

<script setup>
import { ref } from 'vue'
// 设置isCollapse的值为true，用于控制展开或隐藏
const isCollapse = ref(true)
// 导入icon图标，没用到的组件导入会报错，可以在package.json文件中
// 增加一条rules："no-unused-vars": "off"
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
style>

启动服务器，查看此时网页效果
效果图：
修改上面的代码，实现与网站几乎相同的效果。

（1）将展开隐藏按钮标签放入到菜单标签，并将展开隐藏的文字提示改为“|||”，并且将两个标签设置v-show属性，展开的时候显示，隐藏的时候隐藏标识符号。

（2）在script里面定义左侧菜单数组

（3）在菜单项中通过v-for去实现显示菜单组

（4）更改icon图标，可以在icon图标库中复制图标名字加到已导入的图标项中

（5）修改菜单项中设置icon图标的代码，实现动态加载图标

leftmenu.vue的代码改动为如下所示：

启动服务器，查看此时的显示效果

调整按钮位置

效果：
在这里插入图片描述

在这里插入图片描述

6. 字体图标的引入

下载第三方图标，进入阿里巴巴矢量图库https://www.iconfont.cn/?spm=a313x.manage_type_myprojects.i3.2.74bc3a812ze26a，并保存在src中
全局引入
在main.js中加上代码import '@/assets/font/iconfont.css'

修改menu中代码

图标效果

7. 左侧导航栏样式

新建样式index.css

代码
index.css

/* 左侧导航栏 */
.aside {
    width: 200px;
}
.aside-list {
     /* 固定定位 */
    position: fixed;
    left: 0;
    width: 200px;
}
.aside .el-menu {
    height:100vh;

}
/* 字体图标的样式 */
.aside i {
    font-size: 24px;
    font-weight: 500;
    margin-right: 5px;
}
.aside .el-radio-button__inner {
    border:none;
    font-size: 20px;
}

menu.vue

```

引入样式
在main.js中import '@/assets/css/index.css'
效果图
遇到问题：
1. 隐藏张开按钮会跟随移动
解决方式：

修改#appde 样式
删除text-align: center

如不清楚，请看12.位置区域中的解决方式

8. 头部导航栏

修改logo.vue中的代码

效果图：
在这里插入图片描述

横向排列、固定定位
修改index.css文件

/* 页面头部 */
/* 宽度响应 */
.el-header {
    min-width: 1280px;
}
.headerNav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 水平垂直对齐 */
    height: 70px;
    width:1620px;
    /* 固定定位 */
    position:fixed;
    top:0;
    background-color: #fff;
    z-index: 999;
    padding: 10px 0;
}

删除logo.vue中定义的css样式

效果图
logo图

修改代码

修改样式

.headerNav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 水平垂直对齐 */
    height: 70px;
    width:1400px;
    /* 固定定位 */
    position:fixed;
    top:0;
    background-color: #fff;
    z-index: 999;
    padding: 10px 0;
}
.headerNav img {
    width: 100%;
    height: 50px;
}

效果图：
在这里插入图片描述

9. 搜索框

官网地址Input 输入框 | Element Plus (element-plus.org)

修改代码
logo.vue

index.css

.header-search {
    flex: 1;
    margin: 0 2rem;
}
/* 按钮的颜色  */
.headerNav .el-input-group__append {
    background-color: var(--el-color-primary);
    color: #fff;
}
.heaer-right .el-link {
    margin: 0 20px;
}

效果图：
在这里插入图片描述

10. 头部下拉菜单

官网Link 链接 | Element Plus (element-plus.org)

修改代码
logo.vue

index.css

.header-right .el-link {
    margin: 0 20px;
}
/* 伪类选择器：可以用来选取获得焦点的元素
当鼠标移入上去后取消黑色边框 */
.el-dropdown-link:focus{
   outline: none;
}

效果图：
在这里插入图片描述

11. 区域模块

修改代码
main.vue

index.css

/* 区域展示部分 */
.searchlist {
    width: 1400px;
    display: grid;
    grid-template-columns: repeat(5,auto);
    margin-top: 15px;
}
.searchlist-item {
    border: 1px solid #dadada;
    margin-left: -1px;
}

效果图：
在这里插入图片描述

内部搜索框、时间选择器

遇到问题

输入框一直有黑边

解决方式

css中增加input样式

main.vue

index.css

/* 右侧下面展示 */
.el-main {
    min-width: 1280px;
    overflow: hidden;
}
/* 目的地/酒店名称 */
.search-box {
    padding: 8px 12px;
}
.search-box label {
    color: #999;
    display: block;
}
.search-box input {
    border:none;
    font-size: 16px;
    font-weight: 700;
    padding-top: 15px;
}

.input{
    outline: none;
}
/* 伪类选择器，当元素获得焦点的时候，能够控制父元素的样式 */
.searchlist-item:focus-within {
    border-bottom: 2px solid var(--el-color-primary);
}
/* 入住时间/退房时间 取消边框的颜色 */
.search-box .el-date-editor.el-input__wrapper {
    box-shadow:none;
}
.search-box .el-date-editor.el-input__wrapper:hover {
    box-shadow:none;
}
/* 搜索按钮的样式 */
.searchlist-item .el-button {
    width: 100%;
    height:100%;
    border-radius: 0;
}
.searchlist-item .el-button .el-icon {
    font-size: 30px;
}

效果图：
在这里插入图片描述

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/b7e8454de1064819a38ccb10405dfa83.png)

12. 位置区域

使用网格布局

新建页面，并在index.vue中加入页面

修改代码
toplist.vue

遇到问题：

按钮居中对齐，不靠左

解决方式：

修改#app中的样式（如果在之前隐藏展开框中改过则不会出现问题）
在App.vue中,注释掉text-align: center;
为防止应样式继承产生的问题，将App.vue中的样式都注销

遇到问题：

星级价格中的按钮以及高级筛选的下拉菜单不垂直居中

解决方式：

在index.css中增加样式
.topfilter-price{
    display: flex;
    align-items: center;
}
.topfilter-filter{
    display: flex;
    align-items: center;
}

indext.css（根据页面大小，修改了其他样式）

/* 左侧导航栏 */
.aside {
    width: 200px;
}
.aside-list {
    /* 固定定位 */
    position: fixed;
    left: 0;
    width: 200px;
}
.aside .el-menu {
    height:100vh;

}
/* 字体图标的样式 */
.aside i {
    font-size: 24px;
    font-weight: 500;
    margin-right: 5px;
}
.aside .el-radio-button__inner {
    border:none;
    font-size: 20px;
}


/* 页面头部 */
/* 宽度响应 */
.el-header {
    min-width: 1280px;
}
.headerNav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 水平垂直对齐 */
    height: 70px;
    width:1300px;
    /* 固定定位 */
    position:fixed;
    top:0;
    background-color: #fff;
    z-index: 999;
    padding: 10px 0;
}
.headerNav img {
    width: 100%;
    height: 50px;
}
.header-search {
    flex: 1;
    margin: 0 2rem;
}
/* 按钮的颜色  */
.headerNav .el-input-group__append {
    background-color: var(--el-color-primary);
    color: #fff;
}
.header-right .el-link {
    margin: 0 20px;
}
/* 伪类选择器：可以用来选取获得焦点的元素
当鼠标移入上去后取消黑色边框 */
.el-dropdown-link:focus{
   outline: none;
}
/* 右侧下面展示 */
.el-main {
    min-width: 1280px;
    overflow: hidden;
}
/* 区域展示部分 */
.searchlist {
    width: 1300px;
    display: grid;
    grid-template-columns: repeat(5,auto);
    margin-top: 15px;
}
.searchlist-item {
    border: 1px solid #dadada;
    margin-left: -1px;
}
/* 目的地/酒店名称 */
.search-box {
    padding: 8px 12px;
}
.search-box label {
    color: #999;
    display: block;
}
.search-box input {
    border:none;
    font-size: 16px;
    font-weight: 700;
    padding-top: 15px;
}

.input{
    outline: none;
}
/* 伪类选择器，当元素获得焦点的时候，能够控制父元素的样式 */
.searchlist-item:focus-within {
    border-bottom: 2px solid var(--el-color-primary);
}
/* 入住时间/退房时间 取消边框的颜色 */
.search-box .el-date-editor.el-input__wrapper {
    box-shadow:none;
}
.search-box .el-date-editor.el-input__wrapper:hover {
    box-shadow:none;
}
/* 搜索按钮的样式 */
.searchlist-item .el-button {
    width: 100%;
    height:100%;
    border-radius: 0;
}
.searchlist-item .el-button .el-icon {
    font-size: 30px;
}

/* topfilter开始  */
.topfilter {
    width: 1300px;
    display:grid;
    grid-template-columns: 130px 1fr;
    /* 列 */
    grid-template-rows:repeat(3,auto);
    /* 3行 */
}
.topfilter>div {
    border-bottom:1px solid #ddd;
    padding: 0.2rem 1rem;
}
.topfilter h4 {
    line-height: 17px;
    text-align: center;
}
.topfilter .el-button:hover {
    background-color: var(--el-color-primary);
    border: 1px solid var(--el-color-primary);
}

.topfilter-price{
    display: flex;
    align-items: center;
}

.topfilter-filter{
    display: flex;
    align-items: center;
}

/* 按钮的间距： */
.topfilter .el-button {
    margin: 7px;
}
/* 高级筛选 */
.topfilter-filter .el-dropdown {
    margin: 10px 15px;
    /* 下拉菜单间距 */
}

效果图

13. 走马灯和列表

新建文件，并引入
recommend.vue

index.vue

效果图
修改代码，增加视图Recommend-left和Banner
recommend.vue

index.css

/* 推荐酒店 */
.recommend {
    width:1300px;
    display:flex;
    gap: 0 20px;
    padding: 10px 0;
}
.recommend-left {
    width: 900px;
}
.recommend-right {
    width: 400px;
}

修改代码
banner.vue

index.css

.banner {
    width: 400px;
    height: 620px;
}
/* 轮播图 */
.banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

遇到问题：

banner.vue中图片不显示

找不到路径

解决方式：

5.完善代码
recommend.vue

recommend-list.vue

banner.vue

index.css

/* 左侧导航栏 */
.aside {
    width: 200px;
}
.aside-list {
    /* 固定定位 */
    position: fixed;
    left: 0;
    width: 200px;
}
.aside .el-menu {
    height:100vh;

}
/* 字体图标的样式 */
.aside i {
    font-size: 24px;
    font-weight: 500;
    margin-right: 5px;
}
.aside .el-radio-button__inner {
    border:none;
    font-size: 20px;
}


/* 页面头部 */
/* 宽度响应 */
.el-header {
    min-width: 1280px;
}
.headerNav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 水平垂直对齐 */
    height: 70px;
    width:1300px;
    /* 固定定位 */
    position:fixed;
    top:0;
    background-color: #fff;
    z-index: 999;
    padding: 10px 0;
}
.headerNav img {
    width: 100%;
    height: 50px;
}
.header-search {
    flex: 1;
    margin: 0 2rem;
}
/* 按钮的颜色  */
.headerNav .el-input-group__append {
    background-color: var(--el-color-primary);
    color: #fff;
}
.header-right .el-link {
    margin: 0 20px;
}
/* 伪类选择器：可以用来选取获得焦点的元素
当鼠标移入上去后取消黑色边框 */
.el-dropdown-link:focus{
   outline: none;
}
/* 右侧下面展示 */
.el-main {
    min-width: 1280px;
    overflow: hidden;
}
/* 区域展示部分 */
.searchlist {
    width: 1300px;
    display: grid;
    grid-template-columns: repeat(5,auto);
    margin-top: 15px;
}
.searchlist-item {
    border: 1px solid #dadada;
    margin-left: -1px;
}
/* 目的地/酒店名称 */
.search-box {
    padding: 8px 12px;
}
.search-box label {
    color: #999;
    display: block;
}
.search-box input {
    border:none;
    font-size: 16px;
    font-weight: 700;
    padding-top: 15px;
}

.input{
    outline: none;
}
/* 伪类选择器，当元素获得焦点的时候，能够控制父元素的样式 */
.searchlist-item:focus-within {
    border-bottom: 2px solid var(--el-color-primary);
}
/* 入住时间/退房时间 取消边框的颜色 */
.search-box .el-date-editor.el-input__wrapper {
    box-shadow:none;
}
.search-box .el-date-editor.el-input__wrapper:hover {
    box-shadow:none;
}
/* 搜索按钮的样式 */
.searchlist-item .el-button {
    width: 100%;
    height:100%;
    border-radius: 0;
}
.searchlist-item .el-button .el-icon {
    font-size: 30px;
}

/* topfilter开始  */
.topfilter {
    width: 1300px;
    display:grid;
    grid-template-columns: 130px 1fr;
    /* 列 */
    grid-template-rows:repeat(3,auto);
    /* 3行 */
}
.topfilter>div {
    border-bottom:1px solid #ddd;
    padding: 0.2rem 1rem;
}
.topfilter h4 {
    line-height: 17px;
    text-align: center;
}
.topfilter .el-button:hover {
    background-color: var(--el-color-primary);
    border: 1px solid var(--el-color-primary);
}

.topfilter-price{
    display: flex;
    align-items: center;
}

.topfilter-filter{
    display: flex;
    align-items: center;
}

/* 按钮的间距： */
.topfilter .el-button {
    margin: 7px;
}
/* 高级筛选 */
.topfilter-filter .el-dropdown {
    margin: 10px 15px;
    /* 下拉菜单间距 */
}

/* 推荐酒店 */
.recommend {
    width:1300px;
    display:flex;
    gap: 0 20px;
    padding: 10px 0;
}
.recommend-left {
    width: 880px;
}
.recommend-right {
    width: 420px;
}
.banner {
    width: 420px;
    height: 650px;
    margin-top: 57px;
}

h2{
    font-size: 1.2em;
    margin-left: 30px;
}

/* 轮播图 */
.banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.recommend-list ul li {
    display: flex;
    background-color: #F4F6F9;
    padding: 10px;
    margin-bottom: 10px;
    height: 127px;
}
.list-left {
    /* 设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间 */
    flex: 2;
    display: flex;
}
.list-right {
    flex: 1;
    border-left: 1px solid #ddd;
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}       
/* 图片的大小 */
.list-left-img {
    flex: 0.7;
}
.list-left-img img {
    width: 100%;
}
.list-left-title {
    flex: 3;
    margin-left: 30px;
}
/* 标题 */
.list-left-tagandtitle {
    font-size: 16px;
    line-height: 3px;
    display: flex;
    margin-bottom: 8px;
    align-items: center;
}
.list-left-tagandtitle img {
    height: 20px;
    width: auto;
    margin: 0 10px;
}
.badge-thumb {
    background:url(@/assets/images/help.png) no-repeat;
    width: 16px;
    height: 16px;
}
.list-left-transport {
    margin-bottom: 8px;
}
.list-left-tag .el-tag {
    margin: 3px;
}
.list-right-comment {
    display:flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    height: 40px;
}
.list-right-describe{
    height: 60px;
}
.p1 {
    color: var(--el-color-primary);
    font-size:16px;
    font-weight: 700;
    align-items: center;
    margin-top: 0px;
    
}
.list-right-describe a {
    color: #999;
    font-size: 11px;
    margin-top: 0px;
}
.list-right-score {
    background-color: var(--el-color-primary);
    color: #fff;
    border-radius: 4px;
    padding: 3px;
    font-size: 18px;
    font-weight: 800;
    margin-left: 9px;
    display: flex;
    align-items: center;
}
.list-right-price p {
    color: var(--el-color-primary);
    font-size:20px;
    font-weight: 700;
    margin-top: 0px;
    margin-bottom: 9px;
}

样式根据电脑屏幕进行了修改

效果图

代码整合

1. index.vue

2. banner.vue

3. logo.vue

3. main.vue

4. menu.vue

5. recommend-list.vue

6. recommend.vue

7. toplist.vue

8. 最终效果

在这里插入图片描述

相关阅读:
Day719. 矢量运算 -Java8后最重要新特性
 Java深入讲解static操作符
 计算机毕业设计（附源码）python自习室管理系统
 K8S 基础概念学习
 LeetCode 189. 轮转数组
 HDU-3549Flow Problem 最大流模板题
 月薪集中在8k-17k、近六成的人一年没跳槽、AI可减少20%-40%工作量，2024中国开发者调查报告来了！...
SSM整合
 cf1695D1. Tree Queries (Easy Version)（div2）【树上问题】
JVM运行时数据区域详解
原文地址：https://blog.csdn.net/qq_62652856/article/details/139651061

旅游网站（携程旅行网页学习 vue3+element）

旅游网站

1. 创建项目

2. 新建首页

3. 引入ElementPlus组件

4. 高仿携程旅游页面，制作index.vue

5. 制作左边菜单栏

6. 字体图标的引入

7. 左侧导航栏样式

8. 头部导航栏

9. 搜索框

10. 头部下拉菜单

11. 区域模块

12. 位置区域

位置区域

星级价格

高级筛选

13. 走马灯和列表

推荐酒店

推荐酒店

{{v.name}}

代码整合

1. index.vue

2. banner.vue

3. logo.vue

3. main.vue

4. menu.vue

5. recommend-list.vue

{{v.name}}

6. recommend.vue

推荐酒店

7. toplist.vue

位置区域

星级价格

高级筛选

8. 最终效果