<template>
  <div class="bottom-bar">
    <!--    合作伙伴-->
    <div class="partners">
      <div class="partners-line">
        <ul>
          <li>
            <img style="transform: rotate(180deg);"
                 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAAXNSR0IArs4c6QAAAhdJREFUSEulVU1rE1EUPdfEgBAIg27UjT+jS13pTpeKriMxRQxJ3hukBnc2ZUwiLUFGxRbbKqZ/Rve+2bswkSB13jDvygtJSZPJl5nlzJz7zr33nPNISlmL4/it53k/seJDQoh3RMRKqc1Op6NXwZOU8j6ABoATrfXLZrP5a9kCVC6Xr6TT6a8ANpj5Y6/Xe+b7frRMAbI/SSkLANoALG1Pa/16GQYDcLFYvJzNZr8DuAbgFMBxGIaVVqvVm8dgAM7n8xcdx3kDwDIAM4dE1FZKufOGOADbp1Kp3EylUkfD0+0rzczvoyh6MauFM3ChUHByudwxM98ZFWRm28JeEARbSQzOwMPBPQLwaaLP0Bizz8y1SSGdA5dKpUuZTOYHgKsTBf4C+KKUejzO4BzYAlzX3WXmJwAuTBQYrLHb7e74vv/bfpsCCyE2iOgzgBsJazq1QjLGCM/z/iSd7Bhjdono4Ywd2xYa/X7/1RTYAoQQ94hoH0BuVgFjzEkiWEp5F8DBPLA10jzaDxKGZonMpr3EwD4YY9zEgUkp94YaT1qV9f12vV6fXtVaIpFSJsnT6vswjuOtmfJ0XddhZiuO22PrsaJoB0HwfK4xhBC3iOhwZUuuFQbDGPoG4PoohrTWYlGOjQKwaE0/DMBGGIb1Rfk1cNVa0SuEsO7ZAXAURdH2IqrjRhldN7FS6unK1021Wq0x839ddP8AAxJAzJtS4CsAAAAASUVORK5CYII="/>
          </li>
          <li v-for="index in 9">
            <div class="" :key="index">
              <img src="../assets/steam-partners.png" alt="">
            </div>
          </li>
          <li>
            <img
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAAXNSR0IArs4c6QAAAhdJREFUSEulVU1rE1EUPdfEgBAIg27UjT+jS13pTpeKriMxRQxJ3hukBnc2ZUwiLUFGxRbbKqZ/Rve+2bswkSB13jDvygtJSZPJl5nlzJz7zr33nPNISlmL4/it53k/seJDQoh3RMRKqc1Op6NXwZOU8j6ABoATrfXLZrP5a9kCVC6Xr6TT6a8ANpj5Y6/Xe+b7frRMAbI/SSkLANoALG1Pa/16GQYDcLFYvJzNZr8DuAbgFMBxGIaVVqvVm8dgAM7n8xcdx3kDwDIAM4dE1FZKufOGOADbp1Kp3EylUkfD0+0rzczvoyh6MauFM3ChUHByudwxM98ZFWRm28JeEARbSQzOwMPBPQLwaaLP0Bizz8y1SSGdA5dKpUuZTOYHgKsTBf4C+KKUejzO4BzYAlzX3WXmJwAuTBQYrLHb7e74vv/bfpsCCyE2iOgzgBsJazq1QjLGCM/z/iSd7Bhjdono4Ywd2xYa/X7/1RTYAoQQ94hoH0BuVgFjzEkiWEp5F8DBPLA10jzaDxKGZonMpr3EwD4YY9zEgUkp94YaT1qV9f12vV6fXtVaIpFSJsnT6vswjuOtmfJ0XddhZiuO22PrsaJoB0HwfK4xhBC3iOhwZUuuFQbDGPoG4PoohrTWYlGOjQKwaE0/DMBGGIb1Rfk1cNVa0SuEsO7ZAXAURdH2IqrjRhldN7FS6unK1021Wq0x839ddP8AAxJAzJtS4CsAAAAASUVORK5CYII="/>
          </li>
        </ul>
      </div>
      <!--      服务支持-->
      <div class="partners-service-guarantee">
        <template v-for="index in 4">
          <div class="service-guarantee">
            <div class="sg-icon">
              <img src="../assets/vue.svg" width="32" height="32">
            </div>
            <div class="sg-info">
              <div>自动发货</div>
              <div>提供最快发货</div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <!--    其他信息-->
    <div class="other-info">
      <div class="other-info-row1">
        <router-link to="/info/test">测试</router-link>
      </div>
      <div class="other-info-row2"></div>
    </div>
    <!--    备案-->
    <div class="filing">
      <div class="filing-body">xxx省xxx市xxx区666号xxx公司</div>
    </div>

  </div>
</template>
<script setup lang="ts">

</script>

<style scoped lang="scss">
.bottom-bar {
  background: white;
  margin: 0;
  padding: 85px 0 0 0;

  .partners-line {
    margin: auto;
    width: 1170px;
    height: 100px;

    ul {
      padding: 25px 0 0 0;
      list-style: none;
      display: flex;
      justify-content: space-between;
      li {
        height: 46px;
        display: flex;
        margin: 0 10px;
        justify-content: space-between;
        align-items: center;

      }
    }
  }

  .partners-service-guarantee {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1180px;
    margin: 60px auto;
    border-bottom: 1px solid #e5e5e5;

    .service-guarantee {
      display: flex;
      text-align: left;
      margin-bottom: 20px;
      .sg-icon {
        height: 60px;
        width: 60px;
        border-radius: 50%;
        background: #8a65d9;

        display: flex;
        justify-content: center;
        align-items: center;
      }

      .sg-info {
        justify-content: center;
        align-items: center;
        height: 38px;
        margin-top: 8px;
        margin-left: 16px;


        div:nth-child(1) {

          color: #333333;
          display: block;
          box-sizing: border-box;
          line-height: 16px;
          width: 100%;
          font-size: 16px;
          font-weight: bold;
        }

        div:nth-child(2) {
          color: #8b8b8b;
          display: block;
          margin-top: 8px;
          box-sizing: border-box;
          line-height: 14px;
          width: 100%;
          font-size: 14px;
        }

      }
    }
  }

  .filing-body {
    text-align: center;
    color: #8b8b8b;
    padding-bottom: 15px;
  }

}
</style>