164 lines
8.4 KiB
HTML
164 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
|
<link href="/jscss/style.css" rel="stylesheet" type="text/css" />
|
|
<script type="text/javascript" charset="utf-8" src="/jscss/theme.js"></script>
|
|
<style>
|
|
.container>div {
|
|
padding: 1em;
|
|
background: var(--bg1);
|
|
margin-bottom: 1em;
|
|
border: 1px solid var(--bg5);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
|
|
<blockquote>按钮样式</blockquote>
|
|
<div>
|
|
<button class='btn'>按钮</button>
|
|
<button class='btn dag'>dag按钮</button>
|
|
<button class='btn def'>def按钮</button>
|
|
<button class='btn warn'>warn/imp按钮</button>
|
|
<button class='btn succ'>succ按钮</button>
|
|
<button class='btn loading'>按钮loading</button>
|
|
<button class='btn' disabled onclick="alert('aaa')">按钮disabled</button>
|
|
</div>
|
|
|
|
<blockquote>自定尺寸按钮</blockquote>
|
|
<div>
|
|
<button class='btn xs'>按钮 xs</button>
|
|
<button class='btn smmm'>按钮 smmm</button>
|
|
<button class='btn smm'>按钮 smm</button>
|
|
<button class='btn sm'>按钮 sm</button>
|
|
<button class='btn'>按钮</button>
|
|
<button class='btn lg'>按钮 lg</button>
|
|
<button class='btn lgg'>按钮 lgg</button>
|
|
</div>
|
|
|
|
<blockquote>图标按钮</blockquote>
|
|
<div>
|
|
<button class='btn svg'><svg t="1752338490069" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1325" width="200" height="200">
|
|
<path d="M513.3824 515.328m-445.4912 0a445.4912 445.4912 0 1 0 890.9824 0 445.4912 445.4912 0 1 0-890.9824 0Z" fill="#EBF3FF" p-id="1326"></path>
|
|
<path d="M649.6256 608.1536L558.08 686.8992a67.3792 67.3792 0 0 1-88.1152-0.3072c-27.648-24.1152-63.0784-55.0912-89.856-78.7456-94.4128 14.2848-166.7584 43.2128-166.7584 76.8 0 47.5136 138.8032 105.3696 300.544 105.3696s300.5952-57.856 300.5952-105.3696c-0.1536-33.3312-71.5264-62.1056-164.864-76.4928z" fill="#5097FF" p-id="1327"></path>
|
|
<path d="M720.7936 389.12a207.2064 207.2064 0 0 0-414.2592 9.0112c0 92.16 75.5712 165.7344 151.9616 233.8304a84.8896 84.8896 0 0 0 112.2304 0.5632C653.9776 559.9744 725.4528 486.4 720.7936 389.12z m-207.0528 131.3792a124.3136 124.3136 0 1 1 124.3648-124.3136 124.4672 124.4672 0 0 1-124.3648 124.16z" fill="#5E9FFF" p-id="1328"></path>
|
|
<path d="M513.7408 310.3232a85.7088 85.7088 0 1 0 85.7088 85.7088 85.8112 85.8112 0 0 0-85.7088-85.7088z" fill="#73AAFF" p-id="1329"></path>
|
|
<path d="M687.872 615.1168c-12.2368-2.56-24.9856-5.12-38.2464-6.9632L583.68 664.7808a106.5472 106.5472 0 0 1-139.52-0.6144c-21.8624-19.0976-45.2096-39.5264-64.2048-56.32-94.4128 14.2848-166.7584 43.2128-166.7584 76.8 0 32.0512 63.1808 68.8128 153.9584 89.344a430.7456 430.7456 0 0 0 320.7168-158.8736z" fill="#5E9FFF" p-id="1330"></path>
|
|
<path d="M693.248 295.2704a206.8992 206.8992 0 0 0-386.7136 102.7072c0 73.5232 48.2816 135.3728 106.7008 192.0512a493.2608 493.2608 0 0 0 122.1632-71.68 124.3136 124.3136 0 1 1 102.7072-122.4192c0 3.84 0 7.5776-0.5632 11.3152a487.3216 487.3216 0 0 0 55.7056-111.9744z" fill="#73AAFF" p-id="1331"></path>
|
|
<path d="M502.1184 311.2448a85.7088 85.7088 0 0 0-71.2192 63.3344 488.5504 488.5504 0 0 0 71.2192-63.3344z" fill="#86B4FF" p-id="1332"></path>
|
|
<path d="M389.4272 396.032a124.4672 124.4672 0 0 1 124.3136-124.3136 122.88 122.88 0 0 1 20.0192 1.6384A489.984 489.984 0 0 0 578.56 201.2672a201.1648 201.1648 0 0 0-56.32-10.24 207.2576 207.2576 0 0 0-215.7056 206.9504 168.96 168.96 0 0 0 5.12 40.5504 488.0896 488.0896 0 0 0 78.08-36.9152 40.3456 40.3456 0 0 1-0.3072-5.5808z" fill="#86B4FF" p-id="1333"></path>
|
|
</svg></button>
|
|
</div>
|
|
|
|
<blockquote>span标签</blockquote>
|
|
<div>
|
|
普通文字
|
|
<span class="def">def</span>
|
|
<span class="dag">dag</span>
|
|
<span class="imp">imp</span>
|
|
<span class="warn">warn</span>
|
|
<span class="man">man</span>
|
|
普通文字
|
|
</div>
|
|
|
|
<br /><br /><br /><br />
|
|
<br /><br /><br /><br />
|
|
<br /><br /><br /><br />
|
|
<br /><br /><br /><br />
|
|
<br /><br /><br /><br />
|
|
<br /><br /><br /><br />
|
|
<blockquote>下拉按钮</blockquote>
|
|
<div class="flex" style="justify-content: space-between;">
|
|
<div>
|
|
<button class="btn btn-menu" direction="lr">左右弹出
|
|
<span class="caret"></span>
|
|
<ul class="ciy-popmenu">
|
|
<li><a href="#">菜单1</a></li>
|
|
<li><a href="#">菜单2</a></li>
|
|
<li><a href="#">菜单3</a></li>
|
|
<li><a href="#">菜单4</a></li>
|
|
<li><a href="#">菜单5</a></li>
|
|
<li><a href="#">菜单6</a></li>
|
|
<li><a href="#">菜单7</a></li>
|
|
<li><a href="#">菜单8</a></li>
|
|
<li><a href="#">菜单9菜单9菜单9菜单9</a></li>
|
|
</ul>
|
|
</button>
|
|
<br/>
|
|
<button class="btn btn-menu">上下弹出
|
|
<span class="caret"></span>
|
|
<ul class="ciy-popmenu">
|
|
<li><a href="#">菜单1</a></li>
|
|
<li><a href="#">菜单2</a></li>
|
|
<li><a href="#">菜单3</a></li>
|
|
<li><a href="#">菜单4</a></li>
|
|
<li><a href="#">菜单5</a></li>
|
|
<li><a href="#">菜单6</a></li>
|
|
<li><a href="#">菜单7</a></li>
|
|
<li><a href="#">菜单8</a></li>
|
|
<li><a href="#">菜单9菜单9菜单9菜单9</a></li>
|
|
</ul>
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-menu" direction="lr">左右弹出
|
|
<span class="caret"></span>
|
|
<ul class="ciy-popmenu">
|
|
<li><a href="#">菜单1</a></li>
|
|
<li><a href="#">菜单2</a></li>
|
|
<li><a href="#">菜单3</a></li>
|
|
<li><a href="#">菜单4</a></li>
|
|
<li><a href="#">菜单5</a></li>
|
|
<li><a href="#">菜单6</a></li>
|
|
<li><a href="#">菜单7</a></li>
|
|
<li><a href="#">菜单8</a></li>
|
|
<li><a href="#">菜单9菜单9菜单9菜单9</a></li>
|
|
</ul>
|
|
</button>
|
|
<br/>
|
|
<button class="btn btn-menu">上下弹出
|
|
<span class="caret"></span>
|
|
<ul class="ciy-popmenu">
|
|
<li><a href="#">菜单1</a></li>
|
|
<li><a href="#">菜单2</a></li>
|
|
<li><a href="#">菜单3</a></li>
|
|
<li><a href="#">菜单4</a></li>
|
|
<li><a href="#">菜单5</a></li>
|
|
<li><a href="#">菜单6</a></li>
|
|
<li><a href="#">菜单7</a></li>
|
|
<li><a href="#">菜单8</a></li>
|
|
<li><a href="#">菜单9菜单9菜单9菜单9</a></li>
|
|
</ul>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<br /><br /><br /><br />
|
|
<br /><br /><br /><br />
|
|
<br /><br /><br /><br />
|
|
<br /><br /><br /><br />
|
|
<br /><br /><br /><br />
|
|
<br /><br /><br /><br />
|
|
<br /><br /><br /><br />
|
|
<br /><br /><br /><br />
|
|
<br /><br /><br /><br />
|
|
<br /><br /><br /><br />
|
|
<br /><br /><br /><br />
|
|
<br /><br /><br /><br />
|
|
</div>
|
|
|
|
<script type="text/javascript" src="/jscss/ciy.js"></script>
|
|
<script type="text/javascript" src="../../common.js"></script>
|
|
<script type="text/javascript">
|
|
'use strict';
|
|
ciyfn.dropmenu('.btn-menu');
|
|
</script>
|
|
</body>
|
|
|
|
</html> |