fix: 修改页面的样式

yangyin

2024-08-30 420ad5d1fc749cb63ca6406fa7d13886f76211bf

 src/views/project/yw/dataManage/graph/AddGraph.vue

@@ -1,6 +1,6 @@
<template>
   <el-card shadow="hover" :body-style="{ paddingBottom: '0' }" class="h100 right-card w100">
      <div class="bg-[#fff] mb-[10px] flex items-center">
   <div class="h100 overflow-y-auto p-[16px]">
      <div class="mb-[10px] flex items-center">
         <el-button style="margin-left: 8px; width: 40px" text @click="handleExitFlow">
            <el-icon style="font-size: 24px !important">
               <ArrowLeft />
@@ -8,65 +8,73 @@
         </el-button>
         <span class="text-[24px] text-[#26244c] font-[700]">{{ state.detailTitle }}</span>
      </div>
      <div class="p-[20px] set-form-height">
         <el-form :model="state.categoryForm" label-width="120px" label-position="left">
            <el-form-item label="导入类目:">
               <label>{{ state.categoryForm.ImportCategory }}</label>
            </el-form-item>
            <el-form-item label="类目类型:">
               <label>{{ state.categoryForm.CategoryType }}</label>
            </el-form-item>
            <el-form-item label="导入方式:">
               <el-upload
                  ref="uploadRef"
                  v-model:file-list="fileList"
                  class="upload-demo w-[530px]"
                  drag
                  :multiple="true"
                  :auto-upload="false"
                  :accept="state.allowType"
                  :limit="state.limit"
                  :before-upload="beforeAvatarUpload"
               >
                  <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                  <div class="el-upload__text">
                     <em>点击或拖拽上传文件</em>
                  </div>
                  <template #tip>
                     <div class="el-upload__tip">
                        支持格式：{{ state.allowType }};限制大小{{ state.size }}M,最多上传{{ state.limit }}个文件
                     </div>
                  </template>
               </el-upload>
            </el-form-item>
            <el-form-item label="文档识别:">
               <div class="bg-[#f6f5ff] border-[1px] border-solid border-[#0062be] py-[12px] w-[215px] px-[16px] rounded-lg cursor-pointer">
                  <el-radio-group v-model="state.categoryForm.DocumentRecognition">
                     <el-radio value="1" size="large">
                        <span class="font-[700] text[14px]">文档智能解析</span>
                     </el-radio>
                  </el-radio-group>
                  <el-tooltip :content="state.demoDesc" placement="top" effect="light" popper-class="set_tooltip_demo">
                     <div class="text-[#878aab] text-[12px] mx-0 mt-[2px] mb-0 set-desc">
                        {{ state.demoDesc }}
                     </div>
                  </el-tooltip>
               </div>
            </el-form-item>
         </el-form>
      <div class="relative">
         <div class="relative transition-[opacity 0.3s]">
            <div class="set-form-height">
               <div class="flex flex-col">
                  <el-form :model="state.categoryForm" label-width="120px" label-position="left">
                     <el-form-item label="导入类目:">
                        <label>{{ state.categoryForm.ImportCategory }}</label>
                     </el-form-item>
                     <el-form-item label="类目类型:">
                        <label>{{ state.categoryForm.CategoryType }}</label>
                     </el-form-item>
                     <el-form-item label="导入方式:">
                        <el-upload
                           ref="uploadRef"
                           v-model:file-list="fileList"
                           class="upload-demo w-[530px]"
                           drag
                           :multiple="true"
                           :auto-upload="false"
                           :accept="state.allowType"
                           :limit="state.limit"
                           :before-upload="beforeAvatarUpload"
                        >
                           <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                           <div class="el-upload__text">
                              <em>点击或拖拽上传文件</em>
                           </div>
                           <template #tip>
                              <div class="el-upload__tip">
                                 支持格式：{{ state.allowType }};限制大小{{ state.size }}M,最多上传{{ state.limit }}个文件
                              </div>
                           </template>
                        </el-upload>
                     </el-form-item>
                     <el-form-item label="文档识别:">
                        <div
                           class="bg-[#f6f5ff] border-[1px] border-solid border-[#0062be] py-[12px] w-[215px] px-[16px] rounded-lg cursor-pointer"
                        >
                           <el-radio-group v-model="state.categoryForm.DocumentRecognition">
                              <el-radio value="1" size="large">
                                 <span class="font-[700] text[14px]">文档智能解析</span>
                              </el-radio>
                           </el-radio-group>
                           <el-tooltip :content="state.demoDesc" placement="top" effect="light" popper-class="set_tooltip_demo">
                              <div class="text-[#878aab] text-[12px] mx-0 mt-[2px] mb-0 set-desc">
                                 {{ state.demoDesc }}
                              </div>
                           </el-tooltip>
                        </div>
                     </el-form-item>
                  </el-form>

         <div class="set-form-footer">
            <el-button type="primary" @click="onSubmit">确 认</el-button>
            <el-button>取消</el-button>
                  <div class="set-form-footer">
                     <el-button type="primary" @click="onSubmit">确 认</el-button>
                     <el-button>取消</el-button>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </el-card>
   </div>
</template>

<script setup lang="ts">
import type { UploadUserFile } from 'element-plus';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import type { FormInstance, UploadProps, UploadUserFile, UploadRawFile } from 'element-plus';

// 定义变量内容
const state = reactive({
@@ -114,6 +122,12 @@
<style scoped lang="scss">
.set-form-height {
   height: calc(100% - 62px);
   background: #fff;
   border-radius: 16px 16px 0 0;
   flex: 1;
   margin: 0 24px 64px;
   overflow-y: auto;
   padding: 20px;
}
.set-desc {
   -webkit-line-clamp: 2;
@@ -157,3 +171,4 @@
   box-sizing: border-box;
}
</style>
ElMessage, typeElMessage, typeElMessage, typeElMessage, typeElMessage, typeElMessage, typeElMessage, typeElMessage, typeElMessage, type