kjqwdw/pixiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

移动端样式优化

Browse Source
This commit is contained in:
kjqwer
2025-10-09 08:32:25 +08:00
parent 5eafc6dbc8
commit f32feafd17
3 changed files with 577 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/views/ArtistView.vue
+223 -196
View File
@@ -31,12 +31,13 @@
</div> </div>
<div class="artist-actions"> <div class="artist-actions">
<button @click="handleFollow" class="btn btn-primary"> <button @click="handleFollow" class="btn btn-primary artist-follow-btn">
{{ artist.is_followed ? '取消关注' : '关注' }} {{ artist.is_followed ? '取消关注' : '关注' }}
</button> </button>
<div class="download-section"> <div class="download-section">
<div class="download-controls">
<div class="download-input-group"> <div class="download-input-group">
<label for="downloadType">下载方式:</label> <label for="downloadType" class="download-label">下载方式:</label>
<select v-model="downloadType" id="downloadType" class="download-select" <select v-model="downloadType" id="downloadType" class="download-select"
@change="handleDownloadTypeChange"> @change="handleDownloadTypeChange">
<option value="custom">自定义数量</option> <option value="custom">自定义数量</option>
@@ -47,14 +48,14 @@
<!-- 自定义数量输入 --> <!-- 自定义数量输入 -->
<div v-if="downloadType === 'custom'" class="download-input-group"> <div v-if="downloadType === 'custom'" class="download-input-group">
<label for="customLimit">数量:</label> <label for="customLimit" class="download-label">数量:</label>
<input v-model="customLimit" type="number" id="customLimit" class="download-input" :min="1" :max="9999" <input v-model="customLimit" type="number" id="customLimit" class="download-input" :min="1" :max="9999"
placeholder="输入数量" /> placeholder="输入数量" />
</div> </div>
<!-- 按页数选择 --> <!-- 按页数选择 -->
<div v-if="downloadType === 'pages'" class="download-input-group"> <div v-if="downloadType === 'pages'" class="download-input-group">
<label for="pageLimit">页数:</label> <label for="pageLimit" class="download-label">页数:</label>
<select v-model="pageLimit" id="pageLimit" class="download-select"> <select v-model="pageLimit" id="pageLimit" class="download-select">
<option value="1">1页 (30个)</option> <option value="1">1页 (30个)</option>
<option value="2">2页 (60个)</option> <option value="2">2页 (60个)</option>
@@ -65,8 +66,9 @@
<option value="50">50页 (1500个)</option> <option value="50">50页 (1500个)</option>
</select> </select>
</div> </div>
</div>
<button @click="handleDownloadAll" class="btn btn-secondary" :disabled="downloading || !isDownloadValid"> <button @click="handleDownloadAll" class="btn btn-secondary download-btn" :disabled="downloading || !isDownloadValid">
{{ downloading ? '下载中...' : '下载作品' }} {{ downloading ? '下载中...' : '下载作品' }}
</button> </button>
</div> </div>
@@ -707,14 +709,8 @@ onMounted(async () => {
<style scoped> <style scoped>
.artist-page { .artist-page {
min-height: 100vh; min-height: 100vh;
background: #f8fafc; background: var(--color-bg-secondary);
padding: 2rem 0; padding: var(--spacing-2xl) 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
} }
.loading-section, .loading-section,
@@ -727,13 +723,13 @@ onMounted(async () => {
.success-message { .success-message {
position: fixed; position: fixed;
top: 2rem; top: var(--spacing-2xl);
right: 2rem; right: var(--spacing-2xl);
background: #10b981; background: var(--color-success);
color: white; color: white;
padding: 1rem 1.5rem; padding: var(--spacing-lg) var(--spacing-xl);
border-radius: 0.5rem; border-radius: var(--radius-lg);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-lg);
z-index: 1000; z-index: 1000;
animation: slideIn 0.3s ease-out; animation: slideIn 0.3s ease-out;
} }
@@ -741,7 +737,7 @@ onMounted(async () => {
.success-content { .success-content {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--spacing-sm);
} }
.success-icon { .success-icon {
@@ -755,29 +751,32 @@ onMounted(async () => {
transform: translateX(100%); transform: translateX(100%);
opacity: 0; opacity: 0;
} }
to { to {
transform: translateX(0); transform: translateX(0);
opacity: 1; opacity: 1;
} }
} }
/* 作者信息卡片 */
.artist-header { .artist-header {
background: white; background: var(--color-bg-primary);
border-radius: 1rem; border-radius: var(--radius-2xl);
padding: 2rem; padding: var(--spacing-2xl);
margin-bottom: 2rem; margin-bottom: var(--spacing-2xl);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-md);
border: 1px solid var(--color-border);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
gap: 2rem; gap: var(--spacing-2xl);
} }
.artist-profile { .artist-profile {
display: flex; display: flex;
gap: 1.5rem; gap: var(--spacing-xl);
align-items: flex-start; align-items: flex-start;
flex: 1;
min-width: 0; /* 允许内容收缩 */
} }
.artist-avatar { .artist-avatar {
@@ -785,176 +784,152 @@ onMounted(async () => {
height: 5rem; height: 5rem;
border-radius: 50%; border-radius: 50%;
object-fit: cover; object-fit: cover;
flex-shrink: 0;
} }
.artist-info { .artist-info {
flex: 1; flex: 1;
min-width: 0; /* 允许文本截断 */
} }
.artist-name { .artist-name {
font-size: 2rem; font-size: 2rem;
font-weight: 700; font-weight: 700;
color: #1f2937; color: var(--color-text-primary);
margin: 0 0 0.5rem 0; margin: 0 0 var(--spacing-sm) 0;
word-break: break-word;
} }
.artist-account { .artist-account {
color: #6b7280; color: var(--color-text-secondary);
font-size: 1.125rem; font-size: 1.125rem;
margin: 0 0 1rem 0; margin: 0 0 var(--spacing-lg) 0;
word-break: break-word;
} }
.artist-comment { .artist-comment {
color: #374151; color: var(--color-text-primary);
line-height: 1.6; line-height: 1.6;
margin: 0; margin: 0;
word-break: break-word;
} }
/* 作者操作区域 */
.artist-actions { .artist-actions {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: var(--spacing-lg);
flex-shrink: 0;
min-width: 200px;
} }
.artist-follow-btn {
white-space: nowrap;
}
/* 下载区域 */
.download-section { .download-section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: var(--spacing-md);
}
.download-controls {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
} }
.download-input-group { .download-input-group {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--spacing-sm);
flex-wrap: wrap;
} }
.download-input-group label { .download-label {
font-size: 0.875rem; font-size: 0.875rem;
color: #374151; color: var(--color-text-primary);
font-weight: 500; font-weight: 500;
white-space: nowrap; white-space: nowrap;
flex-shrink: 0;
} }
.download-select { .download-select,
padding: 0.5rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
background: white;
font-size: 0.875rem;
color: #374151;
min-width: 100px;
}
.download-input { .download-input {
padding: 0.5rem 0.75rem; padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid #d1d5db; border: 1px solid var(--color-border);
border-radius: 0.375rem; border-radius: var(--radius-md);
background: white; background: var(--color-bg-primary);
font-size: 0.875rem; font-size: 0.875rem;
color: #374151; color: var(--color-text-primary);
min-width: 100px; min-width: 100px;
transition: border-color 0.2s; transition: border-color var(--transition-normal);
} }
.download-input:focus { .download-input:focus {
outline: none; outline: none;
border-color: #3b82f6; border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); box-shadow: 0 0 0 3px var(--color-primary-light);
} }
.btn { .download-btn {
display: inline-flex; white-space: nowrap;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
border: none;
cursor: pointer;
font-size: 1rem;
min-width: 120px;
} }
.btn:disabled { /* 作品区域 */
opacity: 0.6;
cursor: not-allowed;
}
.btn-primary {
background: #3b82f6;
color: white;
}
.btn-primary:hover:not(:disabled) {
background: #2563eb;
}
.btn-secondary {
background: #f3f4f6;
color: #374151;
border: 1px solid #d1d5db;
}
.btn-secondary:hover:not(:disabled) {
background: #e5e7eb;
}
.artworks-section { .artworks-section {
background: white; background: var(--color-bg-primary);
border-radius: 1rem; border-radius: var(--radius-2xl);
padding: 2rem; padding: var(--spacing-2xl);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-md);
position: relative; border: 1px solid var(--color-border);
} }
.section-header { .section-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 2rem; margin-bottom: var(--spacing-2xl);
} }
.section-header h2 { .section-header h2 {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 600; font-weight: 600;
color: #1f2937; color: var(--color-text-primary);
margin: 0; margin: 0;
} }
.header-controls { .header-controls {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: var(--spacing-lg);
} }
.artwork-filters { .artwork-filters {
display: flex; display: flex;
gap: 1rem; gap: var(--spacing-lg);
} }
.filter-select { .filter-select {
padding: 0.5rem 0.75rem; padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid #d1d5db; border: 1px solid var(--color-border);
border-radius: 0.375rem; border-radius: var(--radius-md);
background: white; background: var(--color-bg-primary);
font-size: 0.875rem; font-size: 0.875rem;
color: #374151; color: var(--color-text-primary);
} }
/* 顶部分页导航样式 */ /* 顶部分页导航 */
.simple-pagination { .simple-pagination {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--spacing-sm);
background: #f9fafb; background: var(--color-bg-secondary);
border: 1px solid #e5e7eb; border: 1px solid var(--color-border);
border-radius: 0.5rem; border-radius: var(--radius-lg);
padding: 0.5rem 0.75rem; padding: var(--spacing-sm) var(--spacing-md);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-sm);
} }
.simple-page-btn { .simple-page-btn {
@@ -963,18 +938,18 @@ onMounted(async () => {
justify-content: center; justify-content: center;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
border: 1px solid #d1d5db; border: 1px solid var(--color-border);
border-radius: 0.375rem; border-radius: var(--radius-md);
background: white; background: var(--color-bg-primary);
color: #374151; color: var(--color-text-primary);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all var(--transition-normal);
padding: 0; padding: 0;
} }
.simple-page-btn:hover:not(:disabled) { .simple-page-btn:hover:not(:disabled) {
background: #f3f4f6; background: var(--color-bg-tertiary);
border-color: #9ca3af; border-color: var(--color-border-hover);
transform: translateY(-1px); transform: translateY(-1px);
} }
@@ -991,7 +966,7 @@ onMounted(async () => {
.simple-page-info { .simple-page-info {
font-size: 0.875rem; font-size: 0.875rem;
color: #6b7280; color: var(--color-text-secondary);
font-weight: 500; font-weight: 500;
min-width: 3rem; min-width: 3rem;
text-align: center; text-align: center;
@@ -1000,14 +975,14 @@ onMounted(async () => {
.artworks-grid { .artworks-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem; gap: var(--spacing-2xl);
margin-bottom: 2rem; margin-bottom: var(--spacing-2xl);
} }
.empty-section { .empty-section {
text-align: center; text-align: center;
padding: 4rem 0; padding: 4rem 0;
color: #6b7280; color: var(--color-text-secondary);
} }
/* 分页样式 */ /* 分页样式 */
@@ -1015,27 +990,27 @@ onMounted(async () => {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 1rem; gap: var(--spacing-lg);
margin-bottom: 1rem; margin-bottom: var(--spacing-lg);
} }
.page-btn { .page-btn {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--spacing-sm);
padding: 0.75rem 1rem; padding: var(--spacing-md) var(--spacing-lg);
border: 1px solid #d1d5db; border: 1px solid var(--color-border);
border-radius: 0.5rem; border-radius: var(--radius-lg);
background: white; background: var(--color-bg-primary);
color: #374151; color: var(--color-text-primary);
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all var(--transition-normal);
} }
.page-btn:hover:not(:disabled) { .page-btn:hover:not(:disabled) {
background: #f3f4f6; background: var(--color-bg-tertiary);
border-color: #9ca3af; border-color: var(--color-border-hover);
} }
.page-btn:disabled { .page-btn:disabled {
@@ -1050,7 +1025,7 @@ onMounted(async () => {
.page-numbers { .page-numbers {
display: flex; display: flex;
gap: 0.5rem; gap: var(--spacing-sm);
} }
.page-number { .page-number {
@@ -1059,84 +1034,84 @@ onMounted(async () => {
justify-content: center; justify-content: center;
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
border: 1px solid #d1d5db; border: 1px solid var(--color-border);
border-radius: 0.5rem; border-radius: var(--radius-lg);
background: white; background: var(--color-bg-primary);
color: #374151; color: var(--color-text-primary);
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all var(--transition-normal);
} }
.page-number:hover { .page-number:hover {
background: #f3f4f6; background: var(--color-bg-tertiary);
border-color: #9ca3af; border-color: var(--color-border-hover);
} }
.page-number.active { .page-number.active {
background: #3b82f6; background: var(--color-primary);
color: white; color: white;
border-color: #3b82f6; border-color: var(--color-primary);
} }
.page-info { .page-info {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 2rem; gap: var(--spacing-2xl);
color: #6b7280; color: var(--color-text-secondary);
font-size: 0.875rem; font-size: 0.875rem;
} }
.jump-to-page { .jump-to-page {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 1rem; margin-top: var(--spacing-lg);
margin-bottom: 1rem; margin-bottom: var(--spacing-lg);
padding: 1rem; padding: var(--spacing-lg);
background: #f9fafb; background: var(--color-bg-secondary);
border-radius: 0.5rem; border-radius: var(--radius-lg);
border: 1px solid #e5e7eb; border: 1px solid var(--color-border);
} }
.jump-input-group { .jump-input-group {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.75rem; gap: var(--spacing-md);
} }
.jump-input-group label { .jump-input-group label {
font-size: 0.875rem; font-size: 0.875rem;
color: #374151; color: var(--color-text-primary);
font-weight: 500; font-weight: 500;
white-space: nowrap; white-space: nowrap;
} }
.jump-input { .jump-input {
padding: 0.5rem 0.75rem; padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid #d1d5db; border: 1px solid var(--color-border);
border-radius: 0.375rem; border-radius: var(--radius-md);
background: white; background: var(--color-bg-primary);
font-size: 0.875rem; font-size: 0.875rem;
color: #374151; color: var(--color-text-primary);
min-width: 80px; min-width: 80px;
text-align: center; text-align: center;
transition: border-color 0.2s; transition: border-color var(--transition-normal);
} }
.jump-input:focus { .jump-input:focus {
outline: none; outline: none;
border-color: #3b82f6; border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); box-shadow: 0 0 0 3px var(--color-primary-light);
} }
.jump-btn { .jump-btn {
padding: 0.5rem 1rem; padding: var(--spacing-sm) var(--spacing-lg);
border-radius: 0.375rem; border-radius: var(--radius-md);
background: #3b82f6; background: var(--color-primary);
color: white; color: white;
font-weight: 600; font-weight: 600;
text-decoration: none; text-decoration: none;
transition: all 0.2s; transition: all var(--transition-normal);
border: none; border: none;
cursor: pointer; cursor: pointer;
font-size: 0.875rem; font-size: 0.875rem;
@@ -1144,7 +1119,7 @@ onMounted(async () => {
} }
.jump-btn:hover:not(:disabled) { .jump-btn:hover:not(:disabled) {
background: #2563eb; background: var(--color-primary-dark);
transform: translateY(-1px); transform: translateY(-1px);
} }
@@ -1154,64 +1129,92 @@ onMounted(async () => {
transform: none; transform: none;
} }
/* 移动端优化 */
@media (max-width: 768px) { @media (max-width: 768px) {
.container { .artist-page {
padding: 0 1rem; padding: var(--spacing-lg) 0;
} }
.artist-header { .artist-header {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
} gap: var(--spacing-xl);
padding: var(--spacing-xl);
/* 移动端简洁分页导航样式调整 */
.simple-pagination {
justify-content: center;
margin-bottom: 1rem;
} }
.artist-profile { .artist-profile {
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
align-items: center;
gap: var(--spacing-lg);
}
.artist-info {
text-align: center;
}
.artist-name {
font-size: 1.5rem;
}
.artist-account {
font-size: 1rem;
} }
.artist-actions { .artist-actions {
flex-direction: row; flex-direction: column;
gap: var(--spacing-lg);
min-width: auto;
} }
.download-section { .download-section {
flex-direction: row; gap: var(--spacing-lg);
align-items: center; }
gap: 1rem;
.download-controls {
gap: var(--spacing-lg);
} }
.download-input-group { .download-input-group {
flex-shrink: 0; flex-direction: column;
align-items: stretch;
gap: var(--spacing-sm);
} }
.btn { .download-label {
flex: 1; text-align: left;
}
.download-select,
.download-input {
width: 100%;
min-width: auto;
} }
.section-header { .section-header {
flex-direction: column; flex-direction: column;
gap: 1rem; gap: var(--spacing-lg);
align-items: stretch; align-items: stretch;
} }
.header-controls { .header-controls {
flex-direction: column; flex-direction: column;
gap: 1rem; gap: var(--spacing-lg);
align-items: stretch; align-items: stretch;
} }
.simple-pagination {
justify-content: center;
}
.artworks-grid { .artworks-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: var(--spacing-xl);
} }
.pagination { .pagination {
flex-direction: column; flex-direction: column;
gap: 1rem; gap: var(--spacing-lg);
} }
.page-numbers { .page-numbers {
@@ -1220,26 +1223,50 @@ onMounted(async () => {
.page-info { .page-info {
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: var(--spacing-sm);
text-align: center; text-align: center;
} }
.jump-to-page { .jump-to-page {
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: var(--spacing-sm);
} }
.jump-input-group { .jump-input-group {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: stretch;
} gap: var(--spacing-sm);
.jump-input {
width: 100%;
} }
.jump-input,
.jump-btn { .jump-btn {
width: 100%; width: 100%;
} }
.success-message {
top: var(--spacing-lg);
right: var(--spacing-lg);
left: var(--spacing-lg);
padding: var(--spacing-lg);
}
}
/* 超小屏幕优化 */
@media (max-width: 480px) {
.artist-header {
padding: var(--spacing-lg);
}
.artworks-section {
padding: var(--spacing-lg);
}
.artist-name {
font-size: 1.25rem;
}
.artist-account {
font-size: 0.875rem;
}
} }
</style> </style>
ui/src/views/RankingView.vue
+108 -48
View File
@@ -451,14 +451,14 @@ onMounted(async () => {
<style scoped> <style scoped>
.ranking-page { .ranking-page {
min-height: 100vh; min-height: 100vh;
background: #f8fafc; background: var(--color-bg-secondary);
padding: 2rem 0; padding: var(--spacing-2xl) 0;
} }
.container { .container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 2rem; padding: 0 var(--spacing-2xl);
} }
.loading-section, .loading-section,
@@ -471,21 +471,21 @@ onMounted(async () => {
.success-message { .success-message {
position: fixed; position: fixed;
top: 2rem; top: var(--spacing-2xl);
right: 2rem; right: var(--spacing-2xl);
background: #10b981; background: var(--color-success);
color: white; color: white;
padding: 1rem 1.5rem; padding: var(--spacing-lg) var(--spacing-xl);
border-radius: 0.5rem; border-radius: var(--radius-lg);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-lg);
z-index: 1000; z-index: 1000;
animation: slideIn 0.3s ease-out; animation: slideIn var(--transition-normal) ease-out;
} }
.success-content { .success-content {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--spacing-sm);
} }
.success-icon { .success-icon {
@@ -509,119 +509,179 @@ onMounted(async () => {
.ranking-content { .ranking-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2rem; gap: var(--spacing-2xl);
} }
.artworks-section { .artworks-section {
background: white; background: var(--color-bg-primary);
border-radius: 1rem; border-radius: var(--radius-xl);
padding: 2rem; padding: var(--spacing-2xl);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-md);
border: 1px solid var(--color-border);
} }
.artworks-grid { .artworks-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem; gap: var(--spacing-2xl);
margin-bottom: 2rem; margin-bottom: var(--spacing-2xl);
} }
.empty-section { .empty-section {
text-align: center; text-align: center;
padding: 4rem 0; padding: 4rem 0;
color: #6b7280; color: var(--color-text-secondary);
} }
.page-info { .page-info {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 2rem; gap: var(--spacing-2xl);
color: #6b7280; color: var(--color-text-secondary);
font-size: 0.875rem; font-size: 0.875rem;
} }
.jump-to-page { .jump-to-page {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 1rem; margin-top: var(--spacing-lg);
padding: var(--spacing-lg);
background: var(--color-bg-secondary);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
} }
.jump-input-group { .jump-input-group {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--spacing-md);
background: #f3f4f6; }
border: 1px solid #d1d5db;
border-radius: 0.5rem; .jump-input-group label {
padding: 0.5rem 1rem; font-size: 0.875rem;
width: fit-content; color: var(--color-text-primary);
font-weight: 500;
white-space: nowrap;
} }
.jump-input { .jump-input {
border: none; border: 1px solid var(--color-border);
background: transparent; background: var(--color-bg-primary);
padding: 0.5rem 0.25rem; padding: var(--spacing-sm) var(--spacing-md);
font-size: 0.875rem; font-size: 0.875rem;
width: 50px; border-radius: var(--radius-md);
width: 80px;
text-align: center; text-align: center;
color: var(--color-text-primary);
transition: border-color var(--transition-normal);
min-height: 36px; /* 移动端友好 */
} }
.jump-input:focus { .jump-input:focus {
outline: none; outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-light);
} }
.jump-btn { .jump-btn {
background: #4f46e5; background: var(--color-primary);
color: white; color: white;
padding: 0.5rem 1rem; padding: var(--spacing-sm) var(--spacing-lg);
border-radius: 0.5rem; border-radius: var(--radius-md);
border: none; border: none;
cursor: pointer; cursor: pointer;
font-size: 0.875rem; font-size: 0.875rem;
transition: background-color 0.2s ease; transition: all var(--transition-normal);
min-height: 36px;
} }
.jump-btn:hover:not(:disabled) { .jump-btn:hover:not(:disabled) {
background: #4338ca; background: var(--color-primary-dark);
transform: translateY(-1px);
} }
.jump-btn:disabled { .jump-btn:disabled {
background: #9ca3af; background: var(--color-text-tertiary);
cursor: not-allowed; cursor: not-allowed;
color: #6b7280; color: var(--color-text-secondary);
transform: none;
} }
/* 移动端优化 */
@media (max-width: 768px) { @media (max-width: 768px) {
.ranking-page {
padding: var(--spacing-xl) 0;
}
.container { .container {
padding: 0 1rem; padding: 0 var(--spacing-lg);
}
.success-message {
top: var(--spacing-lg);
right: var(--spacing-lg);
left: var(--spacing-lg);
padding: var(--spacing-md) var(--spacing-lg);
}
.ranking-content {
gap: var(--spacing-xl);
}
.artworks-section {
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
} }
.artworks-grid { .artworks-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: var(--spacing-xl);
} }
.page-info { .page-info {
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: var(--spacing-sm);
text-align: center; text-align: center;
} }
.jump-to-page { .jump-to-page {
flex-direction: column; padding: var(--spacing-md);
gap: 0.5rem;
} }
.jump-input-group { .jump-input-group {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: stretch;
} gap: var(--spacing-sm);
.jump-input {
width: 100%;
} }
.jump-input,
.jump-btn { .jump-btn {
width: 100%; width: 100%;
} }
} }
/* 超小屏幕优化 */
@media (max-width: 480px) {
.ranking-page {
padding: var(--spacing-lg) 0;
}
.container {
padding: 0 var(--spacing-md);
}
.success-message {
top: var(--spacing-md);
right: var(--spacing-md);
left: var(--spacing-md);
}
.artworks-section {
padding: var(--spacing-lg);
}
.artworks-grid {
gap: var(--spacing-lg);
}
}
</style> </style>
ui/src/views/SearchView.vue
+220 -113
View File
@@ -785,98 +785,107 @@ onUnmounted(() => {
<style scoped> <style scoped>
.search-page { .search-page {
min-height: 100vh; min-height: 100vh;
background: #f8fafc; background: var(--color-bg-secondary);
} }
.search-header { .search-header {
background: white; background: var(--color-bg-primary);
border-bottom: 1px solid #e5e7eb; border-bottom: 1px solid var(--color-border);
padding: 2rem 0; padding: var(--spacing-2xl) 0;
} box-shadow: var(--shadow-sm);
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
} }
.page-title { .page-title {
font-size: 2rem; font-size: 2rem;
font-weight: 700; font-weight: 700;
color: #1f2937; color: var(--color-text-primary);
margin-bottom: 2rem; margin-bottom: var(--spacing-2xl);
} }
.search-form { .search-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: var(--spacing-lg);
} }
.search-type-tabs { .search-type-tabs {
display: flex; display: flex;
gap: 0.5rem; gap: var(--spacing-sm);
margin-bottom: 1rem; margin-bottom: var(--spacing-lg);
flex-wrap: wrap;
} }
.tab-btn { .tab-btn {
padding: 0.5rem 1rem; padding: var(--spacing-sm) var(--spacing-lg);
border: 1px solid #d1d5db; border: 1px solid var(--color-border);
background: white; background: var(--color-bg-primary);
color: #6b7280; color: var(--color-text-secondary);
border-radius: 0.375rem; border-radius: var(--radius-md);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all var(--transition-normal);
font-size: 0.875rem; font-size: 0.875rem;
white-space: nowrap;
min-height: 44px; /* 移动端触摸友好 */
} }
.tab-btn:hover { .tab-btn:hover {
background: #f3f4f6; background: var(--color-bg-tertiary);
color: #374151; color: var(--color-text-primary);
} }
.tab-btn.active { .tab-btn.active {
background: #3b82f6; background: var(--color-primary);
color: white; color: white;
border-color: #3b82f6; border-color: var(--color-primary);
} }
.search-input-group { .search-input-group {
display: flex; display: flex;
gap: 0.5rem; gap: var(--spacing-sm);
} }
.search-input { .search-input {
flex: 1; flex: 1;
padding: 0.75rem 1rem; padding: var(--spacing-md) var(--spacing-lg);
border: 2px solid #e5e7eb; border: 2px solid var(--color-border);
border-radius: 0.5rem; border-radius: var(--radius-lg);
font-size: 1rem; font-size: 1rem;
transition: border-color 0.2s; transition: border-color var(--transition-normal);
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 44px; /* 移动端触摸友好 */
} }
.search-input:focus { .search-input:focus {
outline: none; outline: none;
border-color: #3b82f6; border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-light);
} }
.search-btn { .search-btn {
padding: 0.75rem 1rem; padding: var(--spacing-md) var(--spacing-lg);
background: #3b82f6; background: var(--color-primary);
color: white; color: white;
border: none; border: none;
border-radius: 0.5rem; border-radius: var(--radius-lg);
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; transition: all var(--transition-normal);
min-width: 44px; /* 移动端触摸友好 */
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
} }
.search-btn:hover:not(:disabled) { .search-btn:hover:not(:disabled) {
background: #2563eb; background: var(--color-primary-dark);
transform: translateY(-1px);
} }
.search-btn:disabled { .search-btn:disabled {
opacity: 0.6; opacity: 0.6;
cursor: not-allowed; cursor: not-allowed;
transform: none;
} }
.search-btn svg { .search-btn svg {
@@ -888,36 +897,37 @@ onUnmounted(() => {
.tags-search-section { .tags-search-section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: var(--spacing-lg);
} }
.tags-input-group { .tags-input-group {
display: flex; display: flex;
gap: 0.5rem; gap: var(--spacing-sm);
} }
.tags-display { .tags-display {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: var(--spacing-lg);
} }
.tags-list { .tags-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.5rem; gap: var(--spacing-sm);
} }
.tag-item { .tag-item {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.25rem; gap: var(--spacing-xs);
padding: 0.5rem 0.75rem; padding: var(--spacing-sm) var(--spacing-md);
background: #e0f2fe; background: var(--color-info-light);
color: #0369a1; color: var(--color-info);
border-radius: 1rem; border-radius: var(--radius-2xl);
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
border: 1px solid var(--color-info);
} }
.tag-remove { .tag-remove {
@@ -928,14 +938,14 @@ onUnmounted(() => {
height: 1rem; height: 1rem;
background: none; background: none;
border: none; border: none;
color: #0369a1; color: var(--color-info);
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: 50%;
transition: all 0.2s; transition: all var(--transition-normal);
} }
.tag-remove:hover { .tag-remove:hover {
background: #0369a1; background: var(--color-info);
color: white; color: white;
} }
@@ -946,159 +956,186 @@ onUnmounted(() => {
.search-filters { .search-filters {
display: flex; display: flex;
gap: 1rem; gap: var(--spacing-lg);
flex-wrap: wrap; flex-wrap: wrap;
} }
.filter-select { .filter-select {
padding: 0.5rem 0.75rem; padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid #d1d5db; border: 1px solid var(--color-border);
border-radius: 0.375rem; border-radius: var(--radius-md);
background: white; background: var(--color-bg-primary);
font-size: 0.875rem; font-size: 0.875rem;
color: #374151; color: var(--color-text-primary);
transition: border-color var(--transition-normal);
min-height: 36px; /* 移动端友好 */
}
.filter-select:focus {
outline: none;
border-color: var(--color-primary);
} }
.search-content { .search-content {
padding: 2rem 0; padding: var(--spacing-2xl) 0;
} }
.artist-search-section { .artist-search-section {
background: white; background: var(--color-bg-primary);
border-radius: 0.5rem; border-radius: var(--radius-lg);
padding: 2rem; padding: var(--spacing-2xl);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-md);
border: 1px solid var(--color-border);
} }
.error-section, .error-section,
.loading-section { .loading-section {
margin-bottom: 2rem; margin-bottom: var(--spacing-2xl);
} }
.results-section { .results-section {
margin-bottom: 2rem; margin-bottom: var(--spacing-2xl);
} }
.results-header { .results-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 2rem; margin-bottom: var(--spacing-2xl);
} }
.results-header h2 { .results-header h2 {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 600; font-weight: 600;
color: #1f2937; color: var(--color-text-primary);
margin: 0; margin: 0;
} }
.artworks-grid { .artworks-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem; gap: var(--spacing-2xl);
margin-bottom: 2rem; margin-bottom: var(--spacing-2xl);
} }
/* 分页样式 */ /* 分页样式 */
.pagination-section { .pagination-section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: var(--spacing-lg);
align-items: center; align-items: center;
margin-top: 2rem; margin-top: var(--spacing-2xl);
} }
.pagination { .pagination {
display: flex; display: flex;
gap: 0.5rem; gap: var(--spacing-sm);
align-items: center; align-items: center;
flex-wrap: wrap;
justify-content: center;
} }
.page-btn { .page-btn {
padding: 0.5rem 1rem; padding: var(--spacing-sm) var(--spacing-lg);
border: 1px solid #d1d5db; border: 1px solid var(--color-border);
background: white; background: var(--color-bg-primary);
color: #374151; color: var(--color-text-primary);
border-radius: 0.375rem; border-radius: var(--radius-md);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all var(--transition-normal);
font-size: 0.875rem; font-size: 0.875rem;
min-width: 2.5rem; min-width: 2.5rem;
min-height: 36px; /* 移动端友好 */
} }
.page-btn:hover:not(:disabled) { .page-btn:hover:not(:disabled) {
background: #f3f4f6; background: var(--color-bg-tertiary);
border-color: #9ca3af; border-color: var(--color-border-hover);
transform: translateY(-1px);
} }
.page-btn.active { .page-btn.active {
background: #3b82f6; background: var(--color-primary);
color: white; color: white;
border-color: #3b82f6; border-color: var(--color-primary);
} }
.page-btn:disabled { .page-btn:disabled {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
transform: none;
} }
.jump-to-page { .jump-to-page {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 1rem; margin-top: var(--spacing-lg);
padding: var(--spacing-lg);
background: var(--color-bg-secondary);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
} }
.jump-input-group { .jump-input-group {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--spacing-md);
background: #f3f4f6; }
border: 1px solid #d1d5db;
border-radius: 0.5rem; .jump-input-group label {
padding: 0.5rem 1rem; font-size: 0.875rem;
width: fit-content; color: var(--color-text-primary);
font-weight: 500;
white-space: nowrap;
} }
.jump-input { .jump-input {
border: none; border: 1px solid var(--color-border);
background: transparent; background: var(--color-bg-primary);
padding: 0.5rem 0.25rem; padding: var(--spacing-sm) var(--spacing-md);
font-size: 0.875rem; font-size: 0.875rem;
width: 50px; border-radius: var(--radius-md);
width: 80px;
text-align: center; text-align: center;
color: var(--color-text-primary);
transition: border-color var(--transition-normal);
} }
.jump-input:focus { .jump-input:focus {
outline: none; outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-light);
} }
.jump-btn { .jump-btn {
background: #4f46e5; background: var(--color-primary);
color: white; color: white;
padding: 0.5rem 1rem; padding: var(--spacing-sm) var(--spacing-lg);
border-radius: 0.5rem; border-radius: var(--radius-md);
border: none; border: none;
cursor: pointer; cursor: pointer;
font-size: 0.875rem; font-size: 0.875rem;
transition: background-color 0.2s ease; transition: all var(--transition-normal);
min-height: 36px;
} }
.jump-btn:hover:not(:disabled) { .jump-btn:hover:not(:disabled) {
background: #4338ca; background: var(--color-primary-dark);
transform: translateY(-1px);
} }
.jump-btn:disabled { .jump-btn:disabled {
background: #9ca3af; background: var(--color-text-tertiary);
cursor: not-allowed; cursor: not-allowed;
color: #6b7280; color: var(--color-text-secondary);
transform: none;
} }
.page-info { .page-info {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 2rem; gap: var(--spacing-2xl);
color: #6b7280; color: var(--color-text-secondary);
font-size: 0.875rem; font-size: 0.875rem;
} }
@@ -1117,27 +1154,60 @@ onUnmounted(() => {
.empty-icon { .empty-icon {
width: 4rem; width: 4rem;
height: 4rem; height: 4rem;
color: #9ca3af; color: var(--color-text-tertiary);
margin-bottom: 1rem; margin-bottom: var(--spacing-lg);
} }
.empty-content h3, .empty-content h3,
.welcome-content h2 { .welcome-content h2 {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 600; font-weight: 600;
color: #374151; color: var(--color-text-primary);
margin-bottom: 0.5rem; margin-bottom: var(--spacing-sm);
} }
.empty-content p, .empty-content p,
.welcome-content p { .welcome-content p {
color: #6b7280; color: var(--color-text-secondary);
line-height: 1.6; line-height: 1.6;
} }
/* 移动端优化 */
@media (max-width: 768px) { @media (max-width: 768px) {
.search-header {
padding: var(--spacing-xl) 0;
}
.page-title {
font-size: 1.5rem;
margin-bottom: var(--spacing-xl);
}
.search-type-tabs {
gap: var(--spacing-xs);
margin-bottom: var(--spacing-xl);
}
.tab-btn {
flex: 1;
text-align: center;
padding: var(--spacing-md) var(--spacing-sm);
font-size: 0.75rem;
}
.search-input-group {
flex-direction: column;
gap: var(--spacing-md);
}
.search-btn {
width: 100%;
justify-content: center;
}
.search-filters { .search-filters {
flex-direction: column; flex-direction: column;
gap: var(--spacing-md);
} }
.filter-select { .filter-select {
@@ -1146,16 +1216,18 @@ onUnmounted(() => {
.results-header { .results-header {
flex-direction: column; flex-direction: column;
gap: 1rem; gap: var(--spacing-lg);
align-items: flex-start; align-items: flex-start;
} }
.artworks-grid { .artworks-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: var(--spacing-xl);
} }
.tags-input-group { .tags-input-group {
flex-direction: column; flex-direction: column;
gap: var(--spacing-md);
} }
.tags-list { .tags-list {
@@ -1164,36 +1236,71 @@ onUnmounted(() => {
.tag-item { .tag-item {
font-size: 0.75rem; font-size: 0.75rem;
padding: 0.375rem 0.625rem; padding: var(--spacing-xs) var(--spacing-sm);
} }
.pagination { .pagination {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: var(--spacing-xs);
}
.page-btn {
min-width: 2rem;
padding: var(--spacing-xs) var(--spacing-sm);
} }
.page-info { .page-info {
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: var(--spacing-sm);
text-align: center; text-align: center;
} }
.jump-to-page { .jump-to-page {
flex-direction: column; padding: var(--spacing-md);
gap: 0.5rem;
} }
.jump-input-group { .jump-input-group {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: stretch;
} gap: var(--spacing-sm);
.jump-input {
width: 100%;
} }
.jump-input,
.jump-btn { .jump-btn {
width: 100%; width: 100%;
} }
.artist-search-section {
padding: var(--spacing-xl);
}
}
/* 超小屏幕优化 */
@media (max-width: 480px) {
.search-header {
padding: var(--spacing-lg) 0;
}
.page-title {
font-size: 1.25rem;
}
.tab-btn {
font-size: 0.625rem;
padding: var(--spacing-sm) var(--spacing-xs);
}
.search-input {
font-size: 0.875rem;
}
.artworks-grid {
gap: var(--spacing-lg);
}
.artist-search-section {
padding: var(--spacing-lg);
}
} }
</style> </style>