ss

src/App.vue

@@ -32,21 +32,21 @@ export default {
 
 <style lang="scss">
 #app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    position: relative;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  position: relative;
 }
 
 .body-container {
-    flex: 1;
-    display: flex;
-    justify-content: space-between;
-    overflow: hidden;
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
 }
 </style>

src/components/header/index.vue

@@ -35,11 +35,11 @@ export default {
 <style scoped lang="scss">
 /* @import url(); 引入css类 */
 .comp-commonheader {
-    width: 100%;
-    height: 100px;
-    border: 1px solid pink;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
+  width: 100%;
+  height: 100px;
+  border: 1px solid pink;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
 }
 </style>

src/components/modal/modalLayer.vue

@@ -22,10 +22,10 @@ export default {
 
 <style lang="scss" scoped>
 .modal-layer {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 0;
-    height: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 0;
 }
 </style>

src/components/rightPanel/index.vue

@@ -17,8 +17,8 @@ export default {
 <style scoped lang="scss">
 /* @import url(); 引入css类 */
 .comp-rightpanel {
-    width: 150px;
-    height: 100%;
-    border: 1px solid skyblue;
+  width: 150px;
+  height: 100%;
+  border: 1px solid skyblue;
 }
 </style>

src/components/sideNav/index.vue

@@ -31,22 +31,22 @@ export default {
 <style scoped lang="scss">
 /* @import url(); 引入css类 */
 .comp-sidenav {
-    padding: 30px;
-    // width: 100px;
-    border: 1px solid skyblue;
-    height: 100%;
-    // display: flex;
+  padding: 30px;
+  // width: 100px;
+  border: 1px solid skyblue;
+  height: 100%;
+  // display: flex;
 
-    a {
-        font-weight: bold;
-        color: #2c3e50;
-        display: inline-block;
-        width: 100%;
-        padding: 10px 0;
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+    display: inline-block;
+    width: 100%;
+    padding: 10px 0;
 
-        &.router-link-exact-active {
-            color: #42b983;
-        }
+    &.router-link-exact-active {
+      color: #42b983;
     }
+  }
 }
 </style>

src/views/screenshot.vue

@@ -10,13 +10,23 @@
       ></video>
     </div>
     <div class="operate-area">
-      <input
-        id="screenshot-input"
-        type="file"
-        style="display:none;"
-        @change="changeFile"
-      >
-      <label id="select-btn">选择文件</label>
+      <div class="play-area">
+        <input
+          id="screenshot-input"
+          type="file"
+          style="display:none;"
+          @change="changeFile"
+        >
+        <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,21 +77,27 @@ export default {
 
 <style lang="scss" scoped>
 .screenshot {
-    width: 100%;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .content {
     height: 100%;
-    margin: 30px;
+    margin: 20px 30px;
+    background-color: lightcyan;
+  }
+  .operate-area {
+    background-color: aqua;
+    height: 200px;
     display: flex;
-    flex-direction: column;
-    .content {
-        height: 90%;
-        margin: 20px 30px;
-        background-color: lightcyan;
-    }
-    .operate-area {
-        #select-btn {
-            width: 200px;
-            height: 100px;
-        }
+    flex-shrink: 0;
+    #select-btn {
+      background-color: bisque;
+      width: 100px;
+      height: 30px;
+      line-height: 30px;
     }
+  }
 }
 </style>