root/screen-lnsh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面跳转

Browse Source
This commit is contained in:
caill
2023-06-15 10:38:16 +08:00
parent 3d7a58529d
commit 0c0fe21681
5 changed files with 108 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/assets/css/layout.styl Normal file
View File

@@ -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

1
src/main.js
View File

@@ -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'

64
src/pages/modules/homepage/one.vue
View File

@@ -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>

36
src/pages/modules/homepage/two.vue
View File

@@ -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
}
}
}
}

3
src/pages/modules/takeshape/one.vue
View File

@@ -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