feat: 测试图形绘制

2025-07-08 17:07:23 +08:00
parent ef39c86d5f
commit d1b451418e
7 changed files with 441 additions and 3 deletions
@@ -0,0 +1,84 @@
+.container {
+    padding: 20rpx;
+    background-color: #f5f7fa;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.card-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    padding: 20rpx;
+    background: white;
+    border-radius: 20rpx;
+    margin-bottom: 30rpx;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+}
+
+.shape-card {
+    width: 200rpx;
+    height: 200rpx;
+    margin: 15rpx;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 16rpx;
+    background: white;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+}
+
+.shape-image {
+    width: 140rpx;
+    height: 140rpx;
+}
+
+.color-box {
+    position: absolute;
+    bottom: 10rpx;
+    right: 10rpx;
+    width: 30rpx;
+    height: 30rpx;
+    border-radius: 6rpx;
+    border: 1rpx solid #eee;
+}
+
+.control-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 20rpx;
+    padding: 30rpx;
+    background: white;
+    border-radius: 20rpx;
+    margin-bottom: 30rpx;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+}
+
+.bg-picker {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 20rpx;
+    padding: 20rpx;
+    background: white;
+    border-radius: 20rpx;
+    margin-bottom: 30rpx;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+}
+
+.label {
+    font-weight: bold;
+    color: #333;
+}
+
+.preview-image {
+    width: 100%;
+    height: 600rpx;
+    background-color: white;
+    border-radius: 20rpx;
+    margin-top: 20rpx;
+    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
+    border: 1rpx solid #eee;
+}