【类 型】：factor 飞机控制模块 ui
【原 因】： 【过 程】：1.操作控件放在整下方2.适配手机竖屏 自适应 【影 响】：
This commit is contained in:
parent
9db78c0f44
commit
dc7d998da7
95
src/components/As.vue
Normal file
95
src/components/As.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="flex column mr mac" style="height: 100%;" id="mainBox">
|
||||
<div class="content" :class="isContainerVisible ? 'slide-in' : ''">
|
||||
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
|
||||
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
|
||||
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
|
||||
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
|
||||
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
|
||||
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
|
||||
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
|
||||
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
|
||||
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
|
||||
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
|
||||
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
|
||||
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
|
||||
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
|
||||
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
|
||||
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
|
||||
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
|
||||
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
|
||||
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
|
||||
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
|
||||
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
|
||||
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
|
||||
</div>
|
||||
<div class="fb flex gap10 m-b-10" id="bar">
|
||||
<div class="flex1 item" style="height: 100%; background-color: aqua;" @click="showContainer">1</div>
|
||||
<div class="flex1 item" style="height: 100%; background-color: brown;" @click="showContainer">2</div>
|
||||
<div class="flex1 item" style="height: 100%; background-color: blueviolet;" @click="showContainer">3</div>
|
||||
<div class="flex1 item" style="height: 100%; background-color: antiquewhite;" @click="showContainer">4</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'As',
|
||||
data () {
|
||||
return {
|
||||
isContainerVisible: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showContainer () {
|
||||
this.isContainerVisible = true
|
||||
console.log('hello')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/theme.scss";
|
||||
|
||||
#bar {
|
||||
z-index: 90;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
height: 100px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
#bar {
|
||||
height: calc(25vw - 20px);
|
||||
/* 调整后的高度 */
|
||||
}
|
||||
|
||||
#mainBox {
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
.gap10 {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.content {
|
||||
z-index: 90;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
background-color: aliceblue;
|
||||
padding: 0 10px;
|
||||
top: 1500px;
|
||||
opacity: 0;
|
||||
transition: top 0.5s ease, opacity 1s ease;
|
||||
}
|
||||
|
||||
.slide-in {
|
||||
top: -10px;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
@ -74,4 +74,15 @@ export default {
|
||||
line-height: 50px;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.app-breadcrumb {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* 当屏幕宽度小于等于480px时 */
|
||||
@media (max-width: 480px) {
|
||||
.app-breadcrumb {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 弹出框 -->
|
||||
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
|
||||
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="320px" top="30vh">
|
||||
<!-- 起飞设置弹出框 -->
|
||||
<template v-if="dialogItem == 'takeoffBox'">
|
||||
<el-slider class="w-100" v-model="takeoffValue" :show-tooltip="false" show-input :min="1" :max="100">
|
||||
@ -282,8 +282,7 @@ export default {
|
||||
tabIsOpen: false, // 判断tab 是否弹出
|
||||
questForm: { // 送餐任务表单
|
||||
id: ''
|
||||
},
|
||||
a: null // 当前飞机是否被锁定
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
||||
@ -154,7 +154,7 @@ export default {
|
||||
projection: 'globe'
|
||||
})
|
||||
// 地图控件
|
||||
this.map.addControl(new mapboxgl.ScaleControl(), 'bottom-right')
|
||||
this.map.addControl(new mapboxgl.ScaleControl(), 'top-right')
|
||||
this.map.addControl(new mapboxgl.NavigationControl(), 'bottom-left')
|
||||
},
|
||||
/**
|
||||
|
||||
@ -217,6 +217,23 @@ label {
|
||||
}
|
||||
}
|
||||
|
||||
/* 当屏幕宽度小于等于420px时 */
|
||||
@media (max-width: 420px) {
|
||||
.el-dialog {
|
||||
width: 90% !important; /* 根据需要调整宽度 */
|
||||
max-width: 360px !important; /* 根据需要设置最大宽度 */
|
||||
}
|
||||
|
||||
.el-message-box {
|
||||
width: 90% !important; /* 调整宽度以适应小屏幕 */
|
||||
max-width: 360px !important; /* 根据需要设置最大宽度 */
|
||||
}
|
||||
}
|
||||
/*隐藏声音api 的弹出框*/
|
||||
.rvNotification {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -85,6 +85,13 @@ export default {
|
||||
width: calc(100% - 60px);
|
||||
}
|
||||
|
||||
/* 竖屏模式样式 */
|
||||
@media (orientation: portrait) {
|
||||
.min {
|
||||
width: calc(100% - 0px);
|
||||
}
|
||||
}
|
||||
|
||||
.logDot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
||||
@ -32,7 +32,8 @@
|
||||
<el-button :type="pendingCount + processingCount + shippedCount + requestedCount !== 0 ? 'primary' : ''"
|
||||
@click="drawer = true" size="small" :icon="orderIcon" circle></el-button>
|
||||
</el-badge>
|
||||
<el-drawer :visible.sync="drawer" size="60%" :append-to-body="true" :modal-append-to-body="false">
|
||||
<el-drawer :visible.sync="drawer" :size="drawerSize" :append-to-body="true" :modal-append-to-body="false"
|
||||
:direction="drawerDirection">
|
||||
<template slot="title">
|
||||
<div>
|
||||
<i class="l f-s-18 iconfont icon-jinjidingdan m-r-5 l-h-18"></i>
|
||||
@ -110,6 +111,18 @@ export default {
|
||||
SelectionShopId
|
||||
},
|
||||
computed: {
|
||||
/**
|
||||
* @description: 任务抽屉根据分辨率自适应
|
||||
*/
|
||||
drawerDirection () {
|
||||
return window.innerWidth < 480 ? 'btt' : 'rtl'
|
||||
},
|
||||
/**
|
||||
* @description: 任务抽屉根据分辨率自适应
|
||||
*/
|
||||
drawerSize () {
|
||||
return window.innerWidth < 480 ? '90%' : '60%' // 根据需要设置不同的宽度
|
||||
},
|
||||
/**
|
||||
* @description: 侧边栏显隐
|
||||
*/
|
||||
@ -272,7 +285,7 @@ export default {
|
||||
@import "@/styles/theme.scss";
|
||||
|
||||
#menuTabB:hover {
|
||||
background-color: $border4-color;
|
||||
background-color: $white-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@ -2,8 +2,9 @@
|
||||
<div class="h-100">
|
||||
<map-box ref="mapbox" :key="mapBoxKey">
|
||||
<template #content>
|
||||
<PlaneStatus :plane="plane" />
|
||||
<ControllerTabs :plane="plane" @mapXOffset="mapXOffset" @makeRoute="makeRoute" @clearRoute="clearRoute" />
|
||||
<!-- <PlaneStatus :plane="plane" /> -->
|
||||
<As />
|
||||
<!-- <ControllerTabs :plane="plane" @mapXOffset="mapXOffset" @makeRoute="makeRoute" @clearRoute="clearRoute" /> -->
|
||||
</template>
|
||||
</map-box>
|
||||
</div>
|
||||
@ -12,8 +13,9 @@
|
||||
<script>
|
||||
import mqtt from '@/utils/mqtt'
|
||||
import MapBox from '@/components/MapBox'
|
||||
import ControllerTabs from '@/components/ControllerTabs'
|
||||
import PlaneStatus from '@/components/PlaneStatus'
|
||||
// import ControllerTabs from '@/components/ControllerTabs'
|
||||
import As from '@/components/As'
|
||||
// import PlaneStatus from '@/components/PlaneStatus'
|
||||
|
||||
export default {
|
||||
name: 'Planes',
|
||||
@ -26,8 +28,9 @@ export default {
|
||||
},
|
||||
components: {
|
||||
MapBox,
|
||||
ControllerTabs,
|
||||
PlaneStatus
|
||||
As
|
||||
// ControllerTabs,
|
||||
// PlaneStatus
|
||||
},
|
||||
computed: {
|
||||
plane () {
|
||||
|
||||
@ -156,6 +156,13 @@ export default {
|
||||
width: 60px !important;
|
||||
}
|
||||
|
||||
/* 竖屏模式样式 */
|
||||
@media (orientation: portrait) {
|
||||
.menuW {
|
||||
width: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menuS {
|
||||
width: 210px !important;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="login-container flex column mc">
|
||||
<div class="title-container fb l-h-32">
|
||||
<div class="title-container fb l-h-32 flex mac">
|
||||
<img src="@/assets/logo.png" class="m-r-15">
|
||||
<font class="f1 f-s-22">飞行魔方</font>
|
||||
<font class="f2 f-s-10 m-l-5" style="vertical-align :top">v.1.0.1</font>
|
||||
@ -129,7 +129,7 @@ h3 {
|
||||
|
||||
.login-form {
|
||||
position: relative;
|
||||
max-width: 85vw;
|
||||
max-width: 90vw;
|
||||
width: 500px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user