指挥舱树状菜单样式
This commit is contained in:
@ -101,7 +101,7 @@
|
||||
nodeEventType = "mouseoutCheck";
|
||||
}
|
||||
} else if (tools.eqs(e.type, "click")) {
|
||||
if (setting.check.enable && tools.eqs(target.tagName, "span") && target.getAttribute("treeNode" + consts.id.CHECK) !== null) {
|
||||
if (setting.check.enable && (tools.eqs(target.tagName, "span") || tools.eqs(target.tagName, "svg")) && target.getAttribute("treeNode" + consts.id.CHECK) !== null) {
|
||||
tId = tools.getNodeMainDom(target).id;
|
||||
nodeEventType = "checkNode";
|
||||
}
|
||||
@ -156,12 +156,18 @@
|
||||
_beforeA = function (setting, node, html) {
|
||||
if (setting.check.enable) {
|
||||
data.makeChkFlag(setting, node);
|
||||
html.push("<span ID='", node.tId, consts.id.CHECK, "' class='", view.makeChkClass(setting, node), "' treeNode", consts.id.CHECK, (node.nocheck === true ? " style='display:none;'" : ""), "></span>");
|
||||
if(node.check_Child_State>0 || node.isShow) {
|
||||
html.push("<span ID='", node.tId, consts.id.CHECK, "' class='", view.makeChkClass(setting, node), "' treeNode", consts.id.CHECK, (node.nocheck === true ? " style='display:none;'" : ""), `><svg style="pointer-events: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14" fill="none"><path fill="rgba(var(--color-base1), 1)" d="M7.34788e-16 2L-2.20436e-15 12C-2.40727e-15 13.1046 0.895431 14 2 14L12 14C13.1046 14 14 13.1046 14 12L14 2C14 0.895431 13.1046 -1.46958e-15 12 -1.46958e-15L2 -1.46958e-15C0.895431 -1.60485e-15 8.02424e-16 0.895431 7.34788e-16 2Z"></path><path d="M5.47283 8.3039L3.10764 6.12807C3.06194 6.08647 2.99525 6.08647 2.94955 6.12946L2.04424 6.98093C1.98989 7.03224 1.98495 7.12376 2.03312 7.18201L6.03602 11.9566C6.09778 12.0301 6.20647 12.0065 6.24105 11.9136C7.03644 9.69343 9.25835 5.63439 11.9619 2.69585C11.999 2.65564 12.0101 2.59601 11.9904 2.54331L11.8211 2.08568C11.7915 2.00525 11.7038 1.97474 11.6396 2.02328C8.63587 4.21019 6.45966 6.92546 5.47283 8.3039Z" fill="#004242" ></path></svg></span>`);
|
||||
}
|
||||
else {
|
||||
html.push("<span ID='", node.tId, consts.id.CHECK, "' class='", view.makeChkClass(setting, node), "' treeNode", consts.id.CHECK, (node.nocheck === true ? " style='display:none;'" : ""), `><svg style="pointer-events: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14" fill="none"><path fill-rule="evenodd" fill="url(#linear_border_2442_533_0)" d="M0 12L0 2C0 0.895431 0.895431 0 2 0L12 0C13.1046 0 14 0.895431 14 2L14 12C14 13.1046 13.1046 14 12 14L2 14C0.895431 14 0 13.1046 0 12ZM2 12.5C1.72386 12.5 1.5 12.2761 1.5 12L1.5 2C1.5 1.72386 1.72386 1.5 2 1.5L12 1.5C12.2761 1.5 12.5 1.72386 12.5 2L12.5 12C12.5 12.2761 12.2761 12.5 12 12.5L2 12.5Z"></path><defs><linearGradient id="linear_border_2442_533_0" x1="0" y1="-0.5574798583984375" x2="12.1173095703125" y2="12.878036499023438" gradientUnits="userSpaceOnUse"><stop offset="0.0625" stop-color="rgba(var(--color-base1), 1)" /><stop offset="1" stop-color="var(--color-border1)" /></linearGradient></defs></svg></span>`);
|
||||
}
|
||||
}
|
||||
},
|
||||
//update zTreeObj, add method of check
|
||||
_zTreeTools = function (setting, zTreeTools) {
|
||||
zTreeTools.checkNode = function (node, checked, checkTypeFlag, callbackFlag) {
|
||||
|
||||
var nodeChecked = data.nodeChecked(setting, node);
|
||||
if (node.chkDisabled === true) return;
|
||||
if (checked !== true && checked !== false) {
|
||||
@ -512,6 +518,12 @@
|
||||
obj.show();
|
||||
}
|
||||
obj.attr('class', view.makeChkClass(setting, node));
|
||||
if(node.check_Child_State>0 || node.isShow) {
|
||||
obj.html(`<svg style="pointer-events: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14" fill="none"><path fill="rgba(var(--color-base1), 1)" d="M7.34788e-16 2L-2.20436e-15 12C-2.40727e-15 13.1046 0.895431 14 2 14L12 14C13.1046 14 14 13.1046 14 12L14 2C14 0.895431 13.1046 -1.46958e-15 12 -1.46958e-15L2 -1.46958e-15C0.895431 -1.60485e-15 8.02424e-16 0.895431 7.34788e-16 2Z"></path><path d="M5.47283 8.3039L3.10764 6.12807C3.06194 6.08647 2.99525 6.08647 2.94955 6.12946L2.04424 6.98093C1.98989 7.03224 1.98495 7.12376 2.03312 7.18201L6.03602 11.9566C6.09778 12.0301 6.20647 12.0065 6.24105 11.9136C7.03644 9.69343 9.25835 5.63439 11.9619 2.69585C11.999 2.65564 12.0101 2.59601 11.9904 2.54331L11.8211 2.08568C11.7915 2.00525 11.7038 1.97474 11.6396 2.02328C8.63587 4.21019 6.45966 6.92546 5.47283 8.3039Z" fill="#004242" ></path></svg>`)
|
||||
}
|
||||
else {
|
||||
obj.html(`<svg style="pointer-events: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14" fill="none"><path fill-rule="evenodd" fill="url(#linear_border_2442_533_0)" d="M0 12L0 2C0 0.895431 0.895431 0 2 0L12 0C13.1046 0 14 0.895431 14 2L14 12C14 13.1046 13.1046 14 12 14L2 14C0.895431 14 0 13.1046 0 12ZM2 12.5C1.72386 12.5 1.5 12.2761 1.5 12L1.5 2C1.5 1.72386 1.72386 1.5 2 1.5L12 1.5C12.2761 1.5 12.5 1.72386 12.5 2L12.5 12C12.5 12.2761 12.2761 12.5 12 12.5L2 12.5Z"></path><defs><linearGradient id="linear_border_2442_533_0" x1="0" y1="-0.5574798583984375" x2="12.1173095703125" y2="12.878036499023438" gradientUnits="userSpaceOnUse"><stop offset="0.0625" stop-color="rgba(var(--color-base1), 1)" /><stop offset="1" stop-color="var(--color-border1)" /></linearGradient></defs></svg></span>`)
|
||||
}
|
||||
},
|
||||
setParentNodeCheckBox: function (setting, node, value, srcNode) {
|
||||
var checkObj = $$(node, consts.id.CHECK, setting);
|
||||
|
||||
BIN
src/renderer/src/assets/images/tree/roots-close.png
Normal file
BIN
src/renderer/src/assets/images/tree/roots-close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 B |
BIN
src/renderer/src/assets/images/tree/roots-open.png
Normal file
BIN
src/renderer/src/assets/images/tree/roots-open.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 B |
@ -385,25 +385,47 @@ img {
|
||||
background: url(../images/tree/folder-empty.png) 0 0 no-repeat;
|
||||
background-size: 100% 100% !important;
|
||||
background-position: center !important;
|
||||
margin: 0 6px 0 4px !important;
|
||||
}
|
||||
|
||||
.ztree li span.button.ico_close {
|
||||
background: url(../images/tree/folder-close.png) 0 0 no-repeat;
|
||||
background-size: 100% 100% !important;
|
||||
background-position: center !important;
|
||||
margin: 0 6px 0 4px !important;
|
||||
}
|
||||
|
||||
.ztree li span.button.ico_open {
|
||||
background: url(../images/tree/folder-open.png) 0 0 no-repeat;
|
||||
background-size: 100% 100% !important;
|
||||
background-position: center !important;
|
||||
margin: 0 6px 0 4px !important;
|
||||
}
|
||||
|
||||
.ztree li span.button.ico_docu:not([style=""]) {
|
||||
background-size: 90% 90% !important;
|
||||
background-position: center !important;
|
||||
margin: 0 6px 0 4px !important;
|
||||
/* margin-top: 1px; */
|
||||
}
|
||||
.ztree li ul.line {
|
||||
background: none !important;
|
||||
}
|
||||
.ztree li span.button.switch,
|
||||
.ztree li span.button.chk {
|
||||
background: none;
|
||||
}
|
||||
.ztree li span.button.roots_open, .ztree li span.button.bottom_open {
|
||||
background: url(../images/tree/roots-open.png) 0 0 no-repeat;
|
||||
background-position: center !important;
|
||||
}
|
||||
.ztree li span.button.roots_close, .ztree li span.button.bottom_close {
|
||||
background: url(../images/tree/roots-close.png) 0 0 no-repeat;
|
||||
background-position: center !important;
|
||||
}
|
||||
.ztree li span.button.switch {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#app {
|
||||
.ztree * {
|
||||
|
||||
@ -37,6 +37,30 @@
|
||||
<el-form-item class="rememberForget">
|
||||
<!-- justify-content: space-around;align-items: center; -->
|
||||
<div style="display: flex">
|
||||
<svg class="checkbox-svg" v-show="checkboxVModel" style="pointer-events: none;"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14"
|
||||
viewBox="0 0 14 14" fill="none">
|
||||
<path fill="rgba(var(--color-base1), 1)"
|
||||
d="M7.34788e-16 2L-2.20436e-15 12C-2.40727e-15 13.1046 0.895431 14 2 14L12 14C13.1046 14 14 13.1046 14 12L14 2C14 0.895431 13.1046 -1.46958e-15 12 -1.46958e-15L2 -1.46958e-15C0.895431 -1.60485e-15 8.02424e-16 0.895431 7.34788e-16 2Z">
|
||||
</path>
|
||||
<path
|
||||
d="M5.47283 8.3039L3.10764 6.12807C3.06194 6.08647 2.99525 6.08647 2.94955 6.12946L2.04424 6.98093C1.98989 7.03224 1.98495 7.12376 2.03312 7.18201L6.03602 11.9566C6.09778 12.0301 6.20647 12.0065 6.24105 11.9136C7.03644 9.69343 9.25835 5.63439 11.9619 2.69585C11.999 2.65564 12.0101 2.59601 11.9904 2.54331L11.8211 2.08568C11.7915 2.00525 11.7038 1.97474 11.6396 2.02328C8.63587 4.21019 6.45966 6.92546 5.47283 8.3039Z"
|
||||
fill="#004242"></path>
|
||||
</svg>
|
||||
<svg class="checkbox-svg" v-show="!checkboxVModel" style="pointer-events: none;"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14"
|
||||
viewBox="0 0 14 14" fill="none">
|
||||
<path fill-rule="evenodd" fill="url(#linear_border_2442_533_0)"
|
||||
d="M0 12L0 2C0 0.895431 0.895431 0 2 0L12 0C13.1046 0 14 0.895431 14 2L14 12C14 13.1046 13.1046 14 12 14L2 14C0.895431 14 0 13.1046 0 12ZM2 12.5C1.72386 12.5 1.5 12.2761 1.5 12L1.5 2C1.5 1.72386 1.72386 1.5 2 1.5L12 1.5C12.2761 1.5 12.5 1.72386 12.5 2L12.5 12C12.5 12.2761 12.2761 12.5 12 12.5L2 12.5Z">
|
||||
</path>
|
||||
<defs>
|
||||
<linearGradient id="linear_border_2442_533_0" x1="0" y1="-0.5574798583984375" x2="12.1173095703125"
|
||||
y2="12.878036499023438" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.0625" stop-color="rgba(var(--color-base1), 1)" />
|
||||
<stop offset="1" stop-color="var(--color-border1)" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<el-checkbox :disabled="loading" v-model="checkboxVModel" @change="rememberpwd"
|
||||
label="string">记住密码</el-checkbox>
|
||||
<!-- <div style="cursor: pointer;">忘记密码？</div> -->
|
||||
@ -344,11 +368,29 @@ onMounted(() => {
|
||||
color: rgba(0, 66, 66, 1);
|
||||
background-color: rgba(var(--color-base1), 1);
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.el-button.is-loading:before {
|
||||
background-color: rgb(116 230 249 / 8%);
|
||||
}
|
||||
|
||||
.checkbox-svg {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox {
|
||||
.el-checkbox__input {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.el-checkbox__label {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -540,6 +582,7 @@ onMounted(() => {
|
||||
width: 166px;
|
||||
height: 40px;
|
||||
border-radius: 0;
|
||||
|
||||
::v-deep span {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user