diff --git a/src/assets/icons/iconfont.css b/src/assets/icons/iconfont.css index b4c7b61a..79f587c5 100644 --- a/src/assets/icons/iconfont.css +++ b/src/assets/icons/iconfont.css @@ -1,9 +1,9 @@ @font-face { font-family: "iconfont"; /* Project id 4607934 */ - src: url('iconfont.woff2?t=1724925411942') format('woff2'), - url('iconfont.woff?t=1724925411942') format('woff'), - url('iconfont.ttf?t=1724925411942') format('truetype'), - url('iconfont.svg?t=1724925411942#iconfont') format('svg'); + src: url('iconfont.woff2?t=1725006134098') format('woff2'), + url('iconfont.woff?t=1725006134098') format('woff'), + url('iconfont.ttf?t=1725006134098') format('truetype'), + url('iconfont.svg?t=1725006134098#iconfont') format('svg'); } .iconfont { @@ -14,6 +14,14 @@ -moz-osx-font-smoothing: grayscale; } +.icon-close-b:before { + content: "\e745"; +} + +.icon-youhuiquanjiantou:before { + content: "\e796"; +} + .icon-arrow-right-o:before { content: "\e6aa"; } diff --git a/src/assets/icons/iconfont.js b/src/assets/icons/iconfont.js index cf12e121..ed44b92a 100644 --- a/src/assets/icons/iconfont.js +++ b/src/assets/icons/iconfont.js @@ -1 +1 @@ -window._iconfont_svg_string_4607934='',(l=>{var h=(a=(a=document.getElementsByTagName("script"))[a.length-1]).getAttribute("data-injectcss"),a=a.getAttribute("data-disable-injectsvg");if(!a){var o,v,m,t,c,i=function(h,a){a.parentNode.insertBefore(h,a)};if(h&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(h){console&&console.log(h)}}o=function(){var h,a=document.createElement("div");a.innerHTML=l._iconfont_svg_string_4607934,(a=a.getElementsByTagName("svg")[0])&&(a.setAttribute("aria-hidden","true"),a.style.position="absolute",a.style.width=0,a.style.height=0,a.style.overflow="hidden",a=a,(h=document.body).firstChild?i(a,h.firstChild):h.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(v=function(){document.removeEventListener("DOMContentLoaded",v,!1),o()},document.addEventListener("DOMContentLoaded",v,!1)):document.attachEvent&&(m=o,t=l.document,c=!1,d(),t.onreadystatechange=function(){"complete"==t.readyState&&(t.onreadystatechange=null,z())})}function z(){c||(c=!0,m())}function d(){try{t.documentElement.doScroll("left")}catch(h){return void setTimeout(d,50)}z()}})(window); \ No newline at end of file +window._iconfont_svg_string_4607934='',(l=>{var h=(a=(a=document.getElementsByTagName("script"))[a.length-1]).getAttribute("data-injectcss"),a=a.getAttribute("data-disable-injectsvg");if(!a){var o,v,m,t,c,i=function(h,a){a.parentNode.insertBefore(h,a)};if(h&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(h){console&&console.log(h)}}o=function(){var h,a=document.createElement("div");a.innerHTML=l._iconfont_svg_string_4607934,(a=a.getElementsByTagName("svg")[0])&&(a.setAttribute("aria-hidden","true"),a.style.position="absolute",a.style.width=0,a.style.height=0,a.style.overflow="hidden",a=a,(h=document.body).firstChild?i(a,h.firstChild):h.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(v=function(){document.removeEventListener("DOMContentLoaded",v,!1),o()},document.addEventListener("DOMContentLoaded",v,!1)):document.attachEvent&&(m=o,t=l.document,c=!1,d(),t.onreadystatechange=function(){"complete"==t.readyState&&(t.onreadystatechange=null,z())})}function z(){c||(c=!0,m())}function d(){try{t.documentElement.doScroll("left")}catch(h){return void setTimeout(d,50)}z()}})(window); \ No newline at end of file diff --git a/src/assets/icons/iconfont.json b/src/assets/icons/iconfont.json index 79371faf..b5eb3d02 100644 --- a/src/assets/icons/iconfont.json +++ b/src/assets/icons/iconfont.json @@ -5,6 +5,20 @@ "css_prefix_text": "icon-", "description": "web端", "glyphs": [ + { + "icon_id": "40047116", + "name": "进销存关闭2", + "font_class": "close-b", + "unicode": "e745", + "unicode_decimal": 59205 + }, + { + "icon_id": "41674274", + "name": "优惠券箭头", + "font_class": "youhuiquanjiantou", + "unicode": "e796", + "unicode_decimal": 59286 + }, { "icon_id": "36882570", "name": "右箭头-2", diff --git a/src/assets/icons/iconfont.svg b/src/assets/icons/iconfont.svg index 85f6dba3..194d6750 100644 --- a/src/assets/icons/iconfont.svg +++ b/src/assets/icons/iconfont.svg @@ -14,6 +14,10 @@ /> + + + + diff --git a/src/assets/icons/iconfont.ttf b/src/assets/icons/iconfont.ttf index 3a2fab26..d1883420 100644 Binary files a/src/assets/icons/iconfont.ttf and b/src/assets/icons/iconfont.ttf differ diff --git a/src/assets/icons/iconfont.woff b/src/assets/icons/iconfont.woff index 804b6293..bcde9377 100644 Binary files a/src/assets/icons/iconfont.woff and b/src/assets/icons/iconfont.woff differ diff --git a/src/assets/icons/iconfont.woff2 b/src/assets/icons/iconfont.woff2 index 574d9846..6914660f 100644 Binary files a/src/assets/icons/iconfont.woff2 and b/src/assets/icons/iconfont.woff2 differ diff --git a/src/assets/images/components/page-settings/theme-6.png b/src/assets/images/components/page-settings/theme-6.png deleted file mode 100644 index efc1aae6..00000000 Binary files a/src/assets/images/components/page-settings/theme-6.png and /dev/null differ diff --git a/src/layout/components/main/index.scss b/src/layout/components/main/index.scss new file mode 100644 index 00000000..93df3b64 --- /dev/null +++ b/src/layout/components/main/index.scss @@ -0,0 +1,279 @@ +.siderbar { + width: 34rem; + padding: 2rem 3rem; + background-color: #fff; + overflow: auto; + .el-collapse { + border: 0; + :deep(.el-collapse-item__wrap) { + border: 0; + } + :deep(.el-collapse-item__header) { + border: 0; + } + } + .component { + .item { + width: calc(100% / 3); + padding: 0.5rem; + .img { + width: 3rem; + height: 3rem; + } + } + } + &-show { + display: flex; + padding: 0.5rem; + transition: box-shadow 0.5s ease; + } + &-show:hover { + cursor: pointer; + border-radius: 0.5rem; + box-shadow: 0 0 0.5rem 0 rgba(24, 144, 255, 0.3); + transform: scale(1.05); + transition: all 0.4s; + } + &-hidden { + display: none; + } +} +@media screen and (max-width: 1540px) { + .siderbar { + width: 32rem; + } +} +.main { + flex: 1; + position: relative; + height: 100%; + width: 100%; + .acticons { + position: absolute; + left: 50%; + margin-left: 26rem; + top: 0; + display: flex; + flex-direction: column; + gap: 2rem; + z-index: 1; + .el-button { + border-radius: 0.4rem; + } + .el-button + .el-button { + margin-left: 0; + } + } + .model { + display: flex; + flex-direction: column; + justify-content: center; + overflow: hidden; + height: 100%; + .model-content { + position: relative; + height: 84.6rem; + .model-bottom { + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + z-index: 2; + .roll { + border-top: 0.1rem solid #f5f5f5; + height: 4rem; + width: 39rem; + background: #fff; + margin: 0 auto; + } + } + + .model-drag { + overflow-y: auto; + padding-top: 0.2rem; + max-height: 84.4rem; + &::-webkit-scrollbar { + display: none; + } + } + // 悬浮按钮控制， 未选中情况下宽度自适应 + .plug-in-table.float-window { + .plug-in-name { + display: none; + } + } + // 选中情况下宽度是100% + .plug-in-border.float-window { + .plug-in-name { + display: block; + } + } + .plug-in-border { + position: relative; + // border: 0.2rem solid $cr-main; + z-index: 1; + box-sizing: border-box; + } + .plug-in-border::before { + content: ''; + width: calc(100% + 0.4rem); + height: calc(100% + 0.4rem); + position: absolute; + top: -0.2rem; + left: -0.2rem; + border: 0.2rem solid $cr-main; + } + .plug-in-animation { + transition: all 0.3s ease-in-out; + &:hover { + box-shadow: 0 2px 8px rgba(50, 55, 58, 0.1); + } + } + .plug-in-table { + display: table; + width: 100%; + cursor: move; + transform: translateZ(0rem) !important; + } + .plug-in-name { + position: absolute; + top: 0; + background: #fff; + left: -10rem; + width: 8.6rem; + height: 3.2rem; + text-align: center; + line-height: 3.2rem; + font-size: 1.3rem; + color: #666; + border-radius: 0.3rem; + z-index: 99; + &::before { + content: ''; + position: absolute; + width: 1rem; + height: 1rem; + background: #fff; + transform: rotate(45deg); + top: 50%; + right: -0.5rem; + margin-top: -0.5rem; + } + } + .plug-in-close::before { + position: absolute; + content: '\5DF2\9690\85CF'; + background: rgba(0, 0, 0, 0.5); + width: 100%; + height: 100%; + z-index: 99; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + } + .plug-in-right { + background: $cr-main; + position: absolute; + right: -5rem; + display: flex; + flex-direction: column; + gap: 2rem; + padding: 2rem 1.2rem; + color: #fff; + border-radius: 0.4rem; + & > i { + cursor: pointer; + } + & > i.disabled { + color: #5db2ff; + cursor: not-allowed; + } + } + .main-show { + display: inherit; + } + .main-hidden { + display: none; + } + .main-border { + padding: 1rem; + border: 0.1rem dashed $cr-main; + background: #b9d8f5; + } + } + .plug-in-right { + background: $cr-main; + position: absolute; + right: -5rem; + display: flex; + flex-direction: column; + gap: 2rem; + padding: 2rem 1.2rem; + color: #fff; + border-radius: 0.4rem; + & > i { + cursor: pointer; + } + & > i.disabled { + color: #5db2ff; + cursor: not-allowed; + } + & .icon-arrow-top, + & .icon-arrow-bottom { + height: 0.9rem; + } + } + .main-show { + display: inherit; + } + .main-hidden { + display: none; + } + .main-border { + padding: 1rem; + border: 0.1rem dashed $cr-main; + background: #b9d8f5; + } + } +} +.seat { + background: transparent; + height: 0.2rem; + width: 39rem; + margin: 0 auto; +} + +.drawer-container { + position: relative; + overflow: hidden; + width: 12.8rem; + margin-left: 0.1rem; + .drawer-content { + position: absolute; + top: 0; + width: 12.8rem; + height: 100%; + background: #fff; + transition: left 0.3s ease; + } + .drawer-drag-area { + height: calc(100% - 6rem); + overflow-y: auto; + } + .drawer-drag { + cursor: move; + } + .drawer-drag:hover{ + background: #F2F8FF; + .iconfont.icon-close-b { + display: block !important; + } + } + .iconfont.icon-close-b { + right: 1rem; + top: 1.4rem; + color: #8A8A8A; + cursor: pointer; + } +} \ No newline at end of file diff --git a/src/layout/components/main/index.vue b/src/layout/components/main/index.vue index f8f2acc0..59010699 100644 --- a/src/layout/components/main/index.vue +++ b/src/layout/components/main/index.vue @@ -15,6 +15,22 @@ +
+
+
已选组件
+
+ + +
  • + + {{ item.name }} + +
    • +     +     +
    +
    +
    @@ -457,16 +473,21 @@ const copy = (index: number) => { // 删除 const del = (index: number) => { app?.appContext.config.globalProperties.$common.message_box('删除后不可恢复，确定继续吗?', 'warning').then(() => { - diy_data.value.splice(index, 1); - if (diy_data.value.length > 0) { - let new_index: number = index; - // 删除的时候如果大于0，则显示上边的数据 - if (index > 0) { - new_index = new_index - 1; + const show_tabs_index = diy_data.value.findIndex((item: any) => item.show_tabs); + if (show_tabs_index == index) { + diy_data.value.splice(index, 1); + if (diy_data.value.length > 0) { + let new_index: number = index; + // 删除的时候如果大于0，则显示上边的数据 + if (index > 0) { + new_index = new_index - 1; + } + set_show_tabs(new_index); + } else { + page_settings(); } - set_show_tabs(new_index); } else { - page_settings(); + diy_data.value.splice(index, 1); } }); }; @@ -564,267 +585,23 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri