tst data #2
This commit is contained in:
@ -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>
|
||||
|
Reference in New Issue
Block a user