90 lines
2.5 KiB
Vue
90 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { fetchBanners } from '@/hooks/request/banner';
|
|
import { computed } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
const router = useRouter();
|
|
const { banners } = fetchBanners();
|
|
const route = useRoute();
|
|
const bannerInfo = computed(() => {
|
|
// console.log(banners.value);
|
|
return banners.value?.find((item: any) => item.code === route.params.code);
|
|
});
|
|
// 当前是否处于分享页面
|
|
const hasShare = defineModel<boolean>('hasShare', { default: false });
|
|
function handleButtonClick() {
|
|
if (!bannerInfo.value?.url) {
|
|
router.push({ name: 'intelligentGeneration' });
|
|
return;
|
|
}
|
|
|
|
window.location.href = bannerInfo.value?.url;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="banner-container" :style="{ background: hasShare ? 'white' : undefined }">
|
|
<section class="msg-info">
|
|
<h3>{{ bannerInfo?.title }}</h3>
|
|
<el-space spacer="|">
|
|
<!-- <el-text type="success">{{ bannerInfo.characters }}</el-text> -->
|
|
<el-text>{{ bannerInfo?.publish_time.split('-').join('.') }} 发布</el-text>
|
|
</el-space>
|
|
</section>
|
|
<!-- banner内容 -->
|
|
<article>
|
|
<!-- 根据banner的类型使用不同的方式渲染 -->
|
|
<section class="banner-text" v-if="bannerInfo?.type === 0">
|
|
<p>{{ bannerInfo.synopsis }}</p>
|
|
</section>
|
|
<div class="banner-image" v-else-if="bannerInfo?.type === 1">
|
|
<el-image fit="cover" loading="lazy" :src="bannerInfo.file_address" />
|
|
</div>
|
|
<section class="banner-video" v-else-if="bannerInfo?.type === 2">
|
|
<video width="100%" height="auto" controls>
|
|
<source :src="bannerInfo.file_address" type="video/mp4" />
|
|
</video>
|
|
</section>
|
|
</article>
|
|
|
|
<section
|
|
v-if="bannerInfo?.is_display_button && !hasShare"
|
|
style="margin-top: 20px; width: 100%; position: sticky; bottom: 10px"
|
|
>
|
|
<!-- 立即进入 -->
|
|
<el-button
|
|
style="width: 100%; height: 50px; border-radius: 15px"
|
|
color="#70b937"
|
|
@click="handleButtonClick"
|
|
>
|
|
<el-text style="color: white">{{ bannerInfo?.button_name }}</el-text>
|
|
</el-button>
|
|
</section>
|
|
</section>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@use '@/assets/css/theme' as *;
|
|
|
|
.banner-container {
|
|
padding: $gap * 2;
|
|
.msg-info {
|
|
font-family: PingFangSC-Medium;
|
|
h2 {
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.banner-text,
|
|
.banner-image,
|
|
.banner-video {
|
|
margin-top: $gap;
|
|
border-radius: $card-radius;
|
|
overflow: hidden;
|
|
line-height: 0;
|
|
}
|
|
}
|
|
</style>
|