集成evanyou背景动画效果

ruoyi-ui/src/views/bookmark/bookmark/index.vue

@@ -195,7 +195,6 @@
       </div>
     </el-dialog>
 
-
   </div>
 </template>
 
@@ -292,6 +291,7 @@
       }
     },
     mounted() {
+
       // document.querySelector("#datalist").addEventListener('scroll', this.handleScroll)
     },
     computed:{
@@ -564,9 +564,9 @@
       windowurl(url, bookmarkId) {
         // window.open(url+this.urltext);
         window.open(url);
-
-
       },
+
+
     },
 
 
@@ -657,7 +657,7 @@
     position: absolute;
     background-color: #acd7ff;
     right: 0;
-
+    display: none;
   }
 
   .editlist {
@@ -666,6 +666,7 @@
     height: 70px;
     flex-flow: wrap;
     align-items: center;
+
   }
 
   .editlist div {
@@ -767,6 +768,8 @@
   .info-wrap{
     color: #9EABB3;
   }
+/**evanyou背景特效**/
+
 
 
 </style>

ruoyi-ui/src/views/bookmark/ceshi/index.vue

@@ -10,16 +10,25 @@
     <div class="mid">
       <!--右侧div内容-->
     </div>
+
+
   </div>
 </template>
 
 <script>
+
   export default {
     name: 'Dashboard',
     mounted () {
       this.dragControllerDiv();
+
+
     },
     methods: {
+
+
+
+
       dragControllerDiv: function () {
         var resize = document.getElementsByClassName('resize');
         var left = document.getElementsByClassName('left');
@@ -116,4 +125,6 @@
     box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11);
   }
 
+
+
 </style>

ruoyi-ui/src/views/bookmark/index/index.vue

@@ -279,7 +279,8 @@
         <el-button @click="bookmarkcancel">取 消</el-button>
       </div>
     </el-dialog>
-
+    <!--背景特效-->
+    <canvas id="evanyou"></canvas>
 
   </div>
 
@@ -423,6 +424,9 @@
       },
         //div拖动
       this.dragControllerDivs();
+
+      /**ebabyou 背景特效**/
+      // this.evanyoucss();
     },
     created() {
       var that = this;
@@ -435,6 +439,52 @@
     },
 
     methods: {
+
+      /**evanyou 背景特效**/
+      evanyoucss:function(){
+        var c = document.getElementById('evanyou'),
+          x = c.getContext('2d'),
+          pr = window.devicePixelRatio || 1,
+          w = window.innerWidth,
+          h = window.innerHeight,
+          f = 90,
+          q,
+          m = Math,
+          r = 0,
+          u = m.PI * 2,
+          v = m.cos,
+          z = m.random;
+        c.width = w * pr;
+        c.height = h * pr;
+        x.scale(pr, pr);
+        x.globalAlpha = 0.6;
+        function evanyou() {
+          x.clearRect(0, 0, w, h)
+          q = [{ x: 0, y: h * .7 + f }, { x: 0, y: h * .7 - f }]
+          while (q[1].x < w + f) d(q[0], q[1])
+        }
+        function d(i, j) {
+          x.beginPath()
+          x.moveTo(i.x, i.y)
+          x.lineTo(j.x, j.y)
+          var k = j.x + (z() * 2 - 0.25) * f,
+            n = y(j.y)
+          x.lineTo(k, n)
+          x.closePath()
+          r -= u / -50
+          x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).toString(16)
+          x.fill()
+          q[0] = q[1]
+          q[1] = { x: k, y: n }
+        }
+        function y(p) {
+          var t = p + (z() * 2 - 1.1) * f
+          return (t > h || t < 0) ? y(p) : t
+        }
+        document.onclick = evanyou
+        document.ontouchstart = evanyou
+        evanyou();
+      },
       /**div拖拽宽度**/
       dragControllerDivs: function () {
         console.log("开始拖拽")
@@ -1570,6 +1620,18 @@
     user-select:none; /* CSS3属性 */
   }
 
+  #evanyou{
+    position:fixed;
+    width:100%;
+    height:100%;
+    left:0;
+    top:0;
+    z-index: -1;
+
+  }
+
+
+
 
 </style>