mall
/
item_details.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./font_4112181_e7u4ss9wk2c/iconfont.css">
  <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
  <link rel="stylesheet" href="./lib/font/iconfont.css">
  <link rel="stylesheet" href="./css/item_details.css">
</head>

<body>
  <div class="common-classify-header">
    <div class="uni-page-head">
      <div class="uni-page-head-hd">
        <div class="uni-page-head-btn">
          <span class="iconfont icon-xiangzuojiantou"></span>
        </div>
      </div>
      <div class="uni-page-head-bd">
        <h1>商品详情页</h1>
      </div>

    </div>

  </div>
  <div class="container">
    <div class="images-swiper">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./uploads/section0/8f505c6c437fc3d4b4310b57b1567544.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./uploads/section0/8f505c6c437fc3d4b4310b57b1567544.jpg" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <!-- <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div> -->

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
        <div class="swiper-count">
          4/5
        </div>
      </div>
    </div>

    <div class="goods-info m-top20">
      <div class="info-item info-item__top">
        <div class="block-left">
          <div class="block-left">
            <div class="floor-price-small">
              <span>￥</span>
            </div>
            <div class="floor-price">
              <span>0.01</span>
            </div>
            <div class="original-price">
              <span>￥6699.00</span>
            </div>
          </div>
        </div>
        <div class="block-right">
          <div class="goods-sales">
            <span>已售1019件</span>
          </div>
        </div>
      </div>
      <div class="info-item info-item__name">
        <div class="goods-name">
          <span class="ellipsis-2">
            三星手机 SAMSUNG Galaxy S23 8GB+256GB 超视觉夜拍系统 超清夜景 悠雾紫 5G手机 游戏拍照旗舰机s23
          </span>
        </div>
      </div>
    </div>
    <div class="service-wrapper">
      <div class="service-simple">
        <div class="s-list">
          <div class="s-item">
            <span class="item-icon iconfont icon-dui col-m"></span>
            <span>七天无理由退换货</span>
          </div>
          <div class="s-item">
            <span class="item-icon iconfont icon-dui col-m"></span>
            <span>48小时发货</span>
          </div>
        </div>
        <div class="s-arrow">

        </div>
      </div>
    </div>
    <div class="goods-comment m-top20">
      <div class="item-title">
        <div class="block-left flex-box">
          商品评价(
          <span class="total">
            <span>5</span>
            <span>条</span>
          </span>
          )
        </div>
        <div class="block-right">
          <span class="show-more col-9">
            查看更多
          </span>
          <span class="iconfont icon-youjiantou"></span>
        </div>
      </div>
      <div class="comment-list">
        <div class="comment-item">
          <div class="comment-item_row">
            <div class="user-info">
              <div class="avatar-image">
                <img src="./uploads/default-avatar.png" alt="">
              </div>
              <div class="user-name">
                谷神不死
              </div>

            </div>
            <div class="u-rate">
              <div class="u-star-wrap ">
                <span class="iconfont icon-shiwujiaoxing"></span>
              </div>
              <div class="u-star-wrap ">
                <span class="iconfont icon-shiwujiaoxing"></span>
              </div>
              <div class="u-star-wrap ">
                <span class="iconfont icon-shiwujiaoxing"></span>
              </div>
              <div class="u-star-wrap ">
                <span class="iconfont icon-shiwujiaoxing"></span>
              </div>
              <div class="u-star-wrap ">
                <span class="iconfont icon-shiwujiaoxing"></span>
              </div>
            </div>
          </div>
          <div class="item-content m-top20">
            <div class="ellipsis-2">
              <span>
                质量很不错 挺喜欢的
              </span>
            </div>
          </div>
          <div class="comment-time">
            2023-03-21 15:01:35
          </div>
        </div>
        <div class="comment-item">
          <div class="comment-item_row">
            <div class="user-info">
              <div class="avatar-image">
                <img src="./uploads/default-avatar.png" alt="">
              </div>
              <div class="user-name">
                谷神不死
              </div>

            </div>
            <div class="u-rate">
              <div class="u-star-wrap ">
                <span class="iconfont icon-shiwujiaoxing"></span>
              </div>
              <div class="u-star-wrap ">
                <span class="iconfont icon-shiwujiaoxing"></span>
              </div>
              <div class="u-star-wrap ">
                <span class="iconfont icon-shiwujiaoxing"></span>
              </div>
              <div class="u-star-wrap ">
                <span class="iconfont icon-shiwujiaoxing"></span>
              </div>
              <div class="u-star-wrap ">
                <span class="iconfont icon-shiwujiaoxing"></span>
              </div>
            </div>
          </div>
          <div class="item-content m-top20">
            <div class="ellipsis-2">
              <span>
                质量很不错 挺喜欢的
              </span>
            </div>
          </div>
          <div class="comment-time">
            2023-03-21 15:01:35
          </div>
        </div>
      </div>
    </div>
    <div class="goods-content">
      <div class="item-title b-f">
        <span>商品描述</span>
      </div>
      <div class="goods-content__detail b-f">
        <div class="detail">
          <div class="short-detail">
            <img src="./uploads/section4/120504660016241179102844.jpg" alt="">
            <img src="./uploads/section4/120504660016241179102844.jpg" alt="">
          </div>
        </div>
        <div class="detail">
          <div class="short-detail">
            <img src="./uploads/section4/120504660016241179102844.jpg" alt="">
            <img src="./uploads/section4/120504660016241179102844.jpg" alt="">
          </div>
        </div>
        <div class="detail">
          <div class="short-detail">
            <img src="./uploads/section4/120504660016241179102844.jpg" alt="">
            <img src="./uploads/section4/120504660016241179102844.jpg" alt="">
          </div>
        </div>
      </div>
    </div>

    <div class="goods-sku-popup none">
      <div class="mask"></div>
      <div class="layer attr-content">
        <div class="specification-wrapper">
          <div class="specification-wrapper-content">
            <div class="uni-scroll-view">
              <div class="specification-header">
                <div class="specification-left">
                  <img src="http://cba.itlike.com/public/uploads/10001/20230321/969969a55b047c0a44df7320dda6d7b9.jpg"
                    alt="" class="product-img">
                </div>
                <div class="specification-right">
                  <div class="price-content">
                    <span class="sign">
                      <span>¥</span>
                    </span>
                    <span class="price">
                      <span>1969.00</span>
                    </span>
                  </div>
                  <div class="inventory">
                    库存：899646
                  </div>
                  <div class="choose none">
                    <span>已选：默认</span>
                  </div>
                </div>
              </div>
              <div class="specification-content">
                <div class="specification-item"></div>
                <div class="number-box-view">
                  <div class="number-left">
                    <span>数量</span>
                  </div>
                  <div class="number-right stepper">

                    <div class="u-numberbox">
                      <div class="u-icon-minus">
                        <span class="iconfont icon-jian"></span>
                      </div>
                      <div class="u-number-input">
                        <input type="text" placeholder="1">
                      </div>
                      <div class="u-icon-plus">
                        <span class="iconfont icon-jia"></span>
                      </div>

                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="btn-wrapper">
          <div class="sure add-cart">加入购物车</div>
        </div>
      </div>
    </div>
    <div class="footer-fixed">
      <div class="footer-container">
        <div class="foo-item-fast">
          <div class="fast-item fast-item--home">
            <div class="fast-icon">
              <span class="iconfont icon-shouye"></span>
            </div>
            <div class="fast-text">
              <span>首页</span>
            </div>
          </div>
          <div class="fast-item fast-item--cart">
            <div class="fast-icon">
              <span class="iconfont icon-gouwuche"></span>
            </div>
            <div class="fast-text">
              <span>购物车</span>
            </div>
          </div>
        </div>
        <div class="foo-item-btn">
          <div class="btn-wrapper">
            <div class="btn-item btn-item-deputy">
              <span>加入购物车</span>
            </div>
            <div class="btn-item btn-item-main">
              <span>立即购买</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="./swiper/swiper-bundle.min.js"></script>
  <!-- <script>
    var mySwiper = new Swiper('.swiper', {
      // direction: 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
      },
      // 设置Slide的切换效果，默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
      effect: 'slide',
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      // 如果需要前进后退按钮
      // navigation: {
      //   nextEl: '.swiper-button-next',
      //   prevEl: '.swiper-button-prev',
      // },

      // 如果需要滚动条
      // scrollbar: {
      //   el: '.swiper-scrollbar',
      // },
    })
  </script> -->

  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script>
  <script src="./js/common.js"></script>
  <script src="./js/item_details.js"></script>
</body>

</html>