瀏覽代碼

增加背景动画

lilei 4 年之前
父節點
當前提交
74f10bbe00
共有 2 個文件被更改,包括 1216 次插入20 次删除
  1. 1133 0
      pages/index/bg.less
  2. 83 20
      pages/index/index.vue

+ 1133 - 0
pages/index/bg.less

@@ -0,0 +1,1133 @@
+.windmill {
+	position: absolute;
+	width: 100%;
+	height: 100vh;
+	margin: auto;
+	overflow: hidden;
+	background: #649ECD;
+	left: 0;
+	top: 0;
+	z-index: 100;
+}
+
+.windmill__sun {
+	position: absolute;
+	height: 30px;
+	width: 30px;
+	top: 6%;
+	left: 20%;
+	border-radius: 100%;
+	background: #B6E2FF;
+	box-shadow: 0 0 300px 80px #B6E2FF, 0 0 200px 40px #B6E2FF, 0 0 50px 10px #B6E2FF;
+}
+
+.windmill__slice-4 {
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 179px;
+	left: 105px;
+	border-left: 300px solid transparent;
+	border-right: 300px solid transparent;
+	border-bottom: 250px solid #649ECD;
+}
+
+.windmill__slice-4:after {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 55px;
+	left: -70px;
+	border-left: 180px solid transparent;
+	border-right: 180px solid transparent;
+	border-bottom: 195px solid #649ECD;
+}
+
+.windmill__slice-4:before {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 80px;
+	left: 60px;
+	border-left: 120px solid transparent;
+	border-right: 120px solid transparent;
+	border-bottom: 170px solid #649ECD;
+}
+
+.windmill__slice-4 div {
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 95px;
+	left: -392px;
+	border-left: 170px solid transparent;
+	border-right: 170px solid transparent;
+	border-bottom: 155px solid #649ECD;
+}
+
+.windmill__slice-4 div:after {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 20px;
+	left: -115px;
+	border-left: 150px solid transparent;
+	border-right: 150px solid transparent;
+	border-bottom: 135px solid #649ECD;
+}
+
+.windmill__slice-4 div:before {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: -38px;
+	left: -105px;
+	border-left: 220px solid transparent;
+	border-right: 220px solid transparent;
+	border-bottom: 195px solid #649ECD;
+}
+
+.windmill__slice-3 {
+	position: absolute;
+	width: 0;
+	height: 0;
+	bottom: 0;
+	left: -15px;
+	border-left: 320px solid transparent;
+	border-right: 320px solid transparent;
+	border-bottom: 150px solid #6096C4;
+}
+
+.windmill__slice-3:after {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 23px;
+	left: -78px;
+	border-left: 3px solid transparent;
+	border-right: 3px solid transparent;
+	border-bottom: 15px solid #6096C4;
+}
+
+.windmill__slice-3:before {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 31px;
+	left: 89px;
+	border-left: 3px solid transparent;
+	border-right: 3px solid transparent;
+	border-bottom: 15px solid #6096C4;
+}
+
+.windmill__slice-3 .windmill__tree-right {
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 2px;
+	left: 33px;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-bottom: 20px solid #6096C4;
+	opacity: .5;
+}
+
+.windmill__slice-3 .windmill__tree-right:after {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 15px;
+	left: 36px;
+	border-left: 7px solid transparent;
+	border-right: 7px solid transparent;
+	border-bottom: 25px solid #6096C4;
+}
+
+.windmill__slice-3 .windmill__tree-right:before {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: -2px;
+	left: -19px;
+	border-left: 4px solid transparent;
+	border-right: 4px solid transparent;
+	border-bottom: 16px solid #6096C4;
+}
+
+.windmill__slice-3 .windmill__tree-left {
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: -4px;
+	left: -30px;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-bottom: 20px solid #6096C4;
+}
+
+.windmill__slice-3 .windmill__tree-left:after {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 11px;
+	left: -12px;
+	border-left: 3px solid transparent;
+	border-right: 3px solid transparent;
+	border-bottom: 15px solid #6096C4;
+}
+
+.windmill__slice-3 .windmill__tree-left:before {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 19px;
+	left: -46px;
+	border-left: 4px solid transparent;
+	border-right: 4px solid transparent;
+	border-bottom: 20px solid #6096C4;
+}
+
+.windmill__slice-2 {
+	position: absolute;
+	width: 0;
+	height: 0;
+	bottom: 0;
+	left: 205px;
+	border-left: 250px solid transparent;
+	border-right: 250px solid transparent;
+	border-bottom: 110px solid #508BB3;
+}
+
+.windmill__slice-2:after {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 13px;
+	left: 46px;
+	border-left: 2px solid transparent;
+	border-right: 2px solid transparent;
+	border-bottom: 10px solid #508BB3;
+}
+
+.windmill__slice-2:before {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 10px;
+	left: 39px;
+	border-left: 3px solid transparent;
+	border-right: 3px solid transparent;
+	border-bottom: 12px solid #508BB3;
+}
+
+.windmill__slice-2 .windmill__tree-right {
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 6px;
+	left: -45px;
+	border-left: 4px solid transparent;
+	border-right: 4px solid transparent;
+	border-bottom: 17px #508BB3;
+}
+
+.windmill__slice-2 .windmill__tree-right:after {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: -16px;
+	left: 13px;
+	border-left: 6px solid transparent;
+	border-right: 6px solid transparent;
+	border-bottom: 24px solid #508BB3;
+}
+
+.windmill__slice-2 .windmill__tree-right:before {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: -11px;
+	left: 26px;
+	border-left: 3px solid transparent;
+	border-right: 3px solid transparent;
+	border-bottom: 15px solid #508BB3;
+}
+
+.windmill__slice-2 .windmill__tree-middle {
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 26px;
+	left: -88px;
+	border-left: 4px solid transparent;
+	border-right: 4px solid transparent;
+	border-bottom: 15px solid #508BB3;
+}
+
+.windmill__slice-2 .windmill__tree-middle:after {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: -13px;
+	left: 7px;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-bottom: 24px solid #508BB3;
+}
+
+.windmill__slice-2 .windmill__tree-middle:before {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: -18px;
+	left: 21px;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-bottom: 28px solid #508BB3;
+}
+
+.windmill__slice-2 .windmill__tree-left {
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 41px;
+	left: -151px;
+	border-left: 7px solid transparent;
+	border-right: 7px solid transparent;
+	border-bottom: 30px solid #508BB3;
+}
+
+.windmill__slice-2 .windmill__tree-left:after {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 2px;
+	left: 8px;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-bottom: 20px solid #508BB3;
+}
+
+.windmill__slice-2 .windmill__tree-left:before {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: -10px;
+	left: 19px;
+	border-left: 7px solid transparent;
+	border-right: 7px solid transparent;
+	border-bottom: 28px solid #508BB3;
+}
+
+.windmill__slice-1 {
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 190px;
+	left: 0px;
+	border-right: 400px solid transparent;
+	border-bottom: 315px solid #14222D;
+}
+
+.windmill__slice-1:after {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 150px;
+	left: 390px;
+	border-left: 230px solid transparent;
+	border-right: 520px solid transparent;
+	border-bottom: 175px solid #14222D;
+}
+
+.windmill__slice-1:before {
+	content: '';
+	position: absolute;
+	width: 400px;
+	height: 80px;
+	top: 240px;
+	left: 180px;
+	border-radius: 100% 100% 0 0;
+	background: #14222D;
+}
+
+.windmill__slice-1 .windmill__tree-right {
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 112px;
+	left: 747px;
+	border-left: 26px solid transparent;
+	border-right: 26px solid transparent;
+	border-bottom: 120px solid #14222D;
+}
+
+.windmill__slice-1 .windmill__tree-right:after {
+	content: '';
+	position: absolute;
+	width: 10px;
+	height: 20px;
+	top: 60px;
+	left: -49px;
+	background: #14222D;
+}
+
+.windmill__slice-1 .windmill__tree-right:before {
+	content: '';
+	position: absolute;
+	width: 50px;
+	height: 50px;
+	top: 14px;
+	left: -69px;
+	background: #14222D;
+	border-radius: 50% 0 50% 50%;
+	transform: rotate(-45deg);
+}
+
+.windmill__slice-1 .windmill__tree-left {
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: -42px;
+	left: 40px;
+	border-left: 26px solid transparent;
+	border-right: 26px solid transparent;
+	border-bottom: 120px solid #14222D;
+}
+
+.windmill__slice-1 .windmill__tree-left:after {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 187px;
+	left: 461px;
+	border-left: 20px solid transparent;
+	border-right: 20px solid transparent;
+	border-bottom: 80px solid #14222D;
+}
+
+.windmill__slice-1 .windmill__tree-left:before {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: 88px;
+	left: 47px;
+	border-left: 16px solid transparent;
+	border-right: 16px solid transparent;
+	border-bottom: 75px solid #14222D;
+}
+
+.windmill__clouds {
+	position: absolute;
+}
+
+.windmill__cloud {
+	position: absolute;
+	width: 200px;
+	height: 40px;
+	border-radius: 40px;
+	background: #B6E2FF;
+	opacity: .3;
+}
+
+.windmill__cloud:before {
+	content: '';
+	position: absolute;
+	top: -20px;
+	left: 30px;
+	width: 100px;
+	height: 30px;
+	border-radius: 20px;
+	background: #B6E2FF;
+}
+
+.windmill__cloud:after {
+	content: '';
+	position: absolute;
+	top: -30px;
+	left: 70px;
+	width: 100px;
+	height: 50px;
+	border-radius: 50px;
+	background: #B6E2FF;
+}
+
+.windmill__cloud:nth-child(1) {
+	top: 140px;
+	left: 150px;
+	animation: cloud 58s linear infinite;
+	animation-delay: -20s;
+}
+
+.windmill__cloud:nth-child(2) {
+	top: 210px;
+	left: 30px;
+	transform: scale(0.4);
+	animation: cloud 60s linear infinite;
+	animation-delay: -12s;
+}
+
+.windmill__cloud:nth-child(3) {
+	top: 270px;
+	left: 650px;
+	transform: scale(0.3);
+	animation: cloud 62s linear infinite;
+	animation-delay: -10s;
+}
+
+.windmill__cloud:nth-child(4) {
+	top: 260px;
+	left: 360px;
+	transform: scale(0.8);
+	animation: cloud 64s linear infinite;
+	animation-delay: -30s;
+}
+
+.windmill__cloud:nth-child(5) {
+	top: 90px;
+	left: 500px;
+	transform: scale(0.5);
+	animation: cloud 56s linear infinite;
+	animation-delay: -25s;
+}
+
+.windmill__cloud:nth-child(6) {
+	top: 140px;
+	left: 710px;
+	transform: scale(0.7);
+	animation: cloud 60s linear infinite;
+	animation-delay: -50s;
+}
+
+.windmill__windmill {
+	position: absolute;
+	bottom: -30px;
+	left: 50px;
+	width: 75px;
+	border-style: solid;
+	border-color: #1e3b52 transparent;
+	border-width: 0 10px 135px;
+}
+
+.windmill__windmill:after {
+	content: '';
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	top: 7px;
+	left: 25px;
+	transform: rotate(45deg);
+	background: #B6E2FF;
+}
+
+.windmill__windmill:before {
+	content: '';
+	position: absolute;
+	width: 0;
+	height: 0;
+	top: -48px;
+	left: -12px;
+	border-left: 40px solid transparent;
+	border-right: 40px solid transparent;
+	border-bottom: 50px solid #153650;
+}
+
+.windmill__blades {
+	position: absolute;
+	top: 6px;
+	left: 30px;
+	animation: blades 12s linear infinite;
+}
+
+.windmill__blade {
+	position: absolute;
+	height: 80px;
+	width: 24px;
+	border: 2px solid #14222D;
+}
+
+.windmill__blade:after {
+	content: '';
+	position: absolute;
+	top: 15px;
+	left: -2px;
+	height: 14px;
+	width: 24px;
+	border: 2px solid #14222D;
+}
+
+.windmill__blade:before {
+	content: '';
+	position: absolute;
+	top: 47px;
+	left: -2px;
+	height: 14px;
+	width: 24px;
+	border: 2px solid #14222D;
+}
+
+.windmill__blade:nth-child(1) {
+	top: -84px;
+	left: -13px;
+}
+
+.windmill__blade:nth-child(2) {
+	bottom: -84px;
+	left: -13px;
+}
+
+.windmill__blade:nth-child(3) {
+	transform: rotate(90deg);
+	top: -43px;
+	left: -56px;
+}
+
+.windmill__blade:nth-child(4) {
+	transform: rotate(90deg);
+	top: -43px;
+	left: 28px;
+}
+
+.windmill__snowflakes {
+	position: absolute;
+}
+
+.windmill__snowflake {
+	position: absolute;
+	background: #B6E2FF;
+	transform: rotate(45deg);
+	top: -200px;
+	animation: snowflake 30s linear infinite;
+	opacity: .5;
+}
+
+.windmill__snowflake:before {
+	content: '';
+	position: absolute;
+	background: #B6E2FF;
+}
+
+.windmill__snowflake:after {
+	content: '';
+	position: absolute;
+	background: #B6E2FF;
+}
+
+.windmill__snowflake:nth-child(1) {
+	height: 5px;
+	width: 5px;
+	left: 100px;
+	animation-delay: 20s;
+}
+
+.windmill__snowflake:nth-child(1):before {
+	height: 7px;
+	width: 7px;
+	left: -15px;
+	top: 137px;
+}
+
+.windmill__snowflake:nth-child(1):after {
+	height: 5px;
+	width: 5px;
+	left: 40px;
+	top: 320px;
+}
+
+.windmill__snowflake:nth-child(2) {
+	height: 5px;
+	width: 5px;
+	left: 200px;
+	animation-delay: 10s;
+}
+
+.windmill__snowflake:nth-child(2):before {
+	height: 5px;
+	width: 5px;
+	left: -157px;
+	top: 226px;
+}
+
+.windmill__snowflake:nth-child(2):after {
+	height: 6px;
+	width: 6px;
+	left: -51px;
+	top: 381px;
+}
+
+.windmill__snowflake:nth-child(3) {
+	height: 5px;
+	width: 5px;
+	left: 300px;
+}
+
+.windmill__snowflake:nth-child(3):before {
+	height: 6px;
+	width: 6px;
+	left: -155px;
+	top: 186px;
+}
+
+.windmill__snowflake:nth-child(3):after {
+	height: 5px;
+	width: 5px;
+	left: -57px;
+	top: 109px;
+}
+
+.windmill__snowflake:nth-child(4) {
+	height: 8px;
+	width: 8px;
+	left: 400px;
+	animation-delay: 14s;
+}
+
+.windmill__snowflake:nth-child(4):before {
+	height: 8px;
+	width: 8px;
+	left: -96px;
+	top: 215px;
+}
+
+.windmill__snowflake:nth-child(4):after {
+	height: 6px;
+	width: 6px;
+	left: -206px;
+	top: 71px;
+}
+
+.windmill__snowflake:nth-child(5) {
+	height: 7px;
+	width: 7px;
+	left: 500px;
+	animation-delay: -24s;
+}
+
+.windmill__snowflake:nth-child(5):before {
+	height: 7px;
+	width: 7px;
+	left: -244px;
+	top: 96px;
+}
+
+.windmill__snowflake:nth-child(5):after {
+	height: 7px;
+	width: 7px;
+	left: 100px;
+	top: 217px;
+}
+
+.windmill__snowflake:nth-child(6) {
+	height: 8px;
+	width: 8px;
+	left: 600px;
+}
+
+.windmill__snowflake:nth-child(6):before {
+	height: 8px;
+	width: 8px;
+	left: 110px;
+	top: 150px;
+}
+
+.windmill__snowflake:nth-child(6):after {
+	height: 8px;
+	width: 8px;
+	left: 30px;
+	top: 276px;
+}
+
+.windmill__snowflake:nth-child(7) {
+	height: 6px;
+	width: 6px;
+	left: 700px;
+	animation-delay: -22s;
+}
+
+.windmill__snowflake:nth-child(7):before {
+	height: 6px;
+	width: 6px;
+	left: 247px;
+	top: 220px;
+}
+
+.windmill__snowflake:nth-child(7):after {
+	height: 6px;
+	width: 6px;
+	left: 143px;
+	top: 306px;
+}
+
+.windmill__snowflake:nth-child(8) {
+	height: 6px;
+	width: 6px;
+	left: 800px;
+	animation-delay: -17s;
+}
+
+.windmill__snowflake:nth-child(8):before {
+	height: 6px;
+	width: 6px;
+	left: 10px;
+	top: 343px;
+}
+
+.windmill__snowflake:nth-child(8):after {
+	height: 8px;
+	width: 8px;
+	left: -105px;
+	top: 239px;
+}
+
+.windmill__snowflake:nth-child(9) {
+	height: 7px;
+	width: 7px;
+	left: 900px;
+}
+
+.windmill__snowflake:nth-child(9):before {
+	height: 8px;
+	width: 8px;
+	left: 133px;
+	top: 211px;
+}
+
+.windmill__snowflake:nth-child(9):after {
+	height: 5px;
+	width: 5px;
+	left: -65px;
+	top: 243px;
+}
+
+.windmill__snowflake:nth-child(10) {
+	height: 7px;
+	width: 7px;
+	left: 1000px;
+	animation-delay: 17s;
+}
+
+.windmill__snowflake:nth-child(10):before {
+	height: 7px;
+	width: 7px;
+	left: -119px;
+	top: 207px;
+}
+
+.windmill__snowflake:nth-child(10):after {
+	height: 7px;
+	width: 7px;
+	left: 166px;
+	top: 4px;
+}
+
+.windmill__snowflake:nth-child(11) {
+	height: 4px;
+	width: 4px;
+	left: 150px;
+	animation-delay: -22s;
+}
+
+.windmill__snowflake:nth-child(11):before {
+	height: 7px;
+	width: 7px;
+	left: -117px;
+	top: 259px;
+}
+
+.windmill__snowflake:nth-child(11):after {
+	height: 9px;
+	width: 9px;
+	left: 230px;
+	top: 81px;
+}
+
+.windmill__snowflake:nth-child(12) {
+	height: 7px;
+	width: 7px;
+	left: 250px;
+}
+
+.windmill__snowflake:nth-child(12):before {
+	height: 6px;
+	width: 6px;
+	left: -17px;
+	top: 226px;
+}
+
+.windmill__snowflake:nth-child(12):after {
+	height: 8px;
+	width: 8px;
+	left: 33px;
+	top: 64px;
+}
+
+.windmill__snowflake:nth-child(13) {
+	height: 5px;
+	width: 5px;
+	left: 350px;
+	animation-delay: 19s;
+}
+
+.windmill__snowflake:nth-child(13):before {
+	height: 7px;
+	width: 7px;
+	left: -138px;
+	top: 192px;
+}
+
+.windmill__snowflake:nth-child(13):after {
+	height: 7px;
+	width: 7px;
+	left: 241px;
+	top: 20px;
+}
+
+.windmill__snowflake:nth-child(14) {
+	height: 4px;
+	width: 4px;
+	left: 450px;
+	animation-delay: 15s;
+}
+
+.windmill__snowflake:nth-child(14):before {
+	height: 7px;
+	width: 7px;
+	left: -173px;
+	top: 222px;
+}
+
+.windmill__snowflake:nth-child(14):after {
+	height: 5px;
+	width: 5px;
+	left: 236px;
+	top: 27px;
+}
+
+.windmill__snowflake:nth-child(15) {
+	height: 7px;
+	width: 7px;
+	left: 550px;
+}
+
+.windmill__snowflake:nth-child(15):before {
+	height: 7px;
+	width: 7px;
+	left: -131px;
+	top: 241px;
+}
+
+.windmill__snowflake:nth-child(15):after {
+	height: 7px;
+	width: 7px;
+	left: 426px;
+	top: 128px;
+}
+
+.windmill__snowflake:nth-child(16) {
+	height: 5px;
+	width: 5px;
+	left: 650px;
+	animation-delay: 22s;
+}
+
+.windmill__snowflake:nth-child(16):before {
+	height: 7px;
+	width: 7px;
+	left: -154px;
+	top: 232px;
+}
+
+.windmill__snowflake:nth-child(16):after {
+	height: 6px;
+	width: 6px;
+	left: 126px;
+	top: 123px;
+}
+
+.windmill__snowflake:nth-child(17) {
+	height: 5px;
+	width: 5px;
+	left: 750px;
+	animation-delay: -8s;
+}
+
+.windmill__snowflake:nth-child(17):before {
+	height: 7px;
+	width: 7px;
+	left: -178px;
+	top: 284px;
+}
+
+.windmill__snowflake:nth-child(17):after {
+	height: 6px;
+	width: 6px;
+	left: 150px;
+	top: 208px;
+}
+
+.windmill__snowflake:nth-child(18) {
+	height: 5px;
+	width: 5px;
+	left: 850px;
+}
+
+.windmill__snowflake:nth-child(18):before {
+	height: 7px;
+	width: 7px;
+	left: -165px;
+	top: 247px;
+}
+
+.windmill__snowflake:nth-child(18):after {
+	height: 6px;
+	width: 6px;
+	left: 110px;
+	top: 216px;
+}
+
+.windmill__snowflake:nth-child(19) {
+	height: 5px;
+	width: 5px;
+	left: 950px;
+	animation-delay: -13s;
+}
+
+.windmill__snowflake:nth-child(19):before {
+	height: 7px;
+	width: 7px;
+	left: -14px;
+	top: 362px;
+}
+
+.windmill__snowflake:nth-child(19):after {
+	height: 6px;
+	width: 6px;
+	left: 226px;
+	top: 243px;
+}
+
+.windmill__snowflake:nth-child(20) {
+	height: 5px;
+	width: 5px;
+	left: 50px;
+	animation-delay: -9s;
+}
+
+.windmill__snowflake:nth-child(20):before {
+	height: 7px;
+	width: 7px;
+	left: -194px;
+	top: 255px;
+}
+
+.windmill__snowflake:nth-child(20):after {
+	height: 6px;
+	width: 6px;
+	left: 246px;
+	top: 233px;
+}
+
+.windmill__snowflake:nth-child(21) {
+	height: 7px;
+	width: 7px;
+	left: 600px;
+}
+
+.windmill__snowflake:nth-child(21):before {
+	height: 7px;
+	width: 7px;
+	left: -248px;
+	top: 218px;
+}
+
+.windmill__snowflake:nth-child(21):after {
+	height: 6px;
+	width: 6px;
+	left: 133px;
+	top: 101px;
+}
+
+.windmill__snowflake:nth-child(22) {
+	height: 5px;
+	width: 5px;
+	left: 800px;
+	animation-delay: -11s;
+}
+
+.windmill__snowflake:nth-child(22):before {
+	height: 7px;
+	width: 7px;
+	left: -44px;
+	top: 342px;
+}
+
+.windmill__snowflake:nth-child(22):after {
+	height: 6px;
+	width: 6px;
+	left: 126px;
+	top: 123px;
+}
+
+/* Анимации */
+@keyframes blades {
+	100% {
+		transform: rotate(-360deg);
+	}
+}
+
+@keyframes cloud {
+	0% {
+		transform: translateX(750px);
+	}
+
+	100% {
+		transform: translateX(-450px);
+	}
+}
+
+@keyframes snowflake {
+	0% {
+		transform: rotate(45deg) translateX(0) translateY(116px);
+	}
+
+	20% {
+		transform: rotate(45deg) translateX(-10px) translateY(232px);
+	}
+
+	40% {
+		transform: rotate(45deg) translateX(-50px) translateY(348px);
+	}
+
+	60% {
+		transform: rotate(45deg) translateX(-150px) translateY(464px);
+	}
+
+	80% {
+		transform: rotate(45deg) translateX(-100px) translateY(580px);
+	}
+
+	100% {
+		transform: rotate(45deg) translateX(-50px) translateY(700px);
+	}
+}

