williamet/cas_cloud_web_i18n_old
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

忘了写到哪了

Browse Source
This commit is contained in:
quantulr
2022-08-30 10:36:30 +08:00
parent 1d2f37bfe1
commit 9e00dce03c
44 changed files with 5136 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

273
src/components/WebsiteHeader/index.vue Normal file
View File

@ -0,0 +1,273 @@
<template>
<div class="webHead">
<el-row>
<el-col :span="8">
<img src="@/assets/logo/logo.png" class="logo" />
</el-col>
<el-col :span="16">
<ul class="menu">
<li class="menu-item1">
<div
class="menu-item-tit"
:class="pagePath == '/' ? 'active' : ''"
@click="handlePath('/')"
>
首页
</div>
</li>
<li class="menu-item1 solution">
<div
class="menu-item-tit"
:class="pagePath.indexOf('/solution/') != -1 ? 'active' : ''"
>
解决方案
</div>
<div class="show_box">
<div
class="pointer"
:class="pagePath == '/solution/small' ? 'x_blue _active' : ''"
@click="handlePath('/solution/small')"
>
中小型企业服务
</div>
<div
class="pointer"
:class="pagePath == '/solution/large' ? 'x_blue _active' : ''"
@click="handlePath('/solution/large')"
>
大型企业服务
</div>
<div
class="pointer"
:class="
pagePath == '/solution/government' ? 'x_blue _active' : ''
"
@click="handlePath('/solution/government')"
>
政府区域服务
</div>
<div
class="pointer"
:class="
pagePath == '/solution/scientific' ? 'x_blue _active' : ''
"
@click="handlePath('/solution/scientific')"
>
科研区域服务
</div>
</div>
</li>
<li class="menu-item1">
<div
class="menu-item-tit"
:class="pagePath == '/innovate' ? 'active' : ''"
@click="handlePath('/innovate')"
>
创新服务
</div>
</li>
<li class="menu-item1">
<div
class="menu-item-tit"
:class="pagePath == '/activity' ? 'active' : ''"
@click="handlePath('/activity')"
>
活动报名
</div>
</li>
<li class="menu-item1">
<div
class="menu-item-tit"
:class="pagePath == '/about' ? 'active' : ''"
@click="handlePath('/about')"
>
关于我们
</div>
</li>
<li class="menu-item1" style="display: flex; justify-content: center">
<div
v-if="!userStore.avatar"
class="menu-item-tit"
:class="pagePath == '/login' ? 'active' : ''"
@click="handlePath('/login')"
>
登录注册
</div>
<el-dropdown
v-else
style="margin-top: 20px"
class="avatar-container right-menu-item hover-effect"
trigger="click"
>
<div class="avatar-wrapper">
<img :src="userStore.avatar" class="user-avatar" />
<i class="el-icon-caret-bottom" />
</div>
<template #dropdown>
<el-dropdown-menu>
<!-- <router-link to="/identity/index"> -->
<el-dropdown-item @click="handlePage"
>个人中心</el-dropdown-item
>
<!-- </router-link> -->
<el-dropdown-item divided @click="logout">
<span>退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</li>
</ul>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { ElMessageBox } from "element-plus";
import { defineComponent, onMounted, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
let state = reactive({});
let pagePath = ref("");
const route = useRoute();
const router = useRouter();
watch(
() => route.path,
(newVal, oldVal) => {
pagePath.value = newVal;
}
);
pagePath.value = route.path;
function handlePage() {
// router.push("/identity/index");
// let routeData = "";
// const selectRole = localStorage.getItem("select_identity");
// if (selectRole > 0) {
// routeData = router.resolve({ path: "/admin" });
// } else {
// routeData = router.resolve({ path: "/identity/index" });
// }
// window.open(routeData.href, "_blank");
const routeData = router.resolve({ path: "/identity/index" });
window.open(routeData.href, "_blank");
}
function handlePath(path) {
pagePath.value = path;
router.push(path);
}
function logout() {
ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
useUserStore()
.logOut()
.then(() => {
location.href = "/";
});
})
.catch(() => {});
}
</script>
<style lang="scss">
ol,
ul,
dl {
margin: 0;
padding: 0;
}
li,
dd,
dt {
padding: 0;
margin: 0;
list-style: none;
}
.webHead {
position: fixed;
z-index: 2001;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 0 260px;
box-sizing: border-box;
background: #ffffff;
box-shadow: 0px 0px 43px 0px rgba(0, 42, 255, 0.09);
.logo {
height: 30px;
margin: 25px 0;
}
.menu {
display: flex;
.solution {
position: relative;
.show_box {
display: none;
position: absolute;
top: 80px;
width: 100%;
text-align: center;
background-color: red;
div {
height: 42px;
line-height: 42px;
font-size: 14px;
color: #666666;
background-color: #f2f6ff;
}
._active {
background-color: #fff;
}
}
&:hover {
.show_box {
display: block;
}
}
}
.menu-item1 {
flex: 1;
text-align: center;
.menu-item-tit {
display: inline-block;
padding: 25px 0;
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #000;
cursor: pointer;
}
.menu-item-tit:hover {
opacity: 0.8;
}
.active {
font-size: 20px;
font-weight: 500;
border-bottom: 2.5px solid #000;
}
}
}
}
</style>
<style lang="scss" scoped>
.user-avatar {
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
}
</style>