转换宝页面结构

src/components/sideNav/index.vue

@@ -3,7 +3,7 @@
         <router-link to="/">Home</router-link>
         <router-link to="/about">About</router-link>
         <router-link to="/cutter">cutter</router-link>
-        <router-link to="/videoConverter">videoConverter</router-link>
+        <router-link to="/videoConverter">转换宝</router-link>
         <router-link to="/screenshot">screenshot</router-link>
     </div>
 </template>

src/views/videoConverter.vue

 <template>
-    <div class="videoConverter">转换baby</div>
+    <div class="videoConverter">
+        <ul>
+            <li v-for="(item, index) in taskList" :key="index">
+                <div class="info">
+                    <div class="cove">视频封面</div>
+                    <div>
+                        <div>{{ item.name }}.mp4</div>
+                        <div>时长:{{ item.duration }}</div>
+                    </div>
+                </div>
+                <div class="operationPanel">
+                    <div class="wait" v-show="item.state == 0">
+                        <div>输出格式</div>
+                        <div class="selectionFormat">mp4</div>
+                        <div class="delete" @click="clearAllTasks(item)">删除</div>
+                    </div>
+                    <div class="active" v-show="item.state == 1">
+                        <div class="progress">
+                            <div>转换中{{ item.progress }}%</div>
+                            <div class="slide">
+                                <div></div>
+                            </div>
+                        </div>
+
+                        <div class="stop" @click="stopTask(item)">取消</div>
+                    </div>
+                </div>
+            </li>
+        </ul>
+
+        <div class="editBar">
+            <div class="addVideo" @click="addVideo">添加视频</div>
+            <div class="clearList" @click="clearAllTasks">清空列表</div>
+            <div class="clearWatermark">去除水印</div>
+        </div>
+
+        <div class="startAll" @click="startAllTasks">开始转换</div>
+    </div>
 </template>
 
 <script>
@@ -8,20 +45,186 @@ export default {
     components: {},
     props: {},
     data() {
-        return {}
+        return {
+            taskList: []
+        }
     },
     computed: {},
     watch: {},
-    methods: {}
+    methods: {
+        addVideo() {
+            this.taskList.push({
+                cover: '',
+                name: '视频片段' + (this.taskList.length + 1),
+                duration: '10:00',
+                state: 0,
+                progress: 60,
+                outputFormat: 'mp4'
+            })
+        },
+        stopTask(item) {
+            item.state = 0
+        },
+        clearTask(item) {
+            let index = this.taskList(item)
+            if (index > -1) {
+                this.taskList.splice(index, 1)
+            }
+        },
+        clearAllTasks() {
+            this.taskList = []
+        },
+        startAllTasks() {
+            this.taskList.forEach((task) => {
+                task.state = 1
+            })
+        }
+    },
+    created() {
+        for (let i = 1; i < 10; i++) {
+            this.taskList.push({
+                cover: '',
+                name: '视频片段' + i,
+                duration: '10:00',
+                state: 0,
+                progress: 60,
+                outputFormat: 'mp4'
+            })
+        }
+    }
 }
 </script>
 
 <style scoped lang="scss">
 .videoConverter {
     width: 100%;
-    height: 100%;
+    height: 800px;
     background-color: #fff;
     border: 0px solid black;
     margin: 0px;
+    padding: 0 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    overflow: hidden;
+
+    > ul {
+        width: 100%;
+        height: 100%;
+        border: 1px solid black;
+        flex-grow: 1;
+        overflow-y: scroll;
+        > li {
+            padding: 5px 0;
+            height: 60px;
+
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        > li:nth-of-type(odd) {
+            background-color: gainsboro;
+        }
+        .info {
+            display: flex;
+            align-items: center;
+            .cove {
+                width: 100px;
+                height: 40px;
+                background-color: #ccc;
+                line-height: 40px;
+                margin-right: 10px;
+            }
+        }
+
+        .operationPanel {
+            width: 300px;
+            height: 100%;
+            .wait {
+                height: 100%;
+                display: flex;
+                align-items: center;
+                .selectionFormat {
+                    height: 30px;
+                    width: 100px;
+                    line-height: 30px;
+                    border: 1px solid black;
+                    margin-left: 20px;
+                }
+                .delete {
+                    width: 60px;
+                    height: 30px;
+                    line-height: 30px;
+                    background-color: black;
+                    color: #fff;
+                    margin-left: 20px;
+                }
+            }
+            .active {
+                height: 100%;
+                width: 300px;
+                display: flex;
+                align-items: center;
+                .progress {
+                }
+
+                .slide {
+                    width: 200px;
+                    height: 5px;
+                    background: gray;
+                    > div {
+                        width: 120px;
+                        height: 100%;
+                        background-color: black;
+                    }
+                }
+                .stop {
+                    width: 60px;
+                    height: 30px;
+                    line-height: 30px;
+                    background-color: black;
+                    color: #fff;
+                    margin-left: 20px;
+                }
+            }
+        }
+    }
+
+    .editBar {
+        position: relative;
+        height: 30px;
+        width: 100%;
+        margin: 20px 0;
+
+        .addVideo {
+            position: absolute;
+            left: 0;
+            height: 30px;
+            line-height: 30px;
+            border: 1px solid black;
+        }
+        .clearList {
+            position: absolute;
+            left: 100px;
+            height: 30px;
+            line-height: 30px;
+            border: 1px solid black;
+        }
+        .clearWatermark {
+            position: absolute;
+            right: 0;
+            height: 30px;
+            line-height: 30px;
+            border: 1px solid black;
+        }
+    }
+    .startAll {
+        height: 30px;
+        width: 100px;
+        background-color: black;
+        color: #fff;
+        line-height: 30px;
+    }
 }
 </style>