Insert code from my repo

src/App.vue

@@ -3,14 +3,17 @@
   import Main from './components/Main.vue'
   import Setting from './components/Setting.vue'
   import Uploaded from './components/Uploaded.vue'
-
+  import Submit from "./components/Submit.vue"
 </script>
 <template>
-  <Header></Header>
-  <Main></Main>
-  <Setting></Setting>
-  <Uploaded></Uploaded>
-  <footer></footer>
+  <div class="App">
+    <Header></Header>
+    <Main></Main>
+    <Setting></Setting>
+    <Uploaded></Uploaded>
+    <Submit></Submit>
+    <footer></footer>
+  </div>
 </template>InputSetting
 
 <style scoped>
@@ -18,4 +21,9 @@
     position: relative;
     height: 80px;
   }
+  .App{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 </style>
\ No newline at end of file

src/components/Main.vue

@@ -3,39 +3,53 @@
 </script>
 <template>
     <div class="main-wrapper">
-        <div class="text-wrapper">
-            <div class="button-bar">
-                <n-button strong secondary type="tertiary">
-                    &nbsp;Edit text&nbsp;
-                </n-button>
-                <n-button strong secondary type="tertiary">
-                    Upload File
-                </n-button>
-            </div>
-            <div class="text-area">
-                <slot name='text'>
-                    <!-- 插槽，留给代码输入&高亮 -->
-                </slot>
-            </div>
+        <div class="button-bar">
+            <n-button strong secondary type="tertiary">
+                &nbsp;Edit text&nbsp;
+            </n-button>
+            <n-button strong secondary type="tertiary">
+                Upload File
+            </n-button>
+        </div>
+        <div class="text-area">
+            <textarea id="paste-panel" placeholder="Put your paste here" name="input" cols="100" rows="10"></textarea>     
         </div>
     </div>
 </template>
 <style scoped>
     .main-wrapper{
         /* background-color: green; */
-        position: relative;
-        height: 600px;
-    }
-    .main-wrapper .text-wrapper{
-        /* background-color: hotpink; */
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
         width: 70%;
-        height: 600px;
-        position: absolute;
-        left: 50%;
-        margin:  0 -35%;
+        margin:10px;
+        box-sizing: border-box;
+        border:1px solid black;
     }
-    .text-wrapper .text-area{
-        height: 565px;
+    .button-bar{
+        display: flex;
+        flex-direction: row;
+        
+        width: 100%;
+        
+        border:1px solid black;
+    }
+    .text-area{
+        width: 100%;
+        display: flex;
+
+        padding:1px;
         border: 1px rgb(221, 221, 221) solid;
     }
+    textarea{
+        resize: vertical;
+
+        width: 100%;
+
+        border:transparent;
+        outline:none;
+    }
 </style>
\ No newline at end of file

src/components/Setting.vue

@@ -2,30 +2,86 @@
     
 </script>
 <template>
-    <div class="Setting-wrapper">
-        <div class="Setting-center-wrapper">
-            <slot>
-                <!-- 插槽，留给设置选项 -->
-            </slot>
-            setting
+    <div id="setting-panel">
+        <p>Settings</p>
+        <!-- expiration-time-input -->
+        <div class="expiration-time">
+            <label for="expiration-time-input">Expiration time</label>
+            <input id="expiration-time-input" type="number" list="time-choice" min="60" step="1" placeholder="Expiration (secs)" name="expiration-time">
+            <datalist id="time-choice">
+                <option value="60">1min</option>
+                <option value="300">5min</option>
+                <option value="3600">1hour</option>
+                <option value="86400">1day</option>
+                <option value="604800">1week</option>
+                <option value="2592000">1month</option>
+            </datalist>
+        </div>
+        <!-- password-input -->
+        <div class="password">
+            <label for="password-input">Password</label>
+            <input id="password-input" placeholder="Password" type="text" name="password">
+        </div>
+        <!-- max-visited-number-input -->
+        <div class="max-visited-numer">
+            <label for="password-input">Max visited time</label>
+            <input id="max-number-input" type="number" min="1" step="1" placeholder="Max visited number" name="max-number">
+        </div>
+        <!-- language-select -->
+        <div class="language">
+            <label for="language-select">Language</label>
+            <select name="languages" id="language-select">
+                <option value="c" selected>C</option>
+                <option value="cpp">C++</option>
+                <option value="csharp">C#</option>
+                <option value="java">Java</option>
+                <option value="python">Python</option>
+                <option value="js">JS</option>
+                <option value="go">Golang</option>
+            </select>
         </div>
     </div>
 </template>
 <style scoped>
-    .Setting-wrapper{
-        /* background-color: blue; */
-        position: relative;
-        height: 365px;
-    }
-    .Setting-wrapper .Setting-center-wrapper{
-        /* background-color: hotpink; */
-        width: 70%;
-        height: 350px;
-        position: absolute;
-        left: 50%;
-        margin:  15px -35%;
-        border: 1px rgb(221, 221, 221) solid;
-    }
+#setting-panel{
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+
+    width: 70%;
+    margin:20px;
+
+    box-sizing: border-box;
+    border: 1px solid black;
+}
+#setting-panel>p{
+    padding: 5px;
+    font-size: 40px;
+    margin:10px;
+    padding-bottom:10px;
+    border-bottom: 2px solid black;
+}
+#setting-panel>div{
+    display: flex;
+    flex-direction:column-reverse;
+
+    margin:10px;
+    overflow: hidden;
+}
+#setting-panel>div>label{
+    margin-top:10px;
+    margin-left: 2px;
+
+    height:15px;
 
