fix 样式调整

hookehuyr
Commit 23c50786cd1639de90c7af596738ff0abc7c3cbf 23c50786 1 parent 7dccf548
Showing 2 changed files with 126 additions and 96 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,84 +639,112 @@ watch(
 </script>
 <style lang="scss">
-.flow-tabs__nav-wrap {
+.flow-tag__wrapper {
-  overflow: hidden;
+  border: 1px dashed #dcdfe6;
-  margin-bottom: -1px;
+  padding: 10px;
-  position: relative;
+  .text-empty {
-}
+    text-align: center;
-.flow-tabs__nav-wrap::after {
+    color: #dcdfe6;
-  content: "";
+  }
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 2px;
-  background-color: #e4e7ed;
-  /* z-index: 1; */
 }
-.flow-tabs__nav-scroll {
+.flow-tabs__wrapper {
-  /* overflow: hidden; */
+  border: 1px solid #dcdfe6;
-  overflow: scroll;
+  padding: 10px;
-}
+  margin-top: 10px;
-.flow-tabs__active-bar {
+  .search_box {
-  position: absolute;
+    padding: 0;
-  bottom: 0;
+    position: relative;
-  left: 0;
+    margin: 0 0 15px;
-  height: 2px;
+  }
-  background-color: #409eff;
-  z-index: 1;
-  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-wrap {
-  display: flex;
+    overflow: hidden;
-  white-space: nowrap;
+    margin-bottom: -1px;
-  position: relative;
+    position: relative;
-  transition: transformX(0px);
+  }
-  float: left;
+  .flow-tabs__nav-wrap::after {
-  .flow-tabs__item {
+    content: "";
-    padding: 0 20px;
+    position: absolute;
-    height: 40px;
+    left: 0;
-    box-sizing: border-box;
+    bottom: 0;
-    display: flex;
+    width: 100%;
-    align-items: center;
+    height: 2px;
-    justify-content: center;
+    background-color: #e4e7ed;
+    /* z-index: 1; */
+  }
+
+  .flow-tabs__nav-scroll {
+    /* overflow: hidden; */
+    overflow: scroll;
+  }
+
+  .flow-tabs__active-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    background-color: #409eff;
+    z-index: 1;
+    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;
-    font-size: 14px;
+  }
-    font-weight: 500;
+
-    color: #303133;
+  .flow-tabs__nav {
+    display: flex;
+    white-space: nowrap;
     position: relative;
+    transition: transformX(0px);
+    float: left;
+    .flow-tabs__item {
+      padding: 0 20px;
+      height: 40px;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      list-style: none;
+      font-size: 14px;
+      font-weight: 500;
+      color: #303133;
+      position: relative;
+      &:hover {
+        color: #409eff;
+        cursor: pointer;
+      }
+      &.is-active {
+        color: #409eff;
+      }
+      &.is-top:nth-child(2) {
+        padding-left: 0;
+      }
+    }
+  }
+
+  .flow-tab-search {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100px;
+    display: flex;
+    align-items: center;
+    background-color: #e4e7ed;
+    padding: 5px 5px 5px 15px;
+    border-radius: 15px;
+    color: #b1b3b8;
     &:hover {
-      color: #409eff;
       cursor: pointer;
     }
-    &.is-active {
-      color: #409eff;
-    }
-    &.is-top:nth-child(2) {
-      padding-left: 0;
-    }
   }
 }
-.flow-tab-search {
+.flow-checkbox-box {
-  position: absolute;
+  border-left: 2px solid #e4e7ed;
-  top: 0;
+  width: 2px;
-  right: 0;
+  height: 100%;
-  width: 100px;
+  padding-left: 10px;
-  display: flex;
-  align-items: center;
-  background-color: #e4e7ed;
-  padding: 5px 5px 5px 15px;
-  border-radius: 15px;
-  color: #b1b3b8;
-  &:hover {
-    cursor: pointer;
-  }
 }
 .flow-checkbox-group {