wanghu
@@ -0,0 +1,154 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN" data-page-node-id="c8jJRN3qgiN5kfAt3vgZYD">
|
||||
<head data-page-node-id="WMNABuuAvIt65s6192UA4K">
|
||||
<meta charset="UTF-8" data-page-node-id="Yk6AGtVnERulInfIlfo8Ck" />
|
||||
<title>左侧导航栏视觉升级 · 效果预览</title>
|
||||
<style>
|
||||
/* ===== 复制自 src/assets/styles/layout.css 的真实规则 ===== */
|
||||
*{font-family:"微软雅黑","Microsoft YaHei","Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB",Arial,sans-serif}
|
||||
body{margin:0;background:#fff}
|
||||
|
||||
.left-menu{
|
||||
position:fixed;background:#fff;color:#272829;width:216px;left:0;top:0;bottom:0px;
|
||||
display:flex;flex-direction:column;z-index:9;overflow:auto;
|
||||
border-right:1px solid #EFF1F5;
|
||||
padding:10px 0 20px;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
.left-menu .menu-top-box,.left-menu .clear-box{border-right:none;height:0;flex:none}
|
||||
.left-menu ul{list-style:none;margin:0;padding:0}
|
||||
|
||||
.left-menu li{
|
||||
height:44px;margin:2px 12px;position:relative;border:none;border-radius:8px;
|
||||
background:transparent;transition:background-color .2s ease,color .2s ease;
|
||||
}
|
||||
.left-menu li a{
|
||||
display:flex;align-items:center;height:44px;width:100%;padding:0 12px;line-height:1;
|
||||
box-sizing:border-box;border:none;color:#4b5568;font-size:14px;letter-spacing:.2px;
|
||||
outline:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:none;
|
||||
cursor:pointer;user-select:none;
|
||||
}
|
||||
.left-menu li a .menu-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.left-menu li a .menu-icon{font-size:18px;line-height:1;margin-right:10px;flex:none;color:#98a2b3;transition:color .2s ease}
|
||||
.left-menu li:hover{background:#f5f7fb}
|
||||
.left-menu li:hover a{color:#1f2a44}
|
||||
.left-menu li:hover a .menu-icon{color:#577afb}
|
||||
|
||||
.left-menu li.active{background:#eff4ff;border:none}
|
||||
.left-menu li.active::before{
|
||||
content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
|
||||
width:3px;height:18px;border-radius:0 3px 3px 0;background:#577afb;
|
||||
}
|
||||
.left-menu li.active a,.left-menu li.active a:hover{color:#3a63e0;font-weight:600}
|
||||
.left-menu li.active a .menu-icon{color:#3a63e0}
|
||||
|
||||
.left-menu li.menu-group{margin-top:10px}
|
||||
.left-menu li.menu-group > a{color:#667085;font-weight:600}
|
||||
.left-menu li.menu-group > a .menu-icon{font-size:17px}
|
||||
|
||||
.child-item-wrap{transition:all .3s ease-in-out;overflow:hidden}
|
||||
.left-menu li.child-item{height:38px;margin:2px 12px}
|
||||
.left-menu li.child-item a{margin-left:0;padding-left:14px;color:#6b7280;font-size:13px}
|
||||
.left-menu li.child-item a .child-dot{
|
||||
position:relative;width:5px;height:5px;margin-right:10px;flex:none;border-radius:50%;
|
||||
background:#d0d5dd;transition:background-color .2s ease,transform .2s ease;
|
||||
}
|
||||
.left-menu li.child-item:hover a .child-dot{background:#9db4f7;transform:scale(1.2)}
|
||||
.left-menu li.child-item.active a{color:#3a63e0;font-weight:600}
|
||||
.left-menu li.child-item.active a .child-dot{background:#577afb;box-shadow:0 0 0 3px rgba(87,122,251,.18)}
|
||||
|
||||
.left-menu::-webkit-scrollbar{width:6px}
|
||||
.left-menu::-webkit-scrollbar-thumb{background:#e2e6ef;border-radius:3px}
|
||||
.left-menu::-webkit-scrollbar-track{background:transparent}
|
||||
|
||||
/* 占位图标（无 iconfont 字体文件时用方块示意真实 18px 图形） */
|
||||
.ph{flex:none;width:18px;height:18px;margin-right:10px;border-radius:5px;
|
||||
background:#dfe4ee;display:flex;align-items:center;justify-content:center}
|
||||
.ph svg{width:12px;height:12px;stroke:#98a2b3;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
|
||||
.left-menu li:hover .ph svg,.left-menu li.active .ph svg{stroke:#577afb}
|
||||
.left-menu li.menu-group .ph{width:17px;height:17px}
|
||||
.menu-arrow{
|
||||
position:absolute;right:14px;top:50%;width:7px;height:7px;
|
||||
border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
|
||||
background:none;transform-origin:center;transition:transform .25s ease;margin-top:-5px;opacity:.55;
|
||||
}
|
||||
.menu-arrow.arrow-up{transform:rotate(225deg)}
|
||||
.menu-arrow.arrow-down{transform:rotate(45deg)}
|
||||
|
||||
.stage{margin-left:216px;padding:28px 32px}
|
||||
.stage h2{font-size:15px;color:#17233d;margin:0 0 6px}
|
||||
.stage p{font-size:13px;color:#808695;margin:0;line-height:1.9}
|
||||
.tag{display:inline-block;background:#f2f5ff;color:#3a63e0;font-size:12px;
|
||||
padding:3px 9px;border-radius:11px;margin:0 6px 6px 0}
|
||||
</style>
|
||||
</head>
|
||||
<body data-page-node-id="3h7DE4QC674Nnv72KJMbX0">
|
||||
|
||||
<div class="left-menu" data-page-node-id="vabeCjHmuEHr2IaWKMTE6S">
|
||||
<ul data-page-node-id="aTKRGUyuILFdYCwefWUzoi">
|
||||
<li class="menu-item" data-page-node-id="pR24sUgCtatpckTYmXe3we"><a href="javascript:;" data-page-node-id="tgXpBVqM3EATjswoGGHS7H">
|
||||
<i class="ph" data-page-node-id="tAKj2fjiNrwddnGqCxArvQ"><svg viewBox="0 0 24 24" data-page-node-id="jxz7O7CtBup4o32mfQEEiy"><path d="M4 4h16v16H4z" data-page-node-id="uGb3wfRZSxUM2pbmg2OEiZ"/><path d="M8 9h8M8 13h5" data-page-node-id="DJaWHf3WkzWRR67pOrByur"/></svg></i>
|
||||
<span class="menu-text" data-page-node-id="WXmF7gJBXMBQ1N3joLEvvO">我要请假</span></a></li>
|
||||
|
||||
<li class="menu-item" data-page-node-id="oXDXp7oyU7UPkudPnM4PM7"><a href="javascript:;" data-page-node-id="88dBWBfxk83WmuzU9NhydP">
|
||||
<i class="ph" data-page-node-id="eoMgHd82AW7JktRn4JwfdX"><svg viewBox="0 0 24 24" data-page-node-id="A1pcU27FJzu1AbUsqzIqVf"><rect x="4" y="4" width="16" height="16" rx="2" data-page-node-id="VFPTbMHfjLRJAQOZ7n241p"/><path d="M8 9h8M8 13h8M8 17h5" data-page-node-id="wzmPhFWvYKXC6IUcWeuRO8"/></svg></i>
|
||||
<span class="menu-text" data-page-node-id="a3Z2s2BpAL4LvBpJhKOjmT">我的请假</span></a></li>
|
||||
|
||||
<li class="menu-item" data-page-node-id="sIvEaACTM1PMS0H9JbWF5m"><a href="javascript:;" data-page-node-id="2h1QUpErVCz6qhjz8Nyoux">
|
||||
<i class="ph" data-page-node-id="OgOJGh7zrPBZgG9tsmZOW6"><svg viewBox="0 0 24 24" data-page-node-id="ezV60F6HRKYpYmke4FEZq2"><path d="M9 11l3 3 8-8" data-page-node-id="SNP8F4GeGQSIY2kNGdRyHn"/><path d="M20 12v7H4V5h11" data-page-node-id="dq9mg7vdSQgcOXNceWutCB"/></svg></i>
|
||||
<span class="menu-text" data-page-node-id="gumzYNtFnRuxWTwuV0bBFh">审批列表</span></a></li>
|
||||
|
||||
<li class="menu-item" data-page-node-id="PJGxm3sQlT5h2UdzgRA7Vw"><a href="javascript:;" data-page-node-id="F9YkIlNR3Qp4rMJZTuvIXc">
|
||||
<i class="ph" data-page-node-id="mnBQDL5W34ZEyRRiRNqJOV"><svg viewBox="0 0 24 24" data-page-node-id="ZoE3ViWjgzdRR8T3zTJ2af"><path d="M3 11l18-8-8 18-2-8z" data-page-node-id="oiSGCEHHQBql0vGsKrj42A"/></svg></i>
|
||||
<span class="menu-text" data-page-node-id="y0COJXTTgACj9foNSo38di">抄送列表</span></a></li>
|
||||
|
||||
<li class="menu-item" data-page-node-id="phsM2T0lQ3y8wW6msFYHnU"><a href="javascript:;" data-page-node-id="s0aPHxAKM91LdbE4Un0nsS">
|
||||
<i class="ph" data-page-node-id="JUYuXRqZXdeS1mcym3lpzh"><svg viewBox="0 0 24 24" data-page-node-id="gTYhHKmOcYRsUbfN9utE3C"><rect x="3" y="4" width="18" height="16" rx="2" data-page-node-id="mNnoNfYbDK8nNzoWytGRCw"/><path d="M3 9h18M8 13h8" data-page-node-id="8lPJSF8kH0RkWzOZzQi6iK"/></svg></i>
|
||||
<span class="menu-text" data-page-node-id="KppZsMkJhdN5dWPWO29B0p">全部请假</span></a></li>
|
||||
|
||||
<li class="menu-item" data-page-node-id="IEO5ewQPGUBEUVlLDH9vXl"><a href="javascript:;" data-page-node-id="M92YdKNLMUYwSLCj2f2rQb">
|
||||
<i class="ph" data-page-node-id="9CYJ7bW7QdVAgimyElAZMm"><svg viewBox="0 0 24 24" data-page-node-id="VscXa3xrz5TUYXp0wCBQ3d"><path d="M4 20l16-16" data-page-node-id="MnVc30edhOZoEiHoUvKHFF"/><circle cx="8" cy="8" r="3" data-page-node-id="DJwnbswxrv1OSVXnG2jcKY"/><path d="M14 14l4 4" data-page-node-id="jYqP7D6B7mblk6qMJ60h9i"/></svg></i>
|
||||
<span class="menu-text" data-page-node-id="eLZVIN95qaofw6MSBqDaa7">指派代课</span></a></li>
|
||||
|
||||
<li class="menu-group" data-page-node-id="V4si42iDLHug7ceQLQgEXC">
|
||||
<a href="javascript:;" data-page-node-id="ivZ7JBNQGaLqorfPkh9pwY">
|
||||
<i class="ph" data-page-node-id="iy6lh8HGmHmEJtZwosHjBt"><svg viewBox="0 0 24 24" data-page-node-id="5dDzVscj2TCMGXHrSDL6NV"><rect x="3" y="3" width="7" height="7" rx="1" data-page-node-id="npPqa6NxdIbfo7T40hByZ4"/><rect x="14" y="3" width="7" height="7" rx="1" data-page-node-id="hJv7jqMLxtFiXi1sL5WAeu"/><rect x="3" y="14" width="7" height="7" rx="1" data-page-node-id="injDikerKDZNRMEFc4jWDO"/><path d="M17.5 14v7M14 17.5h7" data-page-node-id="Kwe7pIYmWMI9bAf19SDWlL"/></svg></i>
|
||||
<span class="menu-text" data-page-node-id="25sokshNMmWhyWw8z8jR7i">流程管理</span>
|
||||
<i class="menu-arrow arrow-down" data-page-node-id="nrb1S6BJHKnjDiFD4Iq1qm"></i>
|
||||
</a>
|
||||
</li>
|
||||
<div class="child-item-wrap" style="max-height:none" data-page-node-id="jfzvi3DtJtGhTUrll4vwF3">
|
||||
<li class="child-item" data-page-node-id="0PTYj1y32gzIAEdfitLJkK"><a href="javascript:;" data-page-node-id="wQgGo2UjhG6xLhhHZ9PrUn"><i class="child-dot" data-page-node-id="wYtfFYu9fCvpWAh3i0tk8y"></i><span class="menu-text" data-page-node-id="3aYROZTDN0J8fwxPF30LoG">流程配置</span></a></li>
|
||||
<li class="child-item active" data-page-node-id="9ERi4TshqkBopLMjhOAA9W"><a href="javascript:;" data-page-node-id="AOLoECfunwtLmP3FOE2FjK"><i class="child-dot" data-page-node-id="u0KnAqW981QLBkOJosnHB8"></i><span class="menu-text" data-page-node-id="reRq6ZLvNdhZdjaQ5WjYyW">审批节点</span></a></li>
|
||||
<li class="child-item" data-page-node-id="4Ecn91IMUtiCrmka8QsGHe"><a href="javascript:;" data-page-node-id="RUD5TjLsDxuShMn19XQG50"><i class="child-dot" data-page-node-id="1g5xWpTHXOFdg85cllnN21"></i><span class="menu-text" data-page-node-id="VKd9Ch47JAHmLsJSbIVRSv">代理人设置</span></a></li>
|
||||
</div>
|
||||
|
||||
<li class="menu-item active" data-page-node-id="KtQC3tV7nO2Kx2Jsqr2wQQ"><a href="javascript:;" data-page-node-id="GpE9yU3keYBWFwBOQrxKca">
|
||||
<i class="ph" data-page-node-id="B4QP1pM6mUY8seklb9vkI8"><svg viewBox="0 0 24 24" data-page-node-id="9LDP9MlN4xsKtlJ3X5SSmH"><circle cx="12" cy="12" r="9" data-page-node-id="lcBfpbb9V1Nkg1AGUsoGa8"/><path d="M12 7v5l3 2" data-page-node-id="0iGRTaaf9ot1pCATgHoMjS"/></svg></i>
|
||||
<span class="menu-text" data-page-node-id="QkBL0DhBIlTzULvISU2PES">请假设置</span></a></li>
|
||||
|
||||
<li class="menu-item" data-page-node-id="cEQEBjCOQFrl7EuBTkYTKF"><a href="javascript:;" data-page-node-id="41CEH2TvHevASbeXtC6r5J">
|
||||
<i class="ph" data-page-node-id="w5o5sGUrMTchDYDE0KfFDC"><svg viewBox="0 0 24 24" data-page-node-id="4MZS8wqRTnOmEUjfPl2Oao"><rect x="3" y="4" width="18" height="17" rx="2" data-page-node-id="3rFDH9IV09tfkquR63MERi"/><path d="M8 2v4M16 2v4M3 9h18" data-page-node-id="XcRzuCbuHl5P6kZ5wwIg8o"/></svg></i>
|
||||
<span class="menu-text" data-page-node-id="kqQev70pCcovhIvosXodiI">时长日志</span></a></li>
|
||||
|
||||
<li class="menu-item" data-page-node-id="EfJ26ZtRvVERXkvYY8rfdZ"><a href="javascript:;" data-page-node-id="TZvSBwSVjLmMqJOqSA0jfD">
|
||||
<i class="ph" data-page-node-id="5hKf0Rhfvl4MhFxkcipyYo"><svg viewBox="0 0 24 24" data-page-node-id="pkrRH2F6yvoS5j7rGSfhl9"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2" data-page-node-id="c8lYmIueRvwMcNjKYKEt7T"/></svg></i>
|
||||
<span class="menu-text" data-page-node-id="BxJzeNPXAmGEiymbZ58zi8">统计分析</span></a></li>
|
||||
</ul>
|
||||
<div class="clear-box" data-page-node-id="jtANDCzzW5qwaFn5cWfHC0"></div>
|
||||
</div>
|
||||
|
||||
<div class="stage" data-page-node-id="uhFczKbBxjardMiksRvArY">
|
||||
<h2 data-page-node-id="CjgddVGOLTFAwLRgqSi0rk">主内容区（216px 偏移）</h2>
|
||||
<p data-page-node-id="CY3hnDE5BHZ4lBhC7UDL02">
|
||||
<span class="tag" data-page-node-id="iTjNhLrL0yQJ4eZWinfFFE">216px 侧栏</span><span class="tag" data-page-node-id="KCobNeHbQht7wOmHGEJKzh">44px 行高</span><span class="tag" data-page-node-id="Z0VUB03L72jPcYx3H6Cnm9">8px 圆角</span>
|
||||
<span class="tag" data-page-node-id="KtZgxywfpuBBocYHFkRQFI">12px 侧边留白</span><span class="tag" data-page-node-id="GCCOb5yw34rKBF5U5w1H44">胶囊选中态</span><span class="tag" data-page-node-id="hM2VNDxm7XXYesXxQtiXAK">左侧指示条</span>
|
||||
<span class="tag" data-page-node-id="NeMaYeSBIJMcHWp8TcIYqV">图标随状态变色</span><span class="tag" data-page-node-id="NphJ4aZFHCEajbIQGA0Zyw">子级圆点层级</span>
|
||||
</p>
|
||||
<p style="margin-top:14px;color:#98a2b3" data-page-node-id="hCu6JMbkjWLPQAI8lt7fcB">
|
||||
鼠标悬停任一菜单项可查看 hover 态（浅灰底 #f5f7fb + 图标转品牌蓝）。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user