yangg hai 12 horas
pai
achega
815ebdf3b3
Modificáronse 1 ficheiros con 132 adicións e 2 borrados
  1. 132 2
      src/views/report.vue

+ 132 - 2
src/views/report.vue

@@ -6431,6 +6431,45 @@ button,
   z-index: 1000;
 }
 
+/* 响应式定位 - 确保在不同屏幕尺寸下都在合适位置 */
+@media (max-width: 768px) {
+  .fab {
+    bottom: 22%;
+    right: 20%;
+    width: 45px;
+    height: 45px;
+  }
+}
+
+@media (max-width: 480px) {
+  .fab {
+    bottom: 22%;
+    right: 18%;
+    width: 40px;
+    height: 40px;
+  }
+}
+
+/* 大屏幕优化 */
+@media (min-width: 1200px) {
+  .fab {
+    bottom: 22%;
+    right: 29%;
+    width: 55px;
+    height: 55px;
+  }
+}
+
+/* 超宽屏幕优化 */
+@media (min-width: 1920px) {
+  .fab {
+    bottom: 22%;
+  right: 29%;
+    width: 60px;
+    height: 60px;
+  }
+}
+
 .fab:hover {
   transform: scale(1.1);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
@@ -6458,7 +6497,7 @@ button,
   position: absolute;
   width: 40px;
   height: 40px;
-/*   background: #ffd700; */
+  background: #ffd700;
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -6468,7 +6507,24 @@ button,
   top: 10px;
   left: 50%;
   transform: translateX(-50%);
- /*  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); */
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* 响应式关闭按钮位置调整 */
+@media (max-width: 768px) {
+  .fab .close {
+    width: 35px;
+    height: 35px;
+    top: 8px;
+  }
+}
+
+@media (max-width: 480px) {
+  .fab .close {
+    width: 30px;
+    height: 30px;
+    top: 6px;
+  }
 }
 
 .fab .close i {
@@ -6477,6 +6533,19 @@ button,
   transition: transform 0.3s ease;
 }
 
+/* 响应式关闭按钮图标尺寸调整 */
+@media (max-width: 768px) {
+  .fab .close i {
+    font-size: 18px;
+  }
+}
+
+@media (max-width: 480px) {
+  .fab .close i {
+    font-size: 16px;
+  }
+}
+
 .fab .option {
   position: absolute;
   width: 40px;
@@ -6498,6 +6567,25 @@ button,
   margin-left: -20px;
 }
 
+/* 响应式选项按钮尺寸调整 */
+@media (max-width: 768px) {
+  .fab .option {
+    width: 35px;
+    height: 35px;
+    margin-top: -17.5px;
+    margin-left: -17.5px;
+  }
+}
+
+@media (max-width: 480px) {
+  .fab .option {
+    width: 30px;
+    height: 30px;
+    margin-top: -15px;
+    margin-left: -15px;
+  }
+}
+
 /* 当FAB有动画类时启用transition */
 .fab.animated .option {
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
@@ -6508,6 +6596,19 @@ button,
   color: white;
 }
 
+/* 响应式图标尺寸调整 */
+@media (max-width: 768px) {
+  .fab .option i {
+    font-size: 18px;
+  }
+}
+
+@media (max-width: 480px) {
+  .fab .option i {
+    font-size: 16px;
+  }
+}
+
 /* .fab .option:hover {
   transform: scale(1.1);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
@@ -6550,6 +6651,35 @@ button,
   animation: expandDelete 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
 }
 
+/* 响应式展开位置调整 */
+@media (max-width: 768px) {
+  .fab.open .option.reply {
+    transform: translate(-50px, -20px) scale(1);
+  }
+  
+  .fab.open .option.love {
+    transform: translate(0px, -50px) scale(1);
+  }
+  
+  .fab.open .option.delete {
+    transform: translate(45px, -20px) scale(1);
+  }
+}
+
+@media (max-width: 480px) {
+  .fab.open .option.reply {
+    transform: translate(-40px, -15px) scale(1);
+  }
+  
+  .fab.open .option.love {
+    transform: translate(0px, -40px) scale(1);
+  }
+  
+  .fab.open .option.delete {
+    transform: translate(35px, -15px) scale(1);
+  }
+}
+
 /* 收缩动画 - 从外向内收缩 */
 .fab:not(.open) .option.reply {
   animation: collapseReply 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) both;