87 lines
2.3 KiB
Vue
87 lines
2.3 KiB
Vue
<template>
|
||
<view class="content column">
|
||
<view class="row" style="width: 90%; margin: 100rpx auto 0; justify-content: space-between;">
|
||
<image src="/static/back.png" style="width: 40rpx; height: 40rpx;" @click="goBack()" mode=""></image>
|
||
<text style="font-size: 30rpx;">我的消息</text>
|
||
<view style="width: 40rpx;"></view>
|
||
</view>
|
||
|
||
<view class="row" style="width: 100%; margin-top: 40rpx; margin-left: 56rpx;">
|
||
<view class="center" @click="clickTab(index)"
|
||
style="margin-right: 20rpx; width: 134rpx; height: 48rpx; font-size: 26rpx; border-radius: 34rpx;"
|
||
:style="setBgColor(index)" v-for="(item,index) in teabList">
|
||
{{item}}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="" style="width: 100%; height: 1rpx; background-color: #EBEBEB; margin-top: 20rpx;"></view>
|
||
|
||
<view class="column"
|
||
style="width: 100%; flex: 1; margin-top: 20rpx; overflow-y: auto;">
|
||
<view class="column" v-for="(item,index) in messageList"
|
||
style="width: 686rpx; margin: 0rpx auto 30rpx; background-color: white; border-radius: 32rpx; ">
|
||
<text style="font-size: 32rpx; margin-top: 22rpx; margin-left: 30rpx;">标题标题标题</text>
|
||
|
||
<text
|
||
style="font-size: 32rpx; margin-top: 10rpx; margin-left: 30rpx;">正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文
|
||
正文正文正文正文正文正文正文</text>
|
||
|
||
<text
|
||
style="font-size: 32rpx; margin-top: 70rpx; margin-left: auto; margin-right: 18rpx; margin-bottom: 10rpx;">2025//1/1
|
||
11：12</text>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentIndex: 0,
|
||
teabList: ["全部", "私信"],
|
||
messageList: [1, 2, 3, 4, 5]
|
||
}
|
||
},
|
||
methods: {
|
||
// 返回上一页
|
||
goBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
|
||
setBgColor(index) {
|
||
if (this.currentIndex == index) {
|
||
return {
|
||
backgroundColor: '#C4FFDF',
|
||
color: '#00AC4E',
|
||
border: 'solid 1rpx #00AC4E',
|
||
}
|
||
} else {
|
||
return {
|
||
backgroundColor: '#FFFFFF',
|
||
color: '#000000',
|
||
border: 'solid 1rpx #EBEBEB',
|
||
}
|
||
}
|
||
},
|
||
|
||
clickTab(index) {
|
||
this.currentIndex = index;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background: #F7F7F7;
|
||
}
|
||
</style> |