调整页面布局

vue/afvue/src/views/Sfilecompare.vue

@@ -3,6 +3,7 @@
         <!-- 第一个服务器的文件列表 -->
         <div class="sfcon">
             <div class="sfind">
+                <span class="scdesc">源服务器：</span>
                 <!-- 选择服务器 -->
                 <select class="selbox" name="fsip" ref="fsip" @change="changeSer">
                     <option value="0">请选择源服务器</option>
@@ -16,17 +17,19 @@
            
             </div>
             <div class="sflist">
+                <form @submit.prevent="submitForm(index)" method="post">
                 <ul>
                     <li v-for="(item, index) in fsclist" :key="item" :data-index="index">
                         <input type="checkbox" :value="item.path" class="sfchkbox" :name="'fsbox' + index" :ref="'fsbox' + index"/>
                         <a class="haschild" @click="goIntoDir(item.path, 1)" v-if="item.isdir"><i></i>{{ item.path }}</a>
                         <span v-else><i :class="'tb tb-'+item.suffix"></i>{{ item.path }}</span>
-                        <!-- 
-                        <div class="sflfunc">
-                            <a>发送</a>
-                        </div> -->
                     </li>
+                    
                 </ul>
+                <div class="fbdiv" v-if="fsclist.length > 0">
+                    <button class="fbtn" title="sync_btn">同步选中的文件</button>
+                </div>
+                </form>
             </div>
 
             <div class="tips">
@@ -38,6 +41,7 @@
         <!-- 第二个服务器的文件列表 -->
         <div class="sfcon">
             <div class="sfind">
+                <span class="scdesc">目标服务器：</span>
                 <!-- 选择服务器 -->
                 <select class="selbox" name="ssip" ref="ssip">
                     <option value="0">请选择目标服务器</option>
@@ -61,7 +65,7 @@
             </div>
 
             <div class="tips">
-                <span v-if="ssclist.length > 0">当前路径：{{ sspath }} ,文件数量：{{ ssclist.length }}</span>
+                <span v-if="ssclist.length > 0">服务器：{{ this.$refs.fsip.value }} 路径：{{ sspath }} ,文件数量：{{ ssclist.length }}</span>
                 <span v-else>当前服务器：{{ ssip }}</span>
             </div>
         </div>
@@ -77,10 +81,12 @@
             </ul>
         </div>
 
-        <!-- 发送文件 -->
+        <!-- 待发送文件 -->
          <div class="fsend">
             <div class="fsendcon">
-                从到
+                <textarea name="needsend">
+                    {{ selectedFiles }}
+                </textarea>
             </div>
 
          </div>
@@ -105,6 +111,7 @@ export default {
             sspath: '/', // 第二个服务器的路径
 
             chkfiles: [], // 选中的文件
+            selectedFiles: [], // 选中的文件
 
             isMenuVisible: false,  // 菜单是否可见
             menuTop: 0,            // 菜单顶部位置
@@ -118,6 +125,8 @@ export default {
             if (this.isMenuVisible) {
                 this.hideMenu()
             }
+
+            
         })
         // 使用中的服务器
         SerlistInUsing().then(res => {
@@ -297,6 +306,11 @@ export default {
             // 这里可以添加具体的业务逻辑
             this.hideMenu(); // 执行完操作后隐藏菜单
         },
+        // 提交表单
+        submitForm(index){
+            let form = document.getElementsByName('fsbox' + index)
+            console.log(form,"form")
+        },
 
         // 更新文件
         uploadFile(e){
@@ -329,6 +343,7 @@ export default {
     float: left;
     width: 100%;
     min-height: 560px;
+
 }
 
 .sfcon:first-child {
@@ -343,6 +358,22 @@ export default {
 .sfcon:nth-child(2) .sflist {
     background-color: #dddcdc5e;
 }
+.sfbcon .sflist{
+    position: relative;
+}
+/* 操作按钮 */
+.sfcon .sflist .fbdiv{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 46px;
+    background-color: #00bd7e;
+    width: 100%;
+}
+
+.sfcon .sflist .fbdiv .fbtn{
+    margin: 12px;
+}
 
 .sfind {
     width: 100%;