Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f997fa42 1 parent 8b673a21

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

在视频上传页面添加了提交按钮，用于提交上传的视频信息。同时调整了按钮容器的布局，使其更加美观和实用。此外，优化了视频预览区域的样式，提升了用户体验。
Inline Side-by-side
Showing 2 changed files with 33 additions and 2 deletions
...@@ -28,6 +28,7 @@ declare module 'vue' { ...@@ -28,6 +28,7 @@ declare module 'vue' {
28 VanButton: typeof import('vant/es')['Button'] 28 VanButton: typeof import('vant/es')['Button']
29 VanCellGroup: typeof import('vant/es')['CellGroup'] 29 VanCellGroup: typeof import('vant/es')['CellGroup']
30 VanCheckbox: typeof import('vant/es')['Checkbox'] 30 VanCheckbox: typeof import('vant/es')['Checkbox']
31 + VanCol: typeof import('vant/es')['Col']
31 VanDatePicker: typeof import('vant/es')['DatePicker'] 32 VanDatePicker: typeof import('vant/es')['DatePicker']
32 VanField: typeof import('vant/es')['Field'] 33 VanField: typeof import('vant/es')['Field']
33 VanForm: typeof import('vant/es')['Form'] 34 VanForm: typeof import('vant/es')['Form']
...@@ -39,6 +40,7 @@ declare module 'vue' { ...@@ -39,6 +40,7 @@ declare module 'vue' {
39 VanPopup: typeof import('vant/es')['Popup'] 40 VanPopup: typeof import('vant/es')['Popup']
40 VanProgress: typeof import('vant/es')['Progress'] 41 VanProgress: typeof import('vant/es')['Progress']
41 VanRate: typeof import('vant/es')['Rate'] 42 VanRate: typeof import('vant/es')['Rate']
43 + VanRow: typeof import('vant/es')['Row']
42 VanTab: typeof import('vant/es')['Tab'] 44 VanTab: typeof import('vant/es')['Tab']
43 VanTabs: typeof import('vant/es')['Tabs'] 45 VanTabs: typeof import('vant/es')['Tabs']
44 VanToast: typeof import('vant/es')['Toast'] 46 VanToast: typeof import('vant/es')['Toast']
......
1 <template> 1 <template>
2 <div class="upload-video-container"> 2 <div class="upload-video-container">
3 - <van-button icon="plus" type="primary" @click="showUploadPopup = true">上传视频</van-button> 3 + <div class="button-container">
4 - 4 + <van-button type="primary" @click="showUploadPopup = true">上传视频</van-button>
5 + <van-button type="default" @click="onSubmit">提交上传</van-button>
6 + </div>
5 <div class="video-list"> 7 <div class="video-list">
6 <div v-for="video in videos" :key="video.id" class="video-preview"> 8 <div v-for="video in videos" :key="video.id" class="video-preview">
7 <VideoPlayer :video-url="video.url" :autoplay="false" /> 9 <VideoPlayer :video-url="video.url" :autoplay="false" />
...@@ -40,6 +42,11 @@ const deleteVideo = (id) => { ...@@ -40,6 +42,11 @@ const deleteVideo = (id) => {
40 videos.value = newVideos; 42 videos.value = newVideos;
41 } 43 }
42 }; 44 };
45 +
46 +const onSubmit = () => {
47 + // 提交上传的视频信息
48 + console.log('提交上传的视频信息:', videos.value);
49 +};
43 </script> 50 </script>
44 51
45 <style scoped> 52 <style scoped>
...@@ -47,6 +54,13 @@ const deleteVideo = (id) => { ...@@ -47,6 +54,13 @@ const deleteVideo = (id) => {
47 padding: 16px; 54 padding: 16px;
48 } 55 }
49 56
57 +.button-container {
58 + display: flex;
59 + justify-content: space-between;
60 + width: 100%;
61 + margin-bottom: 16px;
62 +}
63 +
50 .video-list { 64 .video-list {
51 margin-top: 16px; 65 margin-top: 16px;
52 display: grid; 66 display: grid;
...@@ -57,6 +71,21 @@ const deleteVideo = (id) => { ...@@ -57,6 +71,21 @@ const deleteVideo = (id) => {
57 .video-preview { 71 .video-preview {
58 position: relative; 72 position: relative;
59 width: 100%; 73 width: 100%;
74 + min-height: 300px;
75 + display: flex;
76 + flex-direction: column;
77 +}
78 +
79 +.video-info {
80 + padding: 8px;
81 + background-color: #fff;
82 +}
83 +
84 +.video-name {
85 + display: block;
86 + margin-bottom: 8px;
87 + font-size: 14px;
88 + color: #333;
60 } 89 }
61 90
62 .delete-btn { 91 .delete-btn {
......