diff --git a/src/views/test/360demo.html b/src/views/test/360demo.html
new file mode 100644
index 0000000..5a4ba2c
--- /dev/null
+++ b/src/views/test/360demo.html
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <style>
+    .process-area {
+      width: 140px;
+      height: 140px;
+      background: #eee;
+      margin: auto;
+      border-radius: 50%;
+      position: relative;
+      transition: .5s;
+    }
+    .process-anime {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      border: 4px solid #fff;
+      transform: translate(-50%,-50%);
+      width: 130px;
+      height: 130px;
+      background: linear-gradient(45deg,#fde47c,#fdeca6);
+      border-radius: 50%;
+      overflow: hidden;
+    }
+    .process-anime .cube-a {
+      position: absolute;
+      left: 50%;
+      background: rgba(53,53,53,.3);
+      width: 130px;
+      height: 130px;
+      border-radius: 50px;
+      animation: fx-rotate 15s infinite linear;
+      transform-origin: 50% 50%;
+      transition: .5s;
+    }
+    .process-anime .cube-b {
+      position: absolute;
+      left: 50%;
+      background: #fff;
+      width: 130px;
+      height: 130px;
+      border-radius: 50px;
+      animation: fx-rotate 10s infinite reverse linear;
+      transform-origin: 50% 50%;
+      transition: .5s;
+    }
+
+    /**成功**/
+    .process-anime .done {
+      position: absolute;
+      width: 56px;
+      height: 56px;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%,-50%) scale(2.25);
+    }
+    .process-anime .done .checkmark {
+      width: 56px;
+      height: 56px;
+      border-radius: 50%;
+      display: block;
+      stroke-width: 2;
+      stroke: #fff;
+      stroke-miterlimit: 10;
+      box-shadow: inset 0 0 0 #fdda65;
+      animation: fill-data-v-93100324 .4s ease-in-out .4s forwards,scale-data-v-93100324 .3s ease-in-out .9s both;
+    }
+    .process-anime .done .checkmark__check {
+      transform: translate(2px,2px);
+      transform-origin: 50% 50%;
+      stroke-dasharray: 48;
+      stroke-dashoffset: 48;
+      animation: stroke-data-v-93100324 .3s cubic-bezier(.65,0,.45,1) .8s forwards;
+    }
+
+
+    *{
+      margin:0;
+    }
+    .box{
+      width: 130px;
+      height: 130px;
+      margin: 130px auto;
+      background-image: linear-gradient(-180deg, rgba(255,255,255,0.00) 0%, rgba(255,234,149,0.96) 68%);
+      border-radius: 100%;
+      overflow: hidden;
+      position: relative;
+    }
+    .box:before{
+      content: '';
+      width: 130px;
+      height: 130px;
+      background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,234,149,0.96) 68%);
+      border-radius: 100%;
+      position: absolute;
+      left: 10px;
+      top: 10px;
+    }
+    /*.box:after{*/
+      /*content: '';*/
+      /*width: 160px;*/
+      /*height: 160px;*/
+      /*background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,234,149,1) 50%);*/
+      /*border-radius: 100%;*/
+      /*position: absolute;*/
+      /*left: 20px;*/
+      /*top: 20px;*/
+    /*}*/
+    .wave{
+      margin-top: 0px;
+      width: 100%;
+      height: 210px;
+      position: relative;
+      overflow: hidden;
+      z-index: 2;
+    }
+    .parallax>use {
+      animation: wave-move 5s linear infinite;
+      animation-duration: 1.5s;
+    }
+    .parallax>use:nth-child(1) {
+      animation-delay: -.5s;
+    }
+    .parallax>use:nth-child(2) {
+      animation-delay: -.9s;
+    }
+    .parallax>use:nth-child(3) {
+      animation-delay: -1.5s;
+    }
+    @keyframes wave-move {
+      0% {
+        transform: translate(90px,0);
+      }
+      100% {
+        transform: translate(-85px,0);
+      }
+    }
+    @keyframes fx-rotate {
+      0% {
+        transform: translate(-50%) rotate(0);
+      }
+      100% {
+        transform: translate(-50%,2px) rotate(365deg);
+      }
+    }
+  </style>
+</head>
+<body>
+
+<div class="process-area">
+  <div class="process-anime">
+    <div class="cube-a" style="top: -60%;"></div>
+    <div class="cube-b" style="top: -60%;"></div><!----></div>
+
+    <!--<div data-v-93100324="" class="done">-->
+      <!--<svg xmlns="http://www.w3.org/2000/svg" class="done-icon checkmark">-->
+        <!--<path d="M14.1 27.2l7.1 7.2 16.7-16.8" class="checkmark__check" style="fill: transparent;"></path>-->
+      <!--</svg>-->
+    <!--</div>-->
+</div>
+
+<div class="box">
+  <svg class="wave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 200 210">
+    <defs>
+      <path id="wave-shape" stroke="rgba(255,255,255,.8)" stroke-width=".5" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 58-18 88-18 58 18 88 18 v185h-528z"></path>
+    </defs>
+    <g class="parallax">
+      <use xlink:href="#wave-shape" x="50" y="0" fill="url(#linear)"></use>
+      <use xlink:href="#wave-shape" x="50" y="3" fill="url(#linear)"></use>
+      <use xlink:href="#wave-shape" x="50" y="6" fill="url(#linear)"></use>
+    </g>
+    <defs>
+      <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(90)">
+        <stop offset="10%"   stop-color="#FDD936" stop-opacity="0.4" />
+        <stop offset="80%" stop-color="#E6911B" stop-opacity="0.8" />
+      </linearGradient>
+    </defs>
+  </svg>
+</div>
+</body>
+</html>
diff --git a/src/views/test/test.html b/src/views/test/test.html
new file mode 100644
index 0000000..1e8903a
--- /dev/null
+++ b/src/views/test/test.html
@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>js仿360桌面悬浮球拖拽到边缘自动贴边特效</title>
+
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    html,
+    body {
+      width: 100%;
+      height: 100%;
+    }
+
+    #drag-ball {
+      width: 100px;
+      height: 100px;
+      background: #ddd;
+      position: fixed;
+      cursor: move;
+      box-sizing: border-box;
+      border: 4px solid #66cc66;
+      border-radius: 50%;
+      background: url('test.jpeg') no-repeat center center;
+      background-size: 100% 100%;
+      overflow: hidden;
+    }
+  </style>
+
+</head>
+<body>
+
+<div id="drag-ball"></div>
+
+<script>
+
+  // 自动吸附距离
+  var marginOffset = 50;
+
+  var ball = document.querySelector('#drag-ball');
+  var ballWidth = ball.offsetWidth;
+  var ballHeight = ball.offsetHeight;
+  var cuntWidth = 0;
+  var cuntHeight = 0;
+  // ball.style.left = parseInt(Math.random() * (document.body.offsetWidth - ballWidth)) + 'px';
+  // ball.style.top = parseInt(Math.random() * (document.body.offsetHeight - ballHeight)) + 'px';
+
+  function move(obj, w, h) {
+    if (obj.direction === 'left') {
+      obj.style.left = 0 - w + 'px';
+    } else if (obj.direction === 'right') {
+      obj.style.left = document.body.offsetWidth - ballWidth + w + 'px';
+    }
+    if (obj.direction === 'top') {
+      obj.style.top = 0 - h + 'px';
+    } else if (obj.direction === 'bottom') {
+      obj.style.top = document.body.offsetHeight - ballHeight + h + 'px';
+    }
+  }
+
+  function rate(obj, a) {
+    obj.style.transform = ' rotate(' + a + ')'
+  }
+
+  function action(obj) {
+
+    var dir = obj.direction;
+
+    switch (dir) {
+      case 'left':
+        rate(obj, '90deg');
+        break;
+      case 'right':
+        rate(obj, '-90deg');
+        break;
+      case 'top':
+        rate(obj, '-180deg');
+        break;
+      default:
+        rate(obj, '-0');
+        break;
+    }
+
+  }
+
+  function ballMove(ballDynamicLeft,ballDynamicTop) {
+    cuntWidth = 0;
+    cuntHeight = 0;
+    ball.direction = '';
+    ball.style.transition = '';
+    ball.style.left = ballDynamicLeft + 'px';
+    ball.style.top = ballDynamicTop + 'px';
+    if (ballDynamicLeft < marginOffset) {
+      ball.direction = 'left';
+      if (ballDynamicLeft < 1) {
+        move(ball, 0, 0);
+      }
+    }
+    if (ballDynamicTop < marginOffset) {
+      ball.direction = 'top';
+      if (ballDynamicTop < 1) {
+        move(ball, 0, 0);
+      }
+    }
+    if (ballDynamicLeft > document.body.offsetWidth - ballWidth - marginOffset) {
+      ball.direction = 'right';
+      if (ballDynamicLeft > document.body.offsetWidth - ballWidth - 1) {
+        move(ball, 0, 0);
+      }
+    }
+    if (ballDynamicTop > document.body.offsetHeight - ballHeight - marginOffset) {
+      ball.direction = 'bottom';
+      if (ballDynamicTop > document.body.offsetHeight - ballHeight - 1) {
+        move(ball, 0, 0);
+      }
+    }
+  }
+
+  /***
+   * 移动端
+   */
+  ball.addEventListener('touchstart', function (e) {
+    var ballLeft = e.touches[0].clientX - ball.offsetLeft;
+    var ballTop = e.touches[0].clientY - ball.offsetTop;
+    move(this, 0, 0);
+    rate(this, 0)
+    document.addEventListener('touchmove', function (e) {
+      var ballDynamicLeft = e.touches[0].clientX - ballLeft
+      var ballDynamicTop = e.touches[0].clientY - ballTop
+      ballMove(ballDynamicLeft,ballDynamicTop)
+    })
+  })
+
+  ball.addEventListener('touchend', function () {
+    this.style.transition = '.5s';
+    move(this, ballWidth / 2, ballHeight / 2);
+    action(this);
+  })
+
+  /***
+   * pc端
+   */
+  ball.onmousedown = function (e) {
+    var ballLeft = e.clientX - ball.offsetLeft;
+    var ballTop = e.clientY - ball.offsetTop;
+    document.onmousemove = function (e) {
+      cuntWidth = 0;
+      cuntHeight = 0;
+      var ballDynamicLeft = e.clientX - ballLeft
+      var ballDynamicTop = e.clientY - ballTop
+      ballMove(ballDynamicLeft,ballDynamicTop)
+    }
+  }
+
+  ball.onmouseover = function () {
+    move(this, 0, 0);
+    rate(this, 0)
+  }
+
+  ball.onmouseout = function () {
+    move(this, ballWidth / 2, ballHeight / 2);
+    action(this);
+  }
+
+  ball.onmouseup = function () {
+    document.onmousemove = null;
+    this.style.transition = '.5s';
+    move(this, ballWidth / 2, ballHeight / 2);
+    action(this);
+  }
+
+  window.onresize = function () {
+    var bodyH = document.body.offsetHeight;
+    var ballTop = ball.offsetTop;
+    var bodyW = document.body.offsetWidth;
+    var ballLeft = ball.offsetLeft;
+
+    if (ballTop + ballHeight > bodyH) {
+      ball.style.top = bodyH - ballHeight + 'px';
+      cuntHeight++;
+    }
+    if (bodyH > ballTop && cuntHeight > 0) {
+      ball.style.top = bodyH - ballHeight + 'px';
+    }
+    if (ballLeft + ballWidth > bodyW) {
+      ball.style.left = bodyW - ballWidth + 'px';
+      cuntWidth++;
+    }
+    if (bodyW > ballLeft && cuntWidth > 0) {
+      ball.style.left = bodyW - ballWidth + 'px';
+    }
+    move(ball, ballWidth / 2, ballHeight / 2);
+  }
+
+
+
+</script>
+</body>
+</html>
diff --git a/src/views/test/test.jpeg b/src/views/test/test.jpeg
new file mode 100644
index 0000000..12c8a0e
Binary files /dev/null and b/src/views/test/test.jpeg differ