修改登录界面

src/assets/js/stopExecutionOnTimeout.js

@@ -0,0 +1 @@
+"use strict";"object"!=typeof window.CP&&(window.CP={}),window.CP.PenTimer={programNoLongerBeingMonitored:!1,timeOfFirstCallToShouldStopLoop:0,_loopExits:{},_loopTimers:{},START_MONITORING_AFTER:2e3,STOP_ALL_MONITORING_TIMEOUT:5e3,MAX_TIME_IN_LOOP_WO_EXIT:2200,exitedLoop:function(o){this._loopExits[o]=!0},shouldStopLoop:function(o){if(this.programKilledSoStopMonitoring)return!0;if(this.programNoLongerBeingMonitored)return!1;if(this._loopExits[o])return!1;var t=this._getTime();if(0===this.timeOfFirstCallToShouldStopLoop)return this.timeOfFirstCallToShouldStopLoop=t,!1;var i=t-this.timeOfFirstCallToShouldStopLoop;if(i<this.START_MONITORING_AFTER)return!1;if(i>this.STOP_ALL_MONITORING_TIMEOUT)return this.programNoLongerBeingMonitored=!0,!1;try{this._checkOnInfiniteLoop(o,t)}catch(n){return this._sendErrorMessageToEditor(),this.programKilledSoStopMonitoring=!0,!0}return!1},_sendErrorMessageToEditor:function(){try{if(this._shouldPostMessage()){var o={action:"infinite-loop",line:this._findAroundLineNumber()};parent.postMessage(JSON.stringify(o),"*")}else this._throwAnErrorToStopPen()}catch(t){this._throwAnErrorToStopPen()}},_shouldPostMessage:function(){return document.location.href.match(/boomerang/)},_throwAnErrorToStopPen:function(){throw"We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact support@codepen.io."},_findAroundLineNumber:function(){var o=new Error,t=0;if(o.stack){var i=o.stack.match(/boomerang\S+:(\d+):\d+/);i&&(t=i[1])}return t},_checkOnInfiniteLoop:function(o,t){if(!this._loopTimers[o])return this._loopTimers[o]=t,!1;var i=t-this._loopTimers[o];if(i>this.MAX_TIME_IN_LOOP_WO_EXIT)throw"Infinite Loop found on loop: "+o},_getTime:function(){return+new Date}},window.CP.shouldStopExecution=function(o){return window.CP.PenTimer.shouldStopLoop(o)},window.CP.exitedLoop=function(o){window.CP.PenTimer.exitedLoop(o)};

src/components/preview/SimTextPreview.vue

@@ -69,8 +69,8 @@
           // 在行槽中添加行号显示器、折叠器、语法检测器
           gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
           readOnly: this.readOnly,
-          // theme: 'darcula',
-          theme: 'default',
+          theme: 'darcula',
+          // theme: 'default',
           fullScreen: false, // 全屏
           matchBrackets: true, //括号匹配
           hintOptions: {

src/icons/svg/jmal-cloud.svg

@@ -21,7 +21,7 @@
 	s21.333,9.551,21.333,21.333S459.702,362.676,447.92,362.676z"/>
   <path style="fill:#FFC107;" d="M117.68,362.676c-5.891,0-10.667-4.776-10.667-10.667c-0.001-5.809,4.646-10.551,10.453-10.667h0.213
 	c5.891,0,10.667,4.776,10.667,10.667C128.346,357.901,123.571,362.676,117.68,362.676L117.68,362.676z"/>
-  <path style="fill:#BBDEFB;" d="M367.258,78.239c-21.384-47.857-69.034-78.55-121.451-78.229
+  <path style="fill:#409EFF;" d="M367.258,78.239c-21.384-47.857-69.034-78.55-121.451-78.229
 	c-67.861-0.81-125.027,50.505-131.52,118.059c-34.577,4.507-60.584,33.742-61.035,68.608c0.585,38.815,32.48,69.832,71.296,69.333
 	h242.517c49.797,0.665,90.736-39.101,91.52-88.896C457.791,117.403,416.972,77.681,367.258,78.239z"/>
   <g>

src/views/login/index.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="login-container">
+    <!--<div class="overlay1" :style="backgroundImg">-->
+    <!--</div>-->
+    <div class="stars">
 
-
+    </div>
+    <!--<img src="http://localhost:9528/file/public/s/preview/login-bg.png?fileIds=5eca6fe63c9ae7058035e99b">-->
     <el-card class="box-card">
       <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
 
@@ -83,7 +87,9 @@
 
 <script>
 // import { validUsername } from '@/utils/validate'
-
+import $ from 'jquery'
+require('@/assets/js/prefixfree.min.js')
+require('@/assets/js/stopExecutionOnTimeout.js')
 import {hasUser,initialization} from '@/api/user'
 
 export default {
@@ -127,6 +133,12 @@ export default {
       passwordType: 'password',
       redirect: undefined,
       initialize: false,
+      backgroundImg: {
+        background: "url("+require("@/assets/img/login-bg.png")+")",
+        width: '100%',
+        height: '100%',
+        position: 'absolute'
+      }
     }
   },
   watch: {
@@ -143,6 +155,28 @@ export default {
         this.initialize = true
       }
     })
+
+    var stars = 800;
+    var $stars = $('.stars');
+    var r = 800;
+    for (var i = 0; i < stars; i++) {
+      if (window.CP.shouldStopExecution(1)) {
+        break;
+      }
+      var $star = $('<div/>').addClass('star');
+      $stars.append($star);
+    }
+    window.CP.exitedLoop(1);
+    $('.star').each(function () {
+      var cur = $(this);
+      var s = 0.2 + Math.random() * 1;
+      var curR = r + Math.random() * 300;
+      cur.css({
+        transformOrigin: '0 0 ' + curR + 'px',
+        transform: ' translate3d(0,0,-' + curR + 'px) rotateY(' + Math.random() * 360 + 'deg) rotateX(' + Math.random() * -50 + 'deg) scale(' + s + ',' + s + ')'
+      });
+    });
+
   },
   methods: {
     showPwd() {
@@ -207,6 +241,45 @@ $cursor: #409eff;
 /*}*/
 
 /* reset element-ui css */
+
+body {
+  /*background: radial-gradient(200% 100% at bottom center, #0070aa, #0b2570, #000035, #000);*/
+  /*background: radial-gradient(220% 105% at top center, #000 10%, #000035 40%, #0b2570 65%, #0070aa);*/
+  background: linear-gradient(#002766,30%, #0040f4);
+  background-attachment: fixed;
+  overflow: hidden;
+}
+
+@keyframes rotate {
+  0% {
+    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
+  }
+  100% {
+    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
+  }
+}
+.stars {
+  transform: perspective(500px);
+  transform-style: preserve-3d;
+  position: absolute;
+  bottom: 0;
+  perspective-origin: 50% 100%;
+  left: 50%;
+  animation: rotate 90s infinite linear;
+}
+
+.star {
+  width: 2px;
+  height: 2px;
+  background: #F7F7B6;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0 -300px;
+  transform: translate3d(0, 0, -300px);
+  backface-visibility: hidden;
+}
+
 .login-container {
   .el-input {
     display: inline-block;
@@ -245,12 +318,48 @@ $light_gray:#eee;
   min-height: 100%;
   width: 100%;
   overflow: hidden;
-  background: linear-gradient(#002766,30%, #0040f4);
+  /*background: linear-gradient(#002766,30%, #0040f4);*/
 
   /*/deep/.el-form-item__content {*/
     /*line-height: 28px;*/
   /*}*/
 
+  .overlay1 {
+    transform: rotate(360deg);
+    -ms-transform: rotate(360deg); /* IE 9 */
+    -webkit-transform: rotate(360deg); /* Safari and Chrome */
+    animation: first1 120s linear infinite;
+    -webkit-animation: first1 120s linear infinite;
+  }
+
+  @keyframes first1
+  {
+    0%   {
+      transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -webkit-transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -webkit-transform: rotate(360deg);
+    }
+  }
+  @-webkit-keyframes first1
+  {
+    0%   {
+      transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -webkit-transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -webkit-transform: rotate(360deg);
+    }
+  }
+
+
   .box-card {
     text-align: center;
     max-width: 316px;