frontend: add community
Change-Id: I929c21d82ddab39d8b210b229ff7559320c1d853
diff --git a/src/app/globals.scss b/src/app/globals.scss
new file mode 100644
index 0000000..77fe0da
--- /dev/null
+++ b/src/app/globals.scss
@@ -0,0 +1,170 @@
+$function-button-color: #93C4C1;
+$nomal-button-color: #526665;
+$heading-color: #2c3e50;
+$subheading-color: #93C4C1;
+$icon-color: #93C4C1;
+$background-color: #F0F4F7;
+
+.container {
+ display: flex;
+ flex-direction: column;
+ background-color: $background-color;
+ min-height: 100vh;
+}
+
+.toolbar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 2rem;
+ background-color: #FFF;
+ position: sticky;
+ top: 0;
+ z-index: 1000;
+
+}
+
+// ##第一部分：logo-name
+.logo-name {
+ display: flex;
+ align-items: center;
+ gap: 2rem;
+
+ .logo {
+ width: 40px;
+ height: 40px;
+ }
+
+ .name {
+ font-size: 3rem;
+ font-weight: bold;
+ color: #333;
+ }
+}
+
+// ##第二部分：tools
+.tools {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+
+}
+
+.tools {
+ display: flex;
+ align-items: center;
+ gap: 2rem;
+ .no-underline {
+ text-decoration: none;
+ }
+ .tool-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.25rem;
+
+ i {
+ font-size: 1.25rem;
+ color: $icon-color;
+ }
+
+ span {
+ font-size: 0.75rem;
+ color: #333;
+ }
+ }
+
+ .p-avatar {
+ margin-left: 1rem;
+ }
+}
+
+.logo-name {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+
+ .logo {
+ width: 40px;
+ height: 40px;
+ }
+
+ .name {
+ font-size: 1.25rem;
+ font-weight: bold;
+ }
+}
+
+// 全局容器样式
+.main-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 2rem;
+}
+
+//TabView组件样式
+.p-tabview {
+ background-color: #F0F4F7;
+}
+
+.p-tabview-panels {
+ background-color: #F0F4F7;
+}
+
+.p-tabview-nav {
+ background-color: #F0F4F7;
+}
+
+.p-tabview-nav-link {
+ background-color: #F0F4F7;
+}
+
+//分页样式
+.Paginator {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #F0F4F7;
+
+ // 高亮状态的分页按钮
+ .p-highlight {
+ background-color: rgba(182, 238, 235, 0.4) !important;
+ color: #768786 !important;
+ border-color: #768786 !important;
+ }
+}
+
+// 大标题样式
+h1,
+.heading,
+.title {
+ color: $heading-color;
+ font-size: 2rem;
+ font-weight: bold;
+}
+
+
+// 搜索栏样式
+.communities-searchBar {
+ max-width: 600px;
+ margin: 2rem auto;
+ position: relative;
+
+ .pi-search {
+ position: absolute;
+ color: $icon-color;
+ left: 1rem;
+ top: 50%;
+ transform: translateY(-50%);
+ z-index: 1;
+ }
+
+ .search-helper {
+ width: 100%;
+ height: 3rem;
+ padding-left: 2.5rem;
+ border-radius: 1.5rem;
+ font-size: 1.1rem;
+ border: 1px solid #ddd;
+ }
+}
\ No newline at end of file