Jelajahi Sumber

feat: 交流item布局优化

icenaked 3 tahun lalu
induk
melakukan
129bc4160f

+ 2 - 1
src/views/CommunicationPage/PublishPage.vue

@@ -131,10 +131,11 @@ export default {
                     attachments:this.form.attachments,
                     publisherName:this.$store.state.user.username
                 };
+                console.log(communication);
                 this.$apis.postCommunication(communication).then(res=>{
                     ElMessage.success("发布成功");
                     // this.$router.go(0);
-                    this.$router.push("/communication/explore");
+                    this.$router.push("/communication/publish");
                 });
             });
         }

+ 25 - 19
src/views/CommunicationPage/components/ExploreItem.vue

@@ -1,23 +1,28 @@
 <template>
     <el-card class="explore-item" shadow="never">
 
-        <div class="explore-item-star" >
-          <el-tooltip placement="top-start" effect="light">
-            <template #content>
-              <p style="max-width:500px;">{{starersListString}}收藏了本交流</p>
-            </template>
-            <div>
-              <el-icon v-if="starred===false" style="font-size: 20px" @click="star()"><Star /></el-icon>
-              <el-icon v-if="starred===true" style="font-size: 20px;color: orange" @click="cancelStar()">
-                <StarFilled />
-              </el-icon>
-            </div>
-          </el-tooltip>
-        </div>
 
-        <div class="explore-item-description"  @click="this.$router.push('/communication/communicationDetail/' + this.communicationVO.id)">
-            <h1 class="description-title">{{ title}}</h1>
-            <div style="font-size: 14px;margin-top: 5px">
+
+        <div class="explore-item-description">
+
+          <div class="explore-item-star" >
+            <el-tooltip placement="top-start" effect="light">
+              <template #content>
+                <p style="max-width:500px;">{{starersListString}}收藏了本交流</p>
+              </template>
+              <div>
+                <el-icon v-if="starred===false" style="font-size: 20px" @click="star()"><Star /></el-icon>
+                <el-icon v-if="starred===true" style="font-size: 20px;color: orange" @click="cancelStar()">
+                  <StarFilled />
+                </el-icon>
+              </div>
+            </el-tooltip>
+          </div>
+
+            <h1 class="description-title"
+                @click="this.$router.push('/communication/communicationDetail/' + this.communicationVO.id)"
+            >{{ title}}</h1>
+            <div style="font-size: 14px;margin-top: 5px;margin-left: 10px;">
               <span style="color: var(--el-color-danger)" v-if="type==='PROBLEM'">难题</span>
               <span style="color: var(--el-color-success)" v-if="type==='NOTICE'">通知</span>
                 <span style="margin-left: 14px">{{ publisherName }}</span>
@@ -139,12 +144,12 @@ el-card {
   cursor: pointer;
 }
 .explore-item {
-    --explore-item-height: 130px;
+    --explore-item-height: 150px;
     height: var(--explore-item-height);
     border-radius: 10px;
     position: relative;
     cursor: pointer;
-    padding: 15px 5px 15px 15px;
+    padding: 5px 5px 15px 0;
 }
 
 .explore-item-description {
@@ -172,10 +177,11 @@ el-card {
     overflow: hidden;
     text-overflow: ellipsis;
     color: var(--el-color-info);
+    margin-left: 10px;
 }
 
 .description-title {
-    margin: 0;
+    margin: 0 0 0 10px;
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;