live
/
web-live


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560
							<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>中科在线（长春）</title>
  <!-- layui -->
  <link rel="stylesheet" href="static/home/lib/layui/css/layui.css">
  <link rel="stylesheet" href="static/home/css/lib.css">
  <link rel="stylesheet" href="static/home/css/road.css">
  <link rel="stylesheet" href="static/home/css/index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <style>
    .canvas-stats {
      display: none;
    }
    #a{
      position: absolute;
      bottom: -20px;
      color: #fff;
      right: 0;
    }
    #a:hover{
      cursor: pointer;
    }
    .floating{
      width: 350px;
      height: 170px;
      background-image: url(./static/images/fuchuang.jpg);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .floating p:nth-child(1){
      text-align: center;
      font-size: 20px;
      font-family: cursive;
      font-weight: bold;
      /* -webkit-text-stroke: 1px #ffffff; */
      padding: 10px 0;
      color: #ffffff;
    }
    .floating p:nth-child(2){
      text-align: center;
      font-size: 32px;
      font-family: cursive;
      font-weight: bold;
      -webkit-text-stroke: 1px #ffc900;
      padding: 0px 20px 10px 20px;
      color: #409eff;
    }
    .floating p:nth-child(3){
      text-align: center;
    }
    .floating p:nth-child(3) button{
      border: none;
      padding: 5px 10px;
      border-radius: 25px;
      color: #fff;
      background: #409eff;
    }
    .floating p:nth-child(3) button:hover{
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="header">
   <div class='left'>
      <img class='image' src="static/images/logo.png" alt="">
      <p class='title'>中科在线（长春）</p>
   </div>
   <div class='right'>
      <button onclick="window.open('http://broadcast.waityou24.cn/platlive/login')">平台登录</button>
      <button onclick="window.open('http://broadcast.waityou24.cn/liveadmin/login')">管理登录</button>
   </div>
  </div>
  <img class="sci-wheel" src="static/home/images/sci.gif" alt="">
  <!-- 导航 -->
  <div class="center">
    <a class="list fn_1 moveUpDownFla1"  href="/platlive/market/index">
      <p>科技超市</p>
    </a>
    <a class="list fn_2 moveUpDownFla2"  href="/platlive/live/index">
      <p>直播大厅</p>
    </a>
    <a class="list fn_3 moveUpDownFla1"  href="/platlive/dynamic/index">
      <p>数据动态</p>
    </a>
    <a class="list fn_4 moveUpDownFla2"  href="/platlive/news/index">
      <p>新闻资讯</p>
    </a>
    <a class="list fn_5 moveUpDownFla2"  href="/platlive/techolchat/index">
      <p>技术交流</p>
    </a>
  </div>
  <!-- 浮窗 -->
  <div id="floatingDiv" style="position:absolute;left:50px;top:60px;z-index: 9999;">
    <div id="a" onClick="javascript:this.parentNode.style.display='none';">关闭窗口</div>
    <div id="app" class='floating'>
      <p>科技引领新发展 校地合作赢未来</p>
      <p>{{info.title}}</p>
      <p><button v-on:click="noticeBtn">展会入口</button></p>
    </div>
  </div>
  <!--流星-->
  <div class="liuxing liuxing1 liuxingFla"></div>
  <div class="liuxing liuxing2 liuxingFla2"></div>
  <div class="liuxing liuxing3 liuxingFla3"></div>
  <div class="liuxing liuxing4 liuxingFla4"></div>
  <div id="canvas-container-1" class="canvas-container">
    <canvas id="canvas-1"></canvas>
  </div>
  <script src="static/home/js/stats.min.js"></script>
  <script src="static/home/js/three.min.js"></script>
  <script src="static/js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        info:{}
      },
      created() {
        this.search();
      },
      computed: {},
      methods: {
        search(){
          $.ajax({
            url: '/api/live/v0/dock/dock',
            type: "GET",
            contentType: 'application/json',
            success:  (res)=> {
              if (res.errcode == '0') {
                let data=res.data.find(i=>i.room_id=='1008');
                if (data) {
                  this.$set(this, `info`, data);
                }
              }
            },
            error: function (e) {
              console.error(e)
            }
          })
        },
        noticeBtn(){
          if (this.info.status=='1') {
            window.location.href = `/platlive/achieveLive/detail?dock_id=${this.info.id}`
          }else{
            alert(`展会尚未开启，展会开始时间：${this.info.start_time}！`)
          }
          
        }
      },
    })
