Compare commits

..

No commits in common. "d2a9efabce1cb09765e794e50e83728165db1f47" and "96993e040f035afefe363f287c9b08c9498c5963" have entirely different histories.

22 changed files with 58 additions and 2036 deletions

View File

@ -6,43 +6,43 @@
* @FilePath: \qiantai\front\public\static\config\footerData.js * @FilePath: \qiantai\front\public\static\config\footerData.js
* @Description: 底部菜单数据配置配置 * @Description: 底部菜单数据配置配置
*/ */
// const footerDataList = { const footerDataList = {
// //
// company: { // company: {
// left: '', // left: '',
// right: '' // right: ''
// }, // },
// address: [ // address: [
// { // {
// name: 'IC00000000', // name: 'IC00000000',
// value: '3702000106', // value: '3702000106',
// }, // },
// { // {
// name: '', // name: '',
// value: '17', // value: '17',
// }, // },
// { // {
// name: '0532-8561234', // name: '0532-8561234',
// value: '0532-2145122', // value: '0532-2145122',
// }, // },
// ] // ]
// 西 // 西
// company: { company: {
// left: '西', left: '青岛西海岸新区大数据发展促进局建设',
// right: 'v0.81' right: 'v0.81'
// }, },
// address: [ address: [
// { {
// name: 'IC00000000', name: '鲁IC备00000000号',
// value: '3702000106', value: '政府标识码3702000106',
// }, },
// { {
// name: '西', name: '版权所有:青岛西海岸新区大数据发展促进局',
// value: '西369', value: '地址青岛市西海岸新区长江中路369号',
// }, },
// { {
// name: '0532-86986596', name: '电话0532-86986596',
// value: '0532-86986596', value: '传真0532-86986596',
// }, },
// ] ]
// } }

View File

@ -3,7 +3,7 @@
* @Date: 2020-07-07 16:03:23 * @Date: 2020-07-07 16:03:23
* @LastEditors: hisense.wuhongjian * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-04-01 10:51:45 * @LastEditTime: 2022-04-01 10:51:45
* @Description: 三方参数配置 * @Description: 数据资源参数配置
*/ */
// const newLocation = 'qingdao' // const newLocation = 'qingdao'
// const newLocation = 'baotou' // const newLocation = 'baotou'
@ -14,11 +14,11 @@ const whoShow = {}
const launchedDataNumObject = {} const launchedDataNumObject = {}
// //
const navListManagement = {} const navListManagement = {}
//
const footerDataList = {}
// qingdao // qingdao
if (newLocation === 'qingdao') { if (newLocation === 'qingdao') {
//
whoShow.itShowQingDao = true whoShow.itShowQingDao = true
//
navListManagement.navList = [ navListManagement.navList = [
{ name: '共享门户', key: 'home' }, { name: '共享门户', key: 'home' },
{ name: '能力集市', key: 'DetailsPageconetent' }, { name: '能力集市', key: 'DetailsPageconetent' },
@ -31,29 +31,10 @@ if (newLocation === 'qingdao') {
// { name: '', key: 'houtaiguanli' }, // { name: '', key: 'houtaiguanli' },
{ name: '赋能案例', key: 'assignCase' }, { name: '赋能案例', key: 'assignCase' },
] ]
footerDataList.footerList = {
company: {
left: '青岛市大数据发展管理局建设',
right: '海信网络科技股份有限公司',
},
address: [
{
name: '鲁IC备00000000号',
value: '政府标识码3702000106',
},
{
name: '版权所有:青岛市大数据发展管理局',
value: '地址山东省青岛市香港中路17号市级机关办公楼',
},
{
name: '电话0532-8561234',
value: '传真0532-2145122',
},
],
}
} }
// baotou // baotou
else if (newLocation === 'baotou') { else if (newLocation === 'baotou') {
//
whoShow.itShowBaoTou = true whoShow.itShowBaoTou = true
launchedDataNumObject.launchedDataNum = [ launchedDataNumObject.launchedDataNum = [
{ {
@ -66,6 +47,7 @@ else if (newLocation === 'baotou') {
num: 976, num: 976,
}, },
] ]
//
navListManagement.navList = [ navListManagement.navList = [
{ name: '共享门户', key: 'home' }, { name: '共享门户', key: 'home' },
{ name: '能力集市', key: 'DetailsPageconetent' }, { name: '能力集市', key: 'DetailsPageconetent' },
@ -78,30 +60,12 @@ else if (newLocation === 'baotou') {
// { name: '', key: 'houtaiguanli' }, // { name: '', key: 'houtaiguanli' },
{ name: '赋能案例', key: 'assignCase' }, { name: '赋能案例', key: 'assignCase' },
] ]
footerDataList.footerList = {
company: {
left: '青岛西海岸新区大数据发展促进局建设',
right: 'v0.81',
},
address: [
{
name: '鲁IC备00000000号',
value: '政府标识码3702000106',
},
{
name: '版权所有:青岛西海岸新区大数据发展促进局',
value: '地址青岛市西海岸新区长江中路369号',
},
{
name: '电话0532-86986596',
value: '传真0532-86986596',
},
],
}
} }
// xihaian // xihaian
else if (newLocation === 'xihaian') { else if (newLocation === 'xihaian') {
//
whoShow.itShowXiHaiAn = true whoShow.itShowXiHaiAn = true
//
navListManagement.navList = [ navListManagement.navList = [
{ name: '共享门户', key: 'home' }, { name: '共享门户', key: 'home' },
{ name: '能力集市', key: 'DetailsPageconetent' }, { name: '能力集市', key: 'DetailsPageconetent' },
@ -114,24 +78,4 @@ else if (newLocation === 'xihaian') {
// { name: '', key: 'houtaiguanli' }, // { name: '', key: 'houtaiguanli' },
{ name: '赋能案例', key: 'assignCase' }, { name: '赋能案例', key: 'assignCase' },
] ]
footerDataList.footerList = {
company: {
left: '青岛西海岸新区大数据发展促进局建设',
right: 'v0.81',
},
address: [
{
name: '鲁IC备00000000号',
value: '政府标识码3702000106',
},
{
name: '版权所有:青岛西海岸新区大数据发展促进局',
value: '地址青岛市西海岸新区长江中路369号',
},
{
name: '电话0532-86986596',
value: '传真0532-86986596',
},
],
}
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 166 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 83 KiB

View File

@ -1,163 +0,0 @@
<!--
* @Author: hisense.liangjunhua
* @Date: 2022-06-08 11:32:22
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-06-20 18:59:01
* @Description: 图层服务详情页
-->
<template>
<div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
<!-- 头部基本信息 -->
<layer-service-top-details
:dataList="dataList.data"
></layer-service-top-details>
<!-- 导航 -->
<layer-service-navigation
:dataList="dataList.data"
:class="{ fixed: scrollTop >= 600 }"
:selectNow="selectNow"
></layer-service-navigation>
<!-- 图层展示 视频 -->
<layer-service-presentation
:dataList="dataList.data"
id="service-presentation"
class="scrollBox"
></layer-service-presentation>
<!-- 图层信息-->
<layer-service-information
:dataList="dataList.data"
id="service-information"
class="scrollBox"
></layer-service-information>
<!-- 应用场景 -->
<layer-service-application-scenarios
:dataList="dataList.data"
id="service-application-scenarios"
class="scrollBox"
></layer-service-application-scenarios>
<!-- 应用案例 -->
<layer-service-application-case
:dataList="dataList.data"
id="service-application-case"
class="scrollBox"
></layer-service-application-case>
<!-- 图层预览 -->
<layer-service-preview
:dataList="dataList.data"
id="service-preview"
class="scrollBox"
></layer-service-preview>
<!-- 使用方式-->
<layer-service-usage-mode
:dataList="dataList.data"
id="service-usage-mode"
class="scrollBox"
></layer-service-usage-mode>
<!-- 常见问题-->
<layer-service-common-problem
:dataList="dataList.data"
id="service-common-problem"
class="scrollBox"
></layer-service-common-problem>
</div>
</template>
<script setup>
import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //
import LayerServiceApplicationScenarios from '@/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue' //
import LayerServiceCommonProblem from '@/views/detailsAll/components/LayerService/LayerServiceCommonProblem' //
import LayerServiceInformation from '@/views/detailsAll/components/LayerService/LayerServiceInformation.vue' //
import LayerServiceNavigation from '@/views/detailsAll/components/LayerService/LayerServiceNavigation.vue' //
import LayerServicePresentation from '@/views/detailsAll/components/LayerService/LayerServicePresentation.vue' //
import LayerServicePreview from '@/views/detailsAll/components/LayerService/LayerServicePreview.vue' //
import LayerServiceTopDetails from '@/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue' //
import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使
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>

View File

@ -120,11 +120,11 @@
if (item.attrType === '组件地址') { if (item.attrType === '组件地址') {
dataFrom.value.content[0].linkValue = item.attrValue || '--' dataFrom.value.content[0].linkValue = item.attrValue || '--'
} else if (item.attrType === '服务商') { } else if (item.attrType === '服务商') {
dataFrom.value.content[0].facilitator2.value = item.attrValue || '--' dataFrom.value.content[0].facilitator.value = item.attrValue || '--'
} else if (item.attrType === '服务商联系人') { } else if (item.attrType === '服务商联系人') {
dataFrom.value.content[0].people2.value = item.attrValue || '--' dataFrom.value.content[0].people.value = item.attrValue || '--'
} else if (item.attrType === '服务商联系电话') { } else if (item.attrType === '服务商联系电话') {
dataFrom.value.content[0].phone2.value = item.attrValue || '--' dataFrom.value.content[0].phone.value = item.attrValue || '--'
} }
}) })
} }
@ -144,12 +144,12 @@
if (item.attrType === '组件地址') { if (item.attrType === '组件地址') {
dataFrom.value.content[0].linkValue = item.attrValue || '--' dataFrom.value.content[0].linkValue = item.attrValue || '--'
} else if (item.attrType === '服务商') { } else if (item.attrType === '服务商') {
dataFrom.value.content[0].facilitator2.value = dataFrom.value.content[0].facilitator.value =
item.attrValue || '--' item.attrValue || '--'
} else if (item.attrType === '服务商联系人') { } else if (item.attrType === '服务商联系人') {
dataFrom.value.content[0].people2.value = item.attrValue || '--' dataFrom.value.content[0].people.value = item.attrValue || '--'
} else if (item.attrType === '服务商联系电话') { } else if (item.attrType === '服务商联系电话') {
dataFrom.value.content[0].phone2.value = item.attrValue || '--' dataFrom.value.content[0].phone.value = item.attrValue || '--'
} }
}) })
} }

View File

@ -1,303 +0,0 @@
<!-- 应用案例 -->
<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:
'应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
},
],
},
])
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: 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;
text-align: center;
.tab-top {
min-width: 1.2rem;
font-size: 0.24rem;
line-height: 0.24rem;
margin-bottom: 0.2rem;
}
.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;
}
.content-right {
position: absolute;
right: 0;
}
.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: 5;
-webkit-box-orient: vertical;
}
}
}
.application-scenarios-and-case-son:first-child {
padding-top: 1rem;
}
}
</style>

View File

@ -1,254 +0,0 @@
<!-- 应用场景-->
<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="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-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;
text-align: 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>

View File

@ -1,123 +0,0 @@
<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: 0.8rem;
background: #f7f8fa;
.content {
width: 13rem;
margin: 0.2rem 0rem;
background: #ffffff;
padding: 0.4rem;
.content-son {
font-size: 0.2rem;
margin-bottom: 0.6rem;
.content-top {
display: flex;
align-items: center;
margin-bottom: 0.2rem;
line-height: 0.2rem;
}
.content-bottom {
display: flex;
line-height: 0.34rem;
color: #666666;
}
.content-top,
.content-bottom {
div:last-child {
width: calc(100% - 0.54rem);
}
}
.top-img {
width: 0.34rem;
height: 0.3rem;
background: url('~@/assets/detailsAll/sf_top_img.png') no-repeat;
background-position: center;
background-size: cover;
margin-right: 0.2rem;
}
.bottom-img {
width: 0.34rem;
height: 0.3rem;
background: url('~@/assets/detailsAll/sf_bottom_img.png') no-repeat;
ackground-size: cover;
background-position: center;
margin-right: 0.2rem;
}
}
.content-son:last-child {
margin-bottom: 0rem;
}
}
}
</style>

View File

@ -1,206 +0,0 @@
<template>
<!-- 图层信息 -->
<div class="usage-mode" v-if="flag">
<div class="tltle">
<DetalsTitle title="图层信息" type="INFORMATION"></DetalsTitle>
</div>
<div class="content">
<div class="content-left">
<div class="content-left-content">
<ul>
<li v-for="(item, index) in dataFromLeft" :key="index">
<img :src="iconImg" />
<span>{{ item.type }}</span>
<p>{{ item.value }}</p>
</li>
</ul>
<ul>
<li v-for="(item, index) in dataFromCenter" :key="index">
<img :src="iconImg" />
<span>{{ item.type }}</span>
<p>{{ item.value }}</p>
</li>
</ul>
<ul>
<li v-for="(item, index) in dataFromRight" :key="index">
<img :src="iconImg" />
<span>{{ item.type }}</span>
<p>{{ item.value }}</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script setup>
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
import { ref, defineProps, watch } from 'vue'
const iconImg = require('@/assets/detailsAll/layer-service/layer-icon.png')
const dataFromLeft = ref([
{
type: '服务类型',
value: '服务类型名称',
},
{
type: '覆盖区域',
value: '覆盖区域名称',
},
{
type: '切片策略',
value: '名称',
},
])
const dataFromCenter = ref([
{
type: '坐标系',
value: '名称',
},
{
type: '切片尺寸详情',
value: '名称',
},
{
type: '最小级别名称',
value: '名称',
},
])
const dataFromRight = ref([
{
type: '数据范围',
value: '名称',
},
{
type: '图层名称',
value: '名称',
},
{
type: '最大级别',
value: '名称',
},
])
//
const props = defineProps({
dataList: { type: Object, default: null },
})
const flag = ref(true)
if (props.dataList.infoList) {
let obj = props.dataList.infoList.filter(
(item) => item.attrType === '图层信息'
)[0]
if (!obj) {
flag.value = false
} else {
// dataFrom.value.content[0].link.value = props.dataList.apiUrl
// dataFrom.value.content[0].facilitator.value = props.dataList.deptContacts
// console.log('dataList', props.dataList)
// props.dataList.infoList.map((item) => {
// if (item.attrType === '') {
// dataFrom.value.content[0].linkValue = item.attrValue || '--'
// } else if (item.attrType === '') {
// dataFrom.value.content[0].facilitator2.value = item.attrValue || '--'
// } else if (item.attrType === '') {
// dataFrom.value.content[0].people2.value = item.attrValue || '--'
// } else if (item.attrType === '') {
// dataFrom.value.content[0].phone2.value = item.attrValue || '--'
// }
// })
}
}
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].link.value = val.apiUrl
// dataFrom.value.content[0].facilitator.value = val.deptContacts
// console.log('dataList', val)
// val.infoList.map((item) => {
// if (item.attrType === '') {
// dataFrom.value.content[0].linkValue = item.attrValue || '--'
// } else if (item.attrType === '') {
// dataFrom.value.content[0].facilitator2.value =
// item.attrValue || '--'
// } else if (item.attrType === '') {
// dataFrom.value.content[0].people2.value = item.attrValue || '--'
// } else if (item.attrType === '') {
// dataFrom.value.content[0].phone2.value = item.attrValue || '--'
// }
// })
}
}
}
)
</script>
<style lang="less" scoped>
.usage-mode {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.8rem 0;
.content {
margin-top: 0.3rem;
display: flex;
.content-left {
height: 2.8rem;
width: 13rem;
background: url('~@/assets/detailsAll/layer-service/layer-bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
border-radius: 0.1rem;
box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
display: flex;
align-items: center;
padding: 0 0.35rem;
.content-left-content {
width: 100%;
font-size: 0.2rem;
color: rgba(33, 41, 86, 0.8);
line-height: 0.2rem;
display: flex;
justify-content: space-between;
align-items: center;
ul {
padding: 0;
margin: 0;
}
ul li {
list-style: none;
display: flex;
align-items: center;
margin-bottom: 0.3rem;
line-height: 0.25rem;
}
img {
margin: 0 0.2rem 0 0;
width: 0.15rem;
height: 0.15rem;
}
span {
font-size: 0.2rem;
color: #666666;
display: block;
margin-right: 0.8rem;
width: 120px;
}
p {
width: 2rem;
margin-bottom: 0;
font-size: 0.2rem;
color: #333333;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
}
}
}
}
</style>

View File

@ -1,195 +0,0 @@
<!--
* @Author: hisense.liangjunhua
* @Date: 2022-06-08 14:54:01
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-06-15 18:24:39
* @Description: 应用详情页导航
-->
<template>
<div class="business-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: 'service-presentation',
},
{
name: '图层信息',
key: 'service-information',
},
{
name: '应用场景',
key: 'service-application-scenarios',
},
{
name: '应用案例',
key: 'service-application-case',
},
{
name: '图层预览',
key: 'service-preview',
},
{
name: '使用方式',
key: 'service-usage-mode',
},
{
name: '常见问题',
key: 'service-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
console.log(key, select.value)
mybus.emit('flyToView', select.value)
}
if (props.dataList.infoList) {
list.value = []
let arr = [
'组件视频介绍',
'图层信息',
'应用场景',
'应用案例',
'图层预览',
'使用方式',
'常见问题',
]
//
// eslint-disable-next-line vue/no-mutating-props
props.dataList.infoList.sort((a, b) => {
return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
})
props.dataList.infoList.map((item) => {
if (
item.attrType === '常见问题' ||
item.attrType === '图层信息' ||
item.attrType === '图层预览' ||
item.attrType === '应用场景' ||
item.attrType === '应用案例'
) {
list.value.push(item.attrType)
} else if (item.attrType === '组件视频介绍') {
list.value.push('图层展示')
}
})
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 = []
let arr = [
'组件视频介绍',
'图层信息',
'应用场景',
'应用案例',
'图层预览',
'使用方式',
'常见问题',
]
//
// eslint-disable-next-line vue/no-mutating-props
props.dataList.infoList.sort((a, b) => {
// console.log('==============>', a, b)
return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
})
val.infoList.map((item) => {
if (
item.attrType === '常见问题' ||
item.attrType === '图层信息' ||
item.attrType === '图层预览' ||
item.attrType === '应用场景' ||
item.attrType === '应用案例'
) {
list.value.push(item.attrType)
} else if (item.attrType === '组件视频介绍') {
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>
.business-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>

View File

@ -1,81 +0,0 @@
<!--
* @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"></detals-title>
<div class="main">
<img :src="img" />
</div>
</div>
</template>
<script setup>
import { ref, defineProps, watch } from 'vue'
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
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 imgindex = props.dataList.infoList.filter(
(item) => item.attrType === '组件图片'
)[0]
if (!imgindex) {
flag.value = false
} else {
img.value = imgindex.attrValue
}
}
watch(
() => props.dataList,
(val) => {
if (val) {
let imgindex = props.dataList.infoList.filter(
(item) => item.attrType === '组件图片'
)[0]
if (!imgindex) {
flag.value = false
} else {
img.value = imgindex.attrValue
}
}
}
)
</script>
<style lang="less" scoped>
.application-presentation {
padding: 0.8rem 3rem 0.8rem;
background: url('~@/assets/detailsAll/layer-service/layer-bgShow.png')
no-repeat;
background-position: center -66px;
background-size: 50%;
.main {
height: 3.8rem;
border-radius: 0.1rem;
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;
}
img {
width: 50%;
height: 100%;
border-radius: 0.1rem;
}
}
}
</style>

View File

@ -1,67 +0,0 @@
<!--
* @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="PREVIEW"></detals-title>
<div class="main" :style="`${img}background-position:center;`"></div>
</div>
</template>
<script setup>
import { ref, defineProps, watch } from 'vue'
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
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 imgindex = props.dataList.infoList.filter(
(item) => item.attrType === '图层预览'
)[0]
if (!imgindex) {
flag.value = false
} else {
img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
}
}
watch(
() => props.dataList,
(val) => {
if (val) {
let imgindex = props.dataList.infoList.filter(
(item) => item.attrType === '图层预览'
)[0]
if (!imgindex) {
flag.value = false
} else {
img.value =
'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
}
}
}
)
</script>
<style lang="less" scoped>
.application-presentation {
padding: 0.8rem 3rem 0;
.main {
height: 5rem;
border-radius: 0.1rem;
// background-image: url('~@/assets/detailsAll/sf_video_bg.png');
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
margin-top: 0.4rem;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>

View File

@ -1,233 +0,0 @@
<!--
* @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">
{{ componentType || 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>应用领域{{ businessArea }}</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 businessArea = 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('收藏成功')
})
}
const componentType = ref('')
if (props.dataList.infoList) {
businessArea.value = props.dataList.infoList.filter(
(val) => val.attrType === '应用领域'
)[0].attrValue
let obj = props.dataList.infoList.filter(
(val) => val.attrType === '组件类型'
)[0]
if (obj) {
componentType.value = obj.attrValue
}
}
watch(
() => props.dataList,
(val) => {
if (val) {
businessArea.value = props.dataList.infoList.filter(
(val) => val.attrType === '应用领域'
)[0].attrValue
let obj = props.dataList.infoList.filter(
(val) => val.attrType === '组件类型'
)[0]
if (obj) {
componentType.value = obj.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.4rem;
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) {
margin-top: 0.2rem;
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: #ffffff;
border-radius: 0.06rem;
font-size: 0.2rem;
display: flex;
justify-content: center;
align-items: center;
}
.ant-btn-primary {
color: #1890ff;
}
.ant-btn:nth-of-type(1) {
width: 1.8rem;
background-image: url('~@/assets/detailsAll/layer-service/layer-apply-using.png');
background-repeat: no-repeat;
background-position: 24px center;
background-color: #ff8b55;
color: #fff;
padding-left: 26px;
}
.ant-btn:nth-of-type(2) {
width: 2.2rem;
background-image: url('~@/assets/detailsAll/layer-service/layer-shopping-car.png');
background-repeat: no-repeat;
background-position: 24px center;
background-color: #ff8b55;
color: #fff;
padding-left: 26px;
}
.ant-btn:nth-of-type(3) {
width: 1.45rem;
background: #fff;
color: #526aff;
}
}
}
.right {
width: 5.8rem;
height: 4rem;
background: url('~@/assets/detailsAll/layer-service/layer-top-bg.png')
no-repeat;
background-size: 100%;
margin-top: -0.4rem;
}
}
</style>

View File

@ -1,288 +0,0 @@
<template>
<!-- 使用方式 -->
<div class="usage-mode" v-if="flag">
<div class="tltle">
<DetalsTitle
:title="dataFrom.title"
:type="dataFrom.englishTitle"
></DetalsTitle>
</div>
<div class="content" v-for="item in dataFrom.content" :key="item.title">
<div class="content-left">
<div class="left">
<div class="content-left-content">
<p>
<span>服务地址</span>
<span>{{ item.linkValue }}</span>
</p>
<p>
<span>样式服务地址</span>
<span>{{ item.linkValue }}</span>
</p>
</div>
</div>
<div class="right">
<div @click="technical()">接口文档</div>
<div @click="technicalNew()">使用手册</div>
</div>
</div>
<div class="content-right">
<div class="content-right-title">{{ item.contact }}</div>
<div class="content-right-content">
<p>
<span>{{ item.people.name }}</span>
<a-tooltip>
<template #title>{{ item.people.value }}</template>
<span>{{ item.people.value }}</span>
</a-tooltip>
</p>
<p>
<span>{{ item.phone.name }}</span>
<a-tooltip>
<template #title>{{ item.phone.value }}</template>
<span>{{ item.phone.value }}</span>
</a-tooltip>
</p>
</div>
</div>
</div>
</div>
</template>
<script setup>
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
import { pinyin } from 'pinyin-pro'
import { ref, defineProps, watch } from 'vue'
let dataFrom = ref({
title: '使用方式',
englishTitle: 'USAGE',
content: [
{
title: '组件地址',
link: {
name: '接口地址:',
},
linkValue: '',
contact: '归属部门',
facilitator: { name: '归属部门:', value: '讯飞科大' },
people: { name: '部门联系人:', value: '李四' },
phone: {
name: '联系人电话:',
value: '12345678901',
},
},
],
})
//
const props = defineProps({
dataList: { type: Object, default: null },
})
const flag = ref(true)
if (props.dataList.infoList) {
let obj = props.dataList.infoList.filter(
(item) => item.attrType === '技术文档'
)[0]
if (!obj) {
flag.value = false
} else {
// eslint-disable-next-line vue/no-setup-props-destructure
dataFrom.value.content[0].link.value = props.dataList.apiUrl
dataFrom.value.content[0].facilitator.value = props.dataList.deptContacts
console.log('dataList', props.dataList)
props.dataList.infoList.map((item) => {
if (item.attrType === '组件地址') {
dataFrom.value.content[0].linkValue = item.attrValue || '--'
} else if (item.attrType === '服务商') {
dataFrom.value.content[0].facilitator2.value = item.attrValue || '--'
} else if (item.attrType === '服务商联系人') {
dataFrom.value.content[0].people2.value = item.attrValue || '--'
} else if (item.attrType === '服务商联系电话') {
dataFrom.value.content[0].phone2.value = item.attrValue || '--'
}
})
}
}
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].link.value = val.apiUrl
dataFrom.value.content[0].facilitator.value = val.deptContacts
console.log('dataList', val)
val.infoList.map((item) => {
if (item.attrType === '组件地址') {
dataFrom.value.content[0].linkValue = item.attrValue || '--'
} else if (item.attrType === '服务商') {
dataFrom.value.content[0].facilitator2.value =
item.attrValue || '--'
} else if (item.attrType === '服务商联系人') {
dataFrom.value.content[0].people2.value = item.attrValue || '--'
} else if (item.attrType === '服务商联系电话') {
dataFrom.value.content[0].phone2.value = item.attrValue || '--'
}
})
}
}
}
)
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))
// )
}
function technicalNew() {
//
// 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))
)
}
</script>
<style lang="less" scoped>
.usage-mode {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.8rem 0;
.content {
margin-top: 0.3rem;
display: flex;
.content-left {
height: 1.8rem;
width: 6.2rem;
background: linear-gradient(
to right,
rgba(113, 132, 252, 0.4),
rgba(148, 163, 252, 0.4)
);
border-radius: 0.1rem;
margin-right: 0.6rem;
box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
display: flex;
align-items: center;
padding: 0 0.35rem;
.left {
.content-left-title {
font-size: 0.26rem;
line-height: 0.26rem;
color: #212956;
margin-bottom: 0.2rem;
span:first-child {
margin-right: 0.1rem;
}
}
.content-left-content {
width: 4.2rem;
font-size: 0.2rem;
color: rgba(33, 41, 86, 0.8);
line-height: 0.2rem;
p {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
// margin-bottom: 0.1rem;
font-size: 20px;
color: #212956;
line-height: 26px;
}
p:last-of-type {
margin-top: 20px;
}
}
}
.right {
div {
height: 0.4rem;
width: 1.3rem;
background: #ffffff;
border-radius: 0.2rem;
color: #526aff;
font-size: 0.2rem;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
div:first-child {
margin-bottom: 0.2rem;
}
}
}
.content-right {
height: 1.8rem;
width: 6.2rem;
background: linear-gradient(
to right,
rgba(113, 132, 252, 0.4),
rgba(148, 163, 252, 0.4)
);
border-radius: 0.1rem;
box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
display: flex;
justify-content: space-around;
padding: 0 0.3rem;
flex-direction: column;
justify-content: center;
.content-right-title {
font-size: 0.26rem;
line-height: 0.26rem;
color: #212956;
margin-bottom: 0.15rem;
}
.content-right-content {
display: flex;
font-size: 0.18rem;
color: rgba(33, 41, 86, 0.8);
line-height: 0.2rem;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
flex-direction: row;
margin-top: 0.2rem;
justify-content: space-between;
p {
// width: 1.60rem;
height: 0.2rem;
display: -webkit-box;
// overflow: hidden;
white-space: nowrap;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
margin-right: 0.15rem;
span {
cursor: pointer;
font-size: 20px;
color: #212956;
opacity: 0.8;
}
}
}
}
}
}
</style>

View File

@ -1053,12 +1053,12 @@
:resourceTotal="resourceTotal" :resourceTotal="resourceTotal"
></KnowledgeBase> ></KnowledgeBase>
</div> </div>
<!--<div class="talk-monitor" @click="openMonitor"> <div class="talk-monitor" @click="openMonitor">
<a-tooltip> <a-tooltip>
<template #title>问答机器人</template> <template #title>问答机器人</template>
<i></i> <i></i>
</a-tooltip> </a-tooltip>
</div>--> </div>
</div> </div>
<home-footer></home-footer> <home-footer></home-footer>
</template> </template>

View File

@ -22,7 +22,6 @@
<business-details <business-details
v-else-if="showView === 'business-details'" v-else-if="showView === 'business-details'"
></business-details> ></business-details>
<layer-service v-else-if="showView === 'layer-service'"></layer-service>
<home-footer></home-footer> <home-footer></home-footer>
</div> </div>
</div> </div>
@ -37,7 +36,6 @@
import ApplicationDetails from '@/views/detailsAll/ApplicationDetails' import ApplicationDetails from '@/views/detailsAll/ApplicationDetails'
import DeveloperComponents from '@/views/detailsAll/DeveloperComponents' import DeveloperComponents from '@/views/detailsAll/DeveloperComponents'
import BusinessDetails from '@/views/detailsAll/BusinessDetails' import BusinessDetails from '@/views/detailsAll/BusinessDetails'
import LayerService from '@/views/detailsAll/LayerService'
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({
@ -51,7 +49,6 @@
ApplicationDetails, ApplicationDetails,
DeveloperComponents, DeveloperComponents,
BusinessDetails, BusinessDetails,
LayerService,
}, },
setup() { setup() {
const formState = reactive({ const formState = reactive({
@ -91,7 +88,7 @@
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('details-view') let showView = ref('developer-components')
const init = () => { const init = () => {
if (id) { if (id) {
selectOne(id).then((res) => { selectOne(id).then((res) => {
@ -112,9 +109,6 @@
case '业务组件': case '业务组件':
showView.value = 'business-details' showView.value = 'business-details'
break break
case 'GIS图层':
showView.value = 'layer-service'
break
default: default:
break break
} }
@ -146,9 +140,6 @@
case '业务组件': case '业务组件':
showView.value = 'business-details' showView.value = 'business-details'
break break
case 'GIS图层':
showView.value = 'layer-service'
break
default: default:
break break
} }

View File

@ -26,10 +26,10 @@
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
console.log('footerDataList', footerDataList.footerList) console.log('footerDataList', footerDataList)
let dataList = ref({}) let dataList = ref({})
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
dataList.value = footerDataList.footerList dataList.value = footerDataList
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.footer { .footer {