diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..a65b5e2
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "nuxt.isNuxtApp": true
+}
\ No newline at end of file
diff --git a/app/router.scrollBehavior.js b/app/router.scrollBehavior.js
new file mode 100644
index 0000000..7e26aae
--- /dev/null
+++ b/app/router.scrollBehavior.js
@@ -0,0 +1,4 @@
+export default () => ({
+ x: 0,
+ y: 0
+})
diff --git a/assets/_general.scss b/assets/_general.scss
index 362984b..31e82cf 100644
--- a/assets/_general.scss
+++ b/assets/_general.scss
@@ -1,15 +1,53 @@
-.container {
- width: 100%;
- margin-top: 48px;
- height: calc(100vh - 48px - 50px);
- position: relative;
- overflow: auto;
-}
-
-.container-without-nav {
- width: 100%;
- margin-top: 0;
- height: calc(100vh - 50px);
- position: relative;
- overflow: auto;
+:root {
+ --sat: env(safe-area-inset-top);
+ --sar: env(safe-area-inset-right);
+ --sab: env(safe-area-inset-bottom);
+ --sal: env(safe-area-inset-left);
+}
+
+* {
+ box-sizing: border-box;
+ touch-action: manipulation;
+}
+@supports(padding: max(0px)) {
+ body {
+ padding-left: max(12px, var(--sal));
+ padding-right: max(12px, var(--sar));
+ }
+}
+body {
+ padding: var(--sat) var(--sar) var(--sab) var(--sal);
+ .container, .container-without-nav {
+ width: 100%;
+ position: relative;
+ padding-bottom: var(--sab);
+ }
+
+ .container {
+ overflow: auto;
+ margin-top: $--height-header;
+ height: calc(#{$--full-height} - #{$--height-header} - #{$--height-footer} + var(--sab));
+ }
+
+ // @supports (-webkit-touch-callout: none) {
+ // body {
+ // /* The hack for Safari */
+ // height: -webkit-fill-available;
+ // }
+ // }
+
+ .container-without-nav {
+ margin-top: 0;
+ height: calc(#{$--full-height} - #{$--height-header} - #{$--height-footer} + var(--sab));
+ .van-nav-bar.van-nav-bar--fixed {
+ top: var(--sat);
+ }
+ .content {
+ margin-top: $--height-header;
+ }
+ }
+
+ .spacer {
+ clear: both;
+ }
}
diff --git a/assets/_mixins.scss b/assets/_mixins.scss
new file mode 100644
index 0000000..30a030c
--- /dev/null
+++ b/assets/_mixins.scss
@@ -0,0 +1,66 @@
+// MEDIA QUERY MANAGER
+/*
+0 - 768px: Phone
+768 - 992px: Tablet portrait
+992 - 1200px: Tablet landscape
+[1200 - 1800] is where our normal styles apply
+1800px + : Big desktop
+$breakpoint arguement choices:
+- phone
+- tab-port
+- tab-land
+- big-desktop
+ORDER: Base + typography > general layout + grid > page layout > components
+1em = 16px
+
+---- THIS IS NOT MOBILE FIRST
+*/
+@mixin respond($breakpoint) {
+ @if $breakpoint == phone {
+ @media only screen and (max-width: $--width-mobile) { @content }; //768px
+ }
+ @if $breakpoint == tab-port {
+ @media only screen and (max-width: $--width-tablet-portrait) { @content }; //992px
+ }
+ @if $breakpoint == tab-land {
+ @media only screen and (max-width: $--width-tablet-landscape) { @content }; //1200px
+ }
+ @if $breakpoint == big-desktop {
+ @media only screen and (min-width: $--width-big-desktop) { @content }; //1800
+ }
+}
+
+
+// Recolor svg
+@mixin recolor($color: white, $opacity: 1) {
+ $r: red($color) / 255;
+ $g: green($color) / 255;
+ $b: blue($color) / 255;
+ $a: $opacity;
+
+ // grayscale fallback if SVG from data url is not supported
+ $lightness: lightness($color);
+ // filter: saturate(0%) brightness(0%) invert($lightness) opacity($opacity);
+ filter: saturate(100%) brightness(100%) invert($lightness) opacity($opacity);
+
+ // color filter
+ // $svg-filter-id: "recolor";
+ // filter: url('data:image/svg+xml;utf8,\
+ // \
+ // ##{$svg-filter-id}');
+}
+
+// height
+
+@mixin hight($h: 100) {
+ height: calc(var(--vh, 1vh) * $h);
+}
diff --git a/assets/_style.scss b/assets/_style.scss
index acc9917..156c5b7 100644
--- a/assets/_style.scss
+++ b/assets/_style.scss
@@ -1,8 +1,10 @@
@import "general";
@import "utilities";
+@import "mixins";
+@import "./element/vant";
.van-nav-bar__content {
- height: 48px;
+ height: $--height-header;
}
.van-address-list {
diff --git a/assets/_variables.scss b/assets/_variables.scss
index d7d4320..8afa5b2 100644
--- a/assets/_variables.scss
+++ b/assets/_variables.scss
@@ -1,6 +1,9 @@
$--color-white: #ffffff;
$--color-black: #000000;
$--color-primary: #409eff;
+$--color-pattens-blue: #DCE6FF;
+$--color-hawkes-blue: #D7ECFB;
$--height-header: 48px;
$--height-footer: 50px;
+$--full-height: calc(var(--vh, 1vh) * 100);
// $--color-info: ;
diff --git a/assets/components/_m-app-header.scss b/assets/components/_m-app-header.scss
index 39def4a..b468817 100644
--- a/assets/components/_m-app-header.scss
+++ b/assets/components/_m-app-header.scss
@@ -1,22 +1,43 @@
::v-deep.m-app-header {
.vs-navbar-content {
position: fixed;
- z-index: 2000;
+ z-index: 2000;
+ padding-top: var(--sat);
+ height: $--height-header;
+ background: $--color-pattens-blue;
+ background: linear-gradient(79deg, #{$--color-pattens-blue} 0%, #{$--color-hawkes-blue} 100%);
.vs-navbar {
+ background-color: $--color-white;
}
}
- .vs-sidebar {
- overflow-x: auto;
- .vs-sidebar__item {
- height: 48px;
- &.hasIcon.active {
- padding-left: 0;
+ .vs-sidebar-content {
+ margin-top: var(--sat);
+ padding: 0 0 var(--sab) 0;
+ height: calc(100% - var(--sat));
+ .vs-sidebar {
+ overflow-x: auto;
+ .vs-sidebar__item {
+ height: $--height-header;
+ &.hasIcon.active {
+ padding-left: 0;
+ }
}
}
}
- .van-search {
- .van-icon-search {
- font-size: 22px;
+ .van-popup.search {
+ height: calc(100vh - var(--sat));
+ height: calc(#{$--full-height} - var(--sat));
+ .van-search {
+ .van-icon-search {
+ font-size: 22px;
+ }
}
}
}
+
+@supports(padding: max(0px)) {
+ .vs-sidebar-content {
+ padding-left: max(12px, env(--sal));
+ padding-right: max(12px, env(--sar));
+ }
+}
diff --git a/assets/element/_vant.scss b/assets/element/_vant.scss
new file mode 100644
index 0000000..a1c3caf
--- /dev/null
+++ b/assets/element/_vant.scss
@@ -0,0 +1,4 @@
+// NOTIFY
+.van-notify {
+ top: var(--sat);
+}
diff --git a/components/mobile/MAppFooter.vue b/components/mobile/MAppFooter.vue
index 66e7bca..fd7f853 100644
--- a/components/mobile/MAppFooter.vue
+++ b/components/mobile/MAppFooter.vue
@@ -1,5 +1,9 @@
- tabbar.footer(v-model="active")
+ tabbar.footer(
+ route
+ safe-area-inset-bottom
+ v-model="active"
+ )
tabbar-item(name="index" icon="home-o" :to="{ name: 'index' }")
tabbar-item(name="categories" icon="apps-o")
tabbar-item(name="cart" :to="{ name: 'cart' }" icon="shopping-cart-o" :badge="10")
diff --git a/components/mobile/MAppHeader.vue b/components/mobile/MAppHeader.vue
index 823fc05..e18449e 100644
--- a/components/mobile/MAppHeader.vue
+++ b/components/mobile/MAppHeader.vue
@@ -133,10 +133,9 @@
)
icon(:name="'cross'")
//- icon(:name="reduce ? 'arrow' : 'arrow-left'")
- popup(
+ popup.search(
v-model="popupSearch"
position="bottom"
- :style="{ height: '100%' }"
)
search(
v-model="value"
@@ -145,6 +144,7 @@
input-align="center"
shape="round"
placeholder="Placeholder"
+ safe-area-inset-bottom
@cancel="popupSearch = false"
)
diff --git a/components/mobile/MobileLayout.vue b/components/mobile/MobileLayout.vue
index 261ec6f..85d1b32 100644
--- a/components/mobile/MobileLayout.vue
+++ b/components/mobile/MobileLayout.vue
@@ -23,5 +23,6 @@ export default {
.mobileLayout {
background-color: aliceblue;
overflow: hidden;
+ -webkit-overflow-scrolling: touch;
}
diff --git a/components/mobile/order/OrderType.vue b/components/mobile/order/OrderType.vue
index 8469ba1..7d8aa45 100644
--- a/components/mobile/order/OrderType.vue
+++ b/components/mobile/order/OrderType.vue
@@ -19,7 +19,10 @@ export default {
components: {
},
props: {
- orderTypeDataArray: Array
+ orderTypeDataArray: {
+ type: Array,
+ default: () => ([])
+ }
},
data () {
return {
diff --git a/layouts/default.vue b/layouts/default.vue
index 0abbe0c..03ff38d 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -3,13 +3,17 @@
div
transition(:name="slide")
Nuxt
+ .spacer
diff --git a/pages/account/my-order.vue b/pages/account/my-order.vue
index 13c7ae9..0bf8436 100644
--- a/pages/account/my-order.vue
+++ b/pages/account/my-order.vue
@@ -1,5 +1,5 @@
- #myOrder.ontainer-without-nav
+ #my-order.container-without-nav
nav-bar(
fixed
left-arrow
@@ -7,7 +7,6 @@
:z-index="2001"
:title=" $t('pages.my_order.title')"
@click-left="onClickLeft"
- style="height: 48px"
)
tabs(
v-model="active"
@@ -75,4 +74,9 @@ export default {
diff --git a/pages/callback.vue b/pages/callback.vue
new file mode 100644
index 0000000..5f355e3
--- /dev/null
+++ b/pages/callback.vue
@@ -0,0 +1,12 @@
+
+ .container profile 13345678992
+ van-button(@click.native="$auth.loginWith('auth0')") hi
+
+
+
+
+
diff --git a/pages/cart.vue b/pages/cart.vue
index bdecccc..184c792 100644
--- a/pages/cart.vue
+++ b/pages/cart.vue
@@ -7,7 +7,6 @@
:z-index="2001"
:title="$t('pages.my_order.title')"
@click-left="onClickLeft"
- style="height: 48px"
)
checkbox-group.card-goods(
v-model="checkedGoods"
@@ -149,6 +148,7 @@ export default {
onClickLeft () {
this.$router.back()
},
+
init () {
this.cartList = [
{
@@ -166,9 +166,11 @@ export default {
]
this.checkedGoods = []
},
+
editCart () {
this.isEdit = !this.isEdit
},
+
reduceCount (item, count) {
if (!count && count !== 0) {
Toast({
@@ -188,6 +190,7 @@ export default {
item.Cartcount = count
this.updateCartCountFun(item.Goodid, count)
},
+
addCount (item, count) {
if (!count && count !== 0) {
Toast({
@@ -207,6 +210,7 @@ export default {
item.Cartcount = count
this.updateCartCountFun(item.Goodid, count)
},
+
reduceEditCount () {
if (!this.editNum && this.editNum !== 0) {
Toast({
@@ -224,6 +228,7 @@ export default {
}
this.editNum--
},
+
addEditCount () {
if (!this.editNum && this.editNum !== 0) {
Toast({
@@ -241,15 +246,18 @@ export default {
}
this.editNum++
},
+
showModal (item) {
this.modalShow = true
this.editGood = item
const count = item.Cartcount
this.editNum = count
},
+
goHome () {
this.$router.push('/')
},
+
beforeClose (action, done) {
if (action === 'confirm') {
if (!this.editNum) {
@@ -283,9 +291,11 @@ export default {
done()
}
},
+
formatPrice (price) {
return price.toFixed(2)
},
+
selectAll () {
if (this.checkedAll) {
for (let i = 0; i < this.cartList.length; i++) {
@@ -297,6 +307,7 @@ export default {
this.checkedAllMsg = '全选'
}
},
+
updateCartCountFun (id, count) {
clearTimeout(this.timer)
this.timer = setTimeout(() => {
@@ -309,6 +320,7 @@ export default {
// })
}, 500)
},
+
onSubmit () {
if (this.isEdit) {
if (!this.checkedGoods.length) {
diff --git a/pages/login.vue b/pages/login.vue
index c44b781..0d9d236 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -1,5 +1,6 @@
- div profile 13345678992
+ .container profile 13345678992
+ van-button(@click.native="$auth.loginWith('auth0')") Login