+ 83 - 20
pages/index/index.vue

@@ -1,23 +1,81 @@
 <template>
-	<view class="content">
-		<view @click="toTdRecord" class="tdrecord">投递记录</view>
-		<view class="cz-box" @click="toWork">
-			<view :class="loading?'turn':''">
-				<u-image width="100rpx" height="100rpx" src="/static/chengzhong.png"></u-image>
-				<view class="tits">投放称重</view>
+	<view class="bg">
+		<!-- 背景动画 -->
+		<view class="windmill">
+			<view class="windmill__sun"></view>
+			<view class="windmill__slice-4">
+				<view></view>
+			</view>
+			<view class="windmill__slice-3">
+				<view class="windmill__tree-left"></view>
+				<view class="windmill__tree-right"></view>
+			</view>
+			<view class="windmill__slice-2">
+				<view class="windmill__tree-right"></view>
+				<view class="windmill__tree-middle"></view>
+				<view class="windmill__tree-left"></view>
+				</view><view class="windmill__clouds">
+				<view class="windmill__cloud"></view>
+				<view class="windmill__cloud"></view>
+				<view class="windmill__cloud"></view>
+				<view class="windmill__cloud"></view>
+				<view class="windmill__cloud"></view>
+				<view class="windmill__cloud"></view>
+			</view>
+			<!-- <view class="windmill__windmill">
+				<view class="windmill__blades">
+					<view class="windmill__blade"></view>
+					<view class="windmill__blade"></view>
+					<view class="windmill__blade"></view>
+					<view class="windmill__blade"></view>
+				</view>
+			</view> -->
+			<view class="windmill__snowflakes">
+				<view class="windmill__snowflake"></view>
+				<view class="windmill__snowflake"></view>
+				<view class="windmill__snowflake"></view>
+				<view class="windmill__snowflake"></view>
+				<view class="windmill__snowflake"></view>
+				<view class="windmill__snowflake"></view>
+				<view class="windmill__snowflake"></view>
+				<view class="windmill__snowflake"></view>
+				<view class="windmill__snowflake"></view>
+				<view class="windmill__snowflake"></view>
+				<view class="windmill__snowflake"></view>
+				<view class="windmill__snowflake"></view>
+				<view class="windmill__snowflake"></view>
+				<view class="windmill__snowflake"></view>
+				<view class="windmill__snowflake"></view>
+				<view class="windmill__snowflake"></view>
+				<view class="windmill__snowflake"></view>
+				<view class="windmill__snowflake"></view>
+				<view class="windmill__snowflake"></view>
+				<view class="windmill__snowflake"></view>
+				<view class="windmill__snowflake"></view>
+				<view class="windmill__snowflake"></view>
 			</view>
 		</view>
