93 lines
2.2 KiB
Vue
93 lines
2.2 KiB
Vue
<template>
|
|
<div class="banner-card">
|
|
<div class="banner-content" @click="handleLearn">
|
|
<img :src="FILE_DOWNLOAD_URL + props.banner.imageUrl" alt="banner" class="banner-image">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Banner } from '@/types';
|
|
import { FILE_DOWNLOAD_URL } from '@/config';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
const router = useRouter();
|
|
const props = defineProps<{
|
|
banner: Banner;
|
|
}>();
|
|
console.log(props.banner);
|
|
function handleLearn() {
|
|
if (props.banner.linkType === 1) {
|
|
console.log(`/resource/${props.banner.linkID}`);
|
|
router.push(`/article/show?articleId=${props.banner.linkID}`);
|
|
} else if (props.banner.linkType === 2) {
|
|
console.log(`/course/${props.banner.linkID}`);
|
|
router.push(`/study-plan/course-detail?courseId=${props.banner.linkID}`);
|
|
} else if (props.banner.linkType === 3) {
|
|
window.open(props.banner.linkUrl, '_blank');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.banner-card {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.banner-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background-color: red;
|
|
|
|
:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.banner-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: fill;
|
|
object-position: center;
|
|
display: block;
|
|
}
|
|
|
|
.banner-overlay {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 60px 120px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
|
|
|
|
.learn-btn {
|
|
width: 120px;
|
|
height: 39px;
|
|
background: #FFFFFF;
|
|
border-radius: 12px;
|
|
border: none;
|
|
font-family: "Source Han Sans SC";
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
line-height: 22.4px;
|
|
color: #C62828;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
|
|
&:hover {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |