diff --git a/src/assets/css/community/community.css b/src/assets/css/community/community.css
new file mode 100644
index 00000000..c0ef566d
--- /dev/null
+++ b/src/assets/css/community/community.css
@@ -0,0 +1,80 @@
+
+.base
+{
+  height: 100vh;
+  background-image: url("../../pictures/communityback.png");
+  background-size: 90%;
+  background-attachment: fixed;  /* 背景固定 */
+  background-position: -600px; /* 向左移动背景图像 50px */
+  background-position: center;  /* 可以选择让背景居中 */
+  z-index: -1; 
+}
+.touxiang
+{
+  position: absolute;
+  top:50%;
+  left:5%;
+  border-radius: 10px;
+  width: 50px;
+  height:50px;
+  transform: translateY(-50%)
+}
+.leftinfo
+{
+      background-color: rgba(255,255,255,0.8);
+      width: 15%;
+      position: fixed;
+      left:0%;
+      border: 3px solid  orchid;
+      height:100%;
+        
+}
+.rightheat
+{
+
+    background-color: rgba(255,255,255,0.8);
+    position: fixed;
+    right:0%;
+    width: 15%;
+    border: 3px solid  orchid;
+    height:100%;
+    
+}
+.familytitle
+{
+  position: absolute;
+  top:8%;
+  left:35%;
+  font-size: 14px;
+  font-weight: bold; 
+
+}
+.familycontent
+{
+  position: absolute;
+  bottom:12%;
+  left:35%;
+  font-size: 13px;
+
+}
+.Hotsearchnum{
+    border-radius: 50%;
+    width: 25px;
+    height: 25px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+.middle
+{
+  position: absolute;
+  left:50%;
+  transform: translateX(-50%);
+  width: 65%;
+  border: 3px solid  orchid;
+  height:100%;
+  z-index:1;
+}
+.post-list {
+   
+  }
diff --git a/src/views/community/trends.vue b/src/views/community/trends.vue
index 720cb78a..1b01c8f5 100644
--- a/src/views/community/trends.vue
+++ b/src/views/community/trends.vue
@@ -95,86 +95,8 @@
   </div>
   
 </template>
-<style scoped>
-.base
-{
-  height: 100vh;
-  background-image: url("../../assets/pictures/communityback.png");
-  background-size: 90%;
-  background-attachment: fixed;  /* 背景固定 */
-  background-position: -600px; /* 向左移动背景图像 50px */
-  background-position: center;  /* 可以选择让背景居中 */
-  z-index: -1; 
-}
-.touxiang
-{
-  position: absolute;
-  top:50%;
-  left:5%;
-  border-radius: 10px;
-  width: 50px;
-  height:50px;
-  transform: translateY(-50%)
-}
-.leftinfo
-{
-      background-color: rgba(255,255,255,0.8);
-      width: 15%;
-      position: fixed;
-      left:0%;
-      border: 3px solid  orchid;
-      height:100%;
-        
-}
-.rightheat
-{
-
-    background-color: rgba(255,255,255,0.8);
-    position: fixed;
-    right:0%;
-    width: 15%;
-    border: 3px solid  orchid;
-    height:100%;
-    
-}
-.familytitle
-{
-  position: absolute;
-  top:8%;
-  left:35%;
-  font-size: 14px;
-  font-weight: bold; 
-
-}
-.familycontent
-{
-  position: absolute;
-  bottom:12%;
-  left:35%;
-  font-size: 13px;
-
-}
-.Hotsearchnum{
-    border-radius: 50%;
-    width: 25px;
-    height: 25px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-.middle
-{
-  position: absolute;
-  left:50%;
-  transform: translateX(-50%);
-  width: 65%;
-  border: 3px solid  orchid;
-  height:100%;
-  z-index:1;
-}
-.post-list {
-   
-  }
+<style>
+  @import url('../../assets/css/community/community.css');
   </style>
 <script>
 import PostCard from '../../components/PostCard.vue';