Skip to content

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

feature: 修改bug

parent da65dad3
Show whitespace changes
Inline Side-by-side
Showing with 94 additions and 71 deletions
app/web/asset/css/reset.css
View file @ e7edd6c9
...@@ -145,3 +145,34 @@ li { ...@@ -145,3 +145,34 @@ li {
*:after { *:after {
box-sizing: border-box; box-sizing: border-box;
} }
/* 自定义 */
html {
font-size: 10vw !important;
}
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: 768Px) {
html {
font-size: 37.5Px !important;
}
body {
max-width: 375Px;
max-height: 667Px;
margin: 0 auto !important;
}
}
app/web/component/layout/activity/index.vue
View file @ e7edd6c9
...@@ -17,19 +17,4 @@ ...@@ -17,19 +17,4 @@
</html> </html>
<div v-else-if="!isNode" id="app"><slot></slot></div> <div v-else-if="!isNode" id="app"><slot></slot></div>
</template> </template>
<style>
html {
font-size: 10vw !important;
}
@media screen and (min-width: 768Px) {
html {
font-size: 37.5Px !important;
}
body {
max-width: 375Px;
max-height: 667Px;
margin: 0 auto !important;
}
}
</style>
<script lang="ts" src="./index.ts"></script> <script lang="ts" src="./index.ts"></script>
\ No newline at end of file
app/web/page/activity/view/activity/index.ts
View file @ e7edd6c9
...@@ -11,6 +11,7 @@ export default class Activity extends Mixins(TransformStyleMixin) { ...@@ -11,6 +11,7 @@ export default class Activity extends Mixins(TransformStyleMixin) {
@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;
@Mutation('SET_PAGE_ELEMENTS') setPageElement;
@Provide('editor'); @Provide('editor');
...@@ -36,6 +37,8 @@ export default class Activity extends Mixins(TransformStyleMixin) { ...@@ -36,6 +37,8 @@ export default class Activity extends Mixins(TransformStyleMixin) {
document.body.removeChild(hackIframe); document.body.removeChild(hackIframe);
}, 300); }, 300);
} }
// 适配
this.modifyPoints();
} }
} }
...@@ -53,14 +56,19 @@ export default class Activity extends Mixins(TransformStyleMixin) { ...@@ -53,14 +56,19 @@ export default class Activity extends Mixins(TransformStyleMixin) {
fetchApi(options) { fetchApi(options) {
const { store, route } = options; const { store, route } = options;
const { pageId } = route.params; const { pageId } = route.params;
// console.log('fetchApi', route);
return store.dispatch('getPageDate', { pageId }); return store.dispatch('getPageDate', { pageId });
} }
createStyle({h}) { modifyPoints() {
return EASY_ENV_IS_NODE ? { const elements = this.pageData?.elements?.map(v => {
height: `${h * this.rowHeight}px`, const point = {
} : {}; ...v.point,
h: v.point.h * this.rowHeight * document.documentElement.clientWidth / 375,
w: document.documentElement.clientWidth
};
return { ...v, point };
});
this.setPageElement(elements);
} }
modfiTabsStyle() { modfiTabsStyle() {
...@@ -74,7 +82,7 @@ export default class Activity extends Mixins(TransformStyleMixin) { ...@@ -74,7 +82,7 @@ export default class Activity extends Mixins(TransformStyleMixin) {
gridItemEle.style.transform = 'none'; gridItemEle.style.transform = 'none';
gridItemEle.style.top = `${transformY}px`; gridItemEle.style.top = `${transformY}px`;
// 处理backgroundColor // 处理backgroundColor
const backgroundColor = getStyle(tabsEle, 'backgroundColor'); const backgroundColor = getStyle(gridItemEle, 'backgroundColor');
const crTabs = tabsEle.childNodes[0]; const crTabs = tabsEle.childNodes[0];
crTabs.style.backgroundColor = backgroundColor; crTabs.style.backgroundColor = backgroundColor;
const stickyEle = crTabs?.childNodes[0]; const stickyEle = crTabs?.childNodes[0];
......
app/web/page/activity/view/activity/index.vue
View file @ e7edd6c9
...@@ -13,14 +13,14 @@ ...@@ -13,14 +13,14 @@
:vertical-compact="true" :vertical-compact="true"
:use-css-transforms="true" :use-css-transforms="true"
> >
<grid-item :style="createStyle(item.point)" v-for="(item, index) in pageData.elements" <grid-item :style="transformStyle(item.commonStyle)" v-for="(item, index) in pageData.elements"
:x="item.point.x" :x="item.point.x"
:y="item.point.y" :y="item.point.y"
:w="item.point.w" :w="item.point.w"
:h="item.point.h" :h="item.point.h"
:i="item.point.i" :i="item.point.i"
:key="item.point.i"> :key="item.point.i">
<component :style="transformStyle(item.commonStyle)" :data-index="index" :containerIndex="index" :childItem="item" :is="item.name" :key="item.id" v-bind="item.props"></component> <component :data-index="index" :containerIndex="index" :childItem="item" :is="item.name" :key="item.id" 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" />
...@@ -28,22 +28,14 @@ ...@@ -28,22 +28,14 @@
</template> </template>
<script lang="ts" src="./index.ts"></script> <script lang="ts" src="./index.ts"></script>
<style lang="less" scoped> <style lang="less" scoped>
html,
body,
#app {
height: 100%;
/deep/ .cr-popup {
.cr-notify {
font-size: 14px;
}
}
}
.activity { .activity {
width: 100%; width: 100%;
height: 100%; height: 100%;
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-y: scroll;
/deep/ .vue-grid-layout { /deep/ .vue-grid-layout {
min-height: 667px; min-height: 667px;
// transform: translateY(-10px); // transform: translateY(-10px);
......
app/web/page/mixins/transformStyle.mixin.ts
View file @ e7edd6c9
...@@ -5,7 +5,10 @@ import { transformStyle } from '@/service/utils.service'; ...@@ -5,7 +5,10 @@ import { transformStyle } from '@/service/utils.service';
export default class TransformStyleMixin extends Vue { export default class TransformStyleMixin extends Vue {
transformStyle(styleObj, element) { transformStyle(styleObj, element) {
// console.log('transformStyle', styleObj, element); // console.log('transformStyle', styleObj, element);
const style = {}; const style = {
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover'
};
if (!styleObj) { return style; } if (!styleObj) { return style; }
for (const key of Object.keys(styleObj)) { for (const key of Object.keys(styleObj)) {
if ( typeof styleObj[key] === 'number') { if ( typeof styleObj[key] === 'number') {
...@@ -14,8 +17,7 @@ export default class TransformStyleMixin extends Vue { ...@@ -14,8 +17,7 @@ export default class TransformStyleMixin extends Vue {
style[key] = styleObj[key]?.includes('px') ? `${(+(styleObj[key].slice(0, -2)) / 37.5).toFixed(2)}rem` : styleObj[key]; style[key] = styleObj[key]?.includes('px') ? `${(+(styleObj[key].slice(0, -2)) / 37.5).toFixed(2)}rem` : styleObj[key];
} }
if (key === 'backgroundImage' && style.backgroundImage) { if (key === 'backgroundImage' && style.backgroundImage) {
// style.backgroundImage = `url(${style.backgroundImage})`; style.backgroundImage = `url(${style.backgroundImage})`;
style.background = `url(${style.backgroundImage}) no-repeat 0 0 / cover`;
} }
} }
return style; return style;
......
app/web/page/store/modules/activity/index.ts
View file @ e7edd6c9
import api from '@/api/editor.api'; import api from '@/api/editor.api';
import { Module, GetterTree, ActionTree, MutationTree } from 'vuex'; import { Module, GetterTree, ActionTree, MutationTree } from 'vuex';
import Vue from 'vue'; import Vue from 'vue';
import { UPDATE_PAGE_INFO, SET_PAGE_INFO } from './type'; import { UPDATE_PAGE_INFO, SET_PAGE_INFO, SET_PAGE_DATA, SET_PAGE_ELEMENTS} from './type';
import RootState from '../../state'; import RootState from '../../state';
import EditorState, { PageInfo, defaultState, Page, PageElement } from './state'; import EditorState, { PageInfo, defaultState, Page, PageElement } from './state';
...@@ -37,7 +37,13 @@ export default class EditorModule implements Module<EditorState, RootState> { ...@@ -37,7 +37,13 @@ export default class EditorModule implements Module<EditorState, RootState> {
} else { } else {
page.splice(containerIndex, 1, data); page.splice(containerIndex, 1, data);
} }
} },
[SET_PAGE_DATA](state, data) {
state.pageInfo.page = data;
},
[SET_PAGE_ELEMENTS](state, data) {
if (data) { (state.pageInfo.page as Page).elements = data; }
},
}; };
constructor(initState: EditorState = JSON.parse(JSON.stringify(defaultState))) { constructor(initState: EditorState = JSON.parse(JSON.stringify(defaultState))) {
......
app/web/page/store/modules/activity/type.ts
View file @ e7edd6c9
...@@ -12,3 +12,4 @@ export const SET_PAGE_DATA = 'SET_PAGE_DATA'; ...@@ -12,3 +12,4 @@ export const SET_PAGE_DATA = 'SET_PAGE_DATA';
export const UPDATE_COMMON_STYLE = 'UPDATE_COMMON_STYLE'; export const UPDATE_COMMON_STYLE = 'UPDATE_COMMON_STYLE';
export const UPDATE_PAGE_STYLE = 'UPDATE_PAGE_STYLE'; export const UPDATE_PAGE_STYLE = 'UPDATE_PAGE_STYLE';
export const UPDATE_PAGE_PROPS = 'UPDATE_PAGE_PROPS'; export const UPDATE_PAGE_PROPS = 'UPDATE_PAGE_PROPS';
export const SET_PAGE_ELEMENTS = 'SET_PAGE_ELEMENTS';
\ No newline at end of file
app/web/view/layout.html
View file @ e7edd6c9
...@@ -5,15 +5,10 @@ ...@@ -5,15 +5,10 @@
<meta name="keywords"> <meta name="keywords">
<meta name="description"> <meta name="description">
<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="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/reset.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">
<style>
html, body {
line-height: 1.15 !important;
}
</style>
</head> </head>
<body> <body>
<div id="app"><!--vue-ssr-outlet--></div> <div id="app"><!--vue-ssr-outlet--></div>
......
config/config.default.ts
View file @ e7edd6c9
...@@ -27,7 +27,8 @@ export default (appInfo: EggAppConfig) => { ...@@ -27,7 +27,8 @@ export default (appInfo: EggAppConfig) => {
config.static = { config.static = {
prefix: '/public/', prefix: '/public/',
dir: path.join(appInfo.baseDir, 'public') dir: path.join(appInfo.baseDir, 'public'),
gzip: true
}; };
config.keys = '123456'; config.keys = '123456';
......
package-lock.json
View file @ e7edd6c9
...@@ -1600,26 +1600,38 @@ ...@@ -1600,26 +1600,38 @@
} }
}, },
"@qg/citrus-ui": { "@qg/citrus-ui": {
"version": "0.0.29", "version": "0.0.34",
"resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.0.29.tgz", "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.0.34.tgz",
"integrity": "sha512-8Ca1e3/K+ts/kjG5+1EvNF3Cvkg/N6P1CtVTRN7SVRbM+5EYrIDaoC2qbt6K3ipSZ9EAb+t4qtKYdrT93NMASQ==", "integrity": "sha512-yj9jkif1cbWgs4fFZCUNrpqoRfQ2xiRQhW3C95MUKcVmOAxclTVYSalSuSjA9mCwubP3o6vTU6Y8av9X9mNSvg==",
"requires": { "requires": {
"@better-scroll/core": "^2.1.1", "@better-scroll/core": "^2.1.1",
"@qg/cherry-ui": "^2.18.72", "@qg/cherry-ui": "^2.20.3",
"@qg/js-bridge": "^1.1.9", "@qg/js-bridge": "^1.1.9",
"axios": "^0.21.1", "axios": "^0.21.1",
"js-cookie": "^2.2.1", "js-cookie": "^2.2.1",
"sa-sdk-javascript": "^1.16.1", "sa-sdk-javascript": "^1.16.1",
"swiper": "^4.5.1", "swiper": "^4.5.1",
"vuex": "^3.6.0" "vuex": "^3.6.0"
},
"dependencies": {
"@qg/cherry-ui": {
"version": "2.20.4",
"resolved": "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.20.4.tgz",
"integrity": "sha512-3xfenI5Umaae3R3r26J9c9TzayNrU+JJvBNBROKc2Lk+gEepFVbZCTD02JKhwsfOjDi/5KqkKX8vJrJWu4OHpw==",
"requires": {
"@popperjs/core": "^2.5.4",
"vue-lazyload": "^1.3.3",
"vue-video-player": "^5.0.2"
}
}
} }
}, },
"@qg/js-bridge": { "@qg/js-bridge": {
"version": "1.1.10", "version": "1.1.11",
"resolved": "http://npmprivate.quantgroups.com/@qg%2fjs-bridge/-/js-bridge-1.1.10.tgz", "resolved": "http://npmprivate.quantgroups.com/@qg%2fjs-bridge/-/js-bridge-1.1.11.tgz",
"integrity": "sha512-g0Dd7pGuSvSLjsAoAZBnxmNsO6+pbh3pASC4F05CfN1qCJ13n1OpbOx2LPDRXuZkWAIe3ZaLwHOHiODEdv9exA==", "integrity": "sha512-WVvkSUg2zcc2nblzYGxM/bVo+VDcANy/dw7vcbxLoW1Jega9Jm2d5FGSb7uS6m4746waghUUqcAWNJZ0Q5yeqA==",
"requires": { "requires": {
"rollup": "^2.40.0" "rollup": "^2.41.3"
} }
}, },
"@types/accepts": { "@types/accepts": {
...@@ -20364,9 +20376,9 @@ ...@@ -20364,9 +20376,9 @@
"integrity": "sha1-8z/pz7Urv9UgqhgyO8ZdsRCht2w=" "integrity": "sha1-8z/pz7Urv9UgqhgyO8ZdsRCht2w="
}, },
"rollup": { "rollup": {
"version": "2.41.2", "version": "2.41.5",
"resolved": "http://npmprivate.quantgroups.com/rollup/-/rollup-2.41.2.tgz", "resolved": "http://npmprivate.quantgroups.com/rollup/-/rollup-2.41.5.tgz",
"integrity": "sha512-6u8fJJXJx6fmvKrAC9DHYZgONvSkz8S9b/VFBjoQ6dkKdHyPpPbpqiNl2Bao9XBzDHpq672X6sGZ9G1ZBqAHMg==", "integrity": "sha512-uG+WNNxhOYyeuO7oRt98GA2CNVRgQ67zca75UQVMPzMrLG9FUKzTCgvYVWhtB18TNbV7Uqxo97h+wErAnpFNJw==",
"requires": { "requires": {
"fsevents": "~2.3.1" "fsevents": "~2.3.1"
} }
......
webpack.config.js
View file @ e7edd6c9
...@@ -83,7 +83,7 @@ module.exports = { ...@@ -83,7 +83,7 @@ module.exports = {
{ {
default: false, default: false,
vue: { vue: {
name: 'chunk-vue', // 分离组件库 name: 'vue', // 分离组件库
priority: 23, priority: 23,
test: /[\\/]node_modules[\\/]vue[\\/]/, test: /[\\/]node_modules[\\/]vue[\\/]/,
enforce: true enforce: true
...@@ -124,29 +124,19 @@ module.exports = { ...@@ -124,29 +124,19 @@ module.exports = {
enforce: true enforce: true
}, },
cherryUI: { cherryUI: {
name: 'chunk-cherry-uI', // 分离组件库 name: 'cherry-uI', // 分离组件库
priority: 18, priority: 18,
chunks: 'all', chunks: 'all',
test: /[\\/]node_modules[\\/]@qg[\\/]cherry-ui[\\/]/, test: /[\\/]node_modules[\\/]@qg[\\/]cherry-ui[\\/]/,
enforce: true enforce: true
}, },
citrusUi: { citrusUi: {
name: 'chunk-citrus-ui', // 分离组件库 name: 'citrus-ui', // 分离组件库
priority: 17, priority: 17,
chunks: 'all', chunks: 'all',
test: /[\\/]node_modules[\\/]@qg[\\/]citrus-ui[\\/]/, test: /[\\/]node_modules[\\/]@qg[\\/]citrus-ui[\\/]/,
enforce: true enforce: true
}, },
common: {
name:'chunk-common',
minChunks: 3,
priority: 3,
reuseExistingChunk: true,
chunks (chunk) {
return ['login','editor','activity'].includes(chunk.name);
},
enforce: true
},
vendors: vendors:
{ {
name: 'common', name: 'common',
......
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