xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf:优化header样式

Browse Source
This commit is contained in:
Xwen
2023-12-14 16:25:38 +08:00
parent 120ff6c5a1
commit 2ca35a2924
3 changed files with 148 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Yi.Bbs.Vue3/src/assets/common/icons/dog.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1702540720819" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4776" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 490.666667c-19.989333 0-37.354667 3.2-52.074667 13.866666s-22.592 29.717333-22.592 44.8c0 19.136 9.066667 27.392 15.509334 34.133334 6.4 6.72 13.098667 11.797333 19.456 16.234666 12.672 8.917333 24.704 15.253333 24.704 15.253334a32 32 0 0 0 29.994666 0s12.032-6.336 24.704-15.253334c6.357333-4.437333 13.034667-9.514667 19.456-16.234666 6.442667-6.741333 15.509333-14.997333 15.509334-34.133334 0-15.082667-7.850667-34.133333-22.592-44.8-14.72-10.666667-32.085333-13.866667-52.074667-13.866666z m0.533333 32a32 32 0 0 0-32 32c0 14.464-3.754667 47.168 5.098667 80.213333 4.416 16.512 12.714667 34.304 28.458667 47.957333 15.722667 13.653333 37.930667 21.162667 62.442666 21.162667 52.650667 0 96-43.349333 96-96a32 32 0 0 0-32-32 32 32 0 0 0-32 32c0 18.048-13.930667 32-32 32-12.8 0-17.28-2.709333-20.522666-5.546667-3.285333-2.837333-6.314667-7.722667-8.533334-16.128-4.522667-16.789333-2.944-42.773333-2.944-63.658666a32 32 0 0 0-32-32z m-0.533333 0a32 32 0 0 0-32 32c0 20.906667 1.578667 46.869333-2.922667 63.658666-2.24 8.405333-5.269333 13.290667-8.533333 16.128-3.264 2.837333-7.744 5.546667-20.544 5.546667-18.048 0-32-13.952-32-32A32 32 0 0 0 384 576a32 32 0 0 0-32 32c0 52.650667 43.349333 96 96 96 24.533333 0 46.72-7.530667 62.464-21.162667 15.722667-13.653333 24.042667-31.445333 28.458667-47.957333 8.832-33.045333 5.077333-65.749333 5.077333-80.213333a32 32 0 0 0-32-32z m128-160a42.666667 42.666667 0 0 1-42.666667 42.666666 42.666667 42.666667 0 0 1-42.666666-42.666666 42.666667 42.666667 0 0 1 42.666666-42.666667 42.666667 42.666667 0 0 1 42.666667 42.666667z m-170.666667 0a42.666667 42.666667 0 0 1-42.666666 42.666666 42.666667 42.666667 0 0 1-42.666667-42.666666 42.666667 42.666667 0 0 1 42.666667-42.666667 42.666667 42.666667 0 0 1 42.666666 42.666667z m42.666667-202.666667c-233.173333 0-416 224.021333-416 448 0 112 48.704 200.746667 125.418667 257.664C298.133333 922.581333 400.768 949.333333 512 949.333333s213.866667-26.752 290.581333-83.669333S928 720 928 608c0-223.978667-182.826667-448-416-448z m0 64c190.976 0 352 195.605333 352 384 0 94.208-37.269333 160.085333-99.541333 206.293333C702.186667 860.48 612.842667 885.333333 512 885.333333c-100.842667 0-190.186667-24.853333-252.458667-71.04C197.269333 768.085333 160 702.208 160 608c0-188.394667 161.024-384 352-384z m203.52-147.2a32 32 0 0 0-41.237333 17.984l-42.666667 106.666667a32 32 0 0 0 17.834667 41.6 32 32 0 0 0 41.6-17.834667l27.648-69.184c14.613333 12.906667 31.146667 30.421333 45.504 54.677333 25.344 42.816 43.690667 100.48 36.010666 169.749334a32 32 0 0 0 28.245334 35.328 32 32 0 0 0 35.328-28.245334 336.469333 336.469333 0 0 0-44.501334-209.450666C787.925333 125.077333 751.36 90.581333 715.52 76.8z m-407.04 0c-35.84 13.781333-72.405333 48.277333-103.765333 101.290667a336.469333 336.469333 0 0 0-44.501334 209.450666 32 32 0 0 0 35.328 28.245334 32 32 0 0 0 28.245334-35.328c-7.68-69.269333 10.666667-126.933333 36.010666-169.749334a225.792 225.792 0 0 1 45.504-54.677333l27.648 69.184a32 32 0 0 0 41.6 17.834667 32 32 0 0 0 17.834667-41.6l-42.666667-106.666667A32 32 0 0 0 308.48 76.8z" p-id="4777" fill="#409eff"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

