factoryDirector/src/components/Layout/bottom.vue

<template>
  <div class="bg">
    <div class="top">
      <div v-for="(item, idx) in foot.list" :key="idx">
        <div class="title">{{ item.title }}</div>
        <div
          class="item"
          @click="topage(child.url)"
          v-for="(child, index) in item.footer"
          :key="index"
        >
          {{ child.title }}
        </div>
      </div>
      <div>
        <div class="title">联系我们</div>
        <div class="item">售前电话：{{ foot.info.pre_sale_mobile }}</div>
        <div class="item">市场合作:{{ foot.info.market_cooperation }}</div>
        <div class="item">渠道合作:{{ foot.info.channel_cooperation }}</div>
        <div class="item">投诉电话:{{ foot.info.complaint_mobile }}</div>
      </div>
      <div>
        <div class="title">关注我们</div>
        <div class="item">{{ foot.info.service_time }}</div>
        <div class="img">
          <img class="image" :src="foot.info.service_qr_code" alt="" />
          <img class="image" :src="foot.info.official_qr_code" alt="" />
        </div>
      </div>
    </div>
    <div class="center">
      <div>
        <div class="emil">官方邮箱：{{ foot.info.email }}</div>
        <div class="address">{{ foot.info.address }}</div>
      </div>
      <div>
        <!-- <div class="logo"></div> -->
        <img class="logo" :src="foot.info.logo" alt="" />
      </div>
    </div>
    <div class="line"></div>
    <div class="bottom_font">{{ foot.info.copyright }}</div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { onMounted, reactive, ref } from "vue";
import * as tongApi from "../../api/tongyong";
import * as configApi from "../../api/config";
const router = useRouter();
const foot = reactive({
  list: [],
  info: {},
});
//页脚
const list = async () => {
  try {
    const { data } = await tongApi.footer({});
    foot.list = data;
  } catch (error) {}
};
onMounted(list);
//基本信息
const info = async () => {
  try {
    const { data } = await configApi.config({
      module: "basic",
    });
    foot.info = data;
  } catch (error) {}
};
onMounted(info);
const topage = (url) => {
  window.location.href = url
};
</script>

<style lang="scss" scoped>
.bottom_font {
  font-family: SFPro, SFPro;
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 16px;
  text-align: justify;
  font-style: normal;
  text-align: center;
  margin-top: 20px;
}
.line {
  height: 1px;
  opacity: 0.2;
  margin-top: 26px;
  background: #979797;
}
.center {
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .address {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 22px;
    text-align: justify;
    font-style: normal;
    margin-top: 10px;
  }
  .emil {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #ffffff;
    line-height: 17px;
    text-align: justify;
    font-style: normal;
  }
  .logo {
    width: 104px;
    height: 100px;
    // background: #d8d8d8;
  }
}
.top {
  display: flex;
  justify-content: space-between;
  .img {
    margin: 20px 0 0 0;
    .image {
      width: 72px;
      height: 72px;
      margin-right: 20px;
    }
  }
}
.bg {
  width: 1920px;
  //   height: 480px;
  background: #131415;
  padding: 65px 360px;
  box-sizing: border-box;
}
.title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  line-height: 22px;
  text-align: justify;
  font-style: normal;
}
.item {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 20px;
  text-align: justify;
  font-style: normal;
  margin-top: 14px;
  cursor: pointer;
}
</style>