feat:测试页
This commit is contained in:
@@ -447,8 +447,6 @@
|
||||
border-left: none;
|
||||
border-radius: 50% 50% 0 0;
|
||||
z-index: 2;
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -557,6 +555,216 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
// === 3D 形状样式 ===
|
||||
|
||||
/* 圆柱体 */
|
||||
&.shape-icon-cylinder {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border: none;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
/* 顶部椭圆 */
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 50rpx;
|
||||
height: 16rpx;
|
||||
background: var(--fill-color, #666);
|
||||
border: 2rpx solid var(--border-color, #333);
|
||||
border-radius: 50%;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* 主体圆柱 */
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 50rpx;
|
||||
height: 44rpx;
|
||||
background: var(--fill-color, #666);
|
||||
border-left: 2rpx solid var(--border-color, #333);
|
||||
border-right: 2rpx solid var(--border-color, #333);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 底部椭圆 */
|
||||
.cylinder-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 50rpx;
|
||||
height: 16rpx;
|
||||
background: var(--fill-color, #666);
|
||||
border: 2rpx solid var(--border-color, #333);
|
||||
border-radius: 50%;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
/* 正方体 */
|
||||
&.shape-icon-cube {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border: none;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
/* 正面 */
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: var(--fill-color, #666);
|
||||
border: 2rpx solid var(--border-color, #333);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* 顶面 */
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: var(--fill-color, #666);
|
||||
border: 2rpx solid var(--border-color, #333);
|
||||
transform: skewX(-30deg) scaleY(0.6);
|
||||
transform-origin: bottom left;
|
||||
z-index: 2;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 右面 */
|
||||
.cube-right {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 20rpx;
|
||||
height: 40rpx;
|
||||
background: var(--fill-color, #666);
|
||||
border: 2rpx solid var(--border-color, #333);
|
||||
border-left: none;
|
||||
transform: skewY(-30deg);
|
||||
transform-origin: bottom left;
|
||||
z-index: 1;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* 球体 */
|
||||
&.shape-icon-sphere {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border: 2rpx solid var(--border-color, #333);
|
||||
border-radius: 50%;
|
||||
background: var(--fill-color, #666);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
/* 高光 */
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
left: 16rpx;
|
||||
width: 12rpx;
|
||||
height: 8rpx;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 纬线 */
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 46rpx;
|
||||
height: 20rpx;
|
||||
border: 1rpx solid var(--border-color, #333);
|
||||
border-radius: 50%;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
/* 圆锥体 */
|
||||
&.shape-icon-cone {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border: none;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
/* 圆锥主体 */
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 25rpx solid transparent;
|
||||
border-right: 25rpx solid transparent;
|
||||
border-bottom: 45rpx solid var(--fill-color, #666);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 圆锥边框 */
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -1rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 26rpx solid transparent;
|
||||
border-right: 26rpx solid transparent;
|
||||
border-bottom: 46rpx solid var(--border-color, #333);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 底部椭圆 */
|
||||
.cone-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 50rpx;
|
||||
height: 16rpx;
|
||||
background: var(--fill-color, #666);
|
||||
border: 2rpx solid var(--border-color, #333);
|
||||
border-radius: 50%;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shape-name {
|
||||
|
||||
Reference in New Issue
Block a user