This commit is contained in:
728
2022-08-13 13:44:37 +08:00
parent ea3066700e
commit c6e0ad0b37

View File

@ -174,6 +174,27 @@
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%;
@ -224,6 +245,7 @@
}
#shade {
display: none;
position: fixed;
z-index: 100;
top: 0;
@ -231,19 +253,20 @@
width: 100%;
height: 100%;
background: black;
transition: var(--transition);
opacity: 0.3;
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: 20vh;
height: 60vh;
top: 25vh;
max-height: 60vh;
left: 20vw;
width: 60vw;
overflow-y: scroll;
@ -329,6 +352,27 @@
</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>
@ -352,23 +396,23 @@
<span>公示时间: 2022-08-12 12:34:56<br>更新时间: 2022-08-12 12:34:56</span>
</div>
<div class="stat">
<div>
<div onclick="info('stage')">
<div class="item">活动状态</div>
<div class="value">执行中</div>
</div>
<div>
<div class="item">预算</div>
<div onclick="info('budget')">
<div class=" item">预算</div>
<div class="value">6000</div>
</div>
<div>
<div class="item">收到支持</div>
<div onclick="info('supporter')">
<div class=" item">收到支持</div>
<div class="value final">6000</div>
</div>
<div>
<div onclick="info('budget')">
<div class="item">当前支出</div>
<div class="value">1000</div>
</div>
<div>
<div onclick="info('supporter')">
<div class="item">支持者</div>
<div class="value final">1000</div>
</div>
@ -379,9 +423,41 @@
<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
@ -394,7 +470,7 @@
<article>
<header>
<div class="title">
<code><a href="#0">#1</a></code>
<code><a href="#0">#0</a></code>
<h1><a href="#0">网站说明</a></h1>
</div>
<div class="tag">
@ -426,16 +502,21 @@
</article>
<article>
<h3>相关链接</h3>
<p>Some text..</p>
<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"></div>
<div id="shade" onclick="close_info()"></div>
<div id="info">
<div id="stage">
<h3>活动状态</h3>
@ -463,7 +544,7 @@
<td>吊顶</td>
<td>500</td>
<td>500</td>
<td><a href="">查看票据</a></td>
<td><a href="https://pan.baidu.com" target="_blank" rel="noopener">查看票据</a></td>
</tr>
<tr>
<td>地板贴</td>
@ -475,7 +556,7 @@
<td>铝塑板</td>
<td>500</td>
<td>500</td>
<td><a href="">查看票据</a></td>
<td><a href="https://pan.baidu.com" target="_blank" rel="noopener">查看票据</a></td>
</tr>
<tr>
<td>灯具</td>