117 lines
3.4 KiB
Vue
117 lines
3.4 KiB
Vue
|
<template>
|
||
|
|
<!-- 左边导航栏 -->
|
||
|
|
<div class="bgimg">
|
||
|
|
<div class="pc-nav">
|
||
|
|
<div class="pc-nav-item">
|
||
|
|
<img src="/img/index/home1.png" alt=""></img>
|
||
|
|
<span class="span" style="color: #FFA234;">官网首页</span>
|
||
|
|
<img src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
|
||
|
|
</div>
|
||
|
|
<div class="pc-nav-item">
|
||
|
|
<img src="/img/index/aboutus.png" alt=""></img>
|
||
|
|
<span class="span">关于我们</span>
|
||
|
|
</div>
|
||
|
|
<div class="pc-nav-item">
|
||
|
|
<img src="/img/index/news.png" alt=""></img>
|
||
|
|
<span class="span">新闻动态</span>
|
||
|
|
</div>
|
||
|
|
<div class="pc-nav-item">
|
||
|
|
<img src="/img/index/message.png" alt=""></img>
|
||
|
|
<span class="span">信息公开</span>
|
||
|
|
</div>
|
||
|
|
<div class="pc-nav-item">
|
||
|
|
<img src="/img/index/baike.png" alt=""></img>
|
||
|
|
<span class="span">团务百科</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="line_h"></div>
|
||
|
|
<div class="goback">返回首页</div>
|
||
|
|
<div style="margin-top: 50px;margin-left: 40px;">
|
||
|
|
<div class="box_1">无障碍阅读</div>
|
||
|
|
<div class="box_2">进入适老模式</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import '@/assets/index.scss';
|
||
|
|
.bgimg{
|
||
|
|
width: 350px;
|
||
|
|
height: 100vh;
|
||
|
|
background-image: url('/img/index/leftHead.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 1000;
|
||
|
|
.pc-nav {
|
||
|
|
margin-left: 70px;
|
||
|
|
margin-top: 250px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.pc-nav-item {
|
||
|
|
width: 100%;
|
||
|
|
// height: 18px;
|
||
|
|
font-family: Microsoft YaHei UI;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 18px;
|
||
|
|
color: #FFFFFF;
|
||
|
|
text-shadow: 0px 1px 0px rgba(0,0,64,0.4);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 25px;
|
||
|
|
&:hover{
|
||
|
|
cursor: pointer;
|
||
|
|
color: #FFA234;
|
||
|
|
}
|
||
|
|
.span{
|
||
|
|
margin-left: 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.line_h{
|
||
|
|
width: 220px;
|
||
|
|
height: 1px;
|
||
|
|
background: #FFFFFF;
|
||
|
|
opacity: 0.2;
|
||
|
|
margin-left: 40px;
|
||
|
|
}
|
||
|
|
.goback{
|
||
|
|
width: 72px;
|
||
|
|
height: 17px;
|
||
|
|
font-family: Microsoft YaHei UI;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 18px;
|
||
|
|
color: #FFFFFF;
|
||
|
|
margin-left:114px ;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
.box_1{
|
||
|
|
width: 200px;
|
||
|
|
height: 58px;
|
||
|
|
line-height: 58px;
|
||
|
|
background: #FFA234;
|
||
|
|
font-family: Microsoft YaHei UI;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 18px;
|
||
|
|
text-align: center;
|
||
|
|
color: #FFFFFF;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.box_2{
|
||
|
|
width: 200px;
|
||
|
|
height: 58px;
|
||
|
|
line-height: 58px;
|
||
|
|
background: #4EB64B;
|
||
|
|
margin-top: 16px;
|
||
|
|
font-family: Microsoft YaHei UI;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 18px;
|
||
|
|
color: #FFFFFF;
|
||
|
|
text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|