|
|
@@ -6,7 +6,7 @@
|
|
|
@cancel="cancel"
|
|
|
centered
|
|
|
:maskClosable="false"
|
|
|
- width="890px">
|
|
|
+ width="1230px">
|
|
|
<template #footer>
|
|
|
<a-button key="submit"
|
|
|
type="primary"
|
|
|
@@ -40,21 +40,19 @@
|
|
|
<div class="powerLeft">
|
|
|
<a-checkbox :value="item.Menu.resourcecode">{{item.Menu.resourcename}}</a-checkbox>
|
|
|
</div>
|
|
|
- <template v-for="(sub, j) in item.SubMenu"
|
|
|
+ <div class="powerRight">
|
|
|
+ <div class="line" v-for="(sub, j) in item.SubMenu"
|
|
|
:key="j + '1'">
|
|
|
- <div class="powerMiddle">
|
|
|
- <div>
|
|
|
- <a-checkbox :value="sub.Menu.resourcecode">{{sub.Menu.resourcename}}</a-checkbox>
|
|
|
+ <div class="left">
|
|
|
+ <a-checkbox :value="sub.Menu.resourcecode">{{sub.Menu.resourcename}}</a-checkbox>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="powerRight">
|
|
|
- <div>
|
|
|
- <a-checkbox v-for="(subNext, l) in sub.SubMenu"
|
|
|
- :key="l + '3'"
|
|
|
- :value="subNext.Menu.resourcecode">{{subNext.Menu.resourcename}}</a-checkbox>
|
|
|
+ <div class="right">
|
|
|
+ <a-checkbox v-for="(subNext, l) in sub.SubMenu"
|
|
|
+ :key="l + '3'"
|
|
|
+ :value="subNext.Menu.resourcecode">{{subNext.Menu.resourcename}}</a-checkbox>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</a-checkbox-group>
|
|
|
</div>
|
|
|
@@ -141,7 +139,7 @@ export default defineComponent({
|
|
|
overflow-x: auto;
|
|
|
overflow-y: hidden;
|
|
|
.ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper {
|
|
|
- width: 90px;
|
|
|
+ width: 120px;
|
|
|
span + span {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
@@ -150,47 +148,75 @@ export default defineComponent({
|
|
|
width: 100%;
|
|
|
display: inline-flex;
|
|
|
border-bottom: 3px solid @m-grey11;
|
|
|
- div {
|
|
|
+ > div {
|
|
|
align-self: center;
|
|
|
align-items: center;
|
|
|
white-space: nowrap;
|
|
|
+ line-height: 40px;
|
|
|
}
|
|
|
.powerLeft {
|
|
|
width: 120px;
|
|
|
padding: 0 8px;
|
|
|
}
|
|
|
- .powerMiddle {
|
|
|
- width: 180px;
|
|
|
- .flex;
|
|
|
- flex-direction: column;
|
|
|
- div {
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- padding: 0 8px;
|
|
|
- border: 3px solid @m-grey11;
|
|
|
- border-top: 0;
|
|
|
- }
|
|
|
- div:last-child {
|
|
|
- border-bottom: 0;
|
|
|
- }
|
|
|
- }
|
|
|
.powerRight {
|
|
|
flex: 1;
|
|
|
+ max-width: calc(100% - 120px);
|
|
|
.flex;
|
|
|
flex-direction: column;
|
|
|
- div {
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
+ .line {
|
|
|
+ width: 100%;
|
|
|
+ display: inline-flex;
|
|
|
+ border-bottom: 3px solid @m-grey11;
|
|
|
+ > div {
|
|
|
padding: 0 8px;
|
|
|
- justify-content: flex-start;
|
|
|
- border-bottom: 3px solid @m-grey11;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ width: 140px;
|
|
|
+ min-width: 140px;
|
|
|
+ border-left: 3px solid @m-grey11;
|
|
|
+ border-right: 3px solid @m-grey11;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ flex: 1;
|
|
|
+ width: calc(100% - 120px);
|
|
|
+ }
|
|
|
}
|
|
|
- div:last-child {
|
|
|
- border-bottom: 0;
|
|
|
+ .line:last-child {
|
|
|
+ border-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
+ // .powerMiddle {
|
|
|
+ // width: 180px;
|
|
|
+ // .flex;
|
|
|
+ // flex-direction: column;
|
|
|
+ // div {
|
|
|
+ // width: 100%;
|
|
|
+ // height: 40px;
|
|
|
+ // line-height: 40px;
|
|
|
+ // padding: 0 8px;
|
|
|
+ // border: 3px solid @m-grey11;
|
|
|
+ // border-top: 0;
|
|
|
+ // }
|
|
|
+ // div:last-child {
|
|
|
+ // border-bottom: 0;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .powerRight {
|
|
|
+ // flex: 1;
|
|
|
+ // .flex;
|
|
|
+ // flex-direction: column;
|
|
|
+ // div {
|
|
|
+ // width: 100%;
|
|
|
+ // height: 40px;
|
|
|
+ // line-height: 40px;
|
|
|
+ // padding: 0 8px;
|
|
|
+ // justify-content: flex-start;
|
|
|
+ // border-bottom: 3px solid @m-grey11;
|
|
|
+ // }
|
|
|
+ // div:last-child {
|
|
|
+ // border-bottom: 0;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
}
|
|
|
}
|
|
|
}
|
huangbin