From 0c0fe21681227735fb5a16f2759d354a2e0d0de3 Mon Sep 17 00:00:00 2001
From: caill <815519168@qq.com>
Date: Thu, 15 Jun 2023 10:38:16 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/layout.styl          | 38 +++++++++++++++++
 src/main.js                         |  1 +
 src/pages/modules/homepage/one.vue  | 64 ++++++++++++++---------------
 src/pages/modules/homepage/two.vue  | 36 ++++++++++++++++
 src/pages/modules/takeshape/one.vue |  3 ++
 5 files changed, 108 insertions(+), 34 deletions(-)
 create mode 100644 src/assets/css/layout.styl

diff --git a/src/assets/css/layout.styl b/src/assets/css/layout.styl
new file mode 100644
index 0000000..18c0fd3
--- /dev/null
+++ b/src/assets/css/layout.styl
@@ -0,0 +1,38 @@
+@import 'mixin.styl'
+
+.tooltip_wrap
+  position fixed
+  bottom 10%
+  z-index 10
+  _wh(auto, 40px)
+  padding 5px 5px
+  background-color rgba(228,233,237,1)
+  _fj(row)
+  &:hover
+    opacity 1 !important
+.left_tooltip_wrap
+    right 0
+    border-top-left-radius 12px
+    border-bottom-left-radius 12px
+.right_tooltip_wrap
+    left 0
+    border-top-right-radius 12px
+    border-bottom-right-radius 12px
+.tooltip_arrow
+  _wh(40px, 100%)
+  _font(14px, 30px, #999,,)
+.tooltip_pages
+  height 100%
+  _fj(row)
+  transition width .3s ease
+  overflow hidden
+.tooltip_page
+  _wh(30px, 100%)
+  margin 0 5px
+  _font(14px, 30px, #999,,)
+  border 1px solid #999
+  border-radius 50%
+  &:hover
+    background-color #03fcfd
+    border-color #03fcfd
+    color #fff
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 1ac904f..0b4ab64 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,6 +5,7 @@ import router from './router'
 import store from './vuex/store'
 import '@css/reset.css'
 import '@css/iconfont.styl'
+import '@css/layout.styl'
 import '@js/rem.js'
 import filter from '@js/filter.js'
 import { Dialog, toast } from '@js/mUtils.js'
diff --git a/src/pages/modules/homepage/one.vue b/src/pages/modules/homepage/one.vue
index 2189bec..b440d48 100644
--- a/src/pages/modules/homepage/one.vue
+++ b/src/pages/modules/homepage/one.vue
@@ -568,15 +568,15 @@
               </div>
           </div>
         </div>
-        <div class="tooltip_wrap">
-          <div class="tooltip_arrow" @click="expandTooltip" v-text="expand ? '&gt;&gt;' : '&lt;&lt;'"></div>
+        <div class="tooltip_wrap left_tooltip_wrap" :style="expand ? 'opacity: 1' : 'opacity: 0.1'">
+          <div class="tooltip_arrow pointer" @click="expandTooltip" v-text="expand ? '&gt;&gt;' : '&lt;&lt;'"></div>
           <div class="tooltip_pages" :style="expand ? 'width: 240px' : 'width: 0'">
-            <div class="tooltip_page">1</div>
-            <div class="tooltip_page">2</div>
-            <div class="tooltip_page">3</div>
-            <div class="tooltip_page">4</div>
-            <div class="tooltip_page">5</div>
-            <div class="tooltip_page">6</div>
+            <div class="tooltip_page pointer" @click="toJumpPage(1)">1</div>
+            <div class="tooltip_page pointer" @click="toJumpPage(2)">2</div>
+            <div class="tooltip_page pointer" @click="toJumpPage(3)">3</div>
+            <div class="tooltip_page pointer" @click="toJumpPage(4)">4</div>
+            <div class="tooltip_page pointer" @click="toJumpPage(5)">5</div>
+            <div class="tooltip_page pointer" @click="toJumpPage(6)">6</div>
           </div>
         </div>
         <!-- <div class="style_block" style="left: calc(100% / 3);top:0;"></div>
@@ -1061,10 +1061,31 @@ export default {
       }
     },
     jumpTakeShape () {
-      this.$router.push('/takeshapeone')
+      // this.$router.push('/takeshapeone')
     },
     expandTooltip () {
       this.expand = !this.expand
+    },
+    toJumpPage (type) {
+      switch (type) {
+        case 1:
+          break
+        case 2:
+          this.$router.push('/hnlkone')
+          break
+        case 3:
+          this.$router.push('/takeshapeone')
+          break
+        case 4:
+          this.$router.push('/firedryone')
+          break
+        case 5:
+          this.$router.push('/sortpackone')
+          break
+        case 6:
+          this.$router.push('/pdone')
+          break
+      }
     }
   }
 }
