master

分支 (1)

管理

管理

master

xiaomi
/
shoppingcar.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的购物车-小米商城</title>
    <link rel="icon" href="public/imgs/favicon.ico">
</head>
<style>
    a{
        text-decoration: none;
        color: black;
    }
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    body{
   background: #f5f5f5;;
    }
    header{
        width: 100%;
        height: 102px;
        font-size: 12px;
        border-bottom: 2px solid #ff6700;
        background: #fff;
        position: relative;
    }
    .container {
        width: 1226px;
        margin-right: auto;
        margin-left: auto;
        height: 74px;
    }
    .header-logo{
        width: 93px;
        height: 48px;
        float: left;
        margin-top: 26px;
    }
    .header-logo img{
        width: 48px;
        height: 48px;
    }
    .header-title{
        width: 491px;
        height: 60px;
        float: left;
        margin-top: 26px;
    }
    .header-title h2{
        margin-top: 20px;
        float: left;
        font-size: 28px;
        line-height: 10px;
    }
    .header-title p{
        float: left;
        height: 20px;
        line-height: 20px;
        margin-top: 20px;
        margin-left: 15px;
        color: #757575;
    }
    .user-info{
        width: 194px;
        height: 40px;
        float: right;
        margin-top: 33px;
    }
  .user-name{
      float: left;
      width: 110px;
      height: 40px;
      text-align: center;
      line-height: 40px;
  }
  .order{
      height: 20px;
      width: 80px;
      border-left: #8D8D8D 1px solid;
      float: left;
      margin-top: 10px;
      line-height: 20px;
      text-align: center;
  }
  .item-box-title{
      width: 1226px;
      height: 70px;
      margin: 40px auto 0;
      border-bottom: 1px solid #8D8D8D;
      background:white;
  }
  .item-box{
      border-bottom: solid 1px #e0e0e0;
      background-color: #fff;
      width: 1226px;
      height:117px;
      margin: 0 auto;
      line-height: 117px;
      display: flex;
      align-items: center;
  }
  .check{
      text-align: center;
      height: 70px;
      width: 110px;
      float: left;
      line-height: 70px;
  }
  .check-box-style{
      margin-left: 30px;
  }
  .item-picture{
      height: 70px;
      width: 120px;
      float: left;
  }
  .item-picture img{
      margin-bottom: 40px;
      width: 70px;
      height: 70px;
  }
  .item-name{
      width: 380px;
      height: 70px;
      line-height: 70px;
      float: left;
  }
  .item-price{
      width: 158px;
      height: 70px;
      text-align: center;
      line-height: 70px;
      float: left;
  }
  .item-number{
      width: 150px;
      height: 70px;
      text-align: center;
      line-height: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
      float: left;
  }
  .item-total{
      width: 201px;
      height: 70px;
      text-align: center;
      line-height: 70px;
      float: left;
  }
    .item-action{
        width: 80px;
        height: 70px;
        text-align: center;
        line-height: 70px;
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;

    }
    .item-remove{
        height: 22px;
        width: 22px;
        border-radius: 50%;
        text-align: center;
        border: none;
        background: white;
        line-height: 22px;
    }
    .item-remove:hover{
        background-color: #ff6700;
    }
    .total{
        width: 1226px;
        height: 50px;
        background-color:white;
        margin: 10px auto 0;
    }
    .total-left{
        width: 193px;
        height: 50px;
        line-height: 50px;
        float: left;
    }
   .total-right{
       width: 400px;
       height: 50px;
       float: right;

   }
   .total-right button{
       width: 200px;
       height: 50px;
       background-color:#ff6700;
       float: right;
       border: none;
       text-align: center;
       line-height: 50px;
       color: #f2f2f2;
       font-size: 18px;
       cursor: pointer;
       opacity: 0.9;
   }
   .total-right button:hover{
       opacity: 1;
   }
   .total-price{
       width: 200px;
       height: 50px;
       float: left;
       line-height: 50px;
       color: #ff6700;
   }
 .total-price-main{
     font-style: normal;
     font-size: 30px;
     color: #ff6700;
 }
 .shopping{
     color: #757575;text-decoration: none;font-size: 14px;padding-right: 15px;padding-left: 15px
 }
.shopping:hover{
    color: #ff6700;

}
.item-number img{
    width: 20px;
    height: 20px;

}
.page-0{
    width: 1226px;
    height: 30px;
    margin: 0 auto;
}
.page-0 li{
    width: 100px;
    height: 30px;
    float: left;
    border: solid 1px #e0e0e0;
    text-align: center;
    line-height: 30px;
}
.page-0 button{
    width: 100px;
    height: 32px;
    border: none;
    cursor: pointer;
}

</style>
<body>
<header>
  <div class="container">
    <div class="header-logo">
    <img src="public/imgs/logo-mi2.png">
    </div>
      <div class="header-title">
        <h2>我的购物车</h2>
          <p>
              温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算
          </p>
      </div>
      <div class="user-info">
      <div class="user-name"></div>
       <div class="order">我的订单</div>
      </div>
  </div>
</header>
<div class="page-main-shopping">
    <div class="item-box-title">
        <div>
        <div class="check">
            <input type="checkbox" class="check-box-style">全选
        </div>
        <div class="item-picture"></div>
        <div class="item-name">商品名称</div>
        <div class="item-price">单价</div>
        <div class="item-number">数量</div>
        <div class="item-total">小计</div>
        <div class="item-action">操作</div>
        </div>
    </div>

</div>
<div class="page-0">
    <ul>
        <li><a href="shoppingcar.html"><button >首页</button></a></li>
        <li style="background-color:#ff6700;"><a href="shoppingcar.html" ><button class="page-1" style="background-color:#ff6700;">1</button></a></li>
        <li><a href="shoppingcar2.html"><button class="page-2">2</button></a></li>
        <li><a href=""><button>3</button></a></li>
        <li><a href=""><button>4</button></a></li>
        <li><a href=""><button>5</button></a></li>
        <li><a href=""><button>6</button></a></li>
        <li><a href=""><button>7</button></a></li>
        <li><a href=""><button>8</button></a></li>
        <li><a href=""><button>9</button></a></li>
        <li><a href=""><button>10</button></a></li>
        <li><a href=""><button>尾页</button></a></li>
    </ul>
</div>
<div class="total">
  <div class="total-left">
      <a href="index.html" class="shopping">继续购物</a>
     <span style="color: #757575;padding-left: 10px;border-left:1px solid;">已选择1件</span>
  </div>
    <div class="total-right">
        <div class="total-price">
          <span>合计：</span>
            <span class="total-price-main"></span>
            <span style="color: #ff6700">元</span>
        </div>
      <button>
       去结算
      </button>
    </div>
</div>
<script src="js/shoppingcar.js"></script>
<script>
    const username=localStorage.getItem('username')
    const user=document.querySelector('.user-name')
    user.innerHTML=username
</script>
</body>
</html>