orange-Mall
/
tuan.html

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maxmum-scale=1.0,user-scalable=0">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/tuan.css">
  <title>团团助力</title>
</head>

<body>
  <div class="container">
    <!-- 头部 -->
    <header>
      <div class="header">
        <a class="back" href="personal.html"></a>
        <span>团团助力</span>
      </div>
    </header>
    <!-- shopinfo -->
    <section>
      <div class="shopinfo">
        <img src="images/tuan/img01.png" alt="">
        <div class="status clearfix">
          <img class="fr" src="images/tuan/img02.png" alt="">
          <p class="qiang">我正在抢绯红女巫同款礼服</p>
        </div>
        <p class="text">
          SUPERVIP
        </p>
      </div>
    </section>
    <!-- main -->
    <section>
      <div class="main">
        <div class="discount">
          <h1>当前价格:5折</h1>
          <p class="desc">还差 <em>10</em> 个好友助力包可升至 <em>0元购</em>, 快帮TA找更多人加速</p>

          <div class="barOut">
            <div class="barInner">
            </div>
          </div>
          <ul>
            <li>9折</li>
            <li>7折</li>
            <li>5折</li>
            <li>0元购</li>
          </ul>
        </div>
        <div class="button">
          <p>一键帮TA助力</p>
          <p>TA是超级会员享双倍加速效果</p>
        </div>
        <div class="friendHelp">
          <h1>好友助力榜</h1>
          <ul>
            <li>
              <img src="images/tuan/icon01.jpg" alt="">
              <span>刘大海</span><span class="box1">最佳老铁</span><span class="box2">超级会员翻倍</span><em class="fr">5×2份</em>
            </li>
            <li>
              <img src="images/tuan/icon02.jpg" alt="">
              <span>张铁柱</span><em class="fr">2份</em>
            </li>
            <li>
              <img src="images/tuan/icon03.jpg" alt="">
              <span>王老二</span><em class="fr">1份</em>
            </li>
            <li>
              <img src="images/tuan/icon04.jpg" alt="">
              <span>那就这样的吧</span><em class="fr">1份</em>
            </li>
            <li>
              <img src="images/tuan/icon05.jpg" alt="">
              <span>你好你好</span><span class="box2">超级会员翻倍</span><em class="fr">5×2份</em>
            </li>
            <li>
              <img src="images/tuan/icon06.jpg" alt="">
              <span>不过尔尔</span><em class="fr">2份</em>
            </li>
            <li>
              <img src="images/tuan/icon06.jpg" alt="">
              <span>那就这样的吧</span><em class="fr">2份</em>
            </li>
          </ul>
        </div>
      </div>
    </section>
  </div>
</body>

</html>