w-front-end / Worship_and_learn_upward · Commits

Commit d11db92ed7b787a3f0328016a02e17e25aa59ff1

Authored by zhiyangdu
1 parent e4239b0c

样式优化

Inline Side-by-side
Showing 3 changed files with 71 additions and 32 deletions
src/App.vue
  View file @d11db92
@@ -30,6 +30,9 @@ @@ -30,6 +30,9 @@
30 outline: none; 30 outline: none;
31 /*background-color:transparent;*/ 31 /*background-color:transparent;*/
32 } 32 }
  33 + .video-js .vjs-big-play-button{
  34 + background-color: rgba(43, 51, 63, .1);
  35 + }
33 /*.video-js .vjs-slider{*/ 36 /*.video-js .vjs-slider{*/
34 /*background-color: #73859f;*/ 37 /*background-color: #73859f;*/
35 /*}*/ 38 /*}*/
src/pages/instantTea/instantTea.less
  View file @d11db92
1 -.instantTea_box{  
2 - .div1{  
3 - 1 +.instantTea_box {
  2 + .div {
  3 + width: 100%;
4 } 4 }
5 - .div2{  
6 - 5 + .div1 {
  6 + height: 680px;
  7 + background: #bd3325 url("https://wjj.ys2.cnliveimg.com/769/shop/img/2020/01/06/5e12f2ead41bb.jpg") no-repeat center top;
  8 + background-size: 100%;
7 } 9 }
8 - .div3{  
9 - 10 + .div2 {
  11 + height: 840px;
  12 + background: #bd3325 url("https://wjj.ys2.cnliveimg.com/769/shop/img/2020/01/06/5e12f2fb9c714.jpg") no-repeat center top;
  13 + background-size: 100%;
  14 + overflow: hidden;
  15 + .item {
  16 + width: 652px;
  17 + height: 262px;
  18 + background: #bd3325 url("https://wjj.ys2.cnliveimg.com/769/shop/img/2020/01/06/5e12f51dd9d1a.jpg") no-repeat center top;
  19 + background-size: 100%;
  20 + margin: 160px auto 0 auto;
  21 + }
10 } 22 }
11 - .div4{  
12 - 23 + .div3 {
  24 + height: 776px;
  25 + background: #bd3325 url("https://wjj.ys2.cnliveimg.com/769/shop/img/2020/01/06/5e12f30479d3a.jpg") no-repeat center top;
  26 + background-size: 100%;
  27 + overflow: hidden;
  28 + .video_box {
  29 + width: 713px !important;
  30 + height: 418px !important;
  31 + margin: 0 auto 0 auto;
  32 + div {
  33 + margin-top: 0;
  34 + }
  35 + }
13 } 36 }
14 - .div5{  
15 - 37 + .div4 {
  38 + height: 570px;
  39 + background: #bd3325 url("https://wjj.ys2.cnliveimg.com/769/shop/img/2020/01/06/5e12f30c808b4.jpg") no-repeat center top;
  40 + background-size: 100%;
16 } 41 }
17 - .div6{  
18 - 42 + .div5 {
  43 + height: 750px;
  44 + background: #bd3325 url("https://wjj.ys2.cnliveimg.com/769/shop/img/2020/01/06/5e12f31607200.jpg") no-repeat center top;
  45 + background-size: 100%;
19 } 46 }
20 - .div7{  
21 - 47 + .div6 {
  48 + height: 998px;
  49 + background: #bd3325 url("https://wjj.ys2.cnliveimg.com/769/shop/img/2020/01/06/5e12f31f3a3b4.jpg") no-repeat center top;
  50 + background-size: 100%;
22 } 51 }
23 //返回和分享功能 52 //返回和分享功能
24 - .top_box{ 53 + .top_box {
25 width: calc(100% - 60px); 54 width: calc(100% - 60px);
26 height: 100px; 55 height: 100px;
27 position: fixed; 56 position: fixed;
@@ -29,7 +58,7 @@ @@ -29,7 +58,7 @@
29 display: flex; 58 display: flex;
30 justify-content: space-between; 59 justify-content: space-between;
31 align-items: center; 60 align-items: center;
32 - img{ 61 + img {
33 width: 64px; 62 width: 64px;
34 height: 64px; 63 height: 64px;
35 } 64 }
src/pages/instantTea/instantTea.vue
  View file @d11db92
@@ -9,10 +9,20 @@ @@ -9,10 +9,20 @@
9 9
10 </div> 10 </div>
11 <div class="div2"> 11 <div class="div2">
  12 + <div @click="link" class="item">
12 13
  14 + </div>
13 </div> 15 </div>
14 <div class="div3"> 16 <div class="div3">
15 - 17 + <div class="video_box">
  18 + <video-player class="video-player vjs-custom-skin" @play="onPlayerPlay(1)"
  19 + ref="videoPlayer"
  20 + :playsinline="playsinline"
  21 + :options="playerOptions"
  22 + x5-playsinline
  23 + webkit-playsinline>
  24 + </video-player>
  25 + </div>
16 </div> 26 </div>
17 <div class="div4"> 27 <div class="div4">
18 28
@@ -23,11 +33,8 @@ @@ -23,11 +33,8 @@
23 <div class="div6"> 33 <div class="div6">
24 34
25 </div> 35 </div>
26 - <div class="div6">  
27 -  
28 - </div>  
29 <!--头部返回和分享--> 36 <!--头部返回和分享-->
30 - <div v-show="isCNLive.value" :style= "'top:'+ $parent.top.value + 'px'" class="top_box"> 37 + <div v-show="isCNLive.value" :style="'top:'+ $parent.top.value + 'px'" class="top_box">
31 <img @click="$parent.back()" src="../../../static/img/back.jpg" alt=""/> 38 <img @click="$parent.back()" src="../../../static/img/back.jpg" alt=""/>
32 <img @click="$parent.toShare('22','1')" src="../../../static/img/share.jpg" alt=""/> 39 <img @click="$parent.toShare('22','1')" src="../../../static/img/share.jpg" alt=""/>
33 </div> 40 </div>
@@ -80,25 +87,25 @@ @@ -80,25 +87,25 @@
80 document.title = '崇学向善 鼠年有礼'; 87 document.title = '崇学向善 鼠年有礼';
81 // 获取并设置分享参数 88 // 获取并设置分享参数
82 this.$parent.getShareData({ 89 this.$parent.getShareData({
83 - type: 22, 90 + type: 27,
84 id: this.$route.query.appid || 1, 91 id: this.$route.query.appid || 1,
85 url: "" 92 url: ""
86 }); 93 });
87 }, 94 },
88 methods: { 95 methods: {
89 link(){ 96 link(){
90 - if(this.isCNLive.value){ 97 + if (this.isCNLive.value) {
91 let items; 98 let items;
92 - items={  
93 - "title": "",  
94 - "type": "2",  
95 - "shop_type":"2",  
96 - "to":"9620396",  
97 - } 99 + items = {
  100 + "title": "",
  101 + "type": "2",
  102 + "shop_type": "2",
  103 + "to": "9620396",
  104 + }
98 this.$parent.gotoDetail(items) 105 this.$parent.gotoDetail(items)
99 106
100 - }else {  
101 - window.location.href = this.getParams(this.mode).shop.apiAddress + "/html/mall/1/#/pages/main/cultureDetail/cultureDetail?id=9620396" 107 + } else {
  108 + window.location.href = this.getParams(this.mode).shop.apiAddress + "/html/mall/1/#/pages/main/cultureDetail/cultureDetail?id=9620396"
102 } 109 }
103 }, 110 },
104 /** 111 /**