footer.vue

<template>
  <div class="footbar_">
    <div class="con_">
      <div class="con_item2">
        <img src="../../assets/imgs/layout/logo1.svg" alt="" />
        <p>
          <span class="locicon"></span>
          总部地址：北京市朝阳区建国门外大街丙24号，京泰大厦10层
        </p>
        <p><span class="phoneicon"></span>联系方式：400 880 8820</p>
        <p><span class="emailicon"></span>邮&nbsp;&nbsp;编： 100022</p>
        <p><span class="faxicon"></span>传真：+8610 8453 9719</p>
        <p><span class="websiteicon"></span>网址：www.medilink-global.com.cn</p>
      </div>
      <div class="con_item2 flex_" v-if="false">
        <div class="con_item3">
          <p class="bold">关于中间带</p>
          <a href=""
            ><router-link :to="{ path: '/about', query: { loc: 1 } }"
              >企业简介</router-link
            ></a
          >
          <a href=""
            ><router-link :to="{ path: '/about', query: { loc: 2 } }">
              发展历程
            </router-link></a
          >
          <a href=""
            ><router-link :to="{ path: '/about', query: { loc: 3 } }">
              核心优势
            </router-link></a
          >
        </div>
        <div class="con_item3">
          <p class="bold">视频中心</p>
          <a href=""
            ><router-link :to="{ path: '/about', query: { loc: 4 } }">
              企业活动片
            </router-link></a
          >
        </div>
        <div class="con_item3">
          <p class="bold">产品与服务</p>
          <a href=""
            ><router-link :to="{ path: '/thirdService/thirdPartService' }">
              第三方管理服务
            </router-link></a
          >
          <a href=""
            ><router-link :to="{ path: '/vipService' }">
              会员服务
            </router-link></a
          >
          <a href=""
            ><router-link :to="{ path: '/specialService' }">
              特色服务
            </router-link></a
          >
        </div>
        <div class="con_item3">
          <p class="bold">信息中心</p>
          <a href=""
            ><router-link :to="{ path: '/about', query: { loc: 5 } }">
              最新动态
            </router-link></a
          >
        </div>
      </div>
      <div class="con_item2 flex_">
        <div class="con_item4">
          <img src="../../assets/imgs/layout/saoma.png" alt="" />
          <span>中间带在线</span>
        </div>
        <div class="con_item4">
          <img src="../../assets/imgs/layout/erweima24.jpeg" alt="" />
          <span>中间带24小时</span>
        </div>
        <div class="con_item4">
          <img src="../../assets/imgs/layout/ma3.jpg" alt="" />
          <span>MediLink Global<br />中间带</span>
        </div>
      </div>
    </div>
    <p>
      Copyright © 2008 - 2020 MediLink-Global. ALL RIGHTS RESERVED
      京ICP备08007346号-1 京公网安备 11010502030494号
    </p>
  </div>
</template>
<style lang="less" scoped>
.footbar_ {
  background: #2c2c31;
  background-size: 100% 100%;
  padding: 58px 0 0 0;
  width: 100%;
  height: 180px;
  box-sizing: border-box;
  .con_ {
    display: flex;
    justify-content: space-between;
    align-items: initial;
    font-size: 14px;
    padding: 0 83px;
    color: #fff;
    background-color: #2c2c31;
    .con_item2 {
      &.flex_ {
        display: flex;
        justify-content: space-between;
      }
      &:first-child {
        // width:460px;
        width: 29%;
        img {
          width: 119px;
          height: 35px;
          object-fit: cover;
          margin-bottom: 30px;
        }
        p {
          // margin-bottom:20px;
        }
      }
      &:nth-child(2) {
        // width:510px;
        width: 33.4%;
        // margin-left: -151px;
      }
      &:last-child {
        // width:270px;
        width: 30%;
      }
      p {
        display: flex;
        align-items: center;
        justify-content: self-start;
      }
      .locicon {
        width: 15px;
        height: 15px;
        display: inline-block;
        background: url(../../assets/imgs/layout/locicon.png) center center
          no-repeat;
        background-size: 13px 17px;
        margin-right: 13px;
      }
      .phoneicon {
        width: 15px;
        height: 15px;
        display: inline-block;
        background: url(../../assets/imgs/layout/phoneicon.png) center center
          no-repeat;
        background-size: 15px 13px;
        margin-right: 13px;
      }
      .emailicon {
        width: 15px;
        height: 15px;
        display: inline-block;
        background: url(../../assets/imgs/layout/emailicon.png) center center
          no-repeat;
        background-size: 14px 11px;
        margin-right: 13px;
      }
      .faxicon {
        width: 15px;
        height: 15px;
        display: inline-block;
        background: url(../../assets/imgs/layout/faxicon.png) center center
          no-repeat;
        background-size: 14px 14px;
        margin-right: 13px;
      }
      .websiteicon {
        width: 15px;
        height: 15px;
        display: inline-block;
        background: url(../../assets/imgs/layout/websiteicon.png) center center
          no-repeat;
        background-size: 15px 15px;
        margin-right: 13px;
      }
      .con_item3 {
        display: flex;
        flex-direction: column;
        p {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 10px;
        }
        a {
          font-size: 14px;
          color: #fff;
          padding: 5px 0;
          opacity: 0.7;
          &:hover {
            opacity: 1;
          }
        }
      }
      .con_item4 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        // margin-right:33px;
        margin-top: -96px;
        width: 143px;
        align-items: center;
        img {
          width: 109px;
          height: 109px;
          object-fit: cover;
          margin-bottom: 5px;
        }
        &:last-child {
          margin-right: 0;
          margin-top: -75px;
          span {
            // white-space:nowrap;
            text-align: center;
          }
        }
      }
    }
  }
  & > p {
    padding-top: 38px;
    text-align: center;
    padding: 12px 0;
    color: #fff;
    font-size: 12px;
    background: #2c2c31;
  }
}
</style>