mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-02-21 22:41:05 +08:00
feat: webui demo
This commit is contained in:
tim
@@ -1,4 +1,5 @@
|
||||
:root {
|
||||
--primary-color: rgb(9, 95, 105);;
|
||||
--header-height: 60px;
|
||||
--header-background-color: white;
|
||||
--header-border-color: lightgray;
|
||||
|
||||
@@ -1,6 +1,298 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
hello?
|
||||
<div class="search-container">
|
||||
<div class="search-title">Where possible begins</div>
|
||||
<div class="search-subtitle">希望你喜欢这里。有问题，请提问，或搜索现有帖子</div>
|
||||
<div class="search-input">
|
||||
<i class="search-input-icon fas fa-search"></i>
|
||||
<input type="text" placeholder="Search">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="topic-container">
|
||||
<div class="topic-item-container">
|
||||
<div class="topic-item selected">最新</div>
|
||||
<div class="topic-item">排行榜</div>
|
||||
<div class="topic-item">热门</div>
|
||||
<div class="topic-item">类别</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="article-container">
|
||||
<div class="article-item">
|
||||
<div class="article-main-container">
|
||||
<div class="article-item-title">各位佬，科研项目python语言适合什么ai编程？</div>
|
||||
<div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </div>
|
||||
<div class="article-info-container">
|
||||
<div class="article-info-item">
|
||||
<i class="fas fa-user"></i>
|
||||
<div class="article-info-item-text">开发调优</div>
|
||||
</div>
|
||||
|
||||
<div class="article-tags-container">
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">AI</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Python</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Java</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="article-member-avatars-container">
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-comments">
|
||||
139
|
||||
</div>
|
||||
<div class="article-views">
|
||||
2.4k
|
||||
</div>
|
||||
<div class="article-time">
|
||||
23小时前
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="article-item">
|
||||
<div class="article-main-container">
|
||||
<div class="article-item-title">各位佬，科研项目python语言适合什么ai编程？</div>
|
||||
<div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </div>
|
||||
<div class="article-info-container">
|
||||
<div class="article-info-item">
|
||||
<i class="fas fa-user"></i>
|
||||
<div class="article-info-item-text">开发调优</div>
|
||||
</div>
|
||||
|
||||
<div class="article-tags-container">
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">AI</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Python</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Java</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="article-member-avatars-container">
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-comments">
|
||||
139
|
||||
</div>
|
||||
<div class="article-views">
|
||||
2.4k
|
||||
</div>
|
||||
<div class="article-time">
|
||||
23小时前
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-item">
|
||||
<div class="article-main-container">
|
||||
<div class="article-item-title">各位佬，科研项目python语言适合什么ai编程？</div>
|
||||
<div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </div>
|
||||
<div class="article-info-container">
|
||||
<div class="article-info-item">
|
||||
<i class="fas fa-user"></i>
|
||||
<div class="article-info-item-text">开发调优</div>
|
||||
</div>
|
||||
|
||||
<div class="article-tags-container">
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">AI</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Python</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Java</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="article-member-avatars-container">
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-comments">
|
||||
139
|
||||
</div>
|
||||
<div class="article-views">
|
||||
2.4k
|
||||
</div>
|
||||
<div class="article-time">
|
||||
23小时前
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-item">
|
||||
<div class="article-main-container">
|
||||
<div class="article-item-title">各位佬，科研项目python语言适合什么ai编程？</div>
|
||||
<div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </div>
|
||||
<div class="article-info-container">
|
||||
<div class="article-info-item">
|
||||
<i class="fas fa-user"></i>
|
||||
<div class="article-info-item-text">开发调优</div>
|
||||
</div>
|
||||
|
||||
<div class="article-tags-container">
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">AI</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Python</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Java</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="article-member-avatars-container">
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-comments">
|
||||
139
|
||||
</div>
|
||||
<div class="article-views">
|
||||
2.4k
|
||||
</div>
|
||||
<div class="article-time">
|
||||
23小时前
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-item">
|
||||
<div class="article-main-container">
|
||||
<div class="article-item-title">各位佬，科研项目python语言适合什么ai编程？</div>
|
||||
<div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </div>
|
||||
<div class="article-info-container">
|
||||
<div class="article-info-item">
|
||||
<i class="fas fa-user"></i>
|
||||
<div class="article-info-item-text">开发调优</div>
|
||||
</div>
|
||||
|
||||
<div class="article-tags-container">
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">AI</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Python</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Java</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="article-member-avatars-container">
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-comments">
|
||||
139
|
||||
</div>
|
||||
<div class="article-views">
|
||||
2.4k
|
||||
</div>
|
||||
<div class="article-time">
|
||||
23小时前
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -14,6 +306,172 @@ export default {
|
||||
.home-page {
|
||||
background-color: white;
|
||||
color: black;
|
||||
height: 100%;
|
||||
height: calc(100vh - var(--header-height));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
margin-top: 100px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.search-title {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.search-subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
border: 1px solid lightgray;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.search-input input {
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.topic-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.topic-item-container {
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.topic-item {
|
||||
padding: 2px 10px;
|
||||
}
|
||||
|
||||
.topic-item.selected {
|
||||
color: var(--primary-color);
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.article-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.article-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid lightgray;
|
||||
}
|
||||
|
||||
.article-main-container {
|
||||
margin-left: 20px;
|
||||
padding: 10px 0;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.article-item-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.article-item-description {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.article-info-container {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.article-info-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.article-tags-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.article-tag-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.article-member-avatars-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.article-member-avatar-item {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.article-member-avatar-item-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.article-comments {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.article-views {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.article-time {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user