f5746e695b
- 移除了 LiveRoom 组件中的冗余控制台日志输出 -调整了 LiveRoom 组件的样式，使其占据剩余空间 - 隐藏了 Prism Player 的控制条 - 简化了 nuxt.config.js 中的导入语句 - 在 package.json 中添加了新的开发和构建脚本
93 lines
2.9 KiB
Vue
93 lines
2.9 KiB
Vue
<script setup>
|
||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||
import Aliplayer from 'aliyun-aliplayer';
|
||
import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css';
|
||
import lock4 from '@/static/images/lock4@2x.png';
|
||
import lockdfd from '@/static/images/lockdfd@2x.png';
|
||
const player = ref(null);
|
||
const quoteStatus = ref(false);
|
||
const config = useRuntimeConfig()
|
||
console.log('config',config)
|
||
const changeStatus = () => {
|
||
|
||
quoteStatus.value = !quoteStatus.value;
|
||
};
|
||
|
||
onMounted(() => {
|
||
player.value = new Aliplayer({
|
||
id: 'J_prismPlayer',
|
||
source: 'artc://live-pull-sh-01.szjixun.cn/live/live?auth_key=1736748343-0-0-feef65166e5cc62957c35b6e3eec82a1',
|
||
isLive: true,
|
||
}, function(player) {
|
||
console.log('The player is created.');
|
||
});
|
||
|
||
player.value.on('rtsTraceId', function(event) {
|
||
console.log('EVENT rtsTraceId', event.paramData);
|
||
});
|
||
player.value.on('rtsFallback', function(event) {
|
||
console.log('EVENT rtsFallback', event.paramData);
|
||
});
|
||
});
|
||
|
||
onBeforeUnmount(() => {
|
||
if (player.value) {
|
||
player.value.dispose();
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="relative flex-grow-1">
|
||
<div id="J_prismPlayer" style="width: 100vw;height: 90vh"></div>
|
||
<div class="absolute bg-#fff w-60px top-196px right-0 z-999 rounded-l-4px">
|
||
<div class="w-full h-60px text-#7D7D7F text-12px flex flex-col justify-center items-center border-b-1px border-b-#D3D3D3">
|
||
<div>拍品</div>
|
||
<div>(1/188)</div>
|
||
</div>
|
||
<div class="w-full h-60px flex flex-col items-center justify-center" @click="changeStatus">
|
||
<div class="mb-3px">
|
||
<img :src="quoteStatus ? lockdfd : lock4"
|
||
class="w-16px h-21px"
|
||
alt="">
|
||
</div>
|
||
<div :class="quoteStatus ? 'text-#7D7D7F' : 'text-#2B53AC'"
|
||
class="text-10px">
|
||
{{ quoteStatus ? '关闭出价' : '开启出价' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="absolute top-505px left-1/2 transform -translate-x-1/2 flex flex-col items-center">
|
||
<div class="text-16px text-#FFB25F font-600">
|
||
当前价：RMB <van-rolling-text class="my-rolling-text" :start-num="0" :target-num="3000" direction="up" />
|
||
</div>
|
||
<div class="text-16px text-#fff font-600">
|
||
下口价：RMB <van-rolling-text class="my-rolling-text1" :start-num="0" :target-num="3500" direction="up" />
|
||
</div>
|
||
<div class="w-344px h-[40px] bg-#D6D6D8 rounded-4px text-#7D7D7F text-14px flex justify-center items-center">
|
||
点击"开启出价"，即刻参与竞拍
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
|
||
.my-rolling-text {
|
||
--van-rolling-text-item-width: 10px;
|
||
--van-rolling-text-font-size: 16px;
|
||
--van-rolling-text-color: #FFB25F;
|
||
}
|
||
.my-rolling-text1 {
|
||
--van-rolling-text-item-width: 10px;
|
||
--van-rolling-text-font-size: 16px;
|
||
--van-rolling-text-color: #FFF;
|
||
}
|
||
video {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
:deep(.prism-controlbar){
|
||
display: none!important;
|
||
}
|
||
</style> |