提交 b191c845 authored 作者: wangjiahao's avatar wangjiahao

refactor: 移动端布局适配

上级 73391ba2
import request from '@/utils/request' import request from '@/utils/request'
export function saveEnshrine(panelGroupId) { export function saveEnshrine(panelGroupId, loading = true) {
return request({ return request({
url: '/api/store/' + panelGroupId, url: '/api/store/' + panelGroupId,
method: 'post', method: 'post',
loading: true loading: loading
}) })
} }
export function deleteEnshrine(id) { export function deleteEnshrine(id, loading = true) {
return request({ return request({
url: '/api/store/remove/' + id, url: '/api/store/remove/' + id,
method: 'post', method: 'post',
loading: true loading: loading
}) })
} }
export function enshrineList(data) { export function enshrineList(data, loading = true) {
return request({ return request({
url: '/api/store/list', url: '/api/store/list',
method: 'post', method: 'post',
loading: true, loading: loading,
data data
}) })
} }
......
...@@ -207,6 +207,7 @@ export default { ...@@ -207,6 +207,7 @@ export default {
console.log('navigator.userAgent:' + navigator.userAgent) console.log('navigator.userAgent:' + navigator.userAgent)
const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
this.terminal = flag ? 'mobile' : 'pc' this.terminal = flag ? 'mobile' : 'pc'
// this.terminal = 'mobile'
}, },
canvasStyleDataInit() { canvasStyleDataInit() {
// 数据刷新计时器 // 数据刷新计时器
......
...@@ -80,8 +80,8 @@ export default { ...@@ -80,8 +80,8 @@ export default {
.bg { .bg {
width: 100%; width: 100%;
height: 100vh!important; height: 100vh!important;
min-width: 800px; min-width: 200px;
min-height: 600px; min-height: 300px;
background-color: #f7f8fa; background-color: #f7f8fa;
} }
</style> </style>
......
...@@ -122,12 +122,24 @@ ...@@ -122,12 +122,24 @@
@scroll="canvasScroll" @scroll="canvasScroll"
> >
<el-row class="this_mobile_canvas_top" /> <el-row class="this_mobile_canvas_top" />
<el-row class="this_mobile_canvas_inner_top">
{{ panelInfo.name }}
</el-row>
<el-row <el-row
id="canvasInfoMobile" id="canvasInfoMobile"
class="this_mobile_canvas_main" class="this_mobile_canvas_main"
:style="mobileCanvasStyle" :style="mobileCanvasStyle"
> >
<Editor ref="editorMobile" :matrix-count="mobileMatrixCount" :out-style="outStyle" :scroll-top="scrollTop" /> <Editor v-if="mobileEditorShow" ref="editorMobile" :matrix-count="mobileMatrixCount" :out-style="outStyle" :scroll-top="scrollTop" />
</el-row>
<el-row class="this_mobile_canvas_inner_bottom">
<el-col :span="12">
<i v-if="!hasStar" class="el-icon-star-off" size="mini" @click="star" />
<i v-if="hasStar" class="el-icon-star-on" style="color: #0a7be0;font-size: 18px" size="mini" @click="unstar" />
</el-col>
<el-col :span="12" style="float: right">
<i class="el-icon-refresh-right" size="mini" @click="mobileRefresh" />
</el-col>
</el-row> </el-row>
<el-row class="this_mobile_canvas_bottom" /> <el-row class="this_mobile_canvas_bottom" />
</div> </div>
...@@ -233,6 +245,7 @@ import generateID from '@/components/canvas/utils/generateID' ...@@ -233,6 +245,7 @@ import generateID from '@/components/canvas/utils/generateID'
import TextAttr from '@/components/canvas/components/TextAttr' import TextAttr from '@/components/canvas/components/TextAttr'
import { queryPanelJumpInfo } from '@/api/panel/linkJump' import { queryPanelJumpInfo } from '@/api/panel/linkJump'
import ComponentWait from '@/views/panel/edit/ComponentWait' import ComponentWait from '@/views/panel/edit/ComponentWait'
import { deleteEnshrine, saveEnshrine, starStatus } from '@/api/panel/enshrine'
export default { export default {
name: 'PanelEdit', name: 'PanelEdit',
...@@ -256,6 +269,8 @@ export default { ...@@ -256,6 +269,8 @@ export default {
}, },
data() { data() {
return { return {
mobileEditorShow: true,
hasStar: false,
drawerSize: '300px', drawerSize: '300px',
visible: false, visible: false,
show: false, show: false,
...@@ -453,6 +468,7 @@ export default { ...@@ -453,6 +468,7 @@ export default {
}, },
methods: { methods: {
init(panelId) { init(panelId) {
this.initHasStar()
// 如果临时画布有数据 则使用临时画布数据(视图编辑的时候 会保存临时画布数据) // 如果临时画布有数据 则使用临时画布数据(视图编辑的时候 会保存临时画布数据)
const componentDataTemp = this.$store.state.panel.componentDataTemp const componentDataTemp = this.$store.state.panel.componentDataTemp
const canvasStyleDataTemp = this.$store.state.panel.canvasStyleDataTemp const canvasStyleDataTemp = this.$store.state.panel.canvasStyleDataTemp
...@@ -512,6 +528,27 @@ export default { ...@@ -512,6 +528,27 @@ export default {
}) })
} }
}, },
star() {
this.panelInfo && saveEnshrine(this.panelInfo.id, false).then(res => {
this.hasStar = true
})
},
unstar() {
this.panelInfo && deleteEnshrine(this.panelInfo.id, false).then(res => {
this.hasStar = false
})
},
initHasStar() {
starStatus(this.panelInfo.id, false).then(res => {
this.hasStar = res.data
})
},
mobileRefresh() {
this.mobileEditorShow = false
this.$nextTick(() => {
this.mobileEditorShow = true
})
},
save() { save() {
}, },
...@@ -964,11 +1001,30 @@ export default { ...@@ -964,11 +1001,30 @@ export default {
background-size:100% 100% !important; background-size:100% 100% !important;
} }
.this_mobile_canvas_inner_top{
vertical-align: middle;
text-align: center;
background-color: #f7f8fa;
height: 30px;
line-height: 30px;
font-size: 14px;
width: 100%;
}
.this_mobile_canvas_top{ .this_mobile_canvas_top{
height: 30px; height: 30px;
width: 100%; width: 100%;
} }
.this_mobile_canvas_inner_bottom{
background-color: #f7f8fa;
line-height: 30px;
vertical-align: middle;
color: gray;
height: 30px;
width: 100%;
}
.this_mobile_canvas_bottom{ .this_mobile_canvas_bottom{
height: 30px; height: 30px;
width: 100%; width: 100%;
...@@ -977,7 +1033,7 @@ export default { ...@@ -977,7 +1033,7 @@ export default {
.this_mobile_canvas_main{ .this_mobile_canvas_main{
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
height: calc(100% - 60px);; height: calc(100% - 120px);;
background-color: #d7d9e3; background-color: #d7d9e3;
background-size:100% 100% !important; background-size:100% 100% !important;
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论