210
Yi.Bbs.Vue3/src/layout/AppHeader.vue
View File

@@ -1,76 +1,88 @@
<template> <template>
<el-menu <div class="header">
:default-active="activeIndex" <div class="logo" @click="enterIndex">
class="el-menu-demo" <div class="image">
mode="horizontal" <img class="img-icon" src="@/assets/common/icons/dog.svg" />
:ellipsis="false" </div>
@select="handleSelect" <div class="text">{{ configStore.name }}</div>
>
<el-menu-item class="logo" index="" @click="enterIndex" >
<img class="img-icon" style="width: 35px; height: 35px" src="@/assets/logo.ico" />{{configStore.name}}</el-menu-item>
<el-menu-item index="1" @click="enterIndex">主页</el-menu-item>
<el-sub-menu index="2">
<template #title>学习</template>
<el-menu-item index="2-1">学习 one</el-menu-item>
<el-menu-item index="2-2">学习 two</el-menu-item>
<el-menu-item index="2-3">学习 three</el-menu-item>
</el-sub-menu>
<el-sub-menu index="3">
<template #title>资源</template>
<el-menu-item index="3-1">资源 one</el-menu-item>
<el-menu-item index="3-2">资源 two</el-menu-item>
<el-menu-item index="3-3">资源 three</el-menu-item>
</el-sub-menu>
<el-sub-menu index="4">
<template #title>问答</template>
<el-menu-item index="4-1">问答 one</el-menu-item>
<el-menu-item index="4-2">问答 two</el-menu-item>
<el-menu-item index="4-3">问答 three</el-menu-item>
</el-sub-menu>
<div class="flex-grow" />
<el-menu-item index="5">
<div style="width: 350px;">
<el-input style="width: 300px;" v-model="searchText" placeholder="全站搜索" clearable prefix-icon="Search" />
<el-button type="primary" plain @click="search">搜索</el-button>
</div> </div>
</el-menu-item> <div class="tab">
<el-menu
<el-menu-item index="6" @click="enterProfile" > :default-active="activeIndex"
<AvatarInfo :size='30' :isSelf="true" /> mode="horizontal"
</el-menu-item> :ellipsis="false"
<el-sub-menu index="6"> @select="handleSelect"
<template #title>个人中心</template> >
<el-menu-item index="6-1" @click="enterProfile">进入个人中心</el-menu-item> <el-menu-item index="1" @click="enterIndex">主页</el-menu-item>
<el-menu-item index="6-2" @click="enterProfile">其他</el-menu-item> <el-sub-menu index="2">
<el-menu-item index="6-3" @click="logout">登出</el-menu-item> <template #title>学习</template>
</el-sub-menu> <el-menu-item index="2-1">学习 one</el-menu-item>
<el-menu-item index="2-2">学习 two</el-menu-item>
</el-menu> <el-menu-item index="2-3">学习 three</el-menu-item>
</el-sub-menu>
<el-sub-menu index="3">
<template #title>资源</template>
<el-menu-item index="3-1">资源 one</el-menu-item>
<el-menu-item index="3-2">资源 two</el-menu-item>
<el-menu-item index="3-3">资源 three</el-menu-item>
</el-sub-menu>
<el-sub-menu index="4">
<template #title>问答</template>
<el-menu-item index="4-1">问答 one</el-menu-item>
<el-menu-item index="4-2">问答 two</el-menu-item>
<el-menu-item index="4-3">问答 three</el-menu-item>
</el-sub-menu>
</el-menu>
</div>
<div class="search-bar">
<el-input
style="width: 300px"
v-model="searchText"
placeholder="全站搜索"
clearable
prefix-icon="Search"
>
<template #append>
<el-button type="primary" plain @click="search">搜索</el-button>
</template>
</el-input>
</div>
<div class="user">
<el-dropdown trigger="click">
<AvatarInfo :size="30" :isSelf="true" />
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="enterProfile"
>进入个人中心</el-dropdown-item
>
<el-dropdown-item @click="enterProfile">其他</el-dropdown-item>
<el-dropdown-item @click="logout">登出</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</template> </template>
<script setup> <script setup>
import AvatarInfo from '@/components/AvatarInfo.vue' import AvatarInfo from "@/components/AvatarInfo.vue";
import { ref } from 'vue' import { ref } from "vue";
import { useRouter } from 'vue-router' import { useRouter } from "vue-router";
import useUserStore from '@/stores/user.js' import useUserStore from "@/stores/user.js";
import useConfigStore from "@/stores/config"; import useConfigStore from "@/stores/config";
const configStore= useConfigStore(); const configStore = useConfigStore();
const router = useRouter() const router = useRouter();
const userStore =useUserStore(); const userStore = useUserStore();
const activeIndex = ref('1') const activeIndex = ref("1");
const searchText=ref('') const searchText = ref("");
const handleSelect = (key, keyPath) => { const handleSelect = (key, keyPath) => {
console.log(key, keyPath) console.log(key, keyPath);
} };
const logout= async()=>{ const logout = async () => {
ElMessageBox.confirm(`确定登出系统吗?`, "警告", { ElMessageBox.confirm(`确定登出系统吗?`, "警告", {
confirmButtonText: "确认", confirmButtonText: "确认",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning", type: "warning",
}).then( async() => { }).then(async () => {
//异步 //异步
await userStore.logOut(); await userStore.logOut();
//删除成功后，跳转到主页 //删除成功后，跳转到主页
@@ -80,33 +92,67 @@ const logout= async()=>{
message: "登出成功", message: "登出成功",
}); });
}); });
};
} const enterIndex = () => {
const enterIndex=()=>{
router.push("/index"); router.push("/index");
}; };
const enterProfile=()=>{ const enterProfile = () => {
router.push("/profile");} router.push("/profile");
};
const search=()=>{ const search = () => {
var routerPer = { path: `/discuss`,query:{q:searchText.value} }; var routerPer = { path: `/discuss`, query: { q: searchText.value } };
searchText.value=''; searchText.value = "";
router.push(routerPer) router.push(routerPer);
} };
</script> </script>
<style scoped> <style scoped lang="scss">
.header {
.logo{ padding: 0 100px;
min-width: 14rem; width: 1200px;
font-size: large; display: flex;
font-weight: 600; align-items: center;
justify-content: space-between;
}
.user {
display: flex;
align-items: center;
.el-dropdown-link {
cursor: pointer;
display: flex;
align-items: center;
}
}
.logo {
cursor: pointer;
display: flex;
align-items: center;
.image {
width: 30px;
height: 30px;
img {
width: 100%;
height: 100%;
}
}
.text {
font-weight: bold;
margin-left: 10px;
}
}
.tab {
.el-menu {
height: 90%;
}
:deep(.el-menu--horizontal) {
border-bottom: none;
}
} }
.flex-grow { .flex-grow {
flex-grow: 1; flex-grow: 1;
} }
.img-icon .img-icon {
{
margin-right: 0.5rem; margin-right: 0.5rem;
} }
</style> </style>

32
Yi.Bbs.Vue3/src/layout/Index.vue
View File

@@ -1,27 +1,33 @@
<template> <template>
<div class="common-layout"> <div class="common-layout">
<el-container> <el-container>
<el-header> <el-header class="common-header">
<AppHeader /> <AppHeader />
</el-header> </el-header>
<el-main> <el-main>
<AppBody /> <AppBody />
</el-main> </el-main>
</el-container> </el-container>
</div> </div>
</template> </template>
<script setup> <script setup>
import AppHeader from "./AppHeader.vue" import AppHeader from "./AppHeader.vue";
import AppBody from "./AppBody.vue" import AppBody from "./AppBody.vue";
</script> </script>
<style scoped> <style scoped lang="scss">
.el-main{ .common {
margin: 0; &-header {
padding: 0; width: 100%;
min-height: 10rem; display: flex;
background-color: #F0F2F5; justify-content: center;
}
} }
</style>
.el-main {
margin: 0;
padding: 0;
min-height: 10rem;
background-color: #f0f2f5;
}
</style>