@import '~antd/es/style/themes/default.less'; .commonMenu { width: 100%; height: 100%; min-height: 400px; background: url(assets/images/commonMenu/page-background.png); font-family: Microsoft YaHei; padding-top: 57px; background-color: #f5f6fc; overflow: hidden; :global { p { margin: 0; } .@{ant-prefix}-spin-nested-loading, .@{ant-prefix}-spin-container { height: 100%; width: 100%; } } .filterIconBox { .iconBox { filter: invert(33%) sepia(100%) saturate(1499%) hue-rotate(199deg) brightness(102%) contrast(104%); img { filter: brightness(0%); } } } .searchWrapper { width: 100%; height: 48px; padding: 0 20%; display: flex; align-items: center; margin-bottom: 50px; .searchBox { flex: 1; height: 48px; background: #ffffff; box-shadow: 0px 5px 10px 0px #f3f3f3; border-radius: 2px; display: flex; justify-content: space-between; align-items: center; padding: 0 11px; position: relative; .searchTitle { display: flex; align-items: center; & > i { margin-right: 15px; color: #3b7fdf; } .addIcon { &:hover { color: @primary-color; } } } .searchInput { // flex: 1; overflow: hidden; margin-left: 50px; } .searchInfoBox { width: 100%; height: 400px; position: absolute; overflow: hidden; left: 0; top: 100%; z-index: 100; transition: height 0.5s ease-out; &.searchInfoBox_hide { height: 0; } :global { .@{ant-prefix}-tree-treenode { width: 100%; } .@{ant-prefix}-tree-node-content-wrapper, .@{ant-prefix}-tree-node-content-wrapper-normal .@{ant-prefix}-tree-node-content-wrapper-close { flex: 1; overflow: hidden; } .@{ant-prefix}-tree-switcher { line-height: 36px; } } .customTitle { width: 100%; height: 36px; display: flex; align-items: center; justify-content: space-between; // padding-right: 20px; .titleInfo { img { width: 18px; height: 18px; margin-right: 8px; } } .treeSearchInfo { color: #ff5500; } &:hover { background-color: #f1faf9; .titleControl { .chooseLabel { display: none; } .chooseBtn { display: block; } } } .titleControl { .chooseLabel { padding-right: 20px; display: block; color: #999999; font-size: 15px; } .chooseBtn { float: right; cursor: pointer; height: 36px; width: 101px; background: #01c1a4; color: white; text-align: center; display: none; line-height: 36px; } } } } } .searchBtn { flex: none; width: 135px; height: 48px; background: linear-gradient(0deg, #1685ff 0%, #49a0ff 100%); box-shadow: 0px 5px 10px 0px #f5f6fc; border-radius: 2px; margin-left: 36px; font-weight: bold; color: #ffffff; } } .menuCardWrapper { // display: grid; // grid-template-columns: repeat(4, 25%); display: flex; justify-content: center; flex-wrap: wrap; height: calc(100% - 185px); padding: 0 5%; overflow: auto; } .menuCard { margin: 20px 10px; width: 377px; height: 240px; background-image: url(assets/images/commonMenu/矩形.png); background-size: 100%; background-position: center bottom; position: relative; padding: 0 30px; transition: transform 0.5s ease-out; cursor: pointer; &:hover { transform: scale(1.1); } .cardThumbnail { width: 100%; } .cardLabel { // width: 347px; height: 75px; position: absolute; bottom: 0; left: 10px; right: 10px; // left: 50%; // transform: translateX(-50%); background: url('assets/images/commonMenu/card-label.png') center/100% no-repeat; display: flex; justify-content: space-between; align-items: center; padding: 30px 10px 0; .cardTitle { color: #323232; padding-left: 10px; img { width: 20px; height: 20px; vertical-align: text-top; margin-right: 0.5em; } } .cardGroup { font-size: 14px; color: #999999; ::before { content: '·'; margin-right: 0.5em; } } } } // 底部logo .pageLogo { width: 197px; position: absolute; bottom: 31px; left: 50%; transform: translateX(-50%); img { width: 100%; } } } .MenuModal { :global { .@{ant-prefix}-modal-header { padding: 0 16px; background: url('../../assets/basic/图层\ 998@2x.png') center/100% 100% no-repeat; .@{ant-prefix}-modal-title { height: 56px; } } .@{ant-prefix}-modal-close { color: #fff; } } } // 菜单modal弹窗 .modalTitle { margin: 0; border-bottom: none; height: 100%; line-height: 56px; color: #fff; &::before { content: ''; display: inline-block; width: 0px; height: 16px; background: #1d8dff; margin-right: 12px; vertical-align: middle; } } .modalBodyHead { // background: url('../../assets/basic/图层\ 998@2x.png') center/100% 100% no-repeat; padding: 20px 30px; // color: red; :global { .@{ant-prefix}-input-affix-wrapper { border-radius: 20px; } } } .modalBodyMain { height: 500px; overflow: auto; padding: 0 20px 20px; // margin-top: 24px; border-top: 1px solid #ebebeb; .menuWrapper { border-bottom: 1px solid #ebebeb; padding-bottom: 20px; .menuGroupTitle { color: #323232; font-size: 16px; margin: 0; padding: 20px 10px 10px; } .menuList { display: flex; flex-wrap: wrap; .menuItem { width: 20%; padding: 10px; &.menuItem_added { & > div { border: 1px solid #78bbff; background: #e7f2ff; color: @primary-color; } } & > div { // width: 111px; height: 37px; line-height: 37px; text-align: center; border: 1px solid #f5f5f5; background: #f5f5f5; border-radius: 3px; color: #646464; font-size: 14px; cursor: pointer; position: relative; &:hover { color: @primary-color; border-color: @primary-color; } } .addedFlag { position: absolute; width: 20px; height: 20px; top: 0; right: 0; border-radius: 0 2px 0 100%; background: @primary-color; color: #fff; font-size: 12px; text-align: center; line-height: 12px; padding-left: 3px; } } } } }