| @@ -12,6 +12,7 @@ | |||||
| "core-js": "^3.6.5", | "core-js": "^3.6.5", | ||||
| "element-ui": "^2.15.14", | "element-ui": "^2.15.14", | ||||
| "identify": "^0.1.5", | "identify": "^0.1.5", | ||||
| "swiper": "^3.4.0", | |||||
| "vue": "^2.6.11", | "vue": "^2.6.11", | ||||
| "vue-router": "^3.5.2" | "vue-router": "^3.5.2" | ||||
| }, | }, | ||||
| @@ -16446,6 +16447,14 @@ | |||||
| "node": ">=4.0.0" | "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": { | "node_modules/table": { | ||||
| "version": "5.4.6", | "version": "5.4.6", | ||||
| "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz", | "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz", | ||||
| @@ -31797,6 +31806,11 @@ | |||||
| "util.promisify": "~1.0.0" | "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": { | "table": { | ||||
| "version": "5.4.6", | "version": "5.4.6", | ||||
| "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz", | "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz", | ||||
| @@ -12,6 +12,7 @@ | |||||
| "core-js": "^3.6.5", | "core-js": "^3.6.5", | ||||
| "element-ui": "^2.15.14", | "element-ui": "^2.15.14", | ||||
| "identify": "^0.1.5", | "identify": "^0.1.5", | ||||
| "swiper": "^3.4.0", | |||||
| "vue": "^2.6.11", | "vue": "^2.6.11", | ||||
| "vue-router": "^3.5.2" | "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> | <template> | ||||
| <div class="aigc"> | <div class="aigc"> | ||||
| <div id="top"> | <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 ref="form" :model="form" label-width="0px"> | ||||
| <el-form-item> | <el-form-item> | ||||
| <el-input v-model="form.name" placeholder="手机号"></el-input> | <el-input v-model="form.name" placeholder="手机号"></el-input> | ||||
| @@ -59,7 +52,8 @@ | |||||
| <div id="szr"> | <div id="szr"> | ||||
| <a>数字人视频</a> | <a>数字人视频</a> | ||||
| </div> | </div> | ||||
| <div id="zb"> | |||||
| <SwiperHor :banner-array="aigczb" /> | |||||
| <!-- <div id="zb"> | |||||
| <img src="@/assets/left.png"> | <img src="@/assets/left.png"> | ||||
| <div id="zbitem"> | <div id="zbitem"> | ||||
| <template v-for="(item, index) in aigczb" > | <template v-for="(item, index) in aigczb" > | ||||
| @@ -81,7 +75,7 @@ | |||||
| </template> | </template> | ||||
| </div> | </div> | ||||
| <img src="@/assets/right.png"> | <img src="@/assets/right.png"> | ||||
| </div> | |||||
| </div> --> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="gg gg2"> | <div class="gg gg2"> | ||||
| @@ -93,6 +87,8 @@ | |||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import Swiper from '@/components/swiper' | |||||
| import SwiperHor from '@/components/swiperHor' | |||||
| import SIdentify from '@/components/identify' | import SIdentify from '@/components/identify' | ||||
| import { guanggao, shuzirenremark, shuzirenList, shuzirenZhiBoList, videoList, lunboList } from '@/api/aigc.js' | import { guanggao, shuzirenremark, shuzirenList, shuzirenZhiBoList, videoList, lunboList } from '@/api/aigc.js' | ||||
| export default { | export default { | ||||
| @@ -127,7 +123,9 @@ export default { | |||||
| } | } | ||||
| }, | }, | ||||
| components: { | components: { | ||||
| SIdentify | |||||
| SIdentify, | |||||
| Swiper, | |||||
| SwiperHor | |||||
| }, | }, | ||||
| mounted () { | mounted () { | ||||
| this.identifyCode = '' | this.identifyCode = '' | ||||
| @@ -144,11 +142,7 @@ export default { | |||||
| async getlunboList () { | async getlunboList () { | ||||
| const { data: { message, data } } = await lunboList() | const { data: { message, data } } = await lunboList() | ||||
| if (message === 'success') { | if (message === 'success') { | ||||
| for (const iter of data.list) { | |||||
| this.carouselList.push({ | |||||
| src: iter.image | |||||
| }) | |||||
| } | |||||
| this.carouselList = data.list | |||||
| } | } | ||||
| }, | }, | ||||
| async getguanggao () { | async getguanggao () { | ||||
| @@ -288,10 +282,6 @@ export default { | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| .lunbo { | |||||
| background-size: auto; | |||||
| background-position: center; | |||||
| } | |||||
| #top { | #top { | ||||
| height: 590px; | height: 590px; | ||||
| width: 100%; | width: 100%; | ||||
| @@ -473,6 +463,7 @@ export default { | |||||
| flex-direction: column; | flex-direction: column; | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| #szr { | #szr { | ||||
| margin-bottom: 30px; | |||||
| a { | a { | ||||
| font-size: 30px; | font-size: 30px; | ||||
| font-weight: bold; | font-weight: bold; | ||||
| @@ -1,13 +1,6 @@ | |||||
| <template> | <template> | ||||
| <div> | <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 id="hot"> | ||||
| <div class="content"> | <div class="content"> | ||||
| <div class="list" v-html="article"> | <div class="list" v-html="article"> | ||||
| @@ -37,6 +30,7 @@ | |||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import Swiper from '@/components/swiper' | |||||
| export default { | export default { | ||||
| name: 'home', | name: 'home', | ||||
| data () { | data () { | ||||
| @@ -97,6 +91,7 @@ export default { | |||||
| } | } | ||||
| }, | }, | ||||
| components: { | components: { | ||||
| Swiper | |||||
| }, | }, | ||||
| mounted () { | mounted () { | ||||
| this.article = localStorage.getItem('article') | this.article = localStorage.getItem('article') | ||||
| @@ -1,13 +1,6 @@ | |||||
| <template> | <template> | ||||
| <div> | <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 id="hot"> | ||||
| <div class="content"> | <div class="content"> | ||||
| <div class="list"> | <div class="list"> | ||||
| @@ -52,6 +45,7 @@ | |||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import Swiper from '@/components/swiper' | |||||
| export default { | export default { | ||||
| name: 'home', | name: 'home', | ||||
| data () { | data () { | ||||
| @@ -111,6 +105,7 @@ export default { | |||||
| } | } | ||||
| }, | }, | ||||
| components: { | components: { | ||||
| Swiper | |||||
| } | } | ||||
| } | } | ||||
| </script> | </script> | ||||
| @@ -1,15 +1,6 @@ | |||||
| <template> | <template> | ||||
| <div> | <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 id="hot"> | ||||
| <div class="content"> | <div class="content"> | ||||
| <div class="top"> | <div class="top"> | ||||
| @@ -83,7 +74,10 @@ | |||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| /* eslint-disable */ | |||||
| import { lunboList, carNewsHotList, guanggao, link, yuanyuzhouHotList, hotnewsConfig } from '@/api/home.js' | import { lunboList, carNewsHotList, guanggao, link, yuanyuzhouHotList, hotnewsConfig } from '@/api/home.js' | ||||
| import Swiper from '@/components/swiper' | |||||
| export default { | export default { | ||||
| name: 'home', | name: 'home', | ||||
| data () { | data () { | ||||
| @@ -106,8 +100,7 @@ export default { | |||||
| display: 0 | display: 0 | ||||
| } | } | ||||
| }, | }, | ||||
| components: { | |||||
| }, | |||||
| components: { Swiper }, | |||||
| mounted () { | mounted () { | ||||
| this.gethotnewsConfig() | this.gethotnewsConfig() | ||||
| this.getlunboList() | this.getlunboList() | ||||
| @@ -120,14 +113,7 @@ export default { | |||||
| async getlunboList () { | async getlunboList () { | ||||
| const { data: { message, data } } = await lunboList() | const { data: { message, data } } = await lunboList() | ||||
| if (message === 'success') { | 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 () { | async getcarNewsHotList () { | ||||
| @@ -226,14 +212,6 @@ export default { | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| .lunbo { | |||||
| background-size: auto; | |||||
| background-position: center; | |||||
| a{ | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| } | |||||
| #hot, #daliay { | #hot, #daliay { | ||||
| width: 100%; | width: 100%; | ||||
| background: #E3E5EA; | background: #E3E5EA; | ||||
| @@ -1,13 +1,6 @@ | |||||
| <template> | <template> | ||||
| <div> | <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 id="hot"> | ||||
| <div class="content"> | <div class="content"> | ||||
| <div class="top" v-if="display"> | <div class="top" v-if="display"> | ||||
| @@ -68,6 +61,7 @@ | |||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import Swiper from '@/components/swiper' | |||||
| import { lunboList, hotNewsConfig, guanggao, hotlist, videoList } from '@/api/car.js' | import { lunboList, hotNewsConfig, guanggao, hotlist, videoList } from '@/api/car.js' | ||||
| export default { | export default { | ||||
| name: 'information', | name: 'information', | ||||
| @@ -90,6 +84,7 @@ export default { | |||||
| } | } | ||||
| }, | }, | ||||
| components: { | components: { | ||||
| Swiper | |||||
| }, | }, | ||||
| mounted () { | mounted () { | ||||
| this.gethotnewsConfig() | this.gethotnewsConfig() | ||||
| @@ -109,14 +104,7 @@ export default { | |||||
| async getlunboList () { | async getlunboList () { | ||||
| const { data: { message, data } } = await lunboList() | const { data: { message, data } } = await lunboList() | ||||
| if (message === 'success') { | 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 () { | async gethotnewsConfig () { | ||||
| @@ -202,10 +190,6 @@ export default { | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| .lunbo { | |||||
| background-size: auto; | |||||
| background-position: center; | |||||
| } | |||||
| #hot, #daliay, #wk { | #hot, #daliay, #wk { | ||||
| width: 100%; | width: 100%; | ||||
| background: #E3E5EA; | background: #E3E5EA; | ||||
| @@ -1,13 +1,6 @@ | |||||
| <template> | <template> | ||||
| <div class="metadaily"> | <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 id="hot"> | ||||
| <div class="content"> | <div class="content"> | ||||
| <div class="top" v-if="display"> | <div class="top" v-if="display"> | ||||
| @@ -85,7 +78,7 @@ | |||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| // zixun | |||||
| import Swiper from '@/components/swiper' | |||||
| import { guanggao, lunboList, hotNewsConfig, shendu, zixun, hotnews } from '@/api/metadaily.js' | import { guanggao, lunboList, hotNewsConfig, shendu, zixun, hotnews } from '@/api/metadaily.js' | ||||
| export default { | export default { | ||||
| name: 'metadaily', | name: 'metadaily', | ||||
| @@ -106,6 +99,7 @@ export default { | |||||
| } | } | ||||
| }, | }, | ||||
| components: { | components: { | ||||
| Swiper | |||||
| }, | }, | ||||
| mounted () { | mounted () { | ||||
| this.gethotnewsConfig() | this.gethotnewsConfig() | ||||
| @@ -149,14 +143,7 @@ export default { | |||||
| async getlunboList () { | async getlunboList () { | ||||
| const { data: { message, data } } = await lunboList() | const { data: { message, data } } = await lunboList() | ||||
| if (message === 'success') { | 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 () { | async gethotnewsConfig () { | ||||