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