740 lines
16 KiB
HTML
740 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<title>主义主义 活动公示</title>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
</head>
|
||
|
||
<style>
|
||
:root {
|
||
--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;
|
||
--cl-purple: #673ab7;
|
||
--small: 12px;
|
||
--normal: 15px;
|
||
--large: 18px;
|
||
--w-max: 1400px;
|
||
--w-rpd: 720px;
|
||
--w-max-content: 960px;
|
||
--w-min-content: 320px;
|
||
}
|
||
|
||
.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;
|
||
color: var(--cl-black);
|
||
background: var(--cl-light-gray);
|
||
font-family: Verdana, sans-serif;
|
||
font-size: var(--normal);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
font-weight: 400;
|
||
margin: 10px 0
|
||
}
|
||
|
||
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;
|
||
border: 0;
|
||
border-top: 1px solid #eee;
|
||
overflow: visible;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
code {
|
||
font-family: monospace;
|
||
font-size: 1em;
|
||
}
|
||
|
||
a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
|
||
header {
|
||
padding-top: 32px;
|
||
padding-bottom: 16px;
|
||
max-width: var(--w-max);
|
||
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>a>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: var(--w-max);
|
||
min-width: var(--w-min-content);
|
||
}
|
||
|
||
@media (max-width: 960px) {
|
||
|
||
.content>.main,
|
||
.content>.side {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
@media (min-width:960px) {
|
||
.content>.main {
|
||
flex-basis: var(--w-rpd);
|
||
flex-grow: 3;
|
||
}
|
||
|
||
.content>.side {
|
||
flex-basis: var(--w-min-content);
|
||
flex-grow: 1;
|
||
}
|
||
}
|
||
|
||
.content>.main>article {
|
||
margin: 16px !important;
|
||
padding-bottom: 10px;
|
||
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;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.content .title {
|
||
display: inline-block;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.content .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
|
||
}
|
||
|
||
.content .date {
|
||
color: var(--cl-dark-gray);
|
||
font-size: var(--small);
|
||
font-family: monospace;
|
||
font-style: italic;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.content .photo {
|
||
color: var(--cl-dark-gray);
|
||
text-align: center;
|
||
width: auto;
|
||
}
|
||
|
||
.content .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) {
|
||
.content .photo>div>span {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 720px) {
|
||
.content .photo>div>span {
|
||
flex-basis: 180px;
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.content .photo>div>span:nth-child(1) {
|
||
text-align: left;
|
||
}
|
||
|
||
.content .photo>div>span:nth-child(2) {
|
||
text-align: center;
|
||
}
|
||
|
||
.content .photo>div>span:nth-child(3) {
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
.content .photo button {
|
||
padding: 0;
|
||
}
|
||
|
||
.content .photo img {
|
||
width: 100%;
|
||
}
|
||
|
||
.content .stat {
|
||
--budget: 7000;
|
||
--support: 7000;
|
||
--expense: 3500;
|
||
}
|
||
|
||
.content .stat>.label {
|
||
overflow: auto;
|
||
}
|
||
|
||
.content .stat>.label>*:nth-child(1) {
|
||
float: left;
|
||
}
|
||
|
||
.content .stat>.label>*:nth-child(2) {
|
||
float: right;
|
||
}
|
||
|
||
.content .stat>.label>a {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.content .stat>.label>a:hover {
|
||
color: var(--cl-amber);
|
||
}
|
||
|
||
.content .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)
|
||
}
|
||
|
||
.content .stat>.bar>.progress {
|
||
position: relative;
|
||
width: 100%;
|
||
color: var(--cl-black);
|
||
background-color: var(--cl-light-gray);
|
||
font-family: monospace;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.content .stat>.bar>.progress>span {
|
||
display: inline-block;
|
||
position: absolute;
|
||
padding: 0.25em 8px;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.content .stat>.bar>.progress>span:nth-child(1) {
|
||
position: relative;
|
||
background-color: var(--cl-gray);
|
||
}
|
||
|
||
.content .stat>.bar>.progress>span.support {
|
||
width: calc(var(--support) / var(--budget) * 100%);
|
||
}
|
||
|
||
.content .stat>.bar>.progress>span.expense {
|
||
width: calc(var(--expense) / var(--budget) * 100%);
|
||
}
|
||
|
||
.content .stat>.bar>.progress>span:nth-child(2) {
|
||
text-align: center;
|
||
background: none;
|
||
left: 8px;
|
||
}
|
||
|
||
.content .stat>.bar>.progress>span:nth-child(3) {
|
||
text-align: right;
|
||
background: none;
|
||
left: -16px;
|
||
}
|
||
|
||
.circle {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
justify-content: center;
|
||
text-align: center;
|
||
--pct: 65;
|
||
}
|
||
|
||
.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(--pct) * 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;
|
||
}
|
||
|
||
.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
|
||
}
|
||
|
||
.log {
|
||
background: var(--cl-light-gray);
|
||
border-radius: 16px;
|
||
padding: 16px 8px;
|
||
margin-top: 16px;
|
||
max-height: 480px;
|
||
overflow-y: scroll;
|
||
}
|
||
|
||
.log>span {
|
||
display: block;
|
||
width: 100%;
|
||
margin: 8px 0;
|
||
color: var(--cl-gray);
|
||
text-align: center;
|
||
}
|
||
|
||
.log>div {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
margin: 16px 0;
|
||
}
|
||
|
||
.log>div>.avatar {
|
||
flex-shrink: 0;
|
||
width: 48px;
|
||
height: 48px;
|
||
background: var(--cl-gray);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.log>div>div:nth-child(2) {
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
margin-left: 16px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.log>div>div>.label {
|
||
font-size: var(--small);
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.log>div>div>.msg {
|
||
min-width: 120px;
|
||
padding: 0.5em 16px;
|
||
background-color: var(--cl-light-gray);
|
||
border-radius: 0 8px 8px 8px;
|
||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
footer {
|
||
padding: 32px 16px;
|
||
margin-top: 16px;
|
||
color: var(--cl-gray);
|
||
background: var(--cl-dark-gray);
|
||
text-align: center;
|
||
}
|
||
|
||
footer>a {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
footer>a>img {
|
||
height: 1.2em;
|
||
margin-right: 0.2em;
|
||
}
|
||
|
||
footer>span {
|
||
display: block;
|
||
margin-top: 8px;
|
||
font-size: var(--small);
|
||
font-family: monospace;
|
||
}
|
||
|
||
.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>
|
||
<div class="banner dark-gray 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="main">
|
||
<article>
|
||
<section>
|
||
<a href="#1" class="title"><code>#1</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 class="support">123456</span>
|
||
<span>50%</span>
|
||
<span>123456</span>
|
||
</div>
|
||
<div class="progress">
|
||
<span class="expense">12345</span>
|
||
<span>25%</span>
|
||
</div>
|
||
</div>
|
||
<div class="label">
|
||
<span>当前支出</span>
|
||
<a target="_blank" rel="noopener"
|
||
href="https://docs.qq.com/sheet/DZU1qaWRsUnJJU1Z1?tab=BB08J2">查看明细</a>
|
||
</div>
|
||
</div>
|
||
<br>活动目标：
|
||
<div class="circle">
|
||
<div>
|
||
<div class="progress" style="--pct: 65">65%</div>
|
||
<span>雨棚扩建雨棚扩建雨棚扩建雨棚扩建雨棚扩建雨棚扩建雨棚扩建雨棚扩建雨棚扩建</span>
|
||
</div>
|
||
<div>
|
||
<div class="progress" style="--pct: 65">65%</div>
|
||
<span>雨棚扩建雨棚扩建</span>
|
||
|
||
</div>
|
||
<div>
|
||
<div class="progress" style="--pct: 100; color: var(--cl-gray)">完成</div>
|
||
<span>雨棚扩建雨棚扩建</span>
|
||
|
||
</div>
|
||
<div>
|
||
<div class="progress" style="--pct: 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>
|
||
<div class="log">
|
||
<span>322 条活动日志</span>
|
||
<div>
|
||
<div class="avatar"></div>
|
||
<div>
|
||
<div class="label">username, icons <span>timestamp</span></div>
|
||
<div class="msg">msg</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="avatar"></div>
|
||
<div>
|
||
<div class="label">username, icons <span>timestamp</span></div>
|
||
<div class="msg">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</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="avatar"></div>
|
||
<div>
|
||
<div class="label">username, icons <span>timestamp</span></div>
|
||
<div class="msg">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</div>
|
||
</div>
|
||
</div>
|
||
<span>322 条活动日志</span>
|
||
</div>
|
||
</section>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="side">
|
||
<div class="log">
|
||
<span>322 条活动日志</span>
|
||
<div>
|
||
<div class="avatar"></div>
|
||
<div>
|
||
<div class="label">username, icons <span>timestamp</span></div>
|
||
<div class="msg">msg</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="avatar"></div>
|
||
<div>
|
||
<div class="label">username, icons <span>timestamp</span></div>
|
||
<div class="msg">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</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="avatar"></div>
|
||
<div>
|
||
<div class="label">username, icons <span>timestamp</span></div>
|
||
<div class="msg">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</div>
|
||
</div>
|
||
</div>
|
||
<span>322 条活动日志</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="animate-left">
|
||
<a href="https://space.bilibili.com/23191782" target="_blank" rel="noopener"><img
|
||
src="https://www.bilibili.com/favicon.ico">未明子</a> ·
|
||
<a href="https://space.bilibili.com/19147010" target="_blank" rel="noopener"><img
|
||
src="https://www.bilibili.com/favicon.ico">张正午</a>
|
||
<span>网站维护：seven.two.eight@outlook.com</span>
|
||
</footer>
|
||
|
||
</body>
|
||
|
||
<script src="bind.js"></script>
|
||
|
||
</html>
|