sdaduanbilei/flower-mp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

管理员可以修改项目所属人

Browse Source
This commit is contained in:
sdaduanbilei 2025-11-21 11:56:13 +08:00
parent 1dd62e3e4b
commit e1d5caf192
11 changed files with 334 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
pages/community/add.js
View File

@ -1,11 +1,15 @@
// pages/community/add.js
const config = require("../../config/config")
const { api } = require("../../utils/api")
Page({
/**
* 页面的初始数据
*/
data: {
content: '',
ossIds: [],
fileList: []
},
/**
@ -15,6 +19,96 @@ Page({
},
upload(e) {
const {
files
} = e.detail;
console.log(files);
this.setData({
fileList: files
})
},
remove(e) {
const {
index
} = e.detail;
const {
fileList
} = this.data
fileList.splice(index, 1);
this.setData({
fileList
});
},
input(e) {
const value = e.detail.value
this.setData({
content: value
})
},
submit() {
if (this.data.content.length === 0) {
wx.showModal({
content: '请输入这一刻的想法',
})
return
}
wx.showLoading({
title: '请稍后',
})
// 上传图片
const uploadTasks = this.data.fileList.map(file => this.uploadSingle(file));
Promise.all(uploadTasks)
.then(ossIds => {
console.log("全部上传成功", ossIds);
// ossIds 是一个 [id1, id2, id3...]
this.save(ossIds);
})
.catch(err => {
console.error("有上传失败", err);
wx.showToast({
title: '上传失败',
icon: 'none'
});
});
},
save(ids){
const data = {content:this.data.content,ossIds: ids,title:this.data.content}
api('/post/add','POST',data,'json').then(res => {
if (res.code === 200){
wx.navigateBack()
} else{
wx.showModal({
content: res.msg
})
}
})
},
uploadSingle(file) {
console.log(file);
return new Promise((resolve, reject) => {
wx.uploadFile({
filePath: file.url,
name: 'file',
header: {
'Authorization': 'Bearer ' + wx.getStorageSync('token'),
},
url: config.baseUrl + '/oss/upload',
success: res => {
const data = JSON.parse(res.data);
if (data.code === 200) {
resolve(data.data.file.id); // 返回 ossId
} else {
reject(data);
}
},
fail: reject
});
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/

6
pages/community/add.wxml
View File

@ -4,10 +4,10 @@
<view></view>
<view>
<t-textarea t-class="external-class" placeholder="这一刻的想法" disableDefaultPadding="{{true}}" />
<t-textarea t-class="external-class" placeholder="这一刻的想法" disableDefaultPadding="{{true}}" bind:change="input" />
</view>
<view>
<t-upload disabled mediaType="{{['video','image']}}" max="{{9}}" files="{{fileList}}" bind:add="handleAdd" bind:remove="handleRemove">
<t-upload mediaType="{{['image']}}" max="{{9}}" files="{{fileList}}" bind:add="upload" bind:remove="remove">
</t-upload>
</view>
@ -37,7 +37,7 @@
</view>
<view class="full-width flex flex-center " style="margin-top: 96rpx;">
<t-button theme="primary" style="width: 80%;" shape="round">发布</t-button>
<t-button theme="primary" style="width: 80%;" shape="round" bind:tap="submit">发布</t-button>
</view>
</view>
</view>

37
pages/community/index.js
View File

@ -1,3 +1,5 @@
const { api } = require("../../utils/api")
// pages/community/index.js
Page({
@ -5,16 +7,11 @@ Page({
* 页面的初始数据
*/
data: {
list:[
{
content:'植物园的枫叶🍁',
imgList:["https://pic1.zhimg.com/v2-e58efabf7a05544e04b6004b9b63e645_720w.jpg?source=172ae18b"]
},
{
content:"下周就要冷了！ 是不是今天就是今年最后一个适合看花看景的秋日了....",
imgList:["https://res.catter.cn/pub/2025/11/18/20251118170136790.png","https://res.catter.cn/pub/2025/11/18/20251118170155441.png"]
}
]
page:{
current:0,
pageSize:10
},
list:[]
},
/**
@ -41,7 +38,27 @@ Page({
* 生命周期函数--监听页面显示
*/
onShow() {
this.fetchList()
},
fetchList(){
const data = {...this.data.page}
api('/post/page','POST',data,'json').then(res => {
if (res.code === 200){
console.log(res.data);
const tmps = res.data.list
this.setData({list:tmps})
}
})
},
like(e){
const {id,hasLiked} = e.currentTarget.dataset.item
api( hasLiked === 1 ? '/post/cancelLike':'/post/like','GET',{id}).then(res => {
if (res.code === 200){
this.fetchList()
}
})
},
/**

12
pages/community/index.wxml
View File

@ -21,25 +21,25 @@
<view class="mt-16">
<view wx:if="{{item.imgList.length == 1}}">
<view wx:for="{{item.imgList}}">
<image src="{{item}}" style="border-radius: 16rpx; height: 50vw; width: 100%;" mode="aspectFill"></image>
<image src="{{item.url}}" style="border-radius: 16rpx; height: 50vw; width: 100%;" mode="aspectFill"></image>
</view>
</view>
<view wx:else class="grid" >
<view class="item" wx:for="{{item.imgList}}">
<view>
<image src="{{item}}" style="width: 100%;height: 30vw; border-radius: 16rpx;" mode="aspectFill" b></image>
<image src="{{item.url}}" style="width: 100%;height: 30vw; border-radius: 16rpx;" mode="aspectFill" b></image>
</view>
</view>
</view>
</view>
<view class="mt-32 flex flex-center flex-justify-end">
<view class="flex flex-center">
<t-icon name="thumb-up"></t-icon>
<view class="ml-16">10</view>
<view class="flex flex-center" data-item="{{item}}" bind:tap="like">
<t-icon name="{{item.hasLiked === 1 ?'thumb-up-filled':'thumb-up'}}" style="color: {{item.hasLiked === 1 ?'red':''}};" ></t-icon>
<view class="ml-16">{{item.likeCount}}</view>
</view>
<view class="flex flex-center ml-32">
<t-icon name="chat-bubble-smile"></t-icon>
<view class="ml-16">4</view>
<view class="ml-16">{{item.commentCount}}</view>
</view>
</view>
</view>

9
pages/garden/index.js
View File

@ -26,13 +26,8 @@ Page({
this.setData({list:[]})
return
}
const tmps = res.data.map(e => {
if (e.imgList.length >0){
e.pic = e.imgList[0].url
}
return e
})
this.setData({list:tmps})
this.setData({list:res.data})
}
})
},

74
pages/garden/index.wxml
View File

@ -28,69 +28,35 @@
<!-- list 数据 -->
<scroll-view scroll-y="{{true}}" wx:else>
<view class="padding">
<view class="mb-16 bo">必做任务 （2）</view>
<view wx:for="{{list}}" class="row padding mb-32" data-id="{{item.id}}" bind:tap="goInfo">
<view class="flex flex-center flex-justify-start">
<image class="pic" mode="aspectFill" wx:if="{{item.pic}}" src="{{item.pic}}"></image>
<image class="pic" mode="aspectFill" wx:else src="https://res.catter.cn/pub/2025/09/30/20250930143920286.png"></image>
<view style="margin-left:16rpx;" class="full-width">
<view class="flex flex-center flex-justify-between full-width">
<view class="font-16 bold">{{item.name}}</view>
<t-tag shape="round" theme="primary">立即完成</t-tag>
</view>
<view class="flex flex-center flex-justify-start mt-16 ">
<view class="font-12 grey">需要养护：</view>
<view class="mr-16 flex flex-center" wx:for="{{item.todayCares}}">
<t-icon name="{{item.icon}}" style="color: {{item.color}};"></t-icon>
<view wx:for="{{list}}" >
<view class="mb-16 bo">{{item.name}}</view>
<view wx:for="{{item.careList}}">
<view class="row padding mb-32" data-id="{{item.id}}" bind:tap="goInfo">
<view class="flex flex-center flex-justify-start">
<image class="pic" mode="aspectFill" wx:if="{{item.plant.imgList[0].url}}" src="{{item.plant.imgList[0].url}}"></image>
<image class="pic" mode="aspectFill" wx:else src="https://res.catter.cn/pub/2025/09/30/20250930143920286.png"></image>
<view style="margin-left:16rpx;" class="full-width">
<view class="flex flex-center flex-justify-between full-width">
<view class="font-16 bold">{{item.plant.name}}</view>
<t-tag wx:if="{{item.todayCare.status === 1}}" shape="round" theme="primary">立即完成</t-tag>
<t-tag wx:if="{{item.todayCare.status === 2}}" shape="round">已完成</t-tag>
<t-tag wx:if="{{item.todayCare.status === 3}}" shape="round" theme="primary">跳过</t-tag>
<t-tag wx:if="{{item.todayCare.status === 4}}" shape="round" theme="danger">已逾期{{item.todayCare.expireDays}}天</t-tag>
</view>
<view class="flex flex-center flex-justify-start mt-16 ">
<view class="mr-16 flex flex-center" wx:for="{{item.todayCares}}">
<t-icon name="{{item.icon}}" style="color: {{item.color}};"></t-icon>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 已逾期 -->
<view class="mb-16 bo">已逾期 （2）</view>
<view wx:for="{{list}}" class="row padding mb-32" data-id="{{item.id}}" bind:tap="goInfo">
<view class="flex flex-center flex-justify-start">
<image class="pic" mode="aspectFill" wx:if="{{item.pic}}" src="{{item.pic}}"></image>
<image class="pic" mode="aspectFill" wx:else src="https://res.catter.cn/pub/2025/09/30/20250930143920286.png"></image>
<view style="margin-left:16rpx;" class="full-width">
<view class="flex flex-center flex-justify-between full-width">
<view class="font-16 bold">{{item.name}}</view>
<t-tag shape="round" variant="outline" theme="danger">立即完成</t-tag>
</view>
<view class="flex flex-center flex-justify-start mt-16 ">
<view class="font-12 grey">需要养护：</view>
<view class="mr-16 flex flex-center" wx:for="{{item.todayCares}}">
<t-icon name="{{item.icon}}" style="color: {{item.color}};"></t-icon>
</view>
</view>
</view>
</view>
</view>
<!-- 今日已经完成 -->
<view class="mb-16 bo">今日已完成 （2）</view>
<view wx:for="{{list}}" class="row padding mb-32" data-id="{{item.id}}" bind:tap="goInfo">
<view class="flex flex-center flex-justify-start">
<image class="pic" mode="aspectFill" wx:if="{{item.pic}}" src="{{item.pic}}"></image>
<image class="pic" mode="aspectFill" wx:else src="https://res.catter.cn/pub/2025/09/30/20250930143920286.png"></image>
<view style="margin-left:16rpx;" class="full-width">
<view class="flex flex-center flex-justify-between full-width">
<view class="font-16 bold">{{item.name}}</view>
</view>
<view class="flex flex-center flex-justify-start mt-16 ">
<view class="font-12 grey">需要养护：</view>
<view class="mr-16 flex flex-center" wx:for="{{item.todayCares}}">
<t-icon name="{{item.icon}}" style="color: {{item.color}};"></t-icon>
</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>

132
pages/garden/info.wxml
View File

@ -16,76 +16,104 @@
</view>
<!-- info -->
<view style="background-color:white;margin-top: -100rpx;z-index: 99;position: absolute; width: 100vw; border-top-right-radius: 50rpx; border-top-left-radius: 50rpx;">
<view style="background-color:white;margin-top: -140rpx;z-index: 99;position: absolute; width: 100vw; border-top-right-radius: 50rpx; border-top-left-radius: 50rpx;">
<view class="flex flex-center flex-justify-between" style="padding: 52rpx 32rpx 32rpx 32rpx">
<view class="flex flex-center flex-justify-start">
<view>
<view class="font-16 bold ">{{info.name}}</view>
<view class="font-12 grey ml-16">种植于 {{info.plantTimeStr}} 已种植 {{info.plantDays}} 天</view>
<view class="font-12 grey mt-16">陪伴你第 {{info.plantDays}} 天 · 种植于 {{info.plantTimeStr}}</view>
</view>
<view style="width: 100rpx;" class="flex flex-center flex-justify-end" bind:tap="goEdit">
<t-icon name="setting"></t-icon>
</view>
</view>
</view>
<view class="padding" style="padding-bottom: 240rpx;">
<view>
<view class="row padding mt-32">
<view>养护事项</view>
<view class="flex flex-center flex-justify-between mt-16">
<view class="flex flex-justify-start flex-aligin-center mt-16">
<view class="font-14 bold ml-16">{{info.growthHabit}}</view>
</view>
<view style="padding-bottom: 240rpx;">
<view class="white-bg padding flex flex-center flex-justify-between">
<view class="font-12">
<view>
🌡 温度适宜：16–23°C
</view>
<view class="mt-16">
<view class="grid">
<view wx:for="{{info.todayCares}}" class="full-width" data-item="{{item}}" bind:tap="make">
<view style="background-color: {{item.color}}3C; border-radius: 16rpx; width: 100%;">
<view class="flex flex-center flex-col padding">
<view class="camera flex flex-center" style="background-color:{{item.color ? item.color+'3C':'red'}};">
<t-icon name="{{item.icon}}" class="primary" style="color:{{item.color ? item.color:'red'}};" size="24"></t-icon>
</view>
<view class="mt-16">{{item.name}}</view>
<view class="mt-16 font-12 grey">每{{item.period}}天一次</view>
<view wx:if="{{item.status === 2}}">
<view class="mt-16 font-12 primary">已完成</view>
</view>
<view wx:else>
<view class="primary mt-16 font-12 " style="color: #DD524C;" wx:if="{{item.status === 4}}">已逾期{{item.expireDays}}天</view>
<view class="primary mt-16 font-12 " wx:if="{{item.expireDays === 0}}">今天</view>
</view>
</view>
</view>
</view>
</view>
<view>
🌞 今日光照：良好
</view>
<view>
💧 湿度 适宜
</view>
</view>
<view class="row padding mt-32">
<view>养护记录</view>
<view class="flex flex-center flex-justify-between mt-16">
<view wx:if="{{info.careRecords.length > 0}}" class="full-width">
<view wx:for="{{info.careRecords}}" class="full-width">
<view class="flex full-width" >
<view style="width: 10rpx;" class="flex flex-center flex-col ">
<view class="dot flex flex-center" style="background-color: {{item.color}}3c;">
<t-icon name="{{item.icon}}" style="color: {{item.color}};" size="20"></t-icon>
</view>
<view style="width: 1px; background-color: #F6F6F6; height: 65%; margin-top: 10rpx;margin-bottom: 10rpx;"></view>
</view>
<view class="ml-32 mt-16 full-width padding" style="background-color: #F9FAFB; border-radius: 16rpx;margin-left:50rpx;">
<view>
<view>{{item.name}}</view>
<view class="font-12 grey mt-16 mb-16">{{item.careTimeStr}}</view>
<view wx:if="{{item.lastPeriod === 0}}" style="background-color: {{item.color}}3c; color: {{item.color}}; padding: 8rpx; border-radius: 30rpx;margin-top: 8rpx;font-size: 12px;">今天</view>
<view class="mt-16 font-12">{{item.remark}}</view>
<view>
<t-tag theme="primary" shape="round" variant="outline">记录此刻</t-tag>
</view>
</view>
<view class="padding">
<view>
<view class="row padding">
<view>养护事项</view>
<view class="flex flex-center flex-justify-between mt-16">
<view class="flex flex-justify-start flex-aligin-center mt-16">
<view class="font-14 bold ml-16">{{info.growthHabit}}</view>
</view>
</view>
<view>
<view class="grid">
<view wx:for="{{info.todayCares}}" class="full-width" data-item="{{item}}" bind:tap="make">
<view style="background-color: #FAFAFA; border-radius: 16rpx; width: 100%; border: {{item.color}}3C 1px solid;">
<view class="flex flex-center flex-col padding">
<view class="camera flex flex-center" style="background-color:{{item.color ? item.color+'3C':'red'}};">
<t-icon name="{{item.icon}}" class="primary" style="color:{{item.color ? item.color:'red'}};" size="24"></t-icon>
</view>
<view class="mt-16">{{item.name}}</view>
<view class="mt-16 font-12 grey">每{{item.period}}天一次</view>
<view wx:if="{{item.status === 2}}">
<view class="mt-16 font-12 primary">已完成</view>
</view>
<view wx:else>
<view class="primary mt-16 font-12 " style="color: #DD524C;" wx:if="{{item.status === 4}}">已逾期{{item.expireDays}}天</view>
<view class="primary mt-16 font-12 " wx:if="{{item.expireDays === 0}}">今天</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="row padding mt-32">
<view>养护记录</view>
<view class="flex flex-center flex-justify-between mt-16">
<view wx:if="{{info.careRecords.length > 0}}" class="full-width">
<view wx:for="{{info.careRecords}}" class="full-width">
<view class="flex full-width">
<view style="width: 10rpx;" class="flex flex-center flex-col ">
<view class="dot flex flex-center" style="background-color: {{item.color}}3c;">
<t-icon name="{{item.icon}}" style="color: {{item.color}};" size="20"></t-icon>
</view>
<view style="width: 1px; background-color: #F6F6F6; height: 65%; margin-top: 10rpx;margin-bottom: 10rpx;"></view>
</view>
<view class="ml-32 mt-16 full-width padding" style="background-color: #F9FAFB; border-radius: 16rpx;margin-left:50rpx;">
<view>
<view class="flex flex-center flex-justify-between">
<view>{{item.name}}</view>
<view class="font-12 grey ml-16">{{item.careTimeStr}}</view>
</view>
<view wx:if="{{item.lastPeriod === 0}}" style="background-color: {{item.color}}3c; color: {{item.color}}; padding: 8rpx; border-radius: 30rpx;margin-top: 8rpx;font-size: 12px;">今天</view>
<view class="mt-16 font-12">{{item.remark}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="row padding mt-32">
<view>植物知识卡</view>
</view>
<view class="row padding mt-32">
<view>成就徽章</view>
</view>
</view>
</view>
</view>

2
pages/garden/info.wxss
View File

@ -5,7 +5,7 @@ page {
.grid {
display: grid;
grid-template-columns: 50% 50%;
grid-template-columns: 47% 47%;
grid-row-gap: 16px;
grid-column-gap: 16px;
}

30
pages/index/index.js
View File

@ -36,7 +36,6 @@ Page({
* 生命周期函数--监听页面显示
*/
onShow() {
this.setData({leftList:[],rightList:[]})
this.fetchList()
},
fetchList() {
@ -49,50 +48,47 @@ Page({
if (res.data === null) {
return
}
this.setData({leftList:[],rightList:[]})
const tmps = res.data.list.map(e => {
e.pic = e.imgList[0].url
e.cover = e.imgList[0]
return e
})
this.addItems(tmps)
// this.setData({
// list: tmps
// })
this.setData({
list: tmps
})
}
})
},
addItems(newItems) {
newItems.forEach(item => {
let h1 = 0;
let h2 = 0;
newItems.forEach((item,index) => {
// 动态获取图片尺寸
wx.getImageInfo({
src: item.pic,
success: res => {
const scale = res.width / res.height;
const imgHeight = 345 / scale; // 假设宽度是 345rpx
if (this.data.leftHeight <= this.data.rightHeight) {
if (index % 2 === 0) {
this.data.leftList.push(item);
this.data.leftHeight += imgHeight;
h1 += item.cover.height / item.cover.width;
} else {
this.data.rightList.push(item);
this.data.rightHeight += imgHeight;
h2 += item.cover.height / item.cover.width;
}
this.setData({
leftList: this.data.leftList,
rightList: this.data.rightList,
});
}
});
});
},
goInfo(e){
console.log(e);
const id = e.currentTarget.dataset.id
wx.navigateTo({
url: '../index/info?id=' + id,
url: '../garden/info?id=' + id,
})
},

92
pages/index/index.wxml
View File

@ -10,37 +10,73 @@
<view class="bold mt-16 ml-16" style="font-size: 40px;">20 ℃ </view>
</view>
<view wx:if="{{leftList.length > 0}}">
<view>花园健康度 83 分， 今日需养护 2 株植物</view>
<view> 今日需养护 2 株植物</view>
<view class="mt-16 font-12" style="color: #E2B43F;">龟背竹长期未更新照片</view>
</view>
</view>
</view>
</view>
<view style="height: 89vh;" wx:if="{{leftList.length > 0}}">
<view style="height: 89vh;" wx:if="{{list.length > 0}}">
<view class="waterfall" scroll-y="{{true}}">
<view class="column">
<block wx:for="{{rightList}}" wx:key="id">
<view class="mb-32 card">
<image src="{{item.pic}}" mode="widthFix" class="img"></image>
<view style="padding: 0 16rpx 16rpx 16rpx ;">
<view class="font-16 bold">{{item.name}}</view>
<view class="grey font-12">今日无需养护</view>
<view class="grey font-12">上次养护：2 天前</view>
<view class="grey font-12">健康指数：83%</view>
<block wx:for="{{leftList}}" wx:key="id" >
<view class="card mb-16" data-id="{{item.id}}" bind:tap="goInfo">
<view class="img-wrapper" >
<image src="{{item.pic}}" mode="widthFix" class="img"></image>
<view class="overlay" style="margin-bottom: 26rpx;">
<view class="font-14 bold">{{item.name}}</view>
<view class="flex flex-center flex-justify-start mt-5">
<t-icon name="heart" size="12"></t-icon>
<text class="small ml-5">陪伴 · {{item.plantDays}} 天</text>
</view>
</view>
</view>
<view class="info font-12">
<view wx:if="{{item.todayCares}}" class="flex flex-center flex-justify-start">
<t-icon name="saturation" style="color: #4B84EE;"></t-icon>
<view class="ml-5 small">
今日需养护
</view>
</view>
<view wx:else>
<t-icon name="saturation" style="color: #4B84EE;"></t-icon>
<view class=" smallml-5">
今日无需养护
</view>
</view>
<view class="mt-5 grey small">上次养护：{{item.lastPeriod ? itme.lastPeriod:'-' }} 天前</view>
</view>
</view>
</block>
</view>
<view class="column">
<block wx:for="{{leftList}}" wx:key="id">
<view class="mb-32 card">
<image src="{{item.pic}}" mode="widthFix" class="img"></image>
<view style="padding: 0 16rpx 16rpx 16rpx ;">
<view class="font-16 bold">{{item.name}}</view>
<view class="grey font-12">今日无需养护</view>
<view class="grey font-12">上次养护：2 天前</view>
<view class="grey font-12">健康指数：83%</view>
<block wx:for="{{rightList}}" wx:key="id" >
<view class="card mb-16" data-id="{{item.id}}" bind:tap="goInfo">
<view class="img-wrapper" >
<image src="{{item.pic}}" mode="widthFix" class="img"></image>
<view class="overlay" style="margin-bottom: 26rpx;">
<view class="font-14 bold">{{item.name}}</view>
<view class="flex flex-center flex-justify-start mt-5">
<t-icon name="heart" size="12"></t-icon>
<text class="small ml-5">陪伴 · {{item.plantDays}} 天</text>
</view>
</view>
</view>
<view class="info font-12">
<view wx:if="{{item.todayCares}}" class="flex flex-center flex-justify-start">
<t-icon name="saturation" style="color: #4B84EE;"></t-icon>
<view class="ml-5 small">
今日需养护
</view>
</view>
<view wx:else>
<t-icon name="saturation" style="color: #4B84EE;"></t-icon>
<view class="ml-5 small">
今日无需养护
</view>
</view>
<view class="mt-5 grey small">上次养护：{{item.lastPeriod ? itme.lastPeriod:'-' }} 天前</view>
</view>
</view>
</block>
@ -52,7 +88,7 @@
<view class="empty flex flex-center flex-col">
</view>
<view class="mt-16 flex flex-center flex-col">
<view class="font-16 bold">欢迎来到你的秘密花园 🌿~</view>
<view class="font-14 bold">欢迎来到你的秘密花园 🌿~</view>
<view class="font-12 grey mt-16">从添加第一盆植物开始你的养花之旅吧</view>
</view>
<view style="width: 100vw; margin-top: 32rpx; " class="flex flex-center flex-col">
@ -61,20 +97,20 @@
<view class="mt-32 white-bg padding row">
<view class="flex flex-center font-12 grey">您还可以从以下热门植物中，免费领取</view>
<view class="grid mt-32">
<view wx:for="{{6}}">
<image src="https://www.xnbl.net/file/upload/202311/09/094651507814.jpg.middle.jpg" style="width:40vw;height: 40vw; border-top-left-radius: 12rpx;border-top-right-radius: 12rpx;" mode="widthFix"></image>
<view>
<view class="flex flex-center flex-justify-start">
<view class="font-16 bold">绿萝</view>
<t-tag theme="primary" class="ml-16" size="small">超好养</t-tag>
<view wx:for="{{6}}">
<image src="https://www.xnbl.net/file/upload/202311/09/094651507814.jpg.middle.jpg" style="width:40vw;height: 40vw; border-top-left-radius: 12rpx;border-top-right-radius: 12rpx;" mode="widthFix"></image>
<view>
<view class="flex flex-center flex-justify-start">
<view class="font-16 bold">绿萝</view>
<t-tag theme="primary" class="ml-16" size="small">超好养</t-tag>
</view>
<view class="font-12 grey">日照充足、超级好养</view>
</view>
<view class="font-12 grey">日照充足、超级好养</view>
</view>
</view>
</view>
</view>
</view>
</view>
<t-fab icon="add" bind:click="goAdd" aria-label="增加"></t-fab>
</view>

26
pages/index/index.wxss
View File

@ -15,18 +15,17 @@
.waterfall {
display: flex;
justify-content: space-between;
padding: 32rpx;
padding:16rpx;
}
.column {
width: 48%;
width: 49%;
}
.card {
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.06);
background-color: white;
border-radius: 12rpx;
}
.img {
@ -55,4 +54,25 @@
grid-row-gap: 16px;
grid-column-gap: 12px;
border-radius: 12rpx;
}
.img-wrapper { position: relative; }
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 6rpx 16rpx;
background: rgba(0,0,0,0.5);
color: #fff;
}
.small {
font-size: 22rpx;
opacity: 0.9;
}
.info {
padding-top: 0rpx;
padding-left: 16rpx;
padding-bottom: 16rpx;
}