company_official/official-web/src/App.vue

<template>
  <div class="app-container">
    <div class="header">
      <div class="logo">
        <img src="/gw-logo.png" alt="Logo" style="height: 40px;" />
        <!--<span>网讯创智</span>-->
      </div>
      <div class="nav">
        <router-link to="/">首页</router-link>
        <router-link to="/products">产品</router-link>
        <router-link to="/solutions">解决方案</router-link>
        <router-link to="/education">产教融合</router-link>
        <router-link to="/service">产业服务</router-link>
        <router-link to="/news">新闻动态</router-link>
        <router-link to="/about">关于我们</router-link>
      </div>
    </div>
    <div class="content">
      <router-view />
    </div>
    <div class="footer">
      <div class="footer-content">
        <div class="footer-logo">
          <img src="/bottom-logo.png" alt="Logo" />
          <div class="beian-row">
            <a href="https://beian.mps.gov.cn/#/query/webSearch?code=51019002008384" rel="noreferrer" target="_blank" class="beian-link">
              <img src="/beianicon.png" alt="公网安备图标" class="beian-icon-small" />
              <span>川公网安备51019002008384号</span>
            </a>
            <a href="http://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" class="beian-link">
              <span>蜀ICP备2025168675号-1</span>
            </a>
          </div>
        </div>
        <div class="footer-links">
          <div class="link-group">
            <h4>探索网讯创智</h4>
            <router-link to="/about">公司介绍</router-link>
            <router-link to="/about">公司治理</router-link>
            <router-link to="/about">企业文化</router-link>
          </div>
          <div class="link-group">
            <h4>关于我们</h4>
            <router-link to="/about">关于我们</router-link>
            <router-link to="/news">新闻动态</router-link>
            <a href="#">加入我们</a>
          </div>
          <div class="link-group">
            <h4>联系我们</h4>
            <p>{{ companyInfo.phone || '123-456-7890' }}</p>
            <p>{{ companyInfo.email || 'contact@example.com' }}</p>
          </div>
        </div>
        <div class="footer-qrcode">
          <img :src="getImageUrl(companyInfo.qrcode_url) || ''" alt="QR Code" v-if="companyInfo.qrcode_url" />
          <p>关注公众号</p>
        </div>
      </div>
      <div class="copyright">
        <p>&copy; 2026 网讯创智 版权所有</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from './api'

const companyInfo = ref({})

const getImageUrl = (url) => {
  if (!url) return ''
  if (url.startsWith('http')) return url
  return `${import.meta.env.VITE_IMG_BASE_URL}${url}`
}

onMounted(async () => {
  try {
    const res = await api.get('/company-info')
    if (res.data && res.data.id) {
      companyInfo.value = res.data
    }
  } catch (error) {
    console.error(error)
  }
})
</script>

<style lang="scss">
body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 50px;
  height: 80px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;

  .logo {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: #409eff; /* Adjusted color */
    
    img {
      margin-right: 10px;
    }
  }

  .nav {
    display: flex;
    gap: 30px;

    a {
      text-decoration: none;
      color: #333;
      font-size: 16px;
      font-weight: 500;
      
      &.router-link-active {
        color: #409eff;
        font-weight: bold;
      }

      &:hover {
        color: #409eff;
      }
    }
  }
}

.content {
  flex: 1;
}

.footer {
  background-color: #1a1a2e;
  color: #fff;
  padding: 50px 0 30px;

  .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    
    .footer-logo {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      min-width: 200px;
      
      img {
          height: 50px;
          margin-bottom: 20px;
          margin-top: 20px;
        }
      
      .beian-row {
        display: flex;
        align-items: center;
        gap: 15px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
        margin-top: 0px;
        
        .beian-link {
          display: inline-flex;
          align-items: center;
          color: rgba(255, 255, 255, 0.6);
          text-decoration: none;
          line-height: 1;
          
          &:hover {
            color: #409eff;
          }
          
          span {
            line-height: 1;
            margin-left: 2px;
          }
          
          .beian-icon-small {
            width: 14px;
            height: 14px;
            margin-right: 4px;
            margin-top: 16px;
            flex-shrink: 0;
          }
        }
      }
    }

    .footer-links {
      display: flex;
      gap: 60px;
      flex: 1;
      justify-content: center;

      .link-group {
        h4 {
          font-size: 14px;
          margin-bottom: 15px;
          color: #fff;
          font-weight: 600;
        }
        a, p {
          display: block;
          color: rgba(255, 255, 255, 0.7);
          text-decoration: none;
          margin-bottom: 8px;
          font-size: 13px;
          line-height: 1.6;
          
          &:hover {
            color: #409eff;
          }
        }
      }
    }

    .footer-qrcode {
      text-align: center;
      img {
        width: 80px;
        height: 80px;
        background: #fff;
        padding: 5px;
        border-radius: 4px;
      }
      p {
        margin-top: 8px;
        color: rgba(255, 255, 255, 0.7);
        font-size: 12px;
      }
    }
  }

  .copyright {
    text-align: center;
    padding-top: 20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;

    .beian-info {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      margin-top: 10px;

      a {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.5);
        transition: color 0.3s;

        &:hover {
          color: #409eff;
        }

        .beian-icon {
          width: 16px;
          height: 16px;
          margin-right: 5px;
        }
      }
    }
  }
}
</style>