Skip to content

M
million
Commit c299eab8 authored by zhengke's avatar zhengke
Browse files
Options

新增底部

parent f3625b06
Hide whitespace changes
Inline Side-by-side
Showing with 426 additions and 0 deletions
src/components/navs/hor-btm.vue 0 → 100644
View file @ c299eab8
<style>
.hor_BtmContent {
display: inline-block;
width: 100%;
background: #fff;
}
.hor_BtmContent .footer-top {
padding: 0 40px 18px;
background-color: #313131;
}
.hor_BtmContent .footer-link {
display: inline-block;
width: 100%;
height: 44px;
background-color: #292929;
text-align: left;
font-weight: 700;
}
.hor_BtmContent .hor_footuu li:first-child {
color: #fff;
margin-left: 24px;
}
.hor_BtmContent .hor_footuu {
margin: 0;
padding: 0;
}
.hor_BtmContent .hor_footuu li {
list-style-type: none;
display: inline-block;
margin-left: 30px;
font-size: 15px;
color: #76ccff;
line-height: 44px;
position: relative;
cursor: pointer;
}
.hor_BtmContent .hor_footuu li a {
color: #76ccff;
}
.hor_BtmContent .hor_BtmContent ul {
margin: 0;
padding: 0;
}
.hor_BtmContent .other_li:before {
position: absolute;
top: 10px;
left: -16px;
content: '';
width: 1px;
height: 25px;
background-color: rgba(58, 58, 58, .8);
}
.hor_BtmContent .foot_content {
display: flex;
justify-content: space-around;
width: 100%;
text-align: left;
}
.hor_BtmContent .footer-box {
width: 100%;
padding: 20px;
font-size: 14px;
text-align: left;
}
.hor_BtmContent .footer-box .footer_title1 {
font-size: 15px;
color: #fff;
margin-bottom: 15px;
font-weight: 400;
letter-spacing: 1px;
}
.hor_BtmContent .footer_table {
border-collapse: separate;
border-spacing: 0;
margin-bottom: 10px;
}
.hor_BtmContent .footer_table td {
color: #b1b1b1;
text-align: left;
vertical-align: middle;
font-size: 14px;
}
.hor_BtmContent .footer_tbtitle {
min-width: 100px;
color: #9bdaff !important;
}
.hor_BtmContent .footer-box>* {
display: block;
margin-bottom: 10px;
}
.hor_BtmContent .social-link a {
display: inline-block;
text-decoration: none;
width: 50px;
height: 50px;
border-radius: 50%;
color: #fff;
line-height: 49px;
text-align: center;
margin: 15px 0 0 20px;
-webkit-box-shadow: 0 3px 12px rgba(39, 39, 39, .95);
-moz-box-shadow: 0 3px 12px rgba(39, 39, 39, .95);
box-shadow: 0 3px 12px rgba(39, 39, 39, .95);
}
.hor_BtmContent .social-link a:first-child {
margin-left: 0;
}
.hor_BtmContent .foot_line {
background-color: #1bb71f
}
.hor_BtmContent .foot_fb {
background-color: #334f8d;
}
.hor_BtmContent .foot_mail {
background-color: #00a6ff;
}
.hor_BtmContent .footer_logo_block {
display: block;
margin-top: 5px;
}
.hor_BtmContent .footer_fb_group {
display: block;
width: 300px;
height: 130px;
background-color: #2b2b2b;
}
.footer_fb_group a img {
height: 100%;
min-height: initial;
width: auto;
}
.hor_BtmContent .footer_qrcode a {
display: inline-block;
width: 100px;
height: 100px;
}
.hor_BtmContent .footer_qrcode a span {
color: #fff;
letter-spacing: 2px;
}
.hor_BtmContent .branch-company {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-bottom: 20px;
background-color: #2d2d2d;
}
.hor_BtmContent .footer-bottom {
width: 100%;
padding: 30px;
text-align: center;
}
.hor_BtmContent .sponsor {
display: inline-block;
}
.hor_BtmContent .sponsor>a {
float: left;
width: 40px;
text-decoration: none;
margin-right: 10px;
}
.hor_BtmContent .sponsor>a img {
width: 100%;
}
.hor_BtmContent .copyright {
display: inline-block;
width: 100%;
font-size: 13px;
margin: 20px 0;
color: #757575;
}
.hor_BtmContent .branch-company .footer-box {
width: 33%;
}
.hor_BtmContent .footer-watermark {
position: fixed;
top: 110px;
z-index: 999;
width: auto;
}
.hor_BtmContent .footer_Left {
left: 10px;
}
.hor_BtmContent .footer_Right {
right: 10px;
}
.footer-watermark>div {
width: auto;
width: 140px;
height: 140px;
margin-bottom: 10px;
}
.footer-watermark>div img {
width: 100%;
height: 100%;
}
@media only screen and (max-width: 930px) {
.hor_BtmContent .footer-top {
padding: 0 15px;
}
.hor_BtmContent .footer-link {
height: auto;
}
.hor_BtmContent .hor_footuu li:first-child {
margin-left: 24px;
}
.hor_BtmContent .hor_footuu li {
font-size: 13px;
margin-left: 28px;
}
.hor_BtmContent .foot_content {
flex-wrap: wrap;
justify-content: flex-start;
}
.hor_BtmContent .footer-box {
width: 50%;
}
}
@media only screen and (max-width: 520px) {
.hor_BtmContent .footer-box {
width: 100%;
}
}
</style>
<template>
<div class="hor_BtmContent">
<template v-if="dataList&&dataList.Config">
<div class="footer-top">
<div class="footer-link">
<ul class="hor_footuu">
<li>{{dataList.Config.Name}}</li>
<li class="other_li" v-for="(item,index) in dataList.FooterList" :key="index">
<a :href="item.Url" target="_blank">{{item.Title}}</a>
</li>
</ul>
</div>
<div class="foot_content">
<div class="footer-box">
<div class="footer_title1">聯絡資訊</div>
<table class="footer_table">
<tbody>
<tr>
<td class="footer_tbtitle">地址</td>
<td>
{{dataList.Config.Address}}
</td>
</tr>
<tr>
<td class="footer_tbtitle">電話</td>
<td>{{dataList.Config.Tel}}</td>
</tr>
<tr>
<td class="footer_tbtitle">傳真</td>
<td>{{dataList.Config.Fax}}</td>
</tr>
<tr>
<td class="footer_tbtitle">服務時間</td>
<td>{{dataList.Config.ServiceTime}}</td>
</tr>
</tbody>
</table>
<div class="social-link">
<a class="foot_line" :href="dataList.Config.LineUrl"></a>
<a class="foot_fb" :href="dataList.Config.FaceBookUrl"></a>
<a class="foot_mail" :href="dataList.Config.ServiceMail"></a>
</div>
</div>
<div class="footer-box">
<div class="footer_title1">公司資訊</div>
<table class="footer_table">
<tbody>
<tr>
<td class="footer_tbtitle">{{dataList.Config.TypeStr}}</td>
<td>{{dataList.Config.JiaoGuanCode}}</td>
</tr>
<tr>
<td class="footer_tbtitle">品保協會會員</td>
<td>{{dataList.Config.PingBaoCode}}</td>
</tr>
<tr>
<td class="footer_tbtitle">統一編號</td>
<td>{{dataList.Config.UnifyCode}}</td>
</tr>
<tr>
<td class="footer_tbtitle">代表人</td>
<td>{{dataList.Config.Behalf}}</td>
</tr>
</tbody>
</table>
</div>
<div class="footer-box">
<div class="footer_logo_block">
<img style="width:120px;height:auto;" :src="dataList.Config.WhiteLogo" />
</div>
<div class="footer_fb_group">
<a :href="dataList.Config.FaceBookUrl"><img :src="dataList.Config.Logo" alt="" /></a>
</div>
<div class="footer_qrcode">
<a :href="dataList.Config.LineUrl">
<span>Line</span>
<img src="" alt="">
</a>
<a :href="dataList.Config.FaceBookUrl">
<span>Facebook</span>
<img src="" alt="">
</a>
</div>
</div>
</div>
<div class="branch-company">
<div class="footer-box">
<div class="footer_title1">{{dataList.BranchList[0].Name}}</div>
<table class="footer_table">
<tbody>
<tr>
<td class="footer_tbtitle">地址</td>
<td>{{dataList.BranchList[0].Address}}</td>
</tr>
<tr>
<td class="footer_tbtitle">電話</td>
<td>{{dataList.BranchList[0].Tel}}</td>
</tr>
<tr>
<td class="footer_tbtitle">傳真</td>
<td>{{dataList.BranchList[0].Fax}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="sponsor">
<a :href="item.url?item.url:'javascript:;'" target="_blank" v-for="(item,index) in dataList.BottomList"
:key="index">
<img :src="item.icon" />
</a>
</div>
<div class="copyright">
© {{year}} {{dataList.Config.Name}}. All rights reserved.
</div>
</div>
<div class="footer-watermark footer_Left">
<template v-if="dataList&&dataList.AdLeftList">
<div v-for="(item,index) in dataList.AdLeftList" :key="index">
<a :href="item.AdLink" target="_blank">
<img style="width:100%" :src="item.AdImg" />
</a>
</div>
</template>
</div>
<div class="footer-watermark footer_Right">
<template v-if="dataList&&dataList.AdRightList">
<div v-for="(item,index) in dataList.AdRightList" :key="index">
<a :href="item.AdLink" target="_blank">
<img style="width:100%" :src="item.AdImg" />
</a>
</div>
</template>
</div>
</template>
</div>
</template>
<script>
export default {
props: ["dataList"],
data() {
return {
year: ''
};
},
created() {},
mounted() {
//获取当前年
var myDate = new Date();
this.year = myDate.getFullYear();
},
methods: {},
};
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment