599 lines
13 KiB
HTML
599 lines
13 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: 0.1em 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: 24px;
|
||
}
|
||
|
||
.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>.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 {
|
||
position: relative;
|
||
width: 100%;
|
||
color: var(--cl-black);
|
||
background-color: var(--cl-light-gray);
|
||
font-family: monospace;
|
||
}
|
||
|
||
.stat>.bar>.progress>span {
|
||
display: inline-block;
|
||
position: absolute;
|
||
padding: 0.25em 8px;
|
||
left: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.stat>.bar>.progress>span:nth-child(1) {
|
||
position: relative;
|
||
min-width: 1em;
|
||
background-color: var(--cl-gray);
|
||
}
|
||
|
||
.stat>.bar>.progress>span:nth-child(2) {
|
||
text-align: center;
|
||
background: none;
|
||
}
|
||
|
||
.stat>.bar>.progress>span:nth-child(3) {
|
||
text-align: right;
|
||
background: none;
|
||
}
|
||
|
||
.circle {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.circle>div {
|
||
flex-basis: 1px;
|
||
flex-grow: 1;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
align-items: center;
|
||
margin: 10px;
|
||
font-size: var(--large);
|
||
}
|
||
|
||
.circle>div>.progress {
|
||
--size: 4em;
|
||
width: var(--size);
|
||
height: var(--size);
|
||
margin-bottom: 10px;
|
||
border-radius: 50%;
|
||
display: grid;
|
||
place-items: center;
|
||
background:
|
||
radial-gradient(closest-side, var(--cl-white) 66%, transparent 0 100%),
|
||
conic-gradient(var(--cl-gray) calc(var(--value) * 1%), var(--cl-light-gray) 0);
|
||
font-family: monospace;
|
||
font-size: calc(var(--size) / 2);
|
||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||
color: var(--cl-amber);
|
||
text-shadow: 0 2px 2px var(--cl-light-gray);
|
||
}
|
||
|
||
.tab {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
justify-content: center;
|
||
margin: 16px 0;
|
||
}
|
||
|
||
.tab>button {
|
||
margin: 0 3px;
|
||
}
|
||
|
||
.tab>button>span {
|
||
display: inline-block;
|
||
background: var(--cl-black);
|
||
color: var(--cl-white);
|
||
padding: 0.1em 8px;
|
||
text-align: center
|
||
}
|
||
|
||
.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="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>
|
||
</div>
|
||
<div class="label">
|
||
<span>当前支出</span>
|
||
<a href="pan.baidu.com">查看明细</a>
|
||
</div>
|
||
</div>
|
||
<br>活动目标：
|
||
<div class="circle">
|
||
<div>
|
||
<div class="progress" style="--value: 65">65%</div>
|
||
<span>雨棚扩建雨棚扩建雨棚扩建雨棚扩建雨棚扩建雨棚扩建雨棚扩建雨棚扩建雨棚扩建</span>
|
||
</div>
|
||
<div>
|
||
<div class="progress" style="--value: 65">65%</div>
|
||
<span>雨棚扩建雨棚扩建</span>
|
||
|
||
</div>
|
||
<div>
|
||
<div class="progress" style="--value: 100; color: var(--cl-gray)">完成</div>
|
||
<span>雨棚扩建雨棚扩建</span>
|
||
|
||
</div>
|
||
<div>
|
||
<div class="progress" style="--value: 0; color: var(--cl-gray)">0%</div>
|
||
<span>雨棚扩建</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div class="tab">
|
||
<button><span>332</span> 条活动日志 ❯</button>
|
||
<button><span>32</span> 名参与者 ❯</button>
|
||
<button><span>3212</span> 位支持者 ❯</button>
|
||
</div>
|
||
</section>
|
||
</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>
|