company-website/src/components/footer.vue

<!-- src/components/Footer.vue -->
<template>
  <a-layout-footer class="footer">
    <div class="footer-content">
      <!-- <div class="footer-links">
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
        <a href="#">帮助中心</a>
        <a href="#">隐私政策</a>
      </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 lang="less" scoped>
.footer {
  padding: 24px 0;
  margin-top: auto;
  background: rgba(35, 54, 67, 1);
  height: 450px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  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;
  color: #666;
  text-decoration: none;
}

.footer-links a:hover {
  color: #1890ff;
}

.copyright {
  margin-top: 16px;
  color: #999;
}
</style>