<template>
  <div class="foot">
    <div class="foot-head">
      <div class="head-bos">
        <div class="head-left">
          <img class="head-img" src="@/assets/images/head.png" alt="" />
          <div class="flex-row-start">
            <div class="head-code flex-column-center">
              <img src="@/assets/images/code.png" alt="" />
              <div>关注公众号</div>
            </div>
            <div class="head-code flex-column-center" style="margin-left: 16px">
              <img src="@/assets/images/code.png" alt="" />
              <div>关注微博</div>
            </div>
          </div>
        </div>
        <div class="head-right">
          <div class="info-bos flex-row-start">
            <div style="margin-right: 140px">
              <div class="info-title">客户服务</div>
              <div class="info-text" style="margin-top: 0">在线客服</div>
              <div class="info-text">问题反馈</div>
            </div>
            <div style="margin-right: 140px">
              <div class="info-title">客户</div>
              <div class="info-text" style="margin-top: 0">客户管理</div>
              <div class="info-text">供应商合作</div>
            </div>
            <div>
              <div class="info-title">联系</div>
              <div class="info-text" style="margin-top: 0">帮助中心</div>
              <div class="info-text">关于我们</div>
            </div>
          </div>
          <div class="contact">
            <span>联系我们</span>
            <span>400-111-0027</span>
            <span>(周一至周五 8:30-17:30)</span>
          </div>
          <div class="logistics">
            <div class="logistics-box flex-row-start">
              <img src="@/assets/images/layout/layout3.png" alt="" />
              <div>无忧退换货</div>
            </div>
            <div class="logistics-box flex-row-start">
              <img src="@/assets/images/layout/layout3.png" alt="" />
              <div>满百包邮</div>
            </div>
            <div class="logistics-box flex-row-start">
              <img src="@/assets/images/layout/layout3.png" alt="" />
              <div>品质保证</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="foot-foot">ICP备案号: 哪ICP备06016915号-1增值电信业务经营许可证编号:鄂B2-20170182</div>
  </div>
</template>

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

<style lang="scss" scoped>
.foot {
  width: 100%;
  .foot-head {
    width: 100%;
    background: #e7e7e7;
    padding-bottom: 32px;
    .head-bos {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      .head-left {
        padding-right: 116px;
        .head-img {
          margin-top: 32px;
          width: 160px;
          height: 78px;
          margin-bottom: 50px;
        }
        .head-code {
          font-size: 12px;
          color: #364153;
          img {
            width: 86px;
            height: 86px;
            margin-bottom: 8px;
          }
        }
      }
      .head-right {
        flex: 1;
        padding-top: 44px;
        .info-bos {
          .info-title {
            font-weight: 600;
            font-size: 14px;
            color: #101828;
            margin-bottom: 20px;
          }
          .info-text {
            font-size: 14px;
            color: #101828;
            margin-top: 12px;
            cursor: pointer;

            &:hover {
              color: #e7000b;
            }
          }
        }
        .contact {
          width: 100%;
          border-top: 1px solid #dddddd;
          border-bottom: 1px solid #dddddd;
          padding: 16px 0;
          margin-top: 20px;
          font-size: 14px;
          color: #101828;
          span:nth-of-type(2) {
            padding-left: 10px;
          }
          span:nth-of-type(3) {
            padding-left: 10px;
            font-size: 12px;
            color: #6a7282;
          }
        }
        .logistics {
          padding-top: 20px;
          display: flex;
          .logistics-box {
            font-size: 16px;
            color: #101828;
            margin-right: 70px;
            img {
              width: 33px;
              height: 33px;
              margin-right: 11px;
            }
            // .logistics-icon {
            //   width: 33px;
            //   height: 33px;
            //   border-radius: 33px;
            //   border: 1px solid #101828;
            //   margin-right: 11px;
            //   img {
            //     height: 16px;
            //     width: 16px;
            //   }
            // }
          }
        }
      }
    }
  }
  .foot-foot {
    width: 100%;
    height: 52px;
    background: #000000;
    line-height: 52px;
    text-align: center;
    font-size: 14px;
    color: #ffffff;
  }
}
</style>
