eta_front/src/views/sandbox_manage/sandFlowNew/index.vue

<template>
  <div id="sand-edit-container" class="sand-edit-container">
    <div class="sand-toolbar">
      <el-tabs v-model="activeToolTabName" stretch class="sand-toolbar-tabs">
        <el-tab-pane label="元素库" name="元素库">
          <div class="sand-elements-tab">
            <div class="sand-elements sand-elements-line">
              <span>线条</span>
              <div class="elements-row" >
                <img src="~@/assets/icons/arrow.svg" :draggable="true" @dragstart="edgeDragStart('noArrowStraight',$event)" />
                <img src="~@/assets/img/chart_m/change.png" :draggable="true" @dragstart="edgeDragStart('singleArrowStraight',$event)" />
                <img src="~@/assets/img/chart_m/Group.png" :draggable="true" @dragstart="edgeDragStart('doubleArrowStraight',$event)"/>
                <img src="~@/assets/img/chart_m/Group_act.png" :draggable="true" @dragstart="edgeDragStart('noArrowBend',$event)"/>
                <img src="~@/assets/img/chart_m/User.png" :draggable="true" @dragstart="edgeDragStart('singleArrowBend',$event)"/>
                <img src="~@/assets/img/chart_m/User_act.png" :draggable="true" @dragstart="edgeDragStart('doubleArrowBend',$event)"/>
                <img src="~@/assets/img/chart_m/View.png" :draggable="true" @dragstart="edgeDragStart('noArrowBoundBend',$event)"/>
                <img src="~@/assets/img/chart_m/View_act.png" :draggable="true" @dragstart="edgeDragStart('singleArrowBoundBend',$event)"/>
                <img src="~@/assets/img/chart_m/View_act.png" :draggable="true" @dragstart="edgeDragStart('doubleArrowBoundBend',$event)"/>
              </div>
            </div>
            <div class="sand-elements sand-elements-shape">
              <span>基本形状</span>
              <div class="elements-row">
                <div 
                  class="elements-shape-item"
                  v-for="shape in myNodes" 
                  :key="shape.key"
                  :style="shape.styles" 
                  @mousedown="dragStart(shape,$event)"
                >
                  {{shape.label}}
                </div>
              </div>
            </div>
            <div class="sand-elements sand-elements-mind">
              <span>思维导图</span>
              <div class="elements-row-mind">
                <img src="~@/assets/img/totaladdgoodcount.png" :draggable="true" @dragstart="edgeDragStart('singleMindmap',$event)"/>
                <img src="~@/assets/img/totalfavoritecount.png" :draggable="true" @dragstart="edgeDragStart('doubleMindmap',$event)"/>
              </div>
            </div>
          </div>

        </el-tab-pane>
        <el-tab-pane label="风格" name="风格">
          <div class="sand-style-tab">
            <img src="~@/assets/img/totalfavoritecount.png" :class="styleActive==1?'active':''"
             @click="changeStyle(1)"/>
            <img src="~@/assets/img/totaladdgoodcount.png" :class="styleActive==2?'active':''" @click="changeStyle(2)" />
            <img src="~@/assets/img/fanscount.png" :class="styleActive==3?'active':''" @click="changeStyle(3)"/>
            <img src="~@/assets/img/workscount.png" :class="styleActive==4?'active':''" @click="changeStyle(4)"/>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="sand-main">
      <div class="sand-main-top">
        <div class="sand-mainTop-form">
          <el-input
            v-model="search_txt"
            style="width: 240px; margin-right: 20px"
            placeholder="沙盘名称">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-cascader
            v-permission="permissionBtn.sandboxPermission.sandbox_variety"
            :options="classifyArr"
            :props="classifyProps"
            v-model="classify"
            clearable
            placeholder="品种筛选"/>
        </div>
        <div class="sand-mainTop-option">
          <div class="sand-option-linkShow">
            <img src="~@/assets/img/sand_new/eye-show-black.png" />
            <span>链接展示</span>
          </div>
          <el-button size="large" type="primary" plain @click="copySandHandle" style="margin-right: 20px;min-width: 120px;">复制图片</el-button>
          <el-button type="primary" size="large" @click="saveChart(null)" style="min-width: 120px;">保存</el-button>
        </div>
      </div>
      <div class="sand-main-body">
        <div class="sand-mainBody-tool" id="sand-mainBody-tool">
          <div class="sand-tool-item" :style="{'color':canUndo?'#000000':'#999999'}" @click="toolClickOptions('undo')">撤销</div>
          <div class="sand-tool-item" :style="{'color':canRedo?'#000000':'#999999'}" @click="toolClickOptions('redo')">恢复</div>
          <div class="sand-tool-item" id="sand-tool-fontSize">
            <el-select v-model="styleOptions.fontF" placeholder="字体" @change="(e)=>toolClickOptions('changeFamily',e)">
              <el-option :label="f.name" :value="f.value" v-for="f in familyOptions" :key="f.name"></el-option>
            </el-select>
          </div>
          <div class="sand-tool-item">
            <el-select v-model="styleOptions.fontS" placeholder="字号">
              <el-option :label="s.name" :value="s.value" v-for="s in fontSizeOptions" :key="s.name"></el-option>
            </el-select>
          </div>
          <div class="sand-tool-item">B</div>
          <div class="sand-tool-item">I</div>
          <div class="sand-tool-item">下划线</div>
          <div class="sand-tool-item">
            <el-color-picker
              v-model="styleOptions.color"
              size="mini"
              :predefine="colorsOptions"
            />
          </div>
          <div class="sand-tool-item">
            <el-select v-model="styleOptions.lineHeight" placeholder="行高">
              <el-option :label="lh.name" :value="lh.value" v-for="lh in lineHeightOptions" :key="lh.name"></el-option>
            </el-select>
          </div>
          <div class="sand-tool-item">
            <el-dropdown trigger="click" @command="setGraphStyle">
							<div class="el-dropdown-link">
								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: '4 4'}" :class="styleOptions.textAlign=='center'?'style-acitve':''">
									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
                  居中
								</el-dropdown-item>
								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
                  居左
										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
								</el-dropdown-item>
                <el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
                  居右
										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
          </div>
          <div class="sand-tool-item">填充色</div>
          <div class="sand-tool-item">线条颜色</div>
          <div class="sand-tool-item">
            <el-dropdown trigger="click" @command="setGraphStyle">
							<div class="el-dropdown-link">
								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: '4 4'}" :class="styleOptions.lineWidth=='cu'?'style-acitve':''">
									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
                  粗
								</el-dropdown-item>
								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
                  细
										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
								</el-dropdown-item>
                <el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
                  很细
										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
          </div>
          <div class="sand-tool-item">
            <el-dropdown trigger="click" @command="setGraphStyle">
							<div class="el-dropdown-link">
								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: '4 4'}" :class="styleOptions.lineStyle=='xu'?'style-acitve':''">
									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
                  虚线
								</el-dropdown-item>
								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
                  实线
										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
								</el-dropdown-item>
							</el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="sand-tool-item">
            <el-dropdown trigger="click" @command="setGraphStyle">
							<div class="el-dropdown-link">
								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: '4 4'}" :class="styleOptions.connectStyle=='1'?'style-acitve':''">
									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
                  直线
								</el-dropdown-item>
								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
                  弯折线
										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
								</el-dropdown-item>
                <el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
                  圆角弯折线
										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
								</el-dropdown-item>
							</el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="sand-tool-item">
            <el-dropdown trigger="click" @command="setGraphStyle">
							<div class="el-dropdown-link">
								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: '4 4'}" :class="styleOptions.startArrow=='1'?'style-acitve':''">
									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
                  有
								</el-dropdown-item>
								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
                  无
										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
								</el-dropdown-item>
							</el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="sand-tool-item">
            <el-dropdown trigger="click" @command="setGraphStyle">
							<div class="el-dropdown-link">
								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: '4 4'}" :class="styleOptions.endArrow=='1'?'style-acitve':''">
									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
                  有
								</el-dropdown-item>
								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
                  无
										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
								</el-dropdown-item>
							</el-dropdown-menu>
            </el-dropdown>
          </div>
          
        </div>
        <div class="sand-mainBody-chart" id="sand-mainBody-chart">
          <div id="sand-chart-container" ></div>

          <!-- 缩略图 -->
          <div id="minimap" class="minimap"></div>

          <div class="contextMenu-wrapper" id="contextMenu-wrapper" @mouseleave="hideContextMenu">
            <dropdown-menu size="medium">
              <el-dropdown-item v-for="menu in contextMenuOption" :key="menu.key" @click.native="handleContext(menu.key)">
                <i :class="menu.icon" v-if="menu.icon" /> 
                {{menu.label}}
              </el-dropdown-item>
            </dropdown-menu>
				  </div>
        </div>
      </div>
    </div>
    <!-- 添加链接 -->
    <el-dialog :modal-append-to-body='false' title="添加链接" :visible.sync="addLinkShow" :close-on-click-modal="false" :center="true" width="700px">

			<div slot="footer" class="dialog-footer" style="text-align:right;">
				<el-button type="primary" plain size="small" @click.native="addLinkShow=false">取 消</el-button>
				<el-button type="primary" size="small" @click.native="saveLink">保 存</el-button>
			</div>
		</el-dialog>
  </div>
</template>

<script>
import { myGraph } from '../common/gragh';
import { myNodes,myNodeOption } from '../common/node';
import { myEdgeOption } from '../common/edge';
import { Addon } from '@antv/x6'
import { configOpt } from '../common/toolConfig';
// import {setGraph,render} from "../common/mindmap"
import mindmap from "../common/mindmap"
import {styleSettings,familyOptions,fontSizeOptions,colorsOptions,lineHeightOptions} from "../common/toolConfig"
import { ElDropdownMenu as DropdownMenu } from 'element-ui';
import { contextMenuOption } from '../common/options';
import { contextEvent } from '../common/events';

const { line} = configOpt;
  export default {
    name:"sandFlowIndex",
    components:{
      DropdownMenu
    },
    data() {
      return {
        graph: null,
        dnd:null,
        initData: {},
        activeToolTabName:"元素库",
        addEdgeType:"",
        styleActive:1,
        // 当前的样式配置
        styleOptions:{
          fontF:"微软雅黑",
          fontS:14,
          color:'#000000',
          lineHeight:1,
          textAlign:'center',
          lineStyle:"xu",
          lineWidth:'cu',
          connectStyle:'1',
          startArrow:'1',
          endArrow:'1'
        },
        canUndo:false,
        canRedo:false,
        mindMapData:{
          id: "1",
          type: 'topic',
          label: '中心主题',
          width: 160,
          height: 50,
          children: [
            {
              id: '1-1',
              type: 'topic-branch',
              label: '分支主题1',
              width: 100,
              height: 40,
              children: [
                {
                  id: '1-1-1',
                  type: 'topic-child',
                  label: '子主题1',
                  width: 60,
                  height: 30,
                },
                {
                  id: '1-1-2',
                  type: 'topic-child',
                  label: '子主题2',
                  width: 60,
                  height: 30,
                },
              ],
            },
            {
              id: '1-2',
              type: 'topic-branch',
              label: '分支主题2',
              width: 100,
              height: 40,
            },
          ],
        },
        mindmapPosition:{},
        // 添加链接弹窗
        addLinkShow:false
      }
    },
    mixins:[mindmap],
    watch: {
      initData(newval) {
        console.log(newval)
        this.graph.fromJSON(newval);
      },
	  },
    computed:{
      myNodes(){
        return myNodes
      },
      myEdgeOption(){
        return myEdgeOption
      },
      contextMenuOption(){
        return contextMenuOption
      },
      familyOptions(){
        return familyOptions
      },
      fontSizeOptions(){
        return fontSizeOptions
      },
      colorsOptions(){
        return colorsOptions
      },
      lineHeightOptions(){
        return lineHeightOptions
      }
    },
    mounted(){
      this.init()
      document.getElementById('sand-mainBody-chart').addEventListener("dragover",this.edgeDragover)
      document.getElementById('sand-mainBody-chart').addEventListener("drop",this.edgeDrop)
      
    },
    beforeDestroy(){
      document.getElementById('sand-mainBody-chart').removeEventListener("dragover",this.edgeDragover)
      document.getElementById('sand-mainBody-chart').removeEventListener("drop",this.edgeDrop)
    },
    methods: {
      // 初始化画布
      init() {
        const graph = new myGraph('sand-chart-container',this.mindMapData);
        graph.history.on('change', (args) => { 
          console.log(args);
          this.canUndo = graph.canUndo()
          this.canRedo = graph.canRedo()
          console.log(this.canUndo,this.canRedo);
        })
        this.graph = graph;
        this.dnd = new Addon.Dnd({
          target: this.graph,
          animation: true,
          validateNode() {
            return true;
          },
        });
        this.setGraph()
		  },
      dragStart(data,e) {
        // console.log(data,e,"触发了")
        const { key,shape } = data;
        
        const	node = this.graph.createNode({
          shape,
          ...myNodeOption(key),
        });
        this.dnd.start(node,e);
      },
      edgeDragStart(type,e){
        console.log(e);
        this.addEdgeType = type
        console.log(type,"触发了边")
      },
      edgeDragover(e){
        e.preventDefault()
      },
      edgeDrop(e){
        if(!this.addEdgeType){
          return 
        }
        console.log(this.addEdgeType,e);
        console.log(this.graph);
        let position = this.graph.clientToLocal({x:e.clientX,y:e.clientY})
        if(this.addEdgeType.indexOf("Mindmap")!==-1){
          //插入思维导图
          console.log("插入思维导图");
          this.mindmapPosition=position
          this.mindMapRender()
        }else{
          this.graph.addEdge({
            shape:'edge',
            ...this.myEdgeOption(this.addEdgeType,position.x,position.y)
          });
        }

        
      },
      changeStyle(activeNum){
        this.$store.commit("sand/SET_CELL_STYLE",activeNum)
        let styleData=styleSettings[activeNum-1]

        let cells = this.graph.getCells()
        // console.log(cells);

        for (let i = 0; i < cells.length; i++) {
          const element = cells[i];
          console.log(element);
          if(element.shape=="edge") continue
          if(element.data.key == 'text'){
            // element.attrs.text.fill=styleData.backgroundColor
            element.setAttrs({
              text:{
                fill:styleData.backgroundColor
              }
            })
          }else{
            element.setAttrs({
              body:{
                fill:styleData.backgroundColor
              }
            })
          }
        }
        this.styleActive = activeNum
      },
      /* 右键事件 */
      handleContext(key) {
        if(key=="addLink"){
          this.addLinkDialogOpen()
        }else{
          contextEvent(this.graph, key);
        }
        this.hideContextMenu();
      },

      /* 隐藏右键menu */
      hideContextMenu() {
        const dom = $('#contextMenu-wrapper')[0];
        dom.style.left = '-9999px';
        dom.style.top = '-9999px';
      },
      addLinkDialogOpen(){

        this.addLinkShow=true
        
      },
      saveLink(){
        console.log("保存链接");
        const select_cell = this.graph.getSelectedCells()[0]
        if(select_cell.data.linkData){
          select_cell.data.linkData = [{id:11,ids:21}]
        }else{
          select_cell.setData({linkData:[{id:1},{id:2}]})
        }
        console.log(select_cell,'select_cell');
        this.addLinkShow=false
      },
      copySandHandle(){

      },
      saveChart(){
        console.log(this.mindMapData,'this.mindMapData');
      },
      setGraphStyle(){
        console.log("修改样式")
      },
      toolClickOptions(type){
        console.log(arguments);
        switch (type) {
          case 'undo':
            this.graph.undo()
            break;
          case 'redo':
            this.graph.redo()
            break;
          default:
            break;
        }
      }
    },
  }
</script>

<style lang="scss" scoped>
  #sand-edit-container{
    height: calc(100vh - 120px);
    min-height: 600px;
    display: flex;
    flex-wrap: nowrap;
    .sand-toolbar{
      min-width: 400px;
      width: 400px;
      background-color: white;
      border-radius: 4px;
      border: 1px solid #DCDFE6;
      height: 100%;
      box-sizing: border-box;
      margin-right: 20px;
      padding-bottom: 20px;
      .sand-elements-tab{
        padding: 0 30px;
        overflow: auto;
        height: calc(100vh - 220px);
        .sand-elements{
          padding: 30px 0 20px;
          border-bottom: 1px solid #C8CDD9 ;
          span{
            display: inline-block;
            margin-bottom: 10px;
            font-size: 16px;
            color: #999999;
          }
          .elements-row{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-right: -10px;
            .elements-shape-item,img{
              margin-right: 10px;
              margin-bottom: 10px;
              cursor: pointer;
            }
            img{
              height: 26px;
              width: 26px;
            }
          }
        }
        .sand-elements-mind{
          border-bottom: none;
          padding-bottom: 0;
        }

      }
      .elements-row-mind,.sand-style-tab{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        img{
          width: calc(50% - 10px);
        }
      }
      .sand-style-tab{
        padding: 20px 30px;
        img{
          border: 1px solid #C8CDD9;
          margin-bottom: 20px;
          cursor: pointer;
        }
        .active{
          border: 1px solid #0052D9;
        }
      }
    }
    .sand-main{
      flex: 1;
      display: flex;
      flex-direction: column;
      .sand-main-top{
        padding: 20px 20px 10px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        background-color: white;
        box-shadow: 0px 2px 12px 0px rgba($color: #000000, $alpha: 0.08);
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        margin-bottom: 20px;
        .sand-mainTop-form{
          margin-bottom: 10px;
          margin-right: 20px;
          white-space: nowrap;
        }
        .sand-mainTop-option{
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .sand-option-linkShow{
            display: flex;
            align-items: center;
            margin-right: 30px;
            cursor: pointer;
            img{
              height: 16px;
              margin-right: 4px;
            }
          }
        }
      }
      .sand-main-body{
        display: flex;
        flex-direction: column;
        flex: 1;
        background-color: white;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        .sand-mainBody-tool{
          height: 50px;
          width: 100%;
          background-color: #F5F6F7;
          box-sizing: border-box;
          border-radius: 4px;
          display: flex;
          align-items: center;
          padding-right: 10px;
          .sand-tool-item{
            margin-left: 10px;
            cursor: pointer;
          }
        }
        .sand-mainBody-chart{
          height: calc(100% - 50px);
          // flex: 1;
          position: relative;
          display: flex;
          .contextMenu-wrapper {
            position: fixed;
            z-index: 99;
            top: -9999px;
            left: -9999px;
            background: #fff;
            padding: 10px 0;
            /* border: 1px solid #999; */
            box-shadow: 0 1px 4px #999;
          }
          .minimap{
            position:absolute;
            right:6px;
            bottom:6px;
            box-sizing: border-box;
          }
        }
      }
    }
  }
  @media screen and (max-width:1680px) {
    #sand-edit-container{
      .sand-toolbar{
        min-width: 330px;
        width: 330px;
      }
    }
  }
