| <style> .editors-wrap { font-family: 'Noto Sans TC','Microsoft JhengHei',sans-serif; padding: 20px 0; color: #333; } .editors-header { border-left: 4px solid #e74c3c; padding-left: 16px; margin-bottom: 40px; } .editors-header h2 { font-size: 22px; font-weight: 500; margin-bottom: 4px; color: #333; } .editors-header p { font-size: 14px; color: #888; } .org-wrap { position: relative; width: 620px; margin: 0 auto; height: 560px; } .enode { position: absolute; display: flex; flex-direction: column; align-items: center; background: #fff; border: 1px solid #ddd; border-radius: 12px; padding: 12px 14px; text-align: center; text-decoration: none; transition: border-color .15s; } .enode:hover { border-color: #e74c3c; text-decoration: none; } .enode.chief { border-color: #e74c3c; background: #FCEBEB; } .eavatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; margin: 0 auto 6px; } .eavatar.sm { width: 36px; height: 36px; font-size: 12px; } .av-red { background: #F09595; color: #501313; } .av-blue { background: #85B7EB; color: #042C53; } .av-teal { background: #5DCAA5; color: #04342C; } .av-amber { background: #EF9F27; color: #412402; } .av-purple { background: #AFA9EC; color: #26215C; } .ename { font-size: 13px; font-weight: 500; margin-bottom: 2px; color: #333; white-space: nowrap; } .erole { font-size: 11px; color: #888; margin-bottom: 6px; white-space: nowrap; } .elink { font-size: 11px; color: #e74c3c; border: 1px solid #e74c3c; padding: 2px 8px; border-radius: 20px; display: inline-block; } </style> <div class="editors-wrap"> <div class="editors-header"> <h2>編輯群組織架構</h2> <p>小老婆汽機車資訊網 · 專業編輯群</p> </div> <div class="org-wrap"> <svg style="position:absolute;top:0;left:0;width:100%;height:560px;overflow:visible;pointer-events:none;"> <line x1="310" y1="110" x2="310" y2="140" stroke="#ccc" stroke-width="1"/> <line x1="100" y1="140" x2="520" y2="140" stroke="#ccc" stroke-width="1"/> <line x1="100" y1="140" x2="100" y2="165" stroke="#ccc" stroke-width="1"/> <line x1="310" y1="140" x2="310" y2="165" stroke="#ccc" stroke-width="1"/> <line x1="520" y1="140" x2="520" y2="320" stroke="#ccc" stroke-width="1"/> <line x1="455" y1="320" x2="585" y2="320" stroke="#ccc" stroke-width="1"/> <line x1="455" y1="320" x2="455" y2="345" stroke="#ccc" stroke-width="1"/> <line x1="585" y1="320" x2="585" y2="345" stroke="#ccc" stroke-width="1"/> <line x1="100" y1="280" x2="100" y2="310" stroke="#ccc" stroke-width="1"/> <line x1="40" y1="310" x2="160" y2="310" stroke="#ccc" stroke-width="1"/> <line x1="40" y1="310" x2="40" y2="340" stroke="#ccc" stroke-width="1"/> <line x1="160" y1="310" x2="160" y2="340" stroke="#ccc" stroke-width="1"/> </svg> <a href="https://forum.jorsindo.com/article-12062-1.html" class="enode chief" style="left:230px;top:0;width:160px;"> <div class="eavatar av-red">魔</div> <div class="ename">大魔王 singer</div> <div class="erole">總編輯</div> <span class="elink">介紹頁</span> </a> <a href="https://forum.jorsindo.com/article-12067-1.html" class="enode" style="left:30px;top:165px;width:140px;"> <div class="eavatar av-blue">C</div> <div class="ename">Cubman</div> <div class="erole">機車線主編</div> <span class="elink">介紹頁</span> </a> <div class="enode" style="left:230px;top:165px;width:160px;cursor:default;"> <div class="eavatar av-purple">Z</div> <div class="ename">Zloucky</div> <div class="erole">影音部主編</div> <span class="elink" style="visibility:hidden;">介紹頁</span> </div> <a href="https://forum.jorsindo.com/article-12063-1.html" class="enode" style="left:0px;top:340px;width:118px;"> <div class="eavatar sm av-teal">陳</div> <div class="ename" style="font-size:12px;">陳拓余</div> <div class="erole">機車線資深編輯</div> <span class="elink">介紹頁</span> </a> <a href="https://forum.jorsindo.com/article-12066-1.html" class="enode" style="left:126px;top:340px;width:110px;"> <div class="eavatar sm av-teal">吳</div> <div class="ename" style="font-size:12px;">吳振欣</div> <div class="erole">機車線編輯</div> <span class="elink">介紹頁</span> </a> <a href="https://forum.jorsindo.com/article-12065-1.html" class="enode" style="left:420px;top:345px;width:110px;"> <div class="eavatar sm av-amber">歐</div> <div class="ename" style="font-size:12px;">歐東哲</div> <div class="erole">汽車線編輯</div> <span class="elink">介紹頁</span> </a> <a href="https://forum.jorsindo.com/article-12064-1.html" class="enode" style="left:540px;top:345px;width:110px;"> <div class="eavatar sm av-blue">R</div> <div class="ename" style="font-size:12px;">Rosswang</div> <div class="erole">科技線編輯</div> <span class="elink">介紹頁</span> </a> </div> </div> |