-		<view class="bindDev" @click="toInit">
-			{{statusStr}}
-		</view>
-		<view class="devList">
-			<view v-for="item in deviceList" :key="item.deviceId">
-				<view class="names">
-					<view>{{item.name}}</view>
-					<view class="texts">MAC:{{item.deviceId}}</view>
+		<!-- 称重 -->
+		<view class="content">
+			<view @click="toTdRecord" class="tdrecord">投递记录</view>
+			<view class="cz-box" @click="toWork">
+				<view :class="loading?'turn':''">
+					<u-image width="100rpx" height="100rpx" src="/static/chengzhong.png"></u-image>
+					<view class="tits">投放称重</view>
+				</view>
+			</view>
+			<view class="bindDev" @click="toInit">
+				{{statusStr}}
+			</view>
+			<view class="devList">
+				<view v-for="item in deviceList" :key="item.deviceId">
+					<view class="names">
+						<view>{{item.name}}</view>
+						<view class="texts">MAC:{{item.deviceId}}</view>
+					</view>
+					<view class="btns" @click="connectBlue(item)" v-if="!connectStatus">点击连接</view>
+					<view class="btns" @click="closeBlue" v-else>断开连接</view>
 				</view>
-				<view class="btns" @click="connectBlue(item)" v-if="!connectStatus">点击连接</view>
-				<view class="btns" @click="closeBlue" v-else>断开连接</view>
 			</view>
 		</view>
 	</view>
@@ -188,7 +246,6 @@
 						  }else{
 							  _this.loading = false
 						  }
-						  
 					  }
 					})
 				  }
@@ -428,16 +485,22 @@
 	}
 </script>
 
-<style>
+<style lang="less">
+	@import url("bg.less");
+	.bg{
+		height: 100vh;
+		width: 100%;
+		position: relative;
+	}
 	.content{
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		flex-direction: column;
-		background-image: radial-gradient( #2ab4e5 0%, #0081c1 100%);
 		height: 100vh;
 		width: 100%;
-		position: relative;
+		position: absolute;
+		z-index: 1000;
 	}
 	.tdrecord{
 		position: absolute;