优化ui
This commit is contained in:
pushuo
parent
fb1a2a16f1
commit
ffd31babcb
|
|
@ -450,3 +450,75 @@ body.page-cart .total-wrap .list-group li .total-price {
|
|||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
body.page-checkout h4.title {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
padding-bottom: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
body.page-checkout .total-wrap {
|
||||
padding: 1.4rem;
|
||||
border: 3px solid #efefef;
|
||||
}
|
||||
body.page-checkout .total-wrap .card-body {
|
||||
padding: 0;
|
||||
}
|
||||
body.page-checkout .total-wrap .card-header {
|
||||
background-color: #fff;
|
||||
padding: 0 0 0.8rem;
|
||||
margin-bottom: 1rem;
|
||||
border-color: #E6E6E6;
|
||||
}
|
||||
body.page-checkout .total-wrap .card-header h5 {
|
||||
font-weight: bold;
|
||||
}
|
||||
body.page-checkout .total-wrap .products-wrap {
|
||||
border-bottom: 1px solid #E6E6E6;
|
||||
margin-bottom: 1.3rem;
|
||||
padding-bottom: 0.3rem;
|
||||
}
|
||||
body.page-checkout .total-wrap .products-wrap .item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
body.page-checkout .total-wrap .products-wrap .item .image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 4px;
|
||||
}
|
||||
body.page-checkout .total-wrap .products-wrap .item .image img {
|
||||
width: 40px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
body.page-checkout .total-wrap .products-wrap .item .image .quantity {
|
||||
margin-left: 3px;
|
||||
color: #7a7a7a;
|
||||
}
|
||||
body.page-checkout .total-wrap .products-wrap .item .price {
|
||||
color: #7a7a7a;
|
||||
}
|
||||
body.page-checkout .total-wrap .totals {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
padding-bottom: 0.3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #E6E6E6;
|
||||
}
|
||||
body.page-checkout .total-wrap .totals > li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
body.page-checkout .total-wrap .totals > li > span {
|
||||
font-weight: bold;
|
||||
}
|
||||
body.page-checkout .total-wrap .totals > li > span:first-of-type {
|
||||
font-size: 0.8rem;
|
||||
color: #3f3f3f;
|
||||
}
|
||||
body.page-checkout .total-wrap .totals > li > span:last-of-type {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8959,7 +8959,7 @@ progress {
|
|||
background-color: #fff;
|
||||
border-color: #feab87;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba(253, 86, 15, 0.25);
|
||||
box-shadow: 0 0 11px 0 rgba(253, 86, 15, 0.1);
|
||||
}
|
||||
.form-control::-webkit-date-and-time-value {
|
||||
height: 1.5em;
|
||||
|
|
@ -9174,7 +9174,7 @@ textarea.form-control-lg {
|
|||
.form-select:focus {
|
||||
border-color: #feab87;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba(253, 86, 15, 0.25);
|
||||
box-shadow: 0 0 11px 0 rgba(253, 86, 15, 0.1);
|
||||
}
|
||||
.form-select[multiple], .form-select[size]:not([size="1"]) {
|
||||
padding-right: 0.75rem;
|
||||
|
|
@ -9243,7 +9243,7 @@ textarea.form-control-lg {
|
|||
.form-check-input:focus {
|
||||
border-color: #feab87;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba(253, 86, 15, 0.25);
|
||||
box-shadow: 0 0 11px 0 rgba(253, 86, 15, 0.1);
|
||||
}
|
||||
.form-check-input:checked {
|
||||
background-color: #fd560f;
|
||||
|
|
@ -9322,10 +9322,10 @@ textarea.form-control-lg {
|
|||
outline: 0;
|
||||
}
|
||||
.form-range:focus::-webkit-slider-thumb {
|
||||
box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(253, 86, 15, 0.25);
|
||||
box-shadow: 0 0 0 1px #fff, 0 0 11px 0 rgba(253, 86, 15, 0.1);
|
||||
}
|
||||
.form-range:focus::-moz-range-thumb {
|
||||
box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(253, 86, 15, 0.25);
|
||||
box-shadow: 0 0 0 1px #fff, 0 0 11px 0 rgba(253, 86, 15, 0.1);
|
||||
}
|
||||
.form-range::-moz-focus-outer {
|
||||
border: 0;
|
||||
|
|
@ -9404,7 +9404,7 @@ textarea.form-control-lg {
|
|||
}
|
||||
.form-floating > .form-control,
|
||||
.form-floating > .form-select {
|
||||
height: calc(3.5rem + 2px);
|
||||
height: 50px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.form-floating > label {
|
||||
|
|
@ -9412,7 +9412,7 @@ textarea.form-control-lg {
|
|||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
padding: 1rem 0.75rem;
|
||||
padding: 0.8rem 0.75rem;
|
||||
pointer-events: none;
|
||||
border: 1px solid transparent;
|
||||
transform-origin: 0 0;
|
||||
|
|
@ -9424,7 +9424,7 @@ textarea.form-control-lg {
|
|||
}
|
||||
}
|
||||
.form-floating > .form-control {
|
||||
padding: 1rem 0.75rem;
|
||||
padding: 0.8rem 0.75rem;
|
||||
}
|
||||
.form-floating > .form-control::-moz-placeholder {
|
||||
color: transparent;
|
||||
|
|
@ -9436,23 +9436,23 @@ textarea.form-control-lg {
|
|||
color: transparent;
|
||||
}
|
||||
.form-floating > .form-control:not(:-moz-placeholder-shown) {
|
||||
padding-top: 1.625rem;
|
||||
padding-top: 1.325rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
.form-floating > .form-control:not(:-ms-input-placeholder) {
|
||||
padding-top: 1.625rem;
|
||||
padding-top: 1.325rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
|
||||
padding-top: 1.625rem;
|
||||
padding-top: 1.325rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
.form-floating > .form-control:-webkit-autofill {
|
||||
padding-top: 1.625rem;
|
||||
padding-top: 1.325rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
.form-floating > .form-select {
|
||||
padding-top: 1.625rem;
|
||||
padding-top: 1.325rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
|
||||
|
|
@ -9761,7 +9761,7 @@ textarea.form-control-lg {
|
|||
}
|
||||
.btn-check:focus + .btn, .btn:focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba(253, 86, 15, 0.25);
|
||||
box-shadow: 0 0 11px 0 rgba(253, 86, 15, 0.1);
|
||||
}
|
||||
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
|
||||
pointer-events: none;
|
||||
|
|
@ -11453,7 +11453,7 @@ textarea.form-control-lg {
|
|||
z-index: 3;
|
||||
border-color: #feab87;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba(253, 86, 15, 0.25);
|
||||
box-shadow: 0 0 11px 0 rgba(253, 86, 15, 0.1);
|
||||
}
|
||||
|
||||
.accordion-header {
|
||||
|
|
@ -11562,7 +11562,7 @@ textarea.form-control-lg {
|
|||
color: #fd560f;
|
||||
background-color: #e9ecef;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba(253, 86, 15, 0.25);
|
||||
box-shadow: 0 0 11px 0 rgba(253, 86, 15, 0.1);
|
||||
}
|
||||
|
||||
.page-item:not(:first-child) .page-link {
|
||||
|
|
@ -12144,7 +12144,7 @@ textarea.form-control-lg {
|
|||
}
|
||||
.btn-close:focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba(253, 86, 15, 0.25);
|
||||
box-shadow: 0 0 11px 0 rgba(253, 86, 15, 0.1);
|
||||
opacity: 1;
|
||||
}
|
||||
.btn-close:disabled, .btn-close.disabled {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,220 @@
|
|||
/******/ (() => { // webpackBootstrap
|
||||
/******/ var __webpack_modules__ = ({
|
||||
|
||||
/***/ "./resources/beike/shop/default/js/app.js":
|
||||
/*!************************************************!*\
|
||||
!*** ./resources/beike/shop/default/js/app.js ***!
|
||||
\************************************************/
|
||||
/***/ (() => {
|
||||
|
||||
$(document).ready(function ($) {
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./resources/beike/css/bootstrap/bootstrap.scss":
|
||||
/*!******************************************************!*\
|
||||
!*** ./resources/beike/css/bootstrap/bootstrap.scss ***!
|
||||
\******************************************************/
|
||||
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
// extracted by mini-css-extract-plugin
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./resources/beike/admin/css/app.scss":
|
||||
/*!********************************************!*\
|
||||
!*** ./resources/beike/admin/css/app.scss ***!
|
||||
\********************************************/
|
||||
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
// extracted by mini-css-extract-plugin
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./resources/beike/shop/default/css/bootstrap/bootstrap.scss":
|
||||
/*!*******************************************************************!*\
|
||||
!*** ./resources/beike/shop/default/css/bootstrap/bootstrap.scss ***!
|
||||
\*******************************************************************/
|
||||
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
// extracted by mini-css-extract-plugin
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./resources/beike/shop/default/css/app.scss":
|
||||
/*!***************************************************!*\
|
||||
!*** ./resources/beike/shop/default/css/app.scss ***!
|
||||
\***************************************************/
|
||||
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
// extracted by mini-css-extract-plugin
|
||||
|
||||
|
||||
/***/ })
|
||||
|
||||
/******/ });
|
||||
/************************************************************************/
|
||||
/******/ // The module cache
|
||||
/******/ var __webpack_module_cache__ = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/ // Check if module is in cache
|
||||
/******/ var cachedModule = __webpack_module_cache__[moduleId];
|
||||
/******/ if (cachedModule !== undefined) {
|
||||
/******/ return cachedModule.exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = __webpack_module_cache__[moduleId] = {
|
||||
/******/ // no module.id needed
|
||||
/******/ // no module.loaded needed
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = __webpack_modules__;
|
||||
/******/
|
||||
/************************************************************************/
|
||||
/******/ /* webpack/runtime/chunk loaded */
|
||||
/******/ (() => {
|
||||
/******/ var deferred = [];
|
||||
/******/ __webpack_require__.O = (result, chunkIds, fn, priority) => {
|
||||
/******/ if(chunkIds) {
|
||||
/******/ priority = priority || 0;
|
||||
/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
|
||||
/******/ deferred[i] = [chunkIds, fn, priority];
|
||||
/******/ return;
|
||||
/******/ }
|
||||
/******/ var notFulfilled = Infinity;
|
||||
/******/ for (var i = 0; i < deferred.length; i++) {
|
||||
/******/ var [chunkIds, fn, priority] = deferred[i];
|
||||
/******/ var fulfilled = true;
|
||||
/******/ for (var j = 0; j < chunkIds.length; j++) {
|
||||
/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
|
||||
/******/ chunkIds.splice(j--, 1);
|
||||
/******/ } else {
|
||||
/******/ fulfilled = false;
|
||||
/******/ if(priority < notFulfilled) notFulfilled = priority;
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ if(fulfilled) {
|
||||
/******/ deferred.splice(i--, 1)
|
||||
/******/ var r = fn();
|
||||
/******/ if (r !== undefined) result = r;
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ return result;
|
||||
/******/ };
|
||||
/******/ })();
|
||||
/******/
|
||||
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
||||
/******/ (() => {
|
||||
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
||||
/******/ })();
|
||||
/******/
|
||||
/******/ /* webpack/runtime/make namespace object */
|
||||
/******/ (() => {
|
||||
/******/ // define __esModule on exports
|
||||
/******/ __webpack_require__.r = (exports) => {
|
||||
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
||||
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
||||
/******/ }
|
||||
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
||||
/******/ };
|
||||
/******/ })();
|
||||
/******/
|
||||
/******/ /* webpack/runtime/jsonp chunk loading */
|
||||
/******/ (() => {
|
||||
/******/ // no baseURI
|
||||
/******/
|
||||
/******/ // object to store loaded and loading chunks
|
||||
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
|
||||
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
|
||||
/******/ var installedChunks = {
|
||||
/******/ "/build/beike/shop/default/js/app": 0,
|
||||
/******/ "build/beike/shop/default/css/app": 0,
|
||||
/******/ "build/beike/shop/default/css/bootstrap": 0,
|
||||
/******/ "build/beike/css/admin": 0,
|
||||
/******/ "build/beike/css/bootstrap": 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // no chunk on demand loading
|
||||
/******/
|
||||
/******/ // no prefetching
|
||||
/******/
|
||||
/******/ // no preloaded
|
||||
/******/
|
||||
/******/ // no HMR
|
||||
/******/
|
||||
/******/ // no HMR manifest
|
||||
/******/
|
||||
/******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
|
||||
/******/
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
|
||||
/******/ var [chunkIds, moreModules, runtime] = data;
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0;
|
||||
/******/ if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
|
||||
/******/ for(moduleId in moreModules) {
|
||||
/******/ if(__webpack_require__.o(moreModules, moduleId)) {
|
||||
/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ if(runtime) var result = runtime(__webpack_require__);
|
||||
/******/ }
|
||||
/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
|
||||
/******/ installedChunks[chunkId][0]();
|
||||
/******/ }
|
||||
/******/ installedChunks[chunkId] = 0;
|
||||
/******/ }
|
||||
/******/ return __webpack_require__.O(result);
|
||||
/******/ }
|
||||
/******/
|
||||
/******/ var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
|
||||
/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
|
||||
/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
|
||||
/******/ })();
|
||||
/******/
|
||||
/************************************************************************/
|
||||
/******/
|
||||
/******/ // startup
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ // This entry module depends on other loaded chunks and execution need to be delayed
|
||||
/******/ __webpack_require__.O(undefined, ["build/beike/shop/default/css/app","build/beike/shop/default/css/bootstrap","build/beike/css/admin","build/beike/css/bootstrap"], () => (__webpack_require__("./resources/beike/shop/default/js/app.js")))
|
||||
/******/ __webpack_require__.O(undefined, ["build/beike/shop/default/css/app","build/beike/shop/default/css/bootstrap","build/beike/css/admin","build/beike/css/bootstrap"], () => (__webpack_require__("./resources/beike/css/bootstrap/bootstrap.scss")))
|
||||
/******/ __webpack_require__.O(undefined, ["build/beike/shop/default/css/app","build/beike/shop/default/css/bootstrap","build/beike/css/admin","build/beike/css/bootstrap"], () => (__webpack_require__("./resources/beike/admin/css/app.scss")))
|
||||
/******/ __webpack_require__.O(undefined, ["build/beike/shop/default/css/app","build/beike/shop/default/css/bootstrap","build/beike/css/admin","build/beike/css/bootstrap"], () => (__webpack_require__("./resources/beike/shop/default/css/bootstrap/bootstrap.scss")))
|
||||
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["build/beike/shop/default/css/app","build/beike/shop/default/css/bootstrap","build/beike/css/admin","build/beike/css/bootstrap"], () => (__webpack_require__("./resources/beike/shop/default/css/app.scss")))
|
||||
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
|
||||
/******/
|
||||
/******/ })()
|
||||
;
|
||||
|
|
@ -14,4 +14,5 @@ $primary: #fd560f;
|
|||
@import './login';
|
||||
@import './account/account';
|
||||
@import './product';
|
||||
@import './cart';
|
||||
@import './cart';
|
||||
@import './page-checkout';
|
||||
|
|
@ -34,6 +34,14 @@ $input-btn-font-size: 0.9rem;
|
|||
$link-decoration: none;
|
||||
$link-color: #1f1f1f;
|
||||
$link-hover-color: $primary;
|
||||
$input-btn-focus-box-shadow: 0 0 11px 0 rgba($color: $primary, $alpha: .1);
|
||||
$form-select-focus-box-shadow: 0 0 11px 0 rgba($color: $primary, $alpha: .1);
|
||||
$btn-focus-box-shadow: 0 0 11px 0 rgba($color: $primary, $alpha: .1);
|
||||
|
||||
$form-floating-input-padding-t: 1.325rem;
|
||||
$form-floating-input-padding-b: .625rem;
|
||||
$form-floating-padding-y: .8rem;
|
||||
$form-floating-height: 50px;
|
||||
|
||||
@import './bootstrap-icons';
|
||||
@import 'node_modules/bootstrap-5.1.3/scss/bootstrap';
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
body.page-checkout {
|
||||
h4.title {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
padding-bottom: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.total-wrap {
|
||||
padding: 1.4rem;
|
||||
border: 3px solid #efefef;
|
||||
|
||||
.card-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: #fff;
|
||||
padding: 0 0 .8rem;
|
||||
margin-bottom: 1rem;
|
||||
border-color: #E6E6E6;
|
||||
h5 {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.products-wrap {
|
||||
border-bottom: 1px solid #E6E6E6;
|
||||
margin-bottom: 1.3rem;
|
||||
padding-bottom: .3rem;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center; // flex-start | center
|
||||
justify-content: space-between; // flex-end | center | space-between
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.image {
|
||||
display: flex;
|
||||
align-items: center; // flex-start | center
|
||||
padding-right: 4px;
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
margin-left: 3px;
|
||||
color: #7a7a7a;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #7a7a7a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.totals {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
padding-bottom: .3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #E6E6E6;
|
||||
|
||||
> li {
|
||||
display: flex;
|
||||
align-items: center; // flex-start | center
|
||||
justify-content: space-between; // flex-end | center | space-between
|
||||
margin-bottom: 14px;
|
||||
// flex-wrap: wrap;
|
||||
> span {
|
||||
font-weight: bold;
|
||||
|
||||
&:first-of-type {
|
||||
font-size: .8rem;
|
||||
color: #3f3f3f;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
color: #dc3545;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
$(document).ready(function ($) {
|
||||
$.ajaxSetup({ headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')} });
|
||||
});
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
body {
|
||||
background: #f2f2f2;
|
||||
// color: #fff;
|
||||
}
|
||||
|
|
@ -4,11 +4,13 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<title>首页</title>
|
||||
<link rel="stylesheet" type="text/css" href="{{ asset('/build/beike/shop/default/css/bootstrap.css') }}">
|
||||
<script src="{{ asset('vendor/jquery/jquery-3.6.0.min.js') }}"></script>
|
||||
<script src="{{ asset('vendor/bootstrap/5.1.3/js/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('vendor/bootstrap/5.1.3/js/bootstrap.min.js') }}"></script>
|
||||
<script src="{{ asset('/build/beike/shop/default/js/app.js') }}"></script>
|
||||
<link rel="stylesheet" type="text/css" href="{{ asset('/build/beike/shop/default/css/app.css') }}">
|
||||
@stack('header')
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@
|
|||
<li class="list-group-item"><span>总数</span><span>20</span></li>
|
||||
<li class="list-group-item border-bottom-0"><span>总价</span><span class="total-price">¥223.33</span></li>
|
||||
<li class="list-group-item d-grid gap-2 mt-3 border-bottom-0">
|
||||
<button class="btn btn-primary">去结账</button>
|
||||
<a href="{{ shop_route('pages.show', 'checkout') }}" class="btn btn-primary">去结账</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,137 @@
|
|||
@extends('layout.master')
|
||||
|
||||
@section('body-class', 'page-checkout')
|
||||
|
||||
@section('content')
|
||||
<div class="container">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Library</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-9">@include('shared.steps', ['steps' => 2])</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-5">
|
||||
<div class="col-12 col-md-8">
|
||||
<form action="">
|
||||
<div class="checkout-address">
|
||||
<h4 class="title">地址</h4>
|
||||
<div class="row mb-3">
|
||||
<div class="col-12 col-md-6 mb-3">
|
||||
<div class="form-floating">
|
||||
<input type="text" name="email" class="form-control" value="" placeholder="姓名">
|
||||
<label class="form-label" for="email_1">姓名</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 mb-3">
|
||||
<div class="form-floating">
|
||||
<input type="text" name="email" class="form-control" value="" placeholder="电话">
|
||||
<label class="form-label" for="email_1">电话</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 mb-3">
|
||||
<div class="form-floating">
|
||||
<select class="form-select" aria-label="Default select example" name="county">
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<label class="form-label" for="email_1">county</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 mb-3">
|
||||
<div class="form-floating">
|
||||
<select class="form-select" aria-label="Default select example" name="zone">
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<label class="form-label" for="email_1">zone</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 mb-3">
|
||||
<div class="form-floating">
|
||||
<input type="text" name="email" class="form-control" value="" placeholder="city">
|
||||
<label class="form-label" for="email_1">city</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3">
|
||||
<div class="form-floating">
|
||||
<input type="text" name="email" class="form-control" value="" placeholder="city">
|
||||
<label class="form-label" for="email_1">邮编</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3">
|
||||
<div class="form-floating">
|
||||
<input type="text" name="email" class="form-control" value="" placeholder="city">
|
||||
<label class="form-label" for="email_1">address 1</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3">
|
||||
<div class="form-floating">
|
||||
<input type="text" name="email" class="form-control" value="" placeholder="city">
|
||||
<label class="form-label" for="email_1">address 2</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="title">支付方式</h4>
|
||||
<div class="row mb-3">
|
||||
<div class="mb-4">
|
||||
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
|
||||
<label class="btn btn-outline-primary" for="success-outlined">支付方式 - 1</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="danger-outlined">支付方式 - 2</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="title">配送方式</h4>
|
||||
<div class="row mb-3">
|
||||
<div class="mb-4">
|
||||
<input type="radio" class="btn-check" name="peisong_name" id="peisong-1" autocomplete="off" checked>
|
||||
<label class="btn btn-outline-primary" for="peisong-1">配送方式 - 1</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="peisong_name" id="peisong-2" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="peisong-2">配送方式 - 2</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="card total-wrap">
|
||||
<div class="card-header"><h5 class="mb-0">CART TOTALS</h5></div>
|
||||
<div class="card-body">
|
||||
<div class="products-wrap">
|
||||
@for ($i = 0; $i < 4; $i++)
|
||||
<div class="item">
|
||||
<div class="image">
|
||||
<img src="http://fpoimg.com/100x100?bg_color=f3f3f3" class="img-fluid">
|
||||
<div class="name">
|
||||
<span>Camera Canon EOS M50 Kit</span>
|
||||
<span class="quantity">x2</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="price">$1156.00</div>
|
||||
</div>
|
||||
@endfor
|
||||
</div>
|
||||
<ul class="totals">
|
||||
<li><span>总数</span><span>1120</span></li>
|
||||
<li><span>运费</span><span>20</span></li>
|
||||
<li><span>总价</span><span>2220</span></li>
|
||||
</ul>
|
||||
<div class="d-grid gap-2 mt-3">
|
||||
<button class="btn btn-primary">提交订单</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
|
@ -23,6 +23,7 @@
|
|||
<div class="right"><img src="{{ $product->image }}" class="img-fluid"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ps-lg-5 col-xl-5 col-lg-6 order-lg-2">
|
||||
<div class="peoduct-info">
|
||||
<h1>{{ $product->description->name }}</h1>
|
||||
|
|
@ -49,10 +50,6 @@
|
|||
<td>Sku</td>
|
||||
<td>{{ $product->master_sku->sku }}</td>
|
||||
</tr>
|
||||
{{-- <tr>
|
||||
<td>型号</td>
|
||||
<td>product-222</td>
|
||||
</tr> --}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -61,7 +58,7 @@
|
|||
<div class="quantity-wrap">
|
||||
<input class="form-control quantity-input" type="number" value="1">
|
||||
</div>
|
||||
<button class="btn btn-outline-secondary ms-3"><i class="bi bi-cart-fill me-1"></i>加入购物车</button>
|
||||
<button class="btn btn-outline-secondary ms-3 add-cart"><i class="bi bi-cart-fill me-1"></i>加入购物车</button>
|
||||
<button class="btn btn-dark ms-3"><i class="bi bi-bag-fill me-1"></i>立即购买</button>
|
||||
</div>
|
||||
<div class="add-wishlist">
|
||||
|
|
@ -90,5 +87,24 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$('.add-cart').on('click', function(event) {
|
||||
$.ajax({
|
||||
url: '/carts',
|
||||
data: {id: '{{ $product->master_sku->id }}', quantity: 1},
|
||||
type: 'POST',
|
||||
})
|
||||
.done(function(e) {
|
||||
console.log(e);
|
||||
})
|
||||
.fail(function(e) {
|
||||
console.log("error");
|
||||
})
|
||||
.always(function() {
|
||||
console.log("complete");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
|
|
|
|||
|
|
@ -22,8 +22,9 @@ mix.sass('resources/beike/css/bootstrap/bootstrap.scss', 'public/build/beike/css
|
|||
mix.sass('resources/beike/admin/css/app.scss', 'public/build/beike/css/admin.css');
|
||||
|
||||
// 前端 default 模版
|
||||
mix.sass('resources/beike/shop/default/bootstrap/bootstrap.scss', 'public/build/beike/shop/default/css/bootstrap.css');
|
||||
mix.sass('resources/beike/shop/default/app.scss', 'public/build/beike/shop/default/css/app.css');
|
||||
mix.sass('resources/beike/shop/default/css/bootstrap/bootstrap.scss', 'public/build/beike/shop/default/css/bootstrap.css');
|
||||
mix.sass('resources/beike/shop/default/css/app.scss', 'public/build/beike/shop/default/css/app.css');
|
||||
mix.js('resources/beike/shop/default/js/app.js', 'public/build/beike/shop/default/js/app.js');
|
||||
|
||||
if (mix.inProduction()) {
|
||||
mix.version();
|
||||
|
|
|
|||
Loading…
Reference in New Issue