From c5cc509bdc9956672ee34d28a55e572062737274 Mon Sep 17 00:00:00 2001
From: jack <la5c@qq.com>
Date: Mon, 12 Feb 2018 12:16:39 +0800
Subject: [PATCH] add video on index banner

---
 .../default/views/scripts/index/index.phtml   | 21 +++++++++++++
 htdocs/static-sanji/css/index.css             | 17 +++++++++++
 htdocs/static-sanji/js/index.js               | 30 +++++++++++++++++++
 3 files changed, 68 insertions(+)

diff --git a/application/default/views/scripts/index/index.phtml b/application/default/views/scripts/index/index.phtml
index ec397f95..75b6ef1e 100755
--- a/application/default/views/scripts/index/index.phtml
+++ b/application/default/views/scripts/index/index.phtml
@@ -9,8 +9,29 @@
 <section class="panel home" data-section-name="首页">
     <div class="swiper-container banner">
         <div class="swiper-wrapper">
+            <div class="swiper-slide" style="background:url('<?php echo $this->news[0]['image']; ?>') no-repeat center;background-size:cover">
+                <span class="cdate"><!-- [<?php echo date("Y-m-d",strtotime($this->news[0]['ts_published'])) ?>] --></span>
+                <h2 class="btitle"><a href="javascript:void(0);" data-rel="<?php echo $this->news[0]['url']; ?>"><?php echo $this->news[0]['title']; ?></a></h2>
+                <?php
+                $description = "";
+                if (mb_strlen($this->news[0]['description'])>100)
+                {
+                    $description = mb_substr($this->news[0]['description'],0,100,'utf-8').'...';
+                }else{
+                    $description = $this->news[0]['description'];
+                }
+                ?>
+                <h4 class="bstitle"><?php echo $description; ?></h4>
+            </div>
+            <div class="swiper-slide" id="video_silder">
+                <video autoplay muted loop>
+                    <source src="/upload/media/tpe_1.mp4" type="video/mp4">
+                </video>
+                <h2 class="video_cover"><a href="javascript:void(0);">基于MODIS的2003年高亚洲积雪覆盖变化</a></h2>
+            </div>
             <?php foreach($this->news as $k=>$v) { ?>
                 <?php
+                if($k < 1) continue;
                 $description = "";
                 if (mb_strlen($v['description'])>100)
                 {
diff --git a/htdocs/static-sanji/css/index.css b/htdocs/static-sanji/css/index.css
index c8659a67..aa516bdc 100644
--- a/htdocs/static-sanji/css/index.css
+++ b/htdocs/static-sanji/css/index.css
@@ -348,3 +348,20 @@ h1{
      font-size: 25px;
      color:#ccc;
  }
+
+ #video_silder{background: #000;}
+
+ video {
+     position: absolute;
+     background: #000;
+     width:100%;
+     left: 50%;
+     top:50%;
+     transform: translate(-50%, -50%);
+ }
+
+ .video_cover {
+     position: absolute;
+     left: 50%;
+     top: 50%;
+ }
\ No newline at end of file
diff --git a/htdocs/static-sanji/js/index.js b/htdocs/static-sanji/js/index.js
index ac1d94e1..28ad3539 100644
--- a/htdocs/static-sanji/js/index.js
+++ b/htdocs/static-sanji/js/index.js
@@ -63,4 +63,34 @@ $(function() {
     $('section.panel div.container').each(function(elem){
         $(this).css({position: 'relative', top: ($(window).height() -$(this).height()) / 2 });
     });
+
+    var video = document.querySelector('video')
+        , container = document.querySelector('#video_silder');
+
+    var setVideoDimensions = function () {
+        var w = video.videoWidth
+            , h = video.videoHeight;
+        var videoRatio = (w / h).toFixed(2);
+
+        var containerStyles = window.getComputedStyle(container)
+            , minW = parseInt( containerStyles.getPropertyValue('width') )
+            , minH = parseInt( containerStyles.getPropertyValue('height') );
+        var widthRatio = minW / w
+            , heightRatio = minH / h;
+
+        if (widthRatio > heightRatio) {
+            var newWidth = minW;
+            var newHeight = Math.ceil( newWidth / videoRatio );
+        }
+        else {
+            var newHeight = minH;
+            var newWidth = Math.ceil( newHeight * videoRatio );
+        }
+
+        video.style.width = newWidth + 'px';
+        video.style.height = newHeight + 'px';
+    };
+
+    video.addEventListener('loadedmetadata', setVideoDimensions, false);
+    window.addEventListener('resize', setVideoDimensions, false);
  });