@@ -12,6 +12,7 @@ | |||
"core-js": "^3.6.5", | |||
"element-ui": "^2.15.14", | |||
"identify": "^0.1.5", | |||
"swiper": "^3.4.0", | |||
"vue": "^2.6.11", | |||
"vue-router": "^3.5.2" | |||
}, | |||
@@ -16446,6 +16447,14 @@ | |||
"node": ">=4.0.0" | |||
} | |||
}, | |||
"node_modules/swiper": { | |||
"version": "3.4.0", | |||
"resolved": "https://registry.npmmirror.com/swiper/-/swiper-3.4.0.tgz", | |||
"integrity": "sha512-OE4bzIsNgxGhH44gzo6BndJwDmdEA8wIzMWc4c1EqHKPP/dz6iA/cj6DNGiTn1tDyUnaQx9jZnFCCmevcL8aTg==", | |||
"engines": { | |||
"node": ">= 0.10.0" | |||
} | |||
}, | |||
"node_modules/table": { | |||
"version": "5.4.6", | |||
"resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz", | |||
@@ -31797,6 +31806,11 @@ | |||
"util.promisify": "~1.0.0" | |||
} | |||
}, | |||
"swiper": { | |||
"version": "3.4.0", | |||
"resolved": "https://registry.npmmirror.com/swiper/-/swiper-3.4.0.tgz", | |||
"integrity": "sha512-OE4bzIsNgxGhH44gzo6BndJwDmdEA8wIzMWc4c1EqHKPP/dz6iA/cj6DNGiTn1tDyUnaQx9jZnFCCmevcL8aTg==" | |||
}, | |||
"table": { | |||
"version": "5.4.6", | |||
"resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz", | |||
@@ -12,6 +12,7 @@ | |||
"core-js": "^3.6.5", | |||
"element-ui": "^2.15.14", | |||
"identify": "^0.1.5", | |||
"swiper": "^3.4.0", | |||
"vue": "^2.6.11", | |||
"vue-router": "^3.5.2" | |||
}, | |||
@@ -0,0 +1,157 @@ | |||
<template> | |||
<div class="swiper-main"> | |||
<div class="swiper-content"> | |||
<div v-if="bannerArray.length === 1"> | |||
<div v-for="(item, index) in bannerArray" :key="index"> | |||
<img :src="item.image" @click="handleClickBanner(item, index)" /> | |||
</div> | |||
</div> | |||
<div class="swiper-container" v-if="bannerArray.length > 1"> | |||
<div class="swiper-wrapper"> | |||
<div | |||
class="swiper-slide" | |||
v-for="(item, index) in bannerArray" | |||
:key="index" | |||
> | |||
<img :src="item.image" @click="handleClickBanner(item, index)" /> | |||
<div class="txt"> | |||
<a class="title">{{ item.title }}</a> | |||
<a class="subtitle">{{ item.subtitle }}</a> | |||
</div> | |||
</div> | |||
</div> | |||
<!-- <div class="main"> | |||
<span class="swiper-button-prev" @click="handleClickPrev"></span> | |||
<span class="swiper-button-next" @click="handleClickNext"></span> | |||
</div> --> | |||
<div class="swiper-pagination"></div> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
/* eslint-disable */ | |||
import Swiper from 'swiper' | |||
import 'swiper/dist/js/swiper' | |||
import 'swiper/dist/css/swiper.css' | |||
export default { | |||
name: 'PBannerSwiper', | |||
props: { | |||
bannerArray: Array | |||
}, | |||
data() { | |||
return { } | |||
}, | |||
activated () { | |||
this.initSwiper() | |||
}, | |||
deactivated () { | |||
try { | |||
this.mySwiper?.destroy(true, true) | |||
this.mySwiper = null | |||
// eslint-disable-next-line no-empty | |||
} catch (error) {} | |||
}, | |||
mounted () { | |||
setTimeout(() => { | |||
this.initSwiper() | |||
}, 300) | |||
}, | |||
methods: { | |||
handleClickBanner (item, index) { | |||
if (!item.link) return | |||
item.newOpen === 1 ? window.open(item.link) : window.location.href = item.link | |||
}, | |||
handleClickPrev () {}, | |||
handleClickNext () {}, | |||
initSwiper () { | |||
this.mySwiper = new Swiper('.swiper-container', { | |||
pagination: '.swiper-pagination', | |||
paginationClickable: true, | |||
prevButton: '.swiper-button-prev', | |||
nextButton: '.swiper-button-next', | |||
autoplayDisableOnInteraction: false, | |||
onTransitionEnd: () => { | |||
this.$emit('bannerChange', this.realIndex) | |||
}, | |||
autoplay: 3000, | |||
effect: 'fade' | |||
}) | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
// @import '@/assets/styles/variables.scss'; | |||
.swiper-main { | |||
width: 100%; | |||
height: 590px; | |||
position: relative; | |||
} | |||
.swiper-container { | |||
height: 590px !important; | |||
img { | |||
width: 100%; | |||
} | |||
.txt { | |||
position: absolute; | |||
bottom: 78px; | |||
left: 0; | |||
right: 0; | |||
text-align: center; | |||
color: #fff; | |||
width: 1200px; | |||
margin: 0 auto; | |||
.title { | |||
font-size: 36px; | |||
font-weight: bold; | |||
text-align: center; | |||
margin-bottom: 15px; | |||
} | |||
.subtitle { | |||
font-size: 16px; | |||
font-weight: 400; | |||
text-align: center; | |||
display: block; | |||
color: #666; | |||
} | |||
} | |||
} | |||
.main { | |||
position: relative; | |||
width: 1200px; | |||
margin: 0 auto; | |||
} | |||
.swiper-content { | |||
position: absolute; | |||
width: 1920px; | |||
height: 590px; | |||
left: 50%; | |||
margin-left: -960px; | |||
} | |||
.swiper-button-prev, | |||
.swiper-button-next { | |||
margin-top: -200px; | |||
} | |||
.swiper-pagination .swiper-pagination-bullet-active { | |||
background: #00F6BD !important; | |||
} | |||
.swiper-pagination{ | |||
bottom: 30px; | |||
} | |||
</style> | |||
<style lang="scss"> | |||
.swiper-pagination .swiper-pagination-bullet { | |||
width: 25px; | |||
height: 2px; | |||
border-radius: 0 !important; | |||
} | |||
.swiper-pagination .swiper-pagination-bullet-active { | |||
background: #00F6BD !important; | |||
} | |||
</style> |
@@ -0,0 +1,127 @@ | |||
<template> | |||
<div class="swiper-main"> | |||
<!-- Swiper --> | |||
<div class="swiper-containerhor"> | |||
<div class="swiper-wrapper"> | |||
<div class="swiper-slide" v-for="(item, index) in bannerArray" :key="index"> | |||
<img :src="item.img"> | |||
<el-button>进入直播间</el-button> | |||
<div class="textzb"> | |||
<a class="titlezb">主播: {{ item.name }}</a> | |||
<a class="contentzb">内容: {{ item.content }}</a> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="main"> | |||
<span class="swiper-button-prev"></span> | |||
<span class="swiper-button-next"></span> | |||
</div> | |||
<!-- Add Pagination --> | |||
<!-- <div class="swiper-paginationhor"></div> --> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
/* eslint-disable */ | |||
import Swiper from 'swiper' | |||
import 'swiper/dist/js/swiper' | |||
import 'swiper/dist/css/swiper.css' | |||
export default { | |||
name: 'PBannerSwiper', | |||
props: { | |||
bannerArray: Array | |||
}, | |||
data() { | |||
return { } | |||
}, | |||
mounted() { | |||
setTimeout(() => { | |||
this.initSwiper() | |||
}, 300) | |||
}, | |||
methods: { | |||
handleClickBanner(item, index) { | |||
window.open(item.link) | |||
}, | |||
initSwiper() { | |||
this.mySwiper = new Swiper('.swiper-containerhor', { | |||
pagination: '.swiper-paginationhor', | |||
slidesPerView: 5, | |||
paginationClickable: true, | |||
prevButton: '.swiper-button-prev', | |||
nextButton: '.swiper-button-next', | |||
spaceBetween: 30, | |||
autoplay: 3000, | |||
loop: true | |||
}) | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.swiper-containerhor { | |||
width: 1200px; | |||
position: relative; | |||
overflow: hidden; | |||
} | |||
.swiper-slide { | |||
text-align: center; | |||
font-size: 18px; | |||
} | |||
.swiper-button-prev, .swiper-button-next{ | |||
width: 50px; | |||
height: 50px; | |||
position: absolute; | |||
top: 180px; | |||
background: url('../../assets/right.png') no-repeat; | |||
background-size: contain; | |||
} | |||
.swiper-button-prev{ | |||
position: absolute; | |||
background: url('../../assets/left.png') no-repeat; | |||
background-size: contain; | |||
} | |||
.swiper-slide { | |||
width: 230px; | |||
margin-right: 20px; | |||
img { | |||
width: 230px; | |||
display: block; | |||
} | |||
.el-button { | |||
margin-left: -73px; | |||
border: none; | |||
background: #07CAAF; | |||
font-size: 18px; | |||
font-weight: bold; | |||
color: #FFFFFF; | |||
padding-top: 0px; | |||
padding-bottom: 0px; | |||
width: 146px; | |||
height: 44px; | |||
position: absolute; | |||
top: 310px; | |||
left: 50%; | |||
} | |||
.textzb { | |||
font-size: 18px; | |||
font-weight: bold; | |||
color: #030303; | |||
line-height: 16px; | |||
margin-top: 18px; | |||
line-height: 30px; | |||
a { | |||
display: inline-block; | |||
text-align: center; | |||
display: block; | |||
} | |||
.contentzb{ | |||
margin-top: 10px; | |||
} | |||
} | |||
} | |||
</style> |
@@ -1,14 +1,7 @@ | |||
<template> | |||
<div class="aigc"> | |||
<div id="top"> | |||
<el-carousel > | |||
<el-carousel-item class="lunbo" v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | |||
<div id="txt"> | |||
<a class="title">{{ item.title }}</a> | |||
<a class="subtitle">{{ item.subtitle }}</a> | |||
</div> | |||
</el-carousel-item> | |||
</el-carousel> | |||
<Swiper :banner-array="carouselList" /> | |||
<el-form ref="form" :model="form" label-width="0px"> | |||
<el-form-item> | |||
<el-input v-model="form.name" placeholder="手机号"></el-input> | |||
@@ -59,7 +52,8 @@ | |||
<div id="szr"> | |||
<a>数字人视频</a> | |||
</div> | |||
<div id="zb"> | |||
<SwiperHor :banner-array="aigczb" /> | |||
<!-- <div id="zb"> | |||
<img src="@/assets/left.png"> | |||
<div id="zbitem"> | |||
<template v-for="(item, index) in aigczb" > | |||
@@ -81,7 +75,7 @@ | |||
</template> | |||
</div> | |||
<img src="@/assets/right.png"> | |||
</div> | |||
</div> --> | |||
</div> | |||
</div> | |||
<div class="gg gg2"> | |||
@@ -93,6 +87,8 @@ | |||
</div> | |||
</template> | |||
<script> | |||
import Swiper from '@/components/swiper' | |||
import SwiperHor from '@/components/swiperHor' | |||
import SIdentify from '@/components/identify' | |||
import { guanggao, shuzirenremark, shuzirenList, shuzirenZhiBoList, videoList, lunboList } from '@/api/aigc.js' | |||
export default { | |||
@@ -127,7 +123,9 @@ export default { | |||
} | |||
}, | |||
components: { | |||
SIdentify | |||
SIdentify, | |||
Swiper, | |||
SwiperHor | |||
}, | |||
mounted () { | |||
this.identifyCode = '' | |||
@@ -144,11 +142,7 @@ export default { | |||
async getlunboList () { | |||
const { data: { message, data } } = await lunboList() | |||
if (message === 'success') { | |||
for (const iter of data.list) { | |||
this.carouselList.push({ | |||
src: iter.image | |||
}) | |||
} | |||
this.carouselList = data.list | |||
} | |||
}, | |||
async getguanggao () { | |||
@@ -288,10 +282,6 @@ export default { | |||
} | |||
} | |||
} | |||
.lunbo { | |||
background-size: auto; | |||
background-position: center; | |||
} | |||
#top { | |||
height: 590px; | |||
width: 100%; | |||
@@ -473,6 +463,7 @@ export default { | |||
flex-direction: column; | |||
justify-content: space-between; | |||
#szr { | |||
margin-bottom: 30px; | |||
a { | |||
font-size: 30px; | |||
font-weight: bold; | |||
@@ -1,13 +1,6 @@ | |||
<template> | |||
<div> | |||
<el-carousel > | |||
<el-carousel-item v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | |||
<div id="txt"> | |||
<a class="title">{{ item.title }}</a> | |||
<a class="subtitle">{{ item.subtitle }}</a> | |||
</div> | |||
</el-carousel-item> | |||
</el-carousel> | |||
<Swiper :banner-array="carouselList" /> | |||
<div id="hot"> | |||
<div class="content"> | |||
<div class="list" v-html="article"> | |||
@@ -37,6 +30,7 @@ | |||
</div> | |||
</template> | |||
<script> | |||
import Swiper from '@/components/swiper' | |||
export default { | |||
name: 'home', | |||
data () { | |||
@@ -97,6 +91,7 @@ export default { | |||
} | |||
}, | |||
components: { | |||
Swiper | |||
}, | |||
mounted () { | |||
this.article = localStorage.getItem('article') | |||
@@ -1,13 +1,6 @@ | |||
<template> | |||
<div> | |||
<el-carousel > | |||
<el-carousel-item v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | |||
<div id="txt"> | |||
<a class="title">{{ item.title }}</a> | |||
<a class="subtitle">{{ item.subtitle }}</a> | |||
</div> | |||
</el-carousel-item> | |||
</el-carousel> | |||
<Swiper :banner-array="carouselList" /> | |||
<div id="hot"> | |||
<div class="content"> | |||
<div class="list"> | |||
@@ -52,6 +45,7 @@ | |||
</div> | |||
</template> | |||
<script> | |||
import Swiper from '@/components/swiper' | |||
export default { | |||
name: 'home', | |||
data () { | |||
@@ -111,6 +105,7 @@ export default { | |||
} | |||
}, | |||
components: { | |||
Swiper | |||
} | |||
} | |||
</script> | |||
@@ -1,15 +1,6 @@ | |||
<template> | |||
<div> | |||
<el-carousel > | |||
<el-carousel-item class="lunbo" v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | |||
<a :href="item.link"> | |||
<div id="txt"> | |||
<a class="title">{{ item.title }}</a> | |||
<a class="subtitle">{{ item.subtitle }}</a> | |||
</div> | |||
</a> | |||
</el-carousel-item> | |||
</el-carousel> | |||
<Swiper :banner-array="carouselList" /> | |||
<div id="hot"> | |||
<div class="content"> | |||
<div class="top"> | |||
@@ -83,7 +74,10 @@ | |||
</div> | |||
</template> | |||
<script> | |||
/* eslint-disable */ | |||
import { lunboList, carNewsHotList, guanggao, link, yuanyuzhouHotList, hotnewsConfig } from '@/api/home.js' | |||
import Swiper from '@/components/swiper' | |||
export default { | |||
name: 'home', | |||
data () { | |||
@@ -106,8 +100,7 @@ export default { | |||
display: 0 | |||
} | |||
}, | |||
components: { | |||
}, | |||
components: { Swiper }, | |||
mounted () { | |||
this.gethotnewsConfig() | |||
this.getlunboList() | |||
@@ -120,14 +113,7 @@ export default { | |||
async getlunboList () { | |||
const { data: { message, data } } = await lunboList() | |||
if (message === 'success') { | |||
for (const iter of data.list) { | |||
this.carouselList.push({ | |||
src: iter.image, | |||
title: iter.title, | |||
subtitle: iter.subtitle, | |||
link: iter.link | |||
}) | |||
} | |||
this.carouselList = data.list | |||
} | |||
}, | |||
async getcarNewsHotList () { | |||
@@ -226,14 +212,6 @@ export default { | |||
} | |||
} | |||
} | |||
.lunbo { | |||
background-size: auto; | |||
background-position: center; | |||
a{ | |||
width: 100%; | |||
height: 100%; | |||
} | |||
} | |||
#hot, #daliay { | |||
width: 100%; | |||
background: #E3E5EA; | |||
@@ -1,13 +1,6 @@ | |||
<template> | |||
<div> | |||
<el-carousel > | |||
<el-carousel-item class="lunbo" v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | |||
<div id="txt"> | |||
<a class="title">{{ item.title }}</a> | |||
<a class="subtitle">{{ item.subtitle }}</a> | |||
</div> | |||
</el-carousel-item> | |||
</el-carousel> | |||
<Swiper :banner-array="carouselList" /> | |||
<div id="hot"> | |||
<div class="content"> | |||
<div class="top" v-if="display"> | |||
@@ -68,6 +61,7 @@ | |||
</div> | |||
</template> | |||
<script> | |||
import Swiper from '@/components/swiper' | |||
import { lunboList, hotNewsConfig, guanggao, hotlist, videoList } from '@/api/car.js' | |||
export default { | |||
name: 'information', | |||
@@ -90,6 +84,7 @@ export default { | |||
} | |||
}, | |||
components: { | |||
Swiper | |||
}, | |||
mounted () { | |||
this.gethotnewsConfig() | |||
@@ -109,14 +104,7 @@ export default { | |||
async getlunboList () { | |||
const { data: { message, data } } = await lunboList() | |||
if (message === 'success') { | |||
for (const iter of data.list) { | |||
this.carouselList.push({ | |||
src: iter.image, | |||
title: iter.title, | |||
subtitle: iter.subtitle, | |||
link: iter.link | |||
}) | |||
} | |||
this.carouselList = data.list | |||
} | |||
}, | |||
async gethotnewsConfig () { | |||
@@ -202,10 +190,6 @@ export default { | |||
} | |||
} | |||
} | |||
.lunbo { | |||
background-size: auto; | |||
background-position: center; | |||
} | |||
#hot, #daliay, #wk { | |||
width: 100%; | |||
background: #E3E5EA; | |||
@@ -1,13 +1,6 @@ | |||
<template> | |||
<div class="metadaily"> | |||
<el-carousel > | |||
<el-carousel-item class="lunbo" v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | |||
<div id="txt"> | |||
<a class="title">{{ item.title }}</a> | |||
<a class="subtitle">{{ item.subtitle }}</a> | |||
</div> | |||
</el-carousel-item> | |||
</el-carousel> | |||
<Swiper :banner-array="carouselList" /> | |||
<div id="hot"> | |||
<div class="content"> | |||
<div class="top" v-if="display"> | |||
@@ -85,7 +78,7 @@ | |||
</div> | |||
</template> | |||
<script> | |||
// zixun | |||
import Swiper from '@/components/swiper' | |||
import { guanggao, lunboList, hotNewsConfig, shendu, zixun, hotnews } from '@/api/metadaily.js' | |||
export default { | |||
name: 'metadaily', | |||
@@ -106,6 +99,7 @@ export default { | |||
} | |||
}, | |||
components: { | |||
Swiper | |||
}, | |||
mounted () { | |||
this.gethotnewsConfig() | |||
@@ -149,14 +143,7 @@ export default { | |||
async getlunboList () { | |||
const { data: { message, data } } = await lunboList() | |||
if (message === 'success') { | |||
for (const iter of data.list) { | |||
this.carouselList.push({ | |||
src: iter.image, | |||
title: iter.title, | |||
subtitle: iter.subtitle, | |||
link: iter.link | |||
}) | |||
} | |||
this.carouselList = data.list | |||
} | |||
}, | |||
async gethotnewsConfig () { | |||