|
|
@@ -118,6 +118,10 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
+ <!-- 外三区之间的 V 形分隔线 -->
|
|
|
+ <view class="sep-v sep-v-left"></view>
|
|
|
+ <view class="sep-v sep-v-right"></view>
|
|
|
+
|
|
|
</view>
|
|
|
|
|
|
<!-- 底部 日(2) 月(2) 年(4) -->
|
|
|
@@ -600,84 +604,34 @@ export default {
|
|
|
color: rgba(255, 255, 255, 0.75);
|
|
|
}
|
|
|
|
|
|
-/* 顶部 — 倒T形线段(向下连接三角形顶点) */
|
|
|
+/* 顶部 */
|
|
|
.top-tri {
|
|
|
top: -58rpx;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
position: absolute;
|
|
|
}
|
|
|
-.top-tri::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- bottom: -32rpx;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 1rpx;
|
|
|
- height: 26rpx;
|
|
|
- background: rgba(255, 255, 255, 0.3);
|
|
|
-}
|
|
|
.top-tri .tri-main {
|
|
|
font-size: 52rpx;
|
|
|
color: #fbbf24;
|
|
|
text-shadow: 0 0 28rpx rgba(251, 191, 36, 0.4);
|
|
|
}
|
|
|
|
|
|
-/* 左侧 — T形线段(─┬─ 向右连接三角形) */
|
|
|
+/* 左侧 */
|
|
|
.left-tri {
|
|
|
top: 28%;
|
|
|
left: 58rpx;
|
|
|
position: absolute;
|
|
|
}
|
|
|
-.left-tri::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- right: -24rpx;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- height: 1rpx;
|
|
|
- width: 22rpx;
|
|
|
- background: rgba(255, 255, 255, 0.25);
|
|
|
-}
|
|
|
-.left-tri::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- right: -14rpx;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- width: 1rpx;
|
|
|
- height: 44rpx;
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
-}
|
|
|
|
|
|
-/* 右侧 — T形线段(─┬─ 向左连接三角形) */
|
|
|
+/* 右侧 */
|
|
|
.right-tri {
|
|
|
top: 28%;
|
|
|
right: 58rpx;
|
|
|
position: absolute;
|
|
|
}
|
|
|
-.right-tri::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: -24rpx;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- height: 1rpx;
|
|
|
- width: 22rpx;
|
|
|
- background: rgba(255, 255, 255, 0.25);
|
|
|
-}
|
|
|
-.right-tri::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: -14rpx;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- width: 1rpx;
|
|
|
- height: 44rpx;
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
-}
|
|
|
|
|
|
-/* 顶部的两外侧数字到 M/N 的短线 */
|
|
|
+/* 顶部的两外侧数字之间的分隔线 */
|
|
|
.top-tri .tri-subs {
|
|
|
position: relative;
|
|
|
}
|
|
|
@@ -685,21 +639,34 @@ export default {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
- top: -18rpx;
|
|
|
+ bottom: -20rpx;
|
|
|
transform: translateX(-50%);
|
|
|
- width: 96rpx;
|
|
|
+ width: 130rpx;
|
|
|
height: 1rpx;
|
|
|
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2) 15%, rgba(255, 255, 255, 0.2) 85%, transparent);
|
|
|
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15) 15%, rgba(255, 255, 255, 0.15) 85%, transparent);
|
|
|
}
|
|
|
-.top-tri .tri-subs::after {
|
|
|
- content: '';
|
|
|
+
|
|
|
+/* ---- 外三区之间的 V 形分隔线 ---- */
|
|
|
+.sep-v {
|
|
|
position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: -18rpx;
|
|
|
- transform: translateX(-50%);
|
|
|
+ z-index: 2;
|
|
|
width: 1rpx;
|
|
|
- height: 18rpx;
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 100%);
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+.sep-v-left {
|
|
|
+ top: 20rpx;
|
|
|
+ left: 50%;
|
|
|
+ height: 70rpx;
|
|
|
+ transform-origin: top center;
|
|
|
+ transform: rotate(-36deg);
|
|
|
+}
|
|
|
+.sep-v-right {
|
|
|
+ top: 20rpx;
|
|
|
+ left: 50%;
|
|
|
+ height: 70rpx;
|
|
|
+ transform-origin: top center;
|
|
|
+ transform: rotate(36deg);
|
|
|
}
|
|
|
|
|
|
/* ---- 底部日期 ---- */
|