样式调整

src/views/page-config/ConfigEidt.vue

@@ -1,6 +1,7 @@
 <template>
   <div style="position: relative">
-    <el-card :bordered="false" class="proCard" style="position: relative">
+    <div class="top-content">
+      <!-- <el-card :bordered="false" class="proCard" style="position: relative; padding: 0px"> -->
       <div style="display: flex; position: relative">
         <img src="~@/assets/icons/back.png" alt="" @click="backPage" class="back-btn" />
         <el-select
@@ -17,7 +18,7 @@
           />
         </el-select>
         <div v-if="companySelet" style="display: flex; margin-top: 8px">
-          <div style="font-size: 20px; margin-left: 29px; margin-right: 4px">选择标签</div>
+          <div class="label-workshop">选择标签:</div>
           <div>
             <el-radio-group v-model="label" size="10px" :border="true" style="display: flex">
               <el-radio-button
@@ -50,62 +51,84 @@
         <el-button type="info" plain class="btn-top-save" @click="saveConfig">保存为主页</el-button>
         <!-- <div>按钮</div> -->
       </div>
-    </el-card>
+    </div>
     <div style="display: flex">
       <div class="workshop-content">
         <div class="workshop-title">车间列表</div>
         <el-input
           v-model="searchWorkshop"
           class="w-50 m-2"
-          placeholder="搜索功能"
-          :prefix-icon="Search"
+          placeholder="请输入搜索内容"
+          :suffix-icon="Search"
           style="width: 255px; margin-top: 11px"
         />
-        <ul
+        <ul v-if="workshopList"
           ><li
             v-for="item in workshopList"
             :key="item.id"
             class="workshop-list"
             :class="{ 'active-workshop': activeId === item.id }"
             @click="configWorkshop(item)"
-            >{{ item.value }}</li
+            ><el-icon><House /></el-icon
+            ><div style="margin-left: 5px; margin-top: -4px">{{ item.value }}</div></li
           ></ul
         >
+        <div v-else class="workshop-tip">提示：请先选择相应公司和照片</div>
       </div>
       <div>
         <div class="upload" :class="{ 'avatar-show': imageUrl }">
           <el-upload
             class="avatar-uploader"
-            list-type="picture-card"
             :auto-upload="false"
             :on-change="onSelectfile"
             :before-upload="beforeAvatarUpload"
           >
-            <div>
-              <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
-              <div class="uploader-text">上传照片</div>
-            </div>
-            <!-- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> -->
+            <template #trigger>
+              <img src="~@/assets/icons/upload.png" alt="" class="upload-pic" />
+            </template>
           </el-upload>
-          <div class="upload-tip">只支持.jpg格式</div></div
-        >
+          <!-- <div class="upload-tip">只支持.jpg格式</div> -->
+        </div>
 
         <img v-if="imageUrl" :src="imageUrl" class="preview-image" />
         <!-- <div>222</div> -->
       </div></div
     >
-    <ConfigDrawer
+    <el-tooltip
+      class="box-item position-tooltip"
+      effect="dark"
+      content="显示侧边栏"
+      offset="12"
+      placement="left"
+      @click="showEditConfig"
+    >
+      <div
+        v-if="leftShow"
+        class="circle-rectangle"
+        :class="{ 'shape-shadow': shadow }"
+        @mouseover="shadowAdd"
+        @mouseout="shadowRemove"
+        @click="dialogReopen"
+      >
+        <el-icon class="left-icon" size="16px"><ArrowLeftBold /></el-icon>
+        <el-icon style="margin-top: 7px" size="16px"><ArrowLeftBold /></el-icon>
+        <!-- <el-icon class="left-icon"><DArrowLeft /></el-icon> -->
+      </div>
+      <!-- <img src="~@/assets/icons/slide.png" alt="" class="dialog-btn" /> -->
+    </el-tooltip>
+
+    <ConfigDialog
       ref="configDrawer"
       :title="configTitle"
