607 lines
13 KiB
HTML
607 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>主义主义 活动公示</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
</head>
|
||
|
||
<style>
|
||
* {
|
||
box-sizing: border-box;
|
||
--color-black: hsl(297, 35%, 11%);
|
||
--color-purple: hsl(297, 35%, 33%);
|
||
--color-pink: hsl(335, 56%, 51%);
|
||
--color-red: hsl(356, 95%, 69%);
|
||
--color-yellow: hsl(29, 83%, 80%);
|
||
--color-cyan: hsl(190, 58%, 50%);
|
||
--color-blue: hsl(195, 93%, 40%);
|
||
--color-gray: hsl(0, 0%, 90%);
|
||
--color-white: hsl(0, 0%, 95%);
|
||
--font-normal: "PingFang SC", "Lantinghei SC", "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", STHeitiSC-Light, simsun, "WenQuanYi Zen Hei", "WenQuanYi Micro Hei", sans-serif;
|
||
--font-mono: consolas, "Courier New", Courier, monospace;
|
||
--interval: 20px;
|
||
--shadow-blur: 6px;
|
||
--border-radius: 6px;
|
||
--transition: 0.2s;
|
||
--transform: scale(1.25);
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-normal);
|
||
color: var(--color-gray);
|
||
padding: var(--interval);
|
||
background: var(--color-purple);
|
||
}
|
||
|
||
button {
|
||
border: none;
|
||
}
|
||
|
||
button:hover {
|
||
cursor: pointer
|
||
}
|
||
|
||
article,
|
||
footer {
|
||
background: var(--color-black);
|
||
padding: var(--interval);
|
||
margin-top: var(--interval);
|
||
border-radius: var(--border-radius);
|
||
box-shadow: var(--color-black) 1px 0 var(--shadow-blur);
|
||
}
|
||
|
||
.banner {
|
||
padding: 30px;
|
||
text-align: center;
|
||
background: var(--color-black);
|
||
border-radius: 0;
|
||
box-shadow: var(--color-black) 1px 0 var(--shadow-blur);
|
||
}
|
||
|
||
.banner h1 {
|
||
font-size: 50px;
|
||
text-shadow: var(--color-red) 1px 0 var(--shadow-blur);
|
||
}
|
||
|
||
header {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
header .title,
|
||
header .tag,
|
||
header .stat {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 0.5ch 0;
|
||
}
|
||
|
||
header .title code,
|
||
header .title button {
|
||
text-align: center;
|
||
border: none;
|
||
font-size: 16px;
|
||
color: var(--color-black);
|
||
background: var(--color-purple);
|
||
border-radius: var(--border-radius);
|
||
padding: 0.5ch;
|
||
height: 3ch;
|
||
}
|
||
|
||
header .title code {
|
||
font-family: var(--font-mono);
|
||
margin-right: 1ch;
|
||
}
|
||
|
||
header .title button {
|
||
padding: 0 1.5ch;
|
||
}
|
||
|
||
header .title h1 {
|
||
flex-grow: 1;
|
||
margin: 0;
|
||
}
|
||
|
||
header .tag ul {
|
||
flex-grow: 1;
|
||
}
|
||
|
||
header .tag span {
|
||
color: var(--color-purple);
|
||
font-size: 12px;
|
||
font-style: italic;
|
||
}
|
||
|
||
header .stat div {
|
||
text-align: center;
|
||
border: 1px solid var(--color-purple);
|
||
}
|
||
|
||
header .stat .item {
|
||
border: none;
|
||
padding: 0.5ch 1ch;
|
||
background: var(--color-purple);
|
||
color: var(--color-black);
|
||
font-weight: bold;
|
||
}
|
||
|
||
header .stat .item:hover {
|
||
cursor: pointer;
|
||
}
|
||
|
||
header .stat .value {
|
||
border: none;
|
||
padding: 0.5ch 1ch;
|
||
color: var(--color-cyan);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
header .stat .value:hover {
|
||
cursor: pointer;
|
||
transform: var(--transform);
|
||
}
|
||
|
||
header .stat .value.final {
|
||
color: var(--color-yellow)
|
||
}
|
||
|
||
header .stat .sp {
|
||
flex-grow: 1;
|
||
}
|
||
|
||
header .stat button {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
padding: 1ch 2ch;
|
||
background: var(--color-purple);
|
||
color: var(--color-blue);
|
||
border-radius: var(--border-radius);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
header .stat button:hover {
|
||
transform: var(--transform);
|
||
}
|
||
|
||
section {
|
||
margin-top: var(--interval);
|
||
}
|
||
|
||
section img {
|
||
width: 100%;
|
||
}
|
||
|
||
iframe {
|
||
width: 90%;
|
||
margin-left: 5%;
|
||
margin-top: 2ch;
|
||
aspect-ratio: 16/9;
|
||
}
|
||
|
||
.link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.link img {
|
||
height: 16px;
|
||
margin-right: 0.5ch;
|
||
}
|
||
|
||
footer {
|
||
color: var(--color-purple);
|
||
}
|
||
|
||
.left {
|
||
float: left;
|
||
width: 75%;
|
||
}
|
||
|
||
.right {
|
||
float: left;
|
||
width: 25%;
|
||
padding-left: var(--interval);
|
||
}
|
||
|
||
.noimg {
|
||
background: var(--color-blue);
|
||
width: 100%;
|
||
padding: var(--interval);
|
||
}
|
||
|
||
a,
|
||
a:visited {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
|
||
.tag {
|
||
list-style: none;
|
||
padding: 0;
|
||
color: var(--color-yellow);
|
||
font-size: 15px;
|
||
}
|
||
|
||
.tag ul {
|
||
padding: 0;
|
||
}
|
||
|
||
.tag li {
|
||
display: inline-block;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.tag li:hover {
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
.row:after {
|
||
content: "";
|
||
display: table;
|
||
clear: both;
|
||
}
|
||
|
||
#shade {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 100;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: black;
|
||
transition: opacity 0.5s;
|
||
opacity: 0;
|
||
}
|
||
|
||
#info {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 101;
|
||
padding: var(--interval);
|
||
border: 2px solid var(--color-black);
|
||
border-radius: var(--border-radius);
|
||
box-shadow: var(--color-black) 0 0 32px;
|
||
top: 25vh;
|
||
max-height: 60vh;
|
||
left: 20vw;
|
||
width: 60vw;
|
||
overflow-y: scroll;
|
||
background: var(--color-purple);
|
||
}
|
||
|
||
#info h3 {
|
||
text-align: center;
|
||
padding: 0;
|
||
margin-top: 0;
|
||
}
|
||
|
||
#stage,
|
||
#budget {
|
||
margin-bottom: var(--interval);
|
||
}
|
||
|
||
#stage {
|
||
text-align: center;
|
||
}
|
||
|
||
#stage .done,
|
||
#stage .going,
|
||
#stage .plan {
|
||
padding: 0.5ch 1ch;
|
||
border-radius: var(--border-radius);
|
||
}
|
||
|
||
#stage .done {
|
||
border: 2px solid var(--color-yellow);
|
||
background: var(--color-black);
|
||
color: var(--color-yellow);
|
||
box-shadow: var(--color-black) 0 1px var(--shadow-blur);
|
||
}
|
||
|
||
#stage .going {
|
||
border: 2px solid var(--color-cyan);
|
||
background: var(--color-black);
|
||
color: var(--color-cyan);
|
||
box-shadow: var(--color-black) 0 1px var(--shadow-blur);
|
||
}
|
||
|
||
#stage .plan {
|
||
border: 2px dashed var(--color-cyan);
|
||
}
|
||
|
||
#budget table {
|
||
margin: auto;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
#budget table,
|
||
#budget th,
|
||
#budget td {
|
||
padding: 0.5ch 1ch;
|
||
border: 2px solid var(--color-black);
|
||
text-align: center;
|
||
}
|
||
|
||
#budget th {
|
||
background: var(--color-black);
|
||
color: var(--color-purple);
|
||
}
|
||
|
||
#budget table a {
|
||
font-size: 14px;
|
||
color: var(--color-blue);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
#budget table a:hover {
|
||
color: var(--color-yellow);
|
||
}
|
||
|
||
@media screen and (max-width: 800px) {
|
||
|
||
.left,
|
||
.right {
|
||
width: 100%;
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
</style>
|
||
|
||
<script>
|
||
function info(s) {
|
||
console.log(`info(${s})`)
|
||
const shade = document.getElementById("shade")
|
||
shade.style.display = "block"
|
||
setTimeout(() => shade.style.opacity = 0.5, 0.1)
|
||
const n = document.getElementById("info")
|
||
n.style.display = "block"
|
||
for (const d of n.children) d.style.display = "none"
|
||
document.getElementById(s).style.display = "block"
|
||
}
|
||
|
||
function close_info() {
|
||
const shade = document.getElementById("shade")
|
||
shade.style.opacity = 0
|
||
setTimeout(() => shade.style.display = "none", 0.5)
|
||
const n = document.getElementById("info")
|
||
n.style.display = "none"
|
||
}
|
||
</script>
|
||
|
||
<body>
|
||
<article class="banner">
|
||
<h1><a href="">主义主义 <span style="color: var(--color-red);">活动</span>公示</a></h1>
|
||
<p>This is a slogan.</p>
|
||
</article>
|
||
|
||
<div class="row">
|
||
<div class="left">
|
||
<article>
|
||
<header>
|
||
<div class="title">
|
||
<code><a href="#1">#1</a></code>
|
||
<h1><a href="#1">星星家园扩建</a></h1>
|
||
<button>🔔订阅</button>
|
||
</div>
|
||
<div class="tag">
|
||
<ul>
|
||
<li><a href="#活动公示">#活动公示</a></li>
|
||
<li><a href="#星星家园">#星星家园</a></li>
|
||
</ul>
|
||
<span>公示时间： 2022-08-12 12:34:56<br>更新时间： 2022-08-12 12:34:56</span>
|
||
</div>
|
||
<div class="stat">
|
||
<div onclick="info('stage')">
|
||
<div class="item">活动状态</div>
|
||
<div class="value">执行中</div>
|
||
</div>
|
||
<div onclick="info('budget')">
|
||
<div class=" item">预算</div>
|
||
<div class="value">6000</div>
|
||
</div>
|
||
<div onclick="info('supporter')">
|
||
<div class=" item">收到支持</div>
|
||
<div class="value final">6000</div>
|
||
</div>
|
||
<div onclick="info('budget')">
|
||
<div class="item">当前支出</div>
|
||
<div class="value">1000</div>
|
||
</div>
|
||
<div onclick="info('supporter')">
|
||
<div class="item">支持者</div>
|
||
<div class="value final">1000</div>
|
||
</div>
|
||
<span class="sp"></span>
|
||
<button>支持</button>
|
||
</div>
|
||
</header>
|
||
<section>
|
||
<img src="./1-0.jpg">
|
||
<h2>活动介绍</h2>
|
||
<p>Some text..</p>
|
||
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do
|
||
eiusmod
|
||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||
exercitation
|
||
ullamco.</p>
|
||
<a href="https://www.bilibili.com/video/BV1xG4y1v7MV" target="_blank" rel="noopener"
|
||
style="color: var(--color-yellow);">未明子：【现实行动】我们目前的一个行动项目</a>
|
||
<iframe src="https://player.bilibili.com/player.html?bvid=BV1xG4y1v7MV" scrolling="no" border="0"
|
||
frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
|
||
<h2>预算与筹备</h2>
|
||
<p>Some text..</p>
|
||
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do
|
||
eiusmod
|
||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||
exercitation
|
||
ullamco.</p>
|
||
<a href="https://www.bilibili.com/video/BV1zT411L7JP" target="_blank" rel="noopener"
|
||
style="color: var(--color-yellow);">张正午：工人子弟晚托班苏州星星家园环境改造/伙食改善公益项目工作记录</a>
|
||
<iframe src="https://player.bilibili.com/player.html?bvid=BV1zT411L7JP" scrolling="no" border="0"
|
||
frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
|
||
<h2>参与人员</h2>
|
||
<p>Some text..</p>
|
||
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do
|
||
eiusmod
|
||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||
exercitation
|
||
ullamco.</p>
|
||
<h2>执行情况</h2>
|
||
<p>Some text..</p>
|
||
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do
|
||
eiusmod
|
||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||
exercitation
|
||
ullamco.</p>
|
||
<h2><i>后续回访（未开始）</i></h2>
|
||
<p>Some text..</p>
|
||
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do
|
||
eiusmod
|
||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||
exercitation
|
||
ullamco.</p>
|
||
</section>
|
||
</article>
|
||
<article>
|
||
<header>
|
||
<div class="title">
|
||
<code><a href="#0">#0</a></code>
|
||
<h1><a href="#0">网站说明</a></h1>
|
||
</div>
|
||
<div class="tag">
|
||
<ul>
|
||
<li><a href="#信息公示">#信息公示</a></li>
|
||
</ul>
|
||
<span>公示时间： 2022-08-12 12:34:56<br>更新时间： 2022-08-12 12:34:56</span>
|
||
</div>
|
||
</header>
|
||
<section>
|
||
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do
|
||
eiusmod
|
||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||
exercitation
|
||
ullamco.</p>
|
||
</section>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="right">
|
||
<article>
|
||
<h3>公示标签</h3>
|
||
<ul class="tag">
|
||
<li><a href="#所有公式">#所有公示</a></li>
|
||
<li><a href="#活动公示">#活动公示</a></li>
|
||
<li><a href="#活动公示">#信息公示</a></li>
|
||
<li><a href="#星星家园">#星星家园</a></li>
|
||
</ul>
|
||
</article>
|
||
<article>
|
||
<h3>相关链接</h3>
|
||
<a href="https://space.bilibili.com/23191782" target="_blank" rel="noopener" class="link"><img
|
||
src="https://www.bilibili.com/favicon.ico">未明子</a><br>
|
||
<a href="https://space.bilibili.com/19147010" target="_blank" rel="noopener" class="link"><img
|
||
src="https://www.bilibili.com/favicon.ico">张正午</a>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
<h2>联系方式</h2>
|
||
邮寄地址：xxx xxxx XXXX<br>
|
||
网站维护：<code>seven.two.eight@outlook.com</code>
|
||
</footer>
|
||
|
||
<div id="shade" onclick="close_info()"></div>
|
||
<div id="info">
|
||
<div id="stage">
|
||
<h3>活动状态</h3>
|
||
<span class="done">筹备</span>
|
||
➡ <span class="going">执行</span>
|
||
➡ <span class="plan">回访</span>
|
||
➡ <span class="plan">完成</span>
|
||
</div>
|
||
<div id="budget">
|
||
<h3>预算与当前支出</h3>
|
||
<table>
|
||
<tr>
|
||
<th>款项</th>
|
||
<th>预算</th>
|
||
<th>当前支出</th>
|
||
<th>备注</th>
|
||
</tr>
|
||
<tr>
|
||
<td>油漆</td>
|
||
<td>500</td>
|
||
<td>0</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>吊顶</td>
|
||
<td>500</td>
|
||
<td>500</td>
|
||
<td><a href="https://pan.baidu.com" target="_blank" rel="noopener">查看票据</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>地板贴</td>
|
||
<td>600</td>
|
||
<td>0</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>铝塑板</td>
|
||
<td>500</td>
|
||
<td>500</td>
|
||
<td><a href="https://pan.baidu.com" target="_blank" rel="noopener">查看票据</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>灯具</td>
|
||
<td>300</td>
|
||
<td>0</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>课桌椅</td>
|
||
<td>1000</td>
|
||
<td>0</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>人工</td>
|
||
<td>900</td>
|
||
<td>0</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>杂费</td>
|
||
<td>1700</td>
|
||
<td>0</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr style="color: var(--color-yellow); font-style: italic; font-weight: bold;">
|
||
<td>合计</td>
|
||
<td>6000</td>
|
||
<td>1000</td>
|
||
<td></td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div id="supporter">
|
||
<h3>支持者</h3>
|
||
<ul>
|
||
<li>徽章买家（1000名）：3000</li>
|
||
<li>其它：3000</li>
|
||
</ul>
|
||
<p style="color: var(--color-yellow);">* 待网站开放用户功能后，将邀请支持者注册账号，并展示支持者名单。</p>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
|
||
<script src="bind.js"></script>
|
||
|
||
</html>
|