admin_home/src/views/template/style/components/footer/info/1.vue

<template>
  <div :class="['footerInfoBox',{componentBorder: this.$store.state.template.previewStatus==false}]">
    <div class="footerInfoBoxContent">
      <div class="footerInfoBoxContentLeft">
        <img src="@/assets/template/component/sign1.png">
      </div>
      <div class="footerInfoBoxContentMain">
        <div>本站部分信息由相应民事主体自行提供，该信息内容的真实性、准确性和合法性应由该民事主体负责。三农市场信息网 对此不承担任何保证责任。</div>
        <div>本网部分转载文章、图片等无法联系到权利人。请相关权利人与本网站联系。</div>
        <div>北京中农兴业网络技术有限公司主办 | 政讯通·全国政务信息一体化办公室 主管</div>
        <div>联系电话：010-56019387、010-80440269、010-69945235，监督电话：18516948318，违法和不良信息举报电话：010-57028685</div>
        <div>第一办公区：北京市西城区敬胜胡同甲3号东侧；第二办公区：北京市东城区建国门内大街26号新闻大厦5层</div>
        <div>邮箱: qgsndy@163.com 客服QQ : 2909421493 通联QQ : 213552413</div>
      </div>
      <div class="footerInfoBoxContentRight">
        <img src="@/assets/template/component/sign2.png">
      </div>
    </div>
    <div class="footerInfoBoxBottom">
      <img src="@/assets/template/component/bottom1.png">
      <img src="@/assets/template/component/bottom2.png">
      <img src="@/assets/template/component/bottom3.png">
      <img src="@/assets/template/component/bottom4.png">
    </div>
  </div>
</template>

<script>
export default {
  props: {
    
  },
  data() {
    return {
      
    };
  },
  methods: {
    
  },
  mounted() {

  },
};
</script>

<style scoped lang="less">
  .componentBorder {
    border: 2px dashed #999;
  }
  .footerInfoBox {
    width: 80%;
    .footerInfoBoxContent {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .footerInfoBoxContentLeft {
        width: 10%;
        box-sizing: border-box;
        padding-right: 10px;
        img {
          width: 100%;
          display: block;
        }
      }
      .footerInfoBoxContentMain {
        padding-top: 40px;
        font-size: 14px;
        div {
          text-align: center;
          padding-bottom: 10px;
          color: #fff;
        }
      }
      .footerInfoBoxContentRight {
        width: 10%;
        box-sizing: border-box;
        padding-left: 10px;
        img {
          width: 100%;
          display: block;
        }
      }
    }
    .footerInfoBoxBottom {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 40px;
      img {
        width: 10%;
        display: block;
        margin-right: 10px;
      }
    }
  }
</style>