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