前言
- 上一章我们实现了基础的主题切换功能,这一章我们开始搭建主页主要框架,并测试一下我们的切换主题功能。
开工
引用iconfont字体图标
- 这里我们使用font-class方法引用iconfont字体图标。
- 在项目目录的
src\assets\icons
中创建iconfont.css
文件。 - 首先我们将选中的图标放入项目,点击标红部分,如下图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b5f165bfe6f8caa223c5bcef4422c929.png)
- 在弹出的页面中将代码复制进刚刚创建的
iconfont.css
文件中,代码如下:
@font-face {
font-family: "iconfont";
src: url('//at.alicdn.com/t/c/font_3990496_c7efy0697zw.woff2?t=1684920260831') format('woff2'),
url('//at.alicdn.com/t/c/font_3990496_c7efy0697zw.woff?t=1684920260831') format('woff'),
url('//at.alicdn.com/t/c/font_3990496_c7efy0697zw.ttf?t=1684920260831') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-wode:before {
content: "\e74d";
}
.icon-zhuye:before {
content: "\e63b";
}
.icon-xiaoxi1:before {
content: "\e741";
}
.icon-sousou:before {
content: "\e63a";
}
.icon-qq:before {
content: "\e600";
}
.icon-weixin:before {
content: "\e665";
}
.icon-guanbi:before {
content: "\e6c1";
}
import '@/assets/icons/iconfont.css'
<i class="iconfont icon-sousou"></i>
template代码
- 这里我的思路是主框架分为上下两部分。
- 上为头部,使用绝对定位置于最上层。
- 下为主要内容,分为左右两部分,左边为导航栏,右边为路由页面展示部分。
- 主框架思路:
<div class="container">
<div class="header"></div>
<div class="main">
<div class="nav"></div>
<div class="content"></div>
</div>
</div>
- 头部为左中右布局,左边logo,中间搜索框,右边留几个按钮,如下:
<div class="header">
<img class="logo" src="@/assets/icons/logo.png">
<div class="search-box">
<input placeholder="搜索">
<div class="search-icon">
<i class="iconfont icon-guanbi"></i>
<i class="iconfont icon-sousou"></i>
</div>
</div>
<div class="right">
<button @click="switchTheme('default')">极简白</button>
<button @click="switchTheme('dark')">暗夜黑</button>
<button>打赏</button>
<button>关于我们</button>
</div>
</div>
<div class="nav">
<div class="nav-item" :class="communityState" @click="routerPush('community')">
<i class="iconfont icon-zhuye"></i>
<div>社区</div>
</div>
<div class="nav-item" :class="chatState" @click="routerPush('chat')">
<i class="iconfont icon-xiaoxi1"></i>
<div>聊天</div>
</div>
<div class="nav-item" :class="userState" @click="routerPush('user')">
<i class="iconfont icon-wode"></i>
<div>我的</div>
</div>
</div>
- 主内容即路由内容部分使用
<router-view>
左右路由页面占位。 - 主内容部分如下:
<div class="content">
<router-view></router-view>
</div>
style代码
.container {
height: 100%;
width: 86%;
margin: 0 auto;
}
.header {
padding-top: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
width: 86%;
margin: 0 auto;
background-color: @backgroundColor;
.logo {
height: 3rem;
}
.search-box {
background-color: @boxBackgroundColor;
width: 30rem;
border-radius: 2rem;
position: fixed;
left: 50%;
transform: translate(-50%);
padding: 0 1rem;
display: flex;
align-items: center;
justify-content: space-between;
input {
background-color: @boxBackgroundColor;
flex: 1;
border: none;
outline: none;
font-size: @textSize2;
color: @primaryText;
width: auto;
line-height: 2.4rem;
}
.search-icon{
display: flex;
i {
color: @secondary;
padding: 0 0.6rem;
cursor: pointer;
}
}
}
.right {
display: flex;
button {
padding: 0.5rem 1.2rem;
border: none;
border-radius: 2rem;
background-color: transparent;
font-size: @textSize2;
color: @primaryText;
cursor: pointer;
}
button:hover{
background-color: @boxBackgroundColor;
}
}
}
.main {
padding-top: 5.6rem;
display: flex;
height: 100%;
box-sizing: border-box;
}
.nav {
flex: 1;
.nav-item {
display: flex;
align-items: center;
font-size: @textSize2;
color: @primaryText;
font-weight: 600;
padding: 0.8rem 1rem;
margin-bottom: 0.5rem;
border-radius: 2rem;
cursor: pointer;
i{
font-size: 1.5rem;
}
div {
margin-left: 0.8rem;
}
}
.selected{
background-color: @boxBackgroundColor;
}
.nav-item:hover{
background-color: @boxBackgroundColor;
}
}
.content {
flex: 5;
padding-left: 2rem;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
.content::-webkit-scrollbar{
display: none;
}
.content::-moz-scrollbar{
display: none;
}
页面展示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/efdc54cf8cfb079522b3cb8caa1b3191.png)
路由局部跳转
- 在项目目录的
src\components
目录中新建如下三个vue
文件:
<template>
<div>
社区
</div>
</template>
<template>
<div>
聊天
</div>
</template>
<template>
<div>
我的
</div>
</template>
- 路由配置,在router/index.js添加如下配置:
- 其中,主路由页面是index.vue,该路由有三个子路由。
{
path: '/',
name: 'Index',
component: () => import('../views/index'),
children: [{
path: '/user',
name: 'User',
component: () => import('../components/user')
},
{
path: '/community',
name: 'Community',
component: () => import('../components/community')
},
{
path: '/chat',
name: 'Chat',
component: () => import('../components/chat')
}]
},
script代码
- js代码这里主要实现了头部的两个皮肤切换,以及导航栏的路由局部刷新功能,如下:
<script setup>
import { setTheme } from '@/theme/theme'
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
const router = useRouter()
const userState = ref('noSelected')
const communityState = ref('noSelected')
const chatState = ref('noSelected')
onMounted(() => {
routerPush('community')
})
const switchTheme = (theme) => {
setTheme(theme)
}
const routerPush = (path) => {
router.push(path)
communityState.value = 'noSelected'
chatState.value = 'noSelected'
userState.value = 'noSelected'
switch (path) {
case 'community':
communityState.value = 'selected'
break
case 'chat':
chatState.value = 'selected'
break
case 'user':
userState.value = 'selected'
break
default:
communityState.value = 'selected'
}
}
</script>
总结
- 至此,主页框架就基本完成了,上述的一些功能也可以正常使用,录制gif有点麻烦这里就没有展示,后面会不断完善细节。小伙伴们可以将自己的意见反馈发表到评论区,有合作想法的铁子欢迎私聊。。。