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="#"> -->
          <a href="https://www.aimzhu.com">
            <!-- <img src="/assets/img/footerlogo1.png" alt=""> -->
            <img src="/assets/img/mzlogob.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 @click="redirectToNewLink">晋ICP备14004820号</li>
            <li>晋公网安备 14010502050897号</li>
          </ul>
        </span>
        <span class="row2">
          <i>河北雄安秒著科技有限公司&emsp;运营服务</i>
        </span>
        
      </div>
      
    </div>

  </div>
</template>

<script>
export default {
  methods: {
    redirectToNewLink() {
      window.open('https://beian.miit.gov.cn', '_blank'); // 替换为你想要跳转的链接
    }
  }
}
</script>

<style scoped>
 img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  border: 0px solid transparent !important ;
}
.footer {
  /* position: relative;
  top: 80px; */
  /* position: absolute; */
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  height: 4rem;
  background-color: #4a4e59;
  color: #FFF;
}
.box {
  display: flex;
  flex-direction: column;
  width: 15rem;
  height: 3.5rem;
  margin: .5rem auto;
  padding: .0625rem;
  /* border: 1px solid red; */
}
.box-top {
  display: flex;
  height: 1.5rem;
  /* border: 1px solid red; */
}
.box-top .box-left-logo {
  /* width: 3.25rem;
  height: .575rem; */
  width: 2.325rem;
  height: .75rem;
  /* margin-right: 15px; */
  /* margin: 27px 50px 27px 0; */
  margin: auto .5rem;
  /* border: 1px solid red; */
  
}
.box-top .box-right-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* border: 1px solid red; */
  margin-left: .25rem;
}

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

.box2 .left li img {
  width: .2rem;
  height: .2rem;
  margin: auto .0625rem;
}
.box2 .right {
  position: absolute;
  bottom: 0;
  right: 0;
  /* display: flex; */
  display: inline-block;
  height: .375rem;
  width: 3.75rem;
  /* background-color: skyblue; */
}
.box2 .right li {
  display: inline-block;
  height: .375rem;
  line-height: .375rem;
  margin-right: .375rem;
  font-size: .1875rem;
}
.box2 .right li a {
  color: #FFF;
}
.box-bottom {
  /* height: .75rem; */
  height: .625rem;
  width: 100%;
  font-size: .175rem;
  font-weight: 50;
  margin-top: .3125rem;
  border-top: .0125rem solid #7a7d85;
  /* border-top: 1px solid #4b4e56; */

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

}
.box-bottom .row1 ul {
  display: flex;
 
}
.box-bottom .row1 ul li {
  /* height: .75rem;
  line-height: .75rem; */
  height: .625rem;
  line-height: .625rem;
  margin-right: .5rem;
}
.box-bottom .row1 ul li:nth-child(2) {
  cursor: pointer;
}
.box-bottom .row2 {
  display: flex;
  justify-content: start;
  width: 8.3rem;
  margin: 0 auto;
  color: red;
  font-size: .175rem;
}

</style>