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 {
*:before,
*:after {
box-sizing: border-box;
}
/* 自定义 */
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;
}
}
}
\ No newline at end of file
app/web/component/layout/activity/index.ts
View file @ 0b915251
......@@ -6,7 +6,7 @@ import 'intersection-observer';
import vConsole from 'vconsole';
import { release } from '@/.sentryclirc';
import '@/service/qg.service';
import Exposure from '@/service/exposure.service';
import SaDirective from '@qg/citrus-ui/src/helper/directives/saTrack.directive.js';
// 初始化sentry
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
}
if (EASY_ENV_IS_BROWSER) {
const exp = new Exposure();
Vue.directive('exp-dot', {
bind(el, binding, vnode) {
exp.add({el, val: binding.value});
}
});
const saDirective = new SaDirective();
Vue.directive('track', saDirective.directive);
}
@Component({
......
app/web/component/layout/activity/index.vue
View file @ 0b915251
......@@ -7,14 +7,24 @@
<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">
<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">
</head>
<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>
<template v-html="item" v-for="item in scriptSrc"></template>
</body>
</html>
<div v-else-if="!isNode" id="app"><slot></slot></div>
<div v-else-if="!isNode" id="app">
<slot></slot>
</div>
</template>
<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 { Action, Mutation, State, Getter } from 'vuex-class';
import TransformStyleMixin from '@/page/mixins/transformStyle.mixin';
import SaMixin from '@/page/mixins/sa.mixin';
import { resizeDiv } from '@/service/utils.service';
@Component({ name: 'FreedomContainer' })
export default class FreedomContainer extends Mixins(TransformStyleMixin) {
export default class FreedomContainer extends Mixins(TransformStyleMixin, SaMixin) {
@Getter('pageData') pageData;
@State(state => state.activity.curChildIndex) curChildIndex;
@Mutation('UPDATE_PAGE_INFO') updatePageInfo;
@Prop({type: Object, default: () => ({ child: [] })}) childItem;
@Prop(String) backgroundImage;
@Prop(Object) saInfo;
mounted() {
// 根据背景图设置元素高度
const index = this.pageData?.elements?.findIndex(v => v.point?.responsive);
const { props: { backgroundImage }, point } = this.pageData?.elements[index] || { props: {}};
if (backgroundImage) {
resizeDiv(backgroundImage, null, null, (height) => {
this.updatePageInfo({ containerIndex: index, data: { ...this.pageData?.elements[index], point: { ...point, h: height ?? point.h } } });
});
}
// console.log('saInfo', this.saInfo);
// const index = this.pageData?.elements?.findIndex(v => v.point?.responsive);
// const { props: { backgroundImage }, point } = this.pageData?.elements[index] || { props: {}};
// if (backgroundImage) {
// resizeDiv(backgroundImage, null, null, (height) => {
// this.updatePageInfo({ containerIndex: index, data: { ...this.pageData?.elements[index], point: { ...point, h: height ?? point.h } } });
// });
// }
}
}
\ No newline at end of file
app/web/page/activity/component/FreedomContainer/index.vue
View file @ 0b915251
<template>
<div class="freedom">
<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>
</template>
......
app/web/page/activity/view/activity/index.ts
View file @ 0b915251
......@@ -4,10 +4,11 @@ import FreedomContainer from '../../component/FreedomContainer/index.vue';
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 } from '@/service/utils.service';
@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;
@State(state => state.activity.pageInfo.pageName) pageName;
@State(state => state.activity.gridLayout.rowHeight) rowHeight;
......@@ -18,6 +19,7 @@ export default class Activity extends Mixins(TransformStyleMixin) {
isLayoutComReady = false;
showBackTop = false;
targetEle: HTMLElement | null = null;
isInServer: boolean = true;
loading: boolean = true;
get layout() {
......@@ -47,6 +49,7 @@ export default class Activity extends Mixins(TransformStyleMixin) {
console.log('loading', this);
this.targetEle = document.querySelector('body');
this.showBackTop = true;
this.isInServer = false;
const timer = setTimeout(() => {
this.modfiTabsStyle();
}, 700);
......@@ -78,18 +81,13 @@ export default class Activity extends Mixins(TransformStyleMixin) {
console.log(title, '点击了');
}
getSaInfo(element) {
const { id, title, name } = element;
return {
assembly_id: id,
assembly_type: title,
assembly_name: name
};
}
layoutReadyEvent(newLayout) {
// console.log('Mounted layout: ', newLayout);
// this.loading = false;
this.$nextTick(() => {
const loadingEle = document.querySelector('.mainload');
if (!loadingEle) { return; }
const parentNode = loadingEle.parentNode;
parentNode.removeChild(loadingEle);
});
}
modfiTabsStyle() {
......
app/web/page/activity/view/activity/index.vue
View file @ 0b915251
......@@ -23,7 +23,7 @@
:key="item.point.i"
@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-layout>
<cr-back-top v-if="showBackTop && pageData.props.showBackTop" />
......@@ -33,14 +33,14 @@
<style lang="less" scoped>
.activity {
width: 100%;
padding-bottom: 40px;
min-height: 100%;
background-color: rgb(244, 244, 244);
box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
// overflow-x: hidden;
// overflow-y: scroll;
/deep/ .vue-grid-layout {
min-height: 667px;
padding-bottom: 40px;
box-sizing: content-box;
// transform: translateY(-10px);
transition-property: none;
.vue-grid-item {
......@@ -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>
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';
import Storage from '@/service/localStorage.service';
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({
server_url: config.shenceUrl,
heatmap: {
......@@ -21,10 +22,7 @@ export function initSa(router) {
// 添加公共属性
sa.registerPage({
platformType: 'H5',
uuid: '',
qg_device_id: '',
channel_code: '',
splitStream: '',
activity_id
});
router.afterEach(() => {
Vue.nextTick(() => {
......
app/web/view/layout.html
View file @ 0b915251
......@@ -7,7 +7,7 @@
<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">
<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">
</head>
<body>
......
package-lock.json
View file @ 0b915251
......@@ -1600,9 +1600,9 @@
}
},
"@qg/citrus-ui": {
"version": "0.0.47",
"resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.0.47.tgz",
"integrity": "sha512-SWld0LQ++qtq4Tw+HDKlD1IoITbWAcJIA3j0mDS17UAlRpGaiY7pzPq/9eyqGm7aQwDiJ6NeeofMXHMvF6Sqwg==",
"version": "0.0.48",
"resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.0.48.tgz",
"integrity": "sha512-zO2HQaeZok1XbWx8/t/GEzORYBfDlCRaWuhY/N3Bf2t361odO9L9Xlm3xHdo3PD+ZlFiJPzBR3pREQkAAKsx5A==",
"requires": {
"@better-scroll/core": "^2.1.1",
"@qg/cherry-ui": "^2.20.5",
......@@ -20423,9 +20423,9 @@
"integrity": "sha1-8z/pz7Urv9UgqhgyO8ZdsRCht2w="
},
"rollup": {
"version": "2.43.0",
"resolved": "http://npmprivate.quantgroups.com/rollup/-/rollup-2.43.0.tgz",
"integrity": "sha512-FRsYGqlo1iF/w3bv319iStAK0hyhhwon35Cbo7sGUoXaOpsZFy6Lel7UoGb5bNDE4OsoWjMH94WiVvpOM26l3g==",
"version": "2.43.1",
"resolved": "http://npmprivate.quantgroups.com/rollup/-/rollup-2.43.1.tgz",
"integrity": "sha512-kvRE6VJbiv4d8m2nGeccc3qRpzOMghAhu2KeITjyZVCjneIFLPQ3zm2Wmqnl0LcUg3FvDaV0MfKnG4NCMbiSfw==",
"requires": {
"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