【类 型】:fix 1分类模块 手机分辨率自适应 2表单手机分辨率自适应
【原 因】: 【过 程】: 【影 响】:
This commit is contained in:
parent
9a8b55b42f
commit
3493634953
@ -2,6 +2,7 @@ const state = {
|
|||||||
mqttState: false, // mqtt连接状态
|
mqttState: false, // mqtt连接状态
|
||||||
isCollapse: localStorage.getItem('isCollapse') ? !!+localStorage.getItem('isCollapse') : true, // 侧边导航栏 显隐
|
isCollapse: localStorage.getItem('isCollapse') ? !!+localStorage.getItem('isCollapse') : true, // 侧边导航栏 显隐
|
||||||
isMobile: null, // 是否是pc端 true电脑端 false为移动端
|
isMobile: null, // 是否是pc端 true电脑端 false为移动端
|
||||||
|
isWideScreen: window.innerWidth < 480, // 屏幕宽度是否小于480
|
||||||
defaultLngLat: null, // 地图默认经纬度
|
defaultLngLat: null, // 地图默认经纬度
|
||||||
defaultZoom: null, // 地图默认缩放
|
defaultZoom: null, // 地图默认缩放
|
||||||
orderSerch: null// 订单列表页搜索条件
|
orderSerch: null// 订单列表页搜索条件
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<el-row class="m-t-0" :gutter="10">
|
<el-row class="m-t-0" :gutter="10">
|
||||||
<!-- 分类树窗口 -->
|
<!-- 分类树窗口 -->
|
||||||
<el-col :span="10">
|
<el-col :span="10" :xs="24" class="m-b-10">
|
||||||
<el-container>
|
<el-container>
|
||||||
<el-header height="42px" class="l-h-42 p-l-10 p-r-10 border border-b-n">
|
<el-header height="42px" class="l-h-42 p-l-10 p-r-10 border border-b-n">
|
||||||
<div class="l">
|
<div class="l">
|
||||||
@ -43,7 +43,7 @@
|
|||||||
</el-container>
|
</el-container>
|
||||||
</el-col>
|
</el-col>
|
||||||
<!-- 分类操作窗口 -->
|
<!-- 分类操作窗口 -->
|
||||||
<el-col v-if="winIsShow" :span="14">
|
<el-col v-if="winIsShow" :span="14" :xs="24" class="m-b-20">
|
||||||
<el-container>
|
<el-container>
|
||||||
<el-header height="42px" class="l-h-42 p-l-10 p-r-10 border border-b-n">
|
<el-header height="42px" class="l-h-42 p-l-10 p-r-10 border border-b-n">
|
||||||
<div class="l">
|
<div class="l">
|
||||||
@ -57,7 +57,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-main class="border p-20">
|
<el-main class="border p-20">
|
||||||
<el-form ref="form" :model="form" label-width="120px">
|
<el-form ref="form" :model="form" label-width="120px" :label-position="this.$store.state.app.isWideScreen?'top':'right'">
|
||||||
<el-form-item label="分类名称">
|
<el-form-item label="分类名称">
|
||||||
<el-input v-model="form.name" placeholder="分类的名称" />
|
<el-input v-model="form.name" placeholder="分类的名称" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="h-100">
|
<div class="h-100">
|
||||||
<map-box ref="mapbox" :enableFollow="true" :enblueScale="!widthLt480">
|
<map-box ref="mapbox" :enableFollow="true" :enblueScale="!$store.state.app.isWideScreen">
|
||||||
<template #content>
|
<template #content>
|
||||||
<BatteryStatus :plane="plane" />
|
<BatteryStatus :plane="plane" />
|
||||||
<PlaneStatus :plane="plane" />
|
<PlaneStatus :plane="plane" />
|
||||||
@ -54,12 +54,6 @@ export default {
|
|||||||
*/
|
*/
|
||||||
isCollapse () {
|
isCollapse () {
|
||||||
return this.$store.state.app.isCollapse
|
return this.$store.state.app.isCollapse
|
||||||
},
|
|
||||||
/**
|
|
||||||
* @description: 屏幕宽度是否小于480
|
|
||||||
*/
|
|
||||||
widthLt480 () {
|
|
||||||
return window.innerWidth < 480
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -104,7 +104,7 @@ export default {
|
|||||||
*/
|
*/
|
||||||
lt480Collapse () {
|
lt480Collapse () {
|
||||||
// 判断屏幕宽度是否小于 480 像素
|
// 判断屏幕宽度是否小于 480 像素
|
||||||
if (window.innerWidth < 480) {
|
if (this.$store.state.app.isWideScreen) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.$store.commit('app/setCollapse')
|
this.$store.commit('app/setCollapse')
|
||||||
}, 10)
|
}, 10)
|
||||||
|
Loading…
Reference in New Issue
Block a user