废话不多说直接上代
多余没用的部分自己看着删除
<template>
<div class="showImg">
<el-carousel ref="carousel" trigger="hover" :autoplay="false" class="dimControl" :height="`${(currenInnerWith*0.375) > 3840 ? 1440 : currenInnerWith*0.375}px`"
@change="carouselChange" :interval="5000" arrow="never" style="cursor: pointer;">
<el-carousel-item v-for="(item,index) in imgArr" :key="item.id">
<!-- @timeupdate="commonVideoUpdata(index,'video')" -->
<template v-if="item.banner_type==2 && isIndex==index">
<video
:ref="'videoRef'+index"
@click="gotoBanner(item)"
class="box-bg video-bg"
:class="'videoRef'+index"
:id="'videoRef'+index"
:muted="true"
autoplay="autoplay"
@mouseover="changeInterval(true)"
@mouseleave="changeInterval(false)"
:poster="item.video_cover_url"
:src="item.video_url"/>
<span v-if="isAudioBox" class="audio-box" @click="handleAudio(index,9)">
<i v-if="!isIcon" class="iconfont audio-icon" @click.stop="handleAudio(index,true)"></i>
<i v-if="isIcon" class="iconfont audio-icon" @click.stop="handleAudio(index,false)"></i>
</span>
</template>
<div
v-else
@click="gotoBanner(item)"
class="box-bg"
@mouseover="changeInterval(true)"
@mouseleave="changeInterval(false)"
:style="`background-image:url(${item.url});height:${(currenInnerWith*0.375) > 3840?1440:currenInnerWith*0.375}px`"
alt="#"
:src="item.url"
/>
</el-carousel-item>
</el-carousel>
<div class="category-list">
</div>
</div>
</template>
<script>
import axiosSrr from "@/plugins/ssr-axios";
export default {
props: {
datas: {
type: Object
},
isSwiperTool: {
type: Boolean,
default: true
}
},
async fetch(){
return axiosSrr.post("/banner/OWI_GetBanner", {
banner_code: "home_banner"
}).then((res) => {
let retData = [];
res.data.data.entities.forEach((item, i) => {
let arr = {};
arr.url = item.image_url;
arr.id = i;
arr.display_order = Number(item.display_order);
arr.redirect_url = item.redirect_url;
arr.banner_type = item.banner_type;
arr.image_url2 = item.image_url2;
arr.image_url3 = item.image_url3;
arr.video_cover_url = item.video_cover_url;
arr.video_url = item.video_url;
retData.push(arr);
});
this.imgArr = retData;
this.banner_duration = res.data.data.banner_duration
});
},
data() {
return {
currentIndex: 0,
timer: null,
imgArr: [],
carouselData: {
pic: {
master: [
require("@/assets/banner-bg/banner1_4k.png"),
require("@/assets/banner-bg/banner1_4k.png"),
require("@/assets/banner-bg/banner1_4k.png")
],
gifs: require("@/assets/img/dynamic_graph.png")
}
},
screenWidth: 1440,
industryData: [],
notice: '',
currentTimeProgress: 0,
isIndex: 0,
intervalId: null,
timeInterval: null,
banner_duration: 5,
isAudio: false,
isIcon: false,
isAudioBox: false,
isCount: 0,
currenInnerWith:1920,
loopTimer:false,
};
},
methods: {
openTip() {
},
async getNotice() {
let dataRet = await this.$axios.post("common_api/OWI_GetAnnouncementList")
this.notice = dataRet.data.msg_list
},
screenChange(e) {
if(!process.browser){
return
}
let width = document.body.clientWidth;
let p = "";
if (width < 2048) {
p = e[0];
} else if (2048 <= width && width < 3840) {
p = e[1];
} else {
p = e[2];
}
return p;
},
startIntervals() {
clearInterval(this.timer);
this.timer = setInterval(() => {
this.currentIndex++;
if (this.currentIndex > this.imgArr.length - 1) {
this.currentIndex = 0;
}
}, 5000);
},
clickIcon(val) {
if (val === "down") {
this.currentIndex++;
if (this.currentIndex === this.imgArr.length) {
this.currentIndex = 0;
}
} else {
if (this.currentIndex === 0) {
this.currentIndex = this.imgArr.length;
}
this.currentIndex--;
}
},
changeImg(index) {
this.currentIndex = index;
},
enter(e, id) {
this.currentIndex = id;
},
changeInterval(val) {
if (val) {
clearInterval(this.timer);
} else {
}
},
gotoBanner(val) {
if (val.redirect_url) {
window.open(val.redirect_url);
}
},
getIndustryImg(val) {
switch (val) {
case "直播":
return require("@/assets/img/cover_trade_ZhiBo.png");
break;
case "数字营销":
return require("@/assets/img/cover_trade_ShuZiYingXiao.png");
break;
case "数据新闻":
return require("@/assets/img/cover_trade_ShuJuXinWen.png");
break;
case "短视频":
return require("@/assets/img/cover_trade_DuanShiPin.png");
break;
case "数字创意":
return require("@/assets/img/cover_trade_ShuZiChuangYi@2x.png");
break;
case "数字文物":
return require("@/assets/img/cover_trade_ShuZiWenWu@2x.png");
break;
case "桥梁模型":
return require("@/assets/img/cover_trade_bridge@2x.png");
break;
case "数字信息":
return require("@/assets/img/cover_trade_ShuZiXinXi.png");
break;
}
},
async getIndustryApplication() {
let res = await this.$axios.post("/banner/OWI_GetBanner", {
banner_code: "home_industry_application"
});
let arr=[]
let arrSort=res.data.entities?.sort((a, b) => {
return a.display_order - b.display_order;
})
arrSort?.map(item=>{
arr.push({
url: item.redirect_url,
bg: item.image_url
})
})
if (process.browser) {
this.$nextTick(() => {
this.industryData = arr
})
}
},
async getindustryData() {
let res = await this.$axios.post("/api_source/OWI_TreeCategoryV2", {
category_type: 10,
current_category_show_id: "",
only_show_categories: true
});
this.industryData = [];
let industryIndex = 0;
let mapData = new Map();
res.data.entities.forEach(item => {
let industryitem = item.self;
industryitem.bg = this.getIndustryImg(industryitem.name);
industryitem.url = `/web_site_front/resources/resources_model_new1?parentVal=行业应用&ClassName=${industryitem.name}&showId=${industryitem.show_id}`;
industryitem.title = industryitem.name;
mapData.set(industryitem.title, industryitem)
});
let freeObj = {
name: '限时免费',
url: 'https://www.cgpool.com/web_site_front/resourcesArea/resources_zone_info?id=300',
bg: require('@/assets/img/cover_trade_Xianshi@2x.png')
}
mapData.set(freeObj.name, freeObj)
let bridge = {
name: '桥梁模型',
url: 'https://www.cgpool.com/web_site_front/resourcesArea/resources_zone_info?id=290',
bg: require('@/assets/img/cover_trade_bridge@2x.png')
}
mapData.set(bridge.name, bridge)
let digiDecoration = {
name: '数字家装',
url: 'https://www.cgpool.com/web_site_front/resourcesArea/resources_zone_info?id=301',
bg: require('@/assets/img/cover_trade_jiazhuang@2x.png')
}
mapData.set(digiDecoration.name, digiDecoration)
let intelligentManufacture = {
name: '智能制造',
url: 'https://www.cgpool.com/web_site_front/resourcesArea/resources_zone_info?id=209',
bg: require('@/assets/img/cover_trade_zhizao@2x.png')
}
mapData.set(intelligentManufacture.name, intelligentManufacture)
let BAndB = {
name: '民宿模型',
url: 'https://www.cgpool.com/web_site_front/resourcesArea/resources_zone_info?id=292',
bg: require('@/assets/img/cover_trade_minsu@2x.png')
}
mapData.set(BAndB.name, BAndB)
let tmpArray = [];
let Index1 = mapData.get("限时免费")
tmpArray.push(Index1)
let Index2 = mapData.get("数字创意")
tmpArray.push(Index2)
let Index3 = mapData.get("数字家装")
tmpArray.push(Index3)
let Index4 = mapData.get("智能制造")
tmpArray.push(Index4)
let Index5 = mapData.get("桥梁模型")
tmpArray.push(Index5)
let Index6 = mapData.get("民宿模型")
tmpArray.push(Index6)
},
async getBanner() {
let res = await this.$axios.post("/banner/OWI_GetBanner", {
banner_code: "home_banner"
});
this.banner_duration = res.data.banner_duration;
this.imgArr=[]
res.data.entities.forEach((item, i) => {
let arr = {};
arr.url = item.image_url;
arr.id = i;
arr.display_order = Number(item.display_order);
arr.redirect_url = item.redirect_url;
arr.banner_type = item.banner_type;
arr.image_url2 = item.image_url2;
arr.image_url3 = item.image_url3;
arr.video_cover_url = item.video_cover_url;
arr.video_url = item.video_url;
this.imgArr.push(arr);
});
if (this.imgArr.length > 0) {
this.createElChange()
this.carouselChange(0)
}
},
commonVideoUpdata(id, type) {
const self = this
if(!process.browser){
return
}
let videoEl = document.getElementsByClassName('videoRef' + id)
videoEl[0]?.addEventListener("timeupdate", function () {
let el = document.querySelector(".new-indicator")
if (el) {
let currTime = this.currentTime
let duration = this.duration
let pre = currTime / duration
self.setStyleHandel(pre * 40)
if (this.currentTime == this.duration) {
self.handelNext()
return
}
}
})
},
handleToggleImg() {
const self = this
let time = self.banner_duration * 1000
let times = self.banner_duration * 1000 + 300
clearInterval(self.intervalId);
if(!process.browser){
return
}
let el = document.querySelector(".new-indicator")
if (el) {
let count = 0;
function executeTask() {
count++;
self.setStyleHandel((40 / (time / 100)) * count)
if (count === time / 100) {
clearInterval(self.intervalId);
}
}
self.intervalId = setInterval(executeTask, 100);
clearInterval(self.timeInterval);
self.timeInterval = setInterval(() => {
clearInterval(self.intervalId);
clearInterval(self.timeInterval);
self.handelNext()
}, times);
}
},
setStyleHandel(count) {
if(!process.browser){
return
}
let el = document.querySelector(".new-indicator")
el.style.opacity = 1
el.style = "background: #fff"
el.style.width = `${count >= 6 ? count : 6}px`
},
carouselChange(e) {
if (process.browser) {
this.isIndex = e
this.isAudioBox = true
this.isAudio = false
this.isIcon = false
this.isCount = 0
clearInterval(this.intervalId);
clearInterval(this.timeInterval);
if (process.browser) {
this.$nextTick(() => {
this.handleSetLeft()
let el = document.querySelectorAll(".new-indicator")
el?.forEach(function (indicator) {
indicator.style = "width:6px"
indicator.style = "opacity:0"
indicator.style = "background: rgba(255, 255, 255, 0.45)"
});
this.imgArr?.map((item, i) => {
let videoObj = this.$refs['videoRef' + i]
if (Object(videoObj).length > 0) {
videoObj[0].currentTime = 0
setTimeout(() => {
videoObj[0].play()
}, 500);
}
})
this.createElChange()
if (Object(this.imgArr).length > 0) {
el.forEach(item => {
item.style = `width:${0}%`
})
}
if (this.imgArr[e].banner_type == 1) {
this.handleToggleImg()
} else {
this.commonVideoUpdata(e, 'video')
}
})
}
}
},
handleAudio(id, Boolean) {
const self = this
self.isCount++
const myVideo = self.$refs['videoRef' + id];
self.isAudio = !self.isAudio;
myVideo[0].muted = self.isAudio;
self.isIcon = !self.isAudio
if (!self.isAudio && !myVideo[0].paused) {
myVideo[0].play();
}
if (self.isCount == 1) {
this.handleAudio(id, Boolean)
}
},
handelNext() {
if (process.server){
return
}
this.isAudioBox = false;
if (this.imgArr?.length == 1 && this.imgArr[this.isIndex]?.banner_type == 2) {
this.isCount++;
this.isIcon = true
this.isAudioBox = true;
const myVideo = this.$refs["videoRef" + this.isIndex];
myVideo?.forEach((item, i) => {
item.muted = true
})
}
this.$refs.carousel?.next();
if (this.imgArr.length == 1) {
this.carouselChange(0);
}
},
createElChange() {
if (process.browser) {
this.$nextTick(() => {
let indicators = document.querySelectorAll(".new-indicator")
indicators.forEach(function (indicator) {
indicator.parentNode.removeChild(indicator);
});
const indicatorElement = this.$refs.carousel.$el.querySelector('.el-carousel__indicator.is-active');
const newElement = document.createElement('span');
newElement.textContent = '';
newElement.className = 'new-indicator';
newElement.style.width = `6px`;
newElement.style.opacity = `0`;
indicatorElement?.appendChild(newElement);
})
}
},
handleSetLeft() {
if (process.browser) {
this.$nextTick(() => {
let element = document.querySelector(".showImg .el-carousel__indicators")
let audio = document.querySelector(".showImg .audio-box")
let leftDistance = element.getBoundingClientRect().left;
if (audio) {
audio.style = `left:${leftDistance + window.pageXOffset + element.clientWidth + 12}px`
}
})
}
},
gotoIndustryInfo(val) {
window.open(val.url);
}
},
mounted() {
this.getIndustryApplication();
this.getBanner();
this.startIntervals();
this.startIntervals();
this.getNotice();
const self = this
window.addEventListener("resize", function () {
self.handleSetLeft()
if (!self.loopTimer) {
self.loopTimer = true;
setTimeout(function () {
window.screenWidth = window.innerWidth;
self.loopTimer = false;
self.$nextTick(() => {
if(window.screenWidth>3840){
self.currenInnerWith = 3840
}else{
self.currenInnerWith = window.screenWidth;
}
})
}, 100)
}
});
if(window.innerWidth>3840){
this.currenInnerWith = 3840
}else{
this.currenInnerWith = window.innerWidth;
}
},
destroyed() {
window.onresize = null;
},
};
</script>
<style lang="scss" scoped>
$desktop2: "only screen and (max-width: 1295px)";
$desktop: "only screen and (min-width: 1296px)";
$desktop1500: "only screen and (min-width: 1500px)";
$desktop1501: "only screen and (min-width: 1501px) and (max-width: 1799px)";
$desktop1800: "only screen and (min-width: 1800px)";
$desktop_3840: "only screen and (min-width: 3840px)";
$desktop_4000: "only screen and (min-width: 4000px)";
.fontText {
@media #{$desktop} {
margin: 0 72px;
}
@media #{$desktop1500} {
margin: 0 56px;
}
@media #{$desktop1501} {
margin: 0 72px;
}
@media #{$desktop1800} {
margin: 0 72px;
}
@media #{$desktop2} {
margin: 0 72px;
}
@media #{$desktop_3840} {
margin: 0px auto;
}
@media #{$desktop_4000} {
margin: 0px auto;
}
margin: 0px;
}
* {
padding: 0;
margin: 0;
}
li {
list-style-type: none;
}
.showImg {
position: relative;
width: 100%;
background: #fafafa;
.box-category {
transform: translateY(-50%);
width: 64px;
height: 30px;
border-radius: 15px;
background-color: rgba(25, 27, 41, 0.45);
line-height: 30px;
text-align: center;
font-size: 25px;
cursor: pointer;
color: rgba(255, 255, 255, 0.45);
margin-right: 8px;
margin-top: 14px;
i {
font-weight: bold;
}
}
.box-bg {
width: 100%;
height: 100%;
max-width: 3840px;
max-height: 1440px;
background-repeat: no-repeat;
margin: 0 auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
.img-box {
width: 365px;
position: absolute;
left: calc((100% - 1440px) - -15px);
z-index: 2;
img {
max-width: 100%;
margin-top: 290px;
}
}
}
.video-bg {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 100%;
object-fit: cover;
}
.audio-box {
border-radius: 50%;
background-color: #00000073;
height: 40px;
width: 40px;
position: absolute;
bottom: 26px;
text-align: center;
line-height: 40px;
&:hover {
background-color: rgba(255, 255, 255, 0.25);
}
.audio-icon {
cursor: pointer;
color: #fff;
}
}
}
.showImg img {
width: 100%;
height: 100%;
}
.iconDiv {
display: inline-block;
}
.iconDiv:hover {
color: #fff;
}
.banner-box {
position: absolute;
right: calc((100% - 1440px) / 2 - -70px);
top: calc(100% - 63px);
display: flex;
}
.banner-circle {
height: 20px;
background-color: rgba(25, 27, 41, 0.45);
border-radius: 15px;
line-height: 30px;
height: 30px;
}
.banner-circle ul {
margin: 0 20px;
height: 100%;
display: flex;
}
.banner-circle ul li {
display: inline-block;
width: 14px;
height: 14px;
margin: 0 5px;
border-radius: 7px;
background-color: rgba(255, 255, 255, 0.3);
cursor: pointer;
align-self: center;
}
.active {
background-color: #ffffff !important;
width: 30px !important;
border-radius: 7px !important;
}
@keyframes hoverLi {
0% {
width: 14px;
}
25% {
width: 20px;
}
50% {
width: 24px;
}
75% {
width: 28px;
}
100% {
width: 30px;
}
}
.active:hover {
animation-name: hoverLi;
animation-duration: 3s;
}
.category-list {
margin: 0 auto;
align-self: center;
}
::v-deep .el-carousel {
width: 100vw;
}
::v-deep .el-carousel__item {
width: 100%;
}
::v-deep .el-carousel__indicators {
height: 40px;
padding: 0 28px;
background: rgba(0, 0, 0, 0.45);
border-radius: 20px;
bottom: 26px;
.el-carousel__indicator {
line-height: 40px;
height: 40px;
margin-top: 0px;
}
.el-carousel__indicator--horizontal {
padding: 12px 0;
margin: 0 4px;
}
.is-active {
max-width: 40px;
position: relative;
.new-indicator {
width: 6px;
height: 8px;
position: absolute;
top: 15px;
border-radius: 6px;
transition: width .3s;
}
.el-carousel__button {
width: 40px;
height: 8px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.45);
}
}
.el-carousel__button {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.45);
margin-top: 3px;
}
}
.category-list {
.fontText {
display: flex;
justify-content: space-between;
margin-top: 40px;
min-width: 1296px;
max-width: 3678px;
font-family: Alibaba-PuHuiTi-B;
.hangyeImgSty {
width: 40px;
height: 40px;
position: relative;
top: 8px;
margin-right: 10px;
}
.Notice {
width: 426px;
height: 56px;
background: url("@/assets/img/NoticeBg.png") no-repeat;
background-size: 100% 100%;
display: flex;
cursor: pointer;
.NoticeIcon {
width: 24px;
height: 24px;
margin: 16px 12px 16px 24px;
}
span {
line-height: 52px;
height: 56px;
}
}
}
}
</style>
![[RuoYi-Vue] - 6. 若依二次开发](https://img-blog.csdnimg.cn/img_convert/bceefe4def4ae0cfa81d587aa5aebed6.png)