</script>
<script>
  function ThreeJSCanvas(CANVAS_ID) {
    var SCREEN_HEIGHT = Math.min(window.innerWidth, window.innerHeight);
    var SCREEN_WIDTH = SCREEN_HEIGHT;
    var SCREEN_ASPECT_RATIO = SCREEN_WIDTH / SCREEN_HEIGHT;
    var canvas, container;

    var container, loader, stats;
    var renderer, camera, scene;
    var raycaster, controls;

    var ANIMATION_FRAME_LENGTH = 30,
      INTERACT_DISTANCE = 2.5;
    var objetArray = [],
      animationQueue = [];

    var color1 = [0 / 255, 110 / 255, 255 / 255],
      color2 = [0 / 255, 255 / 255, 140 / 255];

    var bitmap = [];
    var BITMAP_SKIP = 1;

    var fov = 90;
    var cameraPos = [0, 0, 30];
    var cameraLookAt = [0, 0, 0];
    var viewHeight = 2 * Math.tan(THREE.Math.degToRad(fov / 2)) * cameraPos[2],
      viewWidth = viewHeight * SCREEN_ASPECT_RATIO;
    var mouse = new THREE.Vector3(10000, 10000, -1),
      mouseScaled = new THREE.Vector3(10000, 10000, -1);

    var frame = 0;

    function init() {

      // Global Variables
      container = document.getElementById("canvas-container-" + CANVAS_ID);
      canvas = document.getElementById("canvas-" + CANVAS_ID);
      canvas.addEventListener('mousemove', onDocumentMouseMove, false);

      loader = new THREE.JSONLoader();
      stats = new Stats();
      stats.domElement.classList.add("canvas-stats");
      stats.domElement.id = "canvas-stats-" + CANVAS_ID;

      /* If you are familiar with python and opencv
          you can use this python script to generate custom bitmaps 
          --------------------
          https://git.io/vdBAu 
          --------------------
      */
      var data = '#000000000000000000011110000000000000000000' +
        '#000000000000000011111111110000000000000000' +
        '#000000000000001111111111111100000000000000' +
        '#000000000000011111111111111110000000000000' +
        '#000000000000111111111111111111000000000000' +
        '#000000000001111111111111111111100000000000' +
        '#000000000011111111111111111111110000000000' +
        '#000000000011111111111111111111110000000000' +
        '#000000000111111111111111111111111000000000' +
        '#000000000111111111111111111111111000000000' +
        '#000000001111111111111111111111111100000000' +
        '#000000001111111111111111111111111100000000' +
        '#000000001111111111111111111111111100000000' +
        '#000000001111111111111111111111111100000000' +
        '#000000001111111111111111111111111100000000' +
        '#000000000111111111111111111111111000000000' +
        '#000000000111111111111111111111111000000000' +
        '#000000000111111111111111111111111000000000' +
        '#000000000011111111111111111111110000000000' +
        '#000000000011111111111111111111110000000000' +
        '#000000000001111111111111111111100000000000' +
        '#000000000001111111111111111111100000000000' +
        '#000000000000111111111111111111000000000000' +
        '#000000000000111111111111111110000000000000' +
        '#000000000000011111111111111110000000000000' +
        '#000000000000001111111111111100000000000000' +
        '#000000000000001111111111111100000000000000' +
        '#000000000000001111111111111000000000000000' +
        '#000000000000000111111111111000000000000000' +
        '#000000000000000111111111111000000000000000' +
        '#000000000000000111111111111000000000000000' +
        '#000000000000000111111111111000000000000000' +
        '#000000000000000011111111110000000000000000' +
        '#000000000000000010000000010000000000000000' +
        '#000000000000000011111111110000000000000000' +
        '#000000000000000010000000010000000000000000' +
        '#000000000000000011111111110000000000000000' +
        '#000000000000000010000000010000000000000000' +
        '#000000000000000011111111110000000000000000' +
        '#000000000000000000100001000000000000000000' +
        '#000000000000000000110011000000000000000000' +
        '#000000000000000000011110000000000000000000';

      for (var i = 0; i < data.length; i++) {
        if (data[i] == '#') {
          bitmap.push([]);
        } else {
          bitmap[bitmap.length - 1].push(data[i] - '0');
        }
      }

      container.appendChild(stats.domElement);

      // Renderer
      renderer = new THREE.WebGLRenderer({
        alpha: true,
        antialias: true,
        canvas: canvas,
      });
      renderer.setClearColor(0x212121, 0);
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.shadowMap.enabled = true;
      renderer.shadowMap.type = THREE.PCFSoftShadowMap;
      renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

      // Camera and Controls
      camera = new THREE.PerspectiveCamera(fov, SCREEN_ASPECT_RATIO, 0.1, 1000);
      // camera = new THREE.OrthographicCamera(-viewWidth, viewWidth, viewHeight, -viewHeight, 1, 300);
      camera.position.set(cameraPos[0], cameraPos[1], cameraPos[2]);
      camera.lookAt(new THREE.Vector3(cameraLookAt[0], cameraLookAt[1], cameraLookAt[2]));
      raycaster = new THREE.Raycaster();

      // controls = new THREE.OrbitControls(camera);
      // controls.rotateSpeed = 2.0;
      // controls.zoomSpeed = 2.0;
      // controls.enableZoom = true;
      // controls.enablePan = true;
      // controls.dampingFactor = 0.2;
      // controls.addEventListener('change', render);

      //Scene
      scene = new THREE.Scene();


      //Lights

      // Making Object Array
      var xOffset = -bitmap[0].length / (BITMAP_SKIP * 2);
      var yOffset = bitmap.length / (BITMAP_SKIP * 2);
      for (var i = 0; i < bitmap.length; i += BITMAP_SKIP) {
        for (var j = 0; j < bitmap[i].length; j += BITMAP_SKIP) {
          if (bitmap[i][j] == 1) {
            planeGeometry = new THREE.PlaneGeometry(1, 1);
            var circleGeometry = new THREE.CircleGeometry(1, 5);
            var frac = i / bitmap.length;
            // Materials
            planeMaterial = new THREE.MeshBasicMaterial({
              color: new THREE.Color(
                color1[0] * frac + color2[0] * (1 - frac),
                color1[1] * frac + color2[1] * (1 - frac),
                color1[2] * frac + color2[2] * (1 - frac)
              ),
              transparent: true,
              opacity: THREE.Math.randFloat(0.4, 0.6),
              side: THREE.DoubleSide
            });

            var circleMaterial = new THREE.MeshBasicMaterial({
              color: new THREE.Color(1, 1, 1),
              transparent: true,
              opacity: THREE.Math.randFloat(0.8, 1),
              side: THREE.DoubleSide
            });

            // Mesh
            planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
            planeMesh.position.set(xOffset + j / BITMAP_SKIP, yOffset - i / BITMAP_SKIP, 0);
            var randWidth = THREE.Math.randFloat(0.6, 1.2);
            var randHeight = randWidth
            planeMesh.scale.set(randWidth, randHeight, 1);
            scene.add(planeMesh);
            objetArray.push([planeMesh, false]);


            circleMesh = new THREE.Mesh(circleGeometry, circleMaterial);
            circleMesh.position.set(xOffset + j / BITMAP_SKIP + THREE.Math.randFloat(-0.5, 0.5), yOffset - i / BITMAP_SKIP + THREE.Math.randFloat(-0.5, 0.5), 0.1);
            var randRadius = THREE.Math.randFloat(0.05, 0.1);
            circleMesh.scale.set(randRadius, randRadius, 1);
            scene.add(circleMesh);
            objetArray.push([circleMesh, false]);
          }

        }
      }


      //Geometry 

      // Materials


      // Mesh


      // Helpers

      //Add Stuff to Scene


    }

    function animate() {

      requestAnimationFrame(animate);
      render();
      stats.update();
      // controls.update();
      frame++;
    }

    function render() {

      while (animationQueue.length > 0) {
        var obj_index = animationQueue[0][0];
        var ani_frame = animationQueue[0][1];
        if (ani_frame > ANIMATION_FRAME_LENGTH) {
          objetArray[obj_index][1] = false;
          animationQueue.shift();
        } else {
          break;
        }
      }

      for (var i = 0; i < objetArray.length; i++) {
        var obj = objetArray[i][0];
        var isAnimating = objetArray[i][1];
        if (isAnimating == false) {
          var px = obj.position.x;
          var py = obj.position.y;
          var dist = Math.sqrt(Math.pow(px - mouseScaled.x, 2) + Math.pow(py - mouseScaled.y, 2));
          if (dist < INTERACT_DISTANCE) {
            var startPosVector = obj.position.clone();
            var mouseRepelVector = new THREE.Vector3().subVectors(startPosVector, mouseScaled).multiplyScalar(THREE.Math.randFloat(INTERACT_DISTANCE + 0.5, INTERACT_DISTANCE + 2) - dist);
            var endPosVector = new THREE.Vector3().addVectors(startPosVector, mouseRepelVector);
            animationQueue.push([i, 0, startPosVector, endPosVector]);
            objetArray[i][1] = true;
          }
        }
      }

      for (var i = 0; i < animationQueue.length; i++) {
        var obj = objetArray[animationQueue[i][0]][0];
        var ani_frame = animationQueue[i][1];
        var startPosVector = animationQueue[i][2];
        var endPosVector = animationQueue[i][3];
        var curPosVector = new THREE.Vector3();
        var frac = 1 - Math.abs(ani_frame - (ANIMATION_FRAME_LENGTH / 2)) / (ANIMATION_FRAME_LENGTH / 2);
        frac = easeOutQuad(frac);
        curPosVector.lerpVectors(startPosVector, endPosVector, frac);

        obj.position.x = curPosVector.x;
        obj.position.y = curPosVector.y;
        obj.position.z = curPosVector.z;
        animationQueue[i][1] += 1;
      }

      mouse = new THREE.Vector3(10000, 10000, -2);
      mouseScaled = new THREE.Vector3(10000, 10000, -2);

      renderer.render(scene, camera);
    }

    function onWindowResize() {
      SCREEN_HEIGHT = Math.min(window.innerWidth, window.innerHeight);
      SCREEN_WIDTH = SCREEN_HEIGHT;
      SCREEN_ASPECT_RATIO = SCREEN_WIDTH / SCREEN_HEIGHT;
      camera.aspect = SCREEN_ASPECT_RATIO;
      camera.updateProjectionMatrix();
      renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
      console.log(SCREEN_WIDTH + "x" + SCREEN_HEIGHT)
    }

    function onDocumentMouseMove(event) {

      var rect = canvas.getBoundingClientRect();

      mouse.x = event.clientX - rect.left;
      mouse.y = event.clientY - rect.top;

      mouseScaled.x = mouse.x * viewWidth / SCREEN_WIDTH - viewWidth / 2;
      mouseScaled.y = -mouse.y * viewHeight / SCREEN_HEIGHT + viewHeight / 2;

    }

    function sigmoid(t) {
      return 1 / (1 + Math.pow(Math.E, -t));
    }

    // no easing, no acceleration
    function linear(t) {
      return t;
    }
    // accelerating from zero velocity
    function easeInQuad(t) {
      return t * t;
    }
    // decelerating to zero velocity
    function easeOutQuad(t) {
      return t * (2 - t);
    }
    // acceleration until halfway, then deceleration
    function easeInOutQuad(t) {
      return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
    }
    // accelerating from zero velocity 
    function easeInCubic(t) {
      return t * t * t;
    }
    // decelerating to zero velocity 
    function easeOutCubic(t) {
      return (--t) * t * t + 1;
    }
    // acceleration until halfway, then deceleration 
    function easeInOutCubic(t) {
      return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
    }
    // accelerating from zero velocity 
    function easeInQuart(t) {
      return t * t * t * t;
    }
    // decelerating to zero velocity 
    function easeOutQuart(t) {
      return 1 - (--t) * t * t * t;
    }
    // acceleration until halfway, then deceleration
    function easeInOutQuart(t) {
      return t < .5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t;
    }
    // accelerating from zero velocity
    function easeInQuint(t) {
      return t * t * t * t * t;
    }
    // decelerating to zero velocity
    function easeOutQuint(t) {
      return 1 + (--t) * t * t * t * t;
    }
    // acceleration until halfway, then deceleration 
    function easeInOutQuint(t) {
      return t < .5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t;
    }

    //Event Handlers
    window.addEventListener("resize", onWindowResize);


    init();
    animate();

  }
  ThreeJSCanvas(1);
</script>
<script>
  var xin = true,
      yin = true;
    var step = 2;
    var delay = 10;
    var $obj;
    $(function () {
      $obj = $('#floatingDiv');
      var time = window.setInterval('move()', delay);
      $obj.mouseover(function () {
        clearInterval(time);
      });
      $obj.mouseout(function () {
        time = window.setInterval('move()', delay);
      });
    });

    function move() {
      var left = $obj.offset().left;
      // console.log(left);
      var top = $obj.offset().top;
      var L = (T = 0); //左边界和顶部边界
      var R = $(window).width() - $obj.width(); // 右边界
      var B = $(window).height() - $obj.height(); //下边界

      //难点:怎样判断广告的4个边框有没有超出可视化范围!
      if (left < L) {
        xin = true; // 水平向右移动
      }
      if (left > R) {
        xin = false;
      }
      if (top < T) {
        yin = true;
      }
      if (top > B) {
        yin = false;
      }
      //根据有没有超出范围来确定广告的移动方向
      left += step * (xin == true ? 1 : -1);
      top += step * (yin == true ? 1 : -1);
      // 给div 元素重新定位
      $obj.offset({
        top: top,
        left: left,
      });
    }

</script>
</body>
<script type="text/javascript" src="static/home/lib/layui/layui.all.js"></script>
</html>