crowd-test-service-frontend/src/components/commons/Footer2.0.vue

<template>
  <div class="footer-nav">
    <div class="container">
      <el-row>
        <el-col :span="5" class="nav-logo-block">
          <div class="nav-title-wrapper">
            <img :src="logo_white" alt="logo" class="nav-logo">
            <div class="nav-title">
              {{ footer_title_one }}<br/>
              {{ footer_title_two }}
            </div>
          </div>
        </el-col>
        <el-col :span="19" style="padding-left: 15%">
          <div class="copyright-block pull-left" style="margin: 12px 0">
            版权所有©信息产品及科技服务集成化众测服务平台与应用项目组<br/>
            <img src="@/assets/image/police.png" style="width: 20px;height: 20px;vertical-align:middle;">
            <span style="vertical-align: middle;height: 20px;line-height: 20px">粤公网安备 44011602000570号</span><br/>
            <a :href="footer_provider_number_url" style="color: white; font-size: 16px">{{ footer_provider_number }}</a><br/>
            电话：{{ footer_mobile }}  传真：{{ footer_fax }}1<br/>
            电子邮箱：{{ footer_email }}
          </div>
          <div class="code-block pull-right" v-if="footer_QRcode">
            <img :src="footer_QRcode" alt="QRcode" class="mooctest-code" style="width: 110px;height: 110px;display: block">
            <div style="width: 110px;text-align: center">官方微信公众号</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {CONFIG} from "../../config";

export default {
  name: "Footer2.0",
  data(){
    return{
      logo_white:CONFIG.logo_white,
      footer_title_one:CONFIG.footer_title_one,
      footer_title_two:CONFIG.footer_title_two,
      footer_provider_number:CONFIG.footer_provider_number,
      footer_mobile:CONFIG.footer_mobile,
      footer_fax:CONFIG.footer_fax,
      footer_email:CONFIG.footer_email,
      footer_QRcode:CONFIG.footer_QRcode,
    }
  }
}
</script>

<style scoped lang="scss">
  @import "../../style/main";

  .footer-nav{
    height: 120px;
    background:$--color-primary;
    color: $--color-title-color;
    padding: 30px 0;
    font-size: 14px;
    font-family:Source Han Sans CN;
  }
  .footer-nav-online{
    height: 120px;
    background:$__color-primary;
    color: $--color-title-color;
    padding: 30px 0;
    font-size: 14px;
    font-family:Source Han Sans CN;
  }
  .nav-title{
    display: inline-block;
  }
  .nav-logo{
    height: 40px;
    width: 40px;
    margin-right: 10px;
  }
  .nav-logo-block{
    border-right: 1px solid $--color-title-color;
    padding: 10px 0;
    margin: 20px 0
  }
  .copyright-block , .code-block{
    display: inline-block;
  }
</style>