样式优化

zhiyangdu
1 parent e4239b0c
Showing 3 changed files with 71 additions and 32 deletions
src/App.vue
src/pages/instantTea/instantTea.less
src/pages/instantTea/instantTea.vue
@@ -30,6 +30,9 @@
         outline: none;
         /*background-color:transparent;*/
     }
+    .video-js .vjs-big-play-button{
+        background-color: rgba(43, 51, 63, .1);
+    }
     /*.video-js .vjs-slider{*/
         /*background-color: #73859f;*/
     /*}*/
-.instantTea_box{
-    .div1{
-
+.instantTea_box {
+    .div {
+        width: 100%;
     }
-    .div2{
-
+    .div1 {
+        height: 680px;
+        background: #bd3325 url("https://wjj.ys2.cnliveimg.com/769/shop/img/2020/01/06/5e12f2ead41bb.jpg") no-repeat center top;
+        background-size: 100%;
     }
-    .div3{
-
+    .div2 {
+        height: 840px;
+        background: #bd3325 url("https://wjj.ys2.cnliveimg.com/769/shop/img/2020/01/06/5e12f2fb9c714.jpg") no-repeat center top;
+        background-size: 100%;
+        overflow: hidden;
+        .item {
+            width: 652px;
+            height: 262px;
+            background: #bd3325 url("https://wjj.ys2.cnliveimg.com/769/shop/img/2020/01/06/5e12f51dd9d1a.jpg") no-repeat center top;
+            background-size: 100%;
+            margin: 160px auto 0 auto;
+        }
     }
-    .div4{
-
+    .div3 {
+        height: 776px;
+        background: #bd3325 url("https://wjj.ys2.cnliveimg.com/769/shop/img/2020/01/06/5e12f30479d3a.jpg") no-repeat center top;
+        background-size: 100%;
+        overflow: hidden;
+        .video_box {
+            width: 713px !important;
+            height: 418px !important;
+            margin: 0 auto 0 auto;
+            div {
+                margin-top: 0;
+            }
+        }
     }
-    .div5{
-
+    .div4 {
+        height: 570px;
+        background: #bd3325 url("https://wjj.ys2.cnliveimg.com/769/shop/img/2020/01/06/5e12f30c808b4.jpg") no-repeat center top;
+        background-size: 100%;
     }
-    .div6{
-
+    .div5 {
+        height: 750px;
+        background: #bd3325 url("https://wjj.ys2.cnliveimg.com/769/shop/img/2020/01/06/5e12f31607200.jpg") no-repeat center top;
+        background-size: 100%;
     }
-    .div7{
-
+    .div6 {
+        height: 998px;
+        background: #bd3325 url("https://wjj.ys2.cnliveimg.com/769/shop/img/2020/01/06/5e12f31f3a3b4.jpg") no-repeat center top;
+        background-size: 100%;
     }
     //返回和分享功能
-    .top_box{
+    .top_box {
         width: calc(100% - 60px);
         height: 100px;
         position: fixed;
@@ -29,7 +58,7 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        img{
+        img {
             width: 64px;
             height: 64px;
         }
@@ -9,10 +9,20 @@
  
             </div>
             <div class="div2">
+                <div @click="link" class="item">
  
+                </div>
             </div>
             <div class="div3">
-
+                <div class="video_box">
+                    <video-player class="video-player vjs-custom-skin" @play="onPlayerPlay(1)"
+                                  ref="videoPlayer"
+                                  :playsinline="playsinline"
+                                  :options="playerOptions"
+                                  x5-playsinline
+                                  webkit-playsinline>
+                    </video-player>
+                </div>
             </div>
             <div class="div4">
  
@@ -23,11 +33,8 @@
             <div class="div6">
  
             </div>
-            <div class="div6">
-
-            </div>
             <!--头部返回和分享-->
-            <div v-show="isCNLive.value" :style= "'top:'+ $parent.top.value + 'px'" class="top_box">
+            <div v-show="isCNLive.value" :style="'top:'+ $parent.top.value + 'px'" class="top_box">
                 <img @click="$parent.back()" src="../../../static/img/back.jpg" alt=""/>
                 <img @click="$parent.toShare('22','1')" src="../../../static/img/share.jpg" alt=""/>
             </div>
@@ -80,25 +87,25 @@
             document.title = '崇学向善 鼠年有礼';
             // 获取并设置分享参数
             this.$parent.getShareData({
-                type: 22,
+                type: 27,
                 id: this.$route.query.appid || 1,
                 url: ""
             });
         },
         methods: {
             link(){
-                if(this.isCNLive.value){
+                if (this.isCNLive.value) {
                     let items;
-                        items={
-                            "title": "",
-                            "type": "2",
-                            "shop_type":"2",
-                            "to":"9620396",
-                        }
+                    items = {
+                        "title": "",
+                        "type": "2",
+                        "shop_type": "2",
+                        "to": "9620396",
+                    }
                     this.$parent.gotoDetail(items)
  
-                }else {
-                        window.location.href = this.getParams(this.mode).shop.apiAddress + "/html/mall/1/#/pages/main/cultureDetail/cultureDetail?id=9620396"
+                } else {
+                    window.location.href = this.getParams(this.mode).shop.apiAddress + "/html/mall/1/#/pages/main/cultureDetail/cultureDetail?id=9620396"
                 }
             },
             /**