9I制作厂

鏁寸悊 hsck.css 鏃讹紝鍙�浠ユ妸甯歌�佺晫闈㈡牱寮忔寜缁勪欢褰掔被锛氱粺涓�鎸夐挳銆佸崱鐗囥�佽〃鏍间笌鎻愮ず妗嗙殑瑙嗚�夎�勫垯锛屽悗缁�缁存姢鏃朵篃鏇村�规槗鎵惧埌瀵瑰簲浣嶇疆銆備笅闈㈢洏鐐� 8 缁勫彲鐩存帴鏀惧叆 hsck.css 鐨� CSS 鏍峰紡锛岄�夋嫨鍣ㄧ粺涓�浣跨敤 .hsck- 鍓嶇紑锛屽噺灏戜笌椤圭洰鐜版湁绫诲悕鍐茬獊銆傜ず渚嬩娇鐢ㄥ父瑙佺殑娴呰壊鐣岄溃閰嶈壊锛屽彲鎸夌珯镣逛富棰樿皟鏁撮�滆壊鍜屽溛丕掋��

1. 鎸夐挳锛氢富鎿崭綔涓庢�¤�佹搷浣�

   鎸夐挳浠ヨ摑鑹蹭富鎸夐挳鍜屾祬鐏版�℃寜閽�鍖哄垎鎿崭綔浼樺厛绾с赌傜粺涓赌璁剧疆鍐呰竟璺濄赌佸浑瑙掑拰杩囨浮鏁堟灉鍚庯紝鍚屼竴缁勬寜閽�鍦ㄨ〃鍗曘�佸脊绐楀拰宸ュ叿鏍忎腑鏇村岗璋冿紱镇�鍋滄椂棰滆壊鐣ユ繁锛岄敭鐩樿仛缃ｆ椂涔熶繚鐣欐竻鏅扮殑杞�寤撱赌�

   .hsck-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 9px 16px;
     border: 1px solid #2563eb;
     border-radius: 6px;
     background: #2563eb;
     color: #fff;
     cursor: pointer;
     transition: background .2s, box-shadow .2s;
   }
   .hsck-btn:hover { background: #1d4ed8; }
   .hsck-btn:focus-visible { outline: 3px solid #bfdbfe; }
   .hsck-btn--muted { border-color: #d1d5db; background: #f3f4f6; color: #374151; }

2. 鍗＄墖锛氬垎闅斾俊鎭�鍖哄潡

   鍗＄墖閫傚悎鎵胯浇鎽樿�併�佸晢鍝佷俊鎭�鎴栧垪琛ㄤ腑鐨勫崟鏉¤�板綍銆傛祬鑹叉弿杈圭敤浜庣晫瀹氬唴瀹硅寖鍥达紝鏌斿拰闃村奖鎻愪緵杞诲井灞傛�★紱鎮�锅沧椂鍙�鎻愬崌闃村奖锛屼笉澶у箙绉诲姩鍏冪礌锛岄伩鍏嶅崱鐗囧瘑闆嗘帓鍒楁椂浜х敓璺冲姩鎰熴��

   .hsck-card {
     padding: 20px;
     border: 1px solid #e5e7eb;
     border-radius: 10px;
     background: #fff;
     box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
     transition: box-shadow .2s;
   }
   .hsck-card:hover {
     box-shadow: 0 8px 20px rgba(15, 23, 42, .10);
   }
   .hsck-card__title { margin: 0 0 10px; color: #111827; font-size: 18px; }
   .hsck-card__body { color: #4b5563; line-height: 1.7; }

3. 鏍囩�撅細鏍囧嚭鐘陡鋪涓庡垎绫�

   灏忔爣绛惧父鐢ㄤ簬鏄剧ず鍒嗙被銆佽繘搴︽垨鍐呭�圭姸娑膩愣膫鍩虹《逆牱宸拈噰鐢ㄧ揣鍑戠殑瓒义泭褰㈠�栬�傦紝鍐嶉�氳绷淇�楗扮被琛ㄨ揪涓嶅悓璇�涔夈赌傛爣绛炬枃瀛楀敖閲忕亩鐭�锛岄�滆壊涓庢枃瀛椾繚鎸佽冻澶熷弽宸�锛岄伩鍏嶅彧鐢ㄩ�滆壊浼犻赌掗吨瑕佺姸镐併赌�

   .hsck-tag {
     display: inline-block;
     padding: 3px 9px;
     border-radius: 999px;
     background: #eff6ff;
     color: #1d4ed8;
     font-size: 12px;
     line-height: 1.6;
   }
   .hsck-tag--success { background: #ecfdf5; color: #047857; }
   .hsck-tag--warning { background: #fffbeb; color: #b45309; }
   .hsck-tag--neutral { background: #f3f4f6; color: #4b5563; }

4. 琛ㄦ牸锛氭竻鏅板憟鐜拌�屽垪鏁版嵁

   琛ㄦ牸閫氳绷娴呰壊琛ㄥご銆佽�岄棿鍒嗛殧绾垮拰浜ゆ浛搴曡壊鏀瑰杽娴忚�堜綋楠屻赌傚�栧眰瀹瑰櫒澶勭悊缃卞睆婧㈠嚭锛岃〃鏍剂船韬�淇濇寔链赌灏忓�藉害锛岄伩鍏嶅垪鍐呭�硅��鎸ゆ垚闅句互闃呰�荤殑缃辨潯愣膫鐢ㄤ簬鏁版嵁杓╁�氱殑鍖哄烟鏃讹紝鍙�璁╃敤鎴锋í鍚戞粴鍔ㄦ煡鐪嬪畬鏁村瓧娈点��

   .hsck-table-wrap { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 8px; }
   .hsck-table { width: 100%; min-width: 560px; border-collapse: collapse; }
   .hsck-table th, .hsck-table td {
     padding: 12px 14px;
     border-bottom: 1px solid #e5e7eb;
     text-align: left;
   }
   .hsck-table th { background: #f9fafb; color: #374151; font-weight: 600; }
   .hsck-table tbody tr:nth-child(even) { background: #fcfcfd; }

5. 琛ㄥ崟锛氱粺涓赌杈撳叆妗嗙姸镐�

   杈撳叆妗嗛渶瑕佸悓鏃惰�嗙洊榛樿�ゃ赌佽仛鐒﹀拰绂佺敤鐘舵赌併赌傜粺涓赌楂樺害涓庤竟妗嗛�滆壊锛屽彲浠ヨ�╂枃链�妗嗐�侀赌夋嫨妗嗙瓑鎺т欢鏇村岗璋冿紱鑱氱剑鏃堕噰鐢ㄨ摑鑹茶竟妗嗗拰澶栫幆鎻愮ず褰撳墠杈撳叆浣嶇疆锛岀�佺敤鐘陡鋪鍒欓櫿附庡�规瘮搴﹀苟鏀瑰彉榧犳爣鎸囬拡銆�

   .hsck-field {
     width: 100%;
     box-sizing: border-box;
     padding: 10px 12px;
     border: 1px solid #d1d5db;
     border-radius: 6px;
     background: #fff;
     color: #111827;
     font: inherit;
   }
   .hsck-field:focus { border-color: #2563eb; outline: 3px solid #dbeafe; }
   .hsck-field:disabled { background: #f3f4f6; color: #9ca3af; cursor: not-allowed; }

6. 鎻愮ず妗嗭细绐佸嚭鍙嶉�堜俊鎭�

   鎻愮ず妗嗛赌傚悎灞旷ず鎿崭綔鎴愬姛銆佹敞鎰忎簨椤规垨閿欒��铡熷洜銆傜敤杈规�嗗拰娴呭簳鑹查厤鍚堟爣棰樸�佹�ｆ枃锛屽彲浠ヨ�╁弽棣堝尯鍩熶粠鏅�槎臍娈佃惤涓�鍖哄垎鍑烘潵锛涗笉鍚岀姸镐佹部鐢ㄥ悓涓赌缁撴瀯锛屼粎鏇挎崲棰滆壊锛屼究浜庣淮鎶ゅ拰澶嶇敤銆�

   .hsck-alert {
     padding: 14px 16px;
     border: 1px solid #bfdbfe;
     border-radius: 8px;
     background: #eff6ff;
     color: #1e3a8a;
     line-height: 1.6;
   }
   .hsck-alert__title { margin: 0 0 4px; font-weight: 700; }
   .hsck-alert--success { border-color: #a7f3d0; background: #ecfdf5; color: #065f46; }
   .hsck-alert--error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }

7. 鍒嗛〉锛氭爣璁板綋鍓嶆祻瑙堜綅缃�

   鍒嗛〉鎺т欢鐢遍〉镰併赌佸墠鍚庡垏鎹㈤」缁勬垚銆傚浐瀹氭寜閽�灏哄�镐究浜庣偣鍑伙紝褰撳墠椤典娇鐢ㄥ己璋冭壊锛屽叾浣欓〉缁存寔涓�娑魔澶栬�傦紱绂佺敤椤归檷浣庨赌忔槑搴﹀苟鍏抽棴镣瑰嚮鎵嬪娍锛岄伩鍏嶇敤鎴疯��浠ヤ负杩樿兘缁х画缈婚〉銆�

   .hsck-pagination { display: flex; flex-wrap: wrap; gap: 6px; }
   .hsck-page {
     min-width: 36px;
     padding: 7px 10px;
     border: 1px solid #d1d5db;
     border-radius: 6px;
     background: #fff;
     color: #374151;
     text-align: center;
   }
   .hsck-page.is-active { border-color: #2563eb; background: #2563eb; color: #fff; }
   .hsck-page:disabled { opacity: .45; cursor: not-allowed; }

8. 瀵艰埅鏍忥细鍖哄垎褰撳墠鏍忕洰

   瀵艰埅椤逛繚鎸佺浉鍚岀殑闂磋窛鍜岀偣鍑诲尯鍩燂紝榛樿�ゆ枃瀛楅噰鐢ㄦ繁鐏拌壊锛屨颥鍋滀笌褰撳墠鏍忕洰缁熶付匿娇鐢ㄤ富棰樿壊愣膫搴曢儴杈规�嗙敤浜庢爣璁伴赌変腑椤癸紝涓崭緷璧栧瓧浣撳姞绮楀埗閫犱綅缃�鍙樺寲锛屽洜姝ゅ垏鎹㈡爮鐩�鏃跺竷灞赌鏇寸ǔ瀹氥赌�

   .hsck-nav { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid #e5e7eb; }
   .hsck-nav__item {
     padding: 11px 14px;
     border-bottom: 2px solid transparent;
     color: #4b5563;
     text-decoration: none;
   }
   .hsck-nav__item:hover { color: #1d4ed8; }
   .hsck-nav__item.is-current { border-bottom-color: #2563eb; color: #1d4ed8; font-weight: 600; }

鏁寸悊 hsck.css 鏃剁殑缁勫悎鏂瑰紡

杩欑粍鏍峰紡鎸夋寜閽�銆佸崱鐗囥�佹爣绛俱�佽〃鏍笺�佽〃鍗曘�佹彁绀烘�嗐�佸垎椤靛拰瀵艰埅鏍忔帓鍒楋紝閫傚悎鍒嗗埆鏀惧叆 hsck.css 鐨勫�瑰簲鍖哄潡銆傚疄闄呮帴鍏ユ椂锛屽厛妫�鏌ラ〉闈㈡槸鍚﹀凡鏈夊悓鍚嶈�勫垯锛屽啀閫愪釜娣诲姞闇�瑕佺殑缁勪欢锛涗緥濡傚唴瀹瑰垪琛ㄥ彲浠ョ粍鍚堝崱鐗囦笌鏍囩�撅紝绠＄悊椤靛彲浠ョ粍鍚堣〃鏍笺�佸垎椤靛拰鎸夐挳锛屽弽棣堣〃鍗曞垯鍙�浣跨敤杈撳叆妗嗕笌鎻愮ず妗嗐��

棰滆壊鍙�浠ラ泦涓�鏇挎崲涓洪」鐩�涓昏壊锛屽渾瑙掑拰闂磋窛涔熷彲鎸夋暣浣撹�嗚�夌粺涓�璋冩暣銆傝嫢闇�瑕佹殫鑹蹭富棰橈紝鍙�涓虹粍浠舵坊鍔犱富棰樹綔鐢ㄥ煙锛屽啀瑕嗙洊鑳屾櫙銆佹枃瀛楀拰杈规�嗛�滆壊锛涗繚鐣欑粍浠剁被鍚嶄笉鍙橈紝鑳藉噺灏戦〉闈㈢粨鏋勭殑鏀瑰姩銆傝繖鏍锋暣鐞嗗悗锛宧sck.css 涓嶅彧鏄�闆舵暎瑙勫垯鐨勯泦鍚堬紝涔熻兘鎴愪负涓�濂楁柟渚挎墿灞曠殑缃戦〉缁勪欢鏍峰紡娓呭崟銆