开发文档
This commit is contained in:
parent
c5d7351809
commit
9a8be5272e
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 278 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 608 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 478 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
|
|
@ -1,17 +1,225 @@
|
|||
<template>
|
||||
<div class="menu-box">
|
||||
<home-header></home-header>
|
||||
<div></div>
|
||||
<home-footer></home-footer>
|
||||
<div class="content-box">
|
||||
<!-- 提供服务 -->
|
||||
<div class="img-bg service-box">
|
||||
<div class="title" style="margin-bottom: 20px">
|
||||
<div class="text text-white">提供服务</div>
|
||||
<div class="line line-white"></div>
|
||||
</div>
|
||||
<div class="list-box">
|
||||
<div class="list-item" v-for="(item, i) in seviceList" :key="i">
|
||||
<div class="item-name">{{ item.name }}</div>
|
||||
<div class="name-box">
|
||||
<div class="item-v" v-for="(v, j) in item.list" :key="j">{{ v }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- imgList -->
|
||||
<div class="img-box" v-for="(item, i) in imgList" :key="i">
|
||||
<div class="title">
|
||||
<div class="text">{{ item.name }}</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="img-bg" :class="item.className" :style="{ 'background-image': `url(${item.bgImg || ''})` }">
|
||||
</div>
|
||||
<div v-if="item.btnText" class="btn">{{ item.btnText }} >></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import HomeHeader from '@/views/home/components/header'
|
||||
import HomeFooter from '@/views/newHome/components/Footer'
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
const seviceList = ref(
|
||||
[
|
||||
{
|
||||
name: '组件服务',
|
||||
list: ['智能算法', '图层服务', '开发组件', '业务组件'],
|
||||
},
|
||||
{
|
||||
name: '应用资源',
|
||||
list: ['办公系统', '业务系统', '门户网站', '大屏看板', '小程序', '公众号'],
|
||||
},
|
||||
{
|
||||
name: '组件服务',
|
||||
list: ['智能算法', '图层服务', '开发组件', '业务组件'],
|
||||
},
|
||||
{
|
||||
name: '组件服务',
|
||||
list: ['智能算法', '图层服务', '开发组件', '业务组件'],
|
||||
},
|
||||
]
|
||||
)
|
||||
|
||||
const imgList = ref([
|
||||
{
|
||||
name: '能力上架',
|
||||
bgImg: require('../../../assets/menu/shelves.png'),
|
||||
btnText: '立即上架',
|
||||
className: 'shelves-img'
|
||||
},
|
||||
{
|
||||
name: '能力申请',
|
||||
bgImg: require('../../../assets/menu/apply.png'),
|
||||
btnText: '立即申请',
|
||||
className: 'apply-img'
|
||||
},
|
||||
{
|
||||
name: '需求发布',
|
||||
bgImg: require('../../../assets/menu/demand.png'),
|
||||
btnText: '立即发布',
|
||||
className: 'demand-img'
|
||||
},
|
||||
{
|
||||
name: '资源下架',
|
||||
bgImg: require('../../../assets/menu/down.png'),
|
||||
btnText: '立即下架',
|
||||
className: 'down-img'
|
||||
},
|
||||
])
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="less" scoped>
|
||||
.menu-box {
|
||||
width: 100%;
|
||||
width: 1920px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.text {
|
||||
padding: 20px 0;
|
||||
font-size: 26px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 50px;
|
||||
height: 3px;
|
||||
background: #0058e1;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.line-white {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.text-white {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
margin: 30px auto;
|
||||
color: #0058e1;
|
||||
border: 1px solid #0058e1;
|
||||
border-radius: 2px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: #e5eefc;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.img-box {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.service-box {
|
||||
width: 1920px;
|
||||
height: 613px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url('../../../assets/menu/service.png');
|
||||
|
||||
.list-box {
|
||||
width: 1560px;
|
||||
height: 350px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.img-bg {
|
||||
width: 1920px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.process-img {
|
||||
height: 855px;
|
||||
background-image: url('../../../assets/menu/process.png');
|
||||
}
|
||||
|
||||
.shelves-img {
|
||||
height: 497px;
|
||||
background-image: url('../../../assets/menu/shelves.png');
|
||||
}
|
||||
|
||||
.apply-img {
|
||||
height: 752px;
|
||||
background-image: url('../../../assets/menu/apply.png');
|
||||
}
|
||||
|
||||
.demand-img {
|
||||
height: 525px;
|
||||
background-image: url('../../../assets/menu/demand.png');
|
||||
}
|
||||
|
||||
.down-img {
|
||||
height: 544px;
|
||||
background-image: url('../../../assets/menu/down.png');
|
||||
}
|
||||
|
||||
.list-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.list-item {
|
||||
padding: 10px 20px;
|
||||
width: 310px;
|
||||
height: 330px;
|
||||
background: rgba(23, 85, 177, 0.43);
|
||||
border: 1px solid #74a9f8;
|
||||
border-radius: 2px;
|
||||
margin: 0 20px;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
.item-name {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
padding: 20px 0 10px 0;
|
||||
}
|
||||
|
||||
.name-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.item-v {
|
||||
width: 50%;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,55 +1,38 @@
|
|||
<template>
|
||||
<div class="menu-box">
|
||||
<home-header></home-header>
|
||||
<div class="menu-container">
|
||||
<div class="menu-box">
|
||||
<div id="container" class="content-menu">
|
||||
<div class="rela">
|
||||
<div class="left">
|
||||
<div
|
||||
class="first-title-text"
|
||||
v-for="(data, i) in titleList"
|
||||
:key="i"
|
||||
@click="changeName(data)"
|
||||
:style="{ color: data.name === titleData.name ? '#0058e1' : '' }"
|
||||
>
|
||||
<div class="first-title-text" v-for="(data, i) in titleList" :key="i" @click="changeName(data)"
|
||||
:style="{ color: data.name === titleData.name ? '#0058e1' : '' }">
|
||||
<div class="img" :class="data.className"></div>
|
||||
{{ data.name }}
|
||||
</div>
|
||||
<abilityDocTree
|
||||
:dataList="treeArray"
|
||||
@treeClick="treeClick"
|
||||
:clickData="clickData"
|
||||
></abilityDocTree>
|
||||
<abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div
|
||||
class="new-menu-box"
|
||||
style="height: 100%"
|
||||
v-if="titleData.name === '新手指引'"
|
||||
>
|
||||
<!-- 新手指引 -->
|
||||
<a-empty description="新手指引" />
|
||||
</div>
|
||||
<div v-else style="height: 100%">
|
||||
<iframe
|
||||
name="iframeName"
|
||||
width="1000"
|
||||
height="100%"
|
||||
id="iframeId"
|
||||
:frameborder="0"
|
||||
:src="doc_base_url + clickData.doc"
|
||||
></iframe>
|
||||
<!-- 技术文档 -->
|
||||
<div class="right" v-if="titleData.name !== '新手指引'">
|
||||
<div style="height: 100%">
|
||||
<iframe name="iframeName" width="1000" height="100%" id="iframeId" :frameborder="0"
|
||||
:src="doc_base_url + clickData.doc"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<menuBook v-if="titleData.name === '新手指引'"></menuBook>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <home-footer></home-footer> -->
|
||||
</template>
|
||||
<script setup>
|
||||
import HomeHeader from '@/views/home/components/header'
|
||||
import abilityDocTree from './components/abilityDocTree'
|
||||
import menuBook from './components/menuBook'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { getDevelopDocTree } from '@/api/home'
|
||||
import HomeFooter from '@/views/newHome/components/Footer'
|
||||
// import flatten from '@turf/flatten'
|
||||
|
||||
const titleList = ref([
|
||||
|
|
@ -167,12 +150,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
width: 100%;
|
||||
padding-top: 0.74rem;
|
||||
}
|
||||
|
||||
.content-menu {
|
||||
width: 1240px;
|
||||
width: 1800px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin: 0 auto;
|
||||
margin-top: 74px;
|
||||
// margin-top: 74px;
|
||||
// padding-top: 0.74rem;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
|
|
@ -183,21 +172,19 @@
|
|||
}
|
||||
|
||||
.left {
|
||||
width: 240px;
|
||||
width: 200px;
|
||||
padding: 20px;
|
||||
height: 600px;
|
||||
margin-right: 20px;
|
||||
background: rgba(244, 245, 248, 0.8);
|
||||
background: rgba(244, 245, 248, 1);
|
||||
overflow-y: scroll;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 200px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 870px;
|
||||
width: 1300px;
|
||||
height: calc(100% - 20px);
|
||||
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 260px;
|
||||
|
|
@ -240,4 +227,8 @@
|
|||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-menu {
|
||||
min-height: 600px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue