feat: Add plant identification feature with image upload, classification results display, and integration into the wiki page.
This commit is contained in:
Blizzard
+154
-131
@@ -5,7 +5,7 @@ page {
|
||||
}
|
||||
|
||||
.add-plant-page {
|
||||
background-color: #FFFFFF;
|
||||
background-color: #F5F7F5;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -14,35 +14,20 @@ page {
|
||||
|
||||
.page-content {
|
||||
height: calc(100vh - 140rpx - env(safe-area-inset-bottom));
|
||||
padding: 32rpx 40rpx;
|
||||
background: #FFFFFF;
|
||||
padding: 24rpx 32rpx;
|
||||
background: #F5F7F5;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Hide scrollbar - multiple approaches for compatibility */
|
||||
.page-content::-webkit-scrollbar {
|
||||
display: none !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* For scroll-view component */
|
||||
::-webkit-scrollbar {
|
||||
display: none !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
display: none !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
/* Upload Section */
|
||||
/* ======== Upload Section ======== */
|
||||
.upload-section {
|
||||
margin: 0 0 40rpx;
|
||||
margin: 0 0 24rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -50,9 +35,9 @@ scroll-view ::-webkit-scrollbar {
|
||||
.image-upload-area {
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
border-radius: 32rpx;
|
||||
border: 4rpx dashed #ddd; /* Match prototype dashed border */
|
||||
background: #fafafa;
|
||||
border-radius: 28rpx;
|
||||
border: 4rpx dashed #C5E1A5;
|
||||
background: #FAFFF5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -62,21 +47,16 @@ scroll-view ::-webkit-scrollbar {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.uploaded-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 32rpx; /* Matches container */
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.image-upload-area:active {
|
||||
border-color: #558B2F; /* var(--primary) */
|
||||
background: #F1F8E9;
|
||||
}
|
||||
.image-upload-area:active { opacity: 0.9; }
|
||||
|
||||
.image-upload-area.has-image {
|
||||
border: none;
|
||||
height: 360rpx; /* Taller when has image */
|
||||
height: 360rpx;
|
||||
}
|
||||
|
||||
.image-upload-area .uploaded-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.upload-placeholder {
|
||||
@@ -87,41 +67,74 @@ scroll-view ::-webkit-scrollbar {
|
||||
}
|
||||
|
||||
.upload-placeholder text {
|
||||
color: #BDBDBD;
|
||||
color: #9CA3AF;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
/* Form Styles */
|
||||
/* ======== Section Cards ======== */
|
||||
.form-section {
|
||||
background: #FFFFFF;
|
||||
border-radius: 28rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.section-title-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.section-dot {
|
||||
width: 8rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 4rpx;
|
||||
background: linear-gradient(180deg, #558B2F, #689F38);
|
||||
}
|
||||
|
||||
.section-title-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #1F2937;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ======== Form Fields ======== */
|
||||
.form-group {
|
||||
margin-bottom: 40rpx;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.form-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #263238;
|
||||
margin-bottom: 16rpx;
|
||||
color: #374151;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.custom-input-box {
|
||||
background: #f9f9f9;
|
||||
border: 2rpx solid #e0e0e0;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
color: #263238;
|
||||
font-size: 30rpx;
|
||||
background: #F9FAFB;
|
||||
border: 2rpx solid #E5E7EB;
|
||||
border-radius: 20rpx;
|
||||
padding: 22rpx 28rpx;
|
||||
color: #1F2937;
|
||||
font-size: 28rpx;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.custom-input-box:active, .custom-input-box:focus-within {
|
||||
.custom-input-box:focus-within {
|
||||
background: #FFFFFF;
|
||||
border-color: #558B2F;
|
||||
box-shadow: 0 0 0 4rpx rgba(85, 139, 47, 0.1);
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
color: #999;
|
||||
}
|
||||
.input-placeholder { color: #9CA3AF; }
|
||||
|
||||
.native-input {
|
||||
width: 100%;
|
||||
@@ -134,109 +147,93 @@ scroll-view ::-webkit-scrollbar {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Care Section */
|
||||
.care-section-group {
|
||||
margin-top: 24rpx;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.section-header-row {
|
||||
/* Two-column layout */
|
||||
.form-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.form-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-group.half {
|
||||
flex: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ======== Care Plan Section ======== */
|
||||
.add-task-btn-small {
|
||||
font-size: 26rpx;
|
||||
font-size: 24rpx;
|
||||
color: #558B2F;
|
||||
background: #F1F8E9;
|
||||
border: 2rpx dashed #558B2F;
|
||||
padding: 12rpx 20rpx;
|
||||
border: 2rpx dashed #A5D6A7;
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
gap: 6rpx;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.add-task-btn-small:active {
|
||||
background: #E8F5E9;
|
||||
}
|
||||
|
||||
/* Care empty state */
|
||||
.care-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 48rpx 0 16rpx;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.care-empty-text {
|
||||
font-size: 24rpx;
|
||||
color: #9CA3AF;
|
||||
}
|
||||
|
||||
.care-list-styled {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.care-row-styled {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.care-input-col.task-col {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.care-input-col.freq-col {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.care-input-col.task-col { flex: 1; }
|
||||
.care-input-col.freq-col { flex-shrink: 0; }
|
||||
|
||||
.small-box {
|
||||
padding: 24rpx;
|
||||
background: #f9f9f9;
|
||||
padding: 20rpx;
|
||||
background: #F9FAFB;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 20rpx;
|
||||
padding-right: 16rpx;
|
||||
}
|
||||
|
||||
.center-text {
|
||||
text-align: center;
|
||||
}
|
||||
.center-text { text-align: center; }
|
||||
|
||||
.suffix-text {
|
||||
color: #888;
|
||||
font-size: 28rpx;
|
||||
color: #9CA3AF;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.delete-btn-pink {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
background: #FFEBEE;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #EF5350;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.page-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 32rpx 40rpx calc(32rpx + env(safe-area-inset-bottom));
|
||||
background: white;
|
||||
z-index: 100;
|
||||
box-shadow: 0 -4rpx 16rpx rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
/* Footer Button */
|
||||
.page-footer t-button {
|
||||
--td-button-font-weight: 600;
|
||||
--td-button-primary-bg-color: #558B2F;
|
||||
--td-button-primary-border-color: #558B2F;
|
||||
box-shadow: 0 8rpx 32rpx rgba(85, 139, 47, 0.3);
|
||||
}
|
||||
|
||||
/* Care Icon Button */
|
||||
.care-icon-btn {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 24rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -244,17 +241,49 @@ scroll-view ::-webkit-scrollbar {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.care-icon-btn:active {
|
||||
.care-icon-btn:active { transform: scale(0.95); }
|
||||
|
||||
.delete-btn-pink {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: #FFF5F5;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #EF5350;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.delete-btn-pink:active {
|
||||
background: #FFEBEE;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Icon Picker Popup */
|
||||
.icon-picker-mask {
|
||||
/* ======== Footer ======== */
|
||||
.page-footer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
|
||||
background: white;
|
||||
z-index: 100;
|
||||
box-shadow: 0 -4rpx 16rpx rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.page-footer t-button {
|
||||
--td-button-font-weight: 600;
|
||||
--td-button-primary-bg-color: #558B2F;
|
||||
--td-button-primary-border-color: #558B2F;
|
||||
box-shadow: 0 8rpx 32rpx rgba(85, 139, 47, 0.3);
|
||||
}
|
||||
|
||||
/* ======== Icon Picker Popup ======== */
|
||||
.icon-picker-mask {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
@@ -269,9 +298,7 @@ scroll-view ::-webkit-scrollbar {
|
||||
|
||||
.icon-picker-popup {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0; right: 0; bottom: 0;
|
||||
background: #fff;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
z-index: 1001;
|
||||
@@ -280,9 +307,7 @@ scroll-view ::-webkit-scrollbar {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.icon-picker-popup.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.icon-picker-popup.show { transform: translateY(0); }
|
||||
|
||||
.icon-picker-header {
|
||||
display: flex;
|
||||
@@ -323,9 +348,7 @@ scroll-view ::-webkit-scrollbar {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.icon-picker-item:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.icon-picker-item:active { opacity: 0.7; }
|
||||
|
||||
.icon-circle {
|
||||
width: 96rpx;
|
||||
|
||||
Reference in New Issue
Block a user