|
|
@@ -358,56 +358,67 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 右上角tip按钮样式 - 选项9：简约圆环设计
|
|
|
+ // 右上角tip按钮样式 - 三点"更多选项"设计
|
|
|
.tip-button {
|
|
|
position: absolute;
|
|
|
- top: 20upx;
|
|
|
- right: 20upx;
|
|
|
- width: 36upx;
|
|
|
- height: 36upx;
|
|
|
+ top: 15upx;
|
|
|
+ right: 15upx;
|
|
|
+ width: 44upx;
|
|
|
+ height: 44upx;
|
|
|
background: rgba(255, 255, 255, 0.95);
|
|
|
- border-radius: 50%;
|
|
|
+ border-radius: 8upx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
z-index: 20;
|
|
|
cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- box-shadow: 0 2upx 6upx rgba(0, 0, 0, 0.08);
|
|
|
- border: 1upx solid rgba(0, 0, 0, 0.05);
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.12);
|
|
|
+ border: 1upx solid rgba(0, 0, 0, 0.08);
|
|
|
|
|
|
&:hover {
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- transform: scale(1.1);
|
|
|
- box-shadow: 0 3upx 10upx rgba(0, 0, 0, 0.12);
|
|
|
+ background: rgba(248, 249, 250, 1);
|
|
|
+ transform: scale(1.05);
|
|
|
+ box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.18);
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
- transform: scale(0.95);
|
|
|
+ transform: scale(0.98);
|
|
|
+ background: rgba(233, 236, 239, 1);
|
|
|
}
|
|
|
|
|
|
.tip-icon {
|
|
|
- width: 12upx;
|
|
|
- height: 12upx;
|
|
|
+ width: 24upx;
|
|
|
+ height: 24upx;
|
|
|
position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
|
|
|
+ // 使用单个元素创建三个点的效果
|
|
|
&::before {
|
|
|
content: '';
|
|
|
- position: absolute;
|
|
|
- width: 12upx;
|
|
|
- height: 12upx;
|
|
|
- border: 1.5upx solid #999;
|
|
|
+ width: 6upx;
|
|
|
+ height: 6upx;
|
|
|
+ background-color: #666;
|
|
|
border-radius: 50%;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- box-sizing: border-box;
|
|
|
- transition: all 0.3s ease;
|
|
|
+ position: absolute;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ // 使用box-shadow创建另外两个点
|
|
|
+ box-shadow:
|
|
|
+ 0 -8upx 0 0 #666, /* 上面的点 */
|
|
|
+ 0 8upx 0 0 #666; /* 下面的点 */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- &:hover .tip-icon::before {
|
|
|
- border-color: #666;
|
|
|
- transform: scale(1.1);
|
|
|
+ &:hover .tip-icon {
|
|
|
+ &::before {
|
|
|
+ background-color: #333;
|
|
|
+ transform: scale(1.1);
|
|
|
+ box-shadow:
|
|
|
+ 0 -8upx 0 0 #333, /* 上面的点变色 */
|
|
|
+ 0 8upx 0 0 #333; /* 下面的点变色 */
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
