技术文档-联系我们、使用手册、提供服务
This commit is contained in:
gaoyuanwei
parent
11362c536d
commit
77c5cba599
Binary file not shown.
|
After Width: | Height: | Size: 514 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -9,11 +9,15 @@
|
|||
</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 class="item-name">
|
||||
<img :src="item.img" />
|
||||
{{ 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>
|
||||
|
|
@ -23,10 +27,30 @@
|
|||
<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
|
||||
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 class="img-bg callus-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">
|
||||
<p>
|
||||
办公电话：
|
||||
<span>0530-0000000</span>
|
||||
</p>
|
||||
<p>
|
||||
手机号：
|
||||
<span>0530-0000000</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -35,61 +59,70 @@ import HomeHeader from '@/views/home/components/header'
|
|||
import HomeFooter from '@/views/newHome/components/Footer'
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
const seviceList = ref(
|
||||
[
|
||||
const seviceList = ref([
|
||||
{
|
||||
name: '组件服务',
|
||||
img: require('@/assets/menu/service-component.png'),
|
||||
list: ['智能算法', '图层服务', '开发组件', '业务组件'],
|
||||
},
|
||||
{
|
||||
name: '应用资源',
|
||||
list: ['办公系统', '业务系统', '门户网站', '大屏看板', '小程序', '公众号'],
|
||||
img: require('@/assets/menu/service-application.png'),
|
||||
list: [
|
||||
'办公系统',
|
||||
'业务系统',
|
||||
'门户网站',
|
||||
'大屏看板',
|
||||
'小程序',
|
||||
'公众号',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '组件服务',
|
||||
name: '基础设施',
|
||||
img: require('@/assets/menu/service-infrastructure.png'),
|
||||
|
||||
list: ['视频资源', '云资源', '感知资源'],
|
||||
},
|
||||
{
|
||||
name: '组件服务',
|
||||
name: '数据资源',
|
||||
img: require('@/assets/menu/service-data.png'),
|
||||
|
||||
list: ['政务信息资源'],
|
||||
},
|
||||
]
|
||||
)
|
||||
])
|
||||
|
||||
const imgList = ref([
|
||||
{
|
||||
name: '能力上架',
|
||||
bgImg: require('../../../assets/menu/shelves.png'),
|
||||
btnText: '立即上架',
|
||||
className: 'shelves-img'
|
||||
className: 'shelves-img',
|
||||
},
|
||||
{
|
||||
name: '能力申请',
|
||||
bgImg: require('../../../assets/menu/apply.png'),
|
||||
btnText: '立即申请',
|
||||
className: 'apply-img'
|
||||
className: 'apply-img',
|
||||
},
|
||||
{
|
||||
name: '需求发布',
|
||||
bgImg: require('../../../assets/menu/demand.png'),
|
||||
btnText: '立即发布',
|
||||
className: 'demand-img'
|
||||
className: 'demand-img',
|
||||
},
|
||||
{
|
||||
name: '资源下架',
|
||||
bgImg: require('../../../assets/menu/down.png'),
|
||||
btnText: '立即下架',
|
||||
className: 'down-img'
|
||||
className: 'down-img',
|
||||
},
|
||||
])
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="less" scoped>
|
||||
.menu-box {
|
||||
width: 1920px;
|
||||
padding-bottom: 40px;
|
||||
// padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
@ -106,7 +139,7 @@ const imgList = ref([
|
|||
width: 50px;
|
||||
height: 3px;
|
||||
background: #0058e1;
|
||||
margin: 0 auto
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.line-white {
|
||||
|
|
@ -116,7 +149,6 @@ const imgList = ref([
|
|||
.text-white {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
|
@ -136,7 +168,6 @@ const imgList = ref([
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.img-box {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
|
@ -153,6 +184,28 @@ const imgList = ref([
|
|||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.callus-box {
|
||||
width: 1920px;
|
||||
height: 214px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url('../../../assets/menu/callus.png');
|
||||
.list-box {
|
||||
width: 1560px;
|
||||
// height: 350px;
|
||||
margin: 0 auto;
|
||||
p {
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
span {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
p:nth-child(1) {
|
||||
margin-right: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img-bg {
|
||||
width: 1920px;
|
||||
|
|
@ -199,11 +252,10 @@ const imgList = ref([
|
|||
height: 330px;
|
||||
background: rgba(23, 85, 177, 0.43);
|
||||
border: 1px solid #74a9f8;
|
||||
border-radius: 2px;
|
||||
border-radius: 10px;
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
.item-name {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
|
|
@ -224,9 +276,9 @@ const imgList = ref([
|
|||
font-size: 20px;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
// border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
// border-radius: 6px;
|
||||
// background: rgba(255, 255, 255, 0.2);
|
||||
margin: 0 16px 20px 16px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,26 +4,43 @@
|
|||
<div class="menu-box">
|
||||
<div id="container" class="content-menu">
|
||||
<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" v-if="titleData.name !== '新手指引'">
|
||||
<div style="height: 100%">
|
||||
<iframe name="iframeName" width="1300" height="100%" id="iframeId" :frameborder="0"
|
||||
:src="doc_base_url + clickData.doc"></iframe>
|
||||
<iframe
|
||||
name="iframeName"
|
||||
width="1300"
|
||||
height="100%"
|
||||
id="iframeId"
|
||||
:frameborder="0"
|
||||
:src="doc_base_url + clickData.doc"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 使用手册 -->
|
||||
<div class="manual"><p>使用手册</p></div>
|
||||
</div>
|
||||
<menuBook v-if="titleData.name === '新手指引'"></menuBook>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <home-footer></home-footer> -->
|
||||
<home-footer></home-footer>
|
||||
</template>
|
||||
<script setup>
|
||||
import HomeHeader from '@/views/home/components/header'
|
||||
|
|
@ -170,6 +187,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.left {
|
||||
z-index: 10;
|
||||
width: 200px;
|
||||
padding: 20px;
|
||||
margin-right: 20px;
|
||||
|
|
@ -188,6 +206,26 @@ onMounted(() => {
|
|||
left: 300px;
|
||||
min-height: 600px;
|
||||
}
|
||||
.manual {
|
||||
z-index: 10;
|
||||
width: 74px;
|
||||
height: 136px;
|
||||
position: fixed;
|
||||
top: 200px;
|
||||
right: 200px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url('../../assets/menu/manual.png');
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: unset !important;
|
||||
p {
|
||||
color: #005be1;
|
||||
font-size: 20px;
|
||||
margin-bottom: 0;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
right: 0 !important;
|
||||
|
|
@ -226,5 +264,4 @@ onMounted(() => {
|
|||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue