@ -1,30 +1,96 @@ | |||
<template> | |||
<view> | |||
{{ count }} | |||
<tabber :select="1"/> | |||
<view class="publish"> | |||
<view class="top"> | |||
<view class="title"> | |||
发布 | |||
</view> | |||
<view class="type"> | |||
<view class="post" | |||
@click="$utils.navigateTo('/publish/publishPost')"> | |||
发布帖子 | |||
<image src="/static/image/publish/p2.png" mode=""></image> | |||
</view> | |||
<view class="" | |||
@click="$utils.navigateTo('/publish/actorRelease')"> | |||
发布名片 | |||
<image src="/static/image/publish/p1.png" mode=""></image> | |||
</view> | |||
</view> | |||
</view> | |||
<tabber :select="1" /> | |||
</view> | |||
</template> | |||
<script> | |||
import tabber from '@/components/base/tabbar.vue' | |||
import { mapState } from 'vuex' | |||
import { | |||
mapState | |||
} from 'vuex' | |||
export default { | |||
components : { | |||
components: { | |||
tabber | |||
}, | |||
computed : { | |||
computed: { | |||
...mapState(['count']), | |||
}, | |||
data() { | |||
return { | |||
}; | |||
} | |||
} | |||
</script> | |||
<style lang="scss"> | |||
.publish { | |||
.top { | |||
height: 600rpx; | |||
background-image: $uni-linear-gradient-bg-color; | |||
padding: 0 20rpx; | |||
padding-top: calc(var(--status-bar-height) + 100rpx); | |||
.title { | |||
display: flex; | |||
color: #fff; | |||
justify-content: space-between; | |||
</style> | |||
&>view { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
} | |||
} | |||
.type{ | |||
display: flex; | |||
justify-content: center; | |||
margin-top: 30rpx; | |||
&>view{ | |||
width: 310rpx; | |||
height: 120rpx; | |||
background-color: #fff; | |||
margin: 10rpx; | |||
position: relative; | |||
border-radius: 20rpx; | |||
overflow: hidden; | |||
color: #fdcc4b; | |||
align-items: center; | |||
padding: 20rpx; | |||
display: flex; | |||
font-weight: 900; | |||
image{ | |||
position: absolute; | |||
bottom: 0; | |||
right: 0; | |||
width: 100rpx; | |||
height: 100rpx; | |||
} | |||
} | |||
.post{ | |||
background-color: #b7a6f6; | |||
color: #603af5; | |||
} | |||
} | |||
} | |||
</style> |
@ -0,0 +1,132 @@ | |||
<template> | |||
<view class="postDetail"> | |||
<navbar | |||
leftClick | |||
@leftClick="$utils.navigateBack"/> | |||
<view class="swipe"> | |||
<uv-swiper | |||
:list="list" | |||
keyName="url" | |||
indicator | |||
height="320rpx"></uv-swiper> | |||
</view> | |||
<view class="box"> | |||
<view class="title"> | |||
{{ item.title }} | |||
</view> | |||
<view class="createBy"> | |||
<view class=""> | |||
发布人:{{ item.createBy }} | |||
</view> | |||
<view class=""> | |||
发布时间:{{ item.createTime }} | |||
</view> | |||
</view> | |||
<view class="controls"> | |||
<view class=""> | |||
<uv-icon | |||
size="35rpx" | |||
name="bell"></uv-icon> | |||
举报 | |||
</view> | |||
<view class=""> | |||
<uv-icon | |||
size="35rpx" | |||
name="thumb-up"></uv-icon> | |||
点赞 | |||
</view> | |||
<view class=""> | |||
<uv-icon | |||
size="35rpx" | |||
name="share"></uv-icon> | |||
分享 | |||
</view> | |||
<view class=""> | |||
<uv-icon | |||
size="35rpx" | |||
name="thumb-down"></uv-icon> | |||
踩 | |||
</view> | |||
</view> | |||
<view class="content"> | |||
<uv-parse :content="item.content"></uv-parse> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
list : [ | |||
{ | |||
url : '/static/image/index/123123.png' | |||
}, | |||
{ | |||
url : '/static/image/index/a1.png' | |||
}, | |||
], | |||
item : { | |||
title : "这是一条动态", | |||
createTime : '2024-08-22 09:00:00', | |||
createBy : "小飞", | |||
content : '这是一条动态这是一条动态这是一条动态这是一条动态这是一条动态这是一条动态这是一条动态这是一条动态这是一条动态这是一条动态这是一条动态', | |||
}, | |||
} | |||
}, | |||
methods: { | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.postDetail{ | |||
.box{ | |||
padding: 20rpx; | |||
.title{ | |||
font-size: 30rpx; | |||
font-weight: 600; | |||
color: #000; | |||
} | |||
.createBy{ | |||
display: flex; | |||
margin-top: auto; | |||
margin-bottom: 10rpx; | |||
font-size: 26rpx; | |||
margin-top: 20rpx; | |||
color: #555; | |||
&>view{ | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
padding-right: 20rpx; | |||
} | |||
} | |||
.controls{ | |||
display: flex; | |||
margin-top: 30rpx; | |||
&>view{ | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
margin-right: 40rpx; | |||
} | |||
} | |||
.content{ | |||
margin-top: 30rpx; | |||
color: #777; | |||
} | |||
} | |||
} | |||
</style> |