project init

1.首页微调 2.新增游戏-鉴色
2021-10-12 18:03:44 +08:00
commit e077d3fa4a
72 changed files with 29927 additions and 0 deletions
--- a/src/assets/css/calendar.css
+++ b/src/assets/css/calendar.css
--- a/src/assets/css/global.less
+++ b/src/assets/css/global.less
@@ -0,0 +1,174 @@
+
+@charset "utf-8";
+@import "~@/assets/font/project_iconfont.css";
+/*--------------------
+   通用
+ --------------------*/
+// function
+@scale: .7px;
+@baseUrl: "@/assets/images/";
+@center : center center no-repeat;
+.bg-norepeat(@src,@format){
+    background: url("~@/assets/images/@{src}.@{format}") @center;
+    background-size: cover;
+}
+.bg-size(@src,@format,@sizeW,@sizeH){
+    background: url("~@/assets/images/@{src}.@{format}") @center;
+    background-size:@sizeW @sizeH;
+}
+.bg-top(@src,@format){
+    background: url("~@/assets/images/@{src}.@{format}") @center;
+}
+.bg-left(@src,@format){
+    background: url("~@/assets/images/@{src}.@{format}") 18px center no-repeat;
+}
+.bg-left2(@src,@format){
+    background: url("~@/assets/images/@{src}.@{format}") left top no-repeat;
+}
+.bg-float(@src,@format){
+    background: url("~@/assets/images/float/@{src}.@{format}") @center;
+    background-size: 100% 100%;
+}
+.bg-float2(@src,@format){
+    background: url("~@/assets/images/stars/@{src}.@{format}") @center;
+    background-size: 100% 100%;
+}
+.bg-repeat(@src,@format){
+    background: url("~@/assets/images/@{src}.@{format}") repeat;
+}
+.bg-anyPos(@src,@format,@position){
+    background: url("~@/assets/images/@{src}.@{format}") @position no-repeat;
+}
+.boxcenter{
+    display: -webkit-box;
+    -webkit-box-pack:center;
+    -webkit-box-align:center;
+}
+.paLayout(@left,@top,@width,@height,@index){
+    width:@width;
+    height:@height;
+    position: absolute;
+    left:@left;
+    top:@top;
+    z-index: @index;
+}
+.paRightLayout(@right,@top,@width,@height,@index){
+    width:@width;
+    height:@height;
+    position: absolute;
+    right:@right;
+    top:@top;
+    z-index: @index;
+}
+.paBottomLayout(@left,@bottom,@width,@height,@index){
+    width:@width;
+    height:@height;
+    position: absolute;
+    left:@left;
+    bottom:@bottom;
+    z-index: @index;
+}
+.paCenter(@top,@width,@height,@index){
+    width:@width;
+    height:@height;
+    position: absolute;
+    left:50%;
+    margin-left:-@width/2;
+    top:@top;
+    z-index: @index;
+}
+.paPos(@left,@top,@index){
+    position: absolute;
+    left:@left;
+    top:@top;
+    z-index: @index;
+}
+.paCenterBottom(@bottom,@width,@height,@index){
+    width:@width;
+    height:@height;
+    position: absolute;
+    left:50%;
+    margin-left:-@width/2;
+    bottom:@bottom;
+    z-index: @index;
+}
+.paWH(@width,@height,@index){
+    position: absolute;
+    width:@width;
+    height:@height;
+    z-index: @index;
+}
+.prLayout(@width,@height){
+    width:@width;
+    height:@height;
+    position: relative;
+}
+
+.pfLayout(@left,@top,@width,@height,@index){
+    width:@width;
+    height:@height;
+    left:@left;
+    top:@top;
+    z-index: @index;
+    position: fixed;
+}
+.pfRightLayout(@right,@top,@width,@height,@index){
+    width:@width;
+    height:@height;
+    right:@right;
+    top:@top;
+    z-index: @index;
+    position: fixed;
+}
+
+
+@font-face {font-family: "iconfont";
+  src: url('~@/assets/font/iconfont.eot?t=1615881124787'); /* IE9 */
+  src: url('~@/assets/font/iconfont.eot?t=1615881124787#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAgkAAsAAAAADtAAAAfVAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEGAqPNIxuATYCJAMoCxYABCAFhG0HgQAbrAwjESaUFEX2zwTzPKMeNnkjs0RiGNVfnFK3hg3eDKWE+OdqM3sf4LuVYM9DCDzLNJL4J5gPT2f2/swPZ+IJVi6ARZKKi0qrWpPWkzsHpRBUzBY6MQGwuGYjMiJ7i2SB5ADVQXrNQXOloXD7+/ZrVT1EO992vcx+O9kzW8w98kgWGiHNxz0ekQaJDqEQUkenjsK3CyolSvRxWVuEFz3Aqp3ZP3kaAjRIRDUQu7N9dyhBAXZpn2FlJQOgjPhBM3KF0iVHrqQg30EGJbOQuQbwcn7f96hDlEACGQt41qPYMRjZEUOFhxWjInqzIsTmOHC9DqQAN4AMcBla/Abr2W4OU2ODKcoBFuj53zIRQ0SIWCK5kV4RdyRc4YlGk0nSVLBZGEWsYEdDwyCDHBSKyf7jqQDl4Kyjic+WGgiDIkiBEAgSICwEORC5BAUQvQgyICSCEgg3QQVEmEDg5/FT0/jm+A3gAJIRQNqbJN5ZdUy5DOzVzjqN8RoVqS4u1ttslJqFKioVz8cn62UUjPQ8nxzLn1NA69ij4aRQaBYITMRgY2swxM2czr2VkJQo9DwfHK4K2C+EztaGW/XhSTg8DwanKPYTq4sQi89C+IgNO4jrbJZ/6ZINwrkAiLsrX6ouXN8SDn/7rWTQ1r1kTcjpW7dosXn9aYjb0j0CcRUBIsyi2Ws+35hUVC0U+iOFks8i8y9tv/NiM/V41FP7wENS917xgJjfMg+6CwfgD7sSPqkgg7koc9NO4kCOURcqZFBMVX84L0xcoUw5BXpUxPzTwVXv7y5239V92y3bljs1QnXOjL5SEB9ss94L7yG7feQp5LxwxOryZ10tTAy0DsQvb7w5GPwPh8+PkhXF7ruuO9It8Xbh+s3iJmmLa+vUwKtJ8PU0XDEPRXb9kOq+VyCwVpMlW6RNNqjXbRI3Z3BYPLX7xBFu41bXlqlq4vJJHgE88TlRBHr7bsXT5bfr6w7eTZKtuNNb3KTWSluIzLU1S7d+M4aBI2qOg9pyoS6IHRSbf6+x+d7Fm9ZZCnyEdW11bzb3DkVmg6BDKQ68mj3YrG/8uORIbfc4tG11ZfMALxhxe0b+eo4cvFtGxTrIunVtd/T3LMO44JFqirGo7bAM9C216ryLe/um57Fyd/3iTULBI2aRMG3OcW66UV0yZttqO6hLwzwU2vdf3lN0njqS8Mt58Pl0sWEGsEeV0ZYnHUtLOnYOKSmxVv+qqgrSyv0Y2EJj0FRTkRYYeAYWpI3W5NgdJgF62bUcDsGE1f693ackUup2l5ICdSSlSefrMGx+GcpmmNJgz1l6LT6l/x97zxW1P9O+ZRd5oj39pnMsnLU0hliDphay2w34/PMM/G1OtyfS5l2qn2lXuv/Mvc7J8deW5tiRZsqoBTCGmfHz53YDkF3hXk7n2JvAJ4WP8jO5L7zIf+FmBjga36mR0nnq1M4pXVMPEAYW3pHUrgdiWgTr8VOCo7zckdAqYQVgYKm5Z6sVCa2Qzi9vZCN7ZpTeCZ+m/WxIc3R6PHldUb2MXq1b984sIQzsWfWKJqy7ltf5iMQUjZ9QRMozYUJHIzMl+3xte6jTz6TmxVp5B3SptYf00AzvztHJ/zNs2YoOCzSLiHVYUcYy/5fR7tzwH3RITrwS838u477WrgAM9rM/RelPyiBtSNurmyFtpr44TSBIZsUHNCmJPjAQNS3BAM3ePYfpH39QWA8HpRY+ODl04ADSUtNg71IntQ4+71b/jk9cwEdtn7kFrd3cZ1t04J4l5isEZb54RMxXCop8jDYUG44oTDAMwREMMQxa1jC92iWmbRTznmlAu8x50qhhI4TviayRnnGHqlr3bFwz84EhRVs3oa4mNdrHSDK9XyDbgwvAI7sfSEpyuPI5KpfTcwagpp8qgrNkcjTrptkoxb6JlVqKxvwWD+fxk20T207IbWxGLX36YW6C5UmqcbTTRoyP/vlZOKQ5mKvJnZC9XjvFxLw3Ppx66FnFrUPrvtmFWOw6t+tLh+w6u/Bl/UmRhTzBgfw5/ovqJx5RTymze6G87vlmKeOWgvN+sJOevUgesfcstMMOkmMneahl0GahWGC/DZ9ayzoIHkwozioW6F7FTxdZBx9G9wrFmHoKUJ1uY6KOWh/mEfA/yZ5is0neb+kilss7k55gW+SJVMaKTTvYW2xONJUNSRrPUejpw7/76Zr9puRORtu+E1Yc4kq1aiow/0oEtBkvpc+YqOWjgK35rgy1gAayblb1LZQAlkS2qQG0l/IFT5p27oUl/cxpDjQJFEjQpFAiPTZLrKbJwaGepoASLTUNqqLV9S1MGAMWhKoALphLNAR67NQw0OKkjcUSr9soTXyskcGCj1Y5MgmrUaOAmO7IIZPspN67wcBhDOEeKGIlGHI9t+8IE58HhinGSTM0lljB7dXNr+0bFZomzrGb5M45AcJwAV/kDMxzhtJwipG7kmgt366vxf3cq4iLSg/vBgNnGcYQ7s0pYiW2dr3Ez48w8XlgMqZ8m8/QWNo/3F7dFIj9ZqrQlEMZbDfJnWNcgBptuIAvxjEXzQwlfliKkbuSFRrLt2u2lCjKrrp3FntbOX1NA5+oRxJTM3MLSytrG1uao706+MEWKaSAHT3ePjesw7IRk/atlAIZcMOQpkFKSgYqOUjuczpWBrTzgWobVHvHV6kAAAA=') format('woff2'),
+  url('~@/assets/font/iconfont.woff?t=1615881124787') format('woff'),
+  url('~@/assets/font/iconfont.ttf?t=1615881124787') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('~@/assets/font/iconfont.svg?t=1615881124787#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.control-pannel{
+    .weui-actionsheet__title{
+        height: 40px;
+    }
+    .weui-actionsheet__menu{
+        .weui-actionsheet__cell:nth-child(3){
+            color: #e15344;
+        }
+    }
+}
+.toast-warn {
+    .weui-toast {
+        .weui-icon_toast.weui-icon-success-no-circle {
+            font-family: "iconfont" !important;
+            font-size: 12px;
+            font-style: normal;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            margin-bottom: 12px;
+        }
+    }
+    .weui-icon_toast.weui-icon-success-no-circle:before {
+        color: #fff;
+        content: "\e60e" !important;
+    }
+}
+.weui-toast__content{
+    padding: 0 10px!important;
+}
+// 重置所有 placeholder 色值
+input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
+    color: #9B9B9B;
+}
--- a/src/assets/css/reset.less
+++ b/src/assets/css/reset.less
@@ -0,0 +1,177 @@
+@charset "utf-8";
+/*--------------------
+   默认设置
+ -------------------*/
+*{
+    padding:0; margin:0; box-sizing:border-box; -webkit-box-sizing:border-box;/* -webkit-user-select: none;-moz-user-select: none; */   /*touch-action: none; */
+    // -webkit-transform: translate3d(0, 0, 0);
+    // -moz-transform: translate3d(0, 0, 0);
+    // -ms-transform: translate3d(0, 0, 0);
+    // transform: translate3d(0, 0, 0);  
+} 
+html { -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight:rgba(0,0,0,0);-webkit-text-size-adjust:none;overflow:-moz-scrollbars-vertical;width: 100%; height: 100%; font-size: 100px;}
+body { position: relative; width: 100%; height:100%; margin: 0 auto; font: normal 12px/auto "Helvetica Neue", Helvetica,'Micorsoft YaHei', Arial, sans-serif;  /* -webkit-user-select: none;*/  }
+a{text-decoration:none; color: #fff;}
+textarea{resize:none;}
+article, aside, footer, header, hgroup, nav, section, figure, figcaption { display: block;}
+h1, h2, h3, h4, h5, h6, th, td, table, input, button, select, textarea, sub{ font-size:1em;font-weight:normal;}
+body, input, button, select, textarea, sub{ font-family:Arial, sans-serif;}
+em, cite, address, optgroup { font-style:normal;}
+kbd, samp, code { font-family:monospace;}
+input, button, select, textarea { vertical-align:middle;outline:none;outline: none;background: none; border:none; margin: 0; padding: 0; }
+ul, ol { list-style:none;}
+img, fieldset { border:0; max-width: 100%;}
+
+html{
+  background-color: #0c0718;
+  width: 100%;
+  margin: auto;
+  overflow-x: hidden;
+  body{
+    // max-width: 750px;
+    overflow-x: hidden;
+    background: #0c0718;
+  }
+}
+.active-dot{
+	background: #3c3c3c;
+	opacity: .5;
+}
+
+html,body{
+    // height: auto!important;
+}
+
+// loading style
+@vw: 7.5vw;
+.loading-container{
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	position: fixed;
+	z-index: 9999;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background-color: #0c0718;
+	// background: -webkit-linear-gradient(top, #b7dbfa 0%, #82c3f8 15%, #63acf3 85%,  #b7dbfa 100%) ;
+	display: flex;
+	align-items: center;
+	align-content: center;
+	justify-content: center;
+
+	.leaf{
+		fill: #9A4DFF;
+	}
+
+	@keyframes hide {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0;
+		}
+	}
+
+	.keyframes (@prefix,@name,@content) when (@prefix=def) {
+		@keyframes @name {
+			@content();
+		}
+	}
+	.keyframes (@prefix,@name,@content) when (@prefix=moz) {
+		@-moz-keyframes @name {
+			@content();
+		}
+	}
+	.keyframes (@prefix,@name,@content) when (@prefix=o) {
+		@-o-keyframes @name {
+			@content();
+		}
+	}
+	.keyframes (@prefix,@name,@content) when (@prefix=webkit) {
+		@-webkit-keyframes  @name{
+			@content();
+		}
+	}
+	.keyframes (@prefix,@name,@content) when (@prefix=all) {
+		.keyframes(moz,@name,@content);
+		.keyframes(o,@name,@content);
+		.keyframes(webkit,@name,@content);
+		.keyframes(def,@name,@content);
+	}
+
+
+	 @i:0;
+	.loop(@i)when(@i<36){//递归调用 达到循环的目的
+		.loop((@i+1));//执行某个需要循环的方法
+		@realIndex: @i+1;
+		@aniname : ~'leaf@{realIndex}';
+		@delaytime: @i*0.05+0.1;
+		@duration: @i*0.1*0.5;
+		@durationStr: ~'@{duration}s';
+		@delaytimeStr: ~'@{delaytime}s';
+		@rotate: @i*10-10;
+		@rotateStr: ~'@{rotate}deg';
+		@rotateNext: @i*10;
+		@rotateNextStr: ~'@{rotateNext}deg';
+		
+		.keyframes(all,@aniname,{
+			from{ 
+				opacity: 0;
+				transform:rotate(@rotateStr) scale(1); 
+				transform-origin:50% 45.4%; 
+			} 
+			to{ 
+				opacity: 0.45;
+				transform:rotate(@rotateNextStr) scale(1); 
+				transform-origin:50% 45.4%; 
+			} 
+		});
+		
+		#leaf@{realIndex} {
+			animation:  @aniname @durationStr ease @delaytimeStr both;
+		} 
+	}
+
+	//初始化开始循环 不初始化 不会开始循环
+	.loop(@i);
+}
+
+@keyframes rotateCon {
+    from {
+        transform: rotate(-30deg);
+    }
+	to {
+        transform: rotate(360deg);
+    }
+}
+
+
+
+.loading-container .loader,
+.loading-container .loader:after {
+	visibility: visible!important;
+	// border-radius: 50%;
+	width: 5rem;
+	height: 5rem;
+	// background-color: #ff6d47;
+}
+.loading-container .loader{
+	.con{
+		width: 5rem;
+		height: 5rem;
+		transform-origin:50% 45%;
+		animation:  rotateCon 5s linear  infinite;
+	}
+	p{
+		color: #fff;
+		text-align: center;
+		animation:  hide .5s ease 3s both;
+	}
+	#svg{
+		animation:  hide .5s ease 3s both;
+		// background-color: #edd;
+	}
+}
--- a/src/assets/css/weui-2.0.1.css
+++ b/src/assets/css/weui-2.0.1.css
--- a/src/assets/css/weui-for-work.css
+++ b/src/assets/css/weui-for-work.css
--- a/src/assets/font/iconfont.eot
+++ b/src/assets/font/iconfont.eot
--- a/src/assets/font/iconfont.svg
+++ b/src/assets/font/iconfont.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="qunzu" unicode="&#59095;" d="M621.341 434.994c43.302 34 71.237 86.668 71.237 145.856 0 102.308-83.223 185.535-185.538 185.535-102.311 0-185.535-83.223-185.535-185.535 0-59.189 27.965-111.856 71.237-145.856-114.028-45.57-194.928-156.974-194.928-287.061v-61.845c0-17.093 13.83-30.926 30.926-30.926h556.608c17.093 0 30.919 13.83 30.919 30.926v61.844c0.003 130.123-80.869 241.492-194.926 287.062v0zM507.044 704.541c68.215 0 123.689-55.473 123.689-123.689 0-68.219-55.473-123.695-123.689-123.695-68.219 0-123.694 55.474-123.694 123.695-0.001 68.215 55.473 123.689 123.694 123.689v0zM754.422 117.006h-494.765v30.925c0 136.403 110.977 247.38 247.413 247.38 136.403 0 247.35-110.977 247.35-247.38v-30.925zM754.422 117.006zM300.033 424.243c0.848 1.87 0.848 3.863 1.267 5.797 0.3 1.178 0.636 2.294 0.788 3.534 0.238 2.444 0.092 4.769-0.243 7.154-0.119 1.267 0.181 2.478-0.119 3.745-0.181 0.727-0.693 1.239-0.908 1.966-0.479 1.386-1.143 2.625-1.808 3.922-1.274 2.659-2.659 5.073-4.562 7.217-0.273 0.3-0.603 0.515-0.905 0.817-2.806 2.929-6.041 5.162-9.724 6.764-33.461 14.916-55.084 48.138-55.084 84.736 0 43.063 29.169 80.147 70.961 90.201 16.609 4.018 26.816 20.719 22.833 37.329-4.046 16.606-20.81 26.693-37.329 22.83-69.666-16.791-118.314-78.639-118.314-150.357 0-39.138 14.889-75.826 40.193-103.728-80.475-41.706-132.96-125.109-132.96-219.481v-47.834c0-17.093 13.83-30.926 30.919-30.926 17.093 0 30.926 13.83 30.926 30.926v47.834c0 85.523 57.497 158.905 139.999 179.68 10.263 1.449 19.598 7.698 24.064 17.875v0zM300.033 424.243zM806.879 446.165c25.305 27.903 40.19 64.593 40.19 103.731 0 69.847-47.047 131.271-114.416 149.36-16.458 4.41-33.43-5.346-37.902-21.831-4.438-16.519 5.346-33.46 21.838-37.902 40.403-10.838 68.637-47.712 68.637-89.628 0-36.597-21.589-69.755-55.019-84.705-3.742-1.632-7.037-3.892-9.871-6.853-0.243-0.273-0.546-0.454-0.788-0.727-1.931-2.143-3.318-4.621-4.621-7.308-0.633-1.296-1.326-2.507-1.78-3.863-0.211-0.693-0.726-1.239-0.905-1.963-0.3-1.267 0-2.477-0.124-3.745-0.33-2.386-0.478-4.711-0.238-7.158 0.153-1.235 0.484-2.353 0.784-3.531 0.421-1.933 0.421-3.926 1.267-5.802 4.473-10.174 13.804-16.429 24.066-17.872 82.501-20.78 139.998-94.157 139.998-179.68v-47.838c0-17.089 13.83-30.919 30.926-30.919 17.089 0 30.919 13.83 30.919 30.919v47.838c0 94.371-52.482 177.777-132.96 219.479v0zM806.879 446.165z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="weibiaoti517" unicode="&#58900;" d="M192.287933 33.601538c-15.953344 0-29.006637 13.053294-29.006637 29.007661l0 639.423111c0 15.954367 13.053294 29.007661 29.006637 29.007661l639.424134 0c15.954367 0 29.007661-13.053294 29.007661-29.007661l0-639.423111c0-15.954367-13.053294-29.007661-29.007661-29.007661L192.287933 33.601538z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="step" unicode="&#58897;" d="M924.8 558.4c-22.6 53.4-54.9 101.3-96 142.4s-89 73.4-142.4 96c-55.3 23.4-113.9 35.2-174.4 35.2s-119.1-11.8-174.4-35.2c-53.4-22.6-101.3-54.9-142.4-96s-73.4-89-96-142.4c-23.4-55.3-35.2-113.9-35.2-174.4s11.8-119.1 35.2-174.4c22.6-53.4 54.9-101.3 96-142.4 41.1-41.1 89-73.4 142.4-96 55.3-23.4 113.9-35.2 174.4-35.2s119.1 11.8 174.4 35.2c53.4 22.6 101.3 54.9 142.4 96 41.1 41.1 73.4 89 96 142.4 23.4 55.3 35.2 113.9 35.2 174.4s-11.8 119.1-35.2 174.4zM869.8 232.9c-19.6-46.2-47.6-87.8-83.2-123.4s-77.2-63.7-123.4-83.2c-47.8-20.2-98.7-30.5-151.1-30.5s-103.3 10.3-151.1 30.5c-46.2 19.6-87.8 47.6-123.4 83.2s-63.7 77.2-83.2 123.4c-20.2 47.8-30.5 98.7-30.5 151.1s10.3 103.3 30.5 151.1c19.6 46.2 47.6 87.8 83.2 123.4s77.2 63.7 123.4 83.2c47.8 20.2 98.7 30.5 151.1 30.5s103.3-10.3 151.1-30.5c46.2-19.6 87.8-47.6 123.4-83.2s63.7-77.2 83.2-123.4c20.2-47.8 30.5-98.7 30.5-151.1 0-52.4-10.3-103.3-30.5-151.1zM416 512h64v-256h-64zM544 512h64v-256h-64z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="diqu" unicode="&#58971;" d="M494.5 124.5l16.9-18.7 17.1 18.5c2.4 2.6 60.4 65.5 119.4 145.3C729 379.4 770.2 464.7 770.2 523.1c0 68.3-26.6 132.6-74.9 180.9-48.3 48.3-112.6 74.9-180.9 74.9s-132.7-26.6-181-74.9c-48.3-48.3-74.9-112.6-74.9-180.9 0-58.3 40.2-143.5 119.4-253.3 57.5-79.8 114.2-142.7 116.6-145.3zM304.4 523.1c0 115.7 94.1 209.8 209.8 209.8S724 638.8 724 523.1c0-25.5-11.5-60.3-34.1-103.2-19-36-45.5-77.3-79-122.6-38.7-52.4-77.7-98.1-99.3-122.7-21.1 24.5-59 70-96.6 122.1-32.7 45.4-58.7 86.7-77.3 122.8-22 43.1-33.3 78-33.3 103.6zM852.2 177.6c-35.6 15-85.9 27.4-145.4 36l-6.5-45.5c55.7-8 102-19.3 134.1-32.8 32.5-13.7 39.2-25.1 39.2-27.4 0-4.3-16.9-25.9-95.2-45.4-70.9-17.6-165.5-27.4-266.4-27.4-100.9 0-195.5 9.7-266.4 27.4-78.2 19.5-95.2 41.1-95.2 45.4 0 2.3 6.6 13.7 38.9 27.3 31.9 13.5 78 24.8 133.4 32.8l-6.6 45.5c-59.3-8.5-109.3-21-144.7-35.9-44.5-18.8-67-42.2-67-69.7 0-21.6 14-40.9 41.6-57.1 21.3-12.5 51.1-23.6 88.5-32.9 74.4-18.5 172.9-28.7 277.5-28.7s203.1 10.2 277.5 28.7c37.5 9.3 67.2 20.4 88.5 32.9 27.6 16.2 41.6 35.4 41.6 57.1 0 27.4-22.7 50.9-67.4 69.7zM511.4 436.5c48 0 87 39 87 87s-39 87-87 87-87-39-87-87 39.1-87 87-87z m0 128c22.6 0 41-18.4 41-41s-18.4-41-41-41-41 18.4-41 41 18.4 41 41 41z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="jiahao" unicode="&#58902;" d="M512 896c-285.257143 0-512-226.742857-512-512s226.742857-512 512-512 512 226.742857 512 512-226.742857 512-512 512z m0-950.857143c-241.371429 0-438.857143 197.485714-438.857143 438.857143s197.485714 438.857143 438.857143 438.857143 438.857143-197.485714 438.857143-438.857143-197.485714-438.857143-438.857143-438.857143zM731.428571 420.571429h-182.857142v182.857142c0 21.942857-14.628571 36.571429-36.571429 36.571429s-36.571429-14.628571-36.571429-36.571429v-182.857142h-182.857142c-21.942857 0-36.571429-14.628571-36.571429-36.571429s14.628571-36.571429 36.571429-36.571429h182.857142v-182.857142c0-21.942857 14.628571-36.571429 36.571429-36.571429s36.571429 14.628571 36.571429 36.571429v182.857142h182.857142c21.942857 0 36.571429 14.628571 36.571429 36.571429s-14.628571 36.571429-36.571429 36.571429z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="riqi" unicode="&#58946;" d="M861.448 662.279H732.883V798.45c0 15.378-12.443 27.822-27.821 27.822S677.24 813.83 677.24 798.45V662.28H348.604V801.249c0 15.377-12.443 27.822-27.822 27.822s-27.821-12.444-27.821-27.822v-138.97H162.55c-52.763 0-95.69-42.927-95.69-95.69v-531.97c0-52.763 42.927-95.69 95.69-95.69h698.897c52.763 0 95.69 42.927 95.69 95.69v531.97c0 52.763-42.927 95.69-95.69 95.69z m40.047-627.66c0-22.088-17.959-40.047-40.047-40.047H162.551c-22.088 0-40.047 17.959-40.047 40.047v531.97c0 22.09 17.959 40.049 40.047 40.049h698.897c22.088 0 40.047-17.96 40.047-40.048v-531.971zM288.75 410.395v-55.642h55.643v55.642h-13.91zM483.69 410.395h55.642v-55.642H483.69v55.642zM483.69 243.305h55.642v-55.643H483.69v55.643zM288.75 243.305h55.643v-55.643h-55.642v55.643zM678.41 411.264h55.642v-55.642H678.41v55.642zM678.572 243.196h55.643v-55.642h-55.643v55.642z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="jinhangzhong" unicode="&#59018;" d="M551.563636 367.709091l148.945455-116.363636c16.290909-11.636364 18.618182-34.909091 6.981818-48.872728-11.636364-16.290909-34.909091-18.618182-48.872727-6.981818l-162.909091 128c-9.309091 6.981818-13.963636 16.290909-13.963636 27.927273V640c0 18.618182 16.290909 34.909091 34.90909 34.909091s34.909091-16.290909 34.909091-34.909091v-272.290909zM516.654545-128C232.727273-128 4.654545 100.072727 4.654545 384S232.727273 896 516.654545 896s512-228.072727 512-512-230.4-512-512-512z m0 46.545455c256 0 465.454545 209.454545 465.454546 465.454545s-209.454545 465.454545-465.454546 465.454545-465.454545-209.454545-465.454545-465.454545 207.127273-465.454545 465.454545-465.454545z"  horiz-adv-x="1028" />
+
+    
+    <glyph glyph-name="shaixuan" unicode="&#59019;" d="M965.34016 781.21472c-14.0032 30.85312-44.82048 50.78528-78.50496 50.78528l-744.22272 0.01024a82.9184 82.9184 0 0 1-76.4928-50.70336c-13.79328-32.0768-7.40352-68.10112 16.5888-92.11904l2.64192-3.16928 274.79552-220.2368a23.76192 23.76192 0 0 0 9.26208-18.38592v-377.83552a84.13184 84.13184 0 0 1 44.63104-75.01824l118.96832-66.27328c13.12256-6.85056 26.64448-10.17856 41.32352-10.17856h0.06656c23.30624 0 45.00992 8.9856 61.11744 25.30304 15.85664 16.06144 24.4224 37.48352 24.12544 60.39552V445.04576a24.36608 24.36608 0 0 0 8.5248 18.304l278.7072 222.83264 3.29728 3.22048a83.57376 83.57376 0 0 1 15.17056 91.81184z m-60.0576-48.20992l-0.38912-0.52736-275.25632-221.55264c-20.10112-16.20992-31.62112-40.4736-31.62112-66.57024v-440.56064c0.0256-8.29952-4.352-16.1536-11.84256-20.72576a26.66496 26.66496 0 0 0-11.77088-2.75456 23.92064 23.92064 0 0 0-11.52 2.85696l-118.89664 65.05472c-7.30112 3.60448-11.84256 11.56608-11.84256 20.78208V446.7968c0 25.81504-11.74016 50.048-32.19968 66.48832L134.13376 725.46816l-9.32352 7.6288c-5.15584 7.28064-5.74464 16.68608-1.68448 24.2176 3.72224 8.26368 11.52 13.19424 20.85888 13.19424H886.784a23.26016 23.26016 0 0 0 20.76672-13.04576 23.5008 23.5008 0 0 0-2.26816-24.45824zM748.20608 90.30656c-16.34816 0.4352-29.50656 14.18752-29.18912 30.67904 0 17.03424 13.09696 30.81728 29.18912 30.81728h195.4048c16.09728 0 29.18912-13.77792 29.18912-30.71488a29.6192 29.6192 0 0 0-8.064-21.4272 29.50656 29.50656 0 0 0-20.736-9.33888l-0.38912-0.01536h-195.4048zM748.20608 228.08064c-16.32256 0.42496-29.47072 14.16704-29.18912 30.6176 0 17.05984 13.09696 30.86336 29.18912 30.86336h195.4048c16.09728 0 29.18912-13.80352 29.18912-30.77632a29.31712 29.31712 0 0 0-7.79776-21.29408 29.22496 29.22496 0 0 0-20.44416-9.39008l-0.9472-0.0256h-195.4048zM748.20608 365.8496c-16.32256 0.42496-29.47072 14.16704-29.18912 30.62272 0 17.024 13.09696 30.7968 29.18912 30.7968h195.4048c16.09728 0 29.18912-13.7728 29.18912-30.70976 0.3072-8.04352-2.46272-15.53408-7.79776-21.29408s-12.5952-9.09312-20.44416-9.3952l-0.98816-0.02048h-195.36384z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="renyuan" unicode="&#59284;" d="M512 405.333333c-136.533333 0-247.466667 110.933333-247.466667 247.466667S375.466667 896 512 896s247.466667-110.933333 247.466667-247.466667-110.933333-243.2-247.466667-243.2zM512 810.666667C422.4 810.666667 349.866667 738.133333 349.866667 648.533333S422.4 490.666667 512 490.666667s162.133333 72.533333 162.133333 162.133333S601.6 810.666667 512 810.666667zM938.666667-128c-25.6 0-42.666667 17.066667-42.666667 42.666667 0 187.733333-170.666667 341.333333-384 341.333333s-384-153.6-384-341.333333c0-25.6-17.066667-42.666667-42.666667-42.666667s-42.666667 17.066667-42.666666 42.666667c0 234.666667 209.066667 426.666667 469.333333 426.666666s469.333333-192 469.333333-426.666666c0-25.6-17.066667-42.666667-42.666666-42.666667z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>
--- a/src/assets/font/iconfont.ttf
+++ b/src/assets/font/iconfont.ttf
--- a/src/assets/font/iconfont.woff
+++ b/src/assets/font/iconfont.woff
--- a/src/assets/font/iconfont.woff2
+++ b/src/assets/font/iconfont.woff2
--- a/src/assets/font/project_iconfont.css
+++ b/src/assets/font/project_iconfont.css
@@ -0,0 +1,17 @@
+@font-face {
+  font-family: "iconfont";
+  src: url('project_iconfont.ttf?t=1616047723997') format('truetype');
+  /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-warn-f:before {
+  content: "\e60e";
+}
--- a/src/assets/font/project_iconfont.ttf
+++ b/src/assets/font/project_iconfont.ttf
--- a/src/assets/images/icon/icon_del.png
+++ b/src/assets/images/icon/icon_del.png
--- a/src/assets/images/logo.png
+++ b/src/assets/images/logo.png
--- a/src/assets/images/share/bg.jpg
+++ b/src/assets/images/share/bg.jpg
--- a/src/assets/images/share/btn.png
+++ b/src/assets/images/share/btn.png
--- a/src/assets/shader/aurora_frag.glsl
+++ b/src/assets/shader/aurora_frag.glsl
@@ -0,0 +1,146 @@
+uniform vec3     iResolution;           // viewport resolution (in pixels)
+uniform float     iTime;                 // shader playback time (in seconds)
+uniform vec4     iMouse;   
+#define time iTime
+
+mat2 mm2(in float a){float c = cos(a), s = sin(a);return mat2(c,s,-s,c);}
+mat2 m2 = mat2(0.95534, 0.29552, -0.29552, 0.95534);
+float tri(in float x){return clamp(abs(fract(x)-.5),0.01,0.49);}
+vec2 tri2(in vec2 p){return vec2(tri(p.x)+tri(p.y),tri(p.y+tri(p.x)));}
+
+float triNoise2d(in vec2 p, float spd)
+{
+    float z=1.8;
+    float z2=2.5;
+	float rz = 0.;
+    p *= mm2(p.x*0.06);
+    vec2 bp = p;
+	for (float i=0.; i<5.; i++ )
+	{
+        vec2 dg = tri2(bp*1.85)*.75;
+        dg *= mm2(time*spd);
+        p -= dg/z2;
+
+        bp *= 1.3;
+        z2 *= .45;
+        z *= .42;
+		p *= 1.21 + (rz-1.0)*.02;
+        
+        rz += tri(p.x+tri(p.y))*z;
+        p*= -m2;
+	}
+    return clamp(1./pow(rz*29., 1.3),0.,.55);
+}
+
+float hash21(in vec2 n){ return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453); }
+vec4 aurora(vec3 ro, vec3 rd)
+{
+    vec4 col = vec4(0);
+    vec4 avgCol = vec4(0);
+    
+    for(float i=0.;i<50.;i++)
+    {
+        float of = 0.006*hash21(gl_FragCoord.xy)*smoothstep(0.,15., i);
+        float pt = ((.8+pow(i,1.4)*.002)-ro.y)/(rd.y*2.+0.4);
+        pt -= of;
+    	vec3 bpos = ro + pt*rd;
+        vec2 p = bpos.zx;
+        float rzt = triNoise2d(p, 0.06);
+        vec4 col2 = vec4(0,0,0, rzt);
+        col2.rgb = (sin(1.-vec3(2.15,-.5, 1.2)+i*0.043)*0.5+0.5)*rzt;
+        avgCol =  mix(avgCol, col2, .5);
+        col += avgCol*exp2(-i*0.065 - 2.5)*smoothstep(0.,5., i);
+        
+    }
+    
+    col *= (clamp(rd.y*15.+.4,0.,1.));
+    
+    
+    //return clamp(pow(col,vec4(1.3))*1.5,0.,1.);
+    //return clamp(pow(col,vec4(1.7))*2.,0.,1.);
+    //return clamp(pow(col,vec4(1.5))*2.5,0.,1.);
+    //return clamp(pow(col,vec4(1.8))*1.5,0.,1.);
+    
+    //return smoothstep(0.,1.1,pow(col,vec4(1.))*1.5);
+    return col*1.8;
+    //return pow(col,vec4(1.))*2.
+}
+
+
+//-------------------Background and Stars--------------------
+
+vec3 nmzHash33(vec3 q)
+{
+    uvec3 p = uvec3(ivec3(q));
+    p = p*uvec3(374761393U, 1103515245U, 668265263U) + p.zxy + p.yzx;
+    p = p.yzx*(p.zxy^(p >> 3U));
+    return vec3(p^(p >> 16U))*(1.0/vec3(0xffffffffU));
+}
+
+vec3 stars(in vec3 p)
+{
+    vec3 c = vec3(0.);
+    float res = iResolution.x*1.;
+    
+	for (float i=0.;i<4.;i++)
+    {
+        vec3 q = fract(p*(.15*res))-0.5;
+        vec3 id = floor(p*(.15*res));
+        vec2 rn = nmzHash33(id).xy;
+        float c2 = 1.-smoothstep(0.,.6,length(q));
+        c2 *= step(rn.x,.0005+i*i*0.001);
+        c += c2*(mix(vec3(1.0,0.49,0.1),vec3(0.75,0.9,1.),rn.y)*0.1+0.9);
+        p *= 1.3;
+    }
+    return c*c*.8;
+}
+
+vec3 bg(in vec3 rd)
+{
+    float sd = dot(normalize(vec3(-0.5, -0.6, 0.9)), rd)*0.5+0.5;
+    sd = pow(sd, 5.);
+    vec3 col = mix(vec3(0.05,0.1,0.2), vec3(0.1,0.05,0.2), sd);
+    return col*.63;
+}
+//-----------------------------------------------------------
+
+
+void main()
+{
+	vec2 q = gl_FragCoord.xy / iResolution.xy;
+    vec2 p = q - 0.5;
+	p.x*=iResolution.x/iResolution.y;
+    
+    vec3 ro = vec3(0,0,-6.7);
+    vec3 rd = normalize(vec3(p,1.3));
+    vec2 mo = iMouse.xy / iResolution.xy-.5;
+    mo = (mo==vec2(-.5))?mo=vec2(-0.1,0.1):mo;
+	mo.x *= iResolution.x/iResolution.y;
+    rd.yz *= mm2(mo.y);
+    rd.xz *= mm2(mo.x + sin(time*0.05)*0.2);
+    
+    vec3 col = vec3(0.);
+    vec3 brd = rd;
+    float fade = smoothstep(0.,0.01,abs(brd.y))*0.1+0.9;
+    
+    col = bg(rd)*fade;
+    
+    if (rd.y > 0.){
+        vec4 aur = smoothstep(0.,1.5,aurora(ro,rd))*fade;
+        col += stars(rd);
+        col = col*(1.-aur.a) + aur.rgb;
+    }
+    else //Reflections
+    {
+        rd.y = abs(rd.y);
+        col = bg(rd)*fade*0.6;
+        vec4 aur = smoothstep(0.0,2.5,aurora(ro,rd));
+        col += stars(rd)*0.1;
+        col = col*(1.-aur.a) + aur.rgb;
+        vec3 pos = ro + ((0.5-ro.y)/rd.y)*rd;
+        float nz2 = triNoise2d(pos.xz*vec2(.5,.7), 0.);
+        col += mix(vec3(0.2,0.25,0.5)*0.08,vec3(0.3,0.3,0.5)*0.7, nz2*0.4);
+    }
+    
+	gl_FragColor = vec4(col, 1.);
+}
--- a/src/assets/shader/cloud2_frag.glsl
+++ b/src/assets/shader/cloud2_frag.glsl
@@ -0,0 +1,114 @@
+uniform vec3     iResolution;           // viewport resolution (in pixels)
+uniform float     iTime;                 // shader playback time (in seconds)
+uniform vec4     iMouse;   
+
+const float cloudscale = 1.1;
+const float speed = 0.03;
+const float clouddark = 0.5;
+const float cloudlight = 0.3;
+const float cloudcover = 0.2;
+const float cloudalpha = 8.0;
+const float skytint = 0.5;
+const vec3 skycolour1 = vec3(0.2, 0.4, 0.6);
+const vec3 skycolour2 = vec3(0.4, 0.7, 1.0);
+
+const mat2 m = mat2( 1.6,  1.2, -1.2,  1.6 );
+
+vec2 hash( vec2 p ) {
+	p = vec2(dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)));
+	return -1.0 + 2.0*fract(sin(p)*43758.5453123);
+}
+
+float noise( in vec2 p ) {
+    const float K1 = 0.366025404; // (sqrt(3)-1)/2;
+    const float K2 = 0.211324865; // (3-sqrt(3))/6;
+	vec2 i = floor(p + (p.x+p.y)*K1);	
+    vec2 a = p - i + (i.x+i.y)*K2;
+    vec2 o = (a.x>a.y) ? vec2(1.0,0.0) : vec2(0.0,1.0); //vec2 of = 0.5 + 0.5*vec2(sign(a.x-a.y), sign(a.y-a.x));
+    vec2 b = a - o + K2;
+	vec2 c = a - 1.0 + 2.0*K2;
+    vec3 h = max(0.5-vec3(dot(a,a), dot(b,b), dot(c,c) ), 0.0 );
+	vec3 n = h*h*h*h*vec3( dot(a,hash(i+0.0)), dot(b,hash(i+o)), dot(c,hash(i+1.0)));
+    return dot(n, vec3(70.0));	
+}
+
+float fbm(vec2 n) {
+	float total = 0.0, amplitude = 0.1;
+	for (int i = 0; i < 7; i++) {
+		total += noise(n) * amplitude;
+		n = m * n;
+		amplitude *= 0.4;
+	}
+	return total;
+}
+
+// -----------------------------------------------
+
+void main() {
+    vec2 p = gl_FragCoord.xy / iResolution.xy;
+	vec2 uv = p*vec2(iResolution.x/iResolution.y,1.0);    
+    float time = iTime * speed;
+    float q = fbm(uv * cloudscale * 0.5);
+    
+    //ridged noise shape
+	float r = 0.0;
+	uv *= cloudscale;
+    uv -= q - time;
+    float weight = 0.8;
+    for (int i=0; i<8; i++){
+		r += abs(weight*noise( uv ));
+        uv = m*uv + time;
+		weight *= 0.7;
+    }
+    
+    //noise shape
+	float f = 0.0;
+    uv = p*vec2(iResolution.x/iResolution.y,1.0);
+	uv *= cloudscale;
+    uv -= q - time;
+    weight = 0.7;
+    for (int i=0; i<8; i++){
+		f += weight*noise( uv );
+        uv = m*uv + time;
+		weight *= 0.6;
+    }
+    
+    f *= r + f;
+    
+    //noise colour
+    float c = 0.0;
+    time = iTime * speed * 2.0;
+    uv = p*vec2(iResolution.x/iResolution.y,1.0);
+	uv *= cloudscale*2.0;
+    uv -= q - time;
+    weight = 0.4;
+    for (int i=0; i<7; i++){
+		c += weight*noise( uv );
+        uv = m*uv + time;
+		weight *= 0.6;
+    }
+    
+    //noise ridge colour
+    float c1 = 0.0;
+    time = iTime * speed * 3.0;
+    uv = p*vec2(iResolution.x/iResolution.y,1.0);
+	uv *= cloudscale*3.0;
+    uv -= q - time;
+    weight = 0.4;
+    for (int i=0; i<7; i++){
+		c1 += abs(weight*noise( uv ));
+        uv = m*uv + time;
+		weight *= 0.6;
+    }
+	
+    c += c1;
+    
+    vec3 skycolour = mix(skycolour2, skycolour1, p.y);
+    vec3 cloudcolour = vec3(1.1, 1.1, 0.9) * clamp((clouddark + cloudlight*c), 0.0, 1.0);
+   
+    f = cloudcover + cloudalpha*f*r;
+    
+    vec3 result = mix(skycolour, clamp(skytint * skycolour + cloudcolour, 0.0, 1.0), clamp(f + c, 0.0, 1.0));
+    
+	gl_FragColor = vec4( result, 1.0 );
+}
--- a/src/assets/shader/cloud_frag.glsl
+++ b/src/assets/shader/cloud_frag.glsl
@@ -0,0 +1,126 @@
+uniform vec3      iResolution;           // viewport resolution (in pixels)
+uniform float     iTime;                 // shader playback time (in seconds)
+uniform vec4      iMouse;   
+    
+mat2 rot(in float a){float c = cos(a), s = sin(a);return mat2(c,s,-s,c);}
+const mat3 m3 = mat3(0.33338, 0.56034, -0.71817, -0.87887, 0.32651, -0.15323, 0.15162, 0.69596, 0.61339)*1.93;
+float mag2(vec2 p){return dot(p,p);}
+float linstep(in float mn, in float mx, in float x){ return clamp((x - mn)/(mx - mn), 0., 1.); }
+float prm1 = 0.;
+vec2 bsMo = vec2(0);
+
+vec2 disp(float t){ return vec2(sin(t*0.22)*1., cos(t*0.175)*1.)*2.; }
+
+vec2 map(vec3 p)
+{
+    vec3 p2 = p;
+    p2.xy -= disp(p.z).xy;
+    p.xy *= rot(sin(p.z+iTime)*(0.1 + prm1*0.05) + iTime*0.09);
+    float cl = mag2(p2.xy);
+    float d = 0.;
+    p *= .61;
+    float z = 1.;
+    float trk = 1.;
+    float dspAmp = 0.1 + prm1*0.2;
+    for(int i = 0; i < 5; i++)
+    {
+		p += sin(p.zxy*0.75*trk + iTime*trk*.8)*dspAmp;
+        d -= abs(dot(cos(p), sin(p.yzx))*z);
+        z *= 0.57;
+        trk *= 1.4;
+        p = p*m3;
+    }
+    d = abs(d + prm1*3.)+ prm1*.3 - 2.5 + bsMo.y;
+    return vec2(d + cl*.2 + 0.25, cl);
+}
+
+vec4 render( in vec3 ro, in vec3 rd, float time )
+{
+	vec4 rez = vec4(0);
+    const float ldst = 8.;
+	vec3 lpos = vec3(disp(time + ldst)*0.5, time + ldst);
+	float t = 1.5;
+	float fogT = 0.;
+	for(int i=0; i<130; i++)
+	{
+		if(rez.a > 0.99)break;
+
+		vec3 pos = ro + t*rd;
+        vec2 mpv = map(pos);
+		float den = clamp(mpv.x-0.3,0.,1.)*1.12;
+		float dn = clamp((mpv.x + 2.),0.,3.);
+        
+		vec4 col = vec4(0);
+        if (mpv.x > 0.6)
+        {
+        
+            col = vec4(sin(vec3(5.,0.4,0.2) + mpv.y*0.1 +sin(pos.z*0.4)*0.5 + 1.8)*0.5 + 0.5,0.08);
+            col *= den*den*den;
+			col.rgb *= linstep(4.,-2.5, mpv.x)*2.3;
+            float dif =  clamp((den - map(pos+.8).x)/9., 0.001, 1. );
+            dif += clamp((den - map(pos+.35).x)/2.5, 0.001, 1. );
+            col.xyz *= den*(vec3(0.005,.045,.075) + 1.5*vec3(0.033,0.07,0.03)*dif);
+        }
+		
+		float fogC = exp(t*0.2 - 2.2);
+		col.rgba += vec4(0.06,0.11,0.11, 0.1)*clamp(fogC-fogT, 0., 1.);
+		fogT = fogC;
+		rez = rez + col*(1. - rez.a);
+		t += clamp(0.5 - dn*dn*.05, 0.09, 0.3);
+	}
+	return clamp(rez, 0.0, 1.0);
+}
+
+float getsat(vec3 c)
+{
+    float mi = min(min(c.x, c.y), c.z);
+    float ma = max(max(c.x, c.y), c.z);
+    return (ma - mi)/(ma+ 1e-7);
+}
+
+//from my "Will it blend" shader (https://www.shadertoy.com/view/lsdGzN)
+vec3 iLerp(in vec3 a, in vec3 b, in float x)
+{
+    vec3 ic = mix(a, b, x) + vec3(1e-6,0.,0.);
+    float sd = abs(getsat(ic) - mix(getsat(a), getsat(b), x));
+    vec3 dir = normalize(vec3(2.*ic.x - ic.y - ic.z, 2.*ic.y - ic.x - ic.z, 2.*ic.z - ic.y - ic.x));
+    float lgt = dot(vec3(1.0), ic);
+    float ff = dot(dir, normalize(ic));
+    ic += 1.5*dir*sd*ff*lgt;
+    return clamp(ic,0.,1.);
+}
+
+void main()
+{	
+	vec2 q = gl_FragCoord.xy/iResolution.xy;
+    vec2 p = (gl_FragCoord.xy - 0.5*iResolution.xy)/iResolution.y;
+    bsMo = (iMouse.xy - 0.5*iResolution.xy)/iResolution.y;
+    
+    float time = iTime*3.;
+    vec3 ro = vec3(0,0,time);
+    
+    ro += vec3(sin(iTime)*0.5,sin(iTime*1.)*0.,0);
+        
+    float dspAmp = .85;
+    ro.xy += disp(ro.z)*dspAmp;
+    float tgtDst = 3.5;
+    
+    vec3 target = normalize(ro - vec3(disp(time + tgtDst)*dspAmp, time + tgtDst));
+    ro.x -= bsMo.x*2.;
+    vec3 rightdir = normalize(cross(target, vec3(0,1,0)));
+    vec3 updir = normalize(cross(rightdir, target));
+    rightdir = normalize(cross(updir, target));
+	vec3 rd=normalize((p.x*rightdir + p.y*updir)*1. - target);
+    rd.xy *= rot(-disp(time + 3.5).x*0.2 + bsMo.x);
+    prm1 = smoothstep(-0.4, 0.4,sin(iTime*0.3));
+	vec4 scn = render(ro, rd, time);
+		
+    vec3 col = scn.rgb;
+    col = iLerp(col.bgr, col.rgb, clamp(1.-prm1,0.05,1.));
+    
+    col = pow(col, vec3(.55,0.65,0.6))*vec3(1.,.97,.9);
+
+    col *= pow( 16.0*q.x*q.y*(1.0-q.x)*(1.0-q.y), 0.12)*0.7+0.3; //Vign
+    
+	gl_FragColor = vec4( col, 1.0 );
+}
--- a/src/assets/shader/cloud_vertex.glsl
+++ b/src/assets/shader/cloud_vertex.glsl
@@ -0,0 +1,3 @@
+void main() { 
+    gl_Position = vec4( position, 1.0 ); 
+}
--- a/src/assets/shader/color_fragment.glsl
+++ b/src/assets/shader/color_fragment.glsl
@@ -0,0 +1,10 @@
+uniform sampler2D baseTexture;
+uniform sampler2D bloomTexture;
+
+varying vec2 vUv;
+
+void main() {
+
+    gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );
+
+}
--- a/src/assets/shader/color_vertex.glsl
+++ b/src/assets/shader/color_vertex.glsl
@@ -0,0 +1,9 @@
+varying vec2 vUv;
+
+void main() {
+
+    vUv = uv;
+
+    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+}
--- a/src/assets/shader/rain_frag.glsl
+++ b/src/assets/shader/rain_frag.glsl
@@ -0,0 +1,353 @@
+
+uniform vec3     iResolution;           // viewport resolution (in pixels)
+uniform float     iTime;                 // shader playback time (in seconds)
+uniform vec4     iMouse;   
+
+#define S(x, y, z) smoothstep(x, y, z)
+#define B(a, b, edge, t) S(a-edge, a+edge, t)*S(b+edge, b-edge, t)
+#define sat(x) clamp(x,0.,1.)
+
+#define streetLightCol vec3(1., .7, .3)
+#define headLightCol vec3(.8, .8, 1.)
+#define tailLightCol vec3(1., .1, .1)
+
+#define HIGH_QUALITY
+#define CAM_SHAKE 1.
+#define LANE_BIAS .5
+#define RAIN
+//#define DROP_DEBUG
+
+vec3 ro, rd;
+
+float N(float t) {
+	return fract(sin(t*10234.324)*123423.23512);
+}
+vec3 N31(float p) {
+    //  3 out, 1 in... DAVE HOSKINS
+   vec3 p3 = fract(vec3(p) * vec3(.1031,.11369,.13787));
+   p3 += dot(p3, p3.yzx + 19.19);
+   return fract(vec3((p3.x + p3.y)*p3.z, (p3.x+p3.z)*p3.y, (p3.y+p3.z)*p3.x));
+}
+float N2(vec2 p)
+{	// Dave Hoskins - https://www.shadertoy.com/view/4djSRW
+	vec3 p3  = fract(vec3(p.xyx) * vec3(443.897, 441.423, 437.195));
+    p3 += dot(p3, p3.yzx + 19.19);
+    return fract((p3.x + p3.y) * p3.z);
+}
+
+
+float DistLine(vec3 ro, vec3 rd, vec3 p) {
+	return length(cross(p-ro, rd));
+}
+ 
+vec3 ClosestPoint(vec3 ro, vec3 rd, vec3 p) {
+    // returns the closest point on ray r to point p
+    return ro + max(0., dot(p-ro, rd))*rd;
+}
+
+float Remap(float a, float b, float c, float d, float t) {
+	return ((t-a)/(b-a))*(d-c)+c;
+}
+
+float BokehMask(vec3 ro, vec3 rd, vec3 p, float size, float blur) {
+	float d = DistLine(ro, rd, p);
+    float m = S(size, size*(1.-blur), d);
+    
+    #ifdef HIGH_QUALITY
+    m *= mix(.7, 1., S(.8*size, size, d));
+    #endif
+    
+    return m;
+}
+
+
+
+float SawTooth(float t) {
+    return cos(t+cos(t))+sin(2.*t)*.2+sin(4.*t)*.02;
+}
+
+float DeltaSawTooth(float t) {
+    return 0.4*cos(2.*t)+0.08*cos(4.*t) - (1.-sin(t))*sin(t+cos(t));
+}  
+
+vec2 GetDrops(vec2 uv, float seed, float m) {
+    
+    float t = iTime+m*30.;
+    vec2 o = vec2(0.);
+    
+    #ifndef DROP_DEBUG
+    uv.y += t*.05;
+    #endif
+    
+    uv *= vec2(10., 2.5)*2.;
+    vec2 id = floor(uv);
+    vec3 n = N31(id.x + (id.y+seed)*546.3524);
+    vec2 bd = fract(uv);
+    
+    vec2 uv2 = bd;
+    
+    bd -= .5;
+    
+    bd.y*=4.;
+    
+    bd.x += (n.x-.5)*.6;
+    
+    t += n.z * 6.28;
+    float slide = SawTooth(t);
+    
+    float ts = 1.5;
+    vec2 trailPos = vec2(bd.x*ts, (fract(bd.y*ts*2.-t*2.)-.5)*.5);
+    
+    bd.y += slide*2.;								// make drops slide down
+    
+    #ifdef HIGH_QUALITY
+    float dropShape = bd.x*bd.x;
+    dropShape *= DeltaSawTooth(t);
+    bd.y += dropShape;								// change shape of drop when it is falling
+    #endif
+    
+    float d = length(bd);							// distance to main drop
+    
+    float trailMask = S(-.2, .2, bd.y);				// mask out drops that are below the main
+    trailMask *= bd.y;								// fade dropsize
+    float td = length(trailPos*max(.5, trailMask));	// distance to trail drops
+    
+    float mainDrop = S(.2, .1, d);
+    float dropTrail = S(.1, .02, td);
+    
+    dropTrail *= trailMask;
+    o = mix(bd*mainDrop, trailPos, dropTrail);		// mix main drop and drop trail
+    
+    #ifdef DROP_DEBUG
+    if(uv2.x<.02 || uv2.y<.01) o = vec2(1.);
+    #endif
+    
+    return o;
+}
+
+void CameraSetup(vec2 uv, vec3 pos, vec3 lookat, float zoom, float m) {
+	ro = pos;
+    vec3 f = normalize(lookat-ro);
+    vec3 r = cross(vec3(0., 1., 0.), f);
+    vec3 u = cross(f, r);
+    float t = iTime;
+    
+    vec2 offs = vec2(0.);
+    #ifdef RAIN
+    vec2 dropUv = uv; 
+    
+    #ifdef HIGH_QUALITY
+    float x = (sin(t*.1)*.5+.5)*.5;
+    x = -x*x;
+    float s = sin(x);
+    float c = cos(x);
+    
+    mat2 rot = mat2(c, -s, s, c);
+   
+    #ifndef DROP_DEBUG
+    dropUv = uv*rot;
+    dropUv.x += -sin(t*.1)*.5;
+    #endif
+    #endif
+    
+    offs = GetDrops(dropUv, 1., m);
+    
+    #ifndef DROP_DEBUG
+    offs += GetDrops(dropUv*1.4, 10., m);
+    #ifdef HIGH_QUALITY
+    offs += GetDrops(dropUv*2.4, 25., m);
+    //offs += GetDrops(dropUv*3.4, 11.);
+    //offs += GetDrops(dropUv*3., 2.);
+    #endif
+    
+    float ripple = sin(t+uv.y*3.1415*30.+uv.x*124.)*.5+.5;
+    ripple *= .005;
+    offs += vec2(ripple*ripple, ripple);
+    #endif
+    #endif
+    vec3 center = ro + f*zoom;
+    vec3 i = center + (uv.x-offs.x)*r + (uv.y-offs.y)*u;
+    
+    rd = normalize(i-ro);
+}
+
+vec3 HeadLights(float i, float t) {
+    float z = fract(-t*2.+i);
+    vec3 p = vec3(-.3, .1, z*40.);
+    float d = length(p-ro);
+    
+    float size = mix(.03, .05, S(.02, .07, z))*d;
+    float m = 0.;
+    float blur = .1;
+    m += BokehMask(ro, rd, p-vec3(.08, 0., 0.), size, blur);
+    m += BokehMask(ro, rd, p+vec3(.08, 0., 0.), size, blur);
+    
+    #ifdef HIGH_QUALITY
+    m += BokehMask(ro, rd, p+vec3(.1, 0., 0.), size, blur);
+    m += BokehMask(ro, rd, p-vec3(.1, 0., 0.), size, blur);
+    #endif
+    
+    float distFade = max(.01, pow(1.-z, 9.));
+    
+    blur = .8;
+    size *= 2.5;
+    float r = 0.;
+    r += BokehMask(ro, rd, p+vec3(-.09, -.2, 0.), size, blur);
+    r += BokehMask(ro, rd, p+vec3(.09, -.2, 0.), size, blur);
+    r *= distFade*distFade;
+    
+    return headLightCol*(m+r)*distFade;
+}
+
+
+vec3 TailLights(float i, float t) {
+    t = t*1.5+i;
+    
+    float id = floor(t)+i;
+    vec3 n = N31(id);
+    
+    float laneId = S(LANE_BIAS, LANE_BIAS+.01, n.y);
+    
+    float ft = fract(t);
+    
+    float z = 3.-ft*3.;						// distance ahead
+    
+    laneId *= S(.2, 1.5, z);				// get out of the way!
+    float lane = mix(.6, .3, laneId);
+    vec3 p = vec3(lane, .1, z);
+    float d = length(p-ro);
+    
+    float size = .05*d;
+    float blur = .1;
+    float m = BokehMask(ro, rd, p-vec3(.08, 0., 0.), size, blur) +
+    			BokehMask(ro, rd, p+vec3(.08, 0., 0.), size, blur);
+    
+    #ifdef HIGH_QUALITY
+    float bs = n.z*3.;						// start braking at random distance		
+    float brake = S(bs, bs+.01, z);
+    brake *= S(bs+.01, bs, z-.5*n.y);		// n.y = random brake duration
+    
+    m += (BokehMask(ro, rd, p+vec3(.1, 0., 0.), size, blur) +
+    	BokehMask(ro, rd, p-vec3(.1, 0., 0.), size, blur))*brake;
+    #endif
+    
+    float refSize = size*2.5;
+    m += BokehMask(ro, rd, p+vec3(-.09, -.2, 0.), refSize, .8);
+    m += BokehMask(ro, rd, p+vec3(.09, -.2, 0.), refSize, .8);
+    vec3 col = tailLightCol*m*ft; 
+    
+    float b = BokehMask(ro, rd, p+vec3(.12, 0., 0.), size, blur);
+    b += BokehMask(ro, rd, p+vec3(.12, -.2, 0.), refSize, .8)*.2;
+    
+    vec3 blinker = vec3(1., .7, .2);
+    blinker *= S(1.5, 1.4, z)*S(.2, .3, z);
+    blinker *= sat(sin(t*200.)*100.);
+    blinker *= laneId;
+    col += blinker*b;
+    
+    return col;
+}
+
+vec3 StreetLights(float i, float t) {
+	 float side = sign(rd.x);
+    float offset = max(side, 0.)*(1./16.);
+    float z = fract(i-t+offset); 
+    vec3 p = vec3(2.*side, 2., z*60.);
+    float d = length(p-ro);
+	float blur = .1;
+    vec3 rp = ClosestPoint(ro, rd, p);
+    float distFade = Remap(1., .7, .1, 1.5, 1.-pow(1.-z,6.));
+    distFade *= (1.-z);
+    float m = BokehMask(ro, rd, p, .05*d, blur)*distFade;
+    
+    return m*streetLightCol;
+}
+
+vec3 EnvironmentLights(float i, float t) {
+	float n = N(i+floor(t));
+    
+    float side = sign(rd.x);
+    float offset = max(side, 0.)*(1./16.);
+    float z = fract(i-t+offset+fract(n*234.));
+    float n2 = fract(n*100.);
+    vec3 p = vec3((3.+n)*side, n2*n2*n2*1., z*60.);
+    float d = length(p-ro);
+	float blur = .1;
+    vec3 rp = ClosestPoint(ro, rd, p);
+    float distFade = Remap(1., .7, .1, 1.5, 1.-pow(1.-z,6.));
+    float m = BokehMask(ro, rd, p, .05*d, blur);
+    m *= distFade*distFade*.5;
+    
+    m *= 1.-pow(sin(z*6.28*20.*n)*.5+.5, 20.);
+    vec3 randomCol = vec3(fract(n*-34.5), fract(n*4572.), fract(n*1264.));
+    vec3 col = mix(tailLightCol, streetLightCol, fract(n*-65.42));
+    col = mix(col, randomCol, n);
+    return m*col*.2;
+}
+
+void main()
+{
+	float t = iTime;
+    vec3 col = vec3(0.);
+    vec2 uv = gl_FragCoord.xy / iResolution.xy; // 0 <> 1
+    
+    uv -= .5;
+    uv.x *= iResolution.x/iResolution.y;
+    
+    vec2 mouse = iMouse.xy/iResolution.xy;
+    
+    vec3 pos = vec3(.3, .15, 0.);
+    
+    float bt = t * 5.;
+    float h1 = N(floor(bt));
+    float h2 = N(floor(bt+1.));
+    float bumps = mix(h1, h2, fract(bt))*.1;
+    bumps = bumps*bumps*bumps*CAM_SHAKE;
+    
+    pos.y += bumps;
+    float lookatY = pos.y+bumps;
+    vec3 lookat = vec3(0.3, lookatY, 1.);
+    vec3 lookat2 = vec3(0., lookatY, .7);
+    lookat = mix(lookat, lookat2, sin(t*.1)*.5+.5);
+    
+    uv.y += bumps*4.;
+    CameraSetup(uv, pos, lookat, 2., mouse.x);
+   
+    t *= .03;
+    t += mouse.x;
+    
+    // fix for GLES devices by MacroMachines
+    #ifdef GL_ES
+	const float stp = 1./8.;
+	#else
+	float stp = 1./8.
+	#endif
+    
+    for(float i=0.; i<1.; i+=stp) {
+       col += StreetLights(i, t);
+    }
+    
+    for(float i=0.; i<1.; i+=stp) {
+        float n = N(i+floor(t));
+    	col += HeadLights(i+n*stp*.7, t);
+    }
+    
+    #ifndef GL_ES
+    #ifdef HIGH_QUALITY
+    stp = 1./32.;
+    #else
+    stp = 1./16.;
+    #endif
+    #endif
+    
+    for(float i=0.; i<1.; i+=stp) {
+       col += EnvironmentLights(i, t);
+    }
+    
+    col += TailLights(0., t);
+    col += TailLights(.5, t);
+    
+    col += sat(rd.y)*vec3(.6, .5, .9);
+    
+	gl_FragColor = vec4(col, 0.);
+}
--- a/src/assets/shader/star_frag.glsl
+++ b/src/assets/shader/star_frag.glsl
@@ -0,0 +1,105 @@
+uniform vec3     iResolution;           // viewport resolution (in pixels)
+uniform float     iTime;                 // shader playback time (in seconds)
+uniform vec4     iMouse;   
+precision highp float;
+
+
+float gTime = 0.;
+const float REPEAT = 5.0;
+
+// 回転行列
+mat2 rot(float a) {
+	float c = cos(a), s = sin(a);
+	return mat2(c,s,-s,c);
+}
+
+float sdBox( vec3 p, vec3 b )
+{
+	vec3 q = abs(p) - b;
+	return length(max(q,0.0)) + min(max(q.x,max(q.y,q.z)),0.0);
+}
+
+float box(vec3 pos, float scale) {
+	pos *= scale;
+	float base = sdBox(pos, vec3(.4,.4,.1)) /1.5;
+	pos.xy *= 5.;
+	pos.y -= 3.5;
+	pos.xy *= rot(.75);
+	float result = -base;
+	return result;
+}
+
+float box_set(vec3 pos, float iTime) {
+	vec3 pos_origin = pos;
+	pos = pos_origin;
+	pos .y += sin(gTime * 0.4) * 2.5;
+	pos.xy *=   rot(.8);
+	float box1 = box(pos,2. - abs(sin(gTime * 0.4)) * 1.5);
+	pos = pos_origin;
+	pos .y -=sin(gTime * 0.4) * 2.5;
+	pos.xy *=   rot(.8);
+	float box2 = box(pos,2. - abs(sin(gTime * 0.4)) * 1.5);
+	pos = pos_origin;
+	pos .x +=sin(gTime * 0.4) * 2.5;
+	pos.xy *=   rot(.8);
+	float box3 = box(pos,2. - abs(sin(gTime * 0.4)) * 1.5);	
+	pos = pos_origin;
+	pos .x -=sin(gTime * 0.4) * 2.5;
+	pos.xy *=   rot(.8);
+	float box4 = box(pos,2. - abs(sin(gTime * 0.4)) * 1.5);	
+	pos = pos_origin;
+	pos.xy *=   rot(.8);
+	float box5 = box(pos,.5) * 6.;	
+	pos = pos_origin;
+	float box6 = box(pos,.5) * 6.;	
+	float result = max(max(max(max(max(box1,box2),box3),box4),box5),box6);
+	return result;
+}
+
+float map(vec3 pos, float iTime) {
+	vec3 pos_origin = pos;
+	float box_set1 = box_set(pos, iTime);
+
+	return box_set1;
+}
+
+
+void main() {
+	vec2 p = (gl_FragCoord.xy * 2. - iResolution.xy) / min(iResolution.x, iResolution.y);
+	vec3 ro = vec3(0., -0.2 ,iTime * 4.);
+	vec3 ray = normalize(vec3(p, 1.5));
+	ray.xy = ray.xy * rot(sin(iTime * .03) * 5.);
+	ray.yz = ray.yz * rot(sin(iTime * .05) * .2);
+	float t = 0.1;
+	vec3 col = vec3(0.);
+	float ac = 0.0;
+
+
+	for (int i = 0; i < 99; i++){
+		vec3 pos = ro + ray * t;
+		pos = mod(pos-2., 4.) -2.;
+		gTime = iTime -float(i) * 0.01;
+		
+		float d = map(pos, iTime);
+
+		d = max(abs(d), 0.01);
+		ac += exp(-d*23.);
+
+		t += d* 0.55;
+	}
+
+	col = vec3(ac * 0.02);
+
+	col +=vec3(0.,0.2 * abs(sin(iTime)),0.5 + sin(iTime) * 0.2);
+
+
+	gl_FragColor = vec4(col ,1.0 - t * (0.02 + 0.02 * sin (iTime)));
+}
+
+/** SHADERDATA
+{
+	"title": "Octgrams",
+	"description": "Lorem ipsum dolor",
+	"model": "person"
+}
+*/
--- a/src/assets/shader/through_frag.glsl
+++ b/src/assets/shader/through_frag.glsl
@@ -0,0 +1,24 @@
+uniform vec3     iResolution;           // viewport resolution (in pixels)
+uniform float     iTime;                 // shader playback time (in seconds)
+uniform vec4     iMouse;   
+uniform sampler2D iChannel0;
+uniform vec4     iDate;
+
+void main()
+{
+    vec4 O;
+    vec2 U;
+    float h = iResolution.y;  U = 4.*(U+iMouse.xy)/h;                    // normalized coordinates
+    vec2 K = ceil(U); U = 2.*fract(U)-1.;  // or K = 1.+2.*floor(U) to avoid non-fractionals
+    float a = atan(U.y,U.x), r=length(U), v=0., A;                       // polar coordinates
+    
+    for(int i=0; i<7; i++)
+        // if fractional, there is K.y turns to close the loop via K.x wings.
+        v = max(v,   ( 1. + .8* cos(A= K.x/K.y*a + iTime) ) / 1.8  // 1+cos(A) = depth-shading
+                   * smoothstep(1., 1.-120./h, 8.*abs(r-.2*sin(A)-.5))), // ribbon (antialiased)
+        a += 6.28;                                                       // next turn
+
+ 
+    O = v*vec4(.8,1,.3,1); O.g = sqrt(O.g);                              // greenify
+  //O = v*(.5+.5*sin(K.x+17.*K.y+iDate.w+vec4(0,2.1,-2.1,0)));           // random colors
+}