显示公告

src/views/demo/home/index.vue

@@ -40,7 +40,7 @@
         </div>
         <a-spin tip="加载中..." :spinning="loading">
           <div class="content-list">
-            <div class="content-list-item" v-for="item in showList">
+            <div class="content-list-item" v-for="item in showList" @click="showContent(item)">
               <div style="display: flex; align-items: center;">
                 <div class="list-icon"></div>
                 <div class="list-title">{{getShowType(item.BiddingType)}}｜{{ item.Title }}</div>
@@ -51,6 +51,18 @@
         </a-spin>
       </div>
     </div>
+    <a-modal
+      v-model:open="announcementModal"
+      width="100%"
+      wrap-class-name="announcement-modal"
+      :footer="null"
+    > 
+      <h1 style="text-align: center;">{{ showAnnouncement.title }}</h1>
+      <h3 style="text-align: center;">{{ `${showAnnouncement.type }  ${showAnnouncement.time}` }}</h3>
+      <div style="white-space: pre-wrap;">
+        {{ showAnnouncement.content }}
+      </div>
+    </a-modal>
   </div>
 </template>
 
@@ -66,6 +78,14 @@ const type = ref(0)
 const bidtype = ref(null)
 const showList = ref([])
 const loading = ref(false)
+const announcementModal = ref(false)
+const showAnnouncement = ref({
+  title:'',
+  content:'',
+  time:'',
+  type:'',
+  projectName: '',
+})
 const changeMenu = (value) => {
   type.value = value
   query()
@@ -98,6 +118,14 @@ const getShowType = (type) => {
       return type
   }
 }
+const showContent = (item) => {
+  showAnnouncement.value.title = item.Title
+  showAnnouncement.value.content = item.Content
+  showAnnouncement.value.time = item.CreateTime
+  showAnnouncement.value.type = item.BiddingType
+  showAnnouncement.value.projectName = item.ProjectName
+  announcementModal.value = true
+}
 </script>
 
 <style lang="scss" scoped>
@@ -273,6 +301,7 @@ const getShowType = (type) => {
           line-height: 34px;
         }
         .list-time{
+          min-width: 118px;
           font-family: PingFangSC-Medium;
           font-weight: 500;
           font-size: 16px;
@@ -294,3 +323,24 @@ const getShowType = (type) => {
   }
 }
 </style>
+<style lang="scss">
+.announcement-modal {
+  .ant-modal {
+    max-width: 100%;
+    top: 0;
+    padding-bottom: 0;
+    margin: 0;
+  }
+  .ant-modal-content {
+    height: calc(100vh);
+  }
+  .ant-modal-body {
+    padding-top: 50px;
+    padding-left: 80px;
+    padding-top: 50px;
+    
+    height: 100%;
+    overflow: auto;
+  }
+}
+</style>