williamet/cas_tt_cloud_web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

webHead up

Browse Source
This commit is contained in:
熊丽君
2021-12-30 16:35:17 +08:00
parent 79a82e7c51
commit bd085bbe8b
1 changed files with 121 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/components/webHead/index.vue
View File

@ -2,29 +2,97 @@
<div class="webHead">
<el-row>
<el-col :span="8">
<img src="../../assets/logo.png" class="logo">
<img src="../../assets/logo.png" class="logo" />
</el-col>
<el-col :span="16">
<ul class="menu">
<li class="menu-item1">
<div class="menu-item-tit">首页</div>
<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">解决方案</div>
<div
class="menu-item-tit"
:class="pagePath == '/innovate' ? 'active' : ''"
@click="handlePath('/innovate')"
>
创新服务
</div>
</li>
<li class="menu-item1">
<div class="menu-item-tit">创新服务</div>
<div
class="menu-item-tit"
:class="pagePath == '/activity' ? 'active' : ''"
@click="handlePath('/activity')"
>
活动报名
</div>
</li>
<li class="menu-item1">
<div class="menu-item-tit">活动报名</div>
<div
class="menu-item-tit"
:class="pagePath == '/about' ? 'active' : ''"
@click="handlePath('/about')"
>
关于我们
</div>
</li>
<li class="menu-item1">
<div class="menu-item-tit">关于我们</div>
<div
class="menu-item-tit"
:class="pagePath == '/login' ? 'active' : ''"
@click="handlePath('/login')"
>
登录注册
</div>
</li>
<li class="menu-item1">
<div class="menu-item-tit active">登录注册</div>
</li>
</ul>
</el-col>
</el-row>
@ -32,11 +100,25 @@
</template>
<script setup>
import { defineComponent, onMounted, reactive } from "vue";
import { defineComponent, onMounted, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
let state = reactive({});
let pagePath = ref("");
const route = useRoute();
const router = useRouter();
watch(
() => route.path,
(newVal, oldVal) => {
pagePath.value = newVal;
}
);
onMounted(() => {
console.log("onmunted");
pagePath.value = route.path;
});
function handlePath(path) {
pagePath.value = path;
router.push(path);
}
</script>
<style lang="scss">
@ -55,6 +137,7 @@ dt {
}
.webHead {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
@ -69,9 +152,34 @@ dt {
}
.menu {
display: flex;
.solution {
position: relative;
.show_box {
display: none;
position: absolute;
z-index: 2001;
bottom: -170px;
width: 100%;
text-align: center;
background-color: red;
div {
height: 42px;
line-height: 42px;
background-color: #f2f6ff;
}
._active {
background-color: #fff;
}
}
&:hover {
.show_box {
display: block;
}
}
}
.menu-item1 {
flex: 1;
text-align: right;
text-align: center;
.menu-item-tit {
display: inline-block;
padding: 25px 0;