From e831bb82deb9a4b46297bf861e38dd982717f329 Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Mon, 16 Oct 2023 18:41:07 +0800
Subject: [PATCH] gengx

---
 src/router/index.ts                       |   5 +
 src/views/controller/components/water.vue | 112 ++++++++++++++++++++++
 src/views/controller/index.vue            |  67 +++++++++++++
 3 files changed, 184 insertions(+)
 create mode 100644 src/views/controller/components/water.vue
 create mode 100644 src/views/controller/index.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index 865ad76..5615342 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -18,6 +18,11 @@ const routes: RouteRecordRaw[] = [
       },
     ],
   },
+	{
+    path: '/controller',
+    name: 'controller',
+    component: () => import('@/views/controller/index.vue'),
+  },
 
   {
     path: '/404',
diff --git a/src/views/controller/components/water.vue b/src/views/controller/components/water.vue
new file mode 100644
index 0000000..e7e73b7
--- /dev/null
+++ b/src/views/controller/components/water.vue
@@ -0,0 +1,112 @@
+//waves.vue
+<template>
+  <div data-tname="WaveItem" style="overflow: hidden;">
+    <div class="main-container">
+      <div class="waves">
+        <div class="wave" v-for="(item, key) in waves" :key="key" :style="item">
+          <div
+            v-for="n in wavesConfig.total"
+            :key="n"
+            class="wave-item"
+            :style="{
+              transform: `scale(${0.1 * Math.sqrt(n - 1)})`, // 使得波纹大小指数增长
+              opacity: 0.4 * (1 / n), // 因为相互层叠的波纹透明度会相互叠加，需要越小的波纹透明度越低，以免中心颜色过重
+              animationDelay: `${(n - 1) * 0.12}s`, // 越大的波纹越晚出现，以呈现波纹逐渐扩散的效果
+              animationDuration: `${0.6 +
+                n * 1 +
+                parseInt(item.width) * 0.002}s`, // 波纹动画时间渐增，表现波纹向外扩散渐慢的效果,波纹尺寸越大动画时间越长。
+              backgroundColor: wavesConfig.waveColor
+            }"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WaveItem",
+	props: ['cid'],
+  data() {
+    return {
+      waves: [],
+      wavesConfig: {
+        maxSize: 1200, // px，波纹最大尺寸
+        minSize: 600, // px，波纹最小尺寸
+        zIndexCount: 999, // 波纹父元素其z-index数值
+        waveColor: "#3E8CE3", //波纹基础颜色
+        total: 6 //波纹圈层数
+      },
+      clear: {
+        delay: 8000,
+        timeoutId: null
+      }
+    };
+  },
+  mounted() {
+    document.getElementById(this.$props.cid||"app").onclick = e => {
+      this.createWave(e);
+      this.intervalClearWave();
+    };
+  },
+  methods: {
+    createWave(e) {
+      // 让新生成的波纹始终在之前波纹的上层产生叠加效果
+      if (this.wavesConfig.zIndexCount > 99999) {
+        this.wavesConfig.zIndexCount = 999;
+      } else {
+        this.wavesConfig.zIndexCount++;
+      }
+      // 在一定范围内随机生成波纹的大小
+      const waveSize = parseInt(
+        Math.random() * (this.wavesConfig.maxSize - this.wavesConfig.minSize) +
+          this.wavesConfig.minSize
+      );
+      //添加新的波纹数据
+      this.waves.push({
+        left: `${e.clientX - waveSize / 2}px`,
+        top: `${e.clientY - waveSize / 2}px`,
+        zIndex: this.wavesConfig.zIndexCount,
+        width: `${waveSize}px`,
+        height: `${waveSize}px`
+      });
+    },
+    intervalClearWave() {
+      clearTimeout(this.clear.timeoutId);
+      this.clear.timeoutId = setTimeout(() => {
+        this.waves = [];
+      }, this.clear.delay);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.waves {
+  .wave {
+    position: fixed;
+    pointer-events: none; // 点击事件穿透，使得鼠标点击可以穿透波纹，兼容ie11及以上
+    @keyframes wave {
+      to {
+        //波纹逐渐扩散变大变透明
+        transform: scale(1);
+        opacity: 0;
+      }
+    }
+    .wave-item {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      border-radius: 100%;
+      animation: {
+        name: wave;
+        fill-mode: forwards; // 动画结束后保持最后一帧的状态
+        timing-function: ease-out; // 波纹向外扩散渐缓
+      }
+    }
+  }
+}
+</style>
+
+
diff --git a/src/views/controller/index.vue b/src/views/controller/index.vue
new file mode 100644
index 0000000..3bfbe11
--- /dev/null
+++ b/src/views/controller/index.vue
@@ -0,0 +1,67 @@
+<script setup lang='ts'>
+import water from "./components/water.vue"
+import { NImage } from 'naive-ui'
+
+</script>
+
+<template>
+  <div class="w-full h-full white">
+    <div class="img-list w-full h-full">
+			<div id="img1" class="img-list-item">
+				<water cid="img1"/>
+				<n-image
+						style="width: 100%;height: 100%"
+						preview-disabled
+						src="https://ceshi-worker-task.lihaink.cn/uploads/images/20231016/20231016140328a27258835.jpg"
+					/>
+			</div>
+			<div id="img2" class="img-list-item">
+				<water cid="img2"/>
+				<n-image
+						style="width: 100%;height: 100%"
+						preview-disabled
+						src="https://ceshi-worker-task.lihaink.cn/uploads/images/20231016/20231016140328a27258835.jpg"
+					/>
+			</div>
+			<div id="img3" class="img-list-item">
+				<water cid="img3"/>
+				<n-image
+						style="width: 100%;height: 100%"
+						preview-disabled
+						src="https://ceshi-worker-task.lihaink.cn/uploads/images/20231016/20231016140328a27258835.jpg"
+					/>
+			</div>
+			<div id="img4" class="img-list-item">
+				<water cid="img4"/>
+				<n-image
+						style="width: 100%;height: 100%"
+						preview-disabled
+						src="https://ceshi-worker-task.lihaink.cn/uploads/images/20231016/20231016140328a27258835.jpg"
+					/>
+			</div>
+		</div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.white{
+	background-color: #101014;
+	color: #fff;
+	.img-list{
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: center;
+		padding: 10px;
+		.img-list-item{
+			box-sizing: border-box;
+			height: 50%;
+			width: 50%;
+			padding: 10px;
+			overflow: hidden;
+			/* border: 1px solid darkblue; */
+			/* background-color: aquamarine; */
+		}
+	}
+}
+</style>