公告优化

src/views/bulletin/details.vue

@@ -12,9 +12,9 @@
         <span>{{ dateFormatFn(dataObj.createtime) }}</span>
       </div>
       <div class="content">
-        <div v-if="dataObj.img_url">
+        <!-- <div v-if="dataObj.img_url">
           <img :src="dataObj.img_url" class="image" alt="" />
-        </div>
+        </div> -->
         <div class="">
           <span v-html="dataObj.body"></span>
         </div>

src/views/bulletin/index.vue

@@ -14,35 +14,38 @@
     </van-tabs>
     <div v-if="list.length > 0" class="notice_box">
       <div class="notice" v-for="(item, index) in list" :key="index" @click="navigatorTo('bulletinDetail', item.id)">
-        <!-- <img class="notice_img" :src="item.img_url" alt="" v-if="item.img_url" /> -->
-        <span class="title">{{ item.title }}</span>
+        <img class="notice_img" :src="item.img_url" alt="" mode="widthFixed" v-if="item.img_url" />
         <div class="right">
-          <div class="tag_box">
-            <span class="tag" v-if="childActive == 0" :style="{ color: item.sub_type_name[0]?.color, backgroundColor: hexToRgbObject(item.sub_type_name[0]?.color) }">{{
-              item.sub_type_name[0]?.title
-            }}</span>
-            <span v-else>
-              <span v-for="(it, idx) in item.sub_type_name" :key="idx">
-                <span class="tag" v-if="it.id == childActive" :style="{ color: it.color, backgroundColor: hexToRgbObject(it.color) }">{{ it.title }}</span>
+          <span class="title">{{ item.title }}</span>
+
+          <div class="bott">
+            <div class="tag_box" v-if="item.sub_type_name.length > 0">
+              <span class="tag" v-if="childActive == 0" :style="{ color: item.sub_type_name[0]?.color, backgroundColor: hexToRgbObject(item.sub_type_name[0]?.color) }">{{
+                item.sub_type_name[0]?.title
+              }}</span>
+              <span v-else>
+                <span v-for="(it, idx) in item.sub_type_name" :key="idx">
+                  <span class="tag" v-if="it.id == childActive" :style="{ color: it.color, backgroundColor: hexToRgbObject(it.color) }">{{ it.title }}</span>
+                </span>
               </span>
+            </div>
+            <span class="time_text">
+              {{ dateFormatFn(item.createtime) }}
+              <span class="new" v-if="isToday(new Date(item.createtime * 1000))">New</span>
+              <svg t="1748345661681" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8571" width="9" height="9" v-if="item.is_top == 1">
+                <path
+                  d="M938.8032 640.256l-378.9312-503.2448c-17.408-25.8048-55.2448-26.4192-73.8816-1.1776l-398.7456 503.2448c-21.6064 30.0032-0.6144 72.0896 36.608 72.0896h187.392v233.6256c0 35.4304 28.8256 64.8704 64.8704 64.8704h270.848c35.4304 0 64.8704-28.8256 64.8704-64.8704V711.168h189.184c36.608-0.0512 58.2144-40.9088 37.7856-70.912z m0 0"
+                  p-id="8572"
+                  fill="#29b286"
+                ></path>
+                <path
+                  d="M126.8736 115.4048h768.6656c28.2112 0 51.0464-22.8352 51.0464-51.0464 0-28.2112-22.8352-51.0464-51.0464-51.0464H126.8736c-28.2112 0-51.0464 22.8352-51.0464 51.0464 0.0512 28.2112 22.8352 51.0464 51.0464 51.0464z m0 0"
+                  p-id="8573"
+                  fill="#29b286"
+                ></path>
+              </svg>
             </span>
           </div>
-          <span class="time_text">
-            <svg t="1748345661681" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8571" width="10" height="10" v-if="item.is_top == 1">
-              <path
-                d="M938.8032 640.256l-378.9312-503.2448c-17.408-25.8048-55.2448-26.4192-73.8816-1.1776l-398.7456 503.2448c-21.6064 30.0032-0.6144 72.0896 36.608 72.0896h187.392v233.6256c0 35.4304 28.8256 64.8704 64.8704 64.8704h270.848c35.4304 0 64.8704-28.8256 64.8704-64.8704V711.168h189.184c36.608-0.0512 58.2144-40.9088 37.7856-70.912z m0 0"
-                p-id="8572"
-                fill="#29b286"
-              ></path>
-              <path
-                d="M126.8736 115.4048h768.6656c28.2112 0 51.0464-22.8352 51.0464-51.0464 0-28.2112-22.8352-51.0464-51.0464-51.0464H126.8736c-28.2112 0-51.0464 22.8352-51.0464 51.0464 0.0512 28.2112 22.8352 51.0464 51.0464 51.0464z m0 0"
-                p-id="8573"
-                fill="#29b286"
-              ></path>
-            </svg>
-            <span class="new" v-if="isToday(new Date(item.createtime * 1000))">New</span>
-            {{ dateFormatFn(item.createtime) }}
-          </span>
         </div>
       </div>
     </div>
@@ -153,7 +156,7 @@ export default {
       this.$router.push({ name, query: { id: id } });
     },
     dateFormatFn(date) {
-      return dateFormat(new Date(date * 1000), 'yyyy-MM-dd hh:mm:ss');
+      return dateFormat(new Date(date * 1000), 'yyyy-MM-dd');
     },
     getAnnouncement() {
       let params = {
@@ -280,12 +283,12 @@ export default {
     // }
   }
   .notice_box {
-    padding: 16px;
+    padding: 14px;
   }
   .notice {
     position: relative;
     display: flex;
-    flex-direction: column;
+
     color: #000;
     font-size: 14px;
     letter-spacing: 0.8px;
@@ -294,15 +297,24 @@ export default {
     border-bottom: 0.5px solid rgba(190, 190, 190, 0.3);
     // box-shadow: 4px 4px 15px 0px rgba(180, 212, 212, 0.59);
     // background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.3) 100%, rgba(255, 255, 255, 0.3) 100%);
+
+    &_img {
+      width: 90px;
+      height: 58px;
+      border-radius: 4px;
+      margin-right: 8px;
+    }
+
     .title {
       font-weight: 600;
       min-height: 22px;
     }
     .right {
       display: flex;
-      align-items: center;
+      // align-items: center;
+      flex-direction: column;
       justify-content: space-between;
-      padding-top: 10px;
+      // padding-top: 10px;
 
       .tag_box {
         display: flex;
@@ -310,14 +322,18 @@ export default {
         flex-wrap: wrap;
         // width: 56%;
       }
-
+      .bott {
+        display: flex;
+        align-items: flex-end;
+        padding-top: 4px;
+      }
       .tag {
         font-size: 11px;
         // color: #3b98e4;
         padding: 1px 3px;
-        border-radius: 4px;
-        margin-left: 3px;
-        margin-bottom: 3px;
+        border-radius: 3px;
+        margin-right: 3px;
+        // margin-bottom: 3px;
         // background-color: rgba(#3b98e4, 0.2);
       }
 
@@ -325,7 +341,7 @@ export default {
         color: #b4b4b4;
         font-weight: normal;
         font-size: 11px;
-        margin-bottom: 3px;
+        // margin-bottom: 3px;
         white-space: nowrap;
       }
       .new {
@@ -333,7 +349,7 @@ export default {
         letter-spacing: 0;
         font-weight: 600;
         font-size: 10px;
-        padding: 0 4px;
+        padding-right: 4px;
       }
     }
     //svg {