开发组件轮播
This commit is contained in:
gaoyuanwei
parent
ef9a2dd15c
commit
979458071d
|
|
@ -8,11 +8,28 @@
|
|||
<template>
|
||||
<div class="application-presentation" v-if="flag">
|
||||
<detals-title title="组件展示" type="IMAGE&VIDEO"></detals-title>
|
||||
<div
|
||||
class="main"
|
||||
:style="`${img}background-position:center;background-size:cover;`"
|
||||
>
|
||||
<div class="play" @click="showModal"></div>
|
||||
<div class="box">
|
||||
<div class="left" @click="chagneShow()"></div>
|
||||
<div
|
||||
class="main"
|
||||
:style="`${img}background-position:center;background-size:cover;`"
|
||||
v-if="
|
||||
showArr.length > 0 && showArr[showFlag].attrType == '组件视频介绍'
|
||||
"
|
||||
>
|
||||
<div class="play" @click="showModal"></div>
|
||||
</div>
|
||||
<div
|
||||
class="main2"
|
||||
v-if="showArr.length > 0 && showArr[showFlag].attrType == '组件图片'"
|
||||
>
|
||||
<a-image
|
||||
:width="700"
|
||||
:height="340"
|
||||
:src="showArr[showFlag].attrValue"
|
||||
/>
|
||||
</div>
|
||||
<div class="right" @click="chagneShow()"></div>
|
||||
</div>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
|
|
@ -59,6 +76,13 @@
|
|||
'fullScreen',
|
||||
], //显示所有按钮,
|
||||
})
|
||||
const showFlag = ref(0)
|
||||
const showArr = ref([])
|
||||
const chagneShow = () => {
|
||||
if (showArr.value.length > 1) {
|
||||
showFlag.value = showFlag.value == 0 ? 1 : 0
|
||||
}
|
||||
}
|
||||
const showModal = () => {
|
||||
visible.value = true
|
||||
}
|
||||
|
|
@ -69,42 +93,63 @@
|
|||
const img = ref({})
|
||||
console.log('111111111111111111111,', props.dataList)
|
||||
if (props.dataList.infoList) {
|
||||
showArr.value = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '组件视频介绍' || item.attrType === '组件图片'
|
||||
)
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '组件视频介绍'
|
||||
)[0]
|
||||
console.log('视频==============>', obj)
|
||||
if (!obj) {
|
||||
console.log('视频==============>', showArr.value)
|
||||
if (showArr.value.length == 0) {
|
||||
flag.value = false
|
||||
} else {
|
||||
let imgindex = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '组件图片'
|
||||
)[0]
|
||||
options.src = obj.attrValue
|
||||
if (imgindex) {
|
||||
img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
|
||||
if (obj) {
|
||||
options.src = obj.attrValue
|
||||
}
|
||||
}
|
||||
// if (!obj) {
|
||||
// flag.value = false
|
||||
// } else {
|
||||
// let imgindex = props.dataList.infoList.filter(
|
||||
// (item) => item.attrType === '组件图片'
|
||||
// )[0]
|
||||
// options.src = obj.attrValue
|
||||
// if (imgindex) {
|
||||
// img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
|
||||
// }
|
||||
// }
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
showArr.value = props.dataList.infoList.filter(
|
||||
(item) =>
|
||||
item.attrType === '组件视频介绍' || item.attrType === '组件图片'
|
||||
)
|
||||
let obj = val.infoList.filter(
|
||||
(item) => item.attrType === '组件视频介绍'
|
||||
)[0]
|
||||
console.log('视频==============>', obj)
|
||||
if (!obj) {
|
||||
console.log('视频==============>', showArr.value)
|
||||
if (showArr.value.length == 0) {
|
||||
flag.value = false
|
||||
} else {
|
||||
let imgindex = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '组件图片'
|
||||
)[0]
|
||||
options.src = obj.attrValue
|
||||
if (imgindex) {
|
||||
img.value =
|
||||
'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
|
||||
if (obj) {
|
||||
options.src = obj.attrValue
|
||||
}
|
||||
}
|
||||
// if (!obj) {
|
||||
// flag.value = false
|
||||
// } else {
|
||||
// let imgindex = props.dataList.infoList.filter(
|
||||
// (item) => item.attrType === '组件图片'
|
||||
// )[0]
|
||||
// options.src = obj.attrValue
|
||||
// if (imgindex) {
|
||||
// img.value =
|
||||
// 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
)
|
||||
|
|
@ -113,6 +158,7 @@
|
|||
.application-presentation {
|
||||
padding: 0.8rem 3rem 0;
|
||||
.main {
|
||||
width: 13.14rem;
|
||||
height: 3.4rem;
|
||||
border-radius: 0.1rem;
|
||||
background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
|
||||
|
|
@ -129,5 +175,47 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.main2 {
|
||||
width: 13.14rem;
|
||||
height: 3.4rem;
|
||||
border-radius: 0.1rem;
|
||||
background-size: 100%;
|
||||
margin-top: 0.4rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin-bottom: 0.8rem;
|
||||
.left {
|
||||
width: 0.37rem;
|
||||
height: 0.6rem;
|
||||
cursor: pointer;
|
||||
margin-right: 0.2rem;
|
||||
background: url('~@/assets/detailsAll/business/business_previous.png')
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
.right {
|
||||
width: 0.37rem;
|
||||
height: 0.6rem;
|
||||
cursor: pointer;
|
||||
margin-left: 0.2rem;
|
||||
background: url('~@/assets/detailsAll/business/business_next.png')
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-image-img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue