odjbin/sist_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dengjie commit : 轮播图修改样式

Browse Source
This commit is contained in:
clay
2022-10-03 17:28:30 +08:00
parent 6f398077e5
commit b8e3653069
3 changed files with 218 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/views/index/components/carousel.vue
View File

@@ -1,15 +1,93 @@
<template>
<div style="width: 1000px; height: 1000px; background-color:red; font-size: 100px; color: white">
轮播
</div>
<el-row>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<div class="slideshow">
<el-carousel trigger="click" height="38vw">
<el-carousel-item v-for="(item,index) in bannerDate" :key="index">
<div v-show="$i18n.locale === 'cn'" @click="clickTo(item.link)">
<img :src="item.imgurl" alt="">
<!-- <div class="bottom_title">-->
<!-- <el-row>-->
<!-- <el-col :offset="2" :span="18">-->
<!-- {{ item.title }}-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </div>-->
</div>
<div v-show="$i18n.locale === 'en'" @click="clickTo(item.enLink)">
<img :src="item.imgurl" alt="">
<!-- <div class="bottom_title">-->
<!-- <el-row>-->
<!-- <el-col :offset="2" :span="18">-->
<!-- {{ item.enTitle }}-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </div>-->
</div>
</el-carousel-item>
</el-carousel>
</div>
</el-col>
</el-row>
</template>
<script>
import {banner} from "@/api";
export default {
name: "shuffling"
name: "carousel",
data() {
return {
bannerDate: [],
}
},
created() {
this.getBanner()
},
methods: {
clickTo(link) {
//console.log(link)
window.location.href = link;//当前标签页
},
getBanner() {
banner("NEd5n92EMIpyyBslaNqsRgE").then(res => {
this.bannerDate = res.data
})
}
}
}
</script>
<style scoped>
<style scoped lang="scss">
@import '../css/comment.css';
.slideshow {
width: 100%;
.el-carousel__arrow {
top: 93%;
display: block;
}
.bottom_title {
z-index: 99;
width: 100%;
height: 3.6vw;
background: #1956BC;
opacity: 0.89;
position: absolute;
bottom: 0;
line-height: 3.6vw;
font-size: 2rem;
font-family: "微软雅黑";
font-weight: 400;
color: #FFFFFF;
}
img {
width: 100%;
}
}
</style>

67
src/views/index/components/news_center.vue
View File

@@ -19,41 +19,40 @@
</div>
</div>
<!--录播图-->
<el-row>
<el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
<div class="grid-content"></div>
</el-col>
<el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
<div class="slideshow">
<el-carousel trigger="click" height="23.3vw">
<el-carousel-item v-for="(item,index) in bannerDate" :key="index">
<div v-show="$i18n.locale === 'cn'" @click="clickTo(item.link)">
<img :src="item.imgurl" alt="">
<div class="bottom_title">
<el-row>
<el-col :offset="2" :span="18">
{{ item.title }}
</el-col>
</el-row>
</div>
</div>
<div v-show="$i18n.locale === 'en'" @click="clickTo(item.enLink)">
<img :src="item.imgurl" alt="">
<div class="bottom_title">
<el-row>
<el-col :offset="2" :span="18">
{{ item.enTitle }}
</el-col>
</el-row>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
</el-col>
</el-row>
<!-- <el-row>-->
<!-- <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">-->
<!-- <div class="grid-content"></div>-->
<!-- </el-col>-->
<!-- <el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14">-->
<!-- <div class="slideshow">-->
<!-- <el-carousel trigger="click" height="23.3vw">-->
<!-- <el-carousel-item v-for="(item,index) in bannerDate" :key="index">-->
<!-- <div v-show="$i18n.locale === 'cn'" @click="clickTo(item.link)">-->
<!-- <img :src="item.imgurl" alt="">-->
<!-- <div class="bottom_title">-->
<!-- <el-row>-->
<!-- <el-col :offset="2" :span="18">-->
<!-- {{ item.title }}-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div v-show="$i18n.locale === 'en'" @click="clickTo(item.enLink)">-->
<!-- <img :src="item.imgurl" alt="">-->
<!-- <div class="bottom_title">-->
<!-- <el-row>-->
<!-- <el-col :offset="2" :span="18">-->
<!-- {{ item.enTitle }}-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-carousel-item>-->
<!-- </el-carousel>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!--轮播图下的新闻-->
<el-row>