530 lines
12 KiB
HTML
530 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<title>主义主义 活动公示</title>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<!-- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> -->
|
||
<link rel="stylesheet" href="../dep/w3.css">
|
||
</head>
|
||
|
||
<style>
|
||
* {
|
||
--cl-white: #fff;
|
||
--cl-light-gray: #f1f1f1;
|
||
--cl-gray: #9e9e9e;
|
||
--cl-dark-gray: #616161;
|
||
--cl-black: #000;
|
||
--cl-pale-red: #ffdddd;
|
||
--cl-red: #f44336;
|
||
--cl-amber: #ffc107;
|
||
--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 {
|
||
font-family: monospace;
|
||
font-size: 1em;
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
}
|
||
|
||
header {
|
||
padding-top: 32px;
|
||
padding-bottom: 16px;
|
||
max-width: 1400px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
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;
|
||
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);
|
||
}
|
||
|
||
.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 {
|
||
font-size: var(--large);
|
||
}
|
||
|
||
.topright {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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 {
|
||
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 {
|
||
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);
|
||
}
|
||
|
||
.stat>.progress {
|
||
position: relative;
|
||
width: 100%;
|
||
color: var(--cl-black);
|
||
background-color: var(--cl-light-gray);
|
||
font-family: monospace;
|
||
}
|
||
|
||
.stat>.progress>span {
|
||
display: inline-block;
|
||
position: absolute;
|
||
padding: 0.25em 8px;
|
||
left: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.stat>.progress>span:nth-child(1) {
|
||
position: relative;
|
||
min-width: 1em;
|
||
background-color: var(--cl-gray);
|
||
}
|
||
|
||
.stat>.progress>span:nth-child(2) {
|
||
text-align: center;
|
||
background: none;
|
||
}
|
||
|
||
.stat>.progress>span:nth-child(3) {
|
||
text-align: right;
|
||
background: none;
|
||
}
|
||
|
||
.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
|
||
}
|
||
}
|
||
|
||
</style>
|
||
|
||
<script>
|
||
</script>
|
||
|
||
<body class="light-gray">
|
||
<div class="dark-gray banner animate-right">
|
||
<button onclick="this.parentElement.style.display='none'" class="dark-gray topright">×</button>
|
||
<h3>提示!</h3>
|
||
<p>网站开发中。当前页面皆为测试内容。</p>
|
||
</div>
|
||
|
||
<header class="animate-left">
|
||
<a href="">
|
||
<h1><b>主义主义 <span style="color: var(--cl-red)">活动</span>公示</b></h1>
|
||
</a>
|
||
<hr>
|
||
<div class="tag">
|
||
<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>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="content animate-right">
|
||
<div class="content-main">
|
||
<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>
|
||
</div>
|
||
<div class="date">公示时间：2022-08-12 12:32<br>更新时间：2022-08-12 12:32</div>
|
||
</section>
|
||
|
||
<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>
|
||
|
||
<section>
|
||
<div class="stat">
|
||
<div class="label">
|
||
<span>收到支持</span>
|
||
<span>预算(元)</span>
|
||
</div>
|
||
<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>
|
||
<div class="label">
|
||
<span>当前支出</span>
|
||
<a href="pan.baidu.com">查看明细</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<hr>
|
||
<article>
|
||
<div class="w3-container">
|
||
<h3><b>BLOG ENTRY</b></h3>
|
||
<h5>Title description, <span class="w3-opacity">April 2, 2014</span></h5>
|
||
</div>
|
||
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="content-side">
|
||
<div class="w3-container w3-margin">
|
||
<div class="w3-container w3-padding">
|
||
<h4>Popular Posts</h4>
|
||
</div>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<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>
|
||
|
||
</body>
|
||
|
||
<script src="bind.js"></script>
|
||
|
||
</html>
|