指导手册增加图标
This commit is contained in:
parent
e4280e3874
commit
eefa5354ec
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -1,18 +1,19 @@
|
|||
<template>
|
||||
<div class="father">
|
||||
<div class="menu-box">
|
||||
<home-header></home-header>
|
||||
<div id="container" class="content">
|
||||
<div id="container" class="content-menu">
|
||||
<div class="left">
|
||||
<div class="first-title-text" @click="showManual" :style="{ color: showManualFlag ? '#0058e1' : '' }">新手指引</div>
|
||||
<div class="first-title-text" @click="showManual" :style="{ color: !showManualFlag ? '#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>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div v-if="showManualFlag">新手指引</div>
|
||||
<div v-else>
|
||||
<!-- 技术文档 -->
|
||||
<iframe name="iframeName" width="1000" height="800" id="iframeId" :frameborder="0"
|
||||
<div v-if="titleData.name === '新手指引'">新手指引</div>
|
||||
<div v-else style="height:100%">
|
||||
<iframe name="iframeName" width="1000" height="100%" id="iframeId" :frameborder="0"
|
||||
:src="clickData.doc"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -22,26 +23,31 @@
|
|||
<script setup>
|
||||
import HomeHeader from '@/views/home/components/header'
|
||||
import abilityDocTree from './components/abilityDocTree'
|
||||
import { selectOne } from '@/api/home'
|
||||
import { ref, reactive, onMounted, nextTick, watch } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import { Empty, message } from 'ant-design-vue'
|
||||
import { getDevelopDocTree } from '@/api/home'
|
||||
|
||||
const showManualFlag = ref(false)
|
||||
const showManual = () => {
|
||||
showManualFlag.value = !showManualFlag.value
|
||||
const titleList = ref([
|
||||
{
|
||||
name: '新手指引',
|
||||
className: 'newGuide'
|
||||
},
|
||||
{
|
||||
name: '技术文档',
|
||||
className: 'doc'
|
||||
}
|
||||
|
||||
])
|
||||
const titleData = ref(titleList.value[0])
|
||||
const clickData = ref({})
|
||||
let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'];
|
||||
const treeArray = ref([])
|
||||
|
||||
const treeClick = (item) => {
|
||||
showManualFlag.value = false;
|
||||
console.log('item---treeClick--------->', item);
|
||||
clickData.value = item;
|
||||
titleData.value = titleList.value[1]
|
||||
}
|
||||
let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'];
|
||||
|
||||
const treeArray = ref([])
|
||||
const getTreeData = () => {
|
||||
getDevelopDocTree({}).then((res) => {
|
||||
console.log('res------文档树------>', res);
|
||||
|
|
@ -54,80 +60,31 @@ const getTreeData = () => {
|
|||
});
|
||||
}
|
||||
|
||||
const changeName = (item) => {
|
||||
titleData.value = item
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getTreeData()
|
||||
// loadPage()
|
||||
|
||||
})
|
||||
|
||||
var x = document.getElementById("iframeId");
|
||||
console.log('x------------>', x);
|
||||
|
||||
watch(
|
||||
() => clickData.value,
|
||||
(val) => {
|
||||
if (val) {
|
||||
console.log('val-watch---clickData-------->', val);
|
||||
|
||||
// clickData.value = val
|
||||
loadPage()
|
||||
}
|
||||
},
|
||||
{
|
||||
//如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
|
||||
//那么首次执行，val为默认值,preVal为undefined
|
||||
// immediate: true,
|
||||
//这个参数代表监听对象时，可以监听深度嵌套的对象属性
|
||||
//比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
|
||||
deep: true,
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
// window.onload = () => loadPage()
|
||||
|
||||
|
||||
|
||||
|
||||
const loadPage = () => {
|
||||
console.log('2222----onload-------->', 2222);
|
||||
if (!clickData.value.doc) {
|
||||
return;
|
||||
}
|
||||
|
||||
// var _iframe = document.getElementById('iframeId').contentWindow.document.getElementsByTagName('aside')//iframe下的id
|
||||
// console.log('_iframe------------>', _iframe);
|
||||
|
||||
var x = document.getElementById("iframeId");
|
||||
console.log('x------------>', x);
|
||||
|
||||
if (x) {
|
||||
var y = (x.contentWindow || x.contentDocument);
|
||||
if (y.document) {
|
||||
y = y.document;
|
||||
}
|
||||
let asideDom = y.body.getElementsByClassName('.aside') && y.body.getElementsByClassName('.aside')[0]
|
||||
if (asideDom) {
|
||||
asideDom.style.right = 0;
|
||||
}
|
||||
console.log('asideDom------------>', asideDom);
|
||||
|
||||
let contentDom = y.body.getElementsByClassName('.content') && y.body.getElementsByClassName('.content')[0];
|
||||
console.log('contentDom------------>', contentDom);
|
||||
if (contentDom) {
|
||||
contentDom.style.left = 0
|
||||
contentDom.style.right = '16rem'
|
||||
}
|
||||
|
||||
//id和class获取方式有一点点区别
|
||||
// y.getElementById('元素id').style.fontSize = '12px'
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.father {
|
||||
.menu-box {
|
||||
// overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -137,18 +94,36 @@ const loadPage = () => {
|
|||
font-size: 18px;
|
||||
color: #333;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
color: #0058e1;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.content-menu {
|
||||
// width: 1240px;
|
||||
// display: flex;
|
||||
// justify-content: flex-start;
|
||||
// margin: 0 auto;
|
||||
// margin-top: 74px;
|
||||
// box-sizing: border-box;
|
||||
// position: relative;
|
||||
|
||||
width: 1240px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin: 0 auto;
|
||||
margin-top: 84px;
|
||||
margin-top: 74px;
|
||||
box-sizing: border-box;
|
||||
/* height: calc(100vh - 306px); */
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
top: 0.6rem;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.left {
|
||||
|
|
@ -158,10 +133,18 @@ const loadPage = () => {
|
|||
margin-right: 20px;
|
||||
background: rgba(244, 245, 248, 0.8);
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 880px;
|
||||
height: calc(100% - 20px);
|
||||
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 260px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
|
|
@ -172,4 +155,76 @@ const loadPage = () => {
|
|||
right: 16rem !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.doc {
|
||||
background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.newGuide {
|
||||
background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
#iframeId {
|
||||
// ::-webkit-scrollbar {
|
||||
// width: 6px;
|
||||
// height: 6px;
|
||||
// background-color: rgb(255, 255, 255);
|
||||
// }
|
||||
|
||||
// ::-webkit-scrollbar-thumb {
|
||||
// border-radius: 10px;
|
||||
// background-color: rgb(200, 204, 209);
|
||||
// }
|
||||
|
||||
/* 设置滚动条的样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
// width: 2px;
|
||||
// height: 2px;
|
||||
// height: 67px;
|
||||
}
|
||||
|
||||
::scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
// width: 2px;
|
||||
// height: 2px;
|
||||
// height: 67px;
|
||||
}
|
||||
|
||||
/* 滚动槽 */
|
||||
::-webkit-scrollbar-track {
|
||||
display: none;
|
||||
// -webkit-box-shadow: inset 0 0 3px #b18933;
|
||||
// border-radius: 1px;
|
||||
}
|
||||
|
||||
::scrollbar-track {
|
||||
display: none;
|
||||
// -webkit-box-shadow: inset 0 0 3px #98f165;
|
||||
// border-radius: 1px;
|
||||
}
|
||||
|
||||
/* 滚动条滑块 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background: #006666;
|
||||
-webkit-box-shadow: inset 0 0 1px #006666;
|
||||
}
|
||||
|
||||
::scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background: #006666;
|
||||
-webkit-box-shadow: inset 0 0 1px #006666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue