mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-07-24 21:46:09 +00:00
feat: webui demo
This commit is contained in:
tim
@@ -1,4 +1,5 @@
|
|||||||
:root {
|
:root {
|
||||||
|
--primary-color: rgb(9, 95, 105);;
|
||||||
--header-height: 60px;
|
--header-height: 60px;
|
||||||
--header-background-color: white;
|
--header-background-color: white;
|
||||||
--header-border-color: lightgray;
|
--header-border-color: lightgray;
|
||||||
|
|||||||
@@ -1,6 +1,298 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home-page">
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -14,6 +306,172 @@ export default {
|
|||||||
.home-page {
|
.home-page {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
color: black;
|
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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user