init

design/src-web/shared/index.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=1920, initial-scale=1">
+  <base href="../../">
+  <title>shared component catalog</title>
+  <link rel="stylesheet" href="src-web/index.css">
+</head>
+<body>
+  <!-- Root pages load individual templates through index.html#fragment references. -->
+  <template id="glyphs">
+<div class="panel">
+          <div class="panel-heading"><div class="panel-title">Native glyph assets</div><div class="spec-chip asset">1× / 2× RASTER</div></div>
+          <div class="panel-body">
+            <div class="sample-grid cols-3">
+              <div class="sample-cell" style="text-align:center"><img class="pixel asset-2x glyph-select-2x" src="src-web/shared/img/sprite_interface.NPK/windowcommon_2x.img/0.PNG"><div class="sample-label" style="margin:7px 0 0">Select arrow · 2x</div></div>
+              <div class="sample-cell" style="text-align:center"><img class="pixel asset-2x glyph-check-2x" src="src-web/shared/img/sprite_interface.NPK/windowcommon_2x.img/4.PNG" alt="Check"><div class="sample-label" style="margin:7px 0 0">Check</div></div>
+              <div class="sample-cell" style="text-align:center"><img class="pixel asset-2x glyph-close-2x" src="src-web/shared/img/sprite_interface.NPK/windowcommon_2x.img/6.PNG"><div class="sample-label" style="margin:7px 0 0">Close · 2x</div></div>
+              <div class="sample-cell" style="text-align:center"><img class="pixel" src="src-web/shared/img/sprite_interface.NPK/windowcommon.chn.img/561.PNG"><div class="sample-label" style="margin:7px 0 0">Expand</div></div>
+              <div class="sample-cell" style="text-align:center"><img class="pixel" src="src-web/shared/img/sprite_interface.NPK/windowcommon.chn.img/301.PNG"><div class="sample-label" style="margin:7px 0 0">Notice</div></div>
+              <div class="sample-cell" style="text-align:center"><img class="pixel" src="src-web/shared/img/sprite_interface2_option.NPK/option.img/88.PNG"><div class="sample-label" style="margin:7px 0 0">Settings</div></div>
+            </div>
+            <div class="divider"></div>
+            <ul class="callout-list">
+              <li>图标保持像素网格和原生比例</li>
+              <li>颜色状态不通过 CSS 滤镜伪造</li>
+              <li>对应状态素材缺失时才使用 Derived 规则</li>
+            </ul>
+          </div>
+        </div>
+</template>
+  <script>
+    document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
+  </script>
+</body>
+</html>