From 2abce925663c0c044c9b5421eab9881e4dbe9f18 Mon Sep 17 00:00:00 2001
From: kongdeqiang <123456>
Date: 星期一, 31 七月 2023 14:58:06 +0800
Subject: [PATCH] 提交文件
---
src/pages/show/showIndex/IndexMoudleBlock.vue | 156 +++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 124 insertions(+), 32 deletions(-)
diff --git a/src/pages/show/showIndex/IndexMoudleBlock.vue b/src/pages/show/showIndex/IndexMoudleBlock.vue
index bb53824..97e8539 100644
--- a/src/pages/show/showIndex/IndexMoudleBlock.vue
+++ b/src/pages/show/showIndex/IndexMoudleBlock.vue
@@ -1,7 +1,9 @@
<template>
<div class="IndexMoudleBlock-wrap">
- <div class="IndexMoudle-block">
-
+ <div
+ @click="handleClickTk"
+ class="IndexMoudle-block"
+ >
<svg
class="IndexMoudleSvg"
xmlns="http://www.w3.org/2000/svg"
@@ -103,7 +105,10 @@
</div>
</div>
</div>
- <div class="IndexMoudle-block">
+ <div
+ @click="handleClickTk1"
+ class="IndexMoudle-block"
+ >
<svg
class="IndexMoudleSvg"
xmlns="http://www.w3.org/2000/svg"
@@ -205,7 +210,8 @@
</div>
</div>
</div>
- <div class="IndexMoudle-block">
+ <div
+ class="IndexMoudle-block">
<svg
class="IndexMoudleSvg"
xmlns="http://www.w3.org/2000/svg"
@@ -310,7 +316,9 @@
</div>
</div>
</div>
- <div class="IndexMoudle-block">
+ <div
+ @click="handleClickTk2"
+ class="IndexMoudle-block">
<svg
class="IndexMoudleSvg"
xmlns="http://www.w3.org/2000/svg"
@@ -428,7 +436,9 @@
</div>
</div>
</div>
- <div class="IndexMoudle-block">
+ <div
+ @click="handleClickTk3"
+ class="IndexMoudle-block">
<svg
class="IndexMoudleSvg"
xmlns="http://www.w3.org/2000/svg"
@@ -553,6 +563,10 @@
</div>
</div>
</div>
+ <indexMoudleForm ref="indexMoudleForm" v-if="indexMoudleVisiable"></indexMoudleForm>
+ <indexMoudleForm1 ref="indexMoudleForm1" v-if="indexMoudleVisiable1"></indexMoudleForm1>
+ <indexMoudleForm2 ref="indexMoudleForm2" v-if="indexMoudleVisiable2"></indexMoudleForm2>
+ <indexMoudleForm3 ref="indexMoudleForm3" v-if="indexMoudleVisiable3"></indexMoudleForm3>
</div>
</template>
@@ -560,13 +574,25 @@
import {animateShanFlash} from '@/utils/animateShanFlash'
import {getHost,getSnmp,getTask,getTaskInfoById,getUps,getKongtiao} from '@/api/daping'
import countTo from "vue-count-to"
+ import indexMoudleForm from "./IndexMoudleBlock/IndexMoudleForm";
+ import indexMoudleForm1 from "./IndexMoudleBlock/IndexMoudleForm1";
+ import indexMoudleForm2 from "./IndexMoudleBlock/IndexMoudleForm2";
+ import indexMoudleForm3 from "./IndexMoudleBlock/IndexMoudleForm3";
export default {
name: "IndexMoudleBlock",
components: {
- countTo
+ countTo,
+ indexMoudleForm,
+ indexMoudleForm1,
+ indexMoudleForm2,
+ indexMoudleForm3,
},
data() {
return {
+ indexMoudleVisiable:false, //寮规
+ indexMoudleVisiable1:false, //寮规
+ indexMoudleVisiable2:false, //寮规
+ indexMoudleVisiable3:false, //寮规
fuwuqiconfig1: {
number: [0],
},
@@ -604,7 +630,7 @@
clearInterval(this.timer)
},
mounted() {
- this.loading()
+ //this.loading()
this.getHost()
this.getSnmp()
this.getTask()
@@ -620,6 +646,30 @@
},
methods: {
+ handleClickTk() {
+ this.indexMoudleVisiable = true
+ this.$nextTick(() => {
+ this.$refs.indexMoudleForm.init()
+ })
+ },
+ handleClickTk1() {
+ this.indexMoudleVisiable1 = true
+ this.$nextTick(() => {
+ this.$refs.indexMoudleForm1.init()
+ })
+ },
+ handleClickTk2() {
+ this.indexMoudleVisiable2 = true
+ this.$nextTick(() => {
+ this.$refs.indexMoudleForm2.init()
+ })
+ },
+ handleClickTk3() {
+ this.indexMoudleVisiable3 = true
+ this.$nextTick(() => {
+ this.$refs.indexMoudleForm3.init()
+ })
+ },
getHost(){ //涓绘満
getHost().then(res =>{
console.log(res,'res====')
@@ -695,33 +745,73 @@
yoyo: true
})
})
- tl.from('.IndexMoudleBlock-wrap',{
- y:'100',
- autoAlpha: 0,
- ease:'back.out(1.7)',
- duration:1,
- delay:0.5,
- oncomplete: setTimeout(() => {
- this.$refs.fuwuCountTo1.start();
- this.$refs.fuwuCountTo2.start();
- this.$refs.shutongCountTo1.start();
- this.$refs.shutongCountTo2.start();
- this.$refs.yunweiCountTo1.start();
- this.$refs.yunweiCountTo2.start();
- this.$refs.donghuanCountTo1.start();
- this.$refs.donghuanCountTo2.start();
- this.$refs.donghuanCountTo2.start();
- this.$refs.donghuanCountTo3.start();
- this.$refs.donghuanCountTo4.start();
- this.$refs.menjinCountTo1.start();
- this.$refs.menjinCountTo2.start();
- this.$refs.menjinCountTo3.start();
- this.$refs.menjinCountTo4.start();
- },1000)
+ tl.fromTo('.IndexMoudleBlock-wrap',{
+ x:'-105%',
+ },{
+ x:'0',
+ //autoAlpha: 0,
+ ease:'back.out(1.7)',
+ duration:1,
+ delay:0.5,
+ oncomplete: setTimeout(() => {
+ this.$refs.fuwuCountTo1.start();
+ this.$refs.fuwuCountTo2.start();
+ this.$refs.shutongCountTo1.start();
+ this.$refs.shutongCountTo2.start();
+ this.$refs.yunweiCountTo1.start();
+ this.$refs.yunweiCountTo2.start();
+ this.$refs.donghuanCountTo1.start();
+ this.$refs.donghuanCountTo2.start();
+ this.$refs.donghuanCountTo2.start();
+ this.$refs.donghuanCountTo3.start();
+ this.$refs.donghuanCountTo4.start();
+ this.$refs.menjinCountTo1.start();
+ this.$refs.menjinCountTo2.start();
+ this.$refs.menjinCountTo3.start();
+ this.$refs.menjinCountTo4.start();
+ },1000)
})
- }
+ },
+ loading2(){
+ const tl = this.gsap.timeline({defaults: {duration: 0.8}})
+ let pathArry = this.gsap.utils.toArray('.zhuangshi-kuai')
+ pathArry.forEach(item => {
+ animateShanFlash(item.children,{
+ duration: 1.2,
+ yoyo: true
+ })
+ })
+ tl.fromTo('.IndexMoudleBlock-wrap',{
+ x:'0',
+ },{
+ x:'-105%',
+ //autoAlpha: 0,
+ ease:'back.out(1.7)',
+ duration:1,
+ delay:0.5,
+ oncomplete: setTimeout(() => {
+ this.$refs.fuwuCountTo1.start();
+ this.$refs.fuwuCountTo2.start();
+ this.$refs.shutongCountTo1.start();
+ this.$refs.shutongCountTo2.start();
+ this.$refs.yunweiCountTo1.start();
+ this.$refs.yunweiCountTo2.start();
+ this.$refs.donghuanCountTo1.start();
+ this.$refs.donghuanCountTo2.start();
+ this.$refs.donghuanCountTo2.start();
+ this.$refs.donghuanCountTo3.start();
+ this.$refs.donghuanCountTo4.start();
+ this.$refs.menjinCountTo1.start();
+ this.$refs.menjinCountTo2.start();
+ this.$refs.menjinCountTo3.start();
+ this.$refs.menjinCountTo4.start();
+ },1000)
+ })
+
+
+ }
}
}
</script>
@@ -741,9 +831,11 @@
.IndexMoudleBlock-wrap{
width: 100%;
display: flex;
+ transform: translateX(-105%);
.IndexMoudle-block{
position: relative;
margin: 0.0521rem /* 10/192 */ 0.078125rem /* 15/192 */;
+ cursor: pointer;
.IndexMoudleSvg{
width: 100%;
height: 100%;
--
Gitblit v1.9.1