BUG修改 应用资源新增 能力集市图标 和详情页切换
This commit is contained in:
a0049873
parent
bb6d58f568
commit
6062af489e
|
|
@ -1,15 +1,15 @@
|
|||
<!--
|
||||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-04-11 16:30:04
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-06-06 13:14:02
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-07-16 15:07:44
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<!-- 流程图 -->
|
||||
<h4>{{ $t('process.flowImage') }}</h4>
|
||||
<img :src="getResourceURL()" class="image">
|
||||
<!-- <h4>{{ $t('process.flowImage') }}</h4>
|
||||
<img :src="getResourceURL()" class="image"> -->
|
||||
<!-- 流转详情 -->
|
||||
<h4>{{ $t('process.circulation') }}</h4>
|
||||
<div class="mod-sys__dict">
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
|
||||
window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796/';
|
||||
window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/';
|
||||
window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
|
||||
window.SITE_CONFIG['apiURL'] = 'http://15.2.21.239:8888/renren-admin';
|
||||
window.SITE_CONFIG['POI_URL'] = 'http://15.2.21.238:8090/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address';
|
||||
// 穿透版本
|
||||
// window.SITE_CONFIG['backUrl'] = 'http://124.222.94.39:9797';
|
||||
|
|
|
|||
|
|
@ -2,16 +2,37 @@
|
|||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 15:25:33
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-14 11:30:52
|
||||
* @LastEditTime: 2022-07-16 15:59:09
|
||||
* @Description: 应用展示 视频播放
|
||||
-->
|
||||
<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" :src="showArr[showFlag].attrValue" />
|
||||
</div>
|
||||
<div class="right" @click="chagneShow()"></div>
|
||||
</div>
|
||||
<a-modal v-model:visible="visible" title="视频预览" :width="750" destroyOnClose>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
title="视频预览"
|
||||
:width="750"
|
||||
destroyOnClose
|
||||
>
|
||||
<template #footer></template>
|
||||
<div style="width: 100%; display: flex; justify-content: center">
|
||||
<div style="width: 100%; height: 100%">
|
||||
|
|
@ -22,106 +43,134 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, defineProps, watch } from 'vue'
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
|
||||
const visible = ref(false)
|
||||
const options = reactive({
|
||||
width: '7.00rem', //播放器宽度
|
||||
height: '4.00rem', //播放器高度
|
||||
color: '#409eff', //主题色
|
||||
title: '', //视频名称
|
||||
src: '', //视频源
|
||||
muted: false, //静音
|
||||
webFullScreen: false,
|
||||
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
|
||||
autoPlay: true, //自动播放
|
||||
loop: false, //循环播放
|
||||
mirror: false, //镜像画面
|
||||
ligthOff: false, //关灯模式
|
||||
volume: 0.3, //默认音量大小
|
||||
control: true, //是否显示控制
|
||||
controlBtns: [
|
||||
'audioTrack',
|
||||
'quality',
|
||||
'speedRate',
|
||||
'volume',
|
||||
'setting',
|
||||
'pip',
|
||||
'pageFullScreen',
|
||||
'fullScreen',
|
||||
], //显示所有按钮,
|
||||
})
|
||||
const showModal = () => {
|
||||
visible.value = true
|
||||
}
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
const flag = ref(true)
|
||||
const img = ref({})
|
||||
console.log('111111111111111111111,', props.dataList)
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '应用展示视频'
|
||||
)[0]
|
||||
console.log('视频==============>', obj)
|
||||
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;'
|
||||
import { ref, reactive, defineProps, watch } from 'vue'
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
|
||||
const visible = ref(false)
|
||||
const options = reactive({
|
||||
width: '7.00rem', //播放器宽度
|
||||
height: '4.00rem', //播放器高度
|
||||
color: '#409eff', //主题色
|
||||
title: '', //视频名称
|
||||
src: '', //视频源
|
||||
muted: false, //静音
|
||||
webFullScreen: false,
|
||||
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
|
||||
autoPlay: true, //自动播放
|
||||
loop: false, //循环播放
|
||||
mirror: false, //镜像画面
|
||||
ligthOff: false, //关灯模式
|
||||
volume: 0.3, //默认音量大小
|
||||
control: true, //是否显示控制
|
||||
controlBtns: [
|
||||
'audioTrack',
|
||||
'quality',
|
||||
'speedRate',
|
||||
'volume',
|
||||
'setting',
|
||||
'pip',
|
||||
'pageFullScreen',
|
||||
'fullScreen',
|
||||
], //显示所有按钮,
|
||||
})
|
||||
const showFlag = ref(0)
|
||||
const showArr = ref([])
|
||||
const chagneShow = () => {
|
||||
if (showArr.value.length > 1) {
|
||||
showFlag.value = showFlag.value == 0 ? 1 : 0
|
||||
}
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter(
|
||||
(item) => item.attrType === '应用展示视频'
|
||||
)[0]
|
||||
console.log('视频==============>', obj)
|
||||
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;'
|
||||
const showModal = () => {
|
||||
visible.value = true
|
||||
}
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
const flag = ref(true)
|
||||
const img = ref({})
|
||||
console.log('111111111111111111111,', props.dataList)
|
||||
if (props.dataList.infoList) {
|
||||
showArr.value = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '应用展示视频' || item.attrType === '应用图片'
|
||||
)
|
||||
console.log('视频==============>', showArr.value)
|
||||
if (showArr.value.length == 0) {
|
||||
flag.value = false
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
showArr.value = props.dataList.infoList.filter(
|
||||
(item) =>
|
||||
item.attrType === '应用展示视频' || item.attrType === '应用图片'
|
||||
)
|
||||
console.log('视频==============>', showArr.value)
|
||||
if (showArr.value.length == 0) {
|
||||
flag.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
)
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.application-presentation {
|
||||
padding: 0.8rem 3rem 0;
|
||||
.application-presentation {
|
||||
padding: 0.8rem 3rem 0;
|
||||
|
||||
.main {
|
||||
height: 3.4rem;
|
||||
border-radius: 0.1rem;
|
||||
background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
margin-top: 0.4rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.play {
|
||||
width: 0.96rem;
|
||||
height: 0.96rem;
|
||||
background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
|
||||
.main {
|
||||
width: 13.14rem;
|
||||
height: 3.4rem;
|
||||
border-radius: 0.1rem;
|
||||
background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
cursor: pointer;
|
||||
margin-top: 0.4rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.play {
|
||||
width: 0.96rem;
|
||||
height: 0.96rem;
|
||||
background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
|
||||
background-size: 100%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -50,6 +50,24 @@
|
|||
:key="item.index"
|
||||
>
|
||||
<div class="item" :key="showKey">
|
||||
<div
|
||||
class="left"
|
||||
style="display: flex; align-items: center"
|
||||
v-if="
|
||||
item.type === '应用资源' &&
|
||||
item.infoList &&
|
||||
item.infoList.filter((val) => val.attrType == '应用图片')[0]
|
||||
"
|
||||
>
|
||||
<a-image
|
||||
:width="106"
|
||||
:preview="false"
|
||||
:src="
|
||||
item.infoList.filter((val) => val.attrType == '应用图片')[0]
|
||||
.attrValue
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="left"
|
||||
:class="
|
||||
|
|
@ -78,7 +96,7 @@
|
|||
? 'ywzj'
|
||||
: ''
|
||||
"
|
||||
v-if="
|
||||
v-else-if="
|
||||
selectCardsname !== '基础设施' && selectCardsname !== '融合服务'
|
||||
"
|
||||
></div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue