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 { .headers {
width: 100%; width: 100%;
z-index: 9999; z-index: 9999;
position: fixed; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
} }

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

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