-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcheckout.html
More file actions
1 lines (1 loc) · 10.5 KB
/
checkout.html
File metadata and controls
1 lines (1 loc) · 10.5 KB
1
<!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, initial-scale=1"><title>结账</title><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500"><link rel="stylesheet" href="styles/style.css"><script src="scripts/uikit.js"></script><script src="scripts/uikit-icons.js"></script></head><body><div class="uk-offcanvas-content"><header><div class="uk-navbar-container tm-navbar-container"><div class="uk-container" uk-navbar><div class="uk-navbar-left"><a class="uk-navbar-item uk-logo" href="index.html"><img src="images/logo.svg" width="90" height="32" alt="Logo"></a></div><div class="uk-navbar-right"><a class="uk-navbar-item uk-link-muted" href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: receiver; ratio: .75;"></span><span class="tm-pseudo">8 800 799 99 99</span></a></div></div></div></header><main><section class="uk-section uk-section-small"><div class="uk-container"><div class="uk-grid-medium uk-child-width-1-1" uk-grid><section class="uk-text-center"><a class="uk-link-muted uk-text-small" href="cart.html"><span class="uk-margin-xsmall-right" uk-icon="icon: arrow-left; ratio: .75;"></span>Return to cart</a><h1 class="uk-margin-small-top uk-margin-remove-bottom">Checkout</h1></section><section><div class="uk-grid-medium" uk-grid><form class="uk-form-stacked uk-width-1-1 tm-checkout uk-width-expand@m"><div class="uk-grid-medium uk-child-width-1-1" uk-grid><section><h2 class="tm-checkout-title">联系信息</h2><div class="uk-card uk-card-default uk-card-small uk-card-body tm-ignore-container"><div class="uk-grid-small uk-child-width-1-1 uk-child-width-1-2@s" uk-grid><div><label><div class="uk-form-label uk-form-label-required">姓</div><input class="uk-input" type="text" required></label></div><div><label><div class="uk-form-label uk-form-label-required">名</div><input class="uk-input" type="text" required></label></div><div><label><div class="uk-form-label uk-form-label-required">电话号码</div><input class="uk-input" type="tel" required></label></div><div><label><div class="uk-form-label uk-form-label-required">邮箱</div><input class="uk-input" type="email" required></label></div></div></div></section><section><h2 class="tm-checkout-title">运费</h2><div class="uk-card uk-card-default uk-card-small uk-card-body tm-ignore-container"><div class="uk-grid-small uk-grid-match uk-child-width-1-1 uk-child-width-1-3@s uk-flex-center" uk-switcher="toggle: > * > .tm-choose" uk-grid><div><a class="tm-choose" href="#"><div class="tm-choose-title">线下自提</div><div class="tm-choose-description">免邮，明日发货</div></a></div><div><a class="tm-choose" href="#"><div class="tm-choose-title">城际速运</div><div class="tm-choose-description">免邮，明日发货</div></a></div><div><a class="tm-choose" href="#"><div class="tm-choose-title">国际邮寄</div><div class="tm-choose-description">通过中国邮政或快递服务，寄往任何国家或地区。</div></a></div></div><div class="uk-switcher uk-margin"><section><div class="uk-grid-small uk-child-width-1-1 uk-child-width-1-2@s" uk-grid><div><figure class="uk-card-media-top tm-ratio tm-ratio-16-9 js-map" data-latitude="59.9356728" data-longitude="30.3258604" data-zoom="14"></figure></div><div class="uk-text-small"><div class="uk-text-bolder">店名</div><div>西南大学荣昌校区</div><div>Daily 10:00–22:00</div></div></div></section><section><div class="uk-grid-small" uk-grid><div class="uk-width-expand"><label><div class="uk-form-label uk-form-label-required">街道</div><input class="uk-input" type="text"></label></div><div class="uk-width-1-3 uk-width-1-6@s"><label><div class="uk-form-label uk-form-label-required">小区</div><input class="uk-input" type="text"></label></div></div><div class="uk-grid-small uk-child-width-1-3 uk-child-width-1-4@s" uk-grid><div><label><div class="uk-form-label">楼号</div><input class="uk-input" type="text"></label></div><div><label><div class="uk-form-label">栋号</div><input class="uk-input" type="text"></label></div><div><label><div class="uk-form-label">楼层</div><input class="uk-input" type="text"></label></div><div><label><div class="uk-form-label">房号</div><input class="uk-input" type="text"></label></div><div class="uk-width-1-1"><label><div class="uk-form-label">评价</div><textarea class="uk-textarea" rows="5" placeholder="Additional information: phone numbers or doorphone code"></textarea></label></div></div><div class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s" uk-grid><div class="uk-width-1-1 uk-text-meta">Choose a convenient date and delivery interval</div><div><select class="uk-select"><option>明天</option><option>5月25日</option><option>5月26日</option><option>5月27日</option><option>5月28日</option><option>5月29日</option><option>5月30日</option><option>5月31日</option></select></div><div><select class="uk-select"><option>09:00 – 12:00</option><option>12:00 – 15:00</option><option>15:00 – 18:00</option><option>18:00 – 21:00</option><option>21:00 – 23:00</option></select></div></div></section><div><div class="uk-grid-small" uk-grid><div class="uk-width-1-1"><label><div class="uk-form-label uk-form-label-required">国家或地区</div><select class="uk-select"><option>选择</option><option value="RU">中国</option></select></label></div></div><div class="uk-grid-small" uk-grid><div class="uk-width-expand"><label><div class="uk-form-label uk-form-label-required">城市</div><input class="uk-input" type="text"></label></div><div class="uk-width-1-3 uk-width-1-6@s"><label><div class="uk-form-label uk-form-label-required">邮政编码</div><input class="uk-input" type="text"></label></div></div><div class="uk-grid-small" uk-grid><div class="uk-width-expand"><label><div class="uk-form-label uk-form-label-required">街道</div><input class="uk-input" type="text"></label></div><div class="uk-width-1-3 uk-width-1-6@s"><label><div class="uk-form-label uk-form-label-required">小区</div><input class="uk-input" type="text"></label></div></div><div class="uk-grid-small uk-child-width-1-3 uk-child-width-1-4@s" uk-grid><div><label><div class="uk-form-label">楼号</div><input class="uk-input" type="text"></label></div><div><label><div class="uk-form-label">栋号</div><input class="uk-input" type="text"></label></div><div><label><div class="uk-form-label">楼层</div><input class="uk-input" type="text"></label></div><div><label><div class="uk-form-label">房号</div><input class="uk-input" type="text"></label></div><div class="uk-width-1-1"><label><div class="uk-form-label">评价</div><textarea class="uk-textarea" rows="5" placeholder="Additional information: phone numbers or doorphone code"></textarea></label></div></div></div></div></div></section><section><h2 class="tm-checkout-title">付款</h2><div class="uk-card uk-card-default uk-card-small tm-ignore-container"><div class="uk-card-body"><div class="uk-grid-small uk-grid-match uk-child-width-1-1 uk-child-width-1-3@s uk-flex-center" uk-switcher="toggle: > * > .tm-choose" uk-grid><div><a class="tm-choose" href="#"><div class="tm-choose-title">货到付款</div><div class="tm-choose-description">现金、微信/支付宝支付</div></a></div><div><a class="tm-choose" href="#"><div class="tm-choose-title">信用卡付款</div><div class="tm-choose-description">信用卡</div></a></div><div><a class="tm-choose" href="#"><div class="tm-choose-title">线上付款</div><div class="tm-choose-description">微信/支付宝支付、储蓄卡</div></a></div></div></div><div class="uk-card-footer"><div class="uk-grid-small uk-flex-middle uk-flex-center uk-text-center" uk-grid><div class="uk-text-meta"><span class="uk-margin-xsmall-right" uk-icon="icon: lock; ratio: .75;"></span>由安全协议保证</div><div><img src="images/verified-by-visa.svg" title="Verified by Visa" style="height: 25px;"></div><div><img src="images/mastercard-securecode.svg" title="MasterCard SecureCode" style="height: 25px;"></div></div></div></div></section></div></form><div class="uk-width-1-1 uk-width-1-4@m tm-aside-column"><div class="uk-card uk-card-default uk-card-small tm-ignore-container" uk-sticky="offset: 30; bottom: true; media: @m;"><section class="uk-card-body"><h4>订单中的商品</h4><div class="uk-grid-small" uk-grid><div class="uk-width-expand"><div class="uk-text-small">Apple MacBook Pro 15" 256GB (银)</div><div class="uk-text-meta">1 × ¥1599.00</div></div><div class="uk-text-right"><div>¥1599.00</div></div></div><div class="uk-grid-small" uk-grid><div class="uk-width-expand"><div class="uk-text-small">苹果 MacBook 12" MNYN2LL/A 512GB (玫瑰金)</div><div class="uk-text-meta">1 × ¥1549.00</div></div><div class="uk-text-right"><div>¥1549.00</div></div></div></section><section class="uk-card-body"><div class="uk-grid-small" uk-grid><div class="uk-width-expand"><div class="uk-text-muted">运费</div></div><div class="uk-text-right"><div>自提</div><div class="uk-text-meta">免邮，明日发货</div></div></div><div class="uk-grid-small" uk-grid><div class="uk-width-expand"><div class="uk-text-muted">付款</div></div><div class="uk-text-right"><div>线上支付</div></div></div></section><section class="uk-card-body"><div class="uk-grid-small" uk-grid><div class="uk-width-expand"><div class="uk-text-muted">小计</div></div><div class="uk-text-right"><div>¥3148</div></div></div><div class="uk-grid-small" uk-grid><div class="uk-width-expand"><div class="uk-text-muted">折扣</div></div><div class="uk-text-right"><div class="uk-text-danger">−¥29</div></div></div></section><section class="uk-card-body"><div class="uk-grid-small uk-flex-middle" uk-grid><div class="uk-width-expand"><div class="uk-text-muted">总计</div></div><div class="uk-text-right"><div class="uk-text-lead uk-text-bolder">¥3119</div></div></div><button class="uk-button uk-button-primary uk-margin-small uk-width-1-1">checkout</button></section></div></div></div></section></div></div></section></main><footer><div class="uk-section uk-section-secondary uk-section-small uk-light"><div class="uk-container"><div class="uk-flex-middle" uk-grid><div class="uk-width-expand"><div>© Company Name. All rights reserved</div></div><div><a class="uk-link-muted" href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: receiver; ratio: .75;"></span><span class="tm-pseudo">8 800 799 99 99</span></a></div></div></div></div></footer></div><script src="scripts/script.js"></script><script src="//maps.googleapis.com/maps/api/js?key=AIzaSyClyjCemJi4m2q78gNeGkhlckpdH1hzTYA&callback=initMap" async defer></script></body></html>