vue实现自适应选择地址和配送方式页面代码
代码语言:html
所属分类:电商
代码描述:vue实现自适应选择地址和配送方式页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* base */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: hidden; } html { font-family: sans-serif; font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; } ul, ol { list-style: none; margin: 0; padding: 0; } div, p, dl, dt, dd { margin: 0; padding: 0; } li, dl, dt, dd, h1, h2, h3, h4, h5, h6, hgroup, p, blockquote, figure, form, fieldset, input, legend, pre, abbr, button { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } pre, code, address, caption, th, figcaption { font-size: 1em; font-weight: normal; font-style: normal; } fieldset, iframe, img { border: 0; } caption, th { text-align: left; } table { border-collapse: collapse; border-spacing: 0; } article, aside, footer, header, nav, main, section, summary, details, figure, figcaption { display: block; } audio, canvas, video, progress { display: inline-block; vertical-align: baseline; } button { background: none; border: 0; box-sizing: border-box; color: inherit; cursor: pointer; font: inherit; line-height: inherit; overflow: visible; vertical-align: inherit; } button:disabled { cursor: default; } a { color: inherit; text-decoration: none; } a:active, a:hover { outline: 0; } h1 { font-size: 2em; } img { border: 0; } [hidden] { display: none; } .nobr { white-space: nowrap; } i, em, code { font-style: normal; } b, strong { font-weight: bold; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ } input:focus, select:focus, textarea:focus, button:focus, button:active { outline: none; } table { border-collapse: collapse; border-spacing: 0; } .clearfix:after { visibility: hidden; display: block; content: " "; clear: both; } .clearfix { zoom: 1; } @media print { body, #main, #content { color: #000; } a, a:link, a:visited { color: #000; text-decoration: none; } } html { font-size: 10px; } body { font-size: 1.4rem; font-family: sans-serif; color: #333; font-family: "akkurat", sans-serif; } .container { max-width: 1280px; margin: 0 auto; } @media only screen and (max-width: 1280px) { .container { width: 100%; } } .btn { display: inline-block; height: 54px; line-height: 54px; padding: 0 1.2em; text-align: center; font-size: 18px; font-family: "moderat", sans-serif; transition: all .3s ease-out; } .btn:hover { background-color: #fff; color: #e02614; transition: all .3s ease-out; } .btn--orange { background-color: #EE7A23; border: 1px #EE7A23 solid; color: #fff; } .btn--orange:hover { background-color: #fff; color: #EE7A23; } .btn--white { background-color: #fff; border: 1px #d1434a solid; color: #d1434a; } .btn--white:hover { background-color: #d1434a; color: #fff; } .btn--red { background-color: #d1434a; border: 1px #d1434a solid; color: #fff; } .btn--red:hover { background-color: #fff; color: #d1434a; } .btn--gray-white { background-color: none; border: 1px #605F5F solid; color: #605F5F; } .btn--gray-white:hover { background-color: #605F5F; color: #fff; } .btn--dis { background-color: #ccc; border: 1px #ccc solid; color: #fff; cursor: disabled; } .btn--dis:hover { background-color: #ccc; color: #fff; } input[type="text"], textarea { padding: .5em 20px; border: 1px solid #e9e9e9; background: #white; } .up-down-btn { color: #EE7A23; } .i-up-down { position: relative; display: inline-block; width: 14px; height: 6px; vertical-align: middle; z-index: 2; -ms-transform: translateY(2px); transform: translateY(2px); transition: transform .3s ease-out; } .i-up-down i { position: absolute; top: 0; width: 8px; height: 1px; background: #EE7A23; } .i-up-down .i-up-down-l { left: 0; -ms-transform: rotate(40deg); transform: rotate(40deg); transition: transform .3s ease-out; } .i-up-down .i-up-down-r { right: 0; -ms-transform: rotate(-40deg); transform: rotate(-40deg); transition: all .3s ease-out; } .select-self { position: relative; display: inline-block; cursor: pointer; } .select-self-area { width: auto; background: #f0f0f0; border-radius: 3px; min-width: 50px; max-width: 240px; height: 30px; line-height: 30px; } .select-self-area .select-ipt { display: block; height: 100%; padding: 0 2em 0 1em; border: 0; color: #605F5F; overflow: hidden; } .select-self-area .select-btn { position: absolute; right: 0; top: 0; width: 1.286em; height: 100%; background: #fff; border: 1px solid #ccc; border-radius: 3px; text-align: center; } .select-self-area .select-btn .i-up-down { width: 8px; top: 0; left: 0; } .select-self-area .select-btn .i-up-down i { width: 5px; height: 2px; background-color: #605F5F; } .select-self-white .select-self-area { background: #fff; border: 1px solid #ccc; border-radius: 0; } .select-self-white .select-btn { border: none; background: none; } .select-options { display: none; position: absolute; top: 30px; left: 0; width: 100%; max-height: 210px; background: #f0f0f0; border-radius: 0 0 3px 3px; overflow-y: auto; z-index: 1; } .select-options li { padding: .5em 15px; border-top: 1px solid #e9e9e9; text-align: left; } .select-options li:hover { color: #EE7A23; } .select-self-open { border-radius: 3px 3px 0 0; } .select-self-open .select-options { display: block; } .select-self-open .i-up-down .i-up-down-l { left: 0; -ms-transform: rotate(-40deg); transform: rotate(-40deg); transition: transform .3s ease-out; } .select-self-open .i-up-down .i-up-down-r { right: 0; -ms-transform: rotate(40deg); transform: rotate(40deg); transition: all .3s ease-out; } .select-self-open .select-options { z-index: 102; } .select-self:hover, .up-down-btn:hover, .up-down-btn.open { transition: all .3s ease-out; } .select-self:hover .i-up-down-l, .up-down-btn:hover .i-up-down-l, .up-down-btn.open .i-up-down-l { -ms-transform: rotate(-40deg); transform: rotate(-40deg); transition: all .3s ease-out; } .select-self:hover .i-up-down-r, .up-down-btn:hover .i-up-down-r, .up-down-btn.open .i-up-down-r { -ms-transform: rotate(40deg); transform: rotate(40deg); transition: all .3s ease-out; } @charset "UTF-8"; .check-step { padding: 5px 0; } .check-step ul { display: -ms-flexbox; display: flex; margin: 25px 0 50px 0; } .check-step ul:after { visibility: hidden; display: block; content: " "; clear: both; } .check-step li { position: relative; float: left; -ms-flex: 1; flex: 1; width: 25%; line-height: 1.5em; padding: 0 1em 1em 1em; border-bottom: 2px solid #ccc; color: #999; font-size: 16px; text-align: center; } .check-step li:after { position: absolute; bottom: -7px; left: 50%; margin-left: -7px; content: ""; width: 14px; height: 14px; border-radius: 50%; background: #ccc; } .check-step li.cur { border-color: #EE7A23; color: #EE7A23; } .check-step li.cur:after { background: #EE7A23; } @media only screen and (max-width: 767px) { .check-step ul { margin: 10px 0 25px 0; } .check-step li { font-size: 12px; } } .addr-list ul:after { visibility: hidden; display: block; content: " "; clear: both; } .addr-list li { position: relative; float: left; width: 23.5%; height: 162px; margin: 10px 2% 10px 0; padding: 20px 20px 40px 20px; background: #fff; border: 2px solid #e9e9e9; overflow: hidden; cursor: pointer; } .addr-list li dt { margin-bottom: 10px; font-size: 18px; } .addr-list li dd { margin-bottom: 6px; line-height: 20px; } .addr-list li .address { height: 40px; overflow: hidden; } .addr-list li .tel { color: #605F5F; } .addr-list li .addr-opration { position: absolute; } .addr-list li .addr-opration .icon { width: 100%; height: 100%; } .addr-list li .addr-opration:hover .icon { fill: #EE7A23; } .addr-list li .addr-edit { display: none; top: 20px; right: 20px; width: 20px; height: 20px; } .addr-list li .addr-del { display: none; bottom: 20px; right: 20px; width: 20px; height: 20px; } .addr-list li .addr-set-default, .addr-list li .addr-default { bottom: 20px; left: 20px; color: #EE7A23; } .addr-list li .addr-set-default { display: none; } .addr-list li:nth-child(4n) { margin-right: 0; } .addr-list li:hover { border-color: #EE7A23; } .addr-list li.addr-new { color: #333; text-align: center; } .addr-list li.addr-new .add-new-inner { padding-top: 20px; } .addr-list li.addr-new .add-new-inner .icon-add { display: inline-block; width: 50px; height: 50px; } .addr-list li.addr-new .add-new-inner .icon-add .icon-add { width: 50px; height: 50px; fill: #605F5F; } .addr-list li.addr-new .add-new-inner p { margin-top: 10px; } .addr-list li.check { border-color: #EE7A23; border-width: 2px; } .addr-list li.check .addr-opration { display: block; } .shipping-addr-more { margin-top: 10px; text-align: center; } @media only screen and (max-width: 991px) { .addr-list { padding: 0 10px; } .addr-list li { width: 49%; margin-right: 2%; } .addr-list li:nth-child(4n) { margin-right: 2%; } .addr-list li:nth-child(2n) { margin-right: 0; } } @media only screen and (max-width: 767px) { .addr-list { padding: 0 10px; } .addr-list li { width: 100%; margin: 5px 0; } } .cart-item { display: table; width: 100%; } .cart-item-head { display: table-header-group; width: 100%; } .cart-item-head ul { display: table-row; width: 100%; } .cart-item-head li { display: table-cell; height: 54px; line-height: 54px; background: #605F5F; color: #fff; font-size: 18px; text-align: center; } .cart-item-head li:nth-child(2), .cart-item-head li:nth-child(3), .cart-item-head li:nth-child(4), .cart-item-head li:nth-child(5) { width: 12%; padding: 0 10px; } .cart-item-list { display: table-row-group; } .cart-item-list > li { position: relative; display: table-row; padding: 36px 0; } .cart-item-list > li > div { position: relative; display: table-cell; text-align: center; vertical-align: top; border-bottom: 1px solid #e9e9e9; } .cart-item-list > li.disabled > div:after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background: rgba(96, 95, 95, 0.3); z-index: 5; } .cart-item-list .cart-tab-1 { min-height: 72px; padding: 36px 0; text-align: left; border-left: 1px solid #e9e9e9; } .cart-item-list .cart-tab-2 { padding-top: 64px; } .cart-item-list .cart-tab-3 { padding-top: 48px; } .cart-item-list .cart-tab-4 { padding-top: 64px; } .cart-item-list .cart-tab-5 { padding-top: 62px; border-right: 1px solid #e9e9e9; } .cart-item-list .cart-item-check { float: left; padding: 28px 0 28px 22px; } .cart-item-list .cart-item-pic { float: left; width: 80px; height: 72px; margin-left: 22px; border: 1px solid #e9e9e9; } .cart-item-list .cart-item-pic img { width: 100%; height: 100%; } .cart-item-list .cart-item-title { min-height: 58px; padding: 0 20px 0 160px; } .cart-item-list .cart-item-title .item-name { margin: 2px 0 10px; line-height: 16px; color: #000; } .cart-item-list .cart-item-title .item-count-down .icon-clock { width: 14px; height: 14px; fill: #605F5F; vertical-align: middle; } .cart-item-list .cart-item-title .item-count-down .item-count-down-time { display: inline-block; height: 14px; line-height: 14px; padding: 0 5px; background: #f0f0f0; font-size: 12px; color: #605F5F; } .cart-item-list .item-include { position: relative; padding-left: 160px; } .cart-item-list .item-include dl { padding-right: 60px; } .cart-item-list .item-include dl dt { float: left; width: 65px; } .cart-item-list .item-include dl dd { margin-bottom: 13px; padding-left: 65px; color: #999; } .cart-item-list .item-include dl:after { visibility: hidden; display: block; content: " "; clear: both; } .cart-item-list .item-include .item-include-more { position: absolute; right: 10px; top: 0; } .cart-item-list .item-stock { margin-top: 5px; font-size: 12px; color: #999; } .cart-item-list .item-stock-no { color: #d1434a; } .cart-item-list .item-price-total { color: #d1434a; } .item-check-btn { display: inline-block; width: 16px; height: 16px; border: 1px solid #ccc; border-radius: 50%; text-align: center; vertical-align: middle; cursor: pointer; } .item-check-btn .icon-ok { display: none; width: 100%; height: 100%; fill: #fff; -ms-transform: scale(0.8); transform: scale(0.8); } .item-check-btn.check { background: #EE7A23; border-color: #EE7A23; } .item-check-btn.check .icon-ok { display: inline-block; } .item-edit-btn { display: inline-block; width: 16px; height: 20px; } .item-edit-btn .icon-del { width: 100%; height: 100%; fill: #999; } .order-item .cart-item-list .cart-item-title, .order-item .cart-item-list .item-include { padding-left: 122px; } .order-item .select-self-area .select-ipt { padding: 0; text-align: center; } @media only screen and (max-width: 991px) { .cart-item { display: block; background: #f0f0f0; } .cart-item-head { display: none; } .cart-item-list { display: block; } .cart-item-list > li { position: relative; display: block; margin-bottom: 10px; padding: 0; background: #fff; border-top: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; } .cart-item-list > li > div { position: static; display: block; border: none; } .cart-item-list > li.disabled:after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background: rgba(96, 95, 95, 0.3); z-index: 5; } .cart-item-list > li.disabled > div:after { display: none; } .cart-item-list .cart-tab-1 { padding: 18px 0 0 0; border: none; } .cart-item-list .cart-tab-2 { display: none; } .cart-item-list .cart-tab-3 { float: left; width: 50%; padding: 8px 0 8px 10px; text-align: left; } .cart-item-list .cart-tab-4 { float: right; width: 50%; padding: 15px 10px 14px 0; text-align: right; } .cart-item-list .cart-tab-5 { clear: both; padding: 0; } .cart-item-list .cart-item-check { padding-left: 10px; } .cart-item-list .cart-item-pic { margin-left: 10px; } .cart-item-list .cart-item-title { height: 72px; padding: 0 10px 0 126px; } .cart-item-list .item-include { clear: both; margin-top: 10px; padding: 0 10px 0 36px; border-bottom: 1px solid #e9e9e9; } .cart-item-list .item-quantity > div { display: inline-block; margin-right: 3px; vertical-align: middle; } .cart-item-list .item-stock { margin-top: 0; } .cart-item-list .cart-item-opration { position: absolute; top: 60px; right: 10px; } .order-item .cart-item-list .cart-item-title { padding-left: 100px; } .order-item .cart-item-list .item-include { padding-left: 10px; } } .shipping-method { text-align: center; } .shipping-method li { display: inline-block; width: 300px; margin: 5px; padding: 10px; background: #fff; border: 2px solid #e9e9e9; font-size: 18px; line-height: 26px; text-align: center; color: #999; font-family: "Moderat"; cursor: pointer; } .shipping-method li .price { font-weight: bold; } .shipping-method li.check { border-color: #EE7A23; color: #333; } .shipping-method li:hover { border-color: #EE7A23; } @media only screen and (max-width: 767px) { .shipping-method { padding: 10px; } .shipping-method li { width: 100%; margin: 5px 0; } } .apply-promotion { font-size: 0; text-align: center; background: #fff; } .apply-promotion li { display: inline-block; font-size: 14px; width: 25%; min-height: 114px; vertical-align: top; } .apply-promotion li p { margin-top: 12px; font-size: 18px; } .apply-promotion .type i { display: inline-block; width: 60px; height: 60px; background: url(../../img/icon_sprite@2x.png) no-repeat 0 0; background-size: 128px 122px; } .apply-promotion .type.type-cash i { background-position: -68px 0; } .apply-promotion .type.type-sale i { width: 66px; } .apply-promotion .type.type-off i { background-position: 0 -62px; } @media only screen and (max-width: 767px) { .apply-promotion li { border-right: 1px solid #e9e9e9; } .apply-promotion li:last-child, .apply-promotion li:nth-child(4n) { border-right: none; } .apply-promotion li .type { -ms-transform: scale(0.66); transform: scale(0.66); } } .price-count ul { display: table; width: 100%; } .price-count li { display: table-row; font-size: 18px; } .price-count li span { display: table-cell; height: 36px; padding-right: 10px; vertical-align: top; text-align: right; } .price-count li span:first-child { color: #999; } .price-count li span:last-child { width: 110px; } .price-count .order-total-price span:last-child { color: #d1434a; } .tips_pop { position: relative; } .tips_pop .i_info { display: inline-block; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0