a
This commit is contained in:
Ubuntu
@@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<view class="official-page">
|
||||
<!-- 状态栏 -->
|
||||
<view class="status-bar"></view>
|
||||
|
||||
<!-- 标题栏 -->
|
||||
<view class="title-bar">
|
||||
<text class="title">公众号</text>
|
||||
</view>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<view class="content">
|
||||
<!-- 搜索栏 -->
|
||||
<view class="search-container">
|
||||
<view class="search-icon">🔍</view>
|
||||
<input class="search-input" placeholder="搜索公众号..." />
|
||||
</view>
|
||||
|
||||
<!-- 公众号列表 -->
|
||||
<view class="official-list">
|
||||
<view class="official-card" v-for="item in officialList" :key="item.id">
|
||||
<image class="official-avatar" :src="item.avatar" mode="aspectFill"></image>
|
||||
<view class="official-info">
|
||||
<text class="official-name">{{ item.name }}</text>
|
||||
<text class="official-desc">{{ item.description }}</text>
|
||||
<view class="official-stats">
|
||||
<text class="stat-item">📰 {{ item.articleCount }}篇文章</text>
|
||||
<text class="stat-item">👥 {{ item.followerCount }}关注</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="follow-btn" :class="{ followed: item.followed }">
|
||||
{{ item.followed ? '已关注' : '关注' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<view class="load-more" v-if="hasMore">
|
||||
<text>加载更多...</text>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" v-if="officialList.length === 0">
|
||||
<view class="empty-icon">📱</view>
|
||||
<text class="empty-text">暂无公众号数据</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
officialList: [
|
||||
{
|
||||
id: 1,
|
||||
name: '鸿洋',
|
||||
avatar: 'https://via.placeholder.com/60/6200EE/ffffff?text=H',
|
||||
description: '玩Android创始人，分享Android开发技术',
|
||||
articleCount: 128,
|
||||
followerCount: 12500,
|
||||
followed: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '郭霖',
|
||||
avatar: 'https://via.placeholder.com/60/03DAC6/ffffff?text=G',
|
||||
description: 'Android开发专家，《第一行代码》作者',
|
||||
articleCount: 96,
|
||||
followerCount: 9800,
|
||||
followed: false
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '扔物线',
|
||||
avatar: 'https://via.placeholder.com/60/FF9800/ffffff?text=R',
|
||||
description: 'HenCoder系列教程作者，UI绘制专家',
|
||||
articleCount: 72,
|
||||
followerCount: 8500,
|
||||
followed: true
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '代码家',
|
||||
avatar: 'https://via.placeholder.com/60/4CAF50/ffffff?text=D',
|
||||
description: '开源项目维护者，技术布道师',
|
||||
articleCount: 64,
|
||||
followerCount: 7200,
|
||||
followed: false
|
||||
}
|
||||
],
|
||||
hasMore: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadMore() {
|
||||
// 模拟加载更多数据
|
||||
setTimeout(() => {
|
||||
this.officialList = this.officialList.concat([
|
||||
{
|
||||
id: 5,
|
||||
name: '技术小黑屋',
|
||||
avatar: 'https://via.placeholder.com/60/9C27B0/ffffff?text=J',
|
||||
description: '分享Android性能优化经验',
|
||||
articleCount: 48,
|
||||
followerCount: 5600,
|
||||
followed: false
|
||||
}
|
||||
])
|
||||
this.hasMore = false
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
console.log('公众号页面加载')
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
if (this.hasMore) {
|
||||
this.loadMore()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.official-page {
|
||||
background: #F5F5F5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
height: 40px;
|
||||
background: #6200EE;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
background: #6200EE;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
background: white;
|
||||
border-radius: 24px;
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 12px;
|
||||
color: #6200EE;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
color: #212121;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.official-list {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.official-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.official-card:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.official-avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 30px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.official-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.official-name {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #212121;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.official-desc {
|
||||
font-size: 14px;
|
||||
color: #757575;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.official-stats {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.follow-btn {
|
||||
background: #6200EE;
|
||||
color: white;
|
||||
padding: 8px 20px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.follow-btn.followed {
|
||||
background: #E0E0E0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 60px;
|
||||
margin-bottom: 16px;
|
||||
color: #6200EE;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
color: #757575;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user