|
@@ -2,50 +2,52 @@
|
|
|
<view class="swiper-wrapper" :class="liveItem.showType == 1 ? 'horizontal' : ''">
|
|
<view class="swiper-wrapper" :class="liveItem.showType == 1 ? 'horizontal' : ''">
|
|
|
<view class="container">
|
|
<view class="container">
|
|
|
<!-- 预告直播状态 -->
|
|
<!-- 预告直播状态 -->
|
|
|
- <view class="trailer-box" v-if="liveItem.status == 1">
|
|
|
|
|
- <view class="video-container2" :style="{ paddingBottom: videoRatio + '%',height:auto,width:'100%'}">
|
|
|
|
|
- <video v-if="liveItem.previewUrl" :id="`myVideo_${liveId}`" class="trailer-video"
|
|
|
|
|
- :src="liveItem.previewUrl" :autoplay="true" :loop="false" object-fit="fill" :custom-cache="false"
|
|
|
|
|
- :enable-progress-gesture="false" vslide-gesture-in-fullscreen="false" :show-center-play-btn="false"
|
|
|
|
|
- :http-cache="false" @error="videoError" @loadedmetadata="onVideoMetaLoaded" @pause="onVideoPause"
|
|
|
|
|
- @play="onVideoPlay" :disable-progress="true" :enable-play-gesture="true" @waiting="onVideoWaiting"
|
|
|
|
|
- preload="auto" type="application/x-mpegURL" :controls="false"></video>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <image v-if="liveItem.status == 1 && !liveItem.previewUrl" class="trailer-placeholder"
|
|
|
|
|
- src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/no_live.png">
|
|
|
|
|
- </image>
|
|
|
|
|
- <view class="countdown-container" v-if="liveItem.status == 1 && liveCountdown">
|
|
|
|
|
- <view class="live-name">{{ liveItem.liveName }}</view>
|
|
|
|
|
- <view class="countdown-display">
|
|
|
|
|
- <text class="countdown-label">距离开播还有</text>
|
|
|
|
|
- <view class="countdown-unit">
|
|
|
|
|
- {{ liveCountdown.hours || '00' }}
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="countdown-separator">:</view>
|
|
|
|
|
- <view class="countdown-unit">
|
|
|
|
|
- {{ liveCountdown.minutes || '00' }}
|
|
|
|
|
|
|
+ <view class="trailer-box2" v-if="liveItem.status == 1">
|
|
|
|
|
+ <view class="video-container2" :style="{ paddingBottom:videoRatio + '%',height:auto,width:'100%'}">
|
|
|
|
|
+ <!-- <view class="video-container2" :style="{ paddingBottom:liveItem.previewUrl?videoRatio + '%':'' ,height:auto,width:'100%'}"> -->
|
|
|
|
|
+ <!-- <video v-if="liveItem.previewUrl" :id="`myVideo_${liveId}`" class="trailer-video" -->
|
|
|
|
|
+ <video :id="`myVideo_${liveId}`" class="trailer-video"
|
|
|
|
|
+ src="https://7f49ea74-bjzmkytcpv-ylrzcloud-com.tliveapp.com/course/20251211/1765419935568.mp4" :autoplay="true" :loop="false"
|
|
|
|
|
+ :object-fit="isHeight?'contain':'fill'" :custom-cache="false"
|
|
|
|
|
+ :enable-progress-gesture="false" vslide-gesture-in-fullscreen="false" :show-center-play-btn="false"
|
|
|
|
|
+ :http-cache="false" @error="videoError" @loadedmetadata="onVideoMetaLoaded" @pause="onVideoPause"
|
|
|
|
|
+ @play="onVideoPlay" :disable-progress="true" :enable-play-gesture="true" @waiting="onVideoWaiting"
|
|
|
|
|
+ preload="auto" type="application/x-mpegURL" :controls="false"></video>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="countdown-separator">:</view>
|
|
|
|
|
- <view class="countdown-unit">
|
|
|
|
|
- {{ liveCountdown.seconds || '00' }}
|
|
|
|
|
|
|
+ <image v-if="liveItem.status == 1 && !liveItem.previewUrl" class="trailer-placeholder"
|
|
|
|
|
+ src="/static/images/y-bg.png">
|
|
|
|
|
+ </image>
|
|
|
|
|
+ <view class="countdown-container" v-if="liveItem.status == 1 && liveCountdown">
|
|
|
|
|
+ <!-- <view class="live-name">{{ liveItem.liveName }}</view> -->
|
|
|
|
|
+ <view class="countdown-display">
|
|
|
|
|
+ <text class="countdown-label">距离开播还有</text>
|
|
|
|
|
+ <view class="countdown-unit">
|
|
|
|
|
+ {{ liveCountdown.hours || '00' }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="countdown-separator">:</view>
|
|
|
|
|
+ <view class="countdown-unit">
|
|
|
|
|
+ {{ liveCountdown.minutes || '00' }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="countdown-separator">:</view>
|
|
|
|
|
+ <view class="countdown-unit">
|
|
|
|
|
+ {{ liveCountdown.seconds || '00' }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="trailer-actions">
|
|
|
|
|
- <button open-type="share" class="button-reset share-button">
|
|
|
|
|
- <view class="action-button mr18" @click="handleAgreement">
|
|
|
|
|
- <text>分享给好友</text>
|
|
|
|
|
|
|
+ <view class="trailer-actions">
|
|
|
|
|
+ <button open-type="share" class="button-reset share-button">
|
|
|
|
|
+ <view class="action-button mr24" @click="handleAgreement">
|
|
|
|
|
+ <text>分享给好友</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </button>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="action-button reserve-button" @click="handleAgreement">
|
|
|
|
|
+ <!-- <image class="button-icon mr8" src="/static/images/trailer.png"></image> -->
|
|
|
|
|
+ <text>预约直播</text>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
- </button>
|
|
|
|
|
-
|
|
|
|
|
- <view class="action-button reserve-button" @click="handleAgreement">
|
|
|
|
|
- <image class="button-icon mr8" src="/static/images/trailer.png"></image>
|
|
|
|
|
- <text>预约直播</text>
|
|
|
|
|
</view>
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
<!-- 无直播状态 -->
|
|
<!-- 无直播状态 -->
|
|
|
<view class="trailer-box" v-if="!liveItem">
|
|
<view class="trailer-box" v-if="!liveItem">
|
|
|
<image class="trailer-placeholder"
|
|
<image class="trailer-placeholder"
|
|
@@ -102,6 +104,7 @@
|
|
|
<text>{{ orderUser.count || 0 }}人正在去购买</text>
|
|
<text>{{ orderUser.count || 0 }}人正在去购买</text>
|
|
|
</view> -->
|
|
</view> -->
|
|
|
|
|
|
|
|
|
|
+
|
|
|
<!-- 视频区域 -->
|
|
<!-- 视频区域 -->
|
|
|
|
|
|
|
|
<view class="videolist" v-if="liveItem.status == 2" :class="isFullscreen ? 'screen' : ''">
|
|
<view class="videolist" v-if="liveItem.status == 2" :class="isFullscreen ? 'screen' : ''">
|
|
@@ -743,7 +746,7 @@
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
menuButtonInfo: {}, // 胶囊按钮布局信息
|
|
menuButtonInfo: {}, // 胶囊按钮布局信息
|
|
|
-
|
|
|
|
|
|
|
+ isHeight:false,
|
|
|
isFullscreen: false,
|
|
isFullscreen: false,
|
|
|
isVideoRotated: false,
|
|
isVideoRotated: false,
|
|
|
showNonVideoElementsFlag: true,
|
|
showNonVideoElementsFlag: true,
|
|
@@ -3073,6 +3076,9 @@
|
|
|
//横屏
|
|
//横屏
|
|
|
const wW = (winW / winH) * 100;
|
|
const wW = (winW / winH) * 100;
|
|
|
//竖屏
|
|
//竖屏
|
|
|
|
|
+ if(height>width){
|
|
|
|
|
+ this.isHeight=true
|
|
|
|
|
+ }
|
|
|
const wH = (winH / winW) * 100;
|
|
const wH = (winH / winW) * 100;
|
|
|
// this.scale = wW / this.videoRatio;
|
|
// this.scale = wW / this.videoRatio;
|
|
|
// if (this.liveItem.showType == 2) {
|
|
// if (this.liveItem.showType == 2) {
|
|
@@ -4826,7 +4832,7 @@
|
|
|
line-height: 1 !important;
|
|
line-height: 1 !important;
|
|
|
margin: 0 !important;
|
|
margin: 0 !important;
|
|
|
width: auto !important;
|
|
width: auto !important;
|
|
|
- font-weight: 500 !important;
|
|
|
|
|
|
|
+ // font-weight: 500 !important;
|
|
|
border-radius: none !important;
|
|
border-radius: none !important;
|
|
|
|
|
|
|
|
&::after {
|
|
&::after {
|
|
@@ -4896,7 +4902,7 @@
|
|
|
background: var(--pop-bg);
|
|
background: var(--pop-bg);
|
|
|
border-radius: 24rpx;
|
|
border-radius: 24rpx;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- top: 15%;
|
|
|
|
|
|
|
+ top: 16%;
|
|
|
left: 50%;
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -4913,7 +4919,7 @@
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
z-index: 1;
|
|
z-index: 1;
|
|
|
- border-radius: 20rpx;
|
|
|
|
|
|
|
+ border-radius:20rpx ;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.trailer-placeholder {
|
|
.trailer-placeholder {
|
|
@@ -4998,7 +5004,117 @@
|
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+ // 新预告直播盒子
|
|
|
|
|
+ .trailer-box2 {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 16%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ z-index: 999;
|
|
|
|
|
+ transition: box-shadow 0.3s ease ;
|
|
|
|
|
+ height: 400rpx;
|
|
|
|
|
+ .trailer-video {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ z-index: 1;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .trailer-placeholder {
|
|
|
|
|
+
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ z-index: -1; /* 置于内容下方 */
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .countdown-container {
|
|
|
|
|
+ padding-top: 15%;
|
|
|
|
|
+ margin: 20rpx 0;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+ .live-name {
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .countdown-display {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin: 30rpx 0;
|
|
|
|
|
+
|
|
|
|
|
+ .countdown-label {
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ color: rgba(250, 214, 176, 1);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .countdown-separator {
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: #999999;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .countdown-unit {
|
|
|
|
|
+ width: 60rpx;
|
|
|
|
|
+ height: 60rpx;
|
|
|
|
|
+ background: rgba(255, 246, 214, 1);
|
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ margin: 0 8rpx;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
|
+ color: rgba(0, 75, 59, 1);
|
|
|
|
|
+ line-height: 60rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
|
|
+ .trailer-actions {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+ .action-button {
|
|
|
|
|
+ width: 280rpx;
|
|
|
|
|
+ height: 72rpx;
|
|
|
|
|
+ border-radius: 36rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+border: 1px solid rgba(151, 151, 151, 1);
|
|
|
|
|
+font-size: 36rpx;
|
|
|
|
|
+font-weight: bold;
|
|
|
|
|
+ &.reserve-button {
|
|
|
|
|
+ color: rgba(0, 110, 80, 1);
|
|
|
|
|
+ background: linear-gradient(231.51deg, rgba(249, 215, 178, 1) 0%, rgba(255, 255, 191, 1) 47.83%, rgba(255, 250, 229, 1) 65.77%, rgba(248, 214, 178, 1) 100%);
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &:not(.reserve-button) {
|
|
|
|
|
+ color: rgba(255, 246, 214, 1);
|
|
|
|
|
+ background: rgba(0, 110, 80, 1);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .button-icon {
|
|
|
|
|
+ width: 32rpx;
|
|
|
|
|
+ height: 32rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .no-live-title {
|
|
|
|
|
+ margin-top: 30rpx;
|
|
|
|
|
+ font-size: 42rpx;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
// 主要内容区域
|
|
// 主要内容区域
|
|
|
.content {
|
|
.content {
|
|
|
position: relative;
|
|
position: relative;
|
|
@@ -5292,11 +5408,8 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&.chat-area-container3 {
|
|
&.chat-area-container3 {
|
|
|
-
|
|
|
|
|
- max-height: 40%;
|
|
|
|
|
|
|
+ height:calc(85% - 420rpx);
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
- min-height: 0; // 重要:允许收缩到0
|
|
|
|
|
- // position: relative;
|
|
|
|
|
transform: none; // 移除之前的变换
|
|
transform: none; // 移除之前的变换
|
|
|
will-change: auto;
|
|
will-change: auto;
|
|
|
display: flex;
|
|
display: flex;
|