mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-06 00:18:51 +08:00
style: revision style
This commit is contained in:
xiaoxian521
parent
275ee39b0f
commit
8fe2b78c87
@ -1,10 +1,10 @@
|
||||
@font-face {font-family: "iconfont";
|
||||
src: url('iconfont.eot?t=1618822116404'); /* IE9 */
|
||||
src: url('iconfont.eot?t=1618822116404#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQkAAsAAAAACWAAAAPWAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDKgqFXIRAATYCJAMUCwwABCAFhG0HdBvwByMRJnztRfZfEuS6lrOvYNUWLBYrKHuUFPQcqdIW23Ll3d/JYMdZJG0ywiQE2XibeOB/7dt9Nn92ZlFNoklck5hG8QQJTud0QvS4hLZsQyzkjzg4gYMfJMARR4FqiZ5Qv7nUxxktKhcgP2GOJ7yLe0h+e5+srP9bW5jUlU4kMovHteofSLoSClKhShx579qwZ1MiUVu+eGkhN9tVZaKjkibzPwC6wOKi2f+/36x4/pCg6W00erHHR00ShxBJGhKRNBGvSyt1HhdSn4V5ZXpPRi73jLsJaEw2R1i/cft+tYwfFBAunT97XF2Y5RF6UOuqnjOz8EpRxxexDy/dx4e/5oaaqCT8yN1nNpyy+scsD9L97n2HDAHa3/2gIGEOMuFCr/uUFNJzJM2iOFuMWmwX+THbPQ+63YY2S3Yt29UaDZLM/vEiocLVvaCuNmb3DCmn5E4iBGSAICDw60FGxHM6gwYjMUDYIyrVRqWiIFdVp5OlyCpHcnXQV+vUI7rXm1ptaTRp0Hm9oRXMpAmqQSOaIBI1qVN9nqAO5KJ7TSUHFIblUEH0NoQp0wBj2Q2AEXWiYHAwugaLKd4Eo1KgwDj+QGY+owqccO4AIaofYhlTYN6hW+7Dd6SN/U6MDzpzZvmgbx5r60OOaeZD09L3JEsc7b/PZS7X23TI3ef0CxrUrZmkfm3xJkO+8xhXHsctAM5NNHJurk5K9fjJ3SPN4BygE8ZXbqAMt2z918loI1PRgoKDpDcU3gQmajswlr/cWWUz2Q6bc9/7n0bOs+6t1GfZ/ldEG5O9TNajSIjEyBT1USyPdo/RXgiA3oVDIopCACvZkvDYFst63Sb6FTsjq0wOUp6dnghX/LXsUMRY0H2fviR0P6SgXfVX+Ru7rs1tjg5Zft1m0P/21LuO7v0s3ef7RmT0x0DEsbzEuaXk+bCSzr3FnrfVG/kf4H+IPMMN7Ec7ilxNUBuVIOqYBEltCjFT50DRmh+p1K6xmsZsm3B+a4QbkpB7MMsTBsFQ7yAa7D0kQ30lZuo3KEb7D5WhIUHjYBhxxdagBn/AqAQt6Dd4UwtJmxx87Te6e1Kc4479j9x9DNZpqXM3LMj7OKY/3CZCQFwzXNn9MKUKjWtAI9Mu0i7zTH2vNJmahwOMStAC/Qbe1EJmuhxa7/+N7p4Uj4xcCP8jd78+WE0WAvGmLqSR57J9f7iNCM32I64ZXOHEJNIVtP7dAhqZ7Fsk28XcTCKqejq+Nr/GK9Dg1y0hhhRyKKGSm3t9jln5Mj4CpbjNkL92by2Wnt997svLSPeUumHEcoimYQAAAA==') format('woff2'),
|
||||
url('iconfont.woff?t=1618822116404') format('woff'),
|
||||
url('iconfont.ttf?t=1618822116404') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
|
||||
url('iconfont.svg?t=1618822116404#iconfont') format('svg'); /* iOS 4.1- */
|
||||
src: url('iconfont.eot?t=1619360751585'); /* IE9 */
|
||||
src: url('iconfont.eot?t=1619360751585#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARMAAsAAAAACbwAAAP9AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDQAqGEIRiATYCJAMYCw4ABCAFhG0Hfhs2CMgOJS2d2ECiAwlgBN+vlf0+zE5mg6wAXeJZIjpmuSejwkZFpjyxij57rCLU/p9b+c8NWt6VZsJElIM/LOtvdta6uELEuI1RpSiTq877eC1W5aXc/38/V+f5b2lrettv68Xkvj8zA0+cJTJJQyKSxKSSKBWPlNixsM5M+mTE89a4m0BnrRop+8ZmViBbIQ4KxE1DVyC7cisjwtDamp4zi3ihatOz9BfAc//xMQNNkU1SM3Hk4cujGgyMi5MjaYPhCecti35/94OKjG1AIR72hm9Li+Vt0nSLYro9YHl8K0nj4vjWyaffTiaTMMEW0xUVO53ZUn8t//CqJBMNgbPB31+pjC/TNMH4FprC+FaayuRTmsTkiFuGvdnj1KXAOIiV4K+OJFWaiyg0Ta9XlNpZFnNMMU87Fu6JpEd7eVb2opxYflpfv3a6POca5EdfirMurHNGCE8kd+I1Aga56YZpli8QTd2pkM13zTZ3LWH/yp07FYsroO6K+8wWApapQmIJS/sos3zFfAfHn7h7YNkyBXLpDpx4e1dclrGWJZBjHTZlH7GTZu5+x+JBl122Uu7Dnneswsb7GzdAYdAeAQNsuPCgpUXf26No0Vtakrt6EdLv73FsGfVc+stJczdJknB3izcB36+MxPaRNRuxkhDbHm3uWlgXdtH0nPRZONzVMmLbhDTJuGaPNCfq0vWC2f87RVXNo+ZKmG1whgeqbK2MNlctwFnlMtis7d3MsMNhGBuNtnQt7IjdW4k7NbE3+trR+Ch7WcWwpjkOHUkI4nbFjG3xcHdz1HEIabtS38eCpsmEOO2WrO1tMUMd5tprJzKSyJyclDN2xNNTI/96bFx+DY/OZ1M/Agzf5q9pwwDDd2mR2fk3+hv//gtHjxX1/Gv7BYy+e/TXTxieKPKA/wJB1v9p9MQFZWkUnqbM59f7CDSOyHhvg3RyEX+W+EJf98UsIXcTWksyJD1rIGutYxf+Nqj6dmQarevsprPVOM7vW4RJE2UWtjjLIMz3BpK5PkA23x678L9AtdRvaMyPNOicjLIr9m0II3eYocJRk1bjkqEG/FT5eG7oXUI97FVYafRSgixk5KTGuoZmbRz9yPZxTCiiN3FOJcoCPmmM3Q+93oAUZAE3qrzOxXmwq76e9r1SnRrwQa69GKTgkEayKk5iUAX4Ubs0l9t6/yVIF+alYCPzLlQJxIQYG5c0qtNAYI+jnzTvuWwfEqFrwnF0th/FBPhIxhBEXlkOkAT7d3NDKq6Oa4tiUJd6Po5Sse74jO9VXgcdcdUmUuQoUaOJnt4Dl+JXXeEyPxSI1voUw1/7MCwcm0NW4TI0Df09vyvCmMFradjrDakM0Z+bXAAAAAA=') format('woff2'),
|
||||
url('iconfont.woff?t=1619360751585') format('woff'),
|
||||
url('iconfont.ttf?t=1619360751585') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
|
||||
url('iconfont.svg?t=1619360751585#iconfont') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@ -15,6 +15,10 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.team-iconshanchu:before {
|
||||
content: "\e617";
|
||||
}
|
||||
|
||||
.team-iconshow-main-container:before {
|
||||
content: "\e878";
|
||||
}
|
||||
|
||||
Binary file not shown.
@ -1 +1 @@
|
||||
!function(e){var t,c,l,n,o,i,d='<svg><symbol id="team-iconshow-main-container" viewBox="0 0 1024 1024"><path d="M0 0v1024h1024V0z m409.6 921.6H102.4v-307.2h102.4v204.8h204.8zM409.6 204.8H204.8v204.8H102.4V102.4h307.2z m512 614.4v102.4h-307.2v-102.4h204.8v-204.8h102.4z m0-614.4v204.8h-102.4V204.8h-204.8V102.4h307.2z" ></path></symbol><symbol id="team-iconhidden-main-container" viewBox="0 0 1024 1024"><path d="M0 0v1024h1024V0z m409.6 716.8v204.8H307.2v-204.8H102.4v-102.4h307.2z m0-409.6v102.4H102.4V307.2h204.8V102.4h102.4z m512 409.6h-204.8v204.8h-102.4v-307.2h307.2z m0-307.2h-307.2V102.4h102.4v204.8h204.8z" ></path></symbol><symbol id="team-iconexit-fullscreen" viewBox="0 0 1024 1024"><path d="M366.2 181.8c-1-8-10.8-11.4-16.5-5.7l-53.1 53.1L134.2 67c-3.8-3.8-10-3.8-13.7 0L69 118.3c-3.8 3.8-3.8 10 0 13.7l162.4 162.4-53.3 53.3c-5.7 5.7-2.3 15.5 5.7 16.5l194.6 23c6.2 0.7 11.5-4.5 10.8-10.8l-23-194.6z m12.3 453.3l-194.7 23c-8 1-11.4 10.8-5.7 16.5l53.3 53.3L69 890.1c-3.8 3.8-3.8 10 0 13.7l51.5 51.4c3.8 3.8 10 3.8 13.7 0l162.4-162.3 53.1 53.1c5.7 5.7 15.5 2.3 16.5-5.7l23-194.4c0.7-6.3-4.5-11.5-10.7-10.8z m269.4-248l194.7-23c8-1 11.4-10.8 5.7-16.5L795 294.4l162.4-162.3c3.8-3.8 3.8-10 0-13.7L905.9 67c-3.8-3.8-10-3.8-13.7 0L729.7 229.2l-53.1-53.1c-5.7-5.7-15.6-2.3-16.5 5.7l-23 194.5c-0.6 6.3 4.6 11.5 10.8 10.8zM795 727.8l53.3-53.3c5.7-5.7 2.3-15.5-5.7-16.5L648 635c-6.2-0.7-11.5 4.5-10.8 10.8l23 194.6c1 8 10.8 11.4 16.5 5.7l53.1-53.1 162.4 162.3c3.8 3.8 10 3.8 13.7 0l51.5-51.4c3.8-3.8 3.8-10 0-13.7L795 727.8z m0 0" fill="#515151" ></path></symbol><symbol id="team-iconfullscreen" viewBox="0 0 1024 1024"><path d="M229.8 163l55.7-55.7c6-6 2.4-16.2-6-17.2l-203.2-24c-6.5-0.8-12 4.7-11.3 11.3l24 203.2c1 8.4 11.3 11.9 17.2 6l55.4-55.4 169.6 169.4c3.9 3.9 10.4 3.9 14.3 0l53.8-53.6c3.9-3.9 3.9-10.4 0-14.3L229.8 163z m447.3 237.6c3.9 3.9 10.4 3.9 14.3 0L861 231.1l55.4 55.4c6 6 16.2 2.4 17.2-6l24-203c0.8-6.5-4.7-12-11.3-11.3l-203.2 24c-8.4 1-11.9 11.3-6 17.2l55.7 55.7-169.5 169.4c-3.9 3.9-3.9 10.4 0 14.3l53.8 53.8z m256.6 343.9c-1-8.4-11.3-11.9-17.2-6L861 794 691.4 624.5c-3.9-3.9-10.4-3.9-14.3 0l-53.8 53.6c-3.9 3.9-3.9 10.4 0 14.3L792.9 862l-55.7 55.7c-6 6-2.4 16.2 6 17.2l203.2 24c6.5 0.8 12-4.7 11.3-11.3l-24-203.1z m-588.1-120c-3.9-3.9-10.4-3.9-14.3 0L161.7 794l-55.4-55.4c-6-6-16.2-2.4-17.2 6l-24 203c-0.8 6.5 4.7 12.1 11.3 11.3l203.2-24c8.4-1 11.9-11.3 6-17.2l-55.7-55.5 169.6-169.4c3.9-3.9 3.9-10.4 0-14.3l-53.9-54z m0 0" fill="#515151" ></path></symbol></svg>',a=(a=document.getElementsByTagName("script"))[a.length-1].getAttribute("data-injectcss");if(a&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}function m(){o||(o=!0,l())}t=function(){var e,t,c,l;(l=document.createElement("div")).innerHTML=d,d=null,(c=l.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",e=c,(t=document.body).firstChild?(l=e,(c=t.firstChild).parentNode.insertBefore(l,c)):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(c=function(){document.removeEventListener("DOMContentLoaded",c,!1),t()},document.addEventListener("DOMContentLoaded",c,!1)):document.attachEvent&&(l=t,n=e.document,o=!1,(i=function(){try{n.documentElement.doScroll("left")}catch(e){return void setTimeout(i,50)}m()})(),n.onreadystatechange=function(){"complete"==n.readyState&&(n.onreadystatechange=null,m())})}(window);
|
||||
!function(e){var t,c,l,n,o,i,a='<svg><symbol id="team-iconshanchu" viewBox="0 0 1024 1024"><path d="M200.0896 166.675692l657.250462 657.218954-33.429662 33.429662-657.250462-657.250462z" ></path><path d="M166.675692 823.9104l657.218954-657.250462 33.429662 33.429662-657.250462 657.250462z" ></path></symbol><symbol id="team-iconshow-main-container" viewBox="0 0 1024 1024"><path d="M0 0v1024h1024V0z m409.6 921.6H102.4v-307.2h102.4v204.8h204.8zM409.6 204.8H204.8v204.8H102.4V102.4h307.2z m512 614.4v102.4h-307.2v-102.4h204.8v-204.8h102.4z m0-614.4v204.8h-102.4V204.8h-204.8V102.4h307.2z" ></path></symbol><symbol id="team-iconhidden-main-container" viewBox="0 0 1024 1024"><path d="M0 0v1024h1024V0z m409.6 716.8v204.8H307.2v-204.8H102.4v-102.4h307.2z m0-409.6v102.4H102.4V307.2h204.8V102.4h102.4z m512 409.6h-204.8v204.8h-102.4v-307.2h307.2z m0-307.2h-307.2V102.4h102.4v204.8h204.8z" ></path></symbol><symbol id="team-iconexit-fullscreen" viewBox="0 0 1024 1024"><path d="M366.2 181.8c-1-8-10.8-11.4-16.5-5.7l-53.1 53.1L134.2 67c-3.8-3.8-10-3.8-13.7 0L69 118.3c-3.8 3.8-3.8 10 0 13.7l162.4 162.4-53.3 53.3c-5.7 5.7-2.3 15.5 5.7 16.5l194.6 23c6.2 0.7 11.5-4.5 10.8-10.8l-23-194.6z m12.3 453.3l-194.7 23c-8 1-11.4 10.8-5.7 16.5l53.3 53.3L69 890.1c-3.8 3.8-3.8 10 0 13.7l51.5 51.4c3.8 3.8 10 3.8 13.7 0l162.4-162.3 53.1 53.1c5.7 5.7 15.5 2.3 16.5-5.7l23-194.4c0.7-6.3-4.5-11.5-10.7-10.8z m269.4-248l194.7-23c8-1 11.4-10.8 5.7-16.5L795 294.4l162.4-162.3c3.8-3.8 3.8-10 0-13.7L905.9 67c-3.8-3.8-10-3.8-13.7 0L729.7 229.2l-53.1-53.1c-5.7-5.7-15.6-2.3-16.5 5.7l-23 194.5c-0.6 6.3 4.6 11.5 10.8 10.8zM795 727.8l53.3-53.3c5.7-5.7 2.3-15.5-5.7-16.5L648 635c-6.2-0.7-11.5 4.5-10.8 10.8l23 194.6c1 8 10.8 11.4 16.5 5.7l53.1-53.1 162.4 162.3c3.8 3.8 10 3.8 13.7 0l51.5-51.4c3.8-3.8 3.8-10 0-13.7L795 727.8z m0 0" fill="#515151" ></path></symbol><symbol id="team-iconfullscreen" viewBox="0 0 1024 1024"><path d="M229.8 163l55.7-55.7c6-6 2.4-16.2-6-17.2l-203.2-24c-6.5-0.8-12 4.7-11.3 11.3l24 203.2c1 8.4 11.3 11.9 17.2 6l55.4-55.4 169.6 169.4c3.9 3.9 10.4 3.9 14.3 0l53.8-53.6c3.9-3.9 3.9-10.4 0-14.3L229.8 163z m447.3 237.6c3.9 3.9 10.4 3.9 14.3 0L861 231.1l55.4 55.4c6 6 16.2 2.4 17.2-6l24-203c0.8-6.5-4.7-12-11.3-11.3l-203.2 24c-8.4 1-11.9 11.3-6 17.2l55.7 55.7-169.5 169.4c-3.9 3.9-3.9 10.4 0 14.3l53.8 53.8z m256.6 343.9c-1-8.4-11.3-11.9-17.2-6L861 794 691.4 624.5c-3.9-3.9-10.4-3.9-14.3 0l-53.8 53.6c-3.9 3.9-3.9 10.4 0 14.3L792.9 862l-55.7 55.7c-6 6-2.4 16.2 6 17.2l203.2 24c6.5 0.8 12-4.7 11.3-11.3l-24-203.1z m-588.1-120c-3.9-3.9-10.4-3.9-14.3 0L161.7 794l-55.4-55.4c-6-6-16.2-2.4-17.2 6l-24 203c-0.8 6.5 4.7 12.1 11.3 11.3l203.2-24c8.4-1 11.9-11.3 6-17.2l-55.7-55.5 169.6-169.4c3.9-3.9 3.9-10.4 0-14.3l-53.9-54z m0 0" fill="#515151" ></path></symbol></svg>',d=(d=document.getElementsByTagName("script"))[d.length-1].getAttribute("data-injectcss");if(d&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}function m(){o||(o=!0,l())}t=function(){var e,t,c,l;(l=document.createElement("div")).innerHTML=a,a=null,(c=l.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",e=c,(t=document.body).firstChild?(l=e,(c=t.firstChild).parentNode.insertBefore(l,c)):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(c=function(){document.removeEventListener("DOMContentLoaded",c,!1),t()},document.addEventListener("DOMContentLoaded",c,!1)):document.attachEvent&&(l=t,n=e.document,o=!1,(i=function(){try{n.documentElement.doScroll("left")}catch(e){return void setTimeout(i,50)}m()})(),n.onreadystatechange=function(){"complete"==n.readyState&&(n.onreadystatechange=null,m())})}(window);
|
||||
@ -5,6 +5,13 @@
|
||||
"css_prefix_text": "team-icon",
|
||||
"description": "增删查改xi't",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "6184565",
|
||||
"name": "删除",
|
||||
"font_class": "shanchu",
|
||||
"unicode": "e617",
|
||||
"unicode_decimal": 58903
|
||||
},
|
||||
{
|
||||
"icon_id": "9626913",
|
||||
"name": "全屏",
|
||||
|
||||
@ -20,6 +20,9 @@ Created by iconfont
|
||||
/>
|
||||
<missing-glyph />
|
||||
|
||||
<glyph glyph-name="shanchu" unicode="" d="M200.0896 729.324308l657.250462-657.218954-33.429662-33.429662-657.250462 657.250462zM166.675692 72.0896l657.218954 657.250462 33.429662-33.429662-657.250462-657.250462z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="show-main-container" unicode="" d="M0 896v-1024h1024V896z m409.6-921.6H102.4v307.2h102.4v-204.8h204.8zM409.6 691.2H204.8v-204.8H102.4V793.6h307.2z m512-614.4v-102.4h-307.2v102.4h204.8v204.8h102.4z m0 614.4v-204.8h-102.4V691.2h-204.8V793.6h307.2z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -14,6 +14,14 @@
|
||||
<span>隐藏标签页</span>
|
||||
<vxe-switch v-model="tagsVal" open-label="开" close-label="关" @change="tagsChange"></vxe-switch>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span>标签风格</span>
|
||||
<vxe-radio-group v-model="markValue" @change="onChange">
|
||||
<vxe-radio label="card" content="卡片"></vxe-radio>
|
||||
<vxe-radio label="smart" content="灵动"></vxe-radio>
|
||||
</vxe-radio-group>
|
||||
</li>
|
||||
</ul>
|
||||
<el-divider />
|
||||
<vxe-button
|
||||
@ -28,7 +36,7 @@
|
||||
|
||||
<script lang='ts'>
|
||||
import panel from "../panel/index.vue";
|
||||
import { onMounted, reactive, toRefs } from "vue";
|
||||
import { onMounted, reactive, toRefs, ref, unref } from "vue";
|
||||
import { storageLocal } from "/@/utils/storage";
|
||||
import { toggleClass } from "/@/utils/operate";
|
||||
import { emitter } from "/@/utils/mitt";
|
||||
@ -40,6 +48,9 @@ export default {
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
|
||||
// 默认卡片模式
|
||||
const markValue = ref(storageLocal.getItem("showModel") || "card");
|
||||
|
||||
function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
|
||||
const targetEl = target || document.body;
|
||||
let { className } = targetEl;
|
||||
@ -104,13 +115,20 @@ export default {
|
||||
router.push("/login");
|
||||
}
|
||||
|
||||
function onChange({ label }) {
|
||||
storageLocal.setItem("showModel", label);
|
||||
emitter.emit("tagViewsShowModel", label);
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(settings),
|
||||
localOperate,
|
||||
greyChange,
|
||||
weekChange,
|
||||
tagsChange,
|
||||
onReset
|
||||
onReset,
|
||||
markValue,
|
||||
onChange
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapse"
|
||||
background-color="#1b2a47"
|
||||
text-color="#7a80b4"
|
||||
:unique-opened="false"
|
||||
active-text-color="#fff"
|
||||
background-color="#fff"
|
||||
unique-opened
|
||||
text-color="#000"
|
||||
active-text-color="#409eff"
|
||||
:collapse-transition="false"
|
||||
mode="vertical"
|
||||
@select="menuSelect"
|
||||
|
||||
@ -4,11 +4,23 @@
|
||||
<div
|
||||
v-for="(item, index) in dynamicTagList"
|
||||
:key="index"
|
||||
:class="['scroll-item', $route.path === item.path ? 'active' : '']"
|
||||
:ref="'dynamic' + index"
|
||||
:class="['scroll-item', $route.path === item.path ? 'is-active' : '', $route.path === item.path && showModel ==='card' ? 'card-active' : '' ]"
|
||||
@contextmenu.prevent.native="openMenu(item, $event)"
|
||||
@mouseenter.prevent="onMouseenter(item, index)"
|
||||
@mouseleave.prevent="onMouseleave(item, index)"
|
||||
>
|
||||
<router-link :to="item.path">{{ $t(item.meta.title) }}</router-link>
|
||||
<span v-if="index !== 0 " class="el-icon-close" @click="deleteMenu(item)"></span>
|
||||
<i
|
||||
v-if="$route.path === item.path && index !== 0 || index === activeIndex && index !== 0"
|
||||
class="iconfont team-iconshanchu"
|
||||
@click="deleteMenu(item)"
|
||||
></i>
|
||||
<div
|
||||
:ref="'schedule' + index"
|
||||
v-if="showModel !=='card'"
|
||||
:class="[$route.path === item.path ? 'schedule-active' : '']"
|
||||
></div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<!-- 右键菜单按钮 -->
|
||||
@ -62,16 +74,25 @@
|
||||
<script lang='ts'>
|
||||
import { useDynamicRoutesHook } from "./tagsHook";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { ref, watchEffect, watch, onBeforeMount, unref, nextTick } from "vue";
|
||||
import {
|
||||
ref,
|
||||
watchEffect,
|
||||
watch,
|
||||
onBeforeMount,
|
||||
unref,
|
||||
nextTick,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
import { storageLocal } from "/@/utils/storage";
|
||||
import { emitter } from "/@/utils/mitt";
|
||||
import { toggleClass, removeClass } from "/@/utils/operate";
|
||||
import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
|
||||
import { templateRef } from "@vueuse/core";
|
||||
import { homeRoute } from "./type";
|
||||
let refreshDiv = "refresh-div";
|
||||
let refreshButton = "refresh-button";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
let vm: any;
|
||||
const {
|
||||
deleteDynamicTag,
|
||||
dynamicRouteTags,
|
||||
@ -82,7 +103,7 @@ export default {
|
||||
const router = useRouter();
|
||||
const showTags = ref(storageLocal.getItem("tagsVal") || false);
|
||||
const containerDom = templateRef<HTMLElement | null>("containerDom", null);
|
||||
|
||||
const activeIndex = ref(-1);
|
||||
const tagsViews = ref([
|
||||
{
|
||||
icon: "el-icon-refresh-right",
|
||||
@ -114,6 +135,12 @@ export default {
|
||||
}
|
||||
]);
|
||||
|
||||
// 显示模式，默认卡片模式显示
|
||||
const showModel = ref(storageLocal.getItem("showModel") || "card");
|
||||
if (!showModel) {
|
||||
storageLocal.setItem("showModel", "card");
|
||||
}
|
||||
|
||||
let visible = ref(false);
|
||||
let buttonLeft = ref(0);
|
||||
let buttonTop = ref(0);
|
||||
@ -146,13 +173,13 @@ export default {
|
||||
});
|
||||
|
||||
function onFresh() {
|
||||
toggleClass(true, refreshDiv, document.querySelector(".rotate"));
|
||||
toggleClass(true, refreshButton, document.querySelector(".rotate"));
|
||||
const { path, fullPath } = unref(route);
|
||||
router.replace({
|
||||
path: "/redirect" + fullPath
|
||||
});
|
||||
setTimeout(() => {
|
||||
removeClass(document.querySelector(".rotate"), refreshDiv);
|
||||
removeClass(document.querySelector(".rotate"), refreshButton);
|
||||
}, 600);
|
||||
}
|
||||
|
||||
@ -225,7 +252,7 @@ export default {
|
||||
} else {
|
||||
buttonLeft.value = left;
|
||||
}
|
||||
buttonTop.value = e.offsetY * 2;
|
||||
buttonTop.value = e.clientY;
|
||||
visible.value = true;
|
||||
}
|
||||
|
||||
@ -244,12 +271,46 @@ export default {
|
||||
}
|
||||
);
|
||||
|
||||
// 鼠标移入
|
||||
function onMouseenter(item, index) {
|
||||
if (index) activeIndex.value = index;
|
||||
if (unref(showModel) === "smart") {
|
||||
if (hasClass(vm.refs["schedule" + index], "schedule-active")) return;
|
||||
toggleClass(true, "schedule-in", vm.refs["schedule" + index]);
|
||||
toggleClass(false, "schedule-out", vm.refs["schedule" + index]);
|
||||
} else {
|
||||
if (hasClass(vm.refs["dynamic" + index], "card-active")) return;
|
||||
toggleClass(true, "card-in", vm.refs["dynamic" + index]);
|
||||
toggleClass(false, "card-out", vm.refs["dynamic" + index]);
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标移出
|
||||
function onMouseleave(item, index) {
|
||||
activeIndex.value = -1;
|
||||
if (unref(showModel) === "smart") {
|
||||
if (hasClass(vm.refs["schedule" + index], "schedule-active")) return;
|
||||
toggleClass(false, "schedule-in", vm.refs["schedule" + index]);
|
||||
toggleClass(true, "schedule-out", vm.refs["schedule" + index]);
|
||||
} else {
|
||||
if (hasClass(vm.refs["dynamic" + index], "card-active")) return;
|
||||
toggleClass(false, "card-in", vm.refs["dynamic" + index]);
|
||||
toggleClass(true, "card-out", vm.refs["dynamic" + index]);
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
vm = getCurrentInstance();
|
||||
|
||||
emitter.on("tagViewsChange", key => {
|
||||
if (unref(showTags) === key) return;
|
||||
showTags.value = key;
|
||||
});
|
||||
|
||||
emitter.on("tagViewsShowModel", key => {
|
||||
showModel.value = key;
|
||||
});
|
||||
|
||||
emitter.on("changLayoutRoute", indexPath => {
|
||||
let currentLen = storageLocal.getItem("routesInStorage").length;
|
||||
if (currentLen === 1) {
|
||||
@ -278,7 +339,11 @@ export default {
|
||||
openMenu,
|
||||
closeMenu,
|
||||
selectTag,
|
||||
currentSelect
|
||||
currentSelect,
|
||||
onMouseenter,
|
||||
onMouseleave,
|
||||
activeIndex,
|
||||
showModel
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -287,16 +352,20 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.tags-view {
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
.scroll-item {
|
||||
border-radius: 3px;
|
||||
border-radius: 3px 3px 0 0;
|
||||
padding: 2px 8px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-right: 5px;
|
||||
height: 28px;
|
||||
line-height: 25px;
|
||||
&:hover {
|
||||
background-color: #eaf4fe;
|
||||
}
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
@ -309,7 +378,6 @@ export default {
|
||||
padding: 5px 0;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border: 0.5px solid rgba($color: #ccc, $alpha: 0.3);
|
||||
@ -343,22 +411,6 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon-close {
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
.el-icon-close:hover {
|
||||
background: #b4bccc;
|
||||
}
|
||||
.active {
|
||||
background: #409eff;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
:deep(.el-scrollbar__wrap) {
|
||||
height: 100vh;
|
||||
}
|
||||
@ -379,7 +431,112 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.refresh-div {
|
||||
.el-dropdown-menu {
|
||||
padding: 0;
|
||||
}
|
||||
.el-dropdown-menu__item:not(.is-disabled):hover {
|
||||
color: #606266;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
.el-dropdown-menu__item,
|
||||
.el-menu-item {
|
||||
padding: 0 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
:deep(.el-dropdown-menu__item) i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.is-active {
|
||||
background-color: #eaf4fe;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
a {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭图标
|
||||
.team-iconshanchu {
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
.team-iconshanchu:hover {
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
background: #b4bccc;
|
||||
}
|
||||
|
||||
// 卡片模式
|
||||
.card-active {
|
||||
border: 1px solid #1890ff;
|
||||
}
|
||||
// 卡片模式下鼠标移入显示蓝色边框
|
||||
.card-in {
|
||||
border: 1px solid #1890ff;
|
||||
color: #1890ff;
|
||||
a {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
// 卡片模式下鼠标移出隐藏蓝色边框
|
||||
.card-out {
|
||||
border: none;
|
||||
color: #666;
|
||||
a {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
// 灵动模式
|
||||
.schedule-active {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: #1890ff;
|
||||
}
|
||||
// 灵动模式下鼠标移入显示蓝色进度条
|
||||
.schedule-in {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: #1890ff;
|
||||
animation: scheduleInWidth 400ms ease-in;
|
||||
}
|
||||
@keyframes scheduleInWidth {
|
||||
from {
|
||||
width: 0px;
|
||||
}
|
||||
to {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
// 灵动模式下鼠标移出隐藏蓝色进度条
|
||||
.schedule-out {
|
||||
width: 0;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: #1890ff;
|
||||
animation: scheduleOutWidth 400ms ease-in;
|
||||
}
|
||||
@keyframes scheduleOutWidth {
|
||||
from {
|
||||
width: 100%;
|
||||
}
|
||||
to {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
// 刷新按钮动画效果
|
||||
.refresh-button {
|
||||
-webkit-transition-property: -webkit-transform;
|
||||
-webkit-transition-duration: 600ms;
|
||||
-moz-transition-property: -moz-transform;
|
||||
@ -421,19 +578,4 @@ export default {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.el-dropdown-menu {
|
||||
padding: 0;
|
||||
}
|
||||
.el-dropdown-menu__item:not(.is-disabled):hover {
|
||||
color: #606266;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
.el-dropdown-menu__item,
|
||||
.el-menu-item {
|
||||
padding: 0 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
:deep(.el-dropdown-menu__item) i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 1px #888888;
|
||||
|
||||
// reset element-plus css
|
||||
.horizontal-collapse-transition {
|
||||
@ -76,6 +77,7 @@
|
||||
|
||||
& .nest-menu .el-submenu > .el-submenu__title,
|
||||
& .el-submenu .el-menu-item {
|
||||
font-size: 12px;
|
||||
min-width: $sideBarWidth !important;
|
||||
background-color: $subMenuBg !important;
|
||||
|
||||
|
||||
@ -1,17 +1,29 @@
|
||||
// sidebar
|
||||
$menuText: #7a80b4;
|
||||
$menuActiveText: #7a80b4;
|
||||
$subMenuActiveText: #f4f4f5;
|
||||
$subMenuActiveText: #409eff;
|
||||
|
||||
// dark样式
|
||||
//菜单背景
|
||||
$menuBg: #1b2a47;
|
||||
// 鼠标覆盖菜单时的背景
|
||||
$menuHover: #2a395b;
|
||||
// $menuBg: #1b2a47;
|
||||
// // 鼠标覆盖菜单时的背景
|
||||
// $menuHover: #2a395b;
|
||||
|
||||
// 子菜单背景
|
||||
$subMenuBg: #1f2d3d;
|
||||
// $subMenuBg: #1f2d3d;
|
||||
// // 鼠标覆盖子菜单时的背景
|
||||
// $subMenuHover: #001528;
|
||||
|
||||
// night样式
|
||||
//菜单背景
|
||||
$menuBg: #fff;
|
||||
// 鼠标覆盖菜单时的背景
|
||||
$menuHover: #e0ebf6;
|
||||
|
||||
// 子菜单背景
|
||||
$subMenuBg: #fff;
|
||||
// 鼠标覆盖子菜单时的背景
|
||||
$subMenuHover: #001528;
|
||||
$subMenuHover: #e0ebf6;
|
||||
|
||||
$sideBarWidth: 210px;
|
||||
|
||||
|
||||
@ -29,10 +29,11 @@
|
||||
resizable
|
||||
:tree-config="{children: 'children', iconOpen: 'fa fa-minus-square-o', iconClose: 'fa fa-plus-square-o'}"
|
||||
:data="demo1.tableData"
|
||||
@cell-dblclick="cellDBLClickEvent"
|
||||
>
|
||||
<vxe-table-column tree-node field="name" title="字典名称"></vxe-table-column>
|
||||
<vxe-table-column field="model" title="字典类型"></vxe-table-column>
|
||||
<vxe-table-column title="操作" width="330">
|
||||
<vxe-table-column title="操作" width="330" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<vxe-button type="text" icon="el-icon-edit" @click="demo1.value8 = true">编辑</vxe-button>
|
||||
<vxe-button type="text" icon="el-icon-circle-plus-outline">新增子类型</vxe-button>
|
||||
@ -43,6 +44,27 @@
|
||||
</vxe-table>
|
||||
|
||||
<vxe-modal
|
||||
v-model="demo1.showEdit"
|
||||
:title="demo1.selectRow ? '编辑&保存' : '新增&保存'"
|
||||
width="800"
|
||||
min-width="600"
|
||||
min-height="300"
|
||||
:loading="demo1.submitLoading"
|
||||
resize
|
||||
destroy-on-close
|
||||
>
|
||||
<template #default>
|
||||
<vxe-form
|
||||
:data="demo1.formData"
|
||||
:items="demo1.formItems"
|
||||
:rules="demo1.formRules"
|
||||
title-align="right"
|
||||
title-width="100"
|
||||
@submit="demo1.submitEvent"
|
||||
></vxe-form>
|
||||
</template>
|
||||
</vxe-modal>
|
||||
<!-- <vxe-modal
|
||||
v-model="demo1.value8"
|
||||
title="记忆功能的窗口"
|
||||
width="440"
|
||||
@ -84,7 +106,7 @@
|
||||
</vxe-form-item>
|
||||
</vxe-form>
|
||||
</template>
|
||||
</vxe-modal>
|
||||
</vxe-modal>-->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@ -92,11 +114,17 @@ import { reactive, ref, nextTick } from "vue";
|
||||
import XEUtils from "xe-utils";
|
||||
import { cloneDeep } from "lodash-es";
|
||||
import { templateRef } from "@vueuse/core";
|
||||
import { VxeTablePropTypes, VxeTableInstance, VXETable } from "vxe-table";
|
||||
import {
|
||||
VxeTablePropTypes,
|
||||
VxeTableInstance,
|
||||
VXETable,
|
||||
VxeTableEvents
|
||||
} from "vxe-table";
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const demo1 = reactive({
|
||||
showEdit: false,
|
||||
filterName: "",
|
||||
tableData: [
|
||||
{
|
||||
@ -181,12 +209,21 @@ export default {
|
||||
});
|
||||
}
|
||||
|
||||
const cellDBLClickEvent: VxeTableEvents.CellDblclick = ({ row }) => {
|
||||
console.log(
|
||||
"%crow===>>>: ",
|
||||
"color: MidnightBlue; background: Aquamarine; font-size: 20px;",
|
||||
row
|
||||
);
|
||||
};
|
||||
|
||||
return {
|
||||
demo1,
|
||||
formatDate,
|
||||
searchEvent,
|
||||
confirmEvent,
|
||||
onEdit
|
||||
onEdit,
|
||||
cellDBLClickEvent
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user