|
@@ -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;
|