hookehuyr

feat(上传视频): 添加提交按钮并优化布局

在视频上传页面添加了提交按钮,用于提交上传的视频信息。同时调整了按钮容器的布局,使其更加美观和实用。此外,优化了视频预览区域的样式,提升了用户体验。
......@@ -28,6 +28,7 @@ declare module 'vue' {
VanButton: typeof import('vant/es')['Button']
VanCellGroup: typeof import('vant/es')['CellGroup']
VanCheckbox: typeof import('vant/es')['Checkbox']
VanCol: typeof import('vant/es')['Col']
VanDatePicker: typeof import('vant/es')['DatePicker']
VanField: typeof import('vant/es')['Field']
VanForm: typeof import('vant/es')['Form']
......@@ -39,6 +40,7 @@ declare module 'vue' {
VanPopup: typeof import('vant/es')['Popup']
VanProgress: typeof import('vant/es')['Progress']
VanRate: typeof import('vant/es')['Rate']
VanRow: typeof import('vant/es')['Row']
VanTab: typeof import('vant/es')['Tab']
VanTabs: typeof import('vant/es')['Tabs']
VanToast: typeof import('vant/es')['Toast']
......
<template>
<div class="upload-video-container">
<van-button icon="plus" type="primary" @click="showUploadPopup = true">上传视频</van-button>
<div class="button-container">
<van-button type="primary" @click="showUploadPopup = true">上传视频</van-button>
<van-button type="default" @click="onSubmit">提交上传</van-button>
</div>
<div class="video-list">
<div v-for="video in videos" :key="video.id" class="video-preview">
<VideoPlayer :video-url="video.url" :autoplay="false" />
......@@ -40,6 +42,11 @@ const deleteVideo = (id) => {
videos.value = newVideos;
}
};
const onSubmit = () => {
// 提交上传的视频信息
console.log('提交上传的视频信息:', videos.value);
};
</script>
<style scoped>
......@@ -47,6 +54,13 @@ const deleteVideo = (id) => {
padding: 16px;
}
.button-container {
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 16px;
}
.video-list {
margin-top: 16px;
display: grid;
......@@ -57,6 +71,21 @@ const deleteVideo = (id) => {
.video-preview {
position: relative;
width: 100%;
min-height: 300px;
display: flex;
flex-direction: column;
}
.video-info {
padding: 8px;
background-color: #fff;
}
.video-name {
display: block;
margin-bottom: 8px;
font-size: 14px;
color: #333;
}
.delete-btn {
......