|
|
|
@ -1,42 +1,66 @@ |
|
|
|
<template> |
|
|
|
<a-carousel :after-change="onChange" arrows autoplay :dots="false"> |
|
|
|
<template #prevArrow> |
|
|
|
<div class="custom-slick-arrow" style="left: 10px; z-index: 1"> |
|
|
|
<LeftCircleOutlined /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<template #nextArrow> |
|
|
|
<div class="custom-slick-arrow" style="right: 10px"> |
|
|
|
<RightCircleOutlined /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<template v-if="form.images"> |
|
|
|
<template v-for="(item,index) in JSON.parse(form.images)" :key="index"> |
|
|
|
<div class="ad-item"> |
|
|
|
<a-image :preview="false" :src="item.url" width="100vw" /> |
|
|
|
<!-- <a-space class="ad-text" :size="10" direction="vertical">--> |
|
|
|
<!-- <div class="title">{{ form.name }}</div>--> |
|
|
|
<!-- <div class="desc">{{ form.comments }}</div>--> |
|
|
|
<!-- <div class="btn"><a-button size="large" style="padding: 0 30px" @click="openNew(`${form.path}`)">了解更多</a-button></div>--> |
|
|
|
<!-- </a-space>--> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="banner" |
|
|
|
:class="screenWidth > 567 ? 'hidden-sm-and-down' : 'hidden-sm-and-up'" |
|
|
|
:style="bodyStyle" |
|
|
|
> |
|
|
|
<a-carousel |
|
|
|
:after-change="onChange" |
|
|
|
arrows |
|
|
|
autoplay |
|
|
|
:dots="false" |
|
|
|
:dotsClass="dotsClass" |
|
|
|
> |
|
|
|
<!-- <template #prevArrow>--> |
|
|
|
<!-- <div class="custom-slick-arrow" style="left: 20px; z-index: 1">--> |
|
|
|
<!-- <LeftCircleOutlined />--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- </template>--> |
|
|
|
<!-- <template #nextArrow>--> |
|
|
|
<!-- <div class="custom-slick-arrow" style="right: 40px">--> |
|
|
|
<!-- <RightCircleOutlined />--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- </template>--> |
|
|
|
<template v-if="form.images"> |
|
|
|
<template v-for="(item, index) in JSON.parse(form.images)" :key="index"> |
|
|
|
<div class="ad-item"> |
|
|
|
<a-image :preview="false" :src="item.url" width="100vw" /> |
|
|
|
<a-space class="ad-text" :size="10" direction="vertical"> |
|
|
|
<div class="title">{{ form.name }}</div> |
|
|
|
<div class="desc">{{ form.comments }}</div> |
|
|
|
<div class="btn" |
|
|
|
><a-button |
|
|
|
size="large" |
|
|
|
style="padding: 0 30px" |
|
|
|
@click="openNew(`${form.path}`)" |
|
|
|
>了解更多</a-button |
|
|
|
></div |
|
|
|
> |
|
|
|
</a-space> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</a-carousel> |
|
|
|
</a-carousel> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script setup lang="ts"> |
|
|
|
import {getAd} from "@/api/cms/ad"; |
|
|
|
import useFormData from "@/utils/use-form-data"; |
|
|
|
import {Ad} from "@/api/cms/ad/model"; |
|
|
|
import {ref} from "vue"; |
|
|
|
import {openNew} from "@/utils/common"; |
|
|
|
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue'; |
|
|
|
|
|
|
|
import { getAd } from '@/api/cms/ad'; |
|
|
|
import useFormData from '@/utils/use-form-data'; |
|
|
|
import { Ad } from '@/api/cms/ad/model'; |
|
|
|
import { ref } from 'vue'; |
|
|
|
import { openNew } from '@/utils/common'; |
|
|
|
import { |
|
|
|
LeftCircleOutlined, |
|
|
|
RightCircleOutlined |
|
|
|
} from '@ant-design/icons-vue'; |
|
|
|
import { useThemeStore } from '@/store/modules/theme'; |
|
|
|
import { storeToRefs } from 'pinia'; |
|
|
|
const themeStore = useThemeStore(); |
|
|
|
const { screenWidth } = storeToRefs(themeStore); |
|
|
|
const visible = ref<boolean>(false); |
|
|
|
const ads = ref<Ad[]>([]); |
|
|
|
|
|
|
|
// 表单数据 |
|
|
|
const { form,assignFields } = useFormData<Ad>({ |
|
|
|
const { form, assignFields } = useFormData<Ad>({ |
|
|
|
adId: undefined, |
|
|
|
name: '', |
|
|
|
adType: '图片广告', |
|
|
|
@ -49,71 +73,91 @@ const { form,assignFields } = useFormData<Ad>({ |
|
|
|
comments: '', |
|
|
|
sortNumber: 100 |
|
|
|
}); |
|
|
|
|
|
|
|
// 幻灯片样式 |
|
|
|
const bodyStyle = { |
|
|
|
width: '100%' |
|
|
|
}; |
|
|
|
|
|
|
|
const dotsClass = 'dots'; |
|
|
|
|
|
|
|
const onChange = () => { |
|
|
|
visible.value = !visible.value |
|
|
|
} |
|
|
|
visible.value = !visible.value; |
|
|
|
}; |
|
|
|
|
|
|
|
const reload = () => { |
|
|
|
getAd(254).then(data => { |
|
|
|
assignFields(data) |
|
|
|
}) |
|
|
|
} |
|
|
|
getAd(254).then((data) => { |
|
|
|
assignFields(data); |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
reload(); |
|
|
|
</script> |
|
|
|
<style scoped lang="less"> |
|
|
|
:deep(.slick-slide) { |
|
|
|
height: 420px; |
|
|
|
background: #364d79; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.slick-arrow.custom-slick-arrow) { |
|
|
|
width: 38px; |
|
|
|
height: 38px; |
|
|
|
font-size: 38px; |
|
|
|
color: #fff; |
|
|
|
background-color: rgba(31, 45, 61, 0.11); |
|
|
|
transition: ease all 0.3s; |
|
|
|
opacity: 0.3; |
|
|
|
z-index: 1; |
|
|
|
top: 180px; |
|
|
|
} |
|
|
|
:deep(.slick-arrow.custom-slick-arrow:before) { |
|
|
|
display: none; |
|
|
|
.hidden-sm-and-down { |
|
|
|
:deep(.slick-slide) { |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
:deep(.slick-arrow.custom-slick-arrow) { |
|
|
|
font-size: 38px; |
|
|
|
} |
|
|
|
} |
|
|
|
:deep(.slick-arrow.custom-slick-arrow:hover) { |
|
|
|
color: #fff; |
|
|
|
opacity: 0.5; |
|
|
|
.hidden-sm-and-up { |
|
|
|
:deep(.slick-arrow.custom-slick-arrow) { |
|
|
|
top: 50px; |
|
|
|
font-size: 24px; |
|
|
|
} |
|
|
|
} |
|
|
|
.banner { |
|
|
|
:deep(.slick-arrow.custom-slick-arrow) { |
|
|
|
color: #fff; |
|
|
|
background-color: rgba(31, 45, 61, 0.11); |
|
|
|
transition: ease all 0.3s; |
|
|
|
opacity: 0.3; |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
:deep(.slick-arrow.custom-slick-arrow:before) { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
:deep(.slick-arrow.custom-slick-arrow:hover) { |
|
|
|
color: #fff; |
|
|
|
opacity: 0.5; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.slick-slide h3) { |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
:deep(.slick-slide h3) { |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.ad-item{ |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.ad-text{ |
|
|
|
top: 100px; |
|
|
|
left: 0; |
|
|
|
position: absolute; |
|
|
|
width: 1100px; |
|
|
|
margin: 0 20vw; |
|
|
|
z-index: 999; |
|
|
|
.title{ |
|
|
|
font-size: 50px; |
|
|
|
text-align: center; |
|
|
|
color: #ffffff; |
|
|
|
font-weight: bold; |
|
|
|
.ad-item { |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.desc{ |
|
|
|
color: #ffffff; |
|
|
|
text-align: center; |
|
|
|
.ad-text { |
|
|
|
display: none; |
|
|
|
top: 100px; |
|
|
|
left: 0; |
|
|
|
position: absolute; |
|
|
|
width: 1100px; |
|
|
|
margin: 0 20vw; |
|
|
|
z-index: 999; |
|
|
|
.title { |
|
|
|
font-size: 50px; |
|
|
|
text-align: center; |
|
|
|
color: #ffffff; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
.desc { |
|
|
|
color: #ffffff; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
.btn { |
|
|
|
text-align: center; |
|
|
|
margin-top: 30px; |
|
|
|
} |
|
|
|
} |
|
|
|
.btn{ |
|
|
|
text-align: center; |
|
|
|
margin-top: 30px; |
|
|
|
.slick-dots { |
|
|
|
background-color: #ff0000; |
|
|
|
font-size: 800px; |
|
|
|
width: 1000px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
gxwebsoft
1 year ago