Quellcode durchsuchen

ai合同按钮css更新

ellisran vor 1 Monat
Ursprung
Commit
e6cd090aad
2 geänderte Dateien mit 83 neuen und 18 gelöschten Zeilen
  1. 77 12
      app/public/css/main.css
  2. 6 6
      app/view/contract/detail_modal.ejs

+ 77 - 12
app/public/css/main.css

@@ -2352,23 +2352,86 @@ animation:shake 1s .2s ease both;}
 }
 /* ai按钮css */
 .ai-fill-btn {
-    background: linear-gradient(90deg, #FF9A56 0%, #FF6B9D 50%, #C86DD7 100%);
+    position: relative;
+    border: 1px solid rgba(255,255,255,0.15);
     color: #fff;
-    border: none;
-    box-shadow: 0 2px 8px rgba(255, 107, 157, 0.4);
-    transition: all 0.2s ease;
-    padding: 2px 7px;
+    cursor: pointer;
+    overflow: hidden;
+
+    /* AI动态渐变背景 */
+    background: linear-gradient(
+            270deg,
+            #a855f7,
+            #ec4899,
+            #f59e0b,
+            #a855f7
+    );
+    background-size: 400% 400%;
+
+    animation: aiGradient 6s ease infinite;
+
+    /* 发光 */
+    box-shadow:
+            0 0 6px rgba(0, 245, 255, 0.5),
+            0 0 12px rgba(139, 92, 246, 0.35);
+
+    transition: all 0.3s ease;
+}
+
+/*.ai-fill-btn:hover {*/
+/*    color: #fff;*/
+/*    transform: translateY(-1px);*/
+/*    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.55);*/
+/*}*/
+
+/* 流光 */
+.ai-fill-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -120%;
+    width: 80%;
+    height: 100%;
+    background: linear-gradient(
+            120deg,
+            transparent,
+            rgba(255,255,255,0.35),
+            transparent
+    );
+    transform: skewX(-25deg);
+    animation: shine 3s infinite;
 }
 
 .ai-fill-btn:hover {
-    color: #fff;
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.55);
+    transform: translateY(-2px);
+    box-shadow:
+            0 0 8px rgba(0, 245, 255, 0.8),
+            0 0 14px rgba(139, 92, 246, 0.6);
+}
+
+@keyframes aiGradient {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
 }
 
-.ai-fill-btn i {
-    margin-right: 4px;
+@keyframes shine {
+    0% {
+        left: -120%;
+    }
+    100% {
+        left: 150%;
+    }
 }
+/*.ai-fill-btn i {*/
+/*    margin-right: 4px;*/
+/*}*/
 
 .ai-upload-area {
     border: 2px dashed #d9d9d9;
@@ -2377,11 +2440,13 @@ animation:shake 1s .2s ease both;}
     text-align: center;
     cursor: pointer;
     transition: border-color 0.2s;
+    border-color: #007bff;
+    color: #007bff;
 }
 .ai-upload-area:hover,
 .ai-upload-area.dragover {
-    border-color: #C86DD7;
-    background: #fdf6ff;
+    border-color: #0069d9;
+    background: #f3f8ff;
 }
 .ai-upload-result {
     display: flex;

+ 6 - 6
app/view/contract/detail_modal.ejs

@@ -205,16 +205,16 @@
                 <div class="ai-notice mt-3">
                     <div class="ai-notice-title"><i class="fa-solid fa-circle-info"></i> 识别注意事项</div>
                     <ul class="ai-notice-list">
-                        <li>识别结果由AI自动提取,可能存在误差,提交前请仔细核对各字段</li>
-                        <li>手写签名、模糊印章等内容识别准确率相对较低,建议重点核对甲乙方、金额、日期信息</li>
-                        <li>扫描件请尽量保证清晰、无遮挡,识别效果会更准确</li>
-                        <li>识别过程可能需要几秒到一分钟,请耐心等待,请勿重复提交</li>
+                        <li>识别结果由AI自动提取,可能存在误差,提交前请仔细核对各字段</li>
+                        <li>手写签名、模糊印章等内容识别准确率相对较低,建议重点核对甲乙方、金额、日期信息</li>
+                        <li>扫描件请尽量保证清晰、无遮挡,识别效果会更准确</li>
+                        <li>识别过程可能需要几秒到一分钟,请耐心等待,请勿重复提交</li>
                     </ul>
                     <div class="ai-notice-divider"></div>
                     <div class="ai-notice-title"><i class="fa-solid fa-shield-halved"></i> 数据安全提示</div>
                     <ul class="ai-notice-list">
-                        <li>上传的合同文件将发送至第三方AI大模型(千问,deepseek等)进行内容识别,请确认文件不含与本次识别无关的敏感信息</li>
-                        <li>请勿上传包含他人隐私信息(如身份证号、个人手机号等非必要信息)的非合同类文件</li>
+                        <li>上传的合同文件仅用于识别填写本系统合同相关表单信息,其余内容一概不做任何提取保留。</li>
+<!--                        <li>请勿上传包含他人隐私信息(如身份证号、个人手机号等非必要信息)的非合同类文件</li>-->
                     </ul>
                 </div>