4 changed files with 242 additions and 15 deletions
Split View
Diff Options
-
+93 -0components/post/publishList.vue
-
+9 -4pages/index/center.vue
-
+138 -9pages/mine/releaseRecord.vue
-
+2 -2utils/index.js
+ 93
- 0
components/post/publishList.vue
View File
| @ -0,0 +1,93 @@ | |||
| <template> | |||
| <view class="publishList"> | |||
| <view class="item" v-for="(item, index) in list" | |||
| @click="$utils.navigateTo('/publish/postDetail?id=123')" | |||
| :key="index"> | |||
| <image src="/static/image/center/1.png" style="width: 40%"></image> | |||
| <view class="text"> | |||
| <view class="title"> | |||
| {{ item.title }} | |||
| </view> | |||
| <view class="createBy"> | |||
| <view class=""> | |||
| 是否置顶：{{ item.createBy }} | |||
| </view> | |||
| </view> | |||
| <view class="isPay"> | |||
| <view class=""> | |||
| 是否付费：{{ item.isPay }} | |||
| </view> | |||
| </view> | |||
| <view class="createTime"> | |||
| 发布时间：{{ item.createTime }} | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name:"postList", | |||
| props : ['list'], | |||
| data() { | |||
| return { | |||
| }; | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .publishList{ | |||
| .item{ | |||
| height: 200rpx; | |||
| width: 100%; | |||
| background-color: #fff; | |||
| overflow: hidden; | |||
| border-radius: 10rpx; | |||
| color: #777; | |||
| 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; | |||
| } | |||
| } | |||
| .isPay{ | |||
| display: flex; | |||
| margin-top: auto; | |||
| margin-bottom: 10rpx; | |||
| color: #7395f4; | |||
| justify-content: space-between; | |||
| &>view{ | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
+ 9
- 4
pages/index/center.vue
View File
+ 138
- 9
pages/mine/releaseRecord.vue
View File
| @ -1,22 +1,151 @@ | |||
| <template> | |||
| <view class="releaseRecord"> | |||
| <view class="releaseRecord"> | |||
| <!--顶部导航栏--> | |||
| <navbar | |||
| leftClick | |||
| @leftClick="$utils.navigateBack" | |||
| title="我的发布"/> | |||
| </view> | |||
| <!--发布记录列表--> | |||
| <view class="frame"> | |||
| <!--标题--> | |||
| <view class="title"> | |||
| <span>我的发布</span> | |||
| </view> | |||
| <!--标签栏--> | |||
| <view class="tabbar"> | |||
| <view class="tabbarItemActive" @click="getData('all')"> | |||
| <span class="1==1 ? 'active' : ''">全部</span> | |||
| </view> | |||
| <view class="tabbarItemNoActive" @click="getData('all')"> | |||
| <span class="1==1 ? 'active' : ''">贴子</span> | |||
| </view> | |||
| <view class="tabbarItemNoActive" @click="getData('all')"> | |||
| <span class="1==1 ? 'active' : ''">名片</span> | |||
| </view> | |||
| </view> | |||
| <!--发布列表--> | |||
| <view style="" class="publishListClass"> | |||
| <PublishList :list="publishList"/> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| data() { | |||
| return { | |||
| }; | |||
| } | |||
| } | |||
| import PublishList from "@/components/post/publishList.vue"; | |||
| export default { | |||
| components: { | |||
| PublishList | |||
| }, | |||
| data() { | |||
| return { | |||
| publishList: [ | |||
| { | |||
| title: "这是一条动态", | |||
| createTime: '2024-08-22 09:00:00', | |||
| createBy: "小飞", | |||
| isPay: "是" | |||
| }, | |||
| { | |||
| title: "这是一条动态", | |||
| createTime: '2024-08-22 09:00:00', | |||
| createBy: "小飞", | |||
| isPay: "是" | |||
| }, | |||
| { | |||
| title: "这是一条动态", | |||
| createTime: '2024-08-22 09:00:00', | |||
| createBy: "小飞", | |||
| isPay: "是" | |||
| }, | |||
| { | |||
| title: "这是一条动态", | |||
| createTime: '2024-08-22 09:00:00', | |||
| createBy: "小飞", | |||
| isPay: "是" | |||
| }, | |||
| { | |||
| title: "这是一条动态", | |||
| createTime: '2024-08-22 09:00:00', | |||
| createBy: "小飞", | |||
| isPay: "是" | |||
| }, | |||
| { | |||
| title: "这是一条动态", | |||
| createTime: '2024-08-22 09:00:00', | |||
| createBy: "小飞", | |||
| isPay: "是" | |||
| }, | |||
| { | |||
| title: "这是一条动态", | |||
| createTime: '2024-08-22 09:00:00', | |||
| createBy: "小飞", | |||
| isPay: "是" | |||
| }, | |||
| { | |||
| title: "这是一条动态", | |||
| createTime: '2024-08-22 09:00:00', | |||
| createBy: "小飞", | |||
| isPay: "是" | |||
| }, | |||
| ], | |||
| }; | |||
| }, | |||
| methods: { | |||
| getData(type){ | |||
| console.log(type,"点击了标签栏") | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| * { | |||
| box-sizing: border-box; | |||
| margin: 0; | |||
| padding: 0; | |||
| } | |||
| .frame { | |||
| width: 100%; | |||
| height: calc(100vh - 220rpx); | |||
| border: 1px solid red; | |||
| padding: 28rpx 0 0 50rpx; | |||
| .title { | |||
| font-size: 38rpx; | |||
| color: #333; | |||
| font-weight: 700 | |||
| } | |||
| .tabbar { | |||
| display: flex; | |||
| justify-content: flex-start; | |||
| gap: 20rpx; | |||
| margin-top: 40rpx; | |||
| .tabbarItemActive { | |||
| padding: 10rpx 40rpx; | |||
| background: $uni-linear-gradient-color; | |||
| -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/ | |||
| -webkit-text-fill-color: transparent; /*给文字设置成透明*/ | |||
| } | |||
| .tabbarItemNoActive { | |||
| padding: 10rpx 40rpx; | |||
| background-color: #eaeaeb; | |||
| color: #777777; | |||
| border-radius: 20rpx; | |||
| } | |||
| } | |||
| .publishListClass { | |||
| margin-top: 10rpx; | |||
| height: calc(100vh - 200rpx); | |||
| overflow: auto; | |||
| } | |||
| } | |||
| </style> | |||