feat: 交流发现页面组件通信与样式调整

src/views/CommunicationPage/ExplorePage/ExploreItem.vue

@@ -1,27 +1,55 @@
 <template>
     <el-card class="explore-item" shadow="never">
         <div class="explore-item-description">
-            <h1 class="description-title">[网络感知]手机热点随流高精度高性能的网络侧识别技术</h1>
-            <div style="font-size: 14px;">
-                <span>赵礼菁 </span>
-                <span>云核心网技术规划部 </span>
-                <span>zhaolifing@huawei.com </span>
-                <span style="color: var(--el-color-danger)">难题</span>
+            <h1 class="description-title">{{ title}}</h1>
+            <div style="font-size: 14px;margin-top: 5px">
+                <span style="color: var(--el-color-danger)">{{ type }}</span>
+                <span style="margin-left: 14px">{{ publisherName }}</span>
+                <span style="margin-left: 14px">{{ organization }}</span>
+                <span style="margin-left: 14px">{{ email }}</span>
+                <span style="margin-left: 14px">{{ publishTime }}~{{deadline}}</span>
             </div>
-            <p class="description-detail">技术背景
-                概念说明
-                手机热点共享 (Hotspot Sharing）功能是基于NAT原理实现的，前端手机可以将后台终端的内部私有网络地址
-                (IP地址）翻译成自己的对外IP地址，因此热点前后台的终端的流量对外体现均是同一个IP地址，以随机分配的不同端口区分不同流
-                手机热点识别商业场景与诉求
-                企业办公采用5G接入内网时，需要对办公终端通过手机热点接入内网进行严格管理精细化管控热点后设备的接入行为。运营商进行流量计费时，为避免流量损失，希望对通过手机热点接入多个设备的行为设置单独计费策略，提高收入。</p>
+            <p class="description-detail">{{ description }}</p>
         </div>
-        <img class="explore-item-img" src="@/assets/example.png">
+        <img class="explore-item-img" :src="photos">
     </el-card>
 </template>
 
 <script>
 export default {
-  name: "ExploreItem"
+  name: "ExploreItem",
+  props: {
+    communicationVO: Object,
+  },
+  computed: {
+    title() {
+      return this.communicationVO.title || "无标题";
+    },
+    publisherName() {
+      return this.communicationVO.publisherName;
+    },
+    organization() {
+      return this.communicationVO.organization || "无单位院系";
+    },
+    email() {
+      return this.communicationVO.email || "无邮箱";
+    },
+    type() {
+      return this.communicationVO.type;
+    },
+    description() {
+      return this.communicationVO.description || "无简介";
+    },
+    photos() {
+      return this.communicationVO.photos === null ? this.$variables.noImgUrl : this.communicationVO.photos;
+    },
+    publishTime(){
+      return this.communicationVO.publishTime;
+    },
+    deadline(){
+      return this.communicationVO.deadline;
+    },
+  },
 };
 </script>
 
@@ -36,6 +64,11 @@ el-card {
     border-radius: 10px;
     position: relative;
     cursor: pointer;
+    padding: 15px 5px 15px 15px;
+}
+
+.explore-item-description {
+
 }
 
 .explore-item-img {

src/views/CommunicationPage/ExplorePage/ExplorePage.vue

@@ -8,17 +8,28 @@
                     <el-checkbox v-for="type in types" :label="type" :key="type">{{ type }}</el-checkbox>
                 </el-checkbox-group>
             </div>
-            <div class="explore-search">
+
+          <div class="explore-sorter">
+            <el-select class="sort-select" style="width: 150px;" placeholder="排序方式" v-model="sort">
+              <template #prefix>
+                  <span style="padding-left: 5px;">
+                    <i class="el-icon-sort"></i>
+                  </span>
+              </template>
+              <el-option label="发布时间升序" value="publishAsc"></el-option>
+              <el-option label="发布时间降序" value="publishDesc"></el-option>
+              <el-option label="截止时间升序" value="deadlineAsc"></el-option>
+              <el-option label="截止时间降序" value="deadlineDesc"></el-option>
+            </el-select>
+          </div>
+
+          <div class="explore-search">
                 <el-input placeholder="请输入搜索内容" v-model="content"></el-input>
                 <el-button type="primary" style="margin-left: 10px">确认</el-button>
             </div>
         </div>
         <div class="explore-main">
-            <ExploreItem class="explore-item"/>
-            <ExploreItem class="explore-item"/>
-            <ExploreItem class="explore-item"/>
-            <ExploreItem class="explore-item"/>
-            <ExploreItem class="explore-item"/>
+            <ExploreItem class="explore-item" v-for="communication in communicationList" :key="communication.id" :communicationVO="communication" />
         </div>
     </div>
 </template>
@@ -38,6 +49,30 @@ export default {
       isIndeterminate: false,
       // explore-search
       content: "",
+      sort: "",
+      communicationList: [
+          {id: 1, title: "[网络感知]手机热点随流高精度高性能的网络侧识别技术", publisherName: "赵礼菁", organization: "云核心网技术规划部", email: "zhaolifing@huawei.com", type: "难题",
+            description: "技术背景企业办公采用5G接入内网时，需要对办公终端通过手机热点接入内网进行严格管理精细化管控热点后设备的接入行为。",
+            photos: "https://mjh1.oss-cn-hangzhou.aliyuncs.com/hci/no-image.png",
+            publishTime: "2022-09-10",
+            deadline: "2024-10-09"
+          },
+          {id: 2, title: "[网络感知]手机热点随流高精度高性能的网络侧识别技术", publisherName: "礼菁", organization: "云核心网技术规划部", email: "zhaolifing@huawei.com", type: "活动",
+            description: "技术背景企业办公采用5G接入内网时，需要对办公终端通过手机热点接入内网进行严格管理精细化管控热点后设备的接入行为。",
+            photos: "https://mjh1.oss-cn-hangzhou.aliyuncs.com/hci/no-image.png",
+            publishTime: "2022-09-10",
+            deadline: "2024-10-09"
+          },
+          {id: 3, title: "[网络感知]手机热点随流高精度高性能的网络侧识别技术", publisherName: "赵菁", organization: "云核心网技术规划部", email: "zhaolifing@huawei.com", type: "其他",
+            description: "技术背景企业办公采用5G接入内网时，需要对办公终端通过手机热点接入内网进行严格管理精细化管控热点后设备的接入行为。" +
+                "技术背景企业办公采用5G接入内网时，需要对办公终端通过手机热点接入内网进行严格管理精细化管控热点后设备的接入行为。" +
+                "技术背景企业办公采用5G接入内网时，需要对办公终端通过手机热点接入内网进行严格管理精细化管控热点后设备的接入行为。" +
+                "技术背景企业办公采用5G接入内网时，需要对办公终端通过手机热点接入内网进行严格管理精细化管控热点后设备的接入行为。",
+            photos: "https://mjh1.oss-cn-hangzhou.aliyuncs.com/hci/no-image.png",
+            publishTime: "2022-09-10",
+            deadline: "2024-10-09"
+          },
+          ]
     };
   },
   methods: {
@@ -64,6 +99,15 @@ export default {
     display: flex;
     justify-content: space-between;
     margin-bottom: 20px;
+    position: relative;
+}
+
+.explore-sorter{
+    /*display: flex;*/
+    /*align-items: center;*/
+    position: absolute;
+    left: 250px;
+    top: 5px;
 }
 
 .explore-search{