Commit 21fd0af4 authored by 郭志伟's avatar 郭志伟

fix(bottom-tip): 调整底部计算方式

parent 073618b3
......@@ -30,6 +30,7 @@
</template>
<script lang="ts" src="./index.ts"></script>
<style>
/* stylelint-disable */
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
......@@ -203,13 +204,13 @@ body,
box-sizing: content-box;
}
@media screen and (min-width: 769px) {
@media screen and (min-width: 769Px) {
html {
font-size: 37.5px !important;
font-size: 37.5Px !important;
}
body {
max-width: 375px;
max-width: 375Px;
/* max-height: 667Px; */
margin: 0 auto !important;
......
......@@ -6,7 +6,7 @@ import GridLayout from '../../component/VueGridLayout/GridLayout.vue';
import GridItem from '../../component/VueGridLayout/GridItem.vue';
import TransformStyleMixin from '@/page/mixins/transformStyle.mixin';
import SaMixin from '@/page/mixins/sa.mixin';
import { getStyle, debounce } from '@/service/utils.service';
import { getStyle, debounce, isApp } from '@/service/utils.service';
@Component({ components: { FreedomContainer, GridLayout, GridItem, PageBottomTip }, name: 'Activity'})
export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
......@@ -35,12 +35,18 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
}
get backTopList() {
return this.pageData && this.pageData.props.showShopCart ? this.pageData.props.backTopAttachInfo : [];
return isApp && this.pageData && this.pageData.props.showShopCart ? [
{
icon: 'shopping-cart-o',
url: 'xyqb://shoppingCartTab'
}
] : [];
}
@Watch('pageData', { deep: true })
onPageDataChange(val) {
const lastGridItem = val.elements[val.elements.length - 1];
const isTab = lastGridItem.name === 'cs-goods-tabs';
// if (!lastGridItem) { return; }
// if (lastGridItem.name === 'cs-goods-tabs' && lastGridItem.child.length > 0) {
// lastGridItem = lastGridItem.child[lastGridItem.child.length - 1];
......@@ -55,7 +61,7 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
i: 'page-bottom-top'
};
if (lastGridItemPoint.w > this.bottomInfo.w) { this.bottomInfo.w = lastGridItemPoint.w; }
this.bottomInfo.y = this.bottomInfo.y + lastGridItemPoint.y + lastGridItemPoint.h;
this.bottomInfo.y = this.bottomInfo.y + lastGridItemPoint.y + lastGridItemPoint.h + (isTab ? -1 : 0);
}
}
......@@ -121,6 +127,9 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
// 高度更新时重新计算导航组件样式
this.modfiTabsStyleDebounce();
}
hideBottomBtns(state) {
this.showBackTop = state;
}
modfiTabsStyle() {
const tabsEle = document.querySelector('.tabs');
......
......@@ -48,7 +48,7 @@
width: 100%;
min-height: 100%;
background-color: rgb(244, 244, 244);
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
// box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
// overflow-x: hidden;
// overflow-y: scroll;
/deep/ .vue-grid-layout {
......
......@@ -37,7 +37,7 @@ export default class TransformStyleMixin extends Vue {
const eleId = element.getAttribute('id');
const component = this.pageData.elements.find(v => v.id === eleId);
if (!component) { return; }
const point = { ...component.point, h: Math.ceil(+height) + 1 };
const point = { ...component.point, h: component.name === 'cs-goods-tabs' ? Math.floor(+height) : Math.ceil(+height) };
this.setElementPoint({ id: eleId, data: point });
console.log('adjustHeight', height, component, element.getAttribute('id'), point);
......
......@@ -9,6 +9,7 @@
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<!-- <link rel="stylesheet" type="text/css" href="https://activitystatic.lkbang.net/swiper/4.5.1/css/swiper.min.css"> -->
<style>
/* stylelint-disable */
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
......@@ -152,8 +153,8 @@
}
*,
*::before,
*::after {
*:before,
*:after {
box-sizing: border-box;
}
......@@ -176,15 +177,13 @@
box-sizing: content-box;
}
@media screen and (min-width: 769px) {
@media screen and (min-width: 769Px) {
html {
font-size: 37.5px !important;
font-size: 37.5Px !important;
}
body {
max-width: 375px;
/* max-height: 667Px; */
max-width: 375Px;
/*max-height: 667Px;*/
margin: 0 auto !important;
}
}
......@@ -201,52 +200,44 @@
z-index: 999;
background-color: #fff;
}
.mainload .container {
text-align: center;
}
.mainload p {
font-size: 16px;
color: #666;
margin-top: 10px;
}
.mainload .circular {
height: 36px;
width: 36px;
animation: loading-rotate 2s linear infinite;
}
.mainload .path {
animation: loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90, 150;
stroke-dasharray: 90,150;
stroke-dashoffset: 0;
stroke-width: 3;
stroke: #ec3333;
stroke-linecap: round;
}
@keyframes loading-rotate {
to {
transform: rotate(1turn);
transform: rotate(1turn)
}
}
@keyframes loading-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
stroke-dasharray: 1,200;
stroke-dashoffset: 0
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px;
stroke-dasharray: 90,150;
stroke-dashoffset: -40px
}
to {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px;
stroke-dasharray: 90,150;
stroke-dashoffset: -120px
}
}
......@@ -257,11 +248,9 @@
overflow: hidden;
list-style: none;
padding: 0;
/* Fix of Webkit flickering */
z-index: 1;
}
.swiper-wrapper {
position: relative;
width: 100%;
......@@ -279,19 +268,16 @@
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
......@@ -305,7 +291,6 @@
transition-property: transform;
transition-property: transform, -webkit-transform;
}
.swiper-slide-invisible-blank {
visibility: hidden;
}
......@@ -326,7 +311,6 @@
<!-- <script src="https://activitystatic.lkbang.net/vue/2.6.11/vue.min.js"></script> -->
<!-- <script src="https://activitystatic.lkbang.net/vue-router/3.2.0/vue-router.min.js"></script> -->
<!-- <script src="https://activitystatic.lkbang.net/vuex/3.4.0/vuex.min.js"></script> -->
<script src="https://activitystatic.lkbang.net/sa-sdk-javascript/1.15.16/sensorsdata.min.js"></script>
<script src="https://activitystatic.lkbang.net/swiper/4.5.1/swiper.min.js"></script>
<script src="https://activitystatic.lkbang.net/axios/0.19.2/axios.min.js"></script>
......
......@@ -1648,9 +1648,9 @@
"integrity": "sha512-uOCUKu5mvX3PWee+7ZFXQSNIR1V5SN2JVE2yANmW9/wQOgpEct291gXGok8VMw0009HlTWB4JATURPwyOP2DFg=="
},
"@qg/cherry-ui": {
"version": "2.21.1-beta8",
"resolved": "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.21.1-beta8.tgz",
"integrity": "sha512-6bSv1iTQ73IF2NG5ssQbIg/DDwa3r3kv/t6DWfp/9y/aVB1Eyj4ddVesP3+TysSKf+S5ZN4unva/M5Lj3OPuHg==",
"version": "2.21.1-beta9",
"resolved": "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.21.1-beta9.tgz",
"integrity": "sha512-evaqcwGPrg/RqgHZW3pFU2QpvmIlNZMA83QdGV7U58XrkTuQ4C4wE6FgB0M7kGTZzf/IpfjOZL5ZuGfSaOlGUw==",
"requires": {
"@popperjs/core": "^2.5.4",
"vue-lazyload": "^1.3.3",
......@@ -1658,9 +1658,9 @@
}
},
"@qg/citrus-ui": {
"version": "0.1.15-beta4",
"resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.1.15-beta4.tgz",
"integrity": "sha512-DqLR4peJapLIOQrVjvDjRsWwve4qJ0/+IZczDNYSjr2b2XB2KRahf9vYNEDDjEiRwnbDFVQYRPlVrA/BKbn0uw==",
"version": "0.1.15-beta5",
"resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.1.15-beta5.tgz",
"integrity": "sha512-IP0MI8wvs6hgpBKF0ruv8DYOJB0x5tWTISFjDGhCc4JqiPVM/wtOzNNRDFA5+nHaQrOYH+QpX4P/sRXdlWkChA==",
"requires": {
"@better-scroll/core": "^2.1.1",
"@qg/cherry-ui": "^2.21.1-beta5",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment