ss

src/views/screenshot.vue

@@ -10,13 +10,23 @@
       ></video>
     </div>
     <div class="operate-area">
+      <div class="play-area">
         <input
           id="screenshot-input"
           type="file"
           style="display:none;"
           @change="changeFile"
         >
-      <label id="select-btn">选择文件</label>
+        <label id="select-btn">
+          <span>选择文件</span>
+        </label>
+      </div>
+      <div class="time-area">
+        <div id="ss-time-line">
+          <div class="track"></div>
+        </div>
+      </div>
+      <div class="clip-area"></div>
     </div>
   </div>
 </template>
@@ -26,7 +36,10 @@ export default {
   name: 'Screenshot',
   data() {
     return {
-      srcUrl: null
+      srcUrl: null,
+      videoEle: null,
+      current: 0,
+      duration: 10
     }
   },
   created() {},
@@ -37,6 +50,7 @@ export default {
       input.click()
     })
     let video = document.getElementById('screenshot-video')
+    this.videoEle = video
     video.onerror = function(e) {
       console.log('onerror', e)
     }
@@ -51,24 +65,11 @@ export default {
     //loadedmetadata
   },
   methods: {
-    selectClick() {},
     changeFile(e) {
       //console.log('changeFile', e)
       if (e.target.files[0]) {
         this.srcUrl = URL.createObjectURL(e.target.files[0])
-        // let _this = this
-        // let reader = new FileReader()
-        // reader.addEventListener(
-        //     'load',
-        //     () => {
-        //         console.log('_this.srcUrl', this)
-        //         _this.srcUrl = reader.result
-        //     },
-        //     false
-        // )
-        // reader.readAsDataURL(e.target.files[0])
       }
-      //e.target
     }
   }
 }
@@ -76,20 +77,26 @@ export default {
 
 <style lang="scss" scoped>
 .screenshot {
+  position: relative;
   width: 100%;
   height: 100%;
-    margin: 30px;
   display: flex;
   flex-direction: column;
   .content {
-        height: 90%;
+    height: 100%;
     margin: 20px 30px;
     background-color: lightcyan;
   }
   .operate-area {
+    background-color: aqua;
+    height: 200px;
+    display: flex;
+    flex-shrink: 0;
     #select-btn {
-            width: 200px;
-            height: 100px;
+      background-color: bisque;
+      width: 100px;
+      height: 30px;
+      line-height: 30px;
     }
   }
 }