u

2025-12-21 22:34:51 +08:00
1 parent 898d209594
commit 0189bf89c9
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+</script>
+
+<template>
+  <div>123</div>
+</template>
+
+<style lang="scss" scoped>
+//
+</style>
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <div class="" />
+</template>
+
+<style lang="scss" scoped>
+//
+</style>
@@ -0,0 +1,146 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import CustomLoading from '@/components/custom-loading/index.vue'
+import CustomEmpty from '@/components/CustomEmpty.vue'
+
+const loading = ref<boolean>(false)
+
+const dataResult = ref<BasePageResult<any>>({
+  total: 0,
+  records: [],
+})
+</script>
+
+<template>
+  <div v-if="loading">
+    <CustomLoading />
+  </div>
+  <CustomEmpty v-else-if="dataResult.total === 0" title="🍵 帖子空空如也" sub-title="快来创建第一个贴子吧">
+    <template #extra>
+      <el-button type="primary">
+        创建帖子
+      </el-button>
+    </template>
+  </CustomEmpty>
+
+
+  <div v-else class="post-container">
+
+</div>
+</template>
+
+<style lang="scss" scoped>
+.post-container {
+  height: 100%;
+  margin-bottom: 40px;
+}
+
+.post-list {
+  display: flex;
+  flex-direction: column;
+}
+.post-item {
+  width: 100%;
+  display: flex;
+  gap: 16px;
+  padding: 16px;
+  background-color: #ffffff;
+  transition: all 0.3s ease;
+  border-bottom: 1px solid #f6f6f6;
+}
+.post-content {
+  display: flex;
+  gap: 16px;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+}
+.post-title {
+  font-weight: blod;
+  font-size: 18px;
+  width: 500px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #005da6;
+  text-decoration: underline;
+  font-weight: bold;
+  cursor: pointer;
+}
+.post-title:hover {
+  color: #fa8c16;
+}
+.post-summary {
+  font-size: 13px;
+  color: #999;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+
+  line-clamp: 2;
+  box-orient: vertical;
+}
+.post-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+.post-meta {
+  display: flex;
+  color: #777;
+  .post-meta-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 14px;
+  }
+}
+.post-author {
+  max-width: 300px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+}
+
+.post-tags {
+  max-width: 300px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  .post-tag {
+    background-color: #165dff;
+    border-radius: 2px;
+    font-size: 10px;
+    padding: 4px 8px;
+    text-align: center;
+    color: #ffffff;
+    display: inline-block;
+    line-height: 12px;
+    max-width: 80px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.post-cover {
+  width: 180px;
+  overflow: hidden;
+  max-height: 140px;
+  min-height: 120px;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+.spin-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 24px 0px;
+}
+</style>
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <div class=""></div>
+</template>
+
+<style lang="scss" scoped>
+//
+</style>
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import Nav from './components/nav.vue' // 导航栏组件
+import PostList from './components/post-list.vue' // 帖子列表组件
+import Sidebar from './components/sidebar.vue' // 推荐组件
+</script>
+
+<template>
+  <div class="post">
+    <Nav class="nav" />
+    <PostList class="post-list" />
+    <Sidebar class="sidebar" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.post {
+  display: flex;
+  padding: 0px 60px;
+  width: 100%;
+}
+.nav {
+  width: 200px;
+}
+.sidebar {
+  width: 250px;
+  margin-left: 20px;
+}
+.post-list {
+  flex: 1;
+}
+</style>