From c23aa3543c9313dc039f1f39c86f6cf54074341a Mon Sep 17 00:00:00 2001 From: tk Date: Tue, 23 Jul 2024 20:40:42 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=B1=BB=20=20=E5=9E=8B=E3=80=91?= =?UTF-8?q?=EF=BC=9Afactor=20=E9=A3=9E=E6=9C=BA=E6=8E=A7=E5=88=B6=E6=8E=A7?= =?UTF-8?q?=E4=BB=B6=20=E8=B0=83=E6=95=B4=20=E3=80=90=E5=8E=9F=20=20?= =?UTF-8?q?=E5=9B=A0=E3=80=91=EF=BC=9A=E8=87=AA=E9=80=82=E5=BA=94=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E7=AB=AF=20=E5=A4=A7=E5=B0=8F=E5=B1=8F=E5=B9=95?= =?UTF-8?q?=E5=B0=B1=20=E6=A8=AA=E7=AB=96=E5=B1=8F=20=E3=80=90=E8=BF=87=20?= =?UTF-8?q?=20=E7=A8=8B=E3=80=91=EF=BC=9A=E8=B0=83=E5=88=B0=E4=B8=8B?= =?UTF-8?q?=E6=96=B9=20=E8=87=AA=E9=80=82=E5=BA=94=20=E3=80=90=E5=BD=B1=20?= =?UTF-8?q?=20=E5=93=8D=E3=80=91=EF=BC=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ControllerTabs copy.vue | 897 ++++++++++++++++++ src/components/ControllerTabs.vue | 249 +++-- .../layout/components/main/planes/index.vue | 14 +- 3 files changed, 1017 insertions(+), 143 deletions(-) create mode 100644 src/components/ControllerTabs copy.vue diff --git a/src/components/ControllerTabs copy.vue b/src/components/ControllerTabs copy.vue new file mode 100644 index 0000000..0b36aa8 --- /dev/null +++ b/src/components/ControllerTabs copy.vue @@ -0,0 +1,897 @@ + + + + + diff --git a/src/components/ControllerTabs.vue b/src/components/ControllerTabs.vue index ad1a4e9..353918b 100644 --- a/src/components/ControllerTabs.vue +++ b/src/components/ControllerTabs.vue @@ -1,5 +1,5 @@ - -
- - -
{{ item.title }}
- - -
+ +
+ +
-
+
-
+
送餐任务
@@ -117,140 +111,148 @@
- +
- +
- +
+
+ +
+
+ +
{{ item.title }}
+
@@ -393,13 +395,13 @@ export default { if (this.tabIsOpen) { if (index !== this.activeIndex) { this.tabIsOpen = false - this.$emit('mapXOffset', -200) + this.$emit('mapXOffset', 0, -200) } else { this.speakText(voice) } } else { this.tabIsOpen = true - this.$emit('mapXOffset', 200) + this.$emit('mapXOffset', 0, 200) this.speakText(voice) } }, @@ -782,114 +784,91 @@ export default { font-weight: bold; } -.tab-container { - height: 365px; - width: 80px; - display: flex; - flex-direction: column; - align-items: flex-end; - position: fixed; - right: 15px; - top: 50%; - transform: translateY(-50%); - z-index: 1000; +.mainBox { + position: absolute; } -.butIconGroup { - color: $maintext-color; - background-color: rgba(255, 255, 255, 0.5); - border-radius: 15px; - padding: 5px; - width: 80px; - height: 80px; - text-align: center; - margin-bottom: 20px; - border: none; - box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2); -} - -.butIconGroupBG { - color: $graylight-color; - background-color: $brand-color; -} - -.butIconGroup:last-of-type { - margin-bottom: 0px; -} - -.slider-container { - display: flex; - align-items: center; - /* 水平垂直居中 */ -} - -.content { - color: $maintext-color; - border-radius: 15px; +.tabContainer { + width: 100%; height: 100%; - position: fixed; - right: -400px; - top: 50%; - transform: translateY(-50%); - width: 350px; - background-color: rgba(255, 255, 255, 0.8); - padding: 20px; - box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2); - transition: right 0.3s ease; } -.content.active { - right: 95px; +.tabContent { + z-index: 90; + position: relative; + width: 100%; + border-radius: 10px; + max-width: 470px; + background-color: rgba(255, 255, 255, 0.8); + box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2); + top: -50px; + opacity: 0; + transition: top 0.5s ease, opacity 1s ease; +} + +.tabContent.active { + top: -10px; + opacity: 1; +} + +.tabContentBox { + padding: 20px; } .contentTit i { vertical-align: middle; } +.butIconBox { + flex-wrap: wrap; + /* 允许换行 */ + justify-content: flex-start; + /* 主轴对齐方式 */ + align-content: space-around; + /* 多行在侧轴上的对齐方式 */ +} + .butIcon { border-radius: 10px; - padding: 5px; - width: 66px; - height: 66px; text-align: center; border: none; - float: left; - margin: 0px !important; - margin-bottom: 15px !important; - margin-right: 15px !important; + margin-left: 0px !important; } -.butIconBox .butIcon:nth-child(4n) { - margin-right: 0 !important; +.taButGroup { + position: relative; + width: 100%; + max-width: 470px; + height: 105px; + cursor: pointer; + z-index: 90; } -/* 手机端样式 */ -@media screen and (max-height: 500px) { +@media (max-width: 480px) { + .taButGroup { + height: calc((100vw - 50px)/4); + } + .tab-container { - height: 300px; - width: 50px; + width: 100vw; } +} - .butIconGroup { - margin-bottom: 12px; - } +.taBut { + color: $maintext-color; + background-color: rgba(255, 255, 255, 0.5); + border-radius: 10px; + padding: 5px; + text-align: center; + box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2); +} - .el-button { - font-size: 14px !important; - } +.taButBG { + color: $graylight-color; + background-color: $brand-color; +} - .contentTit { - font-size: 14px !important; - margin-bottom: 5px !important; - } - - .contentTit i { - font-size: 18px !important; - } - - .butIcon { - height: 56px; - margin-bottom: 10px !important; - } +.gap10 { + gap: 10px; } diff --git a/src/views/layout/components/main/planes/index.vue b/src/views/layout/components/main/planes/index.vue index bee277a..9779d57 100644 --- a/src/views/layout/components/main/planes/index.vue +++ b/src/views/layout/components/main/planes/index.vue @@ -3,8 +3,7 @@ @@ -13,8 +12,7 @@