LiuShen/Friend-Circle-Lite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🦊去除渐变色，改用背景图片，添加箭头点击事件

Browse Source
This commit is contained in:
柳神 2024-09-27 23:23:51 +08:00
parent 399df46809
commit 9a9bb2df2c
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
static/index.html
View File

@ -11,6 +11,11 @@
</head> </head>
<style> <style>
body { body {
background-image: url('https://i.p-i.vip/30/20240927-66f6cb77cbd1b.webp');
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -23,7 +28,7 @@
height: fit-content; height: fit-content;
} }
.container { .container {
background: linear-gradient(135deg, #ffdaaa, #abc2e7); background: rgba(255, 255, 255, 0.8);
display: flex; display: flex;
text-align: center; text-align: center;
align-items: center; align-items: center;
@ -36,6 +41,8 @@
.root-container { .root-container {
width: 100%; width: 100%;
margin-top: 40px; margin-top: 40px;
max-width: 1100px;
padding: 40px;
} }
.avatar { .avatar {
@ -121,12 +128,12 @@
<img src="./favicon.ico" alt="Avatar" class="avatar"> <img src="./favicon.ico" alt="Avatar" class="avatar">
<p>Friend-Circle-Lite<br>服务已运行</p> <p>Friend-Circle-Lite<br>服务已运行</p>
<div class="button-container"> <div class="button-container">
<a href="https://blog.liushen.fun/posts/4dc716ec/" class="button">查看文档</a> <a href="https://blog.liushen.fun/posts/4dc716ec/" class="button" target="_blank">查看文档</a>
<a href="/all.json" class="button">测试接口</a> <a href="/all.json" class="button">测试接口</a>
</div> </div>
<a href="#" class="scroll-down-icon" id="scroll-down-button"></a> <a href="#" class="scroll-down-icon" id="scroll-down-button"></a>
</div> </div>
<div class="root-container" style="max-width: 1000px;"> <div class="root-container">
<div id="friend-circle-lite-root"></div> <div id="friend-circle-lite-root"></div>
</div> </div>
<script> <script>
@ -141,6 +148,14 @@
} }
} }
</script> </script>
<script>
const scrollButton = document.getElementById('scroll-down-button');
const targetElement = document.getElementById('friend-circle-lite-root');
scrollButton.addEventListener('click', function(event) {
event.preventDefault();
targetElement.scrollIntoView({ behavior: 'smooth' });
});
</script>
<link rel="stylesheet" href="./main/fclite.css"> <link rel="stylesheet" href="./main/fclite.css">
<script src="./main/fclite.js"></script> <script src="./main/fclite.js"></script>
</body> </body>