Переглянути джерело

banner图片或视频判断写活

ming 1 рік тому
батько
коміт
8939f6919b
11 змінених файлів з 71 додано та 9 видалено
  1. 3 0
      about/index.html
  2. 3 0
      assets/css/style.css
  3. 17 0
      assets/js/commonVue.js
  4. 10 9
      index.html
  5. 3 0
      news/index.html
  6. 3 0
      news/read.html
  7. 3 0
      product/index.html
  8. 3 0
      product/read.html
  9. 7 0
      solution/index.html
  10. 3 0
      solution/read.html
  11. 16 0
      test.html

+ 3 - 0
about/index.html

@@ -54,6 +54,9 @@
 
         <!--====== COMMON BREADCRUMB START ======-->
         <section class="common-bradcrumb-section" style="background-color:#aaa"   v-bind:style="{backgroundImage:'url('+columnImage+')'}">
+            <video id="videoPlay" v-if="modelType==2" autoplay loop muted style="width:100%;height:100%;object-fit:fill;" >
+                <source  type="video/mp4">
+            </video>
         </section>
         <!--====== COMMON BREADCRUMB END ======-->
 

+ 3 - 0
assets/css/style.css

@@ -1595,6 +1595,9 @@
                 margin:0 auto; */
                 
             }
+            .about-text-image video{
+                width:100%!important
+            }
             
             .about-section .about-tile-gallery img.image-one {
                 top: 0;

+ 17 - 0
assets/js/commonVue.js

@@ -35,6 +35,7 @@ var app = new Vue({
     articalArrayRelated: [], //相关推荐
     columnTypes: [], //栏目类型
     colL:0,
+    modelType:1,
     columnImage: '', //栏目图片
 
     // 公共弹框
@@ -158,7 +159,16 @@ var app = new Vue({
             _this.requestParams.categoryid=objData[0].id
           }
           _this.getArticalData(_this.requestParams) 
+          _this.modelType = _this.columnList[i].modelType; 
           _this.columnImage = _this.columnList[i].imagePath; 
+          setTimeout(()=>{
+            if(_this.modelType==2){
+              document.getElementById("videoPlay").src = _this.columnImage; //url为你需要播放的视频地址
+              document.getElementById("videoPlay").setAttribute('poster', '/assets/img/banner/111.png');
+            }
+          },100)
+         
+          
           
         } else { 
 
@@ -187,7 +197,14 @@ var app = new Vue({
               _this.getArticalData(_this.requestParams, 1)
             }, 100)
             _this.currentPath = _this.columnList[i].sname //产品详情时栏目高亮
+            _this.modelType = _this.columnList[i].modelType; //栏目图片获取
             _this.columnImage = _this.columnList[i].imagePath; //栏目图片获取
+            setTimeout(()=>{
+              if(_this.modelType==2){
+                document.getElementById("videoPlay").src = _this.columnImage; //url为你需要播放的视频地址
+                document.getElementById("videoPlay").setAttribute('poster', '/assets/img/banner/111.png');
+              }
+            },100)
           }
         }
         function getSeoCommon(){

+ 10 - 9
index.html

@@ -55,14 +55,20 @@
         <header-com  @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
         <!--====== HEADER END ======-->
 
-        <div class="video-section">
-                        <video autoplay loop muted style="width:100%;height:100%;object-fit:fill;"
+        <div class="video-section" >
+            
+            
+
+            <div v-if="modelType==1" style="width:100%;height:100%;background-size:cover;background-position:center center;background-repeat:no-repeat;" v-bind:style="{backgroundImage:'url('+columnImage+')'}"></div>
+            
+            <video  v-else id="videoPlay"  autoplay loop muted style="width:100%;height:100%;object-fit:fill;"
                 poster="assets/img/banner/111.png">
-                <source src="assets/video/122.mp4" type="video/mp4">
+                <source  type="video/mp4">
             </video>
+            
             <div class="video-des">
                 <div class="des1">
-                    <p class="animate__animated  animate__fadeInUp">公司成立<span class="num1">20年</span>,围绕行业细分,累计服务超过
+                                        <p class="animate__animated  animate__fadeInUp">公司成立<span class="num1">20年</span>,围绕行业细分,累计服务超过
                         <span class="num1">5000</span> 家企业,近<span class="num1"> 10万 </span>个用户</p>
                 </div>
                 <div class="des2 desCom animate__animated  animate__flipInX"
@@ -242,11 +248,6 @@
     <!--====== commonVue js ======-->
     <script type="module" src="assets/js/commonVue.js "></script>
 
-
-    <script>
-        $('meta[name="description"]').attr("content", "新的描述内容");
-    </script>
-
     </body>
 
 </html>

+ 3 - 0
news/index.html

@@ -55,6 +55,9 @@
 
         <!--====== NEWS BREADCRUMB START ======-->
         <section class="common-bradcrumb-section" style="background-color:#aaa"   v-bind:style="{backgroundImage:'url('+columnImage+')'}">
+            <video id="videoPlay" v-if="modelType==2" autoplay loop muted style="width:100%;height:100%;object-fit:fill;" >
+                <source  type="video/mp4">
+            </video>
         </section>
         <!--====== NEWS BREADCRUMB END ======-->
 

+ 3 - 0
news/read.html

@@ -53,6 +53,9 @@
 
         <!--====== NEWS BREADCRUMB START ======-->
         <section class="common-bradcrumb-section" style="background-color:#aaa"   v-bind:style="{backgroundImage:'url('+columnImage+')'}">
+            <video id="videoPlay" v-if="modelType==2" autoplay loop muted style="width:100%;height:100%;object-fit:fill;" >
+                <source  type="video/mp4">
+            </video>
         </section>
         <!--====== NEWS BREADCRUMB END ======-->
 

+ 3 - 0
product/index.html

@@ -57,6 +57,9 @@
         <!--====== COMMON BREADCRUMB START ======-->
         <section class="common-bradcrumb-section" style="background-color:#aaa" v-if="columnTypes.length>1"  v-bind:style="{backgroundImage:'url('+columnImage+')'}">
             <section class="product-grid-section " style="text-align: center;position:absolute;bottom:0"    :style="{'width': '100%'}" >
+                <video id="videoPlay" v-if="modelType==2" autoplay loop muted style="width:100%;height:100%;object-fit:fill;" >
+                    <source  type="video/mp4">
+                </video>
                 <ul class="cannot_selected tabs_selected" >
                     <a v-for="(item,i) in columnTypes" :class="item.id == requestParams.categoryid ? 'active' : ''"
                     v-on:mouseover="facilityClick(i, item)" :style="{'width':(1/columnTypes.length*100)+'%' }">{{item.categoryName}}</a>

+ 3 - 0
product/read.html

@@ -54,6 +54,9 @@
 
         <!--====== PRODUCT BREADCRUMB START ======-->
         <section class="common-bradcrumb-section" style="background-color:#aaa"  v-bind:style="{backgroundImage:'url('+columnImage+')'}">
+            <video id="videoPlay" v-if="modelType==2" autoplay loop muted style="width:100%;height:100%;object-fit:fill;" >
+                <source  type="video/mp4">
+            </video>
         </section>
         
 

+ 7 - 0
solution/index.html

@@ -50,8 +50,15 @@
 
         <!--====== COMMON BREADCRUMB START ======-->
         <section class="common-bradcrumb-section" style="background-color:#aaa"   v-bind:style="{backgroundImage:'url('+columnImage+')'}">
+            <video id="videoPlay" v-if="modelType==2" autoplay loop muted style="width:100%;height:100%;object-fit:fill;" >
+                <source  type="video/mp4">
+            </video>
+            
                 </section>
+
+                
         <!--====== COMMON BREADCRUMB END ======-->
+      
 
         <!--====== SOLUTION TYPE START ======-->
         <section style="background:#F4F8FD" class="solutionType">

+ 3 - 0
solution/read.html

@@ -55,6 +55,9 @@
 
         <!--====== PRODUCT BREADCRUMB START ======-->
         <section class="common-bradcrumb-section" style="background-color:#aaa"   v-bind:style="{backgroundImage:'url('+columnImage+')'}">
+            <video id="videoPlay" v-if="modelType==2" autoplay loop muted style="width:100%;height:100%;object-fit:fill;" >
+                <source  type="video/mp4">
+            </video>
         </section>
 
         <!--====== PRODUCT CONTENT START ======-->

Різницю між файлами не показано, бо вона завелика
+ 16 - 0
test.html


Деякі файли не було показано, через те що забагато файлів було змінено