-      @on-close="visibleDrawer = false"
+      @on-close="onClose"
       class="drawer-position"
     />
   </div>
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue';
-  import { Refresh, Search, Delete, Plus } from '@element-plus/icons-vue';
-  import ConfigDrawer from './component/ConfigDrawer.vue';
+  import { Refresh, Search, ArrowLeftBold, House } from '@element-plus/icons-vue';
+  import ConfigDialog from './component/ConfigDrawer.vue';
   //   import { picList } from '../constant';
   import { labelList, companyList, workshopList } from './constant';
   import { ElMessage, genFileId } from 'element-plus';
@@ -177,12 +200,35 @@
     activeId.value = item.id;
   };
 
+  const showEditConfig = () => {};
   // const label = ref('');
+
+  const shadow = ref(false);
+  const shadowAdd = () => {
+    shadow.value = true;
+  };
+  const shadowRemove = () => {
+    shadow.value = false;
+  };
+
+  const dialogReopen = () => {
+    configDrawer.value.openDialog();
+  };
+
+  const leftShow = ref(false);
+  const onClose = (val) => {
+    leftShow.value = val;
+  };
 </script>
 
 <style lang="scss" scoped>
-  body .proCard .el-card__body {
+  // .proCard {
+  //   padding: 0px;
+  // }
+  .top-content {
     padding: 0px;
+    background-color: white;
+    position: relative;
   }
 
   .back-btn {
@@ -194,7 +240,7 @@
 
   .btn-top-refresh {
     position: absolute;
-    // margin-top: 19px;
+    margin-top: 14px;
     right: 137px;
     // left: 1437px;
   }
@@ -202,36 +248,70 @@
   .btn-top-save {
     position: absolute;
     // margin-top: 8px;
+    margin-top: 6px;
     right: 15px;
   }
 
+  .label-workshop {
+    font-size: 14px;
+    font-weight: 400;
+    margin-left: 36px;
+    margin-top: 6px;
+    margin-right: 16px;
+  }
+
   .workshop-content {
-    margin-top: 34px;
-    margin-left: 10px;
+    margin-top: 10px;
+    background-color: white;
+    // padding-left: 15px;
+    // margin-left: 10px;
     margin-right: 10px;
     width: 271px;
-    height: 780px;
+    height: 800px;
     border: 1px solid #b3b3b3;
   }
 
   .workshop-title {
-    font-size: 20px;
-    margin-top: 15px;
-    margin-left: 13px;
-    font-weight: 900;
-    color: #3d3d3d;
-    opacity: 0.4;
+    font-size: 14px;
+    margin-top: 25px;
+    margin-left: 15px;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.85);
   }
 
+  // .label-select {
+  // }
+  // .el-radio-button__inner
+  ::v-deep.el-radio-button {
+    margin-right: 8px;
+    box-shadow: none;
+    border-radius: 4px !important;
+    border: 1px solid #d9d9d9 !important;
+  }
   .workshop-list {
-    font-size: 20px;
+    font-size: 14px;
     width: 211px;
-    margin-top: 15px;
-    margin-left: 13px;
-    font-weight: 350;
-    color: #3d3d3d;
-    opacity: 0.4;
+    margin-top: 10px;
+    margin-left: 15px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.85);
     cursor: pointer;
+    display: flex;
+  }
+
+  .workshop-tip {
+    margin-left: 15px;
+    margin-top: 12px;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.65);
+  }
+
+  .upload-pic {
+    z-index: 99;
+    width: 593px;
+    height: 435px;
+    // margin-left: ;
   }
   .active-workshop {
     background: rgba(24, 144, 255, 0.502);
@@ -240,8 +320,8 @@
   .avatar-uploader .el-upload {
     border: 1px dashed var(--el-border-color);
     border-radius: 6px;
-    width: 260px;
-    height: 280px;
+    width: 593px;
+    height: 435px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
@@ -253,29 +333,29 @@
     border-color: var(--el-color-primary);
   }
 
-  .el-icon.avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 178px;
-    height: 178px;
-    text-align: center;
-    margin-top: -60px;
-  }
+  // .el-icon.avatar-uploader-icon {
+  //   font-size: 28px;
+  //   color: #8c939d;
+  //   width: 178px;
+  //   height: 178px;
+  //   text-align: center;
+  //   margin-top: -60px;
+  // }
 
   .upload {
     position: absolute;
-    left: 635px;
-    top: 201px;
+    left: 428px;
+    top: 174px;
   }
 
-  .upload-tip {
-    margin-top: 5px;
-    font-size: 22px;
-    font-weight: 350;
-    color: #3d3d3d;
-    opacity: 0.4;
-    text-align: center;
-  }
+  // .upload-tip {
+  //   margin-top: 5px;
+  //   font-size: 22px;
+  //   font-weight: 350;
+  //   color: #3d3d3d;
+  //   opacity: 0.4;
+  //   text-align: center;
+  // }
 
   .uploader-text {
     margin-top: -60px;
@@ -304,10 +384,41 @@
 
   .drawer-position {
     position: absolute;
-    left: 1150px;
-    top: 80px;
+    right: 0px;
+    // left: 1150px;
+    top: 74px;
     z-index: 99;
     opacity: 1;
     background: #ffffff;
   }
+
+  .dialog-btn {
+    position: absolute;
+    right: 0px;
+    top: 66px;
+  }
+
+  .position-tooltip {
+    margin-right: -10px;
+  }
+
+  .circle-rectangle {
+    width: 40px;
+    height: 30px;
+    border-radius: 50% 0% 0% 50%;
+    position: absolute;
+    right: 0px;
+    top: 66px;
+    background-color: white;
+    display: flex;
+  }
+
+  .shape-shadow {
+    filter: drop-shadow(5px 5px 10px rgb(102, 100, 100));
+  }
+  .left-icon {
+    margin-top: 7px;
+    margin-left: 8px;
+    margin-right: -7px;
+  }
 </style>

src/views/page-config/component/ConfigDrawer.vue

@@ -1,32 +1,64 @@
 <template>
-  <el-dialog v-model="dialogTableVisible" :title="props.title" class="drawer-box">
-    <!-- <div class="header">
+  <div
+    ><el-dialog
+      v-model="dialogTableVisible"
+      :modal="false"
+      :show-close="false"
+      draggable
+      :append-to-body="false"
+      :destroy-on-close="true"
+    >
+      <template #header>
+        <div style="position: relative">
+          <div class="dialog-header">{{ props.title }}</div>
+          <img
+            src="~@/assets/icons/slide-right.png"
+            alt=""
+            class="dialog-return"
+            @click="closeDialog"
+          />
+        </div>
+      </template>
+      <!-- <div class="header">
       <div class="header-title">{{ props.title }}</div>
       <el-icon class="header-icon" size="20px" @click="closeDrawer"><Close /></el-icon>
     </div> -->
-    <div class="config-content">
-      <div>
-        <el-upload
-          class="pic-uploader"
-          list-type="picture-card"
-          :auto-upload="false"
-          :show-file-list="false"
-          :on-change="onSelectfile"
-          :before-upload="beforeAvatarUpload"
-        >
-          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
-          <!-- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> -->
-          <div v-else>
-            <el-icon class="avatar-upload-icon"><Plus /></el-icon>
-            <div class="uploader-config-text">上传照片</div>
-          </div>
-        </el-upload>
-        <div class="upload-config-tip">只支持.jpg格式</div>
-        <div class="upload-notice">上传缩略图</div>
-        <div class="upload-tips">备注：车间内部情况的视频流截图</div>
-      </div>
-    </div>
-  </el-dialog>
+      <div class="config-content">
+        <div>
+          <div class="uploader-title">缩略图</div>
+          <el-upload
+            class="pic-uploader"
+            list-type="picture-card"
+            :auto-upload="false"
+            :show-file-list="false"
+            :on-change="onSelectfile"
+            :before-upload="beforeAvatarUpload"
+          >
+            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+            <!-- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> -->
+            <div v-else>
+              <el-icon class="avatar-upload-icon" size="24px"><Plus /></el-icon>
+              <div class="uploader-config-text">上传照片</div>
+            </div>
+          </el-upload>
+          <div class="upload-config-tip">只支持.jpg格式</div>
+          <div style="display: flex"
+            ><img src="~@/assets/icons/warn.png" style="width: 14px; height: 14px" alt="" />
+            <div class="upload-notice">上传车间内部情况的视频流截图</div></div
+          >
+
+          <!-- <div class="upload-tips">备注：车间内部情况的视频流截图</div> -->
+        </div>
+        <hr />
+        <div>
+          <div class="content-title"
+            ><div class="uploader-title">填充</div>
+            <el-icon class="refresh-right"><RefreshRight /></el-icon
+          ></div>
+          <el-color-picker v-model="color" />
+        </div>
+      </div> </el-dialog
+  ></div>
 
   <!-- <div v-show="props.visible" class="drawer-box">
     <div class="header">
@@ -58,7 +90,7 @@
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue';
-  import { Close, Plus } from '@element-plus/icons-vue';
+  import { Close, Plus, RefreshRight } from '@element-plus/icons-vue';
   import { ElMessage } from 'element-plus';
 
   const props = defineProps<{
@@ -67,14 +99,17 @@
     // workshopTemplateList: WorkshopModuleType[];
   }>();
 
-  const emit = defineEmits<{
-    // (e: 'update:modelValue'): unknown;
-    (e: 'onClose'): unknown;
-  }>();
+  const emit = defineEmits(['onClose']);
 
-  const closeDrawer = () => {
-    emit('onClose');
-  };
+  // const emit = defineEmits<{
+  //   // (e: 'update:modelValue'): unknown;
+  //   (e: 'onClose'): unknown;
+  // }>();
+
+  // const closeDrawer = () => {
+  //   emit('onClose');
+  // };
+  const color = ref('');
   const dialogTableVisible = ref(false);
   const imageUrl = ref('');
 
@@ -99,40 +134,78 @@
     dialogTableVisible.value = !dialogTableVisible.value;
   };
 
+  const closeDialog = () => {
+    dialogTableVisible.value = false;
+    emit('onClose', true);
+  };
+
   defineExpose({ openDialog });
 </script>
 
 <style lang="scss" scoped>
-  .drawer-box {
-    width: 251px;
-    height: 711px;
+  :deep(.el-dialog) {
+    width: 271px !important;
+    height: 800px !important;
+    position: absolute;
+    right: 0px;
+    top: -10px;
+    // height: 660px !important;
   }
 
-  .header {
-    position: relative;
-    // display: flex;
-    // font-size: 20px;
+  .dialog-header {
+    font-size: 16px;
   }
-  .header-title {
-    font-size: 20px;
-    margin-left: 26px;
-    margin-top: 19px;
+  .dialog-return {
+    position: absolute;
+    right: -10px;
+    top: 0px;
+    cursor: pointer;
   }
 
-  .header-icon {
-    position: absolute;
-    top: 5px;
-    right: 10px;
+  // :deep(.el-dialog__headerbtn) {
+  //   background: url('~@/assets/icons/slide-right.png') !important;
+  //   // z-index: 99999999999;
+  //   width: 20px;
+  //   height: 20px;
+  //   background-size: cover;
+  // }
+  // ::v-deep.el-dialog__headerbtn {
+  //   background: url('~@/assets/icons/slide-right.png');
+  //   background-size: cover;
+  //   // position: absolute;
+  //   // right: 0px;
+  //   // top: -10px;
+  //   // i {
+  //   //   display: none;
+  //   // }
+  //   // height: 660px !important;
+  // }
+
+  :deep(.el-dialog__headerbtn .el-dialog__close) {
+    display: none;
   }
+  // ::v-deep.el-dialog__headerbtn .el-dialog__close {
+  //   display: none;
+  // }
 
+  .drawer-box {
+    width: 251px;
+    height: 711px;
+  }
+
+  :deep(.el-upload--picture-card) {
+    margin-left: 50px;
+    width: 104px;
+    height: 104px;
+  }
   .pic-uploader .el-upload {
     border: 1px dashed var(--el-border-color);
     border-radius: 6px;
-    width: 112px;
-    height: 120px;
+    width: 104px;
+    height: 104px;
     cursor: pointer;
-    margin-top: 24px;
-    margin-left: 70px;
+    // margin-top: 24px;
+    margin-left: 0px;
     position: relative;
     overflow: hidden;
     transition: var(--el-transition-duration-fast);
@@ -142,39 +215,64 @@
   //   .avatar-uploader .el-upload:hover {
   //     border-color: var(--el-color-primary);
   //   }
+  .uploader-title {
+    font-size: 12px;
+    margin-bottom: 8px;
+  }
 
   .el-icon.avatar-upload-icon {
     font-size: 18px;
-    color: #8c939d;
-    width: 178px;
-    height: 178px;
+    color: black;
+    width: 104px;
+    height: 104px;
     text-align: center;
     margin-top: -60px;
+    margin-bottom: 10px;
   }
 
   .uploader-config-text {
-    margin-top: -60px;
-    margin-left: 50px;
-    font-size: 18px;
-    font-weight: 350;
-    color: #3d3d3d;
-    opacity: 0.4;
+    margin-top: -45px;
+    margin-left: 26px;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.88);
+    // font-weight: 350;
+    // color: #3d3d3d;
+    // opacity: 0.4;
   }
   .upload-config-tip {
     text-align: center;
-    font-size: 18px;
-    font-weight: 350;
-    color: #3d3d3d;
-    opacity: 0.4;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.45);
+    // line-height: 22px;
+    margin-left: -20px;
+    margin-top: 8px;
+    margin-bottom: 8px;
   }
 
   .upload-notice {
-    font-size: 20px;
-    text-align: center;
-    margin-top: 10px;
+    font-size: 12px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.45);
+    margin-left: 4px;
+    margin-bottom: 16px;
+    // text-align: center;
+    // margin-top: 10px;
   }
-  .upload-tips {
-    font-size: 16px;
-    text-align: center;
+  // .upload-tips {
+  //   font-size: 16px;
+  //   text-align: center;
+  // }
+
+  .content-title {
+    display: flex;
+    margin-top: 16px;
+    margin-bottom: 8px;
+  }
+
+  .refresh-right {
+    margin-left: 4px;
+    margin-top: 2px;
   }
 </style>

src/views/page-config/component/ConfigEidt.vue

@@ -96,7 +96,12 @@
         <!-- <div>222</div> -->
       </div></div
     >
-    <ConfigDrawer :visible="visibleDrawer" :title="configTitle" class="drawer-position" />
+    <ConfigDrawer
+      :visible="visibleDrawer"
+      :title="configTitle"
+      :onClose="onClose"
+      class="drawer-position"
+    />
   </div>
 </template>
 <script lang="ts" setup>
@@ -166,7 +171,10 @@
     configTitle.value = item.value;
     activeId.value = item.id;
   };
-
+  const leftShow = ref(false);
+  const onClose = (value) => {
+    leftShow.value = value;
+  };
   // const label = ref('');
 </script>
 
@@ -283,7 +291,8 @@
 
   .drawer-position {
     position: absolute;
-    left: 1603px;
-    top: 178px;
+    // left: 1603px;
+    right: 0px;
+    top: 0px;
   }
 </style>

src/views/system/user/component/AddUser.vue

@@ -21,8 +21,6 @@
           :on-exceed="handleExceed"
           :before-upload="beforeUpload"
           :on-success="handleUploadSuccess"
-          :on-exceed="handleExceed"
-          :limit="1"
           style="width: 384px; height: 192px; border-radius: 8px"
         >
           <el-icon class="el-icon--upload" style="width: 33px; height: 42px"><Document /></el-icon>
@@ -155,12 +153,12 @@
     });
   };
 
-  const handleExceed: UploadProps['onExceed'] = (files) => {
-    upload.value!.clearFiles();
-    const file = files[0] as UploadRawFile;
-    file.uid = genFileId();
-    upload.value!.handleStart(file);
-  };
+  // const handleExceed: UploadProps['onExceed'] = (files) => {
+  //   upload.value!.clearFiles();
+  //   const file = files[0] as UploadRawFile;
+  //   file.uid = genFileId();
+  //   upload.value!.handleStart(file);
+  // };
 
   const handleImport = async () => {
     upload.value!.submit();