odjbin/sist_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

头部鼠标经过效果

Browse Source
This commit is contained in:
clay
2022-01-03 16:27:34 +08:00
parent 61fe34bb8a
commit ba60c3dc5e
2 changed files with 119 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@@ -64,7 +64,7 @@ export default {
.headers {
width: 100%;
z-index: 9999;
position: fixed;
position: absolute;
top: 0;
left: 0;
}

146
src/views/header/index.vue
View File

@@ -41,25 +41,83 @@
<!--导航部分-->
<div class="bottom">
<el-row>
<el-col :span="4">
<el-col v-show="width>=992" :xs="1" :sm="1" :md="4" :lg="4" :xl="4">
<div class="icon">
<div class="icont"><img src="@/assets/header/sy_logo1@2x.png" alt=""></div>
<div class="iconb"><img src="@/assets/header/sy_logo2@2x.png" alt=""></div>
</div>
</el-col>
<el-col :offset="1" :span="19">
<div class="banner">
<router-link to="/" ><div>学院首页</div></router-link>
<router-link to="/sp" ><div>学院概况</div></router-link>
<router-link to="/ts" ><div>党群工作</div></router-link>
<router-link to="/et" ><div>师资队伍</div></router-link>
<router-link to="/" ><div>教育教学</div></router-link>
<router-link to="/" ><div>科学研究</div></router-link>
<router-link to="/" ><div>学科建设</div></router-link>
<router-link to="/" ><div>学生工作</div></router-link>
<router-link to="/" ><div>校友工作</div></router-link>
<router-link to="/" ><div>国际化</div></router-link>
<router-link to="/" ><div>资料下载</div></router-link>
<el-col v-show="width>=992" :span="1">
<div class="grid-content"></div>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19" :span="19">
<div class="banner">
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>学院首页</div>
</div>
</router-link>
<router-link to="/sp">
<div class="link_text">
<div class="border"></div>
<div>学院概况</div>
</div>
</router-link>
<router-link to="/ts">
<div class="link_text">
<div class="border"></div>
<div>党群工作</div>
</div>
</router-link>
<router-link to="/et">
<div class="link_text">
<div class="border"></div>
<div>师资队伍</div>
</div>
</router-link>
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>教育教学</div>
</div>
</router-link>
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>科学研究</div>
</div>
</router-link>
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>学科建设</div>
</div>
</router-link>
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>学生工作</div>
</div>
</router-link>
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>校友工作</div>
</div>
</router-link>
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>国际化</div>
</div>
</router-link>
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>资料下载</div>
</div>
</router-link>
</div>
</el-col>
</el-row>
@@ -75,6 +133,11 @@
<script>
export default {
name: "index",
data() {
return {
width: document.documentElement.clientWidth
}
},
methods: {
switchLang() {
let lang = ''
@@ -106,7 +169,13 @@ export default {
cursor: pointer;
font-size: 1.6rem;
}
.link:hover{
.link{
width: 80%;
margin: 0 auto;
border-radius: 1.1rem;
}
.link:hover {
background: rgba(255, 255, 255, 0.7);
}
@@ -116,44 +185,65 @@ export default {
height: 8rem;
background: rgba(25, 86, 188, 0.6);
border-radius: 0rem 0rem 2rem 2rem;
.icon{
.icon {
margin-left: 20%;
div{
div {
margin-top: 1rem;
}
.icont{
img{
.icont {
img {
width: 18.3rem;
}
}
.iconb{
img{
.iconb {
img {
width: 8.9rem;
}
}
}
.banner{
a{
.banner {
a {
text-decoration: none;
color: #ffffff;
}
width: 100%;
height: 8rem;
clear: left;
div{
.link_text {
width: 9%;
height: 100%;
line-height: 8rem;
line-height: 8.2rem;
text-align: center;
float: left;
font-size: 1.4rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
cursor:pointer;
cursor: pointer;
position: relative;
.border {
position: absolute;
top: 0;
left: 10%;
width: 80%;
margin: 0 auto;
height: 0.4rem;
background: transparent;
border-radius: 0.2rem;
}
}
div:hover{
background: rgba(255, 255, 255, 0.7);
.link_text:hover{
.border{
background-color: #fff;
}
}
}
}