flat: 暂存

common/common.css

@@ -13,7 +13,6 @@ body,
 page {
     overscroll-behavior: none;
     overflow: hidden;
-    height: 100%;
 } */
 
 image {
@@ -23,6 +22,8 @@ image {
 
 .page-body {
     height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
+    /* width: 100%; */
+    /* height: 100%; */
 }
 
 body,
@@ -52,7 +53,77 @@ html {
 }
 
 .btn-light:active {
-    background-color: #2980b9;
+    background-color: rgba(189, 197, 254, 0.15);
+}
+
+.btn-incline {
+    transition: transform 0.2s ease;
+    transform-style: preserve-3d;
+}
+
+.btn-incline:active {
+    transform: perspective(600px) rotateY(6deg) rotateX(3deg);
+}
+
+.btn-feel {
+    transition: transform 0.2s ease;
+    transform-style: preserve-3d;
+}
+
+.btn-feel:active {
+    transform: perspective(600px) rotateX(6deg) scale(0.98);
+}
+
+
+/* 动画效果 */
+.btn-shaky:active {
+    animation: shakeScale 0.6s;
+}
+
+@keyframes shakeScale {
+    0% {
+        transform: scale(1);
+    }
+
+    10% {
+        transform: scale(0.9) rotate(-3deg);
+    }
+
+    20% {
+        transform: scale(1.05) rotate(3deg);
+    }
+
+    30% {
+        transform: scale(0.95) rotate(-3deg);
+    }
+
+    40% {
+        transform: scale(1.02) rotate(3deg);
+    }
+
+    50% {
+        transform: scale(0.98) rotate(-2deg);
+    }
+
+    60% {
+        transform: scale(1.01) rotate(2deg);
+    }
+
+    70% {
+        transform: scale(0.99) rotate(-1deg);
+    }
+
+    80% {
+        transform: scale(1.005) rotate(1deg);
+    }
+
+    90% {
+        transform: scale(1) rotate(0deg);
+    }
+
+    100% {
+        transform: scale(1) rotate(0deg);
+    }
 }
 
 /* 控制hover */
@@ -191,8 +262,8 @@ html {
     color: #FB7307 !important;
 }
 
-.color_4873D9 {
-    color: #4873D9 !important;
+.color_256BFA {
+    color: #256BFA !important;
 }
 
 .color_4E8ADE {
@@ -343,6 +414,14 @@ html {
     flex: 1;
 }
 
+.fl_warp {
+    flex-wrap: wrap
+}
+
+.fl_nowarp {
+    flex-wrap: nowrap
+}
+
 .line_2 {
     display: -webkit-box;
     /* 让文本内容成为弹性盒 */
@@ -354,4 +433,17 @@ html {
     /* 隐藏超出的文本 */
     text-overflow: ellipsis;
     /* 使用省略号 */
+}
+
+.line_1 {
+    display: -webkit-box;
+    /* 让文本内容成为弹性盒 */
+    -webkit-box-orient: vertical;
+    /* 设置盒子的方向为垂直 */
+    -webkit-line-clamp: 1;
+    /* 限制最多显示两行 */
+    overflow: hidden;
+    /* 隐藏超出的文本 */
+    text-overflow: ellipsis;
+    /* 使用省略号 */
 }