|
|
@@ -0,0 +1,620 @@
|
|
|
+<template>
|
|
|
+ <!-- 普通菜单 -->
|
|
|
+ <div class="jsmind_layout">
|
|
|
+ <div class="noMind" v-if="mindV">
|
|
|
+ <span>暂无数据</span>
|
|
|
+ </div>
|
|
|
+ <div :id="jsmindId" ref="container" class="jsmind_container"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import "jsmind/style/jsmind.css";
|
|
|
+import jsMind from "jsmind/js/jsmind.js";
|
|
|
+window.jsMind = jsMind;
|
|
|
+
|
|
|
+require("jsmind/js/jsmind.draggable.js");
|
|
|
+require("jsmind/js/jsmind.screenshot.js");
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ showBar: {
|
|
|
+ // 是否显示工具栏，显示启用编辑
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ theme: {
|
|
|
+ // 主题
|
|
|
+ type: String,
|
|
|
+ default: "primary",
|
|
|
+ },
|
|
|
+ lineColor: {
|
|
|
+ // 线条颜色
|
|
|
+ type: String,
|
|
|
+ default: "skyblue",
|
|
|
+ },
|
|
|
+ mindData: {
|
|
|
+ type: Object,
|
|
|
+ default: {},
|
|
|
+ },
|
|
|
+ jsmindId: {
|
|
|
+ type: String,
|
|
|
+ default: "jsmind_container",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ mindV: false,
|
|
|
+ i: 0,
|
|
|
+ mind: {},
|
|
|
+ jm: null,
|
|
|
+ isZoomIn: false,
|
|
|
+ isZoomOut: false,
|
|
|
+ level: 0,
|
|
|
+ nodeOptions: [
|
|
|
+ { value: 1, label: "展开到一级节点" },
|
|
|
+ { value: 2, label: "展开到二级节点" },
|
|
|
+ { value: 3, label: "展开到三级节点" },
|
|
|
+ { value: 0, label: "展开全部节点" },
|
|
|
+ { value: -1, label: "隐藏全部节点" },
|
|
|
+ ],
|
|
|
+ themeOptions: [
|
|
|
+ { value: "default", label: "default" },
|
|
|
+ { value: "primary", label: "primary" },
|
|
|
+ { value: "warning", label: "warning" },
|
|
|
+ { value: "danger", label: "danger" },
|
|
|
+ { value: "success", label: "success" },
|
|
|
+ { value: "info", label: "info" },
|
|
|
+ { value: "greensea", label: "greensea" },
|
|
|
+ { value: "nephrite", label: "nephrite" },
|
|
|
+ { value: "belizehole", label: "belizehole" },
|
|
|
+ { value: "wisteria", label: "wisteria" },
|
|
|
+ { value: "asphalt", label: "asphalt" },
|
|
|
+ { value: "orange", label: "orange" },
|
|
|
+ { value: "pumpkin", label: "pumpkin" },
|
|
|
+ { value: "pomegranate", label: "pomegranate" },
|
|
|
+ { value: "clouds", label: "clouds" },
|
|
|
+ { value: "asbestos", label: "asbestos" },
|
|
|
+ ],
|
|
|
+ localTheme: this.theme,
|
|
|
+ dialogVisible: false,
|
|
|
+ nodeOption: {
|
|
|
+ content: "",
|
|
|
+ bgColor: "",
|
|
|
+ fontColor: "",
|
|
|
+ fontSize: "",
|
|
|
+ fontWeight: "",
|
|
|
+ fontStyle: "",
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ mindData: {
|
|
|
+ handler: function (cur, old) {
|
|
|
+ console.log(cur.task);
|
|
|
+ let data = this.setMindData(cur)
|
|
|
+ this.mind = data;
|
|
|
+ this.$forceUpdate()
|
|
|
+ if (data.data.length) {
|
|
|
+ if (data.data[0].topic === "" && data.data.length === 1) {
|
|
|
+ this.mindV = true;
|
|
|
+ } else {
|
|
|
+ this.mindV = false;
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ if (this.jm) {
|
|
|
+ this.jm.show(this.mind);
|
|
|
+ } else {
|
|
|
+ this.open_empty();
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true, //对象内部的属性监听，也叫深度监听
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() { },
|
|
|
+ mounted() {
|
|
|
+ this.getData();
|
|
|
+ // this.mouseWheel();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ beforeUpload(file) {
|
|
|
+ // 上传文件之前钩子
|
|
|
+ if (file) {
|
|
|
+ jsMind.util.file.read(file, (jsmindData) => {
|
|
|
+ const mind = jsMind.util.json.string2json(jsmindData);
|
|
|
+ if (mind) {
|
|
|
+ this.jm.show(mind);
|
|
|
+ this.$message({ type: "success", message: "打开成功" });
|
|
|
+ } else {
|
|
|
+ this.prompt_info("不能打开mindmap文件");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.prompt_info("请先选择文件");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ upload() { },
|
|
|
+ getData() {
|
|
|
+ // this.$API({
|
|
|
+ // name: "getMind",
|
|
|
+ // })
|
|
|
+ // .then((res) => {
|
|
|
+ // this.mind = res.data;
|
|
|
+ // this.open_empty();
|
|
|
+ // })
|
|
|
+ // .catch((error) => {
|
|
|
+ // this.$message.error(error);
|
|
|
+ // });
|
|
|
+ let data = this.setMindData(this.mindData)
|
|
|
+ this.mind = data;
|
|
|
+ // debugger
|
|
|
+ this.$forceUpdate()
|
|
|
+ if (data.data.length) {
|
|
|
+ if (data.data[0].topic === "" && data.data.length === 1) {
|
|
|
+ this.mindV = true;
|
|
|
+ } else {
|
|
|
+ this.mindV = false;
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ if (this.jm) {
|
|
|
+ this.jm.show(this.mind);
|
|
|
+ } else {
|
|
|
+ this.open_empty();
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setMindData(json) {
|
|
|
+ let data = {
|
|
|
+ meta: {
|
|
|
+ name: json.task,
|
|
|
+ author: "dd@163.com",
|
|
|
+ version: "0.2",
|
|
|
+ },
|
|
|
+ format: "node_array",
|
|
|
+ data: []
|
|
|
+ };
|
|
|
+ data.data.push({ id: "root", isroot: true, topic: json.task });
|
|
|
+ console.log(`111`, json.task);
|
|
|
+ let elist = []
|
|
|
+ let toolChoose = json.toolChoose;
|
|
|
+ for (let i = 0; i < toolChoose.length; i++) {
|
|
|
+ if(toolChoose[i].eList && toolChoose[i].eList.length){
|
|
|
+ let list = toolChoose[i].eList.map(item=>{
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ index: i
|
|
|
+ }
|
|
|
+ })
|
|
|
+ elist.push(...list)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(elist.length){
|
|
|
+ let listName = []
|
|
|
+ for(var i = 0;i<elist.length;i++){
|
|
|
+ let item = elist[i]
|
|
|
+ if(listName.indexOf(item.target) == -1){
|
|
|
+ listName.push(item.target)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let _eJson = {}
|
|
|
+ for(var i = 0;i<listName.length;i++){
|
|
|
+ let item = listName[i]
|
|
|
+ _eJson[item] = {
|
|
|
+ child: {}
|
|
|
+ }
|
|
|
+ for(var j = 0;j<elist.length;j++){
|
|
|
+ let item2 = elist[j]
|
|
|
+ if(item2.target == item){
|
|
|
+ if(_eJson[item].child[item2.detail]){
|
|
|
+ if(_eJson[item].child[item2.detail].child.indexOf(item2.index) == -1){
|
|
|
+ _eJson[item].child[item2.detail].child.push(item2.index)
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ _eJson[item].child[item2.detail] = {
|
|
|
+ child: [item2.index]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let _JsonName = Object.keys(_eJson)
|
|
|
+ for(var i = 0;i<_JsonName.length;i++){
|
|
|
+ let item = _eJson[_JsonName[i]]
|
|
|
+ data.data.push({
|
|
|
+ id: _JsonName[i],
|
|
|
+ parentid: "root",
|
|
|
+ topic: _JsonName[i],
|
|
|
+ })
|
|
|
+ let _eJsonz = Object.keys(item.child)
|
|
|
+ let _e3 = item.child
|
|
|
+ for(var j = 0;j<_eJsonz.length;j++){
|
|
|
+ let item2 = _e3[_eJsonz[j]]
|
|
|
+ data.data.push({
|
|
|
+ id: _eJsonz[j],
|
|
|
+ parentid: _JsonName[i],
|
|
|
+ topic: _eJsonz[j],
|
|
|
+ })
|
|
|
+ let _eJsonz2 = Object.keys(item2.child)
|
|
|
+ let _e4 = item2.child
|
|
|
+ for(var z = 0;z<_eJsonz2.length;z++){
|
|
|
+ // let item3 = _e4[_eJsonz2[z]]
|
|
|
+ for(var zz = 0;zz<_e4.length;zz++){
|
|
|
+ data.data.push({
|
|
|
+ id: `${_eJsonz[j]}-${_eJsonz2[z]}-${zz}`,
|
|
|
+ parentid: _eJsonz[j],
|
|
|
+ topic: `工具${_e4[zz] + 1}`,
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(json.task, data);
|
|
|
+ return data
|
|
|
+ },
|
|
|
+ open_empty() {
|
|
|
+ const options = {
|
|
|
+ container: this.jsmindId, // 必选，容器ID
|
|
|
+ editable: this.showBar, // 可选，是否启用编辑
|
|
|
+ theme: this.localTheme, // 可选，主题
|
|
|
+ view: {
|
|
|
+ line_width: 2, // 思维导图线条的粗细
|
|
|
+ // line_color: this.lineColor, // 思维导图线条的颜色
|
|
|
+ },
|
|
|
+ shortcut: {
|
|
|
+ enable: true, // 禁用快捷键
|
|
|
+ },
|
|
|
+ layout: {
|
|
|
+ hspace: 20, // 节点之间的水平间距
|
|
|
+ vspace: 10, // 节点之间的垂直间距
|
|
|
+ pspace: 13, // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
|
|
|
+ },
|
|
|
+ mode: "side", // 显示模式，子节点只分布在根节点右侧
|
|
|
+ };
|
|
|
+ this.jm = jsMind.show(options, this.mind);
|
|
|
+ // 改变窗口大小重置画布
|
|
|
+ window.onresize = () => {
|
|
|
+ this.jm.resize();
|
|
|
+ };
|
|
|
+ this.getDepth(this.jm.mind.root, 1);
|
|
|
+ this.$forceUpdate();
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.jm.show(this.mind);
|
|
|
+ },1000)
|
|
|
+ },
|
|
|
+ // 获取层级数 i
|
|
|
+ getDepth(obj, k) {
|
|
|
+ this.i = Math.max(this.i, k);
|
|
|
+ if (obj.children) {
|
|
|
+ obj.children.forEach((v) => {
|
|
|
+ this.getDepth(v, k + 1);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ save_nodearray_file() {
|
|
|
+ const mindData = this.jm.get_data("node_array");
|
|
|
+ const mindName = mindData.meta.name;
|
|
|
+ const mindStr = jsMind.util.json.json2string(mindData);
|
|
|
+ jsMind.util.file.save(mindStr, "text/jsmind", mindName + ".jm");
|
|
|
+ },
|
|
|
+ screen_shot() {
|
|
|
+ this.jm.screenshot.shootDownload();
|
|
|
+ },
|
|
|
+ expand_all() {
|
|
|
+ this.jm.expand_all();
|
|
|
+ },
|
|
|
+ collapse_all() {
|
|
|
+ this.jm.collapse_all();
|
|
|
+ },
|
|
|
+ expand_to_level(num) {
|
|
|
+ switch (num) {
|
|
|
+ case -1:
|
|
|
+ this.collapse_all();
|
|
|
+ break;
|
|
|
+ case 0:
|
|
|
+ this.expand_all();
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ this.jm.expand_to_depth(num);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ zoomIn() {
|
|
|
+ if (this.jm.view.zoomIn()) {
|
|
|
+ this.isZoomOut = false;
|
|
|
+ } else {
|
|
|
+ this.isZoomIn = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ zoomOut() {
|
|
|
+ // debugger;
|
|
|
+ if (this.jm.view.zoomOut()) {
|
|
|
+ this.isZoomIn = false;
|
|
|
+ } else {
|
|
|
+ this.isZoomOut = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ prompt_info(msg) {
|
|
|
+ this.$message({ type: "warning", message: msg });
|
|
|
+ },
|
|
|
+ get_nodearray_data() {
|
|
|
+ const mindData = this.jm.get_data("node_array");
|
|
|
+ const mindString = jsMind.util.json.json2string(mindData);
|
|
|
+ this.$message({ type: "info", message: mindString });
|
|
|
+ },
|
|
|
+ set_theme(themeName) {
|
|
|
+ this.jm.set_theme(themeName);
|
|
|
+ },
|
|
|
+ scrollFunc(e) {
|
|
|
+ e = e || window.event;
|
|
|
+ if (e.wheelDelta) {
|
|
|
+ if (e.wheelDelta > 0) {
|
|
|
+ this.zoomIn();
|
|
|
+ } else {
|
|
|
+ this.zoomOut();
|
|
|
+ }
|
|
|
+ } else if (e.detail) {
|
|
|
+ if (e.detail > 0) {
|
|
|
+ this.zoomIn();
|
|
|
+ } else {
|
|
|
+ this.zoomOut();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.jm.resize();
|
|
|
+ },
|
|
|
+ // 鼠标滚轮放大缩小
|
|
|
+ mouseWheel() {
|
|
|
+ if (document.addEventListener) {
|
|
|
+ document.addEventListener("domMouseScroll", this.scrollFunc, false);
|
|
|
+ }
|
|
|
+ this.$refs.container.onmousewheel = this.scrollFunc;
|
|
|
+ },
|
|
|
+ // 新增节点
|
|
|
+ addNode() {
|
|
|
+ let selectedNode = this.jm.get_selected_node();
|
|
|
+ if (!selectedNode) {
|
|
|
+ this.$message({ type: "warning", message: "请先选择一个节点!" });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let nodeid = jsMind.util.uuid.newid();
|
|
|
+ let topic = "new Node";
|
|
|
+ let newNode = this.jm.add_node(selectedNode, nodeid, topic);
|
|
|
+ if (newNode) {
|
|
|
+ this.jm.select_node(nodeid);
|
|
|
+ this.jm.begin_edit(nodeid);
|
|
|
+ this.getDepth(this.jm.mind.root, 1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 新增兄弟节点
|
|
|
+ addBrotherNode() {
|
|
|
+ let selectedNode = this.jm.get_selected_node();
|
|
|
+ if (!selectedNode) {
|
|
|
+ this.$message({ type: "warning", message: "请先选择一个节点!" });
|
|
|
+ return;
|
|
|
+ } else if (selectedNode.isroot) {
|
|
|
+ this.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: "不能在根节点添加，请重新选择节点!",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let nodeid = jsMind.util.uuid.newid();
|
|
|
+ let topic = "new Node";
|
|
|
+ let newNode = this.jm.insert_node_after(selectedNode, nodeid, topic);
|
|
|
+ if (newNode) {
|
|
|
+ this.jm.select_node(nodeid);
|
|
|
+ this.jm.begin_edit(nodeid);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取选中标签的 ID
|
|
|
+ get_selected_nodeid() {
|
|
|
+ let selectedNode = this.jm.get_selected_node();
|
|
|
+ if (selectedNode) {
|
|
|
+ return selectedNode.id;
|
|
|
+ } else {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 删除节点
|
|
|
+ removeNode() {
|
|
|
+ let selectedId = this.get_selected_nodeid();
|
|
|
+ if (!selectedId) {
|
|
|
+ this.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: "请先选择一个节点!",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.jm.remove_node(selectedId);
|
|
|
+ this.i = 0;
|
|
|
+ this.getDepth(this.jm.mind.root, 1);
|
|
|
+ },
|
|
|
+ // 编辑节点
|
|
|
+ editNode() {
|
|
|
+ let selectedId = this.get_selected_nodeid();
|
|
|
+ if (!selectedId) {
|
|
|
+ this.$message({ type: "warning", message: "请先选择一个节点!" });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let nodeObj = this.jm.get_node(selectedId);
|
|
|
+ this.nodeOption.content = nodeObj.topic;
|
|
|
+ this.nodeOption.bgColor = nodeObj.data["background-color"];
|
|
|
+ this.nodeOption.fontColor = nodeObj.data["foreground-color"];
|
|
|
+ this.nodeOption.fontSize = nodeObj.data["font-size"];
|
|
|
+ this.nodeOption.fontWeight = nodeObj.data["font-weight"];
|
|
|
+ this.nodeOption.fontStyle = nodeObj.data["font-style"];
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ sureEditNode() {
|
|
|
+ let selectedId = this.get_selected_nodeid();
|
|
|
+ this.jm.update_node(selectedId, this.nodeOption.content);
|
|
|
+ this.jm.set_node_font_style(
|
|
|
+ selectedId,
|
|
|
+ this.nodeOption.fontSize,
|
|
|
+ this.nodeOption.fontWeight,
|
|
|
+ this.nodeOption.fontStyle
|
|
|
+ );
|
|
|
+ this.jm.set_node_color(
|
|
|
+ selectedId,
|
|
|
+ this.nodeOption.bgColor,
|
|
|
+ this.nodeOption.fontColor
|
|
|
+ );
|
|
|
+ this.nodeOption = {
|
|
|
+ content: "",
|
|
|
+ bgColor: "",
|
|
|
+ fontColor: "",
|
|
|
+ fontSize: "",
|
|
|
+ fontWeight: "",
|
|
|
+ fontStyle: "",
|
|
|
+ };
|
|
|
+ this.dialogVisible = false;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ // document.removeEventListener("domMouseScroll", this.scrollFunc, false);
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.jsmind_layout {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ /* width: 700px; */
|
|
|
+ height: calc(100%);
|
|
|
+ /* height: 500px; */
|
|
|
+ /* margin: 15px 5px 0 0; */
|
|
|
+ /* background: #fff; */
|
|
|
+ overflow: hidden;
|
|
|
+ flex-shrink: 0;
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background: #f1f1f1;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.jsmind_title {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ left: 20px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #8d8d8d;
|
|
|
+}
|
|
|
+
|
|
|
+.noMind {
|
|
|
+ /* position: absolute; */
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.jsmind_layout .jsmind_toolbar {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 10px 10px 10px;
|
|
|
+ height: auto;
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ box-shadow: 0 0 4px #b8b8b8;
|
|
|
+}
|
|
|
+
|
|
|
+.jsmind_layout>>>.el-button--medium,
|
|
|
+.jsmind_layout>>>.el-input--medium {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.jsmind_layout #jsmind_container {
|
|
|
+ /* flex: 1 1 auto; */
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.jsmind_layout .jsmind_container {
|
|
|
+ /* flex: 1 1 auto; */
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.jsmind_layout>>>.jsmind-inner {
|
|
|
+ /* overflow: hidden auto !important; */
|
|
|
+ /* height: auto; */
|
|
|
+}
|
|
|
+
|
|
|
+.jsmind_layout>>>.el-upload-list {
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 隐藏滚动条 */
|
|
|
+.jsmind_layout .jsmind-inner::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.jsmind_layout .pad {
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.jsmind_layout .pad-left {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.jsmind_layout>>>jmnode {
|
|
|
+ white-space: inherit;
|
|
|
+ word-wrap: break-word;
|
|
|
+ max-width: 500px;
|
|
|
+ max-height: 75px;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.jsmind_layout>>>jmnode::-webkit-scrollbar {
|
|
|
+ /*滚动条整体样式*/
|
|
|
+ width: 6px;
|
|
|
+ /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
+ height: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+/*定义滚动条轨道 内阴影+圆角*/
|
|
|
+.jsmind_layout>>>jmnode::-webkit-scrollbar-track {
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+/*定义滑块 内阴影+圆角*/
|
|
|
+.jsmind_layout>>>jmnode::-webkit-scrollbar-thumb {
|
|
|
+ border-radius: 10px;
|
|
|
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
|
|
|
+ background-color: rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.jsmind_layout>>>jmnode.selected {
|
|
|
+ background-color: #b9b9b9;
|
|
|
+ color: #fff;
|
|
|
+ box-shadow: 2px 2px 8px #777;
|
|
|
+}
|
|
|
+
|
|
|
+.jsmind_layout>>>jmnode.selected {
|
|
|
+ background-color: #b9b9b9;
|
|
|
+ color: #fff;
|
|
|
+ box-shadow: 2px 2px 8px #777;
|
|
|
+}
|
|
|
+
|
|
|
+.jsmind_layout>>>jmnode:hover {
|
|
|
+ box-shadow: 2px 2px 8px #777;
|
|
|
+}
|
|
|
+
|
|
|
+.jsmind_layout .form-con {
|
|
|
+ padding-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.jsmind_layout .ele-width {
|
|
|
+ width: 96%;
|
|
|
+}
|
|
|
+</style>
|
