界面优化

src/App.vue

@@ -10,14 +10,14 @@
         </div>
         <div style="text-align: left;">
             <!-- 任务信息 -->
-            <div style="display: flex;align-items: center;height: 25px;justify-content: space-between;margin-right: 15px;">
+            <div style="display: flex;align-items: center;height: 25px;justify-content: space-between;margin-right: 5px;">
                 <div style="width: 65%;display: flex;flex-direction: column;text-align: left;">
                     <div style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;">
-                        <span style="width: 95px;padding-left: 5px;">任务名称：</span>
+                        <span style="width: 95px;padding-left: 5px;">任务名称:</span>
                         <el-input v-model="taskName" placeholder="请输入内容" style="height: 20px;"></el-input>
                     </div>
                     <div style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;display: none;">
-                        <span style="width: 95px; padding-left: 5px;">任务地址：</span>
+                        <span style="width: 95px; padding-left: 5px;">任务地址:</span>
                         <el-input v-model="taskAddress" placeholder="请输入内容" style="height: 20px;" disabled></el-input>
                     </div>
                 </div>
@@ -33,14 +33,14 @@
                 <div style="height: 25px;display: flex;justify-content: flex-start;align-items: center;margin-left: 15px;">
                     <span>动作集合:</span>
                     <div class="scroll-container" @wheel="handleScroll" style="width: 325px;">
-                        <div class="scroll-content" style="margin-left: 10px;">
+                        <div class="scroll-content" style="margin-left: 16px;">
                             <span id="Breadcrumb" @click="onBreadcrumb(item)" v-for="item in currentActionsParents" :key="item.tagId" :style="{ color: item == currentAction ? '#68C23A!important' : '#409EFF' }">{{
                                 item.Name
                             }}></span>
                         </div>
                     </div>
                 </div>
-                <div style="display:flex;align-items: center;margin-right: 15px;">
+                <div style="display:flex;align-items: center;margin-right: 7px;">
                     <el-button :disabled="state" type="primary" size="mini" style="width: 20px;height: 20px;" @click="newAction">
                         <img style="width: 12px;height: 12px;" src="./assets/add.svg">
                     </el-button>
@@ -539,7 +539,7 @@ export default {
     background-color: #409EFF !important;
     color: #ffffff !important;
     padding: 0 5px !important;
-    margin-left: 12px !important;
+    margin-left: 14px !important;
     margin-top: 6px !important;
     font-size: 10px !important;
     height: 25px !important;

src/components/collectionTable.vue

 <template>
     <div class="collectionTable">
-        <div style="display: flex;height: 40px;padding-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
-            <el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag" @click="selectElement" v-if="isSelectTable">选择元素</el-button>
+        <div style="display: flex;height: 40px;padding-left: 15px;text-align: left;align-items: center;justify-content: space-between;">
+            <template v-if="isSelectTable">
+                <el-tooltip class="item" effect="dark" content="请右击页面元素" placement="top">
+                    <!-- <el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag"
+                        @click="selectElement">选择元素</el-button> -->
+                    <!-- <vxe-button icon="fa fa-plus">新增</vxe-button> -->
+                    <el-button type="primary" size="mini" style="width: 20px;height: 20px;" @click="selectElement">
+                        <img style="width: 12px;height: 12px;" src="../assets/add.svg">
+                    </el-button>
+                </el-tooltip>
+            </template>
             <el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag" @click="columnBack" v-else>返回</el-button>
             <div style="display: flex;align-items: center;">
-                <span style="margin-left: 45px;font-size: 15px;" v-if="isSelectTable">表名:</span>
+                <span style="margin-left: 45px;font-size: 13px;" v-if="isSelectTable">表名:</span>
                 <vxe-input style="margin-left: 10px;" v-if="isSelectTable" v-model="tableName" placeholder="请填写表名" size="mini"></vxe-input>
             </div>
-            <el-button style="padding-right: 15px;" size="small" class="button-new-tag" @click="getTable" v-if="isSelectTable">获取表格信息</el-button>
+            <!-- <el-button style="padding-right: 15px;" size="small" class="button-new-tag" @click="getTable" v-if="isSelectTable">获取表格信息</el-button> -->
+            <el-button size="mini" style="width: 74px;height: 20px;margin-right: 7px;" @click="getTable" v-if="isSelectTable">获取表格信息</el-button>
         </div>
         <!-- 全部表格信息 -->
         <div style="overflow: auto;height: 290px;" :style="{ width: widthResize + 'px' }">
@@ -282,4 +292,8 @@ export default {
 .vxe-input--inner {
     width: 120px !important;
 }
+
+.el-tooltip__popper.is-dark {
+    z-index: 99999 !important;
+}
 </style>
\ No newline at end of file