jiaoyi_cxicoin_web/src/components/CommonFooter.vue

<template>
  <!-- colto-section -->
  <footer class="footer" id="common-footer">
    <div class="footer-upper-section">
      <div class="item_left" style="width:33%">
        <div class="logo">
          <!-- <img src="../assets/img/logo1.png" alt="logo" style="width:208px;height:68px" /> -->
            <div style="width:200px;height:100px">
                <img :src="appConfig.head_logo" alt="logo"  style="width:100%;height:100%;object-fit: contain;"/>
            </div>

          <!-- <span>{{$t('common.footerTips1')}}</span> -->
        </div>
        <!-- <p class="foot_p">{{$t('common.footerTips2',{name:appConfig.name})}}</p> -->
        <!-- <p class="foot_p">{{$t('common.footerTips3')}}</p> -->
      </div>
      <div class="item_right" style="width:66%;">
        <div class="item">
          <p class="item_p">{{ $t("common.college") }}</p>
          <p class="foot_p" v-for="(item, index) in college" :key="index">
            <router-link :to="item.url">{{ item.label }}</router-link>
          </p>
          <!-- <p class="foot_p">
            <router-link :to="college[0].url" v-if="college[0]">{{ college[0].label }}</router-link>
            <br v-else />
            <br />
            <router-link :to="college[1].url" v-if="college[1]">{{ college[1].label }}</router-link>
            <br v-else />
          </p>
          <p class="foot_p">
            <router-link :to="college[2].url" v-if="college[2]">{{ college[2].label }}</router-link>
            <br v-else />
            <br />
            <router-link :to="college[3].url" v-if="college[3]">{{ college[3].label }}</router-link>
            <br v-else />
          </p> -->
        </div>
        <div class="item">
          <p class="item_p">{{ $t("common.service") }}</p>
          <p class="foot_p" v-for="(item1, index1) in service" :key="index1">
            <router-link :to="item1.url">{{item1.label}}</router-link>
          </p>
          <!-- <p class="foot_p">
              <router-link :to="service[0].url" v-if="service[0]">{{ service[0].label }}</router-link>
              <br v-else />
              <br />
              <router-link :to="service[1].url" v-if="service[1]">{{ service[1].label }}</router-link>
              <br v-else />
          </p>
          <p class="foot_p">
              <router-link :to="service[2].url" v-if="service[2]">{{ service[2].label }}</router-link>
              <br v-else />
              <br />
              <router-link :to="service[3].url" v-if="service[3]">{{ service[3].label }}</router-link>
              <br v-else />
          </p> -->
        </div>
        <!-- <div class="item">
          <p class="item_p">{{ $t("common.service") }}</p>
          <p class="foot_p" v-for="(item1, index1) in AboutLink" :key="index1">
            <router-link :to="item1.url">{{item1.label}}</router-link>
          </p>
        </div> -->

        <div class="item item2">
          <p class="item_p" style="width:100%">{{ $t("common.contactUs") }}</p>
          <p class="foot_p" style="width:100%">
            {{ $t("common.email") }}:
          </p>
          <p class="foot_p" style="width:100%">
            {{email}}
          </p>
          <p class="foot_p" style="width:100%">
            <br /><br />
          </p>
        </div>
      </div>
      <div class="container" v-if="0">
        <div class="row">
          <!-- <div class="col-lg-2 col-md-3 mb-4">
            <div class="footer-logo">
              <a href="#">
                <img :src="logo.imgurl" alt="img" class="img-responsive" />
                <img :src="appConfig.foot_logo" alt="logo" />
              </a>
            </div>
          </div> -->
          <!-- 服务列表 -->
          <div class="col-lg-1 col-md-3 mb-4">
            <div class="footer-info-list">
              <h4>{{ $t("common.service") }}</h4>
              <ul>
                <li v-for="(item, index) in service" :key="index">
                  <router-link :to="item.url">{{ item.label }}</router-link>
                </li>
              </ul>
            </div>
          </div>
          <!-- 学院列表 -->
          <div class="col-lg-1 col-md-3 mb-4">
            <div class="footer-info-list">
              <h4>{{ $t("common.college") }}</h4>
              <ul>
                <li v-for="item in college" :key="item.id">
                  <router-link :to="item.url">{{ item.label}}</router-link>
                </li>
              </ul>
            </div>
          </div>

          <!-- 联系我们 -->
          <div class="col-lg-2 col-md-6">
            <div class="footer-info-list">
              <h4>{{$t('common.contactUs')}}</h4>
              <ul class="contact-info">
                <li>
                  {{ $t("common.email") }}:
                  <span>{{email}}</span>
                </li>
                <!-- <li>
                  Phone: <span>{{contactinfo.mobile}}</span>
                </li> -->
              </ul>
              <ul class="social-style-two">
                <li>
                  <a href="#">
                    <i class="fab fa-facebook-f"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fab fa-twitter"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fab fa-google-plus-g"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fab fa-github"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fab fa-linkedin-in"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 border-left" v-if="0">
            <div class="pl-2 ">
              <div class="mb-2">
                {{$t('common.footerTips1')}}
              </div>
              <div class="mb-2"> {{$t('common.footerTips2',{name:appConfig.name})}}</div>
              <div class="mb-2">{{$t('common.footerTips3')}}</div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <!-- 版权信息 -->
      <div class="container">
        <div class="footer-bottom-wrap">
          <!-- &copy; -->
          <div class="copyright-text text-center">{{appConfig.copyright}}</div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
