1beb24053f
- 重构首页底部信息块为 Figma 150904:8642 精确对照版 - 邮箱、上海浦江数链数字科技有限公司改为普通文本(不可点击) - hover 变绿效果仅作用于真实链接 a.footer-text - main.vue 统一渲染 footer,各页面移除重复 Footer 组件 - home2 缩放容器不再包裹 footer,修复首页页脚宽度与样式问题 Co-authored-by: Cursor <cursoragent@cursor.com>
366 lines
10 KiB
Vue
366 lines
10 KiB
Vue
<template>
|
||
<!--
|
||
首页底部信息块（完全对照 Figma 150897:8486 · 审核版本）
|
||
节点：150904:8642（底部信息块）
|
||
├─ Group 29 (1440×144, #F0F7F2)
|
||
│ └─ 底部信息 (row · space-between · align center · padding 40 20)
|
||
│ └─ Frame 235 (1200)
|
||
│ ├─ Frame 213 (column · gap 10)
|
||
│ │ ├─ Frame 208 (row) ─ 标题"联系"带 1px 底边 + "我们"
|
||
│ │ └─ Frame 209 (row · gap 32) ─ 邮箱 + 地址
|
||
│ └─ Frame 212 (column · gap 16)
|
||
│ ├─ Frame 208 ─ 标题"友情"带 1px 底边 + "链接"
|
||
│ └─ Frame 209 (row · gap 32) ─ 两个友链
|
||
└─ 版权 (1440×80, #E2EDE5)
|
||
└─ Frame 219 (row · center · gap 20)
|
||
└─ Frame 221 (1200 · column · center · gap 8 · padding 16 0)
|
||
├─ Frame 210 ─ 指导单位行
|
||
└─ Frame 1898 (row · gap 20) ─ 版权行
|
||
-->
|
||
<div class="portal-footer-shell">
|
||
<footer class="site-footer">
|
||
|
||
<!-- 上区：底部信息（1440×144 · #F0F7F2） -->
|
||
<div class="footer-main">
|
||
<div class="footer-main-inner">
|
||
|
||
<!-- Frame 235：1200 · row · space-between -->
|
||
<div class="footer-frame">
|
||
|
||
<!-- Frame 213：联系我们列（column · gap 10） -->
|
||
<div class="footer-col footer-col--contact">
|
||
<!-- Frame 208：标题行 ─ "联系"(带 1px 下边框) + "我们" -->
|
||
<div class="footer-title-row">
|
||
<span class="footer-title-with-underline">联系</span>
|
||
<span class="footer-title">我们</span>
|
||
</div>
|
||
<!-- Frame 209：邮箱 + 地址（row · gap 32） -->
|
||
<div class="footer-contact-row">
|
||
<span class="footer-contact-item">
|
||
<span class="footer-icon" aria-hidden="true">
|
||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M2 3.5C2 2.94772 2.44772 2.5 3 2.5H11C11.5523 2.5 12 2.94772 12 3.5V10.5C12 11.0523 11.5523 11.5 11 11.5H3C2.44772 11.5 2 11.0523 2 10.5V3.5Z" stroke="currentColor" stroke-width="1" stroke-linejoin="round"/>
|
||
<path d="M2.5 3.8L7 7.2L11.5 3.8" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</span>
|
||
<span class="footer-text">{{ contact.email }}</span>
|
||
</span>
|
||
<span class="footer-contact-item">
|
||
<span class="footer-icon" aria-hidden="true">
|
||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M6 1.5C4.34315 1.5 3 2.84315 3 4.5C3 6.8 6 10.5 6 10.5C6 10.5 9 6.8 9 4.5C9 2.84315 7.65685 1.5 6 1.5Z" stroke="currentColor" stroke-width="1" stroke-linejoin="round"/>
|
||
<circle cx="6" cy="4.5" r="1.2" stroke="currentColor" stroke-width="1"/>
|
||
</svg>
|
||
</span>
|
||
<span class="footer-text">{{ contact.address }}</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Frame 212：友情链接列（column · gap 16） -->
|
||
<div class="footer-col footer-col--links">
|
||
<!-- 标题行 ─ "友情"(带 1px 下边框) + "链接" -->
|
||
<div class="footer-title-row">
|
||
<span class="footer-title-with-underline">友情</span>
|
||
<span class="footer-title">链接</span>
|
||
</div>
|
||
<!-- Frame 209：两个友链（row · gap 32） -->
|
||
<div class="footer-links-row">
|
||
<a class="footer-text" href="https://segg.sh.gov.cn/" target="_blank" rel="noopener noreferrer">上海市企业走出去综合服务平台</a>
|
||
<span class="footer-text">上海浦江数链数字科技有限公司</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 下区：版权（1440×80 · #E2EDE5） -->
|
||
<div class="footer-bar">
|
||
<div class="footer-bar-inner">
|
||
<!-- Frame 210 · 指导单位行 -->
|
||
<div class="footer-guide">
|
||
<span class="footer-guide-label">指导单位：</span>
|
||
<span class="footer-guide-item">上海市数据局</span>
|
||
<span class="footer-guide-gap"></span>
|
||
<span class="footer-guide-item">宝山区政府</span>
|
||
</div>
|
||
<!-- Frame 1898 · 版权行 · gap 20 -->
|
||
<div class="footer-copyright">
|
||
<span class="footer-bar-line">©2025可信碳信息网版权所有</span>
|
||
<span class="footer-bar-line">技术支持：上海市宝山区大数据中心</span>
|
||
<span class="footer-bar-line">基础设施：国家区块链网络基础底座</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</footer>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from 'vuex';
|
||
|
||
export default {
|
||
name: 'Footer',
|
||
computed: {
|
||
...mapState('settings', ['contact']),
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
/* =============================================================================
|
||
* 首页底部信息块（Figma 150904:8642 · 审核版本精确对照）
|
||
* Group 29：1440 × 144 · #F0F7F2
|
||
* 版权块： 1440 × 80 · #E2EDE5
|
||
* ============================================================================= */
|
||
|
||
.portal-footer-shell {
|
||
flex-shrink: 0;
|
||
width: 100%;
|
||
background: #f0f7f2;
|
||
}
|
||
|
||
.site-footer {
|
||
display: block;
|
||
font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
|
||
}
|
||
|
||
/* ── 上区：底部信息 ───────────────────────────── 1440×144 · #F0F7F2 ── */
|
||
|
||
.footer-main {
|
||
background: #f0f7f2;
|
||
}
|
||
|
||
.footer-main-inner {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 40px 20px; /* Figma 底部信息 padding */
|
||
}
|
||
|
||
.footer-frame {
|
||
display: flex;
|
||
align-items: center; /* Figma 底部信息 align-items: center */
|
||
justify-content: space-between; /* Figma Frame 235 justify-content: space-between */
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
}
|
||
|
||
/* ── 列通用样式 ── */
|
||
|
||
.footer-col {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center; /* 列内内容居中 */
|
||
}
|
||
|
||
/* Frame 213：联系我们列 · column · gap 10 */
|
||
.footer-col--contact {
|
||
flex: 0 1 auto;
|
||
row-gap: 10px;
|
||
}
|
||
|
||
/* Frame 212：友情链接列 · column · gap 16 */
|
||
.footer-col--links {
|
||
flex: 0 1 auto;
|
||
row-gap: 10px;
|
||
}
|
||
|
||
/* ── 标题行（Frame 208） ─ row ────────────────────── h:28 ── */
|
||
|
||
.footer-title-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 0 6px; /* Figma Frame 1900 padding 0 0 6px */
|
||
font-size: 16px;
|
||
line-height: 22px;
|
||
color: #000000;
|
||
margin-left: -10px;
|
||
}
|
||
|
||
.footer-title-with-underline {
|
||
font-weight: 600;
|
||
border-bottom: 1px solid #000000;
|
||
padding-bottom: 0;
|
||
line-height: 22px;
|
||
}
|
||
|
||
.footer-title {
|
||
font-weight: 600;
|
||
line-height: 22px;
|
||
}
|
||
|
||
/* ── Frame 209：内容行 ────────────────────────────── h:14/20 ── */
|
||
|
||
/* 联系我们：邮箱 + 地址 · row · gap 32 */
|
||
.footer-contact-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
column-gap: 32px;
|
||
font-size: 0;
|
||
}
|
||
|
||
.footer-contact-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
column-gap: 4px;
|
||
}
|
||
|
||
.footer-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
color: #555555;
|
||
line-height: 0;
|
||
}
|
||
|
||
/* 友情链接：两个链接 · row · gap 32 */
|
||
.footer-links-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
column-gap: 32px;
|
||
font-size: 0;
|
||
}
|
||
|
||
/* ── 文字通用样式 ── */
|
||
|
||
.footer-text {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 20px;
|
||
color: #555555;
|
||
text-decoration: none;
|
||
white-space: nowrap;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
a.footer-text {
|
||
cursor: pointer;
|
||
transition: color 0.2s ease;
|
||
|
||
&:hover {
|
||
color: #00b96b;
|
||
}
|
||
}
|
||
|
||
/* ── 下区：版权 ────────────────────────────────── 1440×80 · #E2EDE5 ── */
|
||
|
||
.footer-bar {
|
||
background: #e2ede5;
|
||
}
|
||
|
||
.footer-bar-inner {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 16px 0; /* Figma Frame 221 padding 16 0 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
row-gap: 8px; /* Figma gap 8 */
|
||
}
|
||
|
||
/* 指导单位行 · Frame 210 */
|
||
.footer-guide {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
color: #555555;
|
||
}
|
||
|
||
.footer-guide-label,
|
||
.footer-guide-item {
|
||
font-weight: 400;
|
||
}
|
||
|
||
.footer-guide-gap {
|
||
display: inline-block;
|
||
width: 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 版权行 · Frame 1898 · gap 20 */
|
||
.footer-copyright {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
column-gap: 20px; /* Figma gap 20 */
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.footer-bar-line {
|
||
font-size: 14px; /* Figma style_ERXFUQ 14px */
|
||
font-weight: 400;
|
||
line-height: 20px;
|
||
color: #555555;
|
||
}
|
||
|
||
/* ── 响应式 ────────────────────────────────────────── */
|
||
|
||
@media screen and (max-width: 1279px) {
|
||
.footer-frame {
|
||
flex-direction: column;
|
||
row-gap: 28px;
|
||
}
|
||
|
||
.footer-col--contact,
|
||
.footer-col--links {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 767px) {
|
||
.footer-main-inner {
|
||
padding: 32px 16px;
|
||
}
|
||
|
||
.footer-frame {
|
||
row-gap: 24px;
|
||
}
|
||
|
||
.footer-contact-row {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
row-gap: 8px;
|
||
}
|
||
|
||
.footer-links-row {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
row-gap: 8px;
|
||
}
|
||
|
||
.footer-bar-inner {
|
||
padding: 12px 0;
|
||
}
|
||
|
||
.footer-guide {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.footer-guide-gap {
|
||
display: none;
|
||
}
|
||
|
||
.footer-copyright {
|
||
flex-direction: column;
|
||
row-gap: 4px;
|
||
}
|
||
|
||
.footer-bar-line {
|
||
white-space: normal;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|