Skip to content

Q
quantum-blocks-h5
Commit 0b915251 authored by 郝聪敏's avatar 郝聪敏
Browse files
Options

feature: 修改页面高度未撑满bug;添加页面加载中样式；接入埋点

parent 50598eec
Hide whitespace changes
Inline Side-by-side
Showing with 149 additions and 132 deletions
app/web/asset/css/index.css 0 → 100644
View file @ 0b915251
@import "reset.css";
/* 自定义 */
html {
font-size: 10vw !important;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
}
html,
body,
#app {
height: 100%;
}
.cr-popup .cr-notify {
font-size: 14px;
}
.cr-toast .cr-toast--inner {
box-sizing: content-box;
}
@media screen and (min-width: 769Px) {
html {
font-size: 37.5Px !important;
}
body {
max-width: 375Px;
/*max-height: 667Px;*/
margin: 0 auto !important;
}
}
.mainload {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
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-dashoffset: 0;
stroke-width: 3;
stroke: #ec3333;
stroke-linecap: round;
}
@keyframes loading-rotate {
to {
transform: rotate(1turn)
}
}
@keyframes loading-dash {
0% {
stroke-dasharray: 1,200;
stroke-dashoffset: 0
}
50% {
stroke-dasharray: 90,150;
stroke-dashoffset: -40px
}
to {
stroke-dasharray: 90,150;
stroke-dashoffset: -120px
}
}
\ No newline at end of file
app/web/asset/css/reset.css
View file @ 0b915251
...@@ -144,35 +144,4 @@ li { ...@@ -144,35 +144,4 @@ li {
*:before, *:before,
*:after { *:after {
box-sizing: border-box; box-sizing: border-box;
} }
\ No newline at end of file
/* 自定义 */
html {
font-size: 10vw !important;
}
html,
body {
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;;
}
.cr-popup .cr-notify {
font-size: 14px;
}
.cr-toast .cr-toast--inner {
box-sizing: content-box;
}
@media screen and (min-width: 769Px) {
html {
font-size: 37.5Px !important;
}
body {
max-width: 375Px;
/*max-height: 667Px;*/
margin: 0 auto !important;
}
}
app/web/component/layout/activity/index.ts
View file @ 0b915251
...@@ -6,7 +6,7 @@ import 'intersection-observer'; ...@@ -6,7 +6,7 @@ import 'intersection-observer';
import vConsole from 'vconsole'; import vConsole from 'vconsole';
import { release } from '@/.sentryclirc'; import { release } from '@/.sentryclirc';
import '@/service/qg.service'; import '@/service/qg.service';
import Exposure from '@/service/exposure.service'; import SaDirective from '@qg/citrus-ui/src/helper/directives/saTrack.directive.js';
// 初始化sentry // 初始化sentry
if (process.env.SENTRY_ENV !== 'test' && process.env.NODE_ENV === 'production') { if (process.env.SENTRY_ENV !== 'test' && process.env.NODE_ENV === 'production') {
...@@ -24,13 +24,8 @@ if (EASY_ENV_IS_BROWSER && process.env.SENTRY_ENV === 'test' || process.env.NODE ...@@ -24,13 +24,8 @@ if (EASY_ENV_IS_BROWSER && process.env.SENTRY_ENV === 'test' || process.env.NODE
} }
if (EASY_ENV_IS_BROWSER) { if (EASY_ENV_IS_BROWSER) {
const exp = new Exposure(); const saDirective = new SaDirective();
Vue.directive('track', saDirective.directive);
Vue.directive('exp-dot', {
bind(el, binding, vnode) {
exp.add({el, val: binding.value});
}
});
} }
@Component({ @Component({
......
app/web/component/layout/activity/index.vue
View file @ 0b915251
...@@ -7,14 +7,24 @@ ...@@ -7,14 +7,24 @@
<meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/public/asset/css/reset.css"> <link rel="stylesheet" href="/public/asset/css/index.css">
<link rel="stylesheet" type="text/css" href="https://activitystatic.lkbang.net/swiper/4.5.1/css/swiper.min.css"> <link rel="stylesheet" type="text/css" href="https://activitystatic.lkbang.net/swiper/4.5.1/css/swiper.min.css">
</head> </head>
<body> <body>
<div class="mainload">
<div class="container">
<svg viewBox="25 25 50 50" class="circular">
<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
</svg>
<p>内容即将呈现</p>
</div>
</div>
<div id="app"><slot></slot></div> <div id="app"><slot></slot></div>
<template v-html="item" v-for="item in scriptSrc"></template> <template v-html="item" v-for="item in scriptSrc"></template>
</body> </body>
</html> </html>
<div v-else-if="!isNode" id="app"><slot></slot></div> <div v-else-if="!isNode" id="app">
<slot></slot>
</div>
</template> </template>
<script lang="ts" src="./index.ts"></script> <script lang="ts" src="./index.ts"></script>
\ No newline at end of file
app/web/page/activity/component/FreedomContainer/index.ts
View file @ 0b915251
import { Component, Prop, Vue, Mixins } from 'vue-property-decorator'; import { Component, Prop, Vue, Mixins } from 'vue-property-decorator';
import { Action, Mutation, State, Getter } from 'vuex-class'; import { Action, Mutation, State, Getter } from 'vuex-class';
import TransformStyleMixin from '@/page/mixins/transformStyle.mixin'; import TransformStyleMixin from '@/page/mixins/transformStyle.mixin';
import SaMixin from '@/page/mixins/sa.mixin';
import { resizeDiv } from '@/service/utils.service'; import { resizeDiv } from '@/service/utils.service';
@Component({ name: 'FreedomContainer' }) @Component({ name: 'FreedomContainer' })
export default class FreedomContainer extends Mixins(TransformStyleMixin) { export default class FreedomContainer extends Mixins(TransformStyleMixin, SaMixin) {
@Getter('pageData') pageData; @Getter('pageData') pageData;
@State(state => state.activity.curChildIndex) curChildIndex; @State(state => state.activity.curChildIndex) curChildIndex;
@Mutation('UPDATE_PAGE_INFO') updatePageInfo; @Mutation('UPDATE_PAGE_INFO') updatePageInfo;
@Prop({type: Object, default: () => ({ child: [] })}) childItem; @Prop({type: Object, default: () => ({ child: [] })}) childItem;
@Prop(String) backgroundImage; @Prop(String) backgroundImage;
@Prop(Object) saInfo;
mounted() { mounted() {
// 根据背景图设置元素高度 // 根据背景图设置元素高度
const index = this.pageData?.elements?.findIndex(v => v.point?.responsive); // const index = this.pageData?.elements?.findIndex(v => v.point?.responsive);
const { props: { backgroundImage }, point } = this.pageData?.elements[index] || { props: {}}; // const { props: { backgroundImage }, point } = this.pageData?.elements[index] || { props: {}};
if (backgroundImage) { // if (backgroundImage) {
resizeDiv(backgroundImage, null, null, (height) => { // resizeDiv(backgroundImage, null, null, (height) => {
this.updatePageInfo({ containerIndex: index, data: { ...this.pageData?.elements[index], point: { ...point, h: height ?? point.h } } }); // this.updatePageInfo({ containerIndex: index, data: { ...this.pageData?.elements[index], point: { ...point, h: height ?? point.h } } });
}); // });
} // }
// console.log('saInfo', this.saInfo);
} }
} }
\ No newline at end of file
app/web/page/activity/component/FreedomContainer/index.vue
View file @ 0b915251
<template> <template>
<div class="freedom"> <div class="freedom">
<div class="freedom-body"> <div class="freedom-body">
<component :class="['freedom-body-item', { 'Fb-item_selected': curChildIndex === index }]" v-for="(item, index) in childItem.child" :style="transformStyle(item.commonStyle, 'container')" :is="item.name" :key="index" v-bind="item.props"></component> <component :class="['freedom-body-item', { 'Fb-item_selected': curChildIndex === index }]" v-for="(item, index) in childItem.child" :style="transformStyle(item.commonStyle, 'container')" :is="item.name" :key="index" :sa-info="getSaInfo(item)" v-bind="item.props"></component>
</div> </div>
</div> </div>
</template> </template>
......
app/web/page/activity/view/activity/index.ts
View file @ 0b915251
...@@ -4,10 +4,11 @@ import FreedomContainer from '../../component/FreedomContainer/index.vue'; ...@@ -4,10 +4,11 @@ import FreedomContainer from '../../component/FreedomContainer/index.vue';
import GridLayout from '../../component/VueGridLayout/GridLayout.vue'; import GridLayout from '../../component/VueGridLayout/GridLayout.vue';
import GridItem from '../../component/VueGridLayout/GridItem.vue'; import GridItem from '../../component/VueGridLayout/GridItem.vue';
import TransformStyleMixin from '@/page/mixins/transformStyle.mixin'; import TransformStyleMixin from '@/page/mixins/transformStyle.mixin';
import SaMixin from '@/page/mixins/sa.mixin';
import { getStyle } from '@/service/utils.service'; import { getStyle } from '@/service/utils.service';
@Component({ components: { FreedomContainer, GridLayout, GridItem }, name: 'Activity'}) @Component({ components: { FreedomContainer, GridLayout, GridItem }, name: 'Activity'})
export default class Activity extends Mixins(TransformStyleMixin) { export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
@Getter('pageData') pageData; @Getter('pageData') pageData;
@State(state => state.activity.pageInfo.pageName) pageName; @State(state => state.activity.pageInfo.pageName) pageName;
@State(state => state.activity.gridLayout.rowHeight) rowHeight; @State(state => state.activity.gridLayout.rowHeight) rowHeight;
...@@ -18,6 +19,7 @@ export default class Activity extends Mixins(TransformStyleMixin) { ...@@ -18,6 +19,7 @@ export default class Activity extends Mixins(TransformStyleMixin) {
isLayoutComReady = false; isLayoutComReady = false;
showBackTop = false; showBackTop = false;
targetEle: HTMLElement | null = null; targetEle: HTMLElement | null = null;
isInServer: boolean = true;
loading: boolean = true; loading: boolean = true;
get layout() { get layout() {
...@@ -47,6 +49,7 @@ export default class Activity extends Mixins(TransformStyleMixin) { ...@@ -47,6 +49,7 @@ export default class Activity extends Mixins(TransformStyleMixin) {
console.log('loading', this); console.log('loading', this);
this.targetEle = document.querySelector('body'); this.targetEle = document.querySelector('body');
this.showBackTop = true; this.showBackTop = true;
this.isInServer = false;
const timer = setTimeout(() => { const timer = setTimeout(() => {
this.modfiTabsStyle(); this.modfiTabsStyle();
}, 700); }, 700);
...@@ -78,18 +81,13 @@ export default class Activity extends Mixins(TransformStyleMixin) { ...@@ -78,18 +81,13 @@ export default class Activity extends Mixins(TransformStyleMixin) {
console.log(title, '点击了'); console.log(title, '点击了');
} }
getSaInfo(element) {
const { id, title, name } = element;
return {
assembly_id: id,
assembly_type: title,
assembly_name: name
};
}
layoutReadyEvent(newLayout) { layoutReadyEvent(newLayout) {
// console.log('Mounted layout: ', newLayout); this.$nextTick(() => {
// this.loading = false; const loadingEle = document.querySelector('.mainload');
if (!loadingEle) { return; }
const parentNode = loadingEle.parentNode;
parentNode.removeChild(loadingEle);
});
} }
modfiTabsStyle() { modfiTabsStyle() {
......
app/web/page/activity/view/activity/index.vue
View file @ 0b915251
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
:key="item.point.i" :key="item.point.i"
@click.native="dot(item.title)" @click.native="dot(item.title)"
> >
<component v-exp-dot :data-dot="item.title" :data-index="index" :containerIndex="index" :childItem="item" :is="item.name" :key="item.id" :sa-info="getSaInfo(item)" v-bind="item.props"></component> <component :data-index="index" :containerIndex="index" :childItem="item" :is="item.name" :key="item.id" :sa-info="getSaInfo(item)" v-bind="item.props"></component>
</grid-item> </grid-item>
</grid-layout> </grid-layout>
<cr-back-top v-if="showBackTop && pageData.props.showBackTop" /> <cr-back-top v-if="showBackTop && pageData.props.showBackTop" />
...@@ -33,14 +33,14 @@ ...@@ -33,14 +33,14 @@
<style lang="less" scoped> <style lang="less" scoped>
.activity { .activity {
width: 100%; width: 100%;
padding-bottom: 40px;
min-height: 100%; min-height: 100%;
background-color: rgb(244, 244, 244); background-color: rgb(244, 244, 244);
box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2); box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
// overflow-x: hidden; // overflow-x: hidden;
// overflow-y: scroll; // overflow-y: scroll;
/deep/ .vue-grid-layout { /deep/ .vue-grid-layout {
min-height: 667px; padding-bottom: 40px;
box-sizing: content-box;
// transform: translateY(-10px); // transform: translateY(-10px);
transition-property: none; transition-property: none;
.vue-grid-item { .vue-grid-item {
...@@ -53,27 +53,5 @@ ...@@ -53,27 +53,5 @@
} }
} }
} }
.loading-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
.loading {
padding: 6px;
border-radius: 6px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
/deep/ .cr-loading--text {
color: #fff;
}
}
}
} }
</style> </style>
app/web/page/mixins/sa.mixin.ts 0 → 100644
View file @ 0b915251
import { Component, Vue } from 'vue-property-decorator';
@Component({ name: 'SaMixin' })
export default class SaMixin extends Vue {
getSaInfo(element) {
const { id, title, name } = element;
return {
assembly_id: id,
assembly_type: title,
assembly_name: name
};
}
}
app/web/service/exposure.service.ts deleted 100644 → 0
View file @ 50598eec
import 'intersection-observer';
export default class Exposure {
observer;
constructor() {
this.init();
}
init() {
this.observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
this.dot(entry?.target?.attributes?.['data-dot']?.value);
}
});
});
}
add(entry) {
if (this.observer) { this.observer.observe(entry.el); }
}
dot(title) {
console.log(title, '进入了');
}
}
\ No newline at end of file
app/web/service/sa.service.ts
View file @ 0b915251
...@@ -4,7 +4,8 @@ import config from '@/config'; ...@@ -4,7 +4,8 @@ import config from '@/config';
import Storage from '@/service/localStorage.service'; import Storage from '@/service/localStorage.service';
export function initSa(router) { export function initSa(router) {
console.log('initSa', EASY_ENV_IS_BROWSER, config); console.log('initSa', EASY_ENV_IS_BROWSER, config, window.location.pathname);
const activity_id = window.location.pathname.split('/')?.[2] || '';
sa.init({ sa.init({
server_url: config.shenceUrl, server_url: config.shenceUrl,
heatmap: { heatmap: {
...@@ -21,10 +22,7 @@ export function initSa(router) { ...@@ -21,10 +22,7 @@ export function initSa(router) {
// 添加公共属性 // 添加公共属性
sa.registerPage({ sa.registerPage({
platformType: 'H5', platformType: 'H5',
uuid: '', activity_id
qg_device_id: '',
channel_code: '',
splitStream: '',
}); });
router.afterEach(() => { router.afterEach(() => {
Vue.nextTick(() => { Vue.nextTick(() => {
......
app/web/view/layout.html
View file @ 0b915251
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/public/asset/css/reset.css"> <link rel="stylesheet" href="/public/asset/css/index.css">
<link rel="stylesheet" type="text/css" href="https://activitystatic.lkbang.net/swiper/4.5.1/css/swiper.min.css"> <link rel="stylesheet" type="text/css" href="https://activitystatic.lkbang.net/swiper/4.5.1/css/swiper.min.css">
</head> </head>
<body> <body>
......
package-lock.json
View file @ 0b915251
...@@ -1600,9 +1600,9 @@ ...@@ -1600,9 +1600,9 @@
} }
}, },
"@qg/citrus-ui": { "@qg/citrus-ui": {
"version": "0.0.47", "version": "0.0.48",
"resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.0.47.tgz", "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.0.48.tgz",
"integrity": "sha512-SWld0LQ++qtq4Tw+HDKlD1IoITbWAcJIA3j0mDS17UAlRpGaiY7pzPq/9eyqGm7aQwDiJ6NeeofMXHMvF6Sqwg==", "integrity": "sha512-zO2HQaeZok1XbWx8/t/GEzORYBfDlCRaWuhY/N3Bf2t361odO9L9Xlm3xHdo3PD+ZlFiJPzBR3pREQkAAKsx5A==",
"requires": { "requires": {
"@better-scroll/core": "^2.1.1", "@better-scroll/core": "^2.1.1",
"@qg/cherry-ui": "^2.20.5", "@qg/cherry-ui": "^2.20.5",
...@@ -20423,9 +20423,9 @@ ...@@ -20423,9 +20423,9 @@
"integrity": "sha1-8z/pz7Urv9UgqhgyO8ZdsRCht2w=" "integrity": "sha1-8z/pz7Urv9UgqhgyO8ZdsRCht2w="
}, },
"rollup": { "rollup": {
"version": "2.43.0", "version": "2.43.1",
"resolved": "http://npmprivate.quantgroups.com/rollup/-/rollup-2.43.0.tgz", "resolved": "http://npmprivate.quantgroups.com/rollup/-/rollup-2.43.1.tgz",
"integrity": "sha512-FRsYGqlo1iF/w3bv319iStAK0hyhhwon35Cbo7sGUoXaOpsZFy6Lel7UoGb5bNDE4OsoWjMH94WiVvpOM26l3g==", "integrity": "sha512-kvRE6VJbiv4d8m2nGeccc3qRpzOMghAhu2KeITjyZVCjneIFLPQ3zm2Wmqnl0LcUg3FvDaV0MfKnG4NCMbiSfw==",
"requires": { "requires": {
"fsevents": "~2.3.1" "fsevents": "~2.3.1"
} }
......
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