128 lines
3.3 KiB
Vue
128 lines
3.3 KiB
Vue
<script setup lang="ts">
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<!-- 公共页脚 -->
|
||
<div class="footer-container">
|
||
<div class="wapper">
|
||
<ul class="icon-info">
|
||
<li>
|
||
<span>正</span>
|
||
<span>
|
||
<i>正品行货</i>
|
||
<i>品类齐全</i>
|
||
</span>
|
||
</li>
|
||
<li>
|
||
<span>透</span>
|
||
<span>
|
||
<i>阳光采购</i>
|
||
<i>一站服务</i>
|
||
</span>
|
||
</li>
|
||
<li>
|
||
<span>快</span>
|
||
<span>
|
||
<i>轻松畅选</i>
|
||
<i>租赁快捷</i>
|
||
</span>
|
||
</li>
|
||
<li>
|
||
<span>好</span>
|
||
<span>
|
||
<i>售后无忧</i>
|
||
<i>精致服务</i>
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
|
||
<ul class="mobile-info">
|
||
<li>商城热线</li>
|
||
<li>供应商入驻、开店、续费资讯：010-2345-1234</li>
|
||
<li>供应商咨询：010-2345-1234</li>
|
||
<li>采购商咨询：010-2345-1234</li>
|
||
<li>互联网公司投诉意见：010-2345-1234</li>
|
||
<li>工作时间：周一至周五 8:30-12：00 14：00-17：30</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
.footer-container {
|
||
margin-top: 40px;
|
||
height: 650px;
|
||
border-top: 1px solid #979797;
|
||
background: url('../../assets/img/home/2023_12_01_beijing2/beijing2.png') no-repeat;
|
||
background-size: cover;
|
||
|
||
.icon-info {
|
||
height: 100px;
|
||
margin-top: 30px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
li {
|
||
height: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
span:first-child {
|
||
display: block;
|
||
width: 50px;
|
||
height: 50px;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
border-radius: 50%;
|
||
border: 3px solid #2283FF;
|
||
color: #2283FF;
|
||
font-weight: bold;
|
||
font-size: 22px;
|
||
}
|
||
|
||
span:last-child {
|
||
display: block;
|
||
height: 50px;
|
||
margin-left: 15px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
|
||
i {
|
||
color: #8C8C8C;
|
||
|
||
}
|
||
|
||
i:first-child {
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.mobile-info {
|
||
margin-top: 30px;
|
||
text-align: center;
|
||
|
||
li {
|
||
padding: 20px 0;
|
||
}
|
||
|
||
li:first-child {
|
||
padding: 30px 0;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
li:last-child {
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
}
|
||
</style> |