ZhangBin
/
datang-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页轮播图修改

master
aBin 3 years ago
parent
c8ab690bdb
commit
ab538b2251
4 changed files with 78 additions and 124 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      package-lock.json
  2. 3
      package.json
  3. 58
      src/components/Banner/Banner.vue
  4. 129
      src/views/FirstPages/FirstPage.vue

12
package-lock.json
View File

@ -17,7 +17,6 @@
"quill": "^1.3.7",
"register-service-worker": "^1.7.1",
"stylus": "^0.54.8",
"swiper": "^8.0.6",
"vue": "^2.6.11",
"vue-baidu-map": "^0.21.22",
"vue-dompurify-html": "^2.5.0",
@ -48,6 +47,7 @@
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"svg-sprite-loader": "^5.0.0",
"swiper": "^8.0.6",
"vue-cli-plugin-ant-design": "^1.0.1",
"vue-cli-plugin-axios": "^0.0.4",
"vue-template-compiler": "^2.6.11"
@ -6259,6 +6259,7 @@
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
"integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
"dev": true,
"dependencies": {
"ssr-window": "^4.0.0"
}
@ -13662,7 +13663,8 @@
"node_modules/ssr-window": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
"integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
"integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==",
"dev": true
},
"node_modules/ssri": {
"version": "6.0.1",
@ -14406,6 +14408,7 @@
"version": "8.0.6",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-8.0.6.tgz",
"integrity": "sha512-Ssyu1+FeNATF/G8e84QG+ZUNtUOAZ5vngdgxzczh0oWZPhGUVgkdv+BoePUuaCXLAFXnwVpNjgLIcGnxMdmWPA==",
"dev": true,
"funding": [
{
"type": "patreon",
@ -21847,6 +21850,7 @@
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
"integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
"dev": true,
"requires": {
"ssr-window": "^4.0.0"
}
@ -27861,7 +27865,8 @@
"ssr-window": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
"integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
"integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==",
"dev": true
},
"ssri": {
"version": "6.0.1",
@ -28468,6 +28473,7 @@
"version": "8.0.6",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-8.0.6.tgz",
"integrity": "sha512-Ssyu1+FeNATF/G8e84QG+ZUNtUOAZ5vngdgxzczh0oWZPhGUVgkdv+BoePUuaCXLAFXnwVpNjgLIcGnxMdmWPA==",
"dev": true,
"requires": {
"dom7": "^4.0.4",
"ssr-window": "^4.0.2"

3
package.json
View File

@ -18,7 +18,7 @@
"quill": "^1.3.7",
"register-service-worker": "^1.7.1",
"stylus": "^0.54.8",
"swiper": "^8.0.6",
"swiper": "^5.4.5",
"vue": "^2.6.11",
"vue-baidu-map": "^0.21.22",
"vue-dompurify-html": "^2.5.0",
@ -49,6 +49,7 @@
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"svg-sprite-loader": "^5.0.0",
"swiper": "^8.0.6",
"vue-cli-plugin-ant-design": "^1.0.1",
"vue-cli-plugin-axios": "^0.0.4",
"vue-template-compiler": "^2.6.11"

58
src/components/Banner/Banner.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in ImgNews" :key="index">
<div class="swiper-slide" v-for="(item, index) in imgArr" :key="index">
<div class="rotation-box">
<img :src="item.titleUrl" style="height: 340px;width: 100%" alt="" />
<img :src="item.titleUrl" style="height: 280px;width: 100%" alt="" />
<div class="rotation-div one-text">
{{ item.title }}
</div>
@ -15,35 +15,56 @@
<script>
import Swiper from 'swiper';
import 'swiper/swiper.min.css';
// import 'swiper/swiper.min.css';
import 'swiper/css/swiper.css';
export default {
props: {
ImgNews: {
imgNews: {
default: () => [],
type: Array,
default: []
}
},
},
data() {
return {
bannerIndex: 2,
};
return { imgArr: [] };
},
mounted() {
let that = this;
/* eslint-disable */
let mySwiper = new Swiper('.swiper-container', {
new Swiper('.swiper-container', {
loop: true, // 循环模式选项
autoplay: true,//自动循环
slidesPerView: 3.8, //设置slider容器能够同时显示的slides数量(carousel模式)。
spaceBetween: -160, //在slide之间设置距离（单位px）。
spaceBetween: -200, //在slide之间设置距离（单位px）。
centeredSlides: true, //设置活动块居中
height: 274,
autoplay: {
delay: 3000,
disableOnInteraction: true,
pauseOnMouseEnter: true,
}, //自动循环
});
},
created() {
this.getFiveImg();
},
methods: {
getFiveImg() {
let imgArr = [...this.imgNews];
if (this.imgArr.length < 5) {
for (let i = 0; i < imgArr.length; i++) {
this.imgArr.push(imgArr[i]);
if (this.imgArr[i].length > 5) {
return;
}
}
this.getFiveImg();
}
},
},
};
</script>
<style lang="less" scoped>
.swiper-container{
.swiper-container {
width: 100%;
overflow: hidden;
}
@ -58,16 +79,17 @@ export default {
transform: scale(0.6);
}
.swiper-slide-active,.swiper-slide-duplicate-active {
.swiper-slide-active,
.swiper-slide-duplicate-active {
transform: scale(1);
}
.swiper-slide-next{
.swiper-slide-next {
transform: scale(0.8);
z-index: 998 !important;
}
.swiper-slide-prev{
.swiper-slide-prev {
transform: scale(0.8);
}
@ -77,8 +99,10 @@ export default {
.rotation-box {
position: relative;
border-radius: 5px 5px 0 0;
overflow: hidden;
width: 520px;
height: 340px;
height: 280px;
}
.rotation-div {

129
src/views/FirstPages/FirstPage.vue
View File

@ -82,105 +82,9 @@
<div class="d-flex align-center" style="height: 100%;cursor: pointer;" @click="openPage('news', '0204', '')">更多></div>
</div>
<!-- 轮播图 -->
<banner class="banner" :ImgNews="ImgNews1" />
<el-carousel :interval="4000" type="card" class="banner" indicator-position="none">
<el-carousel-item v-for="newContent in ImgNews1" :key="newContent.introId">
<div class="rotation-box">
<img :src="newContent.titleUrl" style="height: 340px;width: 100%" alt="" />
<div class="rotation-div one-text">
{{ newContent.title }}
</div>
</div>
</el-carousel-item>
</el-carousel>
<el-carousel :interval="4000" type="card" class="banner mt-4" indicator-position="none">
<el-carousel-item v-for="newContent in ImgNews2" :key="newContent.introId">
<div class="rotation-box">
<img :src="newContent.titleUrl" style="height: 340px;width: 100%" alt="" />
<div class="rotation-div one-text">
{{ newContent.title }}
</div>
</div>
</el-carousel-item>
</el-carousel>
<el-carousel :interval="4000" type="card" class="banner mt-4" indicator-position="none">
<el-carousel-item v-for="newContent in ImgNews3" :key="newContent.introId">
<div class="rotation-box">
<img :src="newContent.titleUrl" style="height: 340px;width: 100%" alt="" />
<div class="rotation-div one-text">
{{ newContent.title }}
</div>
</div>
</el-carousel-item>
</el-carousel>
<!-- <div class="flex-1 flex-column justify-space-between mt-4">
<div class="flex-1">
<div class="flex-1 mr-4">
<a-carousel style="width: 650px" autoplay>
<div class="rotation-box" v-for="newContent in ImgNews1" :key="newContent.introId">
<img :src="newContent.titleUrl" style="height: 369.5px;width: 100%" alt="" />
<div class="rotation-div one-text">
{{ newContent.title }}
</div>
</div>
</a-carousel>
</div>
<div class="news-img-content d-flex flex-column justify-space-between p-4">
<div class="d-flex" v-for="newContent in ImgNews1" :key="newContent.introId">
<div class="content-date">
<div class="content-date-day">{{ $moment(+newContent.publishTime).format('DD') }}</div>
<div class="content-date-year">{{ $moment(+newContent.publishTime).format('YYYY-MM') }}</div>
</div>
<div class="flex-1 new-box-content-jj" @click="openPage('news', '0201', newContent.introId)">{{ newContent.title }}</div>
</div>
</div>
</div>
<div class="flex-1 mt-4">
<div class="news-img-content d-flex flex-column justify-space-between p-4">
<div class="d-flex" v-for="newContent in ImgNews2" :key="newContent.introId">
<div class="content-date">
<div class="content-date-day">{{ $moment(+newContent.publishTime).format('DD') }}</div>
<div class="content-date-year">{{ $moment(+newContent.publishTime).format('YYYY-MM') }}</div>
</div>
<div class="flex-1 new-box-content-jj" @click="openPage('news', '0202', newContent.introId)">{{ newContent.title }}</div>
</div>
</div>
<div class="flex-1 ml-4">
<a-carousel style="width: 650px" autoplay>
<div class="rotation-box" v-for="newContent in ImgNews2" :key="newContent.introId">
<img :src="newContent.titleUrl" style="height: 369.5px;width: 100%" alt="" />
<div class="rotation-div one-text">
{{ newContent.title }}
</div>
</div>
</a-carousel>
</div>
</div>
<div class="flex-1 mt-4">
<div class="flex-1 mr-4">
<a-carousel style="width: 650px" autoplay>
<div class="rotation-box" v-for="newContent in ImgNews3" :key="newContent.introId">
<img :src="newContent.titleUrl" style="height: 369.5px;width: 100%" alt="" />
<div class="rotation-div one-text">
{{ newContent.title }}
</div>
</div>
</a-carousel>
</div>
<div class="news-img-content d-flex flex-column justify-space-between p-4">
<div class="d-flex" v-for="newContent in ImgNews3" :key="newContent.introId">
<div class="content-date">
<div class="content-date-day">{{ $moment(+newContent.publishTime).format('DD') }}</div>
<div class="content-date-year">{{ $moment(+newContent.publishTime).format('YYYY-MM') }}</div>
</div>
<div class="flex-1 new-box-content-jj" @click="openPage('news', '0203', newContent.introId)">{{ newContent.title }}</div>
</div>
</div>
</div>
</div> -->
<banner class="banner" key="ImgNews1" v-if="ImgNews1.length" :img-news="ImgNews1" />
<banner class="banner" key="ImgNews2" v-if="ImgNews2.length" :img-news="ImgNews2" />
<banner class="banner" key="ImgNews3" v-if="ImgNews3.length" :img-news="ImgNews3" />
</div>
<!-- 专题报道 光荣榜 今天我出镜 -->
<div class="honor-box mt-4 d-flex justify-space-between">
@ -249,8 +153,8 @@
<div class="demeanor-content-box">
<div
class="demeanor-content mr-4"
v-for="item in sceneStyle"
:key="item.introId"
v-for="(item, index) in sceneStyle"
:key="index"
@click="openPage('news', '0210', item.introId)"
>
<img :src="item.titleUrl" style="height:260px;width:100%;cursor: pointer;" :title="item.title" />
@ -260,8 +164,8 @@
</div>
<div
class="demeanor-content mr-4"
v-for="item in sceneStyle"
:key="item.introId + '1'"
v-for="(item, index) in sceneStyle"
:key="index + '1'"
@click="openPage('news', '0210', item.introId)"
>
<img :src="item.titleUrl" style="height:260px;width:100%;cursor: pointer;" :title="item.title" />
@ -316,6 +220,21 @@ export default {
},
methods: {
...mapActions('home', ['getContent']),
// 设置职工风采为5张图片
getFiveImg() {
console.log('sceneStyle: ');
let imgArr = [...this.sceneStyle];
if (imgArr.length < 5) {
for (let i = 0; i < imgArr.length; i++) {
this.sceneStyle.push(imgArr[i]);
if (this.sceneStyle[i].length > 5) {
return;
}
}
this.getFiveImg();
}
console.log('this.sceneStyle: ', this.sceneStyle);
},
async getData(showPage, list, showType) {
try {
const param = {
@ -327,6 +246,10 @@ export default {
};
const res = await this.getContent(param);
this[list] = res.list;
if (showPage === '0210') {
console.log('showPage: ', showPage);
this.getFiveImg();
}
} catch (error) {
console.log('error: ', error);
}

Write Preview
Loading…
Cancel
Save