|
|
|
|
@ -1,83 +1,47 @@ |
|
|
|
|
<template> |
|
|
|
|
<div> |
|
|
|
|
<div v-if="showDefaultPath.includes($route.path)" |
|
|
|
|
class="footer"> |
|
|
|
|
<div class="relative"> |
|
|
|
|
<div class="info"> |
|
|
|
|
<div class="leftBox"> |
|
|
|
|
<img class="m-b-20" |
|
|
|
|
style="width: 300px" |
|
|
|
|
src="@/assets/images/iasf.png" |
|
|
|
|
<div class="footer"> |
|
|
|
|
<div class="info"> |
|
|
|
|
<div class="left"> |
|
|
|
|
<img class="logo" |
|
|
|
|
src="@/assets/images/logo3.png" |
|
|
|
|
alt=""> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<div class="line"> |
|
|
|
|
<img class="icon" |
|
|
|
|
src="@/assets/images/address.png" |
|
|
|
|
alt=""> |
|
|
|
|
<p class="meta">Copyright ©2002- 2021</p> |
|
|
|
|
<p class="meta">Institute of Advanced Science Facilities, ShenzhenIASF</p> |
|
|
|
|
<p class="meta">Tel：400-0010-998</p> |
|
|
|
|
深圳市光明区新湖街道圳圆路268号3号楼 |
|
|
|
|
</div> |
|
|
|
|
<div class="column-wrap"> |
|
|
|
|
<template v-for="(item, i) in columns"> |
|
|
|
|
<div v-if="isIasf || (!isIasf && i < 5)" |
|
|
|
|
:key="i" |
|
|
|
|
class="column"> |
|
|
|
|
<h6 @click="columnTo(item)">{{ item.columnName }}</h6> |
|
|
|
|
<ul v-if="item.children.length && !isIasf" |
|
|
|
|
class="children"> |
|
|
|
|
<li v-for="(column, j) in item.children" |
|
|
|
|
:key="j" |
|
|
|
|
@click="columnTo(column)">{{ column.columnName }}</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<div class="line"> |
|
|
|
|
<img class="icon" |
|
|
|
|
src="@/assets/images/tel.png" |
|
|
|
|
alt=""> |
|
|
|
|
0755-21096000 |
|
|
|
|
</div> |
|
|
|
|
<div class="line"> |
|
|
|
|
<img class="icon" |
|
|
|
|
src="@/assets/images/mail.png" |
|
|
|
|
alt=""> |
|
|
|
|
gad@mail.iasf.ac.cn |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<a class="copyright">粤ICP备2020131940号 粤公安网34565432456765432号</a> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div v-if="showContactPath.includes($route.path)" |
|
|
|
|
class="contact"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<div class="title"> |
|
|
|
|
<h6>Contact us</h6> |
|
|
|
|
<p class="text">CONTACT US</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="region"> |
|
|
|
|
<img class="dot" |
|
|
|
|
src="@/assets/images/dot.png" |
|
|
|
|
<div class="qrcodes"> |
|
|
|
|
<div class="item"> |
|
|
|
|
<img class="qrcode" |
|
|
|
|
src="@/assets/images/qrcode.png" |
|
|
|
|
alt=""> |
|
|
|
|
<p class="name">Shenzhen</p> |
|
|
|
|
<p class="text">官方公众号</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="info"> |
|
|
|
|
<img class="logo" |
|
|
|
|
src="@/assets/images/logo.png" |
|
|
|
|
<div class="item"> |
|
|
|
|
<img class="qrcode" |
|
|
|
|
src="@/assets/images/qrcode.png" |
|
|
|
|
alt=""> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<div class="lines"> |
|
|
|
|
<div class="line"> |
|
|
|
|
<img class="icon" |
|
|
|
|
src="@/assets/images/mail.png" |
|
|
|
|
alt=""> |
|
|
|
|
Email: {{ isSfel ? 'fel@mail.iasf.ac.cn' : 'std@mail.iasf.ac.cn' }} |
|
|
|
|
</div> |
|
|
|
|
<div class="line"> |
|
|
|
|
<img class="icon" |
|
|
|
|
src="@/assets/images/tel.png" |
|
|
|
|
alt=""> |
|
|
|
|
Telephone: {{ isSfel ? '0755-21096052' : '0086-755-21096026' }} |
|
|
|
|
</div> |
|
|
|
|
<div class="line"> |
|
|
|
|
<img class="icon" |
|
|
|
|
src="@/assets/images/address.png" |
|
|
|
|
alt=""> |
|
|
|
|
Address: {{ isSfel ? '自由电子激光工程经理部' : '268 Zhenyuan St, Building A3, Floor 3-6, Guangming District, Shenzhen, Guangdong, P.R.China' }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="qrcode"> |
|
|
|
|
<!-- <img src="@/assets/images/about/qrcode.png" alt=""> --> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<p class="text">官方微信</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="copyright">Copyright ©深圳综合粒子设施研究院 粤ICP备2020131940号 粤公安网34565432456765432号</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<script> |
|
|
|
|
@ -210,173 +174,64 @@ export default { |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.leftBox { |
|
|
|
|
margin-right: 100px; |
|
|
|
|
} |
|
|
|
|
.footer { |
|
|
|
|
z-index: 2; |
|
|
|
|
position: relative; |
|
|
|
|
padding: 64px 20% 25px; |
|
|
|
|
color: #fff; |
|
|
|
|
background-color: #091733; |
|
|
|
|
overflow: hidden; |
|
|
|
|
border-top: 10px solid #2870ff; |
|
|
|
|
.logo { |
|
|
|
|
width: 180px; |
|
|
|
|
} |
|
|
|
|
.info { |
|
|
|
|
display: flex; |
|
|
|
|
} |
|
|
|
|
.meta { |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
} |
|
|
|
|
.column-wrap { |
|
|
|
|
display: inline-flex; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
} |
|
|
|
|
.column { |
|
|
|
|
margin: 0 20px; |
|
|
|
|
h6 { |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
font-size: 16px; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.children { |
|
|
|
|
li { |
|
|
|
|
margin: 12px 0; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #6d7384; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.copyright { |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #6d7384; |
|
|
|
|
} |
|
|
|
|
&.iasf { |
|
|
|
|
padding-top: 50px; |
|
|
|
|
background: url(http://10.10.11.7/images/iasf/footer.jpg) 0 -400px/100% auto no-repeat; |
|
|
|
|
background-color: #091733; |
|
|
|
|
.children { |
|
|
|
|
li { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.mask { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 0; |
|
|
|
|
right: 0; |
|
|
|
|
bottom: 0; |
|
|
|
|
left: 0; |
|
|
|
|
background-color: rgba(0, 0, 0, 0.6); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.contact { |
|
|
|
|
position: relative; |
|
|
|
|
padding: 0 0 73px 0; |
|
|
|
|
background: url(../../assets/images/map.png) 0 0 / cover no-repeat; |
|
|
|
|
.inner { |
|
|
|
|
width: 1082px; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
width: 1200px; |
|
|
|
|
padding: 20px 0; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
.title { |
|
|
|
|
width: 419px; |
|
|
|
|
height: 263px; |
|
|
|
|
padding: 147px 0 0 40px; |
|
|
|
|
background-color: #0854fe; |
|
|
|
|
h6 { |
|
|
|
|
z-index: 2; |
|
|
|
|
position: relative; |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
font-size: 45px; |
|
|
|
|
font-family: PingFangSC-Semibold, PingFang SC; |
|
|
|
|
font-weight: 600; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
.text { |
|
|
|
|
margin-top: -65px; |
|
|
|
|
font-size: 48px; |
|
|
|
|
-webkit-text-fill-color: transparent; |
|
|
|
|
-webkit-text-stroke: 1px #4073e5; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.region { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 152px; |
|
|
|
|
left: 70%; |
|
|
|
|
display: flex; |
|
|
|
|
.left { |
|
|
|
|
display: inline-flex; |
|
|
|
|
align-items: center; |
|
|
|
|
font-size: 20px; |
|
|
|
|
color: #fff; |
|
|
|
|
img { |
|
|
|
|
margin-right: 20px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.info { |
|
|
|
|
margin: 55px 0 0 8px; |
|
|
|
|
.texts { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-top: 24px; |
|
|
|
|
} |
|
|
|
|
.item { |
|
|
|
|
margin-right: 75px; |
|
|
|
|
} |
|
|
|
|
.texts { |
|
|
|
|
padding: 30px; |
|
|
|
|
margin-left: 20px; |
|
|
|
|
border-left: 2px solid #ccc; |
|
|
|
|
.line { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
font-size: 16px; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #fff; |
|
|
|
|
&:last-child { |
|
|
|
|
margin-bottom: 0; |
|
|
|
|
} |
|
|
|
|
img { |
|
|
|
|
margin-right: 8px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.qrcode { |
|
|
|
|
.qrcodes { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
text-align: center; |
|
|
|
|
.text { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 12px; |
|
|
|
|
.item { |
|
|
|
|
margin-right: 15px; |
|
|
|
|
} |
|
|
|
|
.qrcode { |
|
|
|
|
width: 100px; |
|
|
|
|
height: 100px; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.copyright { |
|
|
|
|
padding: 16px 0; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #c3c3c3; |
|
|
|
|
text-align: center; |
|
|
|
|
background-image: linear-gradient(to bottom, rgb(16, 41, 93), rgb(10, 24, 54) 40%); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// @media (max-width: 1500px) { |
|
|
|
|
// .footer { |
|
|
|
|
// padding: 64px 10% 25px; |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// @media (max-width: 1350px) { |
|
|
|
|
// .inner { |
|
|
|
|
// width: 100% !important; |
|
|
|
|
// .title { |
|
|
|
|
// width: 100%; |
|
|
|
|
// text-align: center; |
|
|
|
|
// } |
|
|
|
|
// .region { |
|
|
|
|
// top: 300px; |
|
|
|
|
// left: 50%; |
|
|
|
|
// } |
|
|
|
|
// .info { |
|
|
|
|
// margin-top: 90px; |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// .footer { |
|
|
|
|
// .info { |
|
|
|
|
// flex-direction: column; |
|
|
|
|
// .column { |
|
|
|
|
// margin-top: 20px; |
|
|
|
|
// margin-left: 0; |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// .entry { |
|
|
|
|
// flex-direction: column; |
|
|
|
|
// li { |
|
|
|
|
// margin-bottom: 30px; |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
</style> |
