refactor(ui): 更新视频监视器项目组件样式和格式
- 将导入引号更改为双引号并在脚本中添加分号 - 调整CSS引号、背景颜色并重新构建视频控件布局 - 进行轻微的模板调整以获得更好的结构
This commit is contained in:
parent
2000bfe561
commit
9e7c8f7e4e
@ -12,18 +12,12 @@
|
|||||||
|
|
||||||
<transition name="collapse">
|
<transition name="collapse">
|
||||||
<div v-show="!isCollapsed" class="video-monitor-item__content">
|
<div v-show="!isCollapsed" class="video-monitor-item__content">
|
||||||
<div class="video-placeholder">
|
<div class="video-placeholder">
|
||||||
<!-- 视频播放器 -->
|
<!-- 视频播放器 -->
|
||||||
<video
|
<video :src="monitor.videoSrc" autoplay loop muted playsinline />
|
||||||
:src="monitor.videoSrc"
|
|
||||||
autoplay
|
|
||||||
loop
|
|
||||||
muted
|
|
||||||
playsinline
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="video-time">{{ currentTime }}</div>
|
|
||||||
|
|
||||||
|
<div class="video-time">{{ currentTime }}</div>
|
||||||
|
</div>
|
||||||
<!-- 控制条：叠加在视频底部 -->
|
<!-- 控制条：叠加在视频底部 -->
|
||||||
<div class="video-controls">
|
<div class="video-controls">
|
||||||
<div
|
<div
|
||||||
@ -78,69 +72,71 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</transition>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, onUnmounted } from 'vue'
|
import { ref, onMounted, onUnmounted } from "vue";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
monitor: {
|
monitor: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true
|
required: true,
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
defineEmits(['megaphone', 'audio', 'zoom'])
|
defineEmits(["megaphone", "audio", "zoom"]);
|
||||||
|
|
||||||
// 收起/展开状态
|
// 收起/展开状态
|
||||||
const isCollapsed = ref(false)
|
const isCollapsed = ref(false);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 切换收起/展开状态
|
* 切换收起/展开状态
|
||||||
*/
|
*/
|
||||||
const toggleCollapse = () => {
|
const toggleCollapse = () => {
|
||||||
isCollapsed.value = !isCollapsed.value
|
isCollapsed.value = !isCollapsed.value;
|
||||||
}
|
};
|
||||||
|
|
||||||
const currentTime = ref('')
|
const currentTime = ref("");
|
||||||
|
|
||||||
const updateTime = () => {
|
const updateTime = () => {
|
||||||
const now = new Date()
|
const now = new Date();
|
||||||
currentTime.value = now.toLocaleString('zh-CN', {
|
currentTime.value = now
|
||||||
year: 'numeric',
|
.toLocaleString("zh-CN", {
|
||||||
month: '2-digit',
|
year: "numeric",
|
||||||
day: '2-digit',
|
month: "2-digit",
|
||||||
hour: '2-digit',
|
day: "2-digit",
|
||||||
minute: '2-digit',
|
hour: "2-digit",
|
||||||
second: '2-digit',
|
minute: "2-digit",
|
||||||
hour12: false
|
second: "2-digit",
|
||||||
}).replace(/\//g, '/').replace(',', '')
|
hour12: false,
|
||||||
}
|
})
|
||||||
|
.replace(/\//g, "/")
|
||||||
|
.replace(",", "");
|
||||||
|
};
|
||||||
|
|
||||||
let timer = null
|
let timer = null;
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
updateTime()
|
updateTime();
|
||||||
timer = setInterval(updateTime, 1000)
|
timer = setInterval(updateTime, 1000);
|
||||||
})
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
if (timer) {
|
if (timer) {
|
||||||
clearInterval(timer)
|
clearInterval(timer);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@use '@/styles/mixins.scss' as *;
|
@use "@/styles/mixins.scss" as *;
|
||||||
@use '../../assets/styles/common.scss' as *;
|
@use "../../assets/styles/common.scss" as *;
|
||||||
|
|
||||||
.video-monitor-item {
|
.video-monitor-item {
|
||||||
// background: rgba(20, 53, 118, 0.3);
|
// background: rgba(20, 53, 118, 0.3);
|
||||||
background: url('../../assets/images/视频面板bg.png') no-repeat center center;
|
background: url("../../assets/images/视频面板bg.png") no-repeat center center;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
// border-radius: vw(8);
|
// border-radius: vw(8);
|
||||||
@ -158,7 +154,8 @@ onUnmounted(() => {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: vh(10) vw(16);
|
padding: vh(10) vw(16);
|
||||||
background: rgba(20, 53, 118, 0.5);
|
// background: rgba(20, 53, 118, 0.5);
|
||||||
|
background: rgba(6, 38, 62, 0.8);
|
||||||
border-bottom: 1px solid var(--border-color);
|
border-bottom: 1px solid var(--border-color);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
@ -230,7 +227,8 @@ onUnmounted(() => {
|
|||||||
z-index: 2;
|
z-index: 2;
|
||||||
width: clamp(140px, 10.1vw, 194px);
|
width: clamp(140px, 10.1vw, 194px);
|
||||||
height: clamp(28px, vh(32), 36px);
|
height: clamp(28px, vh(32), 36px);
|
||||||
background: url('../../assets/images/video-time-bg.png') no-repeat center center;
|
background: url("../../assets/images/video-time-bg.png") no-repeat
|
||||||
|
center center;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
color: var(--text-white);
|
color: var(--text-white);
|
||||||
font-size: clamp(10px, fs(12), 12px);
|
font-size: clamp(10px, fs(12), 12px);
|
||||||
@ -242,65 +240,66 @@ onUnmounted(() => {
|
|||||||
padding: 0 clamp(4px, 1vw, 8px);
|
padding: 0 clamp(4px, 1vw, 8px);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
// 控制条：叠加在视频底部
|
}
|
||||||
.video-controls {
|
// 控制条：叠加在视频底部
|
||||||
position: absolute;
|
.video-controls {
|
||||||
left: 0;
|
// position: absolute;
|
||||||
right: 0;
|
left: 0;
|
||||||
bottom: 0;
|
right: 0;
|
||||||
z-index: 1;
|
bottom: 0;
|
||||||
// height: clamp(40px, 8vh, 60px);
|
z-index: 1;
|
||||||
background: rgba(10, 31, 57, 0.84);
|
// height: clamp(40px, 8vh, 60px);
|
||||||
display: flex;
|
background: rgba(10, 31, 57, 0.84);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 clamp(10px, 2vw, 20px);
|
||||||
|
// gap: clamp(12px, 1.5vw, 20px);
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.video-control-item {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: row; // 保持左图标右文字布局
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 0 clamp(10px, 2vw, 20px);
|
padding: clamp(2px, vh(6), 8px) clamp(3px, vw(6), 6px);
|
||||||
// gap: clamp(12px, 1.5vw, 20px);
|
background: transparent;
|
||||||
box-sizing: border-box;
|
// border: 1px solid rgba(135, 206, 250, 0.3);
|
||||||
|
// border-radius: vw(4);
|
||||||
|
color: var(--text-white);
|
||||||
|
font-size: clamp(10px, fs(10), 11px);
|
||||||
|
// font-family: SourceHanSansCN-Regular, sans-serif;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.15s ease-out, background 0.2s ease,
|
||||||
|
border-color 0.2s ease;
|
||||||
|
transform-origin: center;
|
||||||
|
|
||||||
.video-control-item {
|
&__icon {
|
||||||
display: inline-flex;
|
width: clamp(12px, vw(14), 18px);
|
||||||
flex-direction: row; // 保持左图标右文字布局
|
height: clamp(12px, vh(14), 18px);
|
||||||
align-items: center;
|
margin-right: clamp(4px, vw(6), 8px);
|
||||||
justify-content: center;
|
flex-shrink: 0;
|
||||||
padding: clamp(2px, vh(6), 8px) clamp(3px, vw(6), 6px);
|
object-fit: contain;
|
||||||
background: transparent;
|
}
|
||||||
// border: 1px solid rgba(135, 206, 250, 0.3);
|
|
||||||
// border-radius: vw(4);
|
|
||||||
color: var(--text-white);
|
|
||||||
font-size: clamp(10px, fs(10), 11px);
|
|
||||||
// font-family: SourceHanSansCN-Regular, sans-serif;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: transform 0.15s ease-out, background 0.2s ease, border-color 0.2s ease;
|
|
||||||
transform-origin: center;
|
|
||||||
|
|
||||||
&__icon {
|
&__label {
|
||||||
width: clamp(12px, vw(14), 18px);
|
white-space: nowrap;
|
||||||
height: clamp(12px, vh(14), 18px);
|
line-height: 1.2;
|
||||||
margin-right: clamp(4px, vw(6), 8px);
|
}
|
||||||
flex-shrink: 0;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__label {
|
&:hover {
|
||||||
white-space: nowrap;
|
transform: scale(1.05);
|
||||||
line-height: 1.2;
|
background: rgba(135, 206, 250, 0.1);
|
||||||
}
|
border-color: rgba(135, 206, 250, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:active {
|
||||||
transform: scale(1.05);
|
transform: scale(0.95);
|
||||||
background: rgba(135, 206, 250, 0.1);
|
}
|
||||||
border-color: rgba(135, 206, 250, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
&:focus-visible {
|
||||||
transform: scale(0.95);
|
outline: 2px solid rgba(135, 206, 250, 0.6);
|
||||||
}
|
outline-offset: 2px;
|
||||||
|
|
||||||
&:focus-visible {
|
|
||||||
outline: 2px solid rgba(135, 206, 250, 0.6);
|
|
||||||
outline-offset: 2px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user