+    font-size: 10px;
+    font-weight: 100;
+    font-family:Arial, Helvetica, sans-serif;
+    text-align: left;
+}
+#setting-panel>div>input,select{
+    width: 300px;
+    height: 30px;
+}
 </style>
 

src/components/Submit.vue

+<script setup>
+  import { NDivider } from 'naive-ui'
+</script>
+
+<template>
+    <button id="submit-button" class="button">Submit</button>
+</template>
+
+<style scoped>
+.button{
+    width: 60px;
+    height: 30px;
+
+    font-size:10px;
+    font-weight: 600;
+    font-family: Arial, Helvetica, sans-serif;
+
+    box-sizing: border-box;
+    border: 2px solid balck;
+    margin: 0;
+
+    background-color: rgb(14, 201, 129);   
+}
+.button:hover{
+    cursor: pointer;
+    background-color: rgb(43, 234, 160);
+}
+.button:active{
+    background-color: rgb(14, 144, 94);
+}
+.button:disabled{
+    background-color: rgb(14, 144, 94);
+    cursor: not-allowed;
+}   
+</style>
\ No newline at end of file

src/components/Uploaded.vue

@@ -2,30 +2,148 @@
     
 </script>
 <template>
-    <div class="Uploaded-wrapper">
-        <div class="Uploaded-center-wrapper">
-            <slot>
-                <!-- 插槽，留给设置选项 -->
-            </slot>
-            uploaded(hide initially)
+    <div id="uploaded-panel" class="visible">
+        <p>Uploaded</p>
+        <div class="copy-text">
+            <div class="text-group">
+                <input id='uploaded-url' type='text' class='readonly-text' readonly>
+            </div>
+            <div class="button-group">
+                <button id="copy-button" class='button'>Copy</button>
+            </div>
         </div>
+        <label>Url</label>
+        <input id='expr-time' type='text' class='readonly-text' readonly>
+        <label>Expiration time(secs)</label>
     </div>
 </template>
 <style scoped>
-    .Uploaded-wrapper{
-        /* background-color: blue; */
-        position: relative;
-        height: 315px;
-    }
-    .Uploaded-wrapper .Uploaded-center-wrapper{
-        /* background-color: hotpink; */
-        width: 70%;
-        height: 300px;
-        position: absolute;
-        left: 50%;
-        margin:  15px -35%;
-        border: 1px rgb(221, 221, 221) solid;
-    }
+p{
+    padding: 5px;
+    font-size: 40px;
+    margin:10px 0 10px 0;
+    padding-bottom:10px;
+    border-bottom: 2px solid black;
+}
+#uploaded-panel.invisible{
+    display: none;
+}
+#uploaded-panel.visible{
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+
+    width: 70%;
+    margin:10px;
+    padding:10px;
+    padding-bottom: 10px;
+    padding-top: 10px;
+
+    box-sizing: border-box;
+    border: 1px solid black;   
+}
+#uploaded-panel label{
+    height: 15px;
+    margin: 10px 0 10px 0;
+    
+    font-size: 10px;
+    font-weight: 100;
+    font-family:Arial, Helvetica, sans-serif;
+    text-align: left;
+}
+#uploaded-panel input{
+    height:30px;
+    
+    box-sizing: border-box;
+    outline-style: none;
+}
+
+.copy-text{
+    display: flex;
+    flex-direction: row;
+    align-items: left;
+    justify-content: center;
+
+    margin:0;
+
+    box-sizing: border-box;
+}
+.copy-text .text-group{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    width: calc(100% - 60px);
+    margin: 0;
+}
+.copy-text .button-group{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    margin: 0;
+}
+.copy-text input{
+    height: 30px;
+    box-sizing: border-box;
+}
+.copy-text button{
+    height: 30px;
+    width: 60px;
+}
+
+.button{
+    width: 60px;
+    height: 30px;
+
+    font-size:10px;
+    font-weight: 600;
+    font-family: Arial, Helvetica, sans-serif;
+
+    box-sizing: border-box;
+    border: 2px solid balck;
+    margin: 0;
+
+    background-color: rgb(14, 201, 129);   
+}
+.button:hover{
+    cursor: pointer;
+    background-color: rgb(43, 234, 160);
+}
+.button:active{
+    background-color: rgb(14, 144, 94);
+}
+.button:disabled{
+    background-color: rgb(14, 144, 94);
+    cursor: not-allowed;
+}
+.readonly-text{
+    background-color: rgb(235, 231, 231);
+
+    border: 1px solid black;
+    cursor:default;
+}
+
+.labelbutton{
+    height: 30px;
+    width: 100px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    font-size:15px;
+    font-family: sans-serif;
+    font-weight: 400;
+    text-align: center;
+    
+    box-sizing: border-box;
+    background-color: white;
+}
+.labelbutton.hoverenable:hover,
+.labelbutton.hoverenable>label:hover{
+    cursor: pointer;
+}
 
 </style>