williamet/jiace-web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

公共部分的布局

Browse Source
This commit is contained in:
熊丽君
2021-08-03 13:42:38 +08:00
parent f0d1deaf6f
commit 3410256837
11 changed files with 174 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/views/index.vue
View File

@ -1,8 +1,37 @@
<template>
<div class="index_page">
<!-- 右侧悬浮 -->
<div class="slid">
<div class="item-box">
<el-tooltip class="item" effect="dark" placement="left-start">
<div class="tip_img" slot="content">
<img src="@/assets/image/scanloginqrcode.jpg" alt="" />
</div>
<div>
<img src="@/assets/image/weixin.png" />
<div class="text">公众号</div>
</div>
</el-tooltip>
</div>
<div class="item-box">
<el-tooltip class="item" effect="dark" placement="left-start">
<div class="tip_img" slot="content">
<img src="@/assets/image/scanloginqrcode.jpg" alt="" />
</div>
<div>
<img src="@/assets/image/qq.png" />
<div class="text">QQ群</div>
</div>
</el-tooltip>
</div>
<div class="item-box">
<img src="@/assets/image/service.png" />
<div class="text">在线客服</div>
</div>
</div>
<!-- <div class="img_box">
<img src="@/assets/image/toubu.png" alt="" />
</div> -->
<img src="@/assets/image/toubu.png" alt="" />
</div> -->
<!-- 整体宽度 -->
<div class="content">
<!-- 头部 -->
@ -43,6 +72,60 @@
<div class="content">
<router-view></router-view>
</div>
<div class="my_footer">
<div style="height: 4px;background: #FFA32C;"></div>
<div class="footer_one content">
<p>
<span>
<i><img src="@/assets/image/icon1.png" alt=""/></i>
总浏览量：1020</span
>
<span>
<i><img src="@/assets/image/icon1.png" alt=""/></i>
今日浏览：1020</span
>
</p>
<div class="footer_two">
<div class="footer_left">
<div class="footer_left_one">
<span class="footer_left_l">版权声明</span>
<span class="footer_left_r">
<i><img src="@/assets/image/icon3.png" alt=""/></i>
客服热线：(周一至周五8:30-18:00)
</span>
</div>
<div class="footer_left_two">
<span class="footer_left_l">用户协议</span>
</div>
<div class="footer_left_three">
<span class="footer_left_l">意见反馈</span>
<span class="footer_left_r">
<i><img src="@/assets/image/icon2.png" alt=""/></i>
公司地址：安徽省合肥市蜀山区黄山市601号412-414
</span>
</div>
</div>
<div class="footer_right">
<div class="item">
<img src="@/assets/image/scanloginqrcode.jpg" alt="" />
<div>嘉策公众号</div>
</div>
<div class="item">
<img src="@/assets/image/scanloginqrcode.jpg" alt="" />
<div>QQ群</div>
</div>
</div>
</div>
<div class="footer_three">
<div>
<span>商务合作</span>
<span>政策服务</span>
<span>在线解答</span>
</div>
<p>版权服务：合肥嘉策信息技术服务有限公司 皖ICP备45619723号</p>
</div>
</div>
</div>
</div>
</template>
@ -108,6 +191,26 @@ export default {
// left: 0;
// z-index: -1;
// }
.slid {
width: 82px;
height: 246px;
position: fixed;
left: 50%;
border: 1px solid #dcdcdc;
border-bottom: 0;
background: #ffffff;
margin-left: 720px;
top: 400px;
.item-box {
text-align: center;
padding: 15px 0;
border-bottom: 1px solid #dcdcdc;
.text {
font-size: 16px;
color: #666;
}
}
}
.header {
height: 206px;
@ -191,7 +294,74 @@ export default {
}
}
}
.my_footer {
.footer_one {
p {
text-align: center;
font-size: 14px;
color: #666;
span {
i {
margin-right: 3px;
img {
vertical-align: middle;
}
}
}
span:nth-child(2) {
margin-left: 40px;
}
}
}
.footer_two {
border-bottom: 1px solid #dcdcdc;
display: flex;
justify-content: space-between;
align-items: center;
.footer_left {
padding: 50px 0;
.footer_left_two {
margin: 20px 0;
}
.footer_left_l {
font-size: 18px;
color: #333;
margin-right: 30px;
}
.footer_left_r {
i {
img {
vertical-align: middle;
}
}
}
}
.footer_right {
display: flex;
.item {
font-size: 18px;
color: #333;
margin-right: 50px;
text-align: center;
}
}
}
.footer_three {
text-align: center;
padding: 36px 0;
div {
font-size: 16px;
color: #3394ff;
span:nth-child(2) {
margin: 0 39px;
}
}
p {
font-size: 14px;
color: #333;
}
}
}
.el-tabs--border-card {
border: 0;
}
@ -240,7 +410,6 @@ export default {
padding: 0 100px;
}
}
@media (max-width: 1024px) {
.chart-wrapper {
padding: 8px;