|
|
@@ -40,13 +40,13 @@
|
|
|
<text class="function-icon">📍</text>
|
|
|
<text class="function-text">地址</text>
|
|
|
</view>
|
|
|
- <view class="function-item message-item" @click="">
|
|
|
- <view class="icon-container">
|
|
|
- <text class="function-icon">💬</text>
|
|
|
- <view class="message-dot"></view>
|
|
|
- </view>
|
|
|
- <text class="function-text">新消息</text>
|
|
|
- </view>
|
|
|
+ <view class="function-item-wrapper">
|
|
|
+ <view class="function-item message-item" @click="">
|
|
|
+ <text class="function-icon">💬</text>
|
|
|
+ <text class="function-text">新消息</text>
|
|
|
+ </view>
|
|
|
+ <view class="message-badge">9</view>
|
|
|
+ </view>
|
|
|
<view class="function-item" @click="logout">
|
|
|
<text class="function-icon">📱</text>
|
|
|
<text class="function-text">改号码</text>
|
|
|
@@ -518,12 +518,38 @@ page {
|
|
|
padding: 0 10upx;
|
|
|
gap: 15upx;
|
|
|
|
|
|
+ .function-item-wrapper {
|
|
|
+ position: relative;
|
|
|
+ width: calc(20% - 6upx);
|
|
|
+
|
|
|
+ .message-badge {
|
|
|
+ position: absolute;
|
|
|
+ top: -15upx;
|
|
|
+ right: -15upx;
|
|
|
+ width: 42upx;
|
|
|
+ height: 42upx;
|
|
|
+ background: #ff4757;
|
|
|
+ border-radius: 21upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 22upx;
|
|
|
+ font-weight: bold;
|
|
|
+ box-shadow: 0 4upx 12upx rgba(255, 56, 56, 0.6);
|
|
|
+ z-index: 10;
|
|
|
+ text-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.3);
|
|
|
+ line-height: 1;
|
|
|
+ min-width: 42upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.function-item {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- width: calc(20% - 6upx);
|
|
|
+ width: 100%;
|
|
|
height: 110upx;
|
|
|
background: rgba(255, 255, 255, 0.15);
|
|
|
border-radius: 15upx;
|
|
|
@@ -557,35 +583,11 @@ page {
|
|
|
margin-top: 0;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- // 新消息按钮特殊样式
|
|
|
- &.message-item {
|
|
|
- .icon-container {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-bottom: 8upx;
|
|
|
-
|
|
|
- .function-icon {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .message-dot {
|
|
|
- position: absolute;
|
|
|
- top: -5upx;
|
|
|
- right: -10upx;
|
|
|
- width: 24upx;
|
|
|
- height: 24upx;
|
|
|
- background: #ff3838;
|
|
|
- border-radius: 12upx;
|
|
|
- border: 3upx solid #ffffff;
|
|
|
- box-shadow: 0 4upx 12upx rgba(255, 56, 56, 0.6), 0 0 0 4upx rgba(255, 56, 56, 0.2);
|
|
|
- animation: pulse 1.5s infinite;
|
|
|
- z-index: 10;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 对于没有包装器的普通按钮，保持原来的宽度
|
|
|
+ > .function-item {
|
|
|
+ width: calc(20% - 6upx);
|
|
|
}
|
|
|
}
|
|
|
|
