hemall.terabimsoft.com.cn/plugins/shop_server/components/templateTwo/footer2.vue

<!-- 样式模板2 底部导航 -->
<template>
  <div id="footer02" v-if="basicSet.pc_temp2_set && basicSet.pc_temp2_set.nav_bottom" v-html="basicSet.pc_temp2_set.nav_bottom">
    <!-- 顶部 -->
    <!-- <div class="footer_service" style="background-color: #3f3f3f;">
      <div class="content" style="grid-template-columns: repeat(4, 1fr);">
        <a class="item" href="" style="">
          <img src="https://ysm-1251768088.cos.ap-guangzhou.myqcloud.com/newimage/de61ecbd7440656a458bd801619c4045.png" alt="">
          <div class="text">
            <div class="h3">专注于电商</div>
            <div class="h4">懂电商运营，更懂电商系统</div>
          </div>
        </a>
        <a class="item" href="">
          <img src="https://ysm-1251768088.cos.ap-guangzhou.myqcloud.com/newimage/de61ecbd7440656a458bd801619c4045.png" alt="">
          <div class="text">
            <div class="h3">0元下载体验</div>
            <div class="h4">支持免费下载到本地安装部署</div>
          </div>
        </a>
        <a class="item" href="">
          <img src="https://ysm-1251768088.cos.ap-guangzhou.myqcloud.com/newimage/de61ecbd7440656a458bd801619c4045.png" alt="">
          <div class="text">
            <div class="h3">1对1技术支持</div>
            <div class="h4">专属客户经理提供技术支持</div>
          </div>
        </a>
        <a class="item" href="">
          <img src="https://ysm-1251768088.cos.ap-guangzhou.myqcloud.com/newimage/de61ecbd7440656a458bd801619c4045.png" alt="">
          <div class="text">
            <div class="h3">交易合同发票</div>
            <div class="h4">为企业合作保驾护航</div>
          </div>
        </a>
      </div>
    </div> -->
    <!-- 顶部结束 -->
    <!-- <div class="main" style="background-color: #4d4d4d;">
      <div class="w-1200">
        <div class="main-content" style="padding:58px 0;">
          <div class="main-left">
            <div class="list">
              <div class="title">产品服务</div>
              <div class="ul">
                <a class="li" href="">产品介绍PPT</a>
                <a class="li" href="">免费部署</a>
                <a class="li" href="">视频教程</a>
              </div>
            </div>
            <div class="list">
              <div class="title">资源中心</div>
              <div class="ul">
                <a class="li" href="">商家社区</a>
                <a class="li" href="">开发者</a>
                <a class="li" href="">开发者</a>
                <a class="li" href="">数据字典</a>
              </div>
            </div>
            <div class="list">
              <div class="title">行业方案</div>
              <div class="ul">
                <a class="li" href="">电子合同系统源码</a>
                <a class="li" href="">AI智能测肤</a>
              </div>
            </div>
            <div class="list">
              <div class="title">联系我们</div>
              <div class="ul">
                <a class="li" href="">电话：186201558611</a>
                <a class="li" href="">邮箱：weiping@yunzmall.com</a>
                <a class="li" href="">地址：广州市白云区机场路1600号汇创意产业园C2栋2楼</a>
              </div>
            </div>
          </div>
          <div class="line" style="background: #fff;"></div>
          <div class="main-right">
            <div class="img-item">
              <img src="https://ysm-1251768088.cos.ap-guangzhou.myqcloud.com/newimage/c74cedee742654c079704ea426cdc6ae.jpg" alt="">
              <div class="text">扫一扫添加联系人企业微信</div>
            </div>
            <div class="img-item">
              <img src="https://ysm-1251768088.cos.ap-guangzhou.myqcloud.com/newimage/c74cedee742654c079704ea426cdc6ae.jpg" alt="">
              <div class="text">扫一扫了解更多</div>
            </div>
          </div>
        </div>
        <div class="main-bottom">
          <a href="" class="main-bottom-text">广州市芸众信息科技有限公司</a>
          <a href="" class="main-bottom-text">备案号：粤ICP备17018310号-1</a>
          <a href="" class="main-bottom-text">粤公网安备 44011102002664号</a>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  computed: {
    ...mapState(['basicSet'])
  },
};
</script>
<style lang='scss' rel='stylesheet/scss'>
#footer02{
  position: relative;
  width: 100%;
  .footer_service{
    width: 100%;
    .content{
      width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-column-gap: 32px;
      justify-items:center;
      padding: 40px 0 0;
      .item{
        display: flex;
        align-items: center;
        padding:0 12px 40px;
        width: 100%;
        color:#fff;
        img{
          width: 50px;
          height: 50px;
          display: block;
          margin: 0;
          margin-right: 20px;
        }
        .text{
          flex: 1;
          display: flex;
          flex-direction: column;
          text-align: left;
          .h3{
            font-size: 18px;
            line-height: 20px;
            padding-bottom: 14px;
          }
          .h4{
            font-size: 14px;
            line-height: 16px;
          }
        }
      }
    }
  }
  .w-1200{
    width: 1200px;
    margin: 0 auto;
  }
  .main{
    width: 100%;
    .main-content{
      display: flex;
      border-bottom: 1px solid #fff;
      .main-left{
        flex:1;
        display: flex;
        .list{
          display: flex;
          flex-direction: column;
          margin-right: 45px;
          color: #fff;
          max-width: 240px;
          .title{
            // border-bottom: 2px solid #fff;
            font-size: 14px;
            padding: 16px 0;
            position: relative;
            &::before{
              position: absolute;
              content: '';
              width: 52px;
              bottom: 0;
              left: 0;
              border: 2px solid #fff;
            }
          }
          .ul{
            display: flex;
            flex-direction: column;
            margin-top: 35px;
            .li{
              display: block;
              font-size: 14px;
              padding-bottom: 14px;
              color: #fff;
            }
          }
        }
      }
      .line{
        width: 2px;
        height: auto;
      }
      .main-right{
        display: flex;
        align-items: center;
        .img-item{
          width: 150px;
          display: flex;
          flex-direction: column;
          margin-left: 60px;
          img{
            width: 150px;
            height: 150px;
            display: block;
            margin-bottom: 28px;
          }
          .text{
            width: 100%;
            font-size: 12px;
            text-align: center;
            color: #fff;
          }
        }
      }

    }
    .main-bottom{
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 36px 0;
      .main-bottom-text{
        color: #fff;
        font-size: 12px;
        display: block;
        margin: 0 16px;
      }
    }
  }
}
</style>