From 68cbb649c933776838e937446ce9ed384916a5e8 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 14 八月 2019 14:20:59 +0800
Subject: [PATCH] 2019-08-14update

---
 src/views/index/index.vue |  261 +++++++++++++++++++++++++++++++++++++--------------
 1 files changed, 188 insertions(+), 73 deletions(-)

diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 9e94bcd..650fa91 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -1,6 +1,7 @@
 <template>
 	<div class="main">
-		<div class="banner"><img src='../../img/home.jpg' alt=""></div>
+		<canvas id="canvas" style="position: absolute;z-index: 1;top: 0px;"></canvas>
+		<div class="banner"><img id="homeId" src='../../img/home.jpg' alt=""></div>
 		<div class="wrapper-box">
 			<h3 class="content_title fadeInUp zoomIn animated"><span>涓昏惀涓氬姟</span></h3>
 			<div class="m_zhu" v-for="(business, index) in mainBusiness" :key="index">
@@ -30,7 +31,7 @@
 			<div class="wrapper">
 				<ul class="business_ul">
 					<router-link tag="li" to="/caseDetail" v-for="(business, index) in mainBusiness" :key="index" class="fadeInUp" v-drag>
-						<router-link tag="div" class="business_box animated pulse" :key="index" to="/caseDetail">
+						<router-link tag="div" class="business_box pulse" :key="index" to="/caseDetail">
 							<div class="business_box_t" :style="'background-image: url(' + business.Image1 + ')'">
 								<div class="bgopacity"></div>
 								<h2 v-text="business.Title2"></h2>
@@ -56,7 +57,7 @@
 								<el-button>鏌ョ湅鏇村</el-button>
 							</div>
 							<div class="particulars">
-								<a href="/caseDetail" style="color: #14A9E5;">浜嗚В璇︽儏 >></a>
+								<a href="/caseDetail">浜嗚В璇︽儏 &gt;&gt;</a>
 							</div>
 						</router-link>
 						<div class="business">
@@ -175,67 +176,149 @@
 	</div>
 </template>
 <script>
-	export default {
-		data() {
-			return {
-				brothers: '',
-				data: [],
-				img_index: 0,
-				mainBusiness: null,
-				cases: null,
-				news: null
-			}
+// import * as dat from 'dat.gui'
+
+export default {
+	data() {
+		return {
+			brothers: '',
+			data: [],
+			img_index: 0,
+			mainBusiness: null,
+			cases: null,
+			news: null
+		}
+	},
+	methods:{
+		jump (u) {
+			this.$router.push(u)
 		},
-		methods:{
-			jump (u) {
-				this.$router.push(u)
-			},
-			load () {
-				this.$axios({
-					data: {
-						func: 'Web_Index_GetData'
-					}
-				}).then(res => {
-					this.mainBusiness = res.Main
-					this.cases = res.Case
-					this.news = res.News
-				})
-				this.$axios({
-					data: {
-						func: 'Web_productCenter_GetData',
-						ID: '20190726105746487D81C9D31A08C4C55A81C'
-					}
-				}).then(res => {
-					console.log(res)
-				})
-			}
+		load () {
+			this.Service.getBaseData('Web_Index_GetData').then(res => {
+				this.mainBusiness = res.Main
+				this.cases = res.Case
+				this.news = res.News
+			})
 		},
-		directives: {
-			drag: function(el) {
-				//鑾峰彇褰撳墠鍏冪礌
-				let dragBox = el;
-				dragBox.onmousemove = e => {
-					let brothers = e.currentTarget.firstElementChild;
-					let box = dragBox.childNodes[2];
-					box.style.opacity = 0;
-					brothers.style.display = 'block';
-					brothers.style.opacity = '0.95';
-					brothers.style.zIndex = '999'
-				};
-				dragBox.onmouseout = e => {
-					let brothers = e.currentTarget.firstElementChild;
-					let box = dragBox.childNodes[2];
-					box.style.opacity = 1;
-					box.style.display = 'block'
-					brothers.style.opacity = '0.95';
-					brothers.style.display = 'none';
+		setgui (radio) {
+			let canvas = document.getElementById('canvas')
+			let ctx = canvas.getContext('2d')
+			let w = ctx.canvas.width = window.innerWidth
+			let h = ctx.canvas.height = window.innerWidth / radio + 80
+			let dots = []
+			let cx = -200 // 缁樺浘涓偣x
+			let cy = -200 // 缁樺浘涓偣y
+			let emitter = null // 瀹氭椂鍣�
+			let maxDots = 500 // 鏈�澶х粯鍥剧偣
+			let maxSpeed = 3
+			let minSpeed = 1
+			let emitRate = 10
+			let emitNum = 2
+			let radius = 2
+			let trail = 0.2
+			let maxTime = 3000
+			let minTime = 1000
+			let glow = 0
+
+			let emitDots = (x, y) => {
+				if (dots.length < maxDots) {
+					for (let i = 0; i < emitNum; i++) {
+						let color = Math.floor(Math.random() * 255)
+						dots.push({
+							x: cx,
+							y: cy,
+							v: Math.random() * (maxSpeed - minSpeed) + minSpeed,
+							d: Math.random() * 360,
+							c: Math.random() * (5 - (-5)) + (-5),
+							h: color,
+							st: Date.now(),
+							lt: Math.random() * (maxTime - minTime) + minTime
+						})
+					}
 				}
 			}
-		},
-		mounted () {
-			this.load()
+
+			let draw = () => {
+				ctx.clearRect(0, 0, w, h)
+				// ctx.fillStyle = 'rgba(0,0,0,' + trail + ')'
+				ctx.fillStyle = 'rgba(255, 255, 255, 0)'
+				ctx.fillRect(0, 0, w, h)
+				ctx.fill()
+				for (let i = 0; i < dots.length; i++) {
+					let pct = (Date.now() - dots[i].st) / dots[i].lt
+
+					ctx.save()
+					ctx.beginPath()
+					ctx.fillStyle = 'hsla(' + dots[i].h + ', 100%, 50%, ' + (1-pct) + ')'
+					ctx.shadowColor = 'hsla(' + dots[i].h + ', 100%, 50%, 1)'
+					ctx.shadowBlur = glow
+					ctx.arc(dots[i].x, dots[i].y, Math.pow(radius, 2) / dots[i].v, 0, Math.PI * 2)
+					ctx.fill()
+					ctx.closePath()
+					ctx.restore()
+
+					dots[i].x += dots[i].v * Math.cos(dots[i].d * Math.PI/180)
+					dots[i].y += dots[i].v * Math.sin(dots[i].d * Math.PI/180)
+					dots[i].d += dots[i].c
+					
+					if (dots[i].x > w || dots[i].x < 0 || dots[i].y > h || dots[i].y < 0 || dots[i].st + dots[i].lt < Date.now()) {
+						dots.splice(i, 1)
+					}
+				}
+				requestAnimationFrame(draw) // 
+			}
+
+			emitter = setInterval(emitDots, emitRate)
+			draw()
+
+			canvas.onmousemove = (e) => {
+				let offset = document.documentElement.scrollTop || document.body.scrollTop
+				cx = e.clientX
+				cy = e.clientY + offset
+			}
+			canvas.onmouseleave = () => {
+				cx = -200
+				cy = -200
+			}
+			window.onresize = () => {
+				w = ctx.canvas.width = window.innerWidth
+				h = ctx.canvas.height = window.innerWidth / radio + 80
+			}
+		}
+	},
+	directives: {
+		drag: function(el) {
+			//鑾峰彇褰撳墠鍏冪礌
+			let dragBox = el;
+			dragBox.onmousemove = e => {
+				let brothers = e.currentTarget.firstElementChild;
+				let box = dragBox.childNodes[2];
+				box.style.opacity = 0;
+				brothers.style.display = 'block';
+				brothers.style.opacity = '0.95';
+				brothers.style.zIndex = '999'
+			};
+			dragBox.onmouseout = e => {
+				let brothers = e.currentTarget.firstElementChild;
+				let box = dragBox.childNodes[2];
+				box.style.opacity = 1;
+				box.style.display = 'block'
+				brothers.style.opacity = '0.95';
+				brothers.style.display = 'none';
+			}
+		}
+	},
+	mounted () {
+		this.load()
+		let width = window.innerWidth
+		if (width > 750) {
+			setTimeout(() => {
+				let radio = document.getElementById('homeId').width / document.getElementById('homeId').height
+				this.setgui(radio)
+			}, 2000)
 		}
 	}
+}
 </script>
 <style scoped lang="less">
 	.pc_case {
@@ -273,6 +356,7 @@
 		}
 	}
 	.dynamic_ul li {
+		position: relative;
 		h2 {
 			padding: 0 .11rem;
 
@@ -318,6 +402,9 @@
 	}
 
 	@media (max-width: 750px) and (min-width: 0) {
+		#canvas {
+			display: none;
+		}
 		.mob_case {
 			background: #ffffff;
 			position: relative;
@@ -432,6 +519,7 @@
 			}
 
 			.see-detail {
+				cursor: pointer;
 				font-size: 0.24rem;
 				font-family: PingFang-SC-Medium;
 				font-weight: 500;
@@ -664,25 +752,30 @@
 			height: 3rem;
 			margin: 0.69rem 0 .85rem;
 		}
-		.business_ul > li:hover {
-			z-index: 1000;
-		}
+		
 		.business_ul > li {
 			display: inline-block;
 			text-align: center;
-			background: rgba(255, 255, 255, 1);
+			background: transparent;
 			flex: 1;
 			height: 4rem;
 			padding-bottom: 0.1rem;
 			box-sizing: border-box;
 			position: relative;
-			-webkit-transition: transform 1s, opacity 1s;
-			-moz-transition: transform 1s, opacity 1s;
-			-o-transition: transform 1s, opacity 1s;
-			transition: transform 1s, opacity 1s;
+			// -webkit-transition: transform 1s, opacity 1s;
+			// -moz-transition: transform 1s, opacity 1s;
+			// -o-transition: transform 1s, opacity 1s;
+			// transition: transform 1s, opacity 1s;
+			transition: all 0.3s;
 
+			.pulse {
+				width: 85%;
+				margin: 0 auto;
+				opacity: 0;
+			}
 			.business {
 				position: absolute;
+				opacity: 1;
 				top: .1rem;
 				left: .3rem;
 				width: 85%;
@@ -717,7 +810,17 @@
 				margin-top: 0.04rem;
 			}
 		}
-
+		.business_ul > li:hover {
+			transform: scale(1.1);
+			z-index: 1000;
+			.business {
+				z-index: -1;
+				opacity: 0;
+			}
+			.pulse {
+				opacity: 1;
+			}
+		}
 		.business_box {
 			display: none;
 			width: 100%;
@@ -770,10 +873,10 @@
 					height: 0.55rem;
 
 					h3 {
-						img {
-							width: .2rem;
-							height: .2rem;
-							margin-bottom: 0.13rem;
+						margin-bottom: 0.07rem;
+						.fa {
+							font-size: 0.20rem;
+							color: #1CACE6;
 						}
 					}
 
@@ -781,6 +884,9 @@
 						font-size: 0.12rem;
 						color: #838383;
 					}
+					// div > p:last-child {
+					// 	font-size: 0.12rem;
+					// }
 				}
 			}
 		}
@@ -833,6 +939,11 @@
 			padding: 0 .2rem;
 			text-align: right;
 			color: #14A9E5;
+			a {
+				display: inline-block;
+				color: #14A9E5;
+				cursor: pointer;
+			}
 		}
 
 		.content_subtitle {
@@ -896,7 +1007,8 @@
 		}
 
 		.dynamic_ul_card {
-			background: rgba(243, 243, 243, 1);
+			// background: rgba(243, 243, 243, 1);
+			background: rgba(0, 0, 0, 0.02);
 			height: 2.56rem;
 
 			h2 {
@@ -913,7 +1025,10 @@
 		.wrapper:last-child .content_title {
 			margin: 1rem 0 1.21rem;
 		}
-
+		.platform_ul>li {
+			transition: all 0.5s;
+			position: relative;
+		}
 		.platform_ul>li:hover {
 			transform: scale(1.2);
 			box-shadow: 0px 0px 38px 0px rgba(79, 78, 80, 0.15);

--
Gitblit v1.8.0