From f0b2b04b1b43d4891c1808ad060b9959f9a1209c Mon Sep 17 00:00:00 2001
From: 819527061@qq.com <123456>
Date: 星期二, 25 七月 2023 14:29:42 +0800
Subject: [PATCH] 内容修改
---
src/pages/show/showIndex/IndexMoudleBlock.vue | 127 +++++++++++++++++++++++++++++++----------
1 files changed, 95 insertions(+), 32 deletions(-)
diff --git a/src/pages/show/showIndex/IndexMoudleBlock.vue b/src/pages/show/showIndex/IndexMoudleBlock.vue
index bb53824..7feeb68 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="handleClickTk"
+ class="IndexMoudle-block"
+ >
<svg
class="IndexMoudleSvg"
xmlns="http://www.w3.org/2000/svg"
@@ -205,7 +210,9 @@
</div>
</div>
</div>
- <div class="IndexMoudle-block">
+ <div
+ @click="handleClickTk"
+ class="IndexMoudle-block">
<svg
class="IndexMoudleSvg"
xmlns="http://www.w3.org/2000/svg"
@@ -310,7 +317,9 @@
</div>
</div>
</div>
- <div class="IndexMoudle-block">
+ <div
+ @click="handleClickTk"
+ class="IndexMoudle-block">
<svg
class="IndexMoudleSvg"
xmlns="http://www.w3.org/2000/svg"
@@ -428,7 +437,9 @@
</div>
</div>
</div>
- <div class="IndexMoudle-block">
+ <div
+ @click="handleClickTk"
+ class="IndexMoudle-block">
<svg
class="IndexMoudleSvg"
xmlns="http://www.w3.org/2000/svg"
@@ -553,6 +564,7 @@
</div>
</div>
</div>
+ <indexMoudleForm ref="indexMoudleForm" v-if="indexMoudleVisiable"></indexMoudleForm>
</div>
</template>
@@ -560,13 +572,16 @@
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";
export default {
name: "IndexMoudleBlock",
components: {
- countTo
+ countTo,
+ indexMoudleForm
},
data() {
return {
+ indexMoudleVisiable:false, //寮规
fuwuqiconfig1: {
number: [0],
},
@@ -604,7 +619,7 @@
clearInterval(this.timer)
},
mounted() {
- this.loading()
+ //this.loading()
this.getHost()
this.getSnmp()
this.getTask()
@@ -620,6 +635,12 @@
},
methods: {
+ handleClickTk() {
+ this.indexMoudleVisiable = true
+ this.$nextTick(() => {
+ this.$refs.indexMoudleForm.init()
+ })
+ },
getHost(){ //涓绘満
getHost().then(res =>{
console.log(res,'res====')
@@ -695,33 +716,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 +802,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