默认封面
This commit is contained in:
@@ -1,8 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="article-card" @click="handleClick">
|
<div class="article-card" @click="handleClick">
|
||||||
<div class="article-image">
|
<div class="article-image">
|
||||||
<img v-if="resource?.coverImage" :src="FILE_DOWNLOAD_URL + resource.coverImage" :alt="resource.title" />
|
<img :src="resource?.coverImage ? (FILE_DOWNLOAD_URL + resource.coverImage) : defaultArticleImg" :alt="resource.title" />
|
||||||
<div v-else class="image-placeholder"></div>
|
|
||||||
<div class="article-tag">精选文章</div>
|
<div class="article-tag">精选文章</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="article-content">
|
<div class="article-content">
|
||||||
@@ -27,6 +26,7 @@ import { useRouter } from 'vue-router';
|
|||||||
import { Document } from '@element-plus/icons-vue';
|
import { Document } from '@element-plus/icons-vue';
|
||||||
import type { ResourceRecommendVO } from '@/types';
|
import type { ResourceRecommendVO } from '@/types';
|
||||||
import { FILE_DOWNLOAD_URL } from '@/config';
|
import { FILE_DOWNLOAD_URL } from '@/config';
|
||||||
|
import defaultArticleImg from '@/assets/imgs/article-default.png';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
resource?: ResourceRecommendVO;
|
resource?: ResourceRecommendVO;
|
||||||
@@ -82,20 +82,6 @@ function handleClick() {
|
|||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-placeholder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: url('data:image/svg+xml,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)" /></svg>');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-tag {
|
.article-tag {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="ideological-card" @click="handleClick">
|
<div class="ideological-card" @click="handleClick">
|
||||||
<div class="card-image">
|
<div class="card-image">
|
||||||
<img v-if="resource?.coverImage" :src="FILE_DOWNLOAD_URL + resource.coverImage" :alt="resource.title" />
|
<img :src="resource?.coverImage ? (FILE_DOWNLOAD_URL + resource.coverImage) : defaultArticleImg" :alt="resource.title" />
|
||||||
<div v-else class="image-placeholder"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="date-box" v-if="publishDate">
|
<div class="date-box" v-if="publishDate">
|
||||||
<div class="day">{{ publishDate.day }}</div>
|
<div class="day">{{ publishDate.day }}</div>
|
||||||
@@ -22,6 +21,7 @@ import { computed } from 'vue';
|
|||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import type { ResourceRecommendVO } from '@/types';
|
import type { ResourceRecommendVO } from '@/types';
|
||||||
import { FILE_DOWNLOAD_URL } from '@/config';
|
import { FILE_DOWNLOAD_URL } from '@/config';
|
||||||
|
import defaultArticleImg from '@/assets/imgs/article-default.png';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
resource?: ResourceRecommendVO;
|
resource?: ResourceRecommendVO;
|
||||||
@@ -81,20 +81,6 @@ function handleClick() {
|
|||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-placeholder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: url('data:image/svg+xml,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1.5" fill="rgba(255,255,255,0.2)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23dots)" /></svg>');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-box {
|
.date-box {
|
||||||
|
|||||||
@@ -92,15 +92,9 @@
|
|||||||
<!-- 文章封面 -->
|
<!-- 文章封面 -->
|
||||||
<div class="article-cover">
|
<div class="article-cover">
|
||||||
<img
|
<img
|
||||||
v-if="article.coverImage"
|
:src="article.coverImage ? (FILE_DOWNLOAD_URL + article.coverImage) : defaultArticleImg"
|
||||||
:src="FILE_DOWNLOAD_URL + article.coverImage"
|
|
||||||
:alt="article.resourceName"
|
:alt="article.resourceName"
|
||||||
/>
|
/>
|
||||||
<div v-else class="cover-placeholder">
|
|
||||||
<el-icon>
|
|
||||||
<Document />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
<div class="cover-overlay">
|
<div class="cover-overlay">
|
||||||
<span class="view-button">查看详情</span>
|
<span class="view-button">查看详情</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -161,15 +155,9 @@
|
|||||||
<!-- 课程封面 -->
|
<!-- 课程封面 -->
|
||||||
<div class="course-cover">
|
<div class="course-cover">
|
||||||
<img
|
<img
|
||||||
v-if="course.coverImage"
|
:src="course.coverImage ? (FILE_DOWNLOAD_URL + course.coverImage) : defaultCourseImg"
|
||||||
:src="FILE_DOWNLOAD_URL + course.coverImage"
|
|
||||||
:alt="course.courseName"
|
:alt="course.courseName"
|
||||||
/>
|
/>
|
||||||
<div v-else class="cover-placeholder">
|
|
||||||
<el-icon>
|
|
||||||
<Reading />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
<div class="cover-overlay">
|
<div class="cover-overlay">
|
||||||
<span class="view-button">查看课程</span>
|
<span class="view-button">查看课程</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -237,10 +225,14 @@ import {
|
|||||||
import { resourceApi } from '@/apis/resource';
|
import { resourceApi } from '@/apis/resource';
|
||||||
import { FILE_DOWNLOAD_URL } from '@/config';
|
import { FILE_DOWNLOAD_URL } from '@/config';
|
||||||
import type { TaskItemVO } from '@/types/study';
|
import type { TaskItemVO } from '@/types/study';
|
||||||
|
import defaultArticleImg from '@/assets/imgs/article-default.png';
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
|
||||||
|
// 默认封面(文章和课程使用同一个)
|
||||||
|
const defaultCourseImg = defaultArticleImg;
|
||||||
|
|
||||||
// 响应式数据
|
// 响应式数据
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const searchKeyword = ref('');
|
const searchKeyword = ref('');
|
||||||
|
|||||||
Reference in New Issue
Block a user