copyright-official-website/src/components/Footer.vue

<template>
  <div class="footer">
    <div class="box">
      <div class="box-top">
        <div class="box-left-logo">
          <a href="#">
            <img src="/assets/img/footerlogo1.png" alt="">
          </a>
        </div>
        <div class="box-right-content">
          <div class="box1">
            <ul>
              <li>
                <router-link to="/KeFu">客服中心</router-link>
              </li>
              <li>
                <router-link to="/HelpCenter">帮助中心</router-link>
              </li>
              <li><router-link to="/AboutUs">关于我们</router-link></li>
              <li><router-link to="/ProductsNews">产品动态</router-link></li>
              <li>联系我们</li>
            </ul>
          </div>  
          <div class="box2">
            <ul class="left">
              <!-- <li>
                联系我们
              </li> -->
              <li>
                <img src="/assets/img/1.png" alt="">
                400-086-1633 
              </li>
              <li>
                <img src="/assets/img/2.png" alt="">
                kefu@tenlion.com.cn
              </li>
            </ul>
            <ul class="right">
              <li>
                <a href="https://www.aimzhu.com/UserAgreement.html" target="_blank">服务协议</a>
              </li>
              <li>
                <a href="https://www.aimzhu.com/PrivacyPolicy.html" target="_blank">隐私条款</a>
              </li>
              <li><router-link to="/Report">举报</router-link></li>
            </ul>
            
          </div>
        </div>
        
      </div>
      
      <div class="box-bottom">
        <span class="row1">
          <ul>
            <li>山西腾狮科技有限公司 版权所有</li>
            <li>晋ICP备14004820号</li>
            <li>晋公网安备 14010502050897号</li>
          </ul>
        </span>
        
      </div>
      
    </div>

  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.footer {
  /* position: relative;
  top: 80px; */
  /* position: absolute; */
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  height: 320px;
  background-color: #4a4e59;
  color: #FFF;
}
.box {
  display: flex;
  flex-direction: column;
  width: 1200px;
  height: 280px;
  margin: 40px auto;
  padding: 5px;
  /* border: 1px solid red; */
}
.box-top {
  display: flex;
  height: 120px;
  /* border: 1px solid red; */
}
.box-top .box-left-logo {
  width: 260px;
  height: 46px;
  /* margin-right: 15px; */
  /* margin: 27px 50px 27px 0; */
  margin: auto 40px;
  /* border: 1px solid red; */
  
}
.box-top .box-right-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* border: 1px solid red; */
  margin-left: 20px;
}

.box1 {
  height: 40px;
  /* line-height: 40px; */
  /* background-color: pink; */
}
.box1 ul {
  display: flex;
}
.box1 ul li {
  margin-right: 80px;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
}
.box1 ul li a:link,
.box1 ul li a:visited {
  color: #FFF;
  font-weight: 400;
}
.box1 ul li:first-child {
  margin-left: 5px;
}
.box2 {
  display: flex;
  position: relative;
  /* flex-wrap: wrap;
  align-content: flex-end; */
  /* border: 1px solid red; */
}
.box2 .left {
  height: 70px;
  width: 240px;
  /* background-color: pink; */
}
.box2 .left li {
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  /* margin-right: 50px; */
}
.box2 .left li:nth-child(1) {
  height: 40px;
  line-height: 40px;
  padding-left: 5px;
}

.box2 .left li img {
  width: 16px;
  height: 16px;
  margin: auto 5px;
}
.box2 .right {
  position: absolute;
  bottom: 0;
  right: 0;
  /* display: flex; */
  display: inline-block;
  height: 30px;
  width: 300px;
  /* background-color: skyblue; */
}
.box2 .right li {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  margin-right: 30px;
  font-size: 15px;
}
.box2 .right li a {
  color: #FFF;
}
.box-bottom {
  height: 60px;
  width: 100%;
  font-size: 14px;
  font-weight: 50;
  margin-top: 25px;
  border-top: 1px solid #7a7d85;
  /* border-top: 1px solid #4b4e56; */

}
.box-bottom .row1 {
  display: flex;
  justify-content: center;
  /* margin-top: 15px; */

}
.box-bottom .row1 ul {
  display: flex;
 
}
.box-bottom .row1 ul li {
  height: 60px;
  line-height: 60px;
  margin-right: 40px;
}

</style>