@ -0,0 +1,81 @@ | |||||
<template> | |||||
<view class="postList"> | |||||
<view class="item" v-for="(item, index) in list" | |||||
:key="index"> | |||||
<image src="/static/image/index/p1.png" mode="aspectFill"></image> | |||||
<view class="text"> | |||||
<view class="title"> | |||||
{{ item.title }} | |||||
</view> | |||||
<view class="createBy"> | |||||
<view class=""> | |||||
发布人:{{ item.createBy }} | |||||
</view> | |||||
<view class=""> | |||||
<uv-icon | |||||
size="26rpx" | |||||
name="thumb-up"></uv-icon> | |||||
100 | |||||
</view> | |||||
</view> | |||||
<view class="createTime"> | |||||
{{ item.title }} | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
name:"postList", | |||||
props : ['list'], | |||||
data() { | |||||
return { | |||||
}; | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.postList{ | |||||
.item{ | |||||
height: 200rpx; | |||||
width: 100%; | |||||
background-color: #fff; | |||||
overflow: hidden; | |||||
border-radius: 10rpx; | |||||
color: #555; | |||||
display: flex; | |||||
font-size: 24rpx; | |||||
margin: 30rpx 0; | |||||
image{ | |||||
width: 50%; | |||||
height: 100%; | |||||
} | |||||
.text{ | |||||
display: flex; | |||||
flex-direction: column; | |||||
padding: 16rpx; | |||||
width: 50%; | |||||
.title{ | |||||
font-size: 30rpx; | |||||
font-weight: 600; | |||||
color: #000; | |||||
} | |||||
.createBy{ | |||||
display: flex; | |||||
margin-top: auto; | |||||
margin-bottom: 10rpx; | |||||
justify-content: space-between; | |||||
&>view{ | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
</style> |
@ -0,0 +1,94 @@ | |||||
<template> | |||||
<view class="postList"> | |||||
<navbar | |||||
leftClick | |||||
@leftClick="$utils.navigateBack" | |||||
title="动态列表"/> | |||||
<view class="box"> | |||||
<view class="search"> | |||||
<view class="icon"> | |||||
<uv-icon | |||||
size="40rpx" | |||||
name="search"></uv-icon> | |||||
</view> | |||||
<input type="text" placeholder="搜索相关..."/> | |||||
<view class="text"> | |||||
搜索 | |||||
</view> | |||||
</view> | |||||
<postList :list="postList"/> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
import postList from '@/components/post/postList.vue' | |||||
export default { | |||||
components : { | |||||
postList | |||||
}, | |||||
data() { | |||||
return { | |||||
postList : [ | |||||
{ | |||||
title : "这是一条动态", | |||||
createTime : '2024-08-22 09:00:00', | |||||
createBy : "小飞", | |||||
}, | |||||
{ | |||||
title : "这是一条动态", | |||||
createTime : '2024-08-22 09:00:00', | |||||
createBy : "小飞", | |||||
}, | |||||
{ | |||||
title : "这是一条动态", | |||||
createTime : '2024-08-22 09:00:00', | |||||
createBy : "小飞", | |||||
}, | |||||
{ | |||||
title : "这是一条动态", | |||||
createTime : '2024-08-22 09:00:00', | |||||
createBy : "小飞", | |||||
}, | |||||
], | |||||
} | |||||
}, | |||||
methods: { | |||||
leftClick(){ | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.postList{ | |||||
.box{ | |||||
padding: 30rpx; | |||||
.search{ | |||||
background-color: #fff; | |||||
height: 70rpx; | |||||
width: 100%; | |||||
margin: 20rpx 0; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
font-size: 28rpx; | |||||
border-radius: 10rpx; | |||||
.icon{ | |||||
margin: 0 20rpx; | |||||
} | |||||
input{ | |||||
} | |||||
.text{ | |||||
margin-left: auto; | |||||
margin-right: 20rpx; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
</style> |