| @@ -3,7 +3,7 @@ | |||
| <div class="swiper-content"> | |||
| <div v-if="bannerArray.length === 1"> | |||
| <div v-for="(item, index) in bannerArray" :key="index"> | |||
| <img :src="item.src" @click="handleClickBanner(item, index)" /> | |||
| <img :src="item.image" @click="handleClickBanner(item, index)" /> | |||
| </div> | |||
| </div> | |||
| <div class="swiper-container" v-if="bannerArray.length > 1"> | |||
| @@ -13,10 +13,10 @@ | |||
| v-for="(item, index) in bannerArray" | |||
| :key="index" | |||
| > | |||
| <img :src="item.src" @click="handleClickBanner(item, index)" /> | |||
| <img :src="item.image" @click="handleClickBanner(item, index)" /> | |||
| <div class="txt"> | |||
| <a class="title">{{ item.title }}</a> | |||
| <a class="subtitle">国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。</a> | |||
| <a class="subtitle">{{ item.subtitle }}</a> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| @@ -60,7 +60,8 @@ export default { | |||
| }, | |||
| methods: { | |||
| handleClickBanner (item, index) { | |||
| window.open(item.link) | |||
| if (!item.link) return | |||
| item.newOpen === 1 ? window.open(item.link) : window.location.href = item.link | |||
| }, | |||
| handleClickPrev () {}, | |||
| handleClickNext () {}, | |||
| @@ -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> | |||
| @@ -110,14 +110,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 () { | |||
| @@ -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 () { | |||