</style>
<style lang="scss">
  .sand-toolbar-tabs{
    .el-tabs__header{
      padding-top: 16px;
      box-shadow: 0px 2px 12px 0px rgba($color: #000000, $alpha: 0.08);
    }
  }
  .el-cascader{
    .el-input{
      width: 240px;
    }
  }
  .sand-mainBody-chart{
    #sand-chart-container{
      flex: 1;
    }
    .x6-graph-scroller {
      flex: 1;
    }

    .x6-port-body {
      display: none;
    }

    /* reseize 框样式 */
    .x6-widget-transform {
      .x6-widget-transform-resize {
        border-radius: 0;
      }
    }
    .x6-widget-minimap-viewport{
      border-color: red;
      .x6-widget-minimap-viewport-zoom{
        border-color: red;
      }
    }
    .x6-widget-minimap{
      width: auto !important;
      height: auto !important;
    }
  }
  .topic-image {
    visibility: hidden;
    cursor: pointer;
  }
  .x6-node:hover .topic-image {
    visibility: visible;
  }
  .x6-node-selected rect {
    stroke-width: 2px;
  }
  #sand-mainBody-tool{
    .el-select{
      .el-input{
        .el-input__inner{
          border: none;
          background-color: #F5F6F7;
          padding-left: 0;
          padding-right: 30px;
        }
      }
    }
  }
  #sand-tool-fontSize{
    .el-select{
      width: 100px;
    }
  }
  .style-acitve{
    color: red;
  }
</style>