728/ismism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
ismism/ismism.ts/ui/index.html

537 lines
12 KiB
HTML
Raw Normal View History

init
2022-08-11 13:01:30 +08:00
<!DOCTYPE html>
<html>
<head>
<title>主义主义 活动公示</title>
apply template
2022-08-19 11:41:35 +08:00
<meta charset="utf-8">
re-init
2022-08-19 09:53:32 +08:00
<meta name="viewport" content="width=device-width, initial-scale=1">
fg bg
2022-08-24 13:02:58 +08:00
<!-- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> -->
<link rel="stylesheet" href="../dep/w3.css">
init
2022-08-11 13:01:30 +08:00
</head>
<style>
header
2022-08-24 15:26:37 +08:00
* {
--cl-white: #fff;
--cl-light-gray: #f1f1f1;
stat
2022-08-27 19:14:40 +08:00
--cl-gray: #9e9e9e;
header
2022-08-24 15:26:37 +08:00
--cl-dark-gray: #616161;
--cl-black: #000;
stat
2022-08-27 19:14:40 +08:00
--cl-pale-red: #ffdddd;
header
2022-08-24 15:26:37 +08:00
--cl-red: #f44336;
stat
2022-08-27 19:14:40 +08:00
--cl-amber: #ffc107;
header
2022-08-24 15:26:37 +08:00
--small: 12px;
--normal: 15px;
--large: 18px;
}
.light-gray {
color: var(--cl-black) !important;
border-color: var(--cl-black) !important;
background-color: var(--cl-light-gray) !important;
}
.dark-gray {
color: var(--cl-white) !important;
border-color: var(--cl-dark-gray) !important;
background-color: var(--cl-dark-gray) !important;
}
html {
box-sizing: border-box;
overflow-x: hidden;
}
body {
margin: 0;
font-family: Verdana, sans-serif;
font-size: var(--normal);
line-height: 1.5;
}
h1 {
font-size: 36px
}
h2 {
font-size: 30px
}
h3 {
font-size: 24px
}
h4 {
font-size: 20px
}
h5 {
font-size: 18px
}
h6 {
font-size: 16px
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
code {
article title
2022-08-25 16:38:16 +08:00
font-family: monospace;
header
2022-08-24 15:26:37 +08:00
font-size: 1em;
}
tag
2022-08-21 13:04:24 +08:00
a {
text-decoration: none;
}
header
2022-08-24 15:26:37 +08:00
header {
padding-top: 32px;
padding-bottom: 16px;
article title
2022-08-25 16:38:16 +08:00
max-width: 1400px;
content
2022-08-25 15:20:02 +08:00
margin-left: auto;
margin-right: auto;
header
2022-08-24 15:26:37 +08:00
text-align: center;
}
header .tag {
margin: 16px 32px;
}
.tag a {
border-width: 1px;
border-style: solid;
border-radius: 6px;
margin-right: 6px;
margin-bottom: 6px;
article title
2022-08-25 16:38:16 +08:00
color: var(--cl-black);
border-color: var(--cl-black);
background-color: var(--cl-light-gray);
}
.tag span {
display: inline-block;
padding-left: 8px;
padding-right: 8px;
margin-left: 0.75ch;
text-align: center;
border-radius: 50%;
font-size: var(--small);
color: var(--cl-white);
background-color: var(--cl-black);
header
2022-08-24 15:26:37 +08:00
}
.tag a,
button {
display: inline-block;
padding: 5px 10px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
text-align: center;
cursor: pointer;
white-space: nowrap;
user-select: none;
color: inherit;
background-color: inherit;
}
button {
border: none;
}
button:hover,
.tag a:hover {
color: var(--cl-white) !important;
border-color: var(--cl-dark-gray) !important;
background-color: var(--cl-dark-gray) !important;
opacity: 0.7;
}
.banner {
position: relative;
padding: 0.01em 16px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
}
.banner button {
stat
2022-08-27 19:14:40 +08:00
font-size: var(--large);
header
2022-08-24 15:26:37 +08:00
}
.topright {
position: absolute;
right: 0;
top: 0
}
content
2022-08-25 15:20:02 +08:00
.content {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin-left: auto;
margin-right: auto;
max-width: 1400px;
min-width: 320px;
}
.content-main {
display: inline-block;
flex-grow: 1;
max-width: 960px;
}
.content-side {
display: inline-block;
flex-grow: 1;
min-width: 320px;
max-width: 960px;
}
article title
2022-08-25 16:38:16 +08:00
.content-main>article {
margin: 16px !important;
color: var(--cl-black);
background: var(--cl-white);
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}
.content-main>article>section {
padding: 0.01em 16px;
}
.title {
display: inline-block;
font-size: 24px;
font-weight: bold;
margin: 10px 0;
}
.title code {
font-weight: normal;
color: var(--cl-light-gray);
background-color: var(--cl-dark-gray);
padding: 0.1em 8px;
border-radius: 4px;
text-align: center
}
.date {
color: var(--cl-dark-gray);
font-size: 12px;
font-family: monospace;
font-style: italic;
margin: 10px 0;
}
photo
2022-08-26 16:29:48 +08:00
.photo {
color: var(--cl-dark-gray);
text-align: center;
width: auto;
}
.photo>div {
display: flex;
flex-flow: row wrap;
align-items: center;
text-align: center;
border-top: 1px dotted var(--cl-dark-gray);
padding: 10px 0;
}
@media (max-width: 720px) {
.photo>div>span {
width: 100%;
}
}
@media (min-width: 720px) {
.photo>div>span {
flex-basis: 180px;
flex-grow: 1;
}
.photo>div>span:nth-child(1) {
text-align: left;
}
.photo>div>span:nth-child(2) {
text-align: center;
}
.photo>div>span:nth-child(3) {
text-align: right;
}
}
.photo button {
padding: 0;
}
.photo img {
width: 100%;
}
stat
2022-08-27 19:14:40 +08:00
.stat {
margin-top: 10px;
}
.stat>.label {
overflow: auto;
}
.stat>.label>*:nth-child(1) {
float: left;
}
.stat>.label>*:nth-child(2) {
float: right;
}
.stat>.label>a {
text-decoration: underline;
}
.stat>.label>a:hover {
color: var(--cl-amber);
}
bar
2022-08-28 13:27:27 +08:00
.stat>.bar {
margin: 5px 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
}
.stat>.bar>.progress {
stat
2022-08-27 19:14:40 +08:00
position: relative;
width: 100%;
color: var(--cl-black);
background-color: var(--cl-light-gray);
font-family: monospace;
}
bar
2022-08-28 13:27:27 +08:00
.stat>.bar>.progress>span {
stat
2022-08-27 19:14:40 +08:00
display: inline-block;
position: absolute;
padding: 0.25em 8px;
left: 0;
width: 100%;
}
bar
2022-08-28 13:27:27 +08:00
.stat>.bar>.progress>span:nth-child(1) {
stat
2022-08-27 19:14:40 +08:00
position: relative;
min-width: 1em;
background-color: var(--cl-gray);
}
bar
2022-08-28 13:27:27 +08:00
.stat>.bar>.progress>span:nth-child(2) {
stat
2022-08-27 19:14:40 +08:00
text-align: center;
background: none;
}
bar
2022-08-28 13:27:27 +08:00
.stat>.bar>.progress>span:nth-child(3) {
stat
2022-08-27 19:14:40 +08:00
text-align: right;
background: none;
}
header
2022-08-24 15:26:37 +08:00
.animate-left {
position: relative;
animation: animateleft 0.4s
}
@keyframes animateleft {
from {
left: -300px;
opacity: 0
}
to {
left: 0;
opacity: 1
}
}
.animate-right {
position: relative;
animation: animateright 0.4s
}
@keyframes animateright {
from {
right: -300px;
opacity: 0
}
to {
right: 0;
opacity: 1
}
}
init
2022-08-11 13:01:30 +08:00
</style>
tst data #2
2022-08-13 13:44:37 +08:00
<script>
</script>
header
2022-08-24 15:26:37 +08:00
<body class="light-gray">
<div class="dark-gray banner animate-right">
<button onclick="this.parentElement.style.display='none'" class="dark-gray topright">&times;</button>
apply w3
2022-08-19 10:12:07 +08:00
<h3>提示!</h3>
apply template
2022-08-19 11:41:35 +08:00
<p>网站开发中。当前页面皆为测试内容。</p>
</div>
header
2022-08-24 15:26:37 +08:00
<header class="animate-left">
<a href="">
<h1><b>主义主义 <span style="color: var(--cl-red)">活动</span>公示</b></h1>
tag
2022-08-21 13:04:24 +08:00
</a>
<hr>
header
2022-08-24 15:26:37 +08:00
<div class="tag">
article title
2022-08-25 16:38:16 +08:00
<a class="dark-gray" href="#全部公示">全部公示<span>2</span></a><a href="#进行中">进行中<span>2</span></a><a
href="#已结束">已结束<span>0</span></a><a href="#设施建设">设施建设<span>1</span></a><a
href="#设施建设">物资配给<span>1</span></a><a href="#软件开发">软件开发<span>1</span></a><a
href="#苏州">苏州<span>1</span></a><a href="#成都">成都<span>1</span></a><a
href="#星星家园">星星家园<span>1</span></a><a href="#主义主义网站">主义主义网站<span>1</span></a>
tag
2022-08-21 13:04:24 +08:00
</div>
apply template
2022-08-19 11:41:35 +08:00
</header>
content
2022-08-25 15:20:02 +08:00
<div class="content animate-right">
<div class="content-main">
article title
2022-08-25 16:38:16 +08:00
<article>
<section>
<a href="#1" class="title"><code>#123</code> 星星家园扩建</a>
<div class="tag">
<a href="#进行中">进行中</a><a href="#已结束">已结束</a><a href="#设施建设">设施建设</a><a href="#设施建设">物资配给</a><a
href="#软件开发">软件开发</a><a href="#苏州">苏州</a><a href="#成都">成都</a><a href="#星星家园">星星家园</a><a
href="#主义主义网站">主义主义网站</a>
content
2022-08-25 15:20:02 +08:00
</div>
article title
2022-08-25 16:38:16 +08:00
<div class="date">公示时间：2022-08-12 12:32<br>更新时间：2022-08-12 12:32</div>
</section>
apply template
2022-08-19 11:41:35 +08:00
photo
2022-08-26 16:29:48 +08:00
<section class="photo">
<div>
<span>图片标题xxxx标题标题图片标题xxxx</span>
<span><button>上一张</button> / <button>下一张</button></span>
<span>第12张 / 共43张</span>
</div>
<img src="https://www.w3schools.com/w3css/img_nature_wide.jpg">
</section>
content
2022-08-25 15:20:02 +08:00
stat
2022-08-27 19:14:40 +08:00
<section>
<div class="stat">
<div class="label">
<span>收到支持</span>
<span>预算(元)</span>
</div>
bar
2022-08-28 13:27:27 +08:00
<div class="bar">
<div class="progress">
<span style="width: 50%">123456</span>
<span>50%</span>
<span>123456</span>
</div>
<div class="progress">
<span style="width: 25%;">12345</span>
<span>25%</span>
</div>
stat
2022-08-27 19:14:40 +08:00
</div>
<div class="label">
<span>当前支出</span>
<a href="pan.baidu.com">查看明细</a>
</div>
</div>
</section>
content
2022-08-25 15:20:02 +08:00
<div class="w3-container">
<p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem
euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed
ultricies mi non congue ullam corper. Praesent tincidunt sed
tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida
diam non fringilla.</p>
<div class="w3-row">
<div class="w3-col m8 s12">
<p><button class="w3-button w3-padding-large w3-white w3-border"><b>READ MORE
»</b></button></p>
</div>
<div class="w3-col m4 w3-hide-small">
<p>
<span class="w3-padding-large w3-right"><b>支持  </b><span
class="w3-tag">1000</span></span>
</p>
apply template
2022-08-19 11:41:35 +08:00
</div>
</div>
</div>
article title
2022-08-25 16:38:16 +08:00
</article>
content
2022-08-25 15:20:02 +08:00
<hr>
article title
2022-08-25 16:38:16 +08:00
<article>
content
2022-08-25 15:20:02 +08:00
<div class="w3-container">
<h3><b>BLOG ENTRY</b></h3>
<h5>Title description, <span class="w3-opacity">April 2, 2014</span></h5>
</div>
apply template
2022-08-19 11:41:35 +08:00
content
2022-08-25 15:20:02 +08:00
<img src="https://www.w3schools.com/w3images/bridge.jpg" alt="Norway" style="width:100%">
<div class="w3-container">
<p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem
euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed
ultricies mi non congue ullam corper. Praesent tincidunt sed
tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida
diam non fringilla.</p>
<div class="w3-row">
<div class="w3-col m8 s12">
<p><button class="w3-button w3-padding-large w3-white w3-border"><b>READ MORE
»</b></button></p>
</div>
<div class="w3-col m4 w3-hide-small">
<p><span class="w3-padding-large w3-right"><b>Comments  </b> <span
class="w3-badge">2</span></span></p>
apply template
2022-08-19 11:41:35 +08:00
</div>
</div>
</div>
article title
2022-08-25 16:38:16 +08:00
</article>
content
2022-08-25 15:20:02 +08:00
</div>
apply template
2022-08-19 11:41:35 +08:00
content
2022-08-25 15:20:02 +08:00
<div class="content-side">
<div class="w3-container w3-margin">
<div class="w3-container w3-padding">
<h4>Popular Posts</h4>
apply template
2022-08-19 11:41:35 +08:00
</div>
content
2022-08-25 15:20:02 +08:00
<ul class="w3-ul w3-hoverable">
<li class="w3-padding-16">
<img src="https://www.w3schools.com//w3images/workshop.jpg" alt="Image"
class="w3-left w3-margin-right" style="width:50px">
<span class="w3-large">Lorem</span><br>
<span>Sed mattis nunc</span>
</li>
<li class="w3-padding-16">
<img src="https://www.w3schools.com//w3images/gondol.jpg" alt="Image"
class="w3-left w3-margin-right" style="width:50px">
<span class="w3-large">Ipsum</span><br>
<span>Praes tinci sed</span>
</li>
<li class="w3-padding-16">
<img src="https://www.w3schools.com//w3images/skies.jpg" alt="Image"
class="w3-left w3-margin-right" style="width:50px">
<span class="w3-large">Dorum</span><br>
<span>Ultricies congue</span>
</li>
<li class="w3-padding-16 w3-hide-medium w3-hide-small">
<img src="https://www.w3schools.com//w3images/rock.jpg" alt="Image"
class="w3-left w3-margin-right" style="width:50px">
<span class="w3-large">Mingsum</span><br>
<span>Lorem ipsum dipsum</span>
</li>
</ul>
apply template
2022-08-19 11:41:35 +08:00
</div>
</div>
apply w3
2022-08-19 10:12:07 +08:00
</div>
apply template
2022-08-19 11:41:35 +08:00
<footer class="w3-container w3-dark-grey w3-padding-32 w3-margin-top w3-animate-left">
<button class="w3-button w3-black w3-disabled w3-padding-large w3-margin-bottom">Previous</button>
<button class="w3-button w3-black w3-padding-large w3-margin-bottom">Next »</button>
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
</footer>
init
2022-08-11 13:01:30 +08:00
</body>
<script src="bind.js"></script>
</html>
Reference in New Issue Copy Permalink