<template>
<view>
<uni-nav-bar left-icon="back" left-text="返回" statusBar="true" title="标题"></uni-nav-bar>
<post></post>
</view>
</template>
下面这个是post的代码
<template>
<view class="postContainer">
<image class="firstImg" src="../../static/img/example.png" mode="aspectFit"></image>
<view class="detail">
<view>{{title}}</view>
<view class="content">{{content}}</view>
<view>{{position}}</view>
<view>{{time}}</view>
<view>{{existPeople}}/</view>
<view>{{people}}</view>
</view>
</view>
</template>
<script>
export default {
name:"post",
data() {
return {
title: "今天去哪里玩",
content: "内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
position: "中山公园龙之梦",
time: "2023-05-01 15:20",
existPeople: 2,
people: 3
};
}
}
</script>
<style>
.postContainer {
display: flex;
width: 100%;
height: 180px;
}
.firstImg {
width: 50%;
height: 100%;
}
.detail {
width: 50%;
}
.content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>