🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
文件:D:\ireport365\ireport365.war\template\designer\component.html 给 图层+ 加鼠标滑过颜色和小手样式 ``` <h3 class="gx-table-title gisler-btn" ng-click="editGisLayer(null)">图层<i ng-class="item" class="fa fa-plus"></i></h3> ``` 小手 和 素材库 滚动条 放在 文件最后面 文件 D:\ireport365\ireport365.war\js\enduser\designer\orange.css ``` /* 用户选择免费素材样式 */ .file-box-main{ overflow-x: auto; } .file-box-main::-webkit-scrollbar {/*滚动条整体样式*/ width: 3px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .file-box-main::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 3px; -webkit-box-shadow: inset 0 0 5px rgba(,0,0,0.2); background: #535353; } .file-box-main::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 3px; background: #EDEDED; } /* end */ .gisler-btn:hover{ color:#ED652F; cursor: pointer; } ``` 分享页 gis地图 图层选择 搜索 buildGemapComponent 替换html 文件 D:\ireport365\ireport365.war\WEB-INF\classes\report-resource\design.js ``` html.push("<div style='height:100%;overflow-x:auto;overflow-y:hidden;position: relative;'>"); html.push(" <div id='" + mapDomId + "' style='font-size:14px;height:100%;width:100%;'>"); html.push(" </div>"); html.push(" <div ng-show='component.config.mapChangeBar' class='layers-container gemap-ctrl' style='position: absolute;z-index: 2;top: 0;left: 0;'>"); html.push(" <div class='layers' ng-style=\"{'background':component.config.mapToolBarBgColor,'font-size':component.config.mapToolBarFontSize,'color':component.config.mapToolBarFontColor}\" style='width: 130px;max-height: 200px;margin: 0 5px;border-radius: 3px;cursor:pointer;overflow-y: auto;overflow-x: hidden;'>"); html.push(" <ul class='layers-lists' style='cursor: pointer;list-style: none;padding: 0;margin: 0;'>"); html.push(" <li ng-repeat='item in component.config.layers' ng-click='changeShowLayer(item)' style='padding:10px 0px;padding-left: 10px;border-style:solid;' ng-style='{\"border-color\":component.context.layerId != null && component.context.layerId == item.id ? component.config.mapToolBarBorderColorActive:component.config.mapToolBarBorderColor,\"border-width\":component.config.mapToolBarBorderSize}'>"); html.push(" <div style='padding-left: 4px;padding-right: 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;cursor: pointer;'>{{item.name}}</div>"); html.push(" </li>"); html.push(" </ul>"); html.push(" </div>"); html.push(" </div>"); html.push("</div>"); ``` 文件名 搜索vsPluginComponentModule 在初始化方法init里 写下面代码 如图位置 ![](https://img.kancloud.cn/0b/12/0b127b48b61621cbb1ef5ba1a783d3b0_720x1026.png) ``` if (!component.config.has) { component.config.has = true; // 切换栏默认值 component.config.mapToolBarBgColor = '#ffffff'; component.config.mapToolBarFontColor = '#333333'; component.config.mapToolBarBorderColor = 'rgba(128, 128, 128, 0.36)'; component.config.mapToolBarBorderColorActive = 'rgba(237,101,47,1)'; component.config.mapToolBarBorderSize = 1; component.config.mapToolBarFontSize = 14; // end } ``` 搜索 显示切换栏 在下面加配置项 ``` { title: "背景颜色", type: "colorpicker", bind: "mapToolBarBgColor", show: function () { return scope.component.config.mapChangeBar }, }, { title: "字体颜色", type: "colorpicker", bind: "mapToolBarFontColor", show: function () { return scope.component.config.mapChangeBar }, }, { title: "边框颜色", type: "colorpicker", bind: "mapToolBarBorderColor", show: function () { return scope.component.config.mapChangeBar }, }, { title: "边框选中颜色", type: "colorpicker", bind: "mapToolBarBorderColorActive", show: function () { return scope.component.config.mapChangeBar }, }, { title: "边框大小", type: "configSlide", bind: "mapToolBarBorderSize", config: { slideStart: 0, slideEnd: 10 }, show: function () { return scope.component.config.mapChangeBar }, }, { title: "字体大小", type: "configSlide", bind: "mapToolBarFontSize", config: { slideStart: 12, slideEnd: 60 }, show: function () { return scope.component.config.mapChangeBar }, }, ```