西门子EBR修改PI样式-ebr二次开发

node安装

官网：Node.js (nodejs.org)

下载安装；

安装lesss

npm install -g less

vscode进行编辑

vscode打开目录：C:\OpcenterEXPH\SIMATICIT_eBR_6240\Ressourc\OperatingText

具体根据自身情况，这样打开方便后续编译直接到目标位置！！

以设计PI 设计为例

//OTDesigner.less 文件
@import "_OTVariables";
@import "_OTSplitter";
@import "_OTSplitterTagProperties";
@import "_OTToolbar";
@import "_OperatingText";
@import "_OperatingTextTitle";
@import "_OTSection";
@import "_OTVisibility";
@import "_OTSectionCondition";
@import "_OTDesignerCommon.less";

上面可以看到，引入很多文件，分别找到对应修改！！

这里需要less基础！！！修改后打包：

lessc Less\OTDesigner.less CSS\OTDesigner.css   //打包设计时样式

其他客户端需要拷贝css目录过去：

修改前标题样式：

修改的内容：

 ///_OperatingTextTitle.less w文件
    a[marqtype="12"][level="1"],
    a[marqtype="12"][level="2"],
    a[marqtype="12"][level="3"],
    a[marqtype="12"][level="4"] {
        background: none;
        outline: none;
        padding: 0;
        margin: 0;
        border: none;
        display: block;
        text-align: center;
    }

    a[marqtype="12"][level="1"] {
        color: @title-1-font-color; 
        background-color: @title-1-font-bg;
        font-size: @title-1-font-size;
        font-style: @title-1-font-style;
        font-family: @title-1-font-family;
        font-weight: @title-1-font-weight;
    }

修改后：

包括按钮啥的按需修改，非常的方便！！！

样式列表

不明白不清楚的请联系我：

wx：dengchunyi2
tel:15071747425