108 lines
2.2 KiB
Vue
108 lines
2.2 KiB
Vue
<script setup>
|
|
// 点赞中心
|
|
import {
|
|
reactive,
|
|
ref,
|
|
computed,
|
|
} from 'vue';
|
|
//
|
|
import apex from '@/components/header/apex.vue'
|
|
// 类型列表
|
|
const typeList = reactive([{
|
|
img: '/static/indexLike1.png',
|
|
count: 1000,
|
|
name: '公开赞',
|
|
},
|
|
{
|
|
img: '/static/privateLike.png',
|
|
count: 20,
|
|
name: '隐私赞',
|
|
}
|
|
])
|
|
// 类型下标
|
|
const typeIndex = ref(0)
|
|
// 当前type
|
|
const typeCurrent = computed(() => {
|
|
let result = typeList[typeIndex.value]
|
|
return result
|
|
})
|
|
|
|
/**
|
|
* 点击下标
|
|
* @param {Object} index
|
|
*/
|
|
function handleTypeIndex(index) {
|
|
if (typeIndex.value === index) return
|
|
typeIndex.value = index
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="appbw">
|
|
<!-- 顶部导航 -->
|
|
<apex title="点赞统计">
|
|
<template #right>
|
|
<view class="typeList rows f26">
|
|
<view class="item ver mr10" :class="{'active': index === typeIndex}"
|
|
v-for="(item,index) in typeList" :key="index" @click="handleTypeIndex(index)">
|
|
<image class="wh26" :src="item.img" mode="aspectFit" />
|
|
<view class="name">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</apex>
|
|
|
|
<view class="count rows mtb30 mlr30 ptb20 plr30 f32 br20">
|
|
<view class="key">{{typeCurrent.name}}</view>
|
|
<view class="value b">{{typeCurrent.count}}</view>
|
|
</view>
|
|
|
|
<!-- 列表盒子 -->
|
|
<view class="listBox mtb30 plr30">
|
|
<view class="item df ptb20 plr10" v-for="(item,index) in 10" :key="index">
|
|
<view class="avatar">
|
|
<image class="wh100" src="/static/qq.png" mode="aspectFill" />
|
|
</view>
|
|
<view class="info f1 ml20">
|
|
<view class="nickname thd f30 c111">A**** {{typeCurrent.name}}了你</view>
|
|
<view class="time mt10 c999 f28">2024.12.08 20:00</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="nomore">暂无更多~</view>
|
|
|
|
<view class="fill" style="height: 30rpx;"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
// 类型列表
|
|
.typeList {
|
|
.item {
|
|
color: #999;
|
|
transition: .3s;
|
|
|
|
&.active {
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 点赞统计
|
|
.count {
|
|
background-color: #FAF8F8;
|
|
|
|
.value {
|
|
color: #F84259;
|
|
}
|
|
}
|
|
|
|
// 列表盒子
|
|
.listBox {
|
|
.item+.item {
|
|
border-top: 2rpx solid #eee;
|
|
}
|
|
}
|
|
</style> |