@@ -1666,29 +1687,4 @@ export default {
   position absolute
   _wh(calc(100% / 3), calc(100% / 3))
   background red
-.tooltip_wrap
-  position fixed
-  bottom 10%
-  right 0
-  z-index 10
-  _wh(auto, 40px)
-  padding 5px 5px
-  background-color rgba(228,233,237,1)
-  // opacity .6
-  border-top-left-radius 12px
-  border-bottom-left-radius 12px
-  _fj(row)
-.tooltip_arrow
-  _wh(40px, 100%)
-  _font(14px, 30px, #999,,)
-.tooltip_pages
-  height 100%
-  _fj(row)
-  transition width .3s ease
-.tooltip_page
-  _wh(30px, 100%)
-  margin 0 5px
-  _font(14px, 30px, #999,,)
-  border 1px solid #999
-  border-radius 50%
 </style>
diff --git a/src/pages/modules/homepage/two.vue b/src/pages/modules/homepage/two.vue
index 1e1cf76..6243695 100644
--- a/src/pages/modules/homepage/two.vue
+++ b/src/pages/modules/homepage/two.vue
@@ -317,6 +317,17 @@
               </div>
           </div>
         </div>
+        <div class="tooltip_wrap right_tooltip_wrap" :style="expand ? 'opacity: 1' : 'opacity: 0.1'">
+          <div class="tooltip_pages" :style="expand ? 'width: 240px' : 'width: 0'">
+            <div class="tooltip_page pointer" @click="toJumpPage(1)">1</div>
+            <div class="tooltip_page pointer" @click="toJumpPage(2)">2</div>
+            <div class="tooltip_page pointer" @click="toJumpPage(3)">3</div>
+            <div class="tooltip_page pointer" @click="toJumpPage(4)">4</div>
+            <div class="tooltip_page pointer" @click="toJumpPage(5)">5</div>
+            <div class="tooltip_page pointer" @click="toJumpPage(6)">6</div>
+          </div>
+          <div class="tooltip_arrow pointer" @click="expandTooltip" v-text="expand ? '&lt;&lt;' : '&gt;&gt;'"></div>
+        </div>
         <!-- <div class="style_block" style="left: calc(100% / 3);top:0;"></div>
         <div class="style_block" style="background: green;left: calc(100% / 3);top:calc(100% / 3);"></div>
         <div class="style_block" style="left: calc(100% / 3);bottom: 0"></div>
@@ -337,6 +348,7 @@ export default {
     return {
       interTime: this.$store.getters.setTime,
       timer: null,
+      expand: false,
       myCharts1: '',
       myCharts2: '',
       DeviceConditionList: [],
@@ -649,6 +661,30 @@ export default {
           this.myCharts2.resize()
         })
       }
+    },
+    expandTooltip () {
+      this.expand = !this.expand
+    },
+    toJumpPage (type) {
+      switch (type) {
+        case 1:
+          break
+        case 2:
+          this.$router.push('/hnlktwo')
+          break
+        case 3:
+          this.$router.push('/takeshapetwo')
+          break
+        case 4:
+          this.$router.push('/firedrytwo')
+          break
+        case 5:
+          this.$router.push('/sortpacktwo')
+          break
+        case 6:
+          this.$router.push('/pdtwo')
+          break
+      }
     }
   }
 }
diff --git a/src/pages/modules/takeshape/one.vue b/src/pages/modules/takeshape/one.vue
index 912b6d6..164e92c 100644
--- a/src/pages/modules/takeshape/one.vue
+++ b/src/pages/modules/takeshape/one.vue
@@ -815,8 +815,11 @@ export default {
       _fj(row, center)
       p
         position relative
+        display block
         z-index 7
         _font(15px,17px,#333,,)
+        transform rotate(-90deg)
+        white-space nowrap
   .cyj_2
     top 50%
     .cyj_img_wrap