generator-minxing
Version:
generator for creating minxing web app.
301 lines (296 loc) • 15.2 kB
HTML
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>MxUI</title>
<link rel="stylesheet" href="../../styles/mx.css"/>
<link rel="stylesheet" href="../../styles/example.css"/>
<style>
.page{
opacity: 1;
}
.page.home .font{
font-size: 27px;
}
.reset{
width: 100%;
text-align: left;
resize: none;
margin-top: 8px;
background: #fff;
outline: none;
font-size: 14px;
padding: 12px 0 0;
font-family: Monaco,Menlo,Consolas,"Courier New",FontAwesome,monospace;
}
pre{
padding: 10px 20px;
background: #fff;
border-radius: 4px;
border:1px solid #eee;
margin:10px 0;
font-family: Monaco,Menlo,Consolas,"Courier New",FontAwesome,monospace;
white-space: pre-wrap;
max-width: 100%;
word-wrap : break-word;
}
code{
font-family: Monaco,Menlo,Consolas,"Courier New",FontAwesome,monospace;
}
/* .pre{
overflow-y: scroll;
max-height: 10rem;
}*/
.mx-parent{
position: relative;
display: block;
}
.mx-copy{
position: absolute;
right: 0;
display: block;
font-size: 12px;
text-align: right;
padding: 5px 8px;
background-color: #fff;
color: #767676;
border-radius: 4px;
border: 1px solid #elele8;
top: 11px;
left: 0px;
}
.mx-copy-t{
top: 0;
}
.mx-copy-t6{
top: 6px;
}
.mx-copy:hover{
background-color: #563d7c;
}
</style>
</head>
<body>
<div class="page">
<div class="page__hd">
<h1 class="page__title">List</h1>
<p class="page__desc">列表</p>
</div>
<div class="page__bd">
<div class="mx-cells__title">带说明的列表项</div>
<div class="mx-cells">
<div class="mx-cell">
<div class="mx-cell__bd">
<p>标题文字</p>
</div>
<div class="mx-cell__ft">说明文字</div>
</div>
<div class="mx-cell mx-cell_swiped">
<div class="mx-cell__bd" >
<div class="mx-cell">
<div class="mx-cell__bd">
<p>标题文字</p>
</div>
<div class="mx-cell__ft">说明文字</div>
</div>
</div>
</div>
</div>
<div class="mx-parent">
<button class="mx-copy">copy</button>
</div>
<pre class="pre">
<div class="mx-cells__title">带说明的列表项</div>
<div class="mx-cells">
<div class="mx-cell">
<div class="mx-cell__bd">
<p>标题文字</p>
</div>
<div class="mx-cell__ft">说明文字</div>
</div>
<div class="mx-cell mx-cell_swiped">
<div class="mx-cell__bd" >
<div class="mx-cell">
<div class="mx-cell__bd">
<p>标题文字</p>
</div>
<div class="mx-cell__ft">说明文字</div>
</div>
</div>
</div>
</div>
</pre>
<div class="mx-cells__title">带图标、说明的列表项</div>
<div class="mx-cells">
<div class="mx-cell">
<div class="mx-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="mx-cell__bd">
<p>标题文字</p>
</div>
<div class="mx-cell__ft">说明文字</div>
</div>
<div class="mx-cell">
<div class="mx-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="mx-cell__bd">
<p>标题文字</p>
</div>
<div class="mx-cell__ft">说明文字</div>
</div>
</div>
<div class="mx-parent">
<button class="mx-copy">copy</button>
</div>
<pre class="pre">
<div class="mx-cells__title">带图标、说明的列表项</div>
<div class="mx-cells">
<div class="mx-cell">
<div class="mx-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="mx-cell__bd">
<p>标题文字</p>
</div>
<div class="mx-cell__ft">说明文字</div>
</div>
<div class="mx-cell">
<div class="mx-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="mx-cell__bd">
<p>标题文字</p>
</div>
<div class="mx-cell__ft">说明文字</div>
</div>
</div>
</pre>
<div class="mx-cells__title">带跳转的列表项</div>
<div class="mx-cells">
<a class="mx-cell mx-cell_access" href="javascript:;">
<div class="mx-cell__bd">
<p>cell standard</p>
</div>
<div class="mx-cell__ft">
</div>
</a>
<a class="mx-cell mx-cell_access" href="javascript:;">
<div class="mx-cell__bd">
<p>cell standard</p>
</div>
<div class="mx-cell__ft">
</div>
</a>
</div>
<div class="mx-parent">
<button class="mx-copy">copy</button>
</div>
<pre class="pre">
<div class="mx-cells__title">带跳转的列表项</div>
<div class="mx-cells">
<a class="mx-cell mx-cell_access" href="javascript:;">
<div class="mx-cell__bd">
<p>cell standard</p>
</div>
<div class="mx-cell__ft">
</div>
</a>
<a class="mx-cell mx-cell_access" href="javascript:;">
<div class="mx-cell__bd">
<p>cell standard</p>
</div>
<div class="mx-cell__ft">
</div>
</a>
</div>
</pre>
<div class="mx-cells__title">带说明、跳转的列表项</div>
<div class="mx-cells">
<a class="mx-cell mx-cell_access" href="javascript:;">
<div class="mx-cell__bd">
<p>cell standard</p>
</div>
<div class="mx-cell__ft">说明文字</div>
</a>
<a class="mx-cell mx-cell_access" href="javascript:;">
<div class="mx-cell__bd">
<p>cell standard</p>
</div>
<div class="mx-cell__ft">说明文字</div>
</a>
</div>
<div class="mx-parent">
<button class="mx-copy">copy</button>
</div>
<pre class="pre">
<div class="mx-cells__title">带说明、跳转的列表项</div>
<div class="mx-cells">
<a class="mx-cell mx-cell_access" href="javascript:;">
<div class="mx-cell__bd">
<p>cell standard</p>
</div>
<div class="mx-cell__ft">说明文字</div>
</a>
<a class="mx-cell mx-cell_access" href="javascript:;">
<div class="mx-cell__bd">
<p>cell standard</p>
</div>
<div class="mx-cell__ft">说明文字</div>
</a>
</div>
</pre>
<div class="mx-cells__title">带图标、说明、跳转的列表项</div>
<div class="mx-cells">
<a class="mx-cell mx-cell_access" href="javascript:;">
<div class="mx-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="mx-cell__bd">
<p>cell standard</p>
</div>
<div class="mx-cell__ft">说明文字</div>
</a>
<a class="mx-cell mx-cell_access" href="javascript:;">
<div class="mx-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="mx-cell__bd">
<p>cell standard</p>
</div>
<div class="mx-cell__ft">说明文字</div>
</a>
</div>
<div class="mx-parent">
<button class="mx-copy">copy</button>
</div>
<pre class="pre">
<div class="mx-cells__title">带图标、说明、跳转的列表项</div>
<div class="mx-cells">
<a class="mx-cell mx-cell_access" href="javascript:;">
<div class="mx-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="mx-cell__bd">
<p>cell standard</p>
</div>
<div class="mx-cell__ft">说明文字</div>
</a>
<a class="mx-cell mx-cell_access" href="javascript:;">
<div class="mx-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="mx-cell__bd">
<p>cell standard</p>
</div>
<div class="mx-cell__ft">说明文字</div>
</a>
</div>
</pre>
</div>
<div class="page__ft">
<a href="../../index.html"><img src="../../images/icon_footer_link.png" /></a>
</div>
</div>
</body>
<script src="../../scripts/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.mx-parent',{
target: function(trigger) {
return trigger.nextElementSibling;
}
});
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</html>