106 lines
3.7 KiB
Vue
106 lines
3.7 KiB
Vue
<template>
|
||
<view class="min-h-screen flex flex-col" style="background-image: linear-gradient(180deg, #4CAF50 0%, #8BC34A 42%, #E8F5E9 100%)">
|
||
<wd-segmented :options="list" v-model:value="current"
|
||
custom-style="align-self: center; width: 60%; margin-top: 10px;"></wd-segmented>
|
||
|
||
<view class="self-center py-3 flex items-center gap-2 text-gray-800">
|
||
<view class="flex min-w-0 flex-col">
|
||
<text class="truncate text-lg text-white font-semibold">
|
||
西红柿
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<wd-card>
|
||
<template #title>
|
||
<view class="w-full flex flex-col gap-1.5">
|
||
<view class="flex justify-between items-center">
|
||
<view class="text-base font-medium">💧 浇水</view>
|
||
<wd-tag type="primary" round>🌱 开花期</wd-tag>
|
||
<view class="text-xs text-gray-400">06-20 08:30</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view class="flex flex-col gap-2">
|
||
<text class="text-sm text-gray-500">浇透水，土壤湿度约70%</text>
|
||
</view>
|
||
</wd-card>
|
||
|
||
<wd-card>
|
||
<template #title>
|
||
<view class="w-full flex flex-col gap-1.5">
|
||
<view class="flex justify-between items-center">
|
||
<view class="text-base font-medium">🌿 施肥</view>
|
||
<wd-tag type="primary" round>🌱 开花期</wd-tag>
|
||
<view class="text-xs text-gray-400">06-18 17:00</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view class="flex flex-col gap-2">
|
||
<image
|
||
src="https://wot-ui.cn/assets/panda.jpg"
|
||
mode="aspectFill"
|
||
class="rounded-lg"
|
||
/>
|
||
<text class="text-sm text-gray-500">追施磷酸二氢钾，800倍叶面喷施</text>
|
||
</view>
|
||
</wd-card>
|
||
|
||
<wd-card>
|
||
<template #title>
|
||
<view class="w-full flex flex-col gap-1.5">
|
||
<view class="flex justify-between items-center">
|
||
<view class="text-base font-medium">🐛 病虫害防治</view>
|
||
<wd-tag type="warning" round>⚠️ 发现蚜虫</wd-tag>
|
||
<view class="text-xs text-gray-400">06-15 09:00</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view class="flex flex-col gap-2">
|
||
<text class="text-sm text-gray-500">叶片背面发现少量蚜虫，喷施吡虫啉1000倍液</text>
|
||
</view>
|
||
</wd-card>
|
||
|
||
<wd-card>
|
||
<template #title>
|
||
<view class="w-full flex flex-col gap-1.5">
|
||
<view class="flex justify-between items-center">
|
||
<view class="text-base font-medium">✂️ 整枝打杈</view>
|
||
<wd-tag type="primary" round>🌱 开花期</wd-tag>
|
||
<view class="text-xs text-gray-400">06-12 16:30</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view class="flex flex-col gap-2">
|
||
<text class="text-sm text-gray-500">摘除第一穗花以下所有侧枝，保留主蔓</text>
|
||
</view>
|
||
</wd-card>
|
||
|
||
<!-- 04-10 播种（最早） -->
|
||
<wd-card>
|
||
<template #title>
|
||
<view class="w-full flex flex-col gap-1.5">
|
||
<view class="flex justify-between items-center">
|
||
<view class="text-base font-medium">🌱 播种</view>
|
||
<wd-tag type="success" round>📅 苗期</wd-tag>
|
||
<view class="text-xs text-gray-400">04-10 10:00</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view class="flex flex-col gap-2">
|
||
<text class="text-sm text-gray-500">穴盘育苗，覆土1cm，浇透水，放置于温暖通风处</text>
|
||
</view>
|
||
</wd-card>
|
||
|
||
<view class="h-[10px]"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
|
||
const list = ref<string[]>(['当前种植', '历史种植'])
|
||
|
||
const current = ref('点赞')
|
||
</script>
|