feat: udpate ui
This commit is contained in:
Rogee
@@ -30,37 +30,42 @@ const showArticle = (article) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-200 cursor-pointer"
|
||||
<div class="bg-white shadow overflow-hidden hover:shadow-md transition-shadow duration-200 cursor-pointer flex h-32"
|
||||
@click="showArticle(article)">
|
||||
<!-- Left side - Image -->
|
||||
<div v-if="article.head_images && article.head_images.length > 0"
|
||||
class="relative w-full h-24 bg-gray-100 overflow-hidden">
|
||||
class="relative w-32 flex-shrink-0 bg-gray-100 overflow-hidden">
|
||||
<img :src="article.head_images[0]"
|
||||
class="absolute inset-0 w-full object-cover transition-transform duration-300 hover:scale-105"
|
||||
class="absolute inset-0 h-full w-full object-cover transition-transform duration-300 hover:scale-105"
|
||||
:alt="article.title" />
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-transparent to-black/20"></div>
|
||||
</div>
|
||||
<div class="p-4 space-y-3">
|
||||
<h3 class="text-lg font-semibold text-gray-800 line-clamp-2">
|
||||
{{ article.title }}
|
||||
</h3>
|
||||
|
||||
<p v-if="article.description" class="text-gray-600 text-sm line-clamp-2">
|
||||
{{ article.description }}
|
||||
</p>
|
||||
<!-- Right side - Content -->
|
||||
<div class="flex-1 p-4 flex flex-col justify-between min-w-0">
|
||||
<div class="space-y-2">
|
||||
<h3 class="text-lg font-semibold text-gray-800 line-clamp-2">
|
||||
{{ article.title }}
|
||||
</h3>
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span v-for="tag in article.tags" :key="tag"
|
||||
class="px-2 py-1 text-xs bg-blue-50 text-blue-600 rounded-full">
|
||||
{{ tag }}
|
||||
</span>
|
||||
<p v-if="article.description" class="text-gray-600 text-sm line-clamp-2">
|
||||
{{ article.description }}
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span v-for="tag in article.tags" :key="tag"
|
||||
class="px-2 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between pt-2 text-sm">
|
||||
<div class="flex items-center justify-between pt-1 text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-500">
|
||||
<AiOutlineEye class="w-4 h-4" />
|
||||
<span>{{ article.view_count || 0 }}</span>
|
||||
</div>
|
||||
<div class="text-orange-600 font-mono text-xl" v-if="!article.bought">
|
||||
<div class="text-orange-600 font-mono text-lg" v-if="!article.bought">
|
||||
¥{{ discountPrice }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -73,17 +73,13 @@ onMounted(() => {
|
||||
<div class="flex-none bg-white border-b border-gray-200 sticky top-0 z-40 shadow-sm">
|
||||
<div class="p-4">
|
||||
<div class="relative">
|
||||
<input type="search"
|
||||
v-model="searchInput"
|
||||
@keyup="handleKeyup"
|
||||
placeholder="搜索曲谱..."
|
||||
class="w-full pl-10 pr-4 py-2.5 text-gray-600 bg-gray-50 border border-gray-200 rounded-full
|
||||
<input type="search" v-model="searchInput" @keyup="handleKeyup" placeholder="搜索曲谱..." class="w-full pl-10 pr-4 py-2.5 text-gray-600 bg-gray-50 border border-gray-200 rounded-full
|
||||
focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
|
||||
placeholder:text-gray-400">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
@@ -91,16 +87,12 @@ onMounted(() => {
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<div class="container max-w-2xl mx-auto p-4">
|
||||
<div class="container max-w-2xl mx-auto py-4">
|
||||
<div class="grid gap-4">
|
||||
<ArticleListItem v-for="article in articles"
|
||||
:key="article.id"
|
||||
:article="article" />
|
||||
<ArticleListItem v-for="article in articles" :key="article.id" :article="article" />
|
||||
</div>
|
||||
|
||||
<div ref="loadingTrigger"
|
||||
class="py-4 text-center"
|
||||
v-show="hasMore || loading">
|
||||
<div ref="loadingTrigger" class="py-4 text-center" v-show="hasMore || loading">
|
||||
<div v-if="loading"
|
||||
class="w-8 h-8 mx-auto border-2 border-gray-200 border-t-primary-500 rounded-full animate-spin">
|
||||
</div>
|
||||
@@ -109,13 +101,11 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!hasMore && articles.length > 0"
|
||||
class="text-center text-gray-500 py-4">
|
||||
<div v-if="!hasMore && articles.length > 0" class="text-center text-gray-500 py-4">
|
||||
没有更多曲谱了
|
||||
</div>
|
||||
|
||||
<div v-if="!hasMore && articles.length === 0"
|
||||
class="text-center text-gray-500 py-12">
|
||||
<div v-if="!hasMore && articles.length === 0" class="text-center text-gray-500 py-12">
|
||||
暂无曲谱
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -41,9 +41,7 @@ const menuGroups = [
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<div class="flex items-center gap-4 p-6">
|
||||
<div class="w-20 h-20 rounded-full border-2 border-white shadow-lg overflow-hidden bg-gray-100">
|
||||
<img :src="userInfo.avatar"
|
||||
:alt="userInfo.username"
|
||||
class="w-full h-full object-cover" />
|
||||
<img :src="userInfo.avatar" :alt="userInfo.username" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
@@ -62,20 +60,16 @@ const menuGroups = [
|
||||
</div>
|
||||
|
||||
<!-- 菜单列表 -->
|
||||
<div class="max-w-2xl mx-auto px-4 py-6 space-y-4">
|
||||
<div v-for="(group, groupIndex) in menuGroups"
|
||||
:key="groupIndex"
|
||||
<div class="max-w-2xl mx-auto px-4 py-6 space-y-4 hidden">
|
||||
<div v-for="(group, groupIndex) in menuGroups" :key="groupIndex"
|
||||
class="bg-white rounded-xl overflow-hidden shadow-sm">
|
||||
<div class="px-4 py-2 text-sm font-medium text-gray-500 bg-gray-50">
|
||||
{{ group.title }}
|
||||
</div>
|
||||
<div class="divide-y divide-gray-100">
|
||||
<div v-for="(item, itemIndex) in group.items"
|
||||
:key="itemIndex"
|
||||
class="flex items-center px-4 py-3.5 hover:bg-gray-50 active:bg-gray-100
|
||||
<div v-for="(item, itemIndex) in group.items" :key="itemIndex" class="flex items-center px-4 py-3.5 hover:bg-gray-50 active:bg-gray-100
|
||||
cursor-pointer transition-colors duration-150">
|
||||
<component :is="item.icon"
|
||||
class="mr-3 text-xl text-gray-500" />
|
||||
<component :is="item.icon" class="mr-3 text-xl text-gray-500" />
|
||||
<span class="flex-1 text-gray-700">{{ item.label }}</span>
|
||||
<span class="text-gray-400">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user