2019-08-14update

king

2019-08-14 68cbb649c933776838e937446ce9ed384916a5e8

 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);