150 lines
3.4 KiB
Vue
150 lines
3.4 KiB
Vue
<template>
|
||
<div id="wrapper-w" :style="{'background-image':'url('+imgUrl.foot1+')'}">
|
||
<div class="div1">
|
||
<p style="font-weight:600;">版权所有：朝阳区委社会工委区民政局</p>
|
||
<p>京ICP备19040879号 Copyright 2019-2029 www.cyteam.orz.cn All Rights Reserved</p>
|
||
<p style="font-weight:600;">
|
||
<span>友情链接：</span>
|
||
<a style="font-weight:600;" href="https://inv-veri.chinatax.gov.cn/" target="_blank">发票查验平台</a>
|
||
<a
|
||
style="font-weight:600;"
|
||
href="http://beijing.chinatax.gov.cn/bjswjwz/"
|
||
target="_blank"
|
||
>北京市税务局</a>
|
||
<a style="font-weight:600;" href="https://www.tianyancha.com/" target="_blank">天眼查</a>
|
||
</p>
|
||
</div>
|
||
<div class="div2">
|
||
<div class="img-box">
|
||
<img :src="imgUrl.wxtp0" alt />
|
||
<p>朝阳社工e空间</p>
|
||
</div>
|
||
<div class="img-box">
|
||
<img :src="imgUrl.wxtp2" alt />
|
||
<p>朝阳社团办</p>
|
||
</div>
|
||
<div class="img-box">
|
||
<img :src="imgUrl.wxtp1" alt />
|
||
<p>朝阳社会组织</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
components: {},
|
||
props: {},
|
||
data () {
|
||
return {
|
||
imgUrl: {
|
||
foot: require('../../static/img/foot.png'),
|
||
foot1: require('../../static/img/foot1.png'),
|
||
wxtp0: require('../../static/img/wxtp0.png'),
|
||
wxtp1: require('../../static/img/wxtp1.png'),
|
||
wxtp2: require('../../static/img/wxtp2.png')
|
||
}
|
||
}
|
||
},
|
||
computed: {},
|
||
watch: {},
|
||
methods: {},
|
||
created () { },
|
||
mounted () { }
|
||
}
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
#wrapper-w {
|
||
// width: 1280px;
|
||
width: 100%;
|
||
height: 292px !important;
|
||
background-size: 100% 100%;
|
||
background-color: rgba($color: #000000, $alpha: 0.6);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.div2 {
|
||
width: 540px;
|
||
height: 110px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 30px;
|
||
|
||
.img-box{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
img {
|
||
width: 80px;
|
||
height: 80px;
|
||
margin-bottom: 11px;
|
||
}
|
||
|
||
p {
|
||
font-family: 'MicrosoftYaHei';
|
||
font-size: 16px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
& > .div1 {
|
||
display: inline-block;
|
||
height: 64px;
|
||
text-align: center;
|
||
|
||
p {
|
||
&:nth-of-type(1) {
|
||
font-family: 'MicrosoftYaHei';
|
||
font-size: 16px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: -1px;
|
||
color: #ffffff;
|
||
}
|
||
&:nth-of-type(2) {
|
||
font-family: 'MicrosoftYaHei';
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
margin-top: 15px;
|
||
letter-spacing: 0px;
|
||
color: #ffffff;
|
||
}
|
||
&:nth-of-type(3) {
|
||
margin-top: 15px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
span {
|
||
font-family: 'MicrosoftYaHei';
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #fff;
|
||
}
|
||
|
||
a {
|
||
margin-left: 10px;
|
||
color: #fff;
|
||
|
||
&:hover {
|
||
color: #0099ff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|