完成消息页静态

digital-park-web/digital-park/src/components/Pagination.vue

 <!-- 分页组件 -->
 <template>
-    <div class="">
+    <div class>
         <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
-            :current-page.sync="currentPage"
-            :page-size="10"
+            :current-page.sync="page"
+            :page-size="pageSize"
             layout="prev, pager, next,sizes, jumper"
-            :total="50"
+            :total="total"
         ></el-pagination>
     </div>
 </template>
 //例如：import 《组件名称》 from '《组件路径》';
 
 export default {
+    props: {
+        page: {
+            type: Number,
+            default: 1,
+        },
+        pageSize: {
+            type: Number,
+            default: 10,
+        },
+        total: {
+            type: Number,
+            default: 0,
+        },
+    },
     //import引入的组件需要注入到对象中才能使用
     components: {},
     data() {
         //这里存放数据
-        return {
-            currentPage: 3,
-        };
+        return {};
     },
     //监听属性 类似于data概念
     computed: {},
     methods: {
         handleSizeChange(val) {
             console.log(`每页 ${val} 条`);
+            this.$emit("handleSizeChange", val);
         },
         handleCurrentChange(val) {
             console.log(`当前页: ${val}`);
+            this.$emit("handleCurrentChange", val);
         },
     },
     //生命周期 - 创建完成（可以访问当前this实例）

digital-park-web/digital-park/src/router/hhr.js

 import product from './modules/product';
 // 物业相关
 import property from './modules/property';
+// 我的相关
+import myRelated from './modules/my-related';
 export default [
     {
         path: "*",
     ...login,
     ...product,
     ...property,
+    ...myRelated,
 ];

digital-park-web/digital-park/src/router/modules/my-related.js

+/**
+ *
+ * 我的相关
+ *
+ */
+
+ export default [
+    // 我的消息
+    {
+        path: "/my-message",
+        name: "MyMessage",
+        component: () =>
+            import ("../../views/my-related/mseeage/Message.vue"),
+        meta: {
+            title: "我的消息",
+        },
+    },
+];

digital-park-web/digital-park/src/views/my-related/mseeage/Message.scss

+.my-message[data-1664346848130] {
+    background: #f9f9f9;
+    .message-header {
+        background: #1878cc;
+    }
+    .message-content-container {
+        width: 1200px;
+        margin: 0 auto;
+        margin-top: 30px;
+        margin-bottom: 20px;
+        .title {
+            height: 30px;
+            line-height: 30px;
+            .title-span {
+                @include font(18px, #334a5f);
+                margin-left: 10px;
+                font-weight: bold;
+            }
+        }
+
+        .table-box {
+            margin-top: 20px;
+            background: #fff;
+            padding: 30px;
+            color: #334a5f;
+            .table-title {
+                height: 22px;
+                line-height: 22px;
+                margin-bottom: 10px;
+                .title-span {
+                    @include font(18px, #334a5f);
+                    font-weight: bold;
+                }
+                .unread-num {
+                    @include font(16px, #d9121a);
+                }
+                .mark-read {
+                    @include font(18px, #0086e7);
+                    cursor: pointer;
+                }
+            }
+            .table-container {
+                border: 1px solid #bce1ff;
+                border-bottom: 0;
+                border-top: 2px solid #bce1ff;
+                .block-table {
+                    width: 100%;
+                    th {
+                        background: #f2f7fb;
+                        border-color: #bce1ff;
+                        height: 80px;
+                        @include font(16px, #334a5f);
+                    }
+                    td {
+                        border-color: #bce1ff;
+                        height: 50px;
+                        @include font(16px, #334a5f);
+                        cursor: pointer;
+                    }
+                    .checked-column {
+                        .cell {
+                            text-overflow: initial;
+                        }
+                    }
+                    &::before {
+                        background-color: #bce1ff;
+                    }
+                    .check-span {
+                        display: inline-block;
+                        width: 20px;
+                        height: 20px;
+                        box-sizing: border-box;
+                        border: solid 1px #bce1ff;
+                        position: relative;
+                        top: 3px;
+                        cursor: pointer;
+                        user-select: none;
+                        img {
+                            position: absolute;
+                            left: 2px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .pagination_box {
+            text-align: right;
+            margin-top: 10px;
+        }
+    }
+    .detail-dialog {
+        .el-dialog {
+            border-radius: 6px;
+        }
+        .el-dialog__header {
+            display: none;
+        }
+        .el-dialog__body {
+            border-radius: 6px;
+            padding-top: 20px;
+            position: relative;
+            background: linear-gradient(to bottom, #cde8fb, #fff);
+            .close-icon {
+                position: absolute;
+                right: 19px;
+                height: 21px;
+                cursor: pointer;
+            }
+            .dialog-title {
+                @include font(24px, #334a5f);
+                font-weight: bold;
+                line-height: 33px;
+            }
+            .detial-title {
+                margin-top: 30px;
+                @include font(24px, #0086e7);
+                text-align: center;
+            }
+            .detial-content {
+                margin-top: 18px;
+                @include font(16px, #334a5f);
+                line-height: 34px;
+            }
+            .detial-link {
+                margin-top: 16px;
+                @include font(16px, #0086e7);
+                font-family: Alibaba-PuHuiTi;
+                text-decoration: underline;
+                cursor: pointer;
+            }
+        }
+    }
+    .fl {
+        float: left;
+    }
+    .fr {
+        float: right;
+    }
+}

digital-park-web/digital-park/src/views/my-related/mseeage/Message.vue

+<template>
+    <div class="my-message" data-1664346848130>
+        <div class="message-header">
+            <Nav />
+        </div>
+        <div class="message-content-container">
+            <div class="title">
+                <img src="~@assets/image/myRelated/titleIcon.png" class="title-icon fl" alt="icon" />
+                <span class="title-span fl">我的消息</span>
+            </div>
+            <div class="table-box">
+                <div class="table-title">
+                    <span class="title-span fl">我的消息</span>
+                    <span class="unread-span">
+                        （你有
+                        <span class="unread-num">1172</span>条未读通知）
+                    </span>
+                    <span class="mark-read fr">全部标记已读</span>
+                </div>
+                <div class="table-container">
+                    <el-table class="block-table" :data="tableData" @row-click="openDetail">
+                        <el-table-column width="34" :align="'center'" class-name="checked-column">
+                            <template slot-scope="scope">
+                                <span class="check-span" @click.stop="changeCheck(scope.row)">
+                                    <img
+                                        v-if="scope.row.v0"
+                                        src="~@assets/image/myRelated/checked.png"
+                                        alt="checkOk"
+                                    />
+                                </span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            :label="item.label"
+                            v-for="(item,inx) of tableColumn"
+                            :key="inx"
+                            :width="item.width"
+                            :show-overflow-tooltip="true"
+                        >
+                            <template slot-scope="scope">{{ scope.row[item.prop] }}</template>
+                        </el-table-column>
+                    </el-table>
+                </div>
+                <div class="pagination_box">
+                    <Pagination></Pagination>
+                </div>
+            </div>
+        </div>
+        <!-- 通知详情 -->
+        <el-dialog
+            :visible.sync="detailDialog.isShow"
+            :close-on-click-modal="false"
+            class="detail-dialog"
+            :show-close="false"
+        >
+            <span class="close-icon" @click="detailDialog.isShow = false">
+                <img src="~@assets/image/myRelated/closeIcon.png" alt="close" />
+            </span>
+            <div class="dialog-title">通知详情</div>
+            <div class="detial-title">个独企业重要消息告知</div>
+            <div class="detial-content">{{ detailDialog.row.v2 }}</div>
+            <div class="detial-link">http://www.hhrchina.com/customer/msgCenter.html?page=2</div>
+        </el-dialog>
+        <Footer />
+    </div>
+</template>
+
+<script>
+import "./Message.scss";
+import Nav from "@components/Header.vue";
+import Footer from "@components/Footer.vue";
+import Pagination from "@components/Pagination.vue";
+export default {
+    components: { Nav, Footer, Pagination },
+    data() {
+        return {
+            tableColumn: [
+                {
+                    label: "通知时间",
+                    prop: "v1",
+                    width: 160,
+                },
+                {
+                    label: "标题",
+                    prop: "v2",
+                },
+                {
+                    label: "类型",
+                    prop: "v3",
+                    width: 120,
+                },
+                {
+                    label: "是否已读",
+                    prop: "v4",
+                    width: 100,
+                },
+            ],
+            tableData: [
+                {
+                    v0: false,
+                    v1: "2021.02.09 14:07",
+                    v2: "入驻产品审核通过收到入驻产品审核通过收到入驻产品审核通过收到（详情内含有链接）入驻产品审核通过收到入驻产品审核通过收到入驻产品审核通过收到（详情内含有链接）",
+                    v3: "政策宣传",
+                    v4: "未读",
+                },
+                {
+                    v0: true,
+                    v1: "2021.02.09 14:07",
+                    v2: "入驻产品审核通过收到入驻产品审核通过收到入驻产品审核通过收到（详情内含有链接）",
+                    v3: "政策宣传",
+                    v4: "未读",
+                },
+            ],
+            detailDialog: {
+                isShow: false,
+                row: {
+                    msg: "位于市中心国家级高科技产业园~静安多媒体谷近日入驻禾获仁平台，园区是一个以发展新兴科技产业为主，集创意创新、企业孵化、创业服务，创新人才培育、科技成果转化等功能为一体的高科技园区。静安多媒体谷园区注册产品，若您在业务办理方面遇到任何问题，可直接与禾获仁平台在线客服咨询。",
+                },
+            },
+        };
+    },
+    methods: {
+        // 单元格点击
+        changeCheck(row) {
+            row.v0 = !row.v0;
+        },
+        // 打开详情弹框
+        openDetail(row) {
+            this.detailDialog.isShow = true;
+            this.detailDialog.row = this.$cloneDeep(row);
+        },
+    },
+};
+</script>

digital-park-web/digital-park/src/views/property/detail/PropertyDetail.vue

                     :key="inx"
                 >
                     <template slot-scope="scope">
-                        <div v-if="item.prop == 'img'">
-                            <span class="img-icon"></span>
-                        </div>
-                        <div v-else>{{ scope.row[item.prop] }}</div>
+                        {{ scope.row[item.prop] }}
                     </template>
                 </el-table-column>
             </el-table>
         </div>
         <Footer></Footer>
         <!-- video预览 -->
-        <el-dialog :visible.sync="videoPreview.isShow">
+        <el-dialog :visible.sync="videoPreview.isShow" :close-on-click-modal="false">
             <video
                 width="100%"
                 :src="videoPreview.src"
                     label: "打印/复印",
                     type: 7,
                 },
+                {
+                    label: "接发传真",
+                    type: 8,
+                },
             ],
             // 视频预览
             videoPreview: {