txw/txw-mhzc-web/src/pages/index/components/footer/index.vue

<template>
  <footer class="site-footer">
    <div class="footer-main">
      <div class="footer-main-inner">
        <div class="footer-columns">
          <div class="footer-column footer-column--guide">
            <h3 class="footer-title">指导单位</h3>
            <ul class="footer-list">
              <li class="footer-text">上海市数据局</li>
              <li class="footer-text">宝山区政府</li>
            </ul>
          </div>

          <div class="footer-column footer-column--ops">
            <h3 class="footer-title">运营单位</h3>
            <ul class="footer-list">
              <li class="footer-text">上海浦江数链数字科技有限公司</li>
            </ul>
          </div>

          <div class="footer-column footer-column--support">
            <h3 class="footer-title">业务支持</h3>
            <ul class="footer-list">
              <li class="footer-text">上海数字基础设施协会可信碳专委会</li>
            </ul>
          </div>

          <div class="footer-column footer-column--links">
            <h3 class="footer-title">友情链接</h3>
            <ul class="footer-list">
              <li>
                <a
                  class="footer-link"
                  href="https://segg.sh.gov.cn/"
                  target="_blank"
                  rel="noopener noreferrer"
                >上海市企业走出去综合服务平台</a>
              </li>
            </ul>
          </div>

          <div class="footer-column footer-column--contact">
            <h3 class="footer-title">联系我们</h3>
            <ul class="footer-list footer-list--contact">
              <li class="footer-contact-row">
                <span class="footer-contact-icon" aria-hidden="true">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.5 3.5h11v9h-11v-9z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
                    <path d="M2.5 4.5L8 9l5.5-4.5" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
                  </svg>
                </span>
                <span class="footer-text">{{ contact.email }}</span>
              </li>
              <li class="footer-contact-row">
                <span class="footer-contact-icon" aria-hidden="true">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8 14s4.5-3.2 4.5-7A4.5 4.5 0 1 0 3.5 7c0 3.8 4.5 7 4.5 7z" stroke="currentColor" stroke-width="1.2"/>
                    <circle cx="8" cy="7" r="1.5" fill="currentColor"/>
                  </svg>
                </span>
                <span class="footer-text footer-text--address">{{ contact.address }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="footer-bar">
      <div class="footer-bar-inner">
        <p class="footer-bar-line">© 2025 可信碳信息网 版权所有</p>
        <p class="footer-bar-line">技术支持：上海市宝山区大数据中心</p>
        <p class="footer-bar-line">基础设施：国家区块链网络基础底座</p>
      </div>
    </div>
  </footer>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'Footer',
  computed: {
    ...mapState('settings', ['contact']),
  },
};
</script>

<style lang="less" scoped>
/* Figma 底部信息块：主区 #f0f7f2 padding 40/20/20，版权条 #e2ede5 高 64px */
.site-footer {
  display: block;
  margin-top: 0;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}

.footer-main {
  background: #f0f7f2;
}

.footer-main-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--page-content-max-width, 1200px);
  margin: 0 auto;
  padding: 40px 20px 20px;
}

.footer-columns {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  gap: 24px;
}

.footer-column {
  flex: 0 1 auto;
  min-width: 0;
}

.footer-title {
  position: relative;
  margin: 0 0 12px;
  padding-left: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #003b1a;
  white-space: nowrap;

  &::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 16px;
    background: linear-gradient(180deg, #4caf50 0%, #2e7d32 100%);
    border-radius: 2px;
    content: '';
    transform: translateY(-50%);
  }
}

.footer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-text,
.footer-link {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #556659;
}

.footer-link {
  display: inline-block;
  text-decoration: none;
  transition: color 0.2s ease;

  &:hover {
    color: #00b96b;
  }
}

.footer-list--contact {
  gap: 10px;
}

.footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.footer-contact-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 16px;
  min-height: 22px;
  color: #556659;
}

.footer-text--address {
  word-break: keep-all;
}

.footer-bar {
  background: #e2ede5;
  border-top: 1px dashed rgba(0, 154, 41, 0.25);
}

.footer-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
  box-sizing: border-box;
  width: 100%;
  min-height: 64px;
  padding: 10px 20px;
}

.footer-bar-line {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: #556659;
  white-space: nowrap;
}

@media screen and (max-width: 1279px) {
  .footer-columns {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 28px 40px;
  }

  .footer-column {
    flex: 1 1 220px;
    max-width: calc(50% - 20px);
  }

  .footer-column--contact {
    flex: 1 1 100%;
    max-width: none;
  }
}

@media screen and (max-width: 767px) {
  .footer-main-inner {
    padding: 32px 16px 20px;
  }

  .footer-columns {
    flex-direction: column;
    gap: 24px;
  }

  .footer-column {
    flex: none;
    max-width: none;
  }

  .footer-bar-inner {
    flex-direction: column;
    gap: 4px;
    min-height: auto;
    padding: 12px 16px;
  }

  .footer-bar-line {
    white-space: normal;
    text-align: center;
  }
}
</style>