import College from "@/api/college";
import ContactUs from "@/api/contactUs";
import {mapState} from 'vuex'
export default {
  data() {
    return {
        service: [],
        college: [],
        email: "",
        AboutLink: []
    };
  },
  computed:{
    ...mapState({
      appConfig:'appConfig'
    })
  },
  methods: {
    getCollegeLinks() {
      College.getCategoryList()
        .then(list => {
          list.forEach(item => {
            this.college.push({
              url: `/college/list/${item.id}`,
              label: item.name
            });
          });
        })
        .catch(err => {});
    },

    getServiceLink() {
      College.getServiceList()
        .then(list => {
          list.forEach(item => {
            this.service.push({
              url: `/service/${item.id}`,
              label: item.name
            });
          });
        })
        .catch(err => {});
    },
    getAboutLink() {
      College.getServiceList()
        .then(list => {
          list.forEach(item => {
            this.AboutLink.push({
              url: `/service/${item.id}`,
              label: item.name
            });
          });
        })
        .catch(err => {});
    },
    getEmial() {
      ContactUs.contact()
        .then(data => {
          this.email = data.contact;
        })
        .catch(err => {});
    }
  },
  created() {
    this.getCollegeLinks();
    this.getServiceLink();
    this.getEmial();
  }
};
</script>

<style scoped lang="scss">
  .footer-upper-section{
    padding: 0;
    display: flex;
    align-items: center;
    height: 324px;
    // margin-left: 233px;
    justify-content: space-between;
    padding:0 133px;
    .item_left{
      width: 454px;
    //   margin-right: 300px;
      .logo{
        display: flex;
        align-items: center;
        color: #172636;
        justify-content: space-between;
        width: 100%;
        font-size: 16px;
        margin-bottom: 17px;
      }
    }

    .item_right{
        display: flex;
        height: 99px;

      .item{
        min-width: 250px;
        // border-right: 1px solid #303D4B;
        display: flex;
        flex-direction: column;
        // justify-content: center;
        padding: 0 15px;
        .item_p{
          font-size: 16px;
          color: #172636;
        }
      }
      .item2{
        padding-left: 64px;
      }
      .item:last-child{
        border: none;
      }
    }

  }
  .foot_p{
    color: #797979;
    font-size: 14px;
    margin: 0;
    a:hover{
        color: #326AEB;
    }
    // a:visited{
    //     color: #326AEB;
    // }
  }
</style>