yunzer_go/frontend/src/views/components/footer.vue

<script setup lang="ts">
import { ArrowUp } from "@element-plus/icons-vue";

// 返回顶部功能
function goToTop() {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
}
</script>
<template>
  <div class="footer">
    <div class="container">
      <div class="row" style="width: 100%">
        <div class="row-main">
          <!-- Logo 和介绍 -->
          <div class="mr-20">
            <img src="@/assets/imgs/logo-light.png" alt="Logo" height="70" />
            <p class="text-white-50 my-4 f18" style="width: 400px">
              这里是介绍！
            </p>
          </div>

          <!-- 菜单区域 -->
          <div
            style="
              display: flex;
              justify-content: space-between;
              width: 100%;
              margin-right: 200px;
            "
          >
            <!-- 关于我们 -->
            <div>
              <h4 class="text-white f-20 font-weight-normal mb-3">关于我们</h4>
              <ul class="list-unstyled footer-sub-menu">
                <li><a href="#" class="footer-link">概况</a></li>
                <li><a href="#" class="footer-link">资讯</a></li>
                <li><a href="#" class="footer-link">加入我们</a></li>
                <li><a href="#" class="footer-link">联系我们</a></li>
              </ul>
            </div>

            <!-- 商务合作 -->
            <div>
              <h4 class="text-white f-20 font-weight-normal mb-3">商务合作</h4>
              <ul class="list-unstyled footer-sub-menu">
                <li><a href="#" class="footer-link">商务合作</a></li>
              </ul>
            </div>

            <!-- 服务支持 -->
            <div>
              <h4 class="text-white f-20 font-weight-normal mb-3">服务支持</h4>
              <ul class="list-unstyled footer-sub-menu">
                <li><a href="#" class="footer-link">常见问答</a></li>
                <li><a href="#" class="footer-link">软件下载</a></li>
                <li><a href="#" class="footer-link">服务政策</a></li>
                <li><a href="#" class="footer-link">投诉建议</a></li>
              </ul>
            </div>
          </div>

          <!-- 微信二维码 -->
          <div>
            <div class="text-center">
              <img
                src="@/assets/imgs/wechat_qrcode.jpg"
                alt="微信二维码"
                class="img-fluid"
                style="max-width: 150px"
              />
              <p class="text-white-50 mt-2">微信公众号</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 版权信息 -->
  <section class="copyright text-center">
    <div class="container">
      <p class="copyright__text">
        Copyright <span class="dynamic-year">2025</span> | All Rights By
        <a href="http://www.yunzer.cn">Yunzer</a>
      </p>
    </div>
    <div class="container">
      <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow"
        >苏ICP备2023006641号</a
      >
    </div>
    <div class="tongji"></div>
  </section>

  <!-- 回到顶部按钮 -->
  <div class="go-to-top" @click="goToTop">
    <el-icon class="go-to-top-icon">
      <ArrowUp />
    </el-icon>
  </div>
</template>
<style lang="less" scoped>
.footer {
  padding: 80px 0;
  position: relative;
  background-color: #2a254d;
  margin-top: auto; // 确保 footer 推到底部
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(@/assets/imgs/footer-bg-1.png);

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
  }

  .row {
    .row-main {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 40px;

      .mr-20 {
        flex-shrink: 0;
        margin-right: 20px;

        img {
          margin-bottom: 20px;
        }

        .text-white-50 {
          color: rgba(255, 255, 255, 0.5) !important;
        }

        .my-4 {
          margin-top: 1.5rem !important;
          margin-bottom: 1.5rem !important;
        }

        .f18 {
          font-size: 18px;
        }
      }

      // 菜单区域
      > div:nth-child(2) {
        flex: 1;
        display: flex;
        justify-content: space-between;

        > div {
          h4 {
            &.text-white {
              color: #fff;
            }

            &.f-20 {
              font-size: 20px;
            }

            &.font-weight-normal {
              font-weight: 400;
            }

            &.mb-3 {
              margin-bottom: 1rem;
            }
          }

          .footer-sub-menu {
            list-style: none;
            padding: 0;
            margin: 0;

            li {
              margin-bottom: 8px;

              .footer-link {
                color: rgba(255, 255, 255, 0.7);
                text-decoration: none;
                font-size: 14px;
                transition: color 0.3s ease;

                &:hover {
                  color: #fff;
                }
              }
            }
          }
        }
      }

      // 二维码区域
      > div:last-child {
        flex-shrink: 0;

        .text-center {
          text-align: center;

          .img-fluid {
            max-width: 100%;
            height: auto;
          }

          .mt-2 {
            margin-top: 0.5rem;
          }

          .text-white-50 {
            color: rgba(255, 255, 255, 0.5) !important;
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 992px) {
  .footer {
    .row-main {
      flex-direction: column;
      gap: 30px;

      .mr-20 {
        margin-right: 0;
        text-align: center;

        p {
          width: 100% !important;
          max-width: 400px;
          margin: 0 auto;
        }
      }

      > div:nth-child(2) {
        margin-right: 0 !important;
        flex-direction: column;
        gap: 30px;

        > div {
          text-align: center;
        }
      }

      > div:last-child {
        text-align: center;
      }
    }
  }
}

@media (max-width: 576px) {
  .footer {
    padding: 40px 0;

    .row-main {
      gap: 20px;
    }
  }
}

.copyright {
  position: relative;
  background-color: #1f1944;
  padding: 27px 0 28px;

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
  }

  .copyright__text {
    color: #697585;
    margin: 0;
    font-size: 16px;
    line-height: 25px;
    font-weight: 400;
  }

  .copyright__text a {
    color: #f57005;
    cursor: pointer;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

// 回到顶部按钮样式
.go-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: var(--primary-color, #409eff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  z-index: 1000;

  &:hover {
    background: var(--primary-hover-color, #337ecc);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  }

  .go-to-top-icon {
    font-size: 24px;
    color: #fff;
  }
}

// 响应式设计 - 小屏幕调整位置
@media (max-width: 768px) {
  .go-to-top {
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;

    .go-to-top-icon {
      font-size: 20px;
    }
  }
}
</style>