朱思禹提交：消息处理页面框架

src/views/superFusionPlatform/main.js

@@ -16,7 +16,7 @@ import Cookie from '../../global-llibs/cookie';
 import BaseConfig from '../../global-llibs/base-config';
 import axiosConfig from '../../global-llibs/axios-config';
 const MyIcon = Icon.createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_2679650_bdamgvef8q.js', // 在 iconfont.cn 上生成
+  scriptUrl: '//at.alicdn.com/t/font_2679650_wtofwquox3a.js', // 在 iconfont.cn 上生成
 });
 Vue.use(Toast);
 Vue.use(VueBus);

src/views/superFusionPlatform/mainPlatform/topBar/TopBar.vue

@@ -103,12 +103,19 @@
                     case 'returnToMain':
                         break;
                     case 'noticeRemind':
+                        this.$set(this.modalProps,'modalTitle','消息');
+                        this.$set(this.modalProps,'modalWidth','800px');
+                        this.$set(this.modalProps,'modalClassName','notice-style')
+                        this.$set(this.modalProps,'OKButton',false);
+                        this.$set(this.modalProps,'show',true);
+                        this.modalUrl = "messageProcessing/MessageProcessMain.vue"
                         break;
                     case 'mail':
                         break;
                     case 'setting':
                         this.$set(this.modalProps,'modalTitle','版面设置');
                         this.$set(this.modalProps,'modalWidth','772px');
+                        this.$set(this.modalProps,'modalClassName','')
                         this.$set(this.modalProps,'show',true);
                         this.params={layout:this.layoutData}
                         this.modalUrl = "mainPlatform/moduleAndLayout/ModuleAndLaySetting.vue"
@@ -164,6 +171,11 @@
 </script>
 
 <style lang="scss">
+    .notice-style{
+        .ant-modal-header{
+            padding-left: 55px !important;
+        }
+    }
     #he-plugin-simple{
         z-index: 1;
     }

src/views/superFusionPlatform/messageProcessing/MessageProcessMain.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="message-processing-style">
+        <a-icon type="bell" class="title-icon-style"></a-icon>
+        <div class="left-bar-style">
+            <div class="icon-container-style" :style="{backgroundColor:selectedType === 'notice'?'#cccccc':null}"
+            @click="leftBarClick('notice')">
+                <my-icon type="icon-talk" class="icon-style"></my-icon>
+                <div class="name-style">消息</div>
+            </div>
+            <div class="icon-container-style" :style="{backgroundColor:selectedType === 'mailList'?'#cccccc':null}"
+                 @click="leftBarClick('mailList')">
+                <my-icon type="icon-mailList" class="icon-style" style="font-size: 30px;color:#31a8fa"></my-icon>
+                <div class="name-style">通讯录</div>
+            </div>
+            <div class="icon-container-style" :style="{backgroundColor:selectedType === 'file'?'#cccccc':null}"
+                 @click="leftBarClick('file')">
+                <my-icon type="icon-folder" class="icon-style" style="font-size: 30px"></my-icon>
+                <div class="name-style">文件</div>
+            </div>
+        </div>
+        <div class="content-style">
+        </div>
+    </div>
+</template>
+
+<script>
+    import {Icon} from 'ant-design-vue';
+    export default {
+        name: "MessageProcessMain",
+        data:function(){
+            return{
+                selectedType:'notice'
+            }
+        },
+        methods:{
+            leftBarClick:function(id){
+                this.selectedType = id;
+            }
+        },
+        components:{
+            AIcon:Icon,
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    /deep/.ant-modal-header{
+        padding-left: 35px;
+    }
+    .message-processing-style{
+        width: 100%;
+        display: flex;
+        height: 500px;
+        /*position: relative;*/
+        .title-icon-style{
+            position: absolute;
+            font-size: 20px;
+            color: white;
+            top: 10px;
+            left: 27px;
+        }
+        .left-bar-style{
+            display: flex;
+            padding-top: 10px;
+            flex-direction: column;
+            align-items: center;
+            align-content: center;
+            width: 65px;
+            height: 100%;
+            background-color: #F8F9FB;
+            border-bottom-left-radius: 14px;
+            border-right: 1px solid #e5e5e5;
+            .icon-container-style{
+                display: flex;
+                flex-direction: column;
+                align-content: center;
+                align-items: center;
+                justify-content: center;
+                justify-items: center;
+                width: 45px;
+                height: 50px;
+                margin-bottom: 10px;
+                cursor: pointer;
+                .icon-style{
+                    font-size: 25px;
+                    color:#31a8fa;
+                }
+                .name-style{
+                    width: 100%;
+                    font-size: 12px;
+                    text-align: center;
+                    color:#221815;
+                }
+                &:hover{
+                    background-color: #eee;
+                }
+                &:nth-last-of-type(1){
+                    margin-bottom: 0;
+                }
+            }
+        }
+        .content-style{
+            width: calc(100% - 66px);
+            height: 100%;
+            position: relative;
+            .bar-style{
+                position: absolute;
+                width:100px;
+                height: 32px;
+
+            }
+        }
+    }
+</style>