|
@@ -9,14 +9,15 @@
|
|
|
<h3 class="section-title">联系我们</h3>
|
|
|
<div class="contact-item phone">
|
|
|
<img src="@assets/footer-phone.png" alt="电话" class="contact-icon">
|
|
|
- <span class="contact-text">400-624-0069</span>
|
|
|
+ <span class="contact-text">{{ companyInfo.mobile || '400-624-0069' }}</span>
|
|
|
</div>
|
|
|
<div class="contact-item addr">
|
|
|
<img src="@assets/footer-addr.png" alt="地址" class="contact-icon">
|
|
|
- <span class="contact-text">贵州省贵阳市观山湖区金融城MAX-A座</span>
|
|
|
+ <span class="contact-text">{{ companyInfo.address || '贵州省贵阳市观山湖区金融城MAX-A座' }}</span>
|
|
|
</div>
|
|
|
<div class="qrcode-section">
|
|
|
- <img src="@assets/footer-qrcode.png" alt="微信公众号" class="qrcode">
|
|
|
+ <img :src="imgHost+companyInfo.wechatQrcode || '@assets/footer-qrcode.png'" alt="微信公众号" class="qrcode"
|
|
|
+ @error="handleImageError">
|
|
|
<p class="qrcode-text">微信公众号入口</p>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -70,8 +71,47 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { ref, onMounted } from 'vue'
|
|
|
+import { getCompanyInfo } from '@/api/modules/home'
|
|
|
+
|
|
|
export default {
|
|
|
- name: 'Footer'
|
|
|
+ name: 'Footer',
|
|
|
+ setup() {
|
|
|
+ // 环境变量
|
|
|
+ const imgHost = import.meta.env.VITE_APP_IMG_HOST
|
|
|
+ const companyInfo = ref({})
|
|
|
+ const loading = ref(false)
|
|
|
+
|
|
|
+ const fetchCompanyInfo = async () => {
|
|
|
+ try {
|
|
|
+ loading.value = true
|
|
|
+ const response = await getCompanyInfo()
|
|
|
+ if (response.data) {
|
|
|
+ companyInfo.value = response.data
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取公司信息失败:', error)
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleImageError = (event) => {
|
|
|
+ // 如果微信二维码图片加载失败,使用默认图片
|
|
|
+ event.target.src = require('@assets/footer-qrcode.png')
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ fetchCompanyInfo()
|
|
|
+ })
|
|
|
+
|
|
|
+ return {
|
|
|
+ imgHost,
|
|
|
+ companyInfo,
|
|
|
+ loading,
|
|
|
+ handleImageError
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
@@ -110,8 +150,10 @@ export default {
|
|
|
color: white;
|
|
|
padding-bottom: 15px;
|
|
|
display: inline-block;
|
|
|
- position: relative;;
|
|
|
- &::after{
|
|
|
+ position: relative;
|
|
|
+ ;
|
|
|
+
|
|
|
+ &::after {
|
|
|
content: '';
|
|
|
width: 64px;
|
|
|
height: 4px;
|
|
@@ -125,7 +167,7 @@ export default {
|
|
|
.contact-item {
|
|
|
font-size: 18px;
|
|
|
display: flex;
|
|
|
- align-items: flex-start;
|
|
|
+ align-items: baseline;
|
|
|
margin-bottom: $spacing-base;
|
|
|
|
|
|
.contact-icon {
|
|
@@ -138,9 +180,17 @@ export default {
|
|
|
|
|
|
.contact-text {
|
|
|
color: rgba(255, 255, 255, 0.9);
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.phone {
|
|
|
+ font-size: 32px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.addr {
|
|
|
+ margin-bottom: 32px;
|
|
|
}
|
|
|
- &.phone{font-size: 32px;margin-bottom: 24px;}
|
|
|
- &.addr{margin-bottom: 32px;}
|
|
|
}
|
|
|
|
|
|
.qrcode-section {
|
|
@@ -273,10 +323,11 @@ export default {
|
|
|
|
|
|
// 超小屏幕适配
|
|
|
@media (max-width: 480px) {
|
|
|
- .footer{
|
|
|
+ .footer {
|
|
|
background-position: 0px -35px;
|
|
|
background-color: #07122A;
|
|
|
}
|
|
|
+
|
|
|
.container {
|
|
|
padding: 0 $spacing-base;
|
|
|
}
|