<template>
  <div id="commodity-detail">
    <header class="h-70 bg-black">
      轮播图
    </header>
    <main>
      <div class="detail-info wrap">
        <h2 class="text-2xl color-[#000]">陕西珍珠首饰项链</h2>
        <h4 class="mt-2 text-sm">副标题</h4>
        <ul class="detail-wrap">
          <li><span>配送</span> <em>立即下单，预计最快今天23:00发货</em></li>
          <li><span>服务</span> <button>7天无理由退款</button></li>
        </ul>
      </div>
      <div class="review-info wrap">
        <h3 class="wrap-title"><b>用户评价(45.6万+)</b><span>全部评价</span></h3>
        <div class="mt-5">
          <review-single />
        </div>
      </div>
      <div class="wrap">
        <h3 class="wrap-title"><b>商品详情</b><span>查看全部信息</span></h3>
        <info-table />
      </div>
    </main>
  </div>
</template>

<script lang="ts" setup>
import reviewSingle from './components/review-single.vue'
import infoTable from './components/info-table.vue'
</script>

<style scope lang="scss">
#commodity-detail{
  background: #f2f2f2;
  .wrap{
    margin: .08rem .12rem; 
    border-radius: .12rem;
    padding: .16rem;
    background: #fff;
    .wrap-title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      b{
        font-size: .16rem;
        color: #000;
      }
      span{
        font-size: .12rem;
        color: #777;
      }
    }
  }
  .detail-info{
    li{
      margin-top: .12rem;
      span{
        margin-right: .1rem;
        color: #888;
      }
      em{
        color: #000;
        font-style: normal;
      }
      button{
        border: 1px solid #aaa;
        border-radius: .02rem;
        background: #fff;
        padding: .02rem .04rem;
      }
    }
  }
  .review-info{
    h3{
      span{

      }
    }
  }
}
</style>