fix：网站首页开发
This commit is contained in:
duyufeng
@@ -2,7 +2,7 @@
|
||||
<template>
|
||||
<a-layout-footer class="footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-links">
|
||||
<!-- <div class="footer-links">
|
||||
<a href="#">关于我们</a>
|
||||
<a href="#">联系我们</a>
|
||||
<a href="#">帮助中心</a>
|
||||
@@ -10,27 +10,253 @@
|
||||
</div>
|
||||
<div class="copyright">
|
||||
<p>© 2025 我的网站. 保留所有权利.</p>
|
||||
</div> -->
|
||||
<div class="up">
|
||||
<!-- 产品和服务 -->
|
||||
<div class="product-services">
|
||||
<h4>产品和服务</h4>
|
||||
<div class="line-container">
|
||||
<div class="blue-overlay"></div>
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="item in proServiceItems" :key="item?.key">{{ item.label }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 解决方案 -->
|
||||
<div class="solution">
|
||||
<h4>解决方案</h4>
|
||||
<div class="line-container">
|
||||
<div class="blue-overlay"></div>
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="item in solutionItems" :key="item?.key">{{ item.label }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 公司地址等 -->
|
||||
<div class="companyInfo">
|
||||
<img src="../assets/images/logo.png" alt="logo" class="logo" />
|
||||
<div class="address">
|
||||
<div class="lt">
|
||||
<img src="../assets/images/ercode.png" alt="ercode" />
|
||||
<span>山东东方低碳公众号</span>
|
||||
</div>
|
||||
<div class="rt">
|
||||
<p>地址：山东省济南市历下区大东路9号T3塔楼科创金融中心9楼</p>
|
||||
<p>电话：0531-88023101</p>
|
||||
<p>市场合作：Marketing@eastloca.com</p>
|
||||
<p>技术支持：Support@eastloca.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="down">
|
||||
<p>© 2025 山东东方低碳的网站. 保留所有权利.</p>
|
||||
</div>
|
||||
</div>
|
||||
</a-layout-footer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
// 产品和服务
|
||||
const proServiceItems = ref([
|
||||
{ key: '1', label: '智慧能碳平台' },
|
||||
{ key: '2', label: '城市级能碳平台' },
|
||||
{ key: '3', label: 'FMCS智能工业平台' },
|
||||
{ key: '4', label: '全生命周期产品碳足迹平台' },
|
||||
{ key: '5', label: '工业锅炉节能器' },
|
||||
{ key: '6', label: 'ESG绿色认证咨询' }
|
||||
])
|
||||
// 解决方案
|
||||
const solutionItems = ref([
|
||||
{ key: '1', label: '商业综合体' },
|
||||
{ key: '2', label: '交通枢纽' },
|
||||
{ key: '3', label: '绿色酒店' },
|
||||
{ key: '4', label: '源网荷储' },
|
||||
{ key: '5', label: '绿色工厂' },
|
||||
{ key: '6', label: '数据中心' },
|
||||
{ key: '7', label: '智慧学校' },
|
||||
{ key: '8', label: '区域能源站' },
|
||||
{ key: '9', label: '智慧医院' },
|
||||
{ key: '10', label: '冷链物流' }
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
.footer {
|
||||
background: #f0f2f5;
|
||||
padding: 24px 0;
|
||||
margin-top: auto;
|
||||
background: rgba(35, 54, 67, 1);
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.up {
|
||||
display: flex;
|
||||
padding: 64px 0 57px;
|
||||
justify-content: space-between;
|
||||
|
||||
.product-services,
|
||||
.solution {
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.line-container {
|
||||
width: 130px;
|
||||
height: 1px;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
/* 灰色 */
|
||||
position: relative;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
.blue-overlay {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -1px;
|
||||
width: 50px;
|
||||
height: 2px;
|
||||
background-color: rgba(39, 120, 255, 1);
|
||||
/* 蓝色 */
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
padding-left: 0;
|
||||
margin-top: 13px;
|
||||
|
||||
li {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding-bottom: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//产品与服务
|
||||
.product-services {
|
||||
ul {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
//解决方案
|
||||
.solution {
|
||||
width: 249px;
|
||||
|
||||
.line-container {
|
||||
width: 219px;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr)); // 两列等宽
|
||||
gap: 2px 15px; // 行间距8px，列间距15px
|
||||
width: 100%;
|
||||
|
||||
li {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 公司地址等
|
||||
.companyInfo {
|
||||
.logo {
|
||||
width: 110px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.address {
|
||||
display: flex;
|
||||
margin-top: 22px;
|
||||
|
||||
.lt {
|
||||
span {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
padding-top: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.rt {
|
||||
padding-left: 20px;
|
||||
|
||||
p {
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//版权
|
||||
.down {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding: 27px 0 24px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
padding-inline-start: 0px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.footer-links a {
|
||||
margin: 0 12px;
|
||||
|
||||
Reference in New Issue
Block a user