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">浜嗚В璇︽儏 >></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