diff --git a/Yi.Bbs.Vue3/src/apis/dictionaryApi.js b/Yi.Bbs.Vue3/src/apis/dictionaryApi.js
new file mode 100644
index 00000000..23a0b926
--- /dev/null
+++ b/Yi.Bbs.Vue3/src/apis/dictionaryApi.js
@@ -0,0 +1,13 @@
+import request from "@/config/axios/service";
+
+/**
+ * 根据字典类型获取字典列表
+ * @param {*} dicType 字典类型
+ * @returns
+ */
+export function getDictionaryList(dicType) {
+  return request({
+    url: `/dictionary/dic-type/${dicType}`,
+    method: "get",
+  });
+}
diff --git a/Yi.Bbs.Vue3/src/components/ScrollbarInfo.vue b/Yi.Bbs.Vue3/src/components/ScrollbarInfo.vue
index 77c2b628..2f4c9e9b 100644
--- a/Yi.Bbs.Vue3/src/components/ScrollbarInfo.vue
+++ b/Yi.Bbs.Vue3/src/components/ScrollbarInfo.vue
@@ -1,28 +1,51 @@
 <template>
-         <el-scrollbar>
+  <el-scrollbar>
     <div class="scrollbar-flex-content">
-      <p v-for="item in 50" :key="item" class="scrollbar-item">
-        推荐
-      </p>
+      <div v-for="item in recommendList" :key="item.id" class="scrollbar-item">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="item.dictLabel"
+          placement="top"
+          v-if="item.dictLabel.length > 5"
+        >
+          {{ item.dictLabel.slice(0, 5) + "..." }}
+        </el-tooltip>
+        <span v-else>
+          {{ item.dictLabel }}
+        </span>
+      </div>
     </div>
   </el-scrollbar>
-    </template>
-    <style scoped>
+</template>
 
+<script setup>
+import { onMounted, ref } from "vue";
+import { getDictionaryList } from "@/apis/dictionaryApi.js";
+
+const recommendList = ref([]);
+onMounted(async () => {
+  const { data } = await getDictionaryList("bbs_type_lable");
+  recommendList.value = data;
+});
+</script>
+
+<style scoped>
 .scrollbar-flex-content {
   display: flex;
 }
 .scrollbar-item {
+  cursor: pointer;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 4rem;
   height: 2.6rem;
-  margin: 0 0.2rem ;
+  margin: 0 0.2rem;
   text-align: center;
   border-radius: 4px;
-  background-color:#FAFAFA;
+  background-color: #fafafa;
   font-size: 14px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/Yi.Bbs.Vue3/src/main.js b/Yi.Bbs.Vue3/src/main.js
index 2864f4e4..a79ed59d 100644
--- a/Yi.Bbs.Vue3/src/main.js
+++ b/Yi.Bbs.Vue3/src/main.js
@@ -5,6 +5,7 @@ import App from "./App.vue";
 import router from "./router";
 import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 
+import "element-plus/dist/index.css";
 import "./assets/main.css";
 import "@/assets/styles/index.scss"; // global css