开发组件-详情页
This commit is contained in:
851673013@qq.com
parent
0f06cce9a6
commit
369ed41fd9
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
|
|
@ -0,0 +1,161 @@
|
||||||
|
<!--
|
||||||
|
* @Author: hisense.liangjunhua
|
||||||
|
* @Date: 2022-06-08 11:32:22
|
||||||
|
* @LastEditors: hisense.liangjunhua
|
||||||
|
* @LastEditTime: 2022-06-15 18:10:36
|
||||||
|
* @Description: 开发组件详情页
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
|
||||||
|
<!-- 头部基本信息 -->
|
||||||
|
<developer-top-details :dataList="dataList.data"></developer-top-details>
|
||||||
|
<!-- 导航 -->
|
||||||
|
<developer-navigation
|
||||||
|
:dataList="dataList.data"
|
||||||
|
:class="{ fixed: scrollTop >= 600 }"
|
||||||
|
:selectNow="selectNow"
|
||||||
|
></developer-navigation>
|
||||||
|
<!-- 组件展示 视频 -->
|
||||||
|
<Developer-presentation
|
||||||
|
:dataList="dataList.data"
|
||||||
|
id="eveloper-presentation"
|
||||||
|
class="scrollBox"
|
||||||
|
></Developer-presentation>
|
||||||
|
<!-- 功能介绍-->
|
||||||
|
<developer-function-intorduction
|
||||||
|
:dataList="dataList.data"
|
||||||
|
id="function-introduction"
|
||||||
|
class="scrollBox"
|
||||||
|
></developer-function-intorduction>
|
||||||
|
<!-- 应用场景 -->
|
||||||
|
<developer-application-scenarios
|
||||||
|
:dataList="dataList.data"
|
||||||
|
id="application-scenarios"
|
||||||
|
class="scrollBox"
|
||||||
|
></developer-application-scenarios>
|
||||||
|
<!-- 应用案例 -->
|
||||||
|
<developer-application-case
|
||||||
|
:dataList="dataList.data"
|
||||||
|
id="application-case"
|
||||||
|
class="scrollBox"
|
||||||
|
></developer-application-case>
|
||||||
|
<!-- 组件试用 -->
|
||||||
|
<developer-trial
|
||||||
|
:dataList="dataList.data"
|
||||||
|
id="developer-trial"
|
||||||
|
class="scrollBox"
|
||||||
|
></developer-trial>
|
||||||
|
<!-- 归属部门与服务商-->
|
||||||
|
<developer-owning-department-and-service-provider
|
||||||
|
:dataList="dataList.data"
|
||||||
|
id="department-and-service-provider"
|
||||||
|
class="scrollBox"
|
||||||
|
></developer-owning-department-and-service-provider>
|
||||||
|
<!-- 常见问题-->
|
||||||
|
<developer-common-problem
|
||||||
|
:dataList="dataList.data"
|
||||||
|
id="common-problem"
|
||||||
|
class="scrollBox"
|
||||||
|
></developer-common-problem>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景
|
||||||
|
import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式
|
||||||
|
import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍
|
||||||
|
import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例
|
||||||
|
import DeveloperTopDetails from '@/views/detailsAll/components/Developer/DeveloperTopDetails.vue' //头部基本信息
|
||||||
|
import DeveloperNavigation from '@/views/detailsAll/components/Developer/DeveloperNavigation.vue'
|
||||||
|
import DeveloperPresentation from '@/views/detailsAll/components/Developer/DeveloperPresentation.vue' //组件展示
|
||||||
|
import DeveloperCommonProblem from '@/views/detailsAll/components/Developer/DeveloperCommonProblem' //常见问题
|
||||||
|
import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用
|
||||||
|
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { updateVisits, selectOne } from '@/api/home'
|
||||||
|
import mybus from '@/myplugins/mybus'
|
||||||
|
const router = useRouter()
|
||||||
|
const scrollTop = ref(0)
|
||||||
|
const domArr = ref([])
|
||||||
|
const selectNow = ref('')
|
||||||
|
const dataList = reactive({ data: {} })
|
||||||
|
const id = router.currentRoute.value.query.id
|
||||||
|
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||||
|
document.documentElement.style.transition = 'all 0.3s ease'
|
||||||
|
document.documentElement.scrollTop = 0
|
||||||
|
document.body.style.transition = 'all 0.3s ease'
|
||||||
|
document.body.scrollTop = 0
|
||||||
|
mybus.on('flyToView', (id) => {
|
||||||
|
let top = document.querySelector('#' + id).offsetTop - 50
|
||||||
|
// console.log(top, document.querySelector('#' + id).offsetTop)
|
||||||
|
document.documentElement.scrollTop = top
|
||||||
|
document.body.scrollTop = top
|
||||||
|
})
|
||||||
|
onMounted(() => {
|
||||||
|
// console.clear()
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
domArr.value = document.querySelectorAll('.scrollBox')
|
||||||
|
scrollTop.value =
|
||||||
|
document.documentElement.scrollTop || document.body.scrollTop
|
||||||
|
for (let i = 0; i < domArr.value.length; i++) {
|
||||||
|
if (i === 0) {
|
||||||
|
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
|
||||||
|
selectNow.value = domArr.value[i].id
|
||||||
|
}
|
||||||
|
} else if (i == domArr.value.length - 1) {
|
||||||
|
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
|
||||||
|
selectNow.value = domArr.value[i].id
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (
|
||||||
|
scrollTop.value > domArr.value[i].offsetTop - 50 &&
|
||||||
|
scrollTop.value < domArr.value[i + 1].offsetTop - 50
|
||||||
|
) {
|
||||||
|
selectNow.value = domArr.value[i].id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const init = (id) => {
|
||||||
|
if (id) {
|
||||||
|
selectOne(id).then((res) => {
|
||||||
|
// console.clear()
|
||||||
|
dataList.data = res.data.data
|
||||||
|
console.log('初始化详情页=========================>', dataList.data)
|
||||||
|
const arrList = ref([])
|
||||||
|
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
|
||||||
|
if (arrList.value && arrList.value.indexOf(id) === -1) {
|
||||||
|
arrList.value.push(id)
|
||||||
|
updateVisits({
|
||||||
|
id: res.data.data.id,
|
||||||
|
visits: res.data.data.visits || '0',
|
||||||
|
}).then(() => {
|
||||||
|
window.sessionStorage.setItem(
|
||||||
|
'visits',
|
||||||
|
JSON.stringify(arrList.value)
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else if (obj) {
|
||||||
|
dataList.data = obj
|
||||||
|
console.log('预览==============', obj)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
init(id)
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
mybus.off('flyToView')
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.fixed {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 2000;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.fixed2 > div:nth-of-type(3) {
|
||||||
|
margin-top: 0.84rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,307 @@
|
||||||
|
<!-- 应用案例 -->
|
||||||
|
<template>
|
||||||
|
<div class="application-scenarios-and-case" v-if="flag">
|
||||||
|
<div
|
||||||
|
class="application-scenarios-and-case-son"
|
||||||
|
v-for="item in dataFrom"
|
||||||
|
:key="item.title"
|
||||||
|
>
|
||||||
|
<div class="title">
|
||||||
|
<DetalsTitle
|
||||||
|
:title="item.title"
|
||||||
|
:type="item.englishTitle"
|
||||||
|
></DetalsTitle>
|
||||||
|
</div>
|
||||||
|
<div class="tab">
|
||||||
|
<div
|
||||||
|
v-for="(itemSonTitle, indexSonTitle) in item.content"
|
||||||
|
:key="itemSonTitle.title"
|
||||||
|
@click="tabSwitch(itemSonTitle.title, item.title)"
|
||||||
|
class="tab-son"
|
||||||
|
:class="tabIndexClass(indexSonTitle, item.title, item.content)"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="tab-top"
|
||||||
|
:class="
|
||||||
|
tabInitialize(item.title) == itemSonTitle.title
|
||||||
|
? 'tab-top-down'
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ itemSonTitle.title }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="tab-bottom"
|
||||||
|
v-if="tabInitialize(item.title) == itemSonTitle.title"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<template v-for="itemSonTitle in item.content" :key="itemSonTitle">
|
||||||
|
<div
|
||||||
|
class="content"
|
||||||
|
v-if="tabInitialize(item.title) == itemSonTitle.title"
|
||||||
|
>
|
||||||
|
<div :class="contentLocation(0, item.title)">
|
||||||
|
<div
|
||||||
|
:class="
|
||||||
|
item.title == '应用场景'
|
||||||
|
? 'content-left-scene'
|
||||||
|
: 'content-left-case'
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div :class="contentLocation(1, item.title)">
|
||||||
|
<div
|
||||||
|
:class="
|
||||||
|
item.title == '应用场景'
|
||||||
|
? 'content-right-scene'
|
||||||
|
: 'content-right-case'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="content-top">{{ itemSonTitle.title }}</div>
|
||||||
|
<div class="content-bottom">{{ itemSonTitle.content }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||||
|
import { ref, defineProps, watch } from 'vue'
|
||||||
|
let dataFrom = ref([
|
||||||
|
{
|
||||||
|
title: '应用案例',
|
||||||
|
englishTitle: 'CASE',
|
||||||
|
content: [
|
||||||
|
{
|
||||||
|
title: '应用案例一',
|
||||||
|
content:
|
||||||
|
'应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '应用案例二',
|
||||||
|
content:
|
||||||
|
'应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '应用案例三',
|
||||||
|
content:
|
||||||
|
'应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '应用案例四',
|
||||||
|
content:
|
||||||
|
'应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '应用案例五',
|
||||||
|
content:
|
||||||
|
'应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '应用案例六',
|
||||||
|
content:
|
||||||
|
'应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '应用案例七',
|
||||||
|
content:
|
||||||
|
'应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
])
|
||||||
|
const flag = ref(true)
|
||||||
|
//数据初始化
|
||||||
|
const props = defineProps({
|
||||||
|
dataList: { type: Object, default: null },
|
||||||
|
})
|
||||||
|
if (props.dataList.infoList) {
|
||||||
|
let obj = props.dataList.infoList.filter(
|
||||||
|
(item) => item.attrType === '应用案例'
|
||||||
|
)[0]
|
||||||
|
if (!obj) {
|
||||||
|
flag.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
watch(
|
||||||
|
() => props.dataList,
|
||||||
|
(val) => {
|
||||||
|
if (val) {
|
||||||
|
let obj = val.infoList.filter((item) => item.attrType === '应用案例')[0]
|
||||||
|
if (!obj) {
|
||||||
|
flag.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
const { log } = console
|
||||||
|
//滚动条样式
|
||||||
|
function tabIndexClass(index, title, content) {
|
||||||
|
if (title == '应用场景' && index == 0 && content.length > 6) {
|
||||||
|
return 'tab-son-class'
|
||||||
|
}
|
||||||
|
if (title == '应用案例' && index == 0 && content.length > 6) {
|
||||||
|
return 'tab-son-class-two'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// tab切换方法
|
||||||
|
let tabindex = ref('场景说明一')
|
||||||
|
let tabindexCase = ref('应用案例一')
|
||||||
|
//初始化tab切换（判断标题不同，点击事件的判断变量不同）
|
||||||
|
function tabInitialize(title) {
|
||||||
|
if (title == '应用场景') {
|
||||||
|
return tabindex.value
|
||||||
|
} else {
|
||||||
|
return tabindexCase.value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//tab切换点击事件
|
||||||
|
function tabSwitch(name, title) {
|
||||||
|
if (title == '应用场景') {
|
||||||
|
tabindex.value = name
|
||||||
|
return tabindex.value
|
||||||
|
} else {
|
||||||
|
tabindexCase.value = name
|
||||||
|
return tabindexCase.value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//内容位置初始化
|
||||||
|
function contentLocation(index, title) {
|
||||||
|
log(index, title)
|
||||||
|
if (index == 0) {
|
||||||
|
if (title == '应用场景') {
|
||||||
|
return 'content-right'
|
||||||
|
} else {
|
||||||
|
return 'content-left'
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (title == '应用场景') {
|
||||||
|
return 'content-left'
|
||||||
|
} else {
|
||||||
|
return 'content-right'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.application-scenarios-and-case {
|
||||||
|
width: 100%;
|
||||||
|
background: #f7f8fa;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
overflow-x: unset;
|
||||||
|
.application-scenarios-and-case-son {
|
||||||
|
padding-top: 80px;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
overflow: unset;
|
||||||
|
.tab {
|
||||||
|
max-width: 1300px;
|
||||||
|
overflow-x: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
color: #808080;
|
||||||
|
border-bottom: 1px #e4e6f5 solid;
|
||||||
|
margin-top: 45px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding-left: 40px;
|
||||||
|
padding-right: 40px;
|
||||||
|
.tab-son {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 100px;
|
||||||
|
.tab-top {
|
||||||
|
min-width: 120px;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.tab-top-down {
|
||||||
|
min-width: 120px;
|
||||||
|
color: #526aff;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.tab-bottom {
|
||||||
|
height: 4px;
|
||||||
|
width: 60px;
|
||||||
|
background: #526aff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tab-son-class {
|
||||||
|
margin-left: 430px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.tab-son-class-two {
|
||||||
|
margin-left: 230px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.tab-son:last-child {
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tab::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(82, 106, 255, 0.4);
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 1300px;
|
||||||
|
height: 340px;
|
||||||
|
.content-left {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.content-right {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.content-right-scene,
|
||||||
|
.content-right-case {
|
||||||
|
width: 620px;
|
||||||
|
height: 340px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.content-left-scene,
|
||||||
|
.content-left-case {
|
||||||
|
height: 340px;
|
||||||
|
width: 635px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 635px 340px;
|
||||||
|
}
|
||||||
|
.content-top {
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
}
|
||||||
|
.content-bottom {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 26px;
|
||||||
|
display: -webkit-box;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 5;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.application-scenarios-and-case-son:first-child {
|
||||||
|
padding-top: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,276 @@
|
||||||
|
<!-- 应用场景-->
|
||||||
|
<template>
|
||||||
|
<div class="application-scenarios-and-case" v-if="flag">
|
||||||
|
<div class="application-scenarios-and-case-son">
|
||||||
|
<!-- {{ dataFrom.attrType }} -->
|
||||||
|
<div class="title">
|
||||||
|
<DetalsTitle :title="dataFrom.attrType" :type="SCENE"></DetalsTitle>
|
||||||
|
</div>
|
||||||
|
<div class="tab">
|
||||||
|
<div
|
||||||
|
v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
|
||||||
|
:key="itemSonTitle.name"
|
||||||
|
@click="tabSwitch(itemSonTitle.name)"
|
||||||
|
class="tab-son"
|
||||||
|
:class="
|
||||||
|
tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<a-tooltip>
|
||||||
|
<template #title>{{ itemSonTitle.name }}</template>
|
||||||
|
<div
|
||||||
|
class="tab-top"
|
||||||
|
:class="
|
||||||
|
tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ itemSonTitle.name }}
|
||||||
|
</div>
|
||||||
|
</a-tooltip>
|
||||||
|
<div
|
||||||
|
class="tab-bottom"
|
||||||
|
v-if="tabInitialize() == itemSonTitle.name"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
|
||||||
|
<div class="content" v-if="tabindex == itemSonTitle.name">
|
||||||
|
<div class="content-right">
|
||||||
|
<div class="content-left-scene" v-if="!itemSonTitle.img"></div>
|
||||||
|
<a-image
|
||||||
|
:width="635"
|
||||||
|
:height="340"
|
||||||
|
:src="itemSonTitle.img"
|
||||||
|
v-if="itemSonTitle.img"
|
||||||
|
></a-image>
|
||||||
|
</div>
|
||||||
|
<div :class="contentLocation(1, dataFrom.attrType)">
|
||||||
|
<div class="content-right-scene" :class="'content-right-case'">
|
||||||
|
<div class="content-top">{{ itemSonTitle.name }}</div>
|
||||||
|
<a-tooltip>
|
||||||
|
<template #title>{{ itemSonTitle.desc }}</template>
|
||||||
|
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
|
||||||
|
</a-tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||||
|
import { ref, defineProps, watch } from 'vue'
|
||||||
|
const flag = ref(true)
|
||||||
|
let dataFrom = ref([])
|
||||||
|
// tab切换方法
|
||||||
|
let tabindex = ref('场景说明一')
|
||||||
|
//数据初始化
|
||||||
|
const props = defineProps({
|
||||||
|
dataList: { type: Object, default: null },
|
||||||
|
})
|
||||||
|
if (props.dataList.infoList) {
|
||||||
|
debugger
|
||||||
|
let obj = props.dataList.infoList.filter(
|
||||||
|
(item) => item.attrType === '应用场景'
|
||||||
|
)[0]
|
||||||
|
if (!obj) {
|
||||||
|
flag.value = false
|
||||||
|
} else {
|
||||||
|
obj.attrValue = JSON.parse(obj.attrValue)
|
||||||
|
debugger
|
||||||
|
dataFrom.value = obj
|
||||||
|
tabindex.value = dataFrom.value.attrValue[0].name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
watch(
|
||||||
|
() => props.dataList,
|
||||||
|
(val) => {
|
||||||
|
if (val) {
|
||||||
|
let obj = val.infoList.filter((item) => item.attrType === '应用场景')[0]
|
||||||
|
if (!obj) {
|
||||||
|
flag.value = false
|
||||||
|
} else {
|
||||||
|
obj.attrValue = JSON.parse(obj.attrValue)
|
||||||
|
dataFrom.value = obj
|
||||||
|
tabindex.value = dataFrom.value.attrValue[0].name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
const { log } = console
|
||||||
|
//滚动条样式
|
||||||
|
function tabIndexClass(index, title, content) {
|
||||||
|
if (title == '应用场景' && index == 0 && content.length > 6) {
|
||||||
|
return 'tab-son-class'
|
||||||
|
}
|
||||||
|
if (title == '应用案例' && index == 0 && content.length > 6) {
|
||||||
|
return 'tab-son-class-two'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//初始化tab切换（判断标题不同，点击事件的判断变量不同）
|
||||||
|
function tabInitialize() {
|
||||||
|
return tabindex.value
|
||||||
|
}
|
||||||
|
//tab切换点击事件
|
||||||
|
function tabSwitch(name) {
|
||||||
|
tabindex.value = name
|
||||||
|
return tabindex.value
|
||||||
|
}
|
||||||
|
//内容位置初始化
|
||||||
|
function contentLocation(index, title) {
|
||||||
|
log(index, title)
|
||||||
|
if (index == 0) {
|
||||||
|
if (title == '应用场景') {
|
||||||
|
return 'content-right'
|
||||||
|
} else {
|
||||||
|
return 'content-left'
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (title == '应用场景') {
|
||||||
|
return 'content-left'
|
||||||
|
} else {
|
||||||
|
return 'content-right'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.application-scenarios-and-case {
|
||||||
|
width: 100%;
|
||||||
|
background: #f7f8fa;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
overflow-x: unset;
|
||||||
|
.application-scenarios-and-case-son {
|
||||||
|
padding-top: 80px;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
overflow: unset;
|
||||||
|
.tab {
|
||||||
|
max-width: 1300px;
|
||||||
|
overflow-x: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
color: #808080;
|
||||||
|
border-bottom: 1px #e4e6f5 solid;
|
||||||
|
margin-top: 45px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding-left: 40px;
|
||||||
|
padding-right: 40px;
|
||||||
|
.tab-son {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 100px;
|
||||||
|
.tab-top {
|
||||||
|
min-width: 120px;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
max-width: 200px;
|
||||||
|
height: 24px;
|
||||||
|
display: -webkit-box;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
.tab-top-down {
|
||||||
|
min-width: 120px;
|
||||||
|
color: #526aff;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.tab-bottom {
|
||||||
|
height: 4px;
|
||||||
|
width: 60px;
|
||||||
|
background: #526aff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tab-son-class {
|
||||||
|
margin-left: 430px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.tab-son-class-two {
|
||||||
|
margin-left: 230px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.tab-son:last-child {
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tab::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(82, 106, 255, 0.4);
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 1300px;
|
||||||
|
height: 340px;
|
||||||
|
.content-left {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
min-width: 620px;
|
||||||
|
// text-align: center;
|
||||||
|
.content-top {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-right {
|
||||||
|
width: 620px;
|
||||||
|
height: 340px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
:deep(.ant-image-img) {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-right-scene,
|
||||||
|
.content-right-case {
|
||||||
|
width: 620px;
|
||||||
|
height: 340px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.content-left-scene,
|
||||||
|
.content-left-case {
|
||||||
|
height: 340px;
|
||||||
|
width: 635px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 635px 340px;
|
||||||
|
}
|
||||||
|
.content-top {
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
}
|
||||||
|
.content-bottom {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 26px;
|
||||||
|
display: -webkit-box;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 6;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.application-scenarios-and-case-son:first-child {
|
||||||
|
padding-top: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,123 @@
|
||||||
|
<template>
|
||||||
|
<!-- 常见问题 -->
|
||||||
|
<div class="cpmmon-problem" v-if="flag">
|
||||||
|
<div class="title">
|
||||||
|
<DetalsTitle title="常见问题" type="Q&A"></DetalsTitle>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div v-for="(item, index) in dataFrom" :key="index" class="content-son">
|
||||||
|
<div class="content-top">
|
||||||
|
<div class="top-img"></div>
|
||||||
|
<div>{{ item.title }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-bottom">
|
||||||
|
<div class="bottom-img"></div>
|
||||||
|
<div>{{ item.answer }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||||
|
import { ref, defineProps, watch } from 'vue'
|
||||||
|
const flag = ref(true)
|
||||||
|
let dataFrom = ref([])
|
||||||
|
const props = defineProps({
|
||||||
|
dataList: { type: Object, default: null },
|
||||||
|
})
|
||||||
|
if (props.dataList.infoList) {
|
||||||
|
let obj = props.dataList.infoList.filter(
|
||||||
|
(item) => item.attrType === '常见问题'
|
||||||
|
)[0]
|
||||||
|
if (!obj) {
|
||||||
|
flag.value = false
|
||||||
|
} else {
|
||||||
|
obj.attrValue = JSON.parse(obj.attrValue)
|
||||||
|
obj.attrValue.map((item) => {
|
||||||
|
let params = {
|
||||||
|
title: item.question,
|
||||||
|
answer: item.answer,
|
||||||
|
}
|
||||||
|
dataFrom.value.push(params)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
watch(
|
||||||
|
() => props.dataList,
|
||||||
|
(val) => {
|
||||||
|
if (val) {
|
||||||
|
let obj = val.infoList.filter((item) => item.attrType === '常见问题')[0]
|
||||||
|
if (!obj) {
|
||||||
|
flag.value = false
|
||||||
|
} else {
|
||||||
|
obj.attrValue = JSON.parse(obj.attrValue)
|
||||||
|
obj.attrValue.map((item) => {
|
||||||
|
let params = {
|
||||||
|
title: item.question,
|
||||||
|
answer: item.answer,
|
||||||
|
}
|
||||||
|
dataFrom.value.push(params)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.cpmmon-problem {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 80px;
|
||||||
|
background: #f7f8fa;
|
||||||
|
.content {
|
||||||
|
width: 1300px;
|
||||||
|
margin: 20px 0px;
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 40px;
|
||||||
|
.content-son {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
.content-top {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
.content-bottom {
|
||||||
|
display: flex;
|
||||||
|
line-height: 34px;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
.content-top,
|
||||||
|
.content-bottom {
|
||||||
|
div:last-child {
|
||||||
|
width: calc(100% - 54px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.top-img {
|
||||||
|
width: 34px;
|
||||||
|
height: 30px;
|
||||||
|
background: url('~@/assets/detailsAll/sf_top_img.png') no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
.bottom-img {
|
||||||
|
width: 34px;
|
||||||
|
height: 30px;
|
||||||
|
background: url('~@/assets/detailsAll/sf_bottom_img.png') no-repeat;
|
||||||
|
ackground-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-son:last-child {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,253 @@
|
||||||
|
<!--功能介绍-->
|
||||||
|
<template>
|
||||||
|
<div class="function-intorduction" v-if="flag">
|
||||||
|
<div class="application-scenarios-and-case-son">
|
||||||
|
<!-- {{ dataFrom.attrType }} -->
|
||||||
|
<div class="title">
|
||||||
|
<DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle>
|
||||||
|
</div>
|
||||||
|
<div class="tab">
|
||||||
|
<div
|
||||||
|
v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
|
||||||
|
:key="itemSonTitle.name"
|
||||||
|
@click="tabSwitch(itemSonTitle.name)"
|
||||||
|
class="tab-son"
|
||||||
|
:class="
|
||||||
|
tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<a-tooltip>
|
||||||
|
<template #title>{{ itemSonTitle.name }}</template>
|
||||||
|
<div
|
||||||
|
class="tab-top"
|
||||||
|
:class="
|
||||||
|
tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ itemSonTitle.name }}
|
||||||
|
</div>
|
||||||
|
</a-tooltip>
|
||||||
|
<div
|
||||||
|
class="tab-bottom"
|
||||||
|
v-if="tabInitialize() == itemSonTitle.name"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
|
||||||
|
<div class="content" v-if="tabindex == itemSonTitle.name">
|
||||||
|
<div class="content-left">
|
||||||
|
<div class="content-left-scene" v-if="!itemSonTitle.img"></div>
|
||||||
|
<a-image
|
||||||
|
:width="635"
|
||||||
|
:height="340"
|
||||||
|
:src="itemSonTitle.img"
|
||||||
|
v-if="itemSonTitle.img"
|
||||||
|
></a-image>
|
||||||
|
</div>
|
||||||
|
<div class="content-right">
|
||||||
|
<div class="content-right-scene">
|
||||||
|
<div class="content-top">{{ itemSonTitle.name }}</div>
|
||||||
|
<a-tooltip>
|
||||||
|
<template #title>{{ itemSonTitle.desc }}</template>
|
||||||
|
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
|
||||||
|
</a-tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||||
|
import { ref, defineProps, watch } from 'vue'
|
||||||
|
const flag = ref(true)
|
||||||
|
let dataFrom = ref([])
|
||||||
|
// tab切换方法
|
||||||
|
let tabindex = ref('场景说明一')
|
||||||
|
//数据初始化
|
||||||
|
const props = defineProps({
|
||||||
|
dataList: { type: Object, default: null },
|
||||||
|
})
|
||||||
|
if (props.dataList.infoList) {
|
||||||
|
let obj = props.dataList.infoList.filter(
|
||||||
|
(item) => item.attrType === '功能介绍'
|
||||||
|
)[0]
|
||||||
|
if (!obj) {
|
||||||
|
flag.value = false
|
||||||
|
} else {
|
||||||
|
obj.attrValue = JSON.parse(obj.attrValue)
|
||||||
|
dataFrom.value = obj
|
||||||
|
tabindex.value = dataFrom.value.attrValue[0].name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
watch(
|
||||||
|
() => props.dataList,
|
||||||
|
(val) => {
|
||||||
|
if (val) {
|
||||||
|
let obj = val.infoList.filter((item) => item.attrType === '功能介绍')[0]
|
||||||
|
if (!obj) {
|
||||||
|
flag.value = false
|
||||||
|
} else {
|
||||||
|
obj.attrValue = JSON.parse(obj.attrValue)
|
||||||
|
dataFrom.value = obj
|
||||||
|
tabindex.value = dataFrom.value.attrValue[0].name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
//滚动条样式
|
||||||
|
function tabIndexClass(index, title, content) {
|
||||||
|
if (title == '功能介绍' && index == 0 && content.length > 6) {
|
||||||
|
return 'tab-son-class'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//初始化tab切换（判断标题不同，点击事件的判断变量不同）
|
||||||
|
function tabInitialize() {
|
||||||
|
return tabindex.value
|
||||||
|
}
|
||||||
|
//tab切换点击事件
|
||||||
|
function tabSwitch(name) {
|
||||||
|
tabindex.value = name
|
||||||
|
return tabindex.value
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.function-intorduction {
|
||||||
|
width: 100%;
|
||||||
|
background: #f7f8fa;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
overflow-x: unset;
|
||||||
|
.application-scenarios-and-case-son {
|
||||||
|
padding-top: 0.8rem;
|
||||||
|
padding-bottom: 0.8rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
overflow: unset;
|
||||||
|
.tab {
|
||||||
|
max-width: 13rem;
|
||||||
|
overflow-x: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
color: #808080;
|
||||||
|
border-bottom: 0.01rem #e4e6f5 solid;
|
||||||
|
margin-top: 0.45rem;
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
cursor: pointer;
|
||||||
|
padding-left: 0.4rem;
|
||||||
|
padding-right: 0.4rem;
|
||||||
|
.tab-son {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 1rem;
|
||||||
|
.tab-top {
|
||||||
|
min-width: 1.2rem;
|
||||||
|
font-size: 0.24rem;
|
||||||
|
line-height: 0.24rem;
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
max-width: 2rem;
|
||||||
|
height: 0.24rem;
|
||||||
|
display: -webkit-box;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
.tab-top-down {
|
||||||
|
min-width: 1.2rem;
|
||||||
|
color: #526aff;
|
||||||
|
margin-bottom: 0.16rem;
|
||||||
|
}
|
||||||
|
.tab-bottom {
|
||||||
|
height: 0.04rem;
|
||||||
|
width: 0.6rem;
|
||||||
|
background: #526aff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tab-son-class {
|
||||||
|
margin-left: 4.3rem;
|
||||||
|
margin-bottom: 0.02rem;
|
||||||
|
}
|
||||||
|
.tab-son-class-two {
|
||||||
|
margin-left: 2.3rem;
|
||||||
|
margin-bottom: 0.02rem;
|
||||||
|
}
|
||||||
|
.tab-son:last-child {
|
||||||
|
margin-right: 0rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tab::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(82, 106, 255, 0.4);
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 13rem;
|
||||||
|
height: 3.4rem;
|
||||||
|
.content-left {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
min-width: 6.2rem;
|
||||||
|
:deep(.ant-image-img) {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
// text-align: center;
|
||||||
|
.content-top {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-right {
|
||||||
|
width: 6.2rem;
|
||||||
|
height: 3.4rem;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.content-right-scene,
|
||||||
|
.content-right-case {
|
||||||
|
width: 6.2rem;
|
||||||
|
height: 3.4rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.content-left-scene,
|
||||||
|
.content-left-case {
|
||||||
|
height: 3.4rem;
|
||||||
|
width: 6.35rem;
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 6.35rem 3.4rem;
|
||||||
|
}
|
||||||
|
.content-top {
|
||||||
|
font-size: 0.22rem;
|
||||||
|
line-height: 0.22rem;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 0.35rem;
|
||||||
|
}
|
||||||
|
.content-bottom {
|
||||||
|
font-size: 0.18rem;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 0.26rem;
|
||||||
|
display: -webkit-box;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 6;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.application-scenarios-and-case-son:first-child {
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,163 @@
|
||||||
|
<!--
|
||||||
|
* @Author: hisense.liangjunhua
|
||||||
|
* @Date: 2022-06-08 14:54:01
|
||||||
|
* @LastEditors: hisense.liangjunhua
|
||||||
|
* @LastEditTime: 2022-06-15 18:24:39
|
||||||
|
* @Description: 应用详情页导航
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="application-navigation" v-if="navList.length > 0">
|
||||||
|
<template v-for="nav in navList" :key="nav.key">
|
||||||
|
<div
|
||||||
|
class="nav"
|
||||||
|
:class="{ select: nav.key == select }"
|
||||||
|
v-if="nav.show"
|
||||||
|
@click="selectNav(nav.key)"
|
||||||
|
>
|
||||||
|
{{ nav.name }}
|
||||||
|
<span class="line"></span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ref, defineProps, watch } from 'vue'
|
||||||
|
import mybus from '@/myplugins/mybus'
|
||||||
|
const navList = ref([
|
||||||
|
{
|
||||||
|
name: '组件展示',
|
||||||
|
key: 'eveloper-presentation',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '功能介绍',
|
||||||
|
key: 'function-introduction',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '应用场景',
|
||||||
|
key: 'application-scenarios',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '应用案例',
|
||||||
|
key: 'application-case',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '组件试用',
|
||||||
|
key: 'developer-trial',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '使用方式',
|
||||||
|
key: 'department-and-service-provider',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '常见问题',
|
||||||
|
key: 'common-problem',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
const props = defineProps({
|
||||||
|
selectNow: { type: String, default: '' },
|
||||||
|
dataList: { type: Object, default: null },
|
||||||
|
})
|
||||||
|
const select = ref('algorithm-display')
|
||||||
|
const list = ref([])
|
||||||
|
const selectNav = (key) => {
|
||||||
|
select.value = key
|
||||||
|
mybus.emit('flyToView', select.value)
|
||||||
|
}
|
||||||
|
if (props.dataList.infoList) {
|
||||||
|
list.value = []
|
||||||
|
props.dataList.infoList.map((item) => {
|
||||||
|
debugger
|
||||||
|
if (
|
||||||
|
item.attrType === '常见问题' ||
|
||||||
|
item.attrType === '应用案例' ||
|
||||||
|
item.attrType === '应用场景'
|
||||||
|
) {
|
||||||
|
list.value.push(item.attrType)
|
||||||
|
} else if (item.attrType === '组件视频介绍') {
|
||||||
|
list.value.push('组件展示')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
navList.value.forEach((item) => {
|
||||||
|
console.log(item)
|
||||||
|
if (list.value.indexOf(item.name) > -1) {
|
||||||
|
item.show = true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
select.value = navList.value.filter(
|
||||||
|
(item) => item.name === list.value[0]
|
||||||
|
)[0].key
|
||||||
|
console.log('11111111111111111111111111', list.value, navList.value)
|
||||||
|
}
|
||||||
|
watch(
|
||||||
|
() => props.selectNow,
|
||||||
|
(newValue) => {
|
||||||
|
select.value = newValue
|
||||||
|
}
|
||||||
|
)
|
||||||
|
watch(
|
||||||
|
() => props.dataList,
|
||||||
|
(val) => {
|
||||||
|
if (val) {
|
||||||
|
list.value = []
|
||||||
|
val.infoList.map((item) => {
|
||||||
|
if (
|
||||||
|
item.attrType === '功能介绍' ||
|
||||||
|
item.attrType === '常见问题' ||
|
||||||
|
item.attrType === '应用案例' ||
|
||||||
|
item.attrType === '应用场景'
|
||||||
|
) {
|
||||||
|
list.value.push(item.attrType)
|
||||||
|
} else if (item.attrType === '组件视频介绍') {
|
||||||
|
list.value.push('组件展示')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
list.value.push('组件试用')
|
||||||
|
list.value.push('使用方式')
|
||||||
|
navList.value.forEach((item) => {
|
||||||
|
console.log(item)
|
||||||
|
if (list.value.indexOf(item.name) > -1) {
|
||||||
|
item.show = true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (list.value.length > 0) {
|
||||||
|
select.value = navList.value.filter(
|
||||||
|
(item) => item.name === list.value[0]
|
||||||
|
)[0].key
|
||||||
|
}
|
||||||
|
console.log('11111111111111111111111111', list.value, navList.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.application-navigation {
|
||||||
|
width: 19.12rem;
|
||||||
|
height: 0.84rem;
|
||||||
|
line-height: 0.8rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
font-size: 0.24rem;
|
||||||
|
color: #666;
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 3rem;
|
||||||
|
box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
|
||||||
|
position: relative;
|
||||||
|
.nav {
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.line {
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.04rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.select {
|
||||||
|
color: #526aff;
|
||||||
|
.line {
|
||||||
|
background: #526aff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,265 @@
|
||||||
|
<!--使用方式-->
|
||||||
|
<template>
|
||||||
|
<div class="application-deployment-and-security" v-if="flag">
|
||||||
|
<div class="title">
|
||||||
|
<DetalsTitle
|
||||||
|
:title="dataFrom.title"
|
||||||
|
:type="dataFrom.englishTitle"
|
||||||
|
></DetalsTitle>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="content-card">
|
||||||
|
<div class="left">
|
||||||
|
<p>{{ dataFrom.linkName }}</p>
|
||||||
|
<a-tooltip>
|
||||||
|
<template #title>{{ dataFrom.link }}</template>
|
||||||
|
<p>{{ dataFrom.link }}</p>
|
||||||
|
</a-tooltip>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div @click="technical()">技术文档</div>
|
||||||
|
<div>新手指引</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-card">
|
||||||
|
<div v-for="(item, index) in dataFrom.content" :key="index">
|
||||||
|
<div class="card-title">{{ item.childrenTitle }}</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<div v-for="carditem in item.childrenContent" :key="carditem">
|
||||||
|
<div>
|
||||||
|
<span>{{ carditem.attrType }}：</span>
|
||||||
|
<a-tooltip>
|
||||||
|
<template #title>{{ carditem.attrValue }}</template>
|
||||||
|
<span>{{ carditem.attrValue }}</span>
|
||||||
|
</a-tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||||
|
import { ref, defineProps, watch } from 'vue'
|
||||||
|
import { pinyin } from 'pinyin-pro'
|
||||||
|
let flag = ref(true)
|
||||||
|
let dataFrom = ref({
|
||||||
|
title: '使用方式',
|
||||||
|
englishTitle: 'USAGE',
|
||||||
|
linkName: '组件地址',
|
||||||
|
link: '',
|
||||||
|
content: [
|
||||||
|
{
|
||||||
|
childrenTitle: '归属部门',
|
||||||
|
childrenContent: [
|
||||||
|
{
|
||||||
|
attrType: '部门联系人',
|
||||||
|
attrValue: '------',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attrType: '联系人电话',
|
||||||
|
attrValue: '------',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
childrenTitle: '服务商信息',
|
||||||
|
childrenContent: [
|
||||||
|
{
|
||||||
|
attrType: '服务商联系人',
|
||||||
|
attrValue: '------',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attrType: '联系人电话',
|
||||||
|
attrValue: '------',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
console.log(dataFrom.value)
|
||||||
|
//数据初始化
|
||||||
|
const props = defineProps({
|
||||||
|
dataList: { type: Object, default: null },
|
||||||
|
})
|
||||||
|
if (props.dataList.infoList) {
|
||||||
|
let obj = props.dataList.infoList.filter(
|
||||||
|
(item) => item.attrType === '组件地址'
|
||||||
|
)[0]
|
||||||
|
if (!obj) {
|
||||||
|
flag.value = false
|
||||||
|
} else {
|
||||||
|
dataFrom.value.content[0].childrenContent[0].attrValue =
|
||||||
|
props.dataList.deptContacts
|
||||||
|
dataFrom.value.content[0].childrenContent[1].attrValue =
|
||||||
|
props.dataList.deptPhone
|
||||||
|
props.dataList.infoList.map((item) => {
|
||||||
|
if (item.attrType == '组件地址') {
|
||||||
|
dataFrom.value.link = item.attrValue
|
||||||
|
} else if (item.attrType == '服务商联系人') {
|
||||||
|
dataFrom.value.content[1].childrenContent[0].attrValue =
|
||||||
|
item.attrValue
|
||||||
|
} else if (item.attrType == '服务商联系电话') {
|
||||||
|
dataFrom.value.content[1].childrenContent[1].attrValue =
|
||||||
|
item.attrValue
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log('obj', dataFrom.value)
|
||||||
|
//技术文档
|
||||||
|
function technical() {
|
||||||
|
// 拼接路径
|
||||||
|
const type = pinyin(props.dataList.type, {
|
||||||
|
pattern: 'initial',
|
||||||
|
}).replace(/\s*/g, '')
|
||||||
|
// 打开文档
|
||||||
|
const id = props.dataList.id
|
||||||
|
window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
|
||||||
|
// console.log('dataFrom.value.link', dataFrom.value.link)
|
||||||
|
// window.open(
|
||||||
|
// window.SITE_CONFIG.previewUrl +
|
||||||
|
// 'hisense_office/onlinePreview?url=' +
|
||||||
|
// btoa(encodeURI(dataFrom.value.link))
|
||||||
|
// )
|
||||||
|
}
|
||||||
|
watch(
|
||||||
|
() => props.dataList,
|
||||||
|
(val) => {
|
||||||
|
if (val) {
|
||||||
|
let obj = val.infoList.filter((item) => item.attrType === '组件地址')[0]
|
||||||
|
if (!obj) {
|
||||||
|
flag.value = false
|
||||||
|
} else {
|
||||||
|
dataFrom.value.content[0].childrenContent[0].attrValue =
|
||||||
|
props.dataList.deptContacts
|
||||||
|
dataFrom.value.content[0].childrenContent[1].attrValue =
|
||||||
|
props.dataList.deptPhone
|
||||||
|
props.dataList.infoList.map((item) => {
|
||||||
|
if (item.attrType == '组件地址') {
|
||||||
|
dataFrom.value.link = item.attrValue
|
||||||
|
} else if (item.attrType == '服务商联系人') {
|
||||||
|
dataFrom.value.content[1].childrenContent[0].attrValue =
|
||||||
|
item.attrValue
|
||||||
|
} else if (item.attrType == '服务商联系电话') {
|
||||||
|
dataFrom.value.content[1].childrenContent[1].attrValue =
|
||||||
|
item.attrValue
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.application-deployment-and-security {
|
||||||
|
padding: 0.8rem 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
.title {
|
||||||
|
margin-bottom: 0.3rem;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
width: 13rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
.content-card {
|
||||||
|
height: 1.5rem;
|
||||||
|
width: 6.2rem;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
rgba(113, 132, 252, 0.4),
|
||||||
|
rgba(148, 163, 252, 0.4)
|
||||||
|
);
|
||||||
|
padding: 0 0.3rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
& > div {
|
||||||
|
height: 0.9rem;
|
||||||
|
width: 3.1rem;
|
||||||
|
padding-left: 0.3rem;
|
||||||
|
}
|
||||||
|
& > div:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
border-right: 0.01rem solid #b0b9f1;
|
||||||
|
}
|
||||||
|
.card-title {
|
||||||
|
font-size: 0.26rem;
|
||||||
|
color: #212956;
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
line-height: 0.26rem;
|
||||||
|
}
|
||||||
|
.card-content {
|
||||||
|
white-space: nowrap;
|
||||||
|
div {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
color: rgba(33, 41, 86, 0.8);
|
||||||
|
font-size: 0.2rem;
|
||||||
|
max-width: 2.8rem;
|
||||||
|
div {
|
||||||
|
max-width: 2.8rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div:first-child {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-card:first-child {
|
||||||
|
position: relative;
|
||||||
|
.left {
|
||||||
|
border: 0;
|
||||||
|
p:first-child {
|
||||||
|
font-size: 0.26rem;
|
||||||
|
color: #212956;
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
line-height: 0.26rem;
|
||||||
|
}
|
||||||
|
p:last-child {
|
||||||
|
font-size: 0.2rem;
|
||||||
|
color: #212956;
|
||||||
|
line-height: 0.26rem;
|
||||||
|
max-width: 4.5rem;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
position: absolute;
|
||||||
|
right: 0.6rem;
|
||||||
|
top: 50%;
|
||||||
|
width: 1.28rem;
|
||||||
|
margin-top: -0.45rem;
|
||||||
|
cursor: pointer;
|
||||||
|
& > div {
|
||||||
|
width: 1.28rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
font-size: 0.2rem;
|
||||||
|
color: #526aff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 0.4rem;
|
||||||
|
}
|
||||||
|
& > div:first-child {
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,116 @@
|
||||||
|
<!--
|
||||||
|
* @Author: hisense.liangjunhua
|
||||||
|
* @Date: 2022-06-08 15:25:33
|
||||||
|
* @LastEditors: hisense.liangjunhua
|
||||||
|
* @LastEditTime: 2022-06-14 11:30:52
|
||||||
|
* @Description: 应用展示 视频播放
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="application-presentation" v-if="flag">
|
||||||
|
<detals-title title="组件展示" type="IMAGE&VIDEO"></detals-title>
|
||||||
|
<div class="main">
|
||||||
|
<div class="play" @click="showModal"></div>
|
||||||
|
</div>
|
||||||
|
<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%">
|
||||||
|
<vue3VideoPlay v-bind="options" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</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)
|
||||||
|
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 {
|
||||||
|
options.src = obj.attrValue
|
||||||
|
}
|
||||||
|
}
|
||||||
|
watch(
|
||||||
|
() => props.dataList,
|
||||||
|
(val) => {
|
||||||
|
if (val) {
|
||||||
|
let obj = val.infoList.filter(
|
||||||
|
(item) => item.attrType === '组件视频介绍'
|
||||||
|
)[0]
|
||||||
|
console.log('视频==============>', obj)
|
||||||
|
if (!obj) {
|
||||||
|
flag.value = false
|
||||||
|
} else {
|
||||||
|
options.src = obj.attrValue
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.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;
|
||||||
|
background-size: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,199 @@
|
||||||
|
<!--
|
||||||
|
* @Author: hisense.liangjunhua
|
||||||
|
* @Date: 2022-06-08 11:56:28
|
||||||
|
* @LastEditors: hisense.liangjunhua
|
||||||
|
* @LastEditTime: 2022-06-14 11:31:12
|
||||||
|
* @Description: 开发组件详情页头部
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="algorithm-top-details">
|
||||||
|
<div class="left">
|
||||||
|
<div class="top">
|
||||||
|
<span class="name">{{ props.dataList.name }}</span>
|
||||||
|
<div class="label-content">
|
||||||
|
<p class="lable-father">
|
||||||
|
<span class="label">{{ props.dataList.type }}</span>
|
||||||
|
<span class="label">{{ props.dataList.shareType }}</span>
|
||||||
|
<span class="label">{{ props.dataList.shareCondition }}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- <span class="label">免费</span> -->
|
||||||
|
</div>
|
||||||
|
<div class="main">
|
||||||
|
<div>应用领域：{{ applicationArea }}</div>
|
||||||
|
<div>
|
||||||
|
{{ props.dataList.description }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom" v-if="props.dataList.id">
|
||||||
|
<!-- <a-button type="primary" @click="toView()">
|
||||||
|
<template #icon><form-outlined /></template>
|
||||||
|
申请使用
|
||||||
|
</a-button>
|
||||||
|
<a-button type="primary" @click="addShoppingCart()">
|
||||||
|
<template #icon><shopping-cart-outlined /></template>
|
||||||
|
加入购物车
|
||||||
|
</a-button> -->
|
||||||
|
<a-button type="primary" @click="goTOCollection()">收藏</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
// import { ShoppingCartOutlined } from '@ant-design/icons-vue'
|
||||||
|
import { defineProps, ref, watch } from 'vue'
|
||||||
|
import { scInsert } from '@/api/personalCenter'
|
||||||
|
// import { sgcInsert } from '@/api/home'
|
||||||
|
// import { useRouter } from 'vue-router'
|
||||||
|
// import mybus from '@/myplugins/mybus'
|
||||||
|
import { message } from 'ant-design-vue'
|
||||||
|
const props = defineProps({
|
||||||
|
dataList: { type: Object, default: null },
|
||||||
|
})
|
||||||
|
// const router = useRouter()
|
||||||
|
const applicationArea = ref('')
|
||||||
|
// // 加入申购车
|
||||||
|
// const addShoppingCart = () => {
|
||||||
|
// console.log('加入申购车==================>', props.dataList)
|
||||||
|
// sgcInsert({
|
||||||
|
// delFlag: '0',
|
||||||
|
// resourceId: props.dataList.id,
|
||||||
|
// // userId: userId.value,
|
||||||
|
// }).then((res) => {
|
||||||
|
// console.log(res)
|
||||||
|
// message.success('添加申购车成功！')
|
||||||
|
// mybus.emit('getSgcNum')
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// // 立即申请
|
||||||
|
// function toView() {
|
||||||
|
// // window.open(newpage.href, '_blank')
|
||||||
|
// router.push({
|
||||||
|
// path: '/apply',
|
||||||
|
// query: {
|
||||||
|
// name: props.dataList.name,
|
||||||
|
// resourceId: [props.dataList.id],
|
||||||
|
// },
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// 收藏
|
||||||
|
const goTOCollection = () => {
|
||||||
|
console.log('收藏===================》', props.dataList)
|
||||||
|
scInsert([{ resourceId: props.dataList.id }]).then((res) => {
|
||||||
|
console.log(res)
|
||||||
|
message.success('收藏成功')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (props.dataList.infoList) {
|
||||||
|
applicationArea.value = props.dataList.infoList.filter(
|
||||||
|
(val) => val.attrType === '应用领域'
|
||||||
|
)[0].attrValue
|
||||||
|
}
|
||||||
|
watch(
|
||||||
|
() => props.dataList,
|
||||||
|
(val) => {
|
||||||
|
if (val) {
|
||||||
|
applicationArea.value = props.dataList.infoList.filter(
|
||||||
|
(val) => val.attrType === '应用领域'
|
||||||
|
)[0].attrValue
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.algorithm-top-details {
|
||||||
|
height: 6rem;
|
||||||
|
padding: 1.8rem 0 0;
|
||||||
|
background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.left {
|
||||||
|
max-width: 7.2rem;
|
||||||
|
color: #fff;
|
||||||
|
margin-right: 0.8rem;
|
||||||
|
|
||||||
|
.top {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
span {
|
||||||
|
font-size: 0.14rem;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
// max-width: 3.3rem;
|
||||||
|
// overflow: hidden;
|
||||||
|
// text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: 0.4rem;
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
}
|
||||||
|
.label-content {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.lable-father {
|
||||||
|
position: absolute;
|
||||||
|
min-width: 2.5rem;
|
||||||
|
right: -2.5rem;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.label {
|
||||||
|
padding: 0.01rem 0.1rem;
|
||||||
|
margin-right: 0.1rem;
|
||||||
|
border-radius: 0.13rem;
|
||||||
|
background: rgba(255, 255, 255, 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.main {
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
font-size: 0.18rem;
|
||||||
|
line-height: 0.34rem;
|
||||||
|
& > div:nth-of-type(1) {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
& > div:nth-of-type(2) {
|
||||||
|
max-height: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
margin-top: 0.4rem;
|
||||||
|
display: flex;
|
||||||
|
.ant-btn {
|
||||||
|
height: 0.5rem;
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
background: #ff8b55;
|
||||||
|
border-radius: 0.06rem;
|
||||||
|
font-size: 0.2rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.ant-btn:nth-of-type(1) {
|
||||||
|
width: 1.8rem;
|
||||||
|
}
|
||||||
|
.ant-btn:nth-of-type(2) {
|
||||||
|
width: 2.2rem;
|
||||||
|
}
|
||||||
|
.ant-btn:nth-of-type(3) {
|
||||||
|
width: 1.45rem;
|
||||||
|
background: #fff;
|
||||||
|
color: #526aff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
width: 5.8rem;
|
||||||
|
height: 4rem;
|
||||||
|
background: url('~@/assets/detailsAll/sf_right_bg.png') no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
margin-top: -0.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
<!--
|
||||||
|
* @Author: hisense.liangjunhua
|
||||||
|
* @Date: 2022-06-09 09:29:29
|
||||||
|
* @LastEditors: hisense.liangjunhua
|
||||||
|
* @LastEditTime: 2022-06-13 15:21:26
|
||||||
|
* @Description: 组件试用
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="algorithm-on-trial" v-if="flag">
|
||||||
|
<detals-title title="组件试用" type="PROBATION"></detals-title>
|
||||||
|
<div class="main">
|
||||||
|
<div class="main-left">
|
||||||
|
<p>{{ dataFrom.linkName }}</p>
|
||||||
|
<p>{{ dataFrom.link }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="main-center">
|
||||||
|
<p>{{ dataFrom.numberName }}</p>
|
||||||
|
<p>{{ dataFrom.number }}</p>
|
||||||
|
<div @click="copyFunction(dataFrom.number, '复制账号')">复制账号</div>
|
||||||
|
</div>
|
||||||
|
<div class="main-right">
|
||||||
|
<p>{{ dataFrom.passwordName }}</p>
|
||||||
|
<p>{{ dataFrom.password }}</p>
|
||||||
|
<div @click="copyFunction(dataFrom.password2, '复制密码')">
|
||||||
|
复制密码
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
|
||||||
|
import { ref, defineProps, watch } from 'vue'
|
||||||
|
import { message } from 'ant-design-vue'
|
||||||
|
let flag = ref(true)
|
||||||
|
const props = defineProps({
|
||||||
|
dataList: { type: Object, default: null },
|
||||||
|
})
|
||||||
|
const dataFrom = ref({
|
||||||
|
linkName: '试用地址',
|
||||||
|
link: 'http://localhost:8080/#/detailsfdddffffffffffffffdfgdfgdfdgdfgdfg',
|
||||||
|
numberName: '试用账号',
|
||||||
|
number: 'zhangfeihu',
|
||||||
|
passwordName: '试用密码',
|
||||||
|
password: '**************************',
|
||||||
|
password2: '',
|
||||||
|
})
|
||||||
|
if (props.dataList.infoList) {
|
||||||
|
let obj = props.dataList.infoList.filter(
|
||||||
|
(item) => item.attrType === '试用地址'
|
||||||
|
)[0]
|
||||||
|
if (!obj) {
|
||||||
|
flag.value = false
|
||||||
|
} else {
|
||||||
|
props.dataList.infoList.map((item) => {
|
||||||
|
if (item.attrType == '试用地址') {
|
||||||
|
dataFrom.value.link = item.attrValue
|
||||||
|
} else if (item.attrType == '试用用户名') {
|
||||||
|
dataFrom.value.number = item.attrValue
|
||||||
|
} else if (item.attrType == '试用密码') {
|
||||||
|
dataFrom.value.password2 = item.attrValue
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const onTrial = ref('http://localhost:8080/#/details?id=1522550194535735298')
|
||||||
|
//复制方法
|
||||||
|
const copyFunction = (data, name) => {
|
||||||
|
let url = data
|
||||||
|
let oInput = document.createElement('input')
|
||||||
|
oInput.value = url
|
||||||
|
document.body.appendChild(oInput)
|
||||||
|
oInput.select() // 选择对象;
|
||||||
|
console.log(oInput.value)
|
||||||
|
document.execCommand('Copy') // 执行浏览器复制命令
|
||||||
|
oInput.remove() // 执行浏览器复制命令
|
||||||
|
message.success(name + '成功')
|
||||||
|
}
|
||||||
|
watch(
|
||||||
|
() => props.dataList,
|
||||||
|
(val) => {
|
||||||
|
if (val) {
|
||||||
|
let obj = val.infoList.filter((item) => item.attrType === '试用地址')[0]
|
||||||
|
if (!obj) {
|
||||||
|
flag.value = false
|
||||||
|
} else {
|
||||||
|
props.dataList.infoList.map((item) => {
|
||||||
|
if (item.attrType == '试用地址') {
|
||||||
|
dataFrom.value.link = item.attrValue
|
||||||
|
} else if (item.attrType == '试用用户名') {
|
||||||
|
dataFrom.value.number = item.attrValue
|
||||||
|
} else if (item.attrType == '试用密码') {
|
||||||
|
dataFrom.value.password2 = item.attrValue
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.algorithm-on-trial {
|
||||||
|
padding: 0.8rem 0px 0.8rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
.main {
|
||||||
|
margin-top: 0.3rem;
|
||||||
|
width: 13rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
background: url('~@/assets/detailsAll/kfzj_sybg.png') no-repeat;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 33.33% 33.33% 33.33%;
|
||||||
|
align-items: center;
|
||||||
|
.main-left {
|
||||||
|
border-right: 0.01rem #ffffff solid;
|
||||||
|
padding-left: 0.7rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
.main-center {
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
.main-right {
|
||||||
|
padding-right: 0.7rem;
|
||||||
|
}
|
||||||
|
& > div > p:first-child {
|
||||||
|
font-size: 0.26rem;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
& > div > p:nth-child(2) {
|
||||||
|
font-size: 0.22rem;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 0.34rem;
|
||||||
|
}
|
||||||
|
& > div:first-child > p:last-child {
|
||||||
|
text-decoration: underline;
|
||||||
|
word-wrap: break-word;
|
||||||
|
word-break: normal;
|
||||||
|
}
|
||||||
|
& > div > div:last-child {
|
||||||
|
height: 0.34rem;
|
||||||
|
width: 1.1rem;
|
||||||
|
border: 0.01rem solid #ffffff;
|
||||||
|
border-radius: 0.06rem;
|
||||||
|
font-size: 0.18rem;
|
||||||
|
color: #ffffff;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 0.34rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -16,6 +16,12 @@
|
||||||
<application-details
|
<application-details
|
||||||
v-else-if="showView === 'application-details'"
|
v-else-if="showView === 'application-details'"
|
||||||
></application-details>
|
></application-details>
|
||||||
|
<developer-components
|
||||||
|
v-else-if="showView === 'development-of-component'"
|
||||||
|
></developer-components>
|
||||||
|
<business-details
|
||||||
|
v-else-if="showView === 'business-details'"
|
||||||
|
></business-details>
|
||||||
<home-footer></home-footer>
|
<home-footer></home-footer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -28,6 +34,7 @@
|
||||||
import HomeFooter from '@/views/newHome/components/Footer'
|
import HomeFooter from '@/views/newHome/components/Footer'
|
||||||
import AlgorithmDetails from '@/views/detailsAll/AlgorithmDetails'
|
import AlgorithmDetails from '@/views/detailsAll/AlgorithmDetails'
|
||||||
import ApplicationDetails from '@/views/detailsAll/ApplicationDetails'
|
import ApplicationDetails from '@/views/detailsAll/ApplicationDetails'
|
||||||
|
import DeveloperComponents from '@/views/detailsAll/DeveloperComponents'
|
||||||
import { selectOne } from '@/api/home'
|
import { selectOne } from '@/api/home'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
|
@ -39,6 +46,7 @@
|
||||||
HomeFooter,
|
HomeFooter,
|
||||||
AlgorithmDetails,
|
AlgorithmDetails,
|
||||||
ApplicationDetails,
|
ApplicationDetails,
|
||||||
|
DeveloperComponents,
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const formState = reactive({
|
const formState = reactive({
|
||||||
|
|
@ -78,12 +86,35 @@
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const id = router.currentRoute.value.query.id
|
const id = router.currentRoute.value.query.id
|
||||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||||
let showView = ref('algorithm-details')
|
let showView = ref('developer-components')
|
||||||
const init = () => {
|
const init = () => {
|
||||||
if (id) {
|
if (id) {
|
||||||
selectOne(id).then((res) => {
|
selectOne(id).then((res) => {
|
||||||
if (res.data.data.type == '组件服务') {
|
if (res.data.data.type == '组件服务') {
|
||||||
showView.value = 'algorithm-details'
|
let detection = res.data.data.infoList.filter(
|
||||||
|
(item) => item.attrType === '组件类型'
|
||||||
|
)[0]
|
||||||
|
if (detection) {
|
||||||
|
res.data.data.infoList.map((item) => {
|
||||||
|
if (item.attrType == '组件类型') {
|
||||||
|
switch (item.attrValue) {
|
||||||
|
case '智能算法':
|
||||||
|
showView.value = 'algorithm-details'
|
||||||
|
break
|
||||||
|
case '开发组件':
|
||||||
|
showView.value = 'development-of-component'
|
||||||
|
break
|
||||||
|
case '业务组件':
|
||||||
|
showView.value = 'business-details'
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
showView.value = 'algorithm-details'
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
showView.value = 'application-details'
|
showView.value = 'application-details'
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue