feat(uploadFile): 优化文件上传页面布局和样式

- 调整了上传文件区域的布局，采用 flex 布局
- 移动了材料列表的位置，使其与上传区域并排显示
- 优化了卡片样式，增加了悬浮效果
- 调整了表单宽度，使其占据更多空间
- 更新了用户选择页面的样式，增加了 logo 图片
- 修改了报告导出功能，支持根据表单数据动态命名文件

src/views/report/eventList/EquipmentRegistrationForm.vue

@@ -291,7 +291,7 @@
             mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
           });
           // 将目标文件对象保存为目标类型的文件，并命名
-          saveAs(out, "特种设备使用登记表（式样二）.docx");
+          saveAs(out, "特种设备使用登记表（式样二）"+_this.formData.licensePlate+".docx");
           _this.$modal.notify("文件已导出，请注意查看浏览器下载的文件");
           _this.isout = true
           _this.handleSubmit()

src/views/report/eventList/uploadFile.vue

@@ -5,7 +5,7 @@
     <div class="page-data m-pages-data ">
 
       <!-- 登记类别选择 -->
-      <el-form ref="form" style="width: 60%;" :model="formData">
+      <el-form ref="form" style="width: 100%;" :model="formData">
         <el-form-item label="登记类别" prop="category" required>
           <el-radio-group v-model="formData.category">
             <el-radio-button label="首次启用"></el-radio-button>
@@ -15,36 +15,60 @@
 
         <!-- 设备基本情况上传 -->
         <div class="upload-box">
-          <div class="upload-header">
-            <span class="required-mark">*</span>
-            <span>上传材料 - 设备基本情况</span>
-            <span class="hint-text">*请上传右侧所需材料</span>
+          <div class="u-left">
+            <div class="upload-header">
+              <span class="required-mark">*</span>
+              <span>上传材料 - 设备基本情况</span>
+              <span class="hint-text">*请上传右侧所需材料</span>
+            </div>
+            <div class="upload-section">
+              <el-upload class="upload-area" :action="uploadFileUrl" :headers="headers" :multiple="true"
+                :file-list="basicFiles" :on-preview="handlePreview" :before-upload="beforeUpload"
+                :http-request="uploadFileFactory('basic')" :on-remove="handleRemoveBasic"
+                :on-success="handleBasicUploadSuccess">
+                <el-button type="primary">选择文件</el-button>
+              </el-upload>
+
+            </div>
           </div>
-          <div class="upload-section">
-            <el-upload class="upload-area" :action="uploadFileUrl" :headers="headers" :multiple="true"
-              :file-list="basicFiles" :on-preview="handlePreview" :before-upload="beforeUpload"
-              :http-request="uploadFileFactory('basic')" :on-remove="handleRemoveBasic"
-              :on-success="handleBasicUploadSuccess">
-              <el-button type="primary">选择文件</el-button>
-            </el-upload>
+
+          <div class="material-group">
+            <p class="title">设备基本情况所需材料：</p>
+            <ol>
+              <li>特种设备产品合格证（含产品数据表、车用气瓶安装合格证）</li>
+              <li>特种设备监督检验证明（特种设备制造监督检验证书、特种设备安装监督检验证书和批量检验质量证明书）</li>
+              <li>机动车登记证书（适用于与机动车固定的车用气瓶）</li>
+            </ol>
           </div>
         </div>
 
 
         <!-- 设备使用情况上传 -->
         <div class="upload-box">
-          <div class="upload-header">
-            <span class="required-mark">*</span>
-            <span>上传材料 - 设备使用情况</span>
-            <span class="hint-text">*请上传右侧所需材料</span>
+          <div class="u-left">
+            <div class="upload-header">
+              <span class="required-mark">*</span>
+              <span>上传材料 - 设备使用情况</span>
+              <span class="hint-text">*请上传右侧所需材料</span>
+            </div>
+            <div class="upload-section">
+              <el-upload class="upload-area" :action="uploadFileUrl" :headers="headers" :multiple="true"
+                :file-list="usageFiles" :on-preview="handlePreview" :before-upload="beforeUpload"
+                :http-request="uploadFileFactory('usage')" :on-remove="handleRemoveUsage"
+                :on-success="handlUsageeUploadSuccess">
+                <el-button type="primary">选择文件</el-button>
+              </el-upload>
+
+            </div>
           </div>
-          <div class="upload-section">
-            <el-upload class="upload-area" :action="uploadFileUrl" :headers="headers" :multiple="true"
-              :file-list="usageFiles" :on-preview="handlePreview" :before-upload="beforeUpload"
-              :http-request="uploadFileFactory('usage')" :on-remove="handleRemoveUsage"
-              :on-success="handlUsageeUploadSuccess">
-              <el-button type="primary">选择文件</el-button>
-            </el-upload>
+
+
+          <div class="material-group">
+            <p class="title">设备使用情况所需材料：</p>
+            <ol>
+              <li>含有使用等单位统一社会信用代码的证明或个人身份证明（适用于公民个人所有的特种设备）</li>
+              <li>机动车行驶证（适用于与机动车固定的移动式压力容器）</li>
+            </ol>
           </div>
         </div>
 
@@ -62,25 +86,12 @@
       </el-form>
 
       <!-- 右侧材料列表 -->
-      <div class="material-list">
+      <!-- <div class="material-list">
         <h3>所需材料：</h3>
-        <div class="material-group">
-          <p class="title">设备基本情况所需材料：</p>
-          <ol>
-            <li>特种设备产品合格证（含产品数据表、车用气瓶安装合格证）</li>
-            <li>特种设备监督检验证明（特种设备制造监督检验证书、特种设备安装监督检验证书和批量检验质量证明书）</li>
-            <li>机动车登记证书（适用于与机动车固定的车用气瓶）</li>
-          </ol>
-        </div>
 
-        <div class="material-group">
-          <p class="title">设备使用情况所需材料：</p>
-          <ol>
-            <li>含有使用等单位统一社会信用代码的证明或个人身份证明（适用于公民个人所有的特种设备）</li>
-            <li>机动车行驶证（适用于与机动车固定的移动式压力容器）</li>
-          </ol>
-        </div>
-      </div>
+
+        
+      </div> -->
 
       <!-- 文件预览对话框 -->
       <el-dialog :visible.sync="previewVisible" width="80%" :before-close="handlePreviewClose">
@@ -288,7 +299,7 @@
   };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
   .smart-form-container {
     border-radius: 8px;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
@@ -354,10 +365,18 @@
   }
 
   .material-group {
-    margin: 35px 0;
+    flex: 1;
+    padding-top: 10px;
 
     .title {
       font-weight: bold;
+      font-size: 16px;
+    }
+
+    ol{
+      li{
+        font-size: 14px;
+      }
     }
   }
 
@@ -381,4 +400,13 @@
     width: fit-content;
   }
 
+  .upload-box {
+    display: flex;
+    align-items: self-start;
+
+    .u-left {
+      width: 40%;
+      margin-right: 20px;
+    }
+  }
 </style>

src/views/userSelect.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="container">
     <div class="header">
+      <img src="@/assets/logo/logo.png" alt="">
       <h1>鹿泉区智能填单系统</h1>
     </div>
 
@@ -8,8 +9,9 @@
       <h2 class="sub-title">请选择您的角色</h2>
 
       <el-row :gutter="30" class="role-container">
-        <el-col :xs="24" :sm="12" :md="12" :lg="8">
-          <el-card class="role-card" :body-style="{ padding: '0' }" shadow="hover" @click.native="handleRoleSelect('personal')">
+        <el-col :xs="24" :sm="12" :md="12" :lg="6">
+          <el-card class="role-card" :body-style="{ padding: '0' }" shadow="hover"
+            @click.native="handleRoleSelect('personal')">
             <div class="card-content personal-card">
               <h3>个人/企业
                 <i class=" icon personal-icon">
@@ -22,8 +24,9 @@
           </el-card>
         </el-col>
 
-        <el-col :xs="24" :sm="12" :md="12" :lg="8">
-          <el-card class="role-card" :body-style="{ padding: '0' }" shadow="hover" @click.native="handleRoleSelect('staff')">
+        <el-col :xs="24" :sm="12" :md="12" :lg="6">
+          <el-card class="role-card" :body-style="{ padding: '0' }" shadow="hover"
+            @click.native="handleRoleSelect('staff')">
             <div class="card-content staff-card">
               <h3>工作人员
 
@@ -103,22 +106,35 @@
   }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
   .container {
     min-height: 100vh;
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    background-image: linear-gradient(to bottom, #b9d6ff, #d0dfff, #e3e9ff, #f3f3ff, #ffffff);
     padding: 20px;
   }
 
   .header {
+
+    font-weight: bold;
     text-align: center;
+    margin-top: 100px;
+    font-size: 1.2em;
     margin-bottom: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img{
+      width: 50px;
+      margin-right: 20px;
+    }
   }
 
   .header h1 {
-    color: #2c3e50;
+    color: #133f6a;
     font-size: 2.5em;
     letter-spacing: 2px;
+    font-weight: bold;
   }
 
   .sub-title {
@@ -132,37 +148,54 @@
     display: flex;
     justify-content: center;
     margin: 0 auto;
-    max-width: 1000px;
+    max-width: 100%;
   }
 
   .role-card {
     cursor: pointer;
-    transition: transform 0.3s;
+    transition: all 0.3s ease-in-out;
     margin-bottom: 20px;
     border-radius: 15px;
   }
 
   .role-card:hover {
     transform: translateY(-5px);
+
+  }
+
+  .role-card:hover .card-content::after {
+    width: 256px;
+    height: 256px;
+    bottom: -80px;
+    right: -80px;
+    opacity: 1;
   }
 
   .card-content {
-    padding: 40px 20px 80px;
+    padding: 230px 20px 230px;
     text-align: center;
     position: relative;
     overflow: hidden;
 
     &:after {
       content: '';
-      width: 96px;
-      height: 96px;
+      content: '';
+      width: 186px;
+      height: 186px;
       position: absolute;
-      bottom: -10px;
-      right: -10px;
+      bottom: -40px;
+      right: -40px;
       background-image: url('~@/assets/images/icon_company.svg');
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;
+      transition: all 0.3s ease-in-out;
+      opacity: 0.8;
+    }
+
+    h3 {
+      font-size: 32px;
+      padding-left: 30px;
     }
   }
 
@@ -199,7 +232,7 @@
     margin: 0;
   }
 
-  @media (max-width: 768px) {
+  /* @media (max-width: 768px) {
     .header h1 {
       font-size: 2em;
     }
@@ -207,8 +240,9 @@
     .icon {
       font-size: 50px;
     }
-  }
-  h3{
+  } */
+
+  h3 {
     display: flex;
     align-items: center;
     color: #fff;