fix 样式调整

hookehuyr
Commit 23c50786cd1639de90c7af596738ff0abc7c3cbf 23c50786 1 parent 7dccf548
Showing 2 changed files with 71 additions and 41 deletions
doc/App.vue
doc/selectUserView.vue
--- a/doc/App.vue
View file @23c5078
+++ b/doc/App.vue
View file @23c5078
@@ -318,6 +318,26 @@ export default {
     });
     onMounted(() => {
+    // // 显示提示框的标志位
+    // var showConfirmation = true;
+    // // 监听 beforeunload 事件
+    // window.addEventListener('beforeunload', function (event) {
+    //   if (showConfirmation) {
+    //     // 取消事件的默认行为（弹出确认对话框）
+    //     event.preventDefault();
+    //     // Chrome 和 Firefox 需要返回一个值以显示确认对话框
+    //     event.returnValue = '';
+    //     // 显示自定义的提示信息
+    //     var confirmationMessage = '确定要离开此页面吗？';
+    //     (event || window.event).returnValue = confirmationMessage;  // 兼容旧版浏览器
+    //     return confirmationMessage;
+    //   }
+    // });
+    // // 监听 unload 事件
+    // window.addEventListener('unload', function () {
+    //   // 设置标志位为 false，避免在刷新页面时再次显示提示框
+    //   showConfirmation = false;
+    // });
     });
     function handleActiveChange(name) {
--- a/doc/selectUserView.vue
View file @23c5078
+++ b/doc/selectUserView.vue
View file @23c5078
 <!--
  * @Date: 2023-11-01 10:18:53
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-11-01 11:33:00
+ * @LastEditTime: 2023-11-01 14:07:53
  * @FilePath: /vue-flow-editor/doc/selectUserView.vue
  * @Description: 文件描述
 -->
 <template>
-  <el-dialog v-model="dialogUserFormVisible" title="成员列表">
+  <el-dialog
-    <div style="border: 1px dashed #DCDFE6; padding: 10px;">
+    v-model="dialogUserFormVisible"
+    title="成员列表"
+    @close="closeUserForm"
+  >
+    <div class="flow-tag__wrapper">
       <el-tag
         v-if="userTags.length"
         v-for="tag in userTags"
         :key="tag.name"
-        class=""
         style="margin-left: 0.25rem; margin-right: 0.25rem;"
         closable
         @close="handleTagClose(tag)"
       >
         {{ tag.name }}
       </el-tag>
-      <div v-else style="text-align: center; color: #DCDFE6;">请选择成员</div>
+      <div v-else class="text-empty">请选择成员</div>
     </div>
-    <div style="border: 1px solid #DCDFE6; padding: 10px; margin-top: 10px;">
+    <div class="flow-tabs__wrapper">
       <div style="height: 40px">
-        <div style="padding: 0; position: relative; margin: 0 0 15px;">
+        <div class="search_box">
           <div v-if="!is_active_search">
             <div class="flow-tabs__nav-wrap">
               <div class="flow-tabs__nav-scroll">
@@ -88,12 +91,11 @@
                   :default-expanded-keys="currentNodeKey"
                   empty-text="暂无数据"
                   @node-click="handleNodeClick"
+                  style="margin-top: 10px;"
                 />
               </el-col>
               <el-col :span="16">
-                <div
+                <div class="flow-checkbox-box">
-                  style="border-left: 2px solid #e4e7ed; width: 2px; height: 100%; padding-left: 10px;"
-                >
                   <el-checkbox-group
                     class="flow-checkbox-group"
                     v-model="checkedUserList"
@@ -204,26 +206,6 @@ const defaultProps = ref({
 onMounted(() => {
   // console.log(props.visible);
-  // // 显示提示框的标志位
-  // var showConfirmation = true;
-  // // 监听 beforeunload 事件
-  // window.addEventListener('beforeunload', function (event) {
-  //   if (showConfirmation) {
-  //     // 取消事件的默认行为（弹出确认对话框）
-  //     event.preventDefault();
-  //     // Chrome 和 Firefox 需要返回一个值以显示确认对话框
-  //     event.returnValue = '';
-  //     // 显示自定义的提示信息
-  //     var confirmationMessage = '确定要离开此页面吗？';
-  //     (event || window.event).returnValue = confirmationMessage;  // 兼容旧版浏览器
-  //     return confirmationMessage;
-  //   }
-  // });
-  // // 监听 unload 事件
-  // window.addEventListener('unload', function () {
-  //   // 设置标志位为 false，避免在刷新页面时再次显示提示框
-  //   showConfirmation = false;
-  // });
   // axios.get('/srv/?a=query_form_all_field')
   // .then(res => {
   //   console.warn(res.data);
@@ -657,12 +639,32 @@ watch(
 </script>
 <style lang="scss">
-.flow-tabs__nav-wrap {
+.flow-tag__wrapper {
+  border: 1px dashed #dcdfe6;
+  padding: 10px;
+  .text-empty {
+    text-align: center;
+    color: #dcdfe6;
+  }
+}
+
+.flow-tabs__wrapper {
+  border: 1px solid #dcdfe6;
+  padding: 10px;
+  margin-top: 10px;
+
+  .search_box {
+    padding: 0;
+    position: relative;
+    margin: 0 0 15px;
+  }
+
+  .flow-tabs__nav-wrap {
     overflow: hidden;
     margin-bottom: -1px;
     position: relative;
-}
+  }
-.flow-tabs__nav-wrap::after {
+  .flow-tabs__nav-wrap::after {
     content: "";
     position: absolute;
     left: 0;
@@ -671,14 +673,14 @@ watch(
     height: 2px;
     background-color: #e4e7ed;
     /* z-index: 1; */
-}
+  }
-.flow-tabs__nav-scroll {
+  .flow-tabs__nav-scroll {
     /* overflow: hidden; */
     overflow: scroll;
-}
+  }
-.flow-tabs__active-bar {
+  .flow-tabs__active-bar {
     position: absolute;
     bottom: 0;
     left: 0;
@@ -688,9 +690,9 @@ watch(
     transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
       transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     list-style: none;
-}
+  }
-.flow-tabs__nav {
+  .flow-tabs__nav {
     display: flex;
     white-space: nowrap;
     position: relative;
@@ -719,9 +721,9 @@ watch(
         padding-left: 0;
       }
     }
-}
+  }
-.flow-tab-search {
+  .flow-tab-search {
     position: absolute;
     top: 0;
     right: 0;
@@ -735,6 +737,14 @@ watch(
     &:hover {
       cursor: pointer;
     }
+  }
+}
+
+.flow-checkbox-box {
+  border-left: 2px solid #e4e7ed;
+  width: 2px;
+  height: 100%;
+  padding-left: 10px;
 }
 .flow-checkbox-group {