xiaoxi

assets/css/custom.less

@@ -12,6 +12,12 @@
 @home-mene: #2680eb;
 @layout-header: #515A6E;
 
+//bady颜色
+@layout-content-bg-color: #fff;
+@card-bg: #fff;
+
+//收藏夹自体图标颜色
+@icon-color: #2680eb;
 
 //弹框颜色
 @modal-header-bg-color: #515A6E;

assets/css/iview-reset.less

@@ -11,7 +11,7 @@
 }
 
 .ivu-layout-content {
-  background-color: #fff;
+  background-color: @layout-content-bg-color;
 }
 
 .ivu-modal-wrap * {
@@ -77,6 +77,10 @@
   float: left;
 }
 
+.ivu-card-body {
+  background-color: @card-bg;
+}
+
 /* tab颜色为绿色 */
 .ivu-tabs-nav .ivu-tabs-tab-active {
   color: @primary-color;
@@ -272,10 +276,12 @@
   width: 300px;
   height: 25px;
 }
+
 //顶部导航
-.ivu-layout-header{
+.ivu-layout-header {
   background-color: @layout-header  !important;
 }
+
 //重新定义弹框的footer--[工艺规程管理有用到]
 .model_footer {
   border-top: 1px solid #e8eaec;

pages/home/component/materielChart.vue

@@ -196,8 +196,9 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+@import "../../../assets/css/custom.less";
 .stachart {
-  background: rgba(255, 255, 255, 1);
+  background: @card-bg;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
   border-radius: 8px;
   padding: 10px;

pages/home/component/message.vue

+<template>
+    <div class="msg-main">
+         <p class="title">发送时间：{{msg.creationTime}}   <span class="fr">发送人：<User :value="msg.senderId"/></span>
+         </p>
+      <div class="content" v-html="msg.content"></div>
+      <div v-if="msg.attachment" class="file">
+          附件：
+      </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: '',
+        data() {
+            return {
+                msg:{}
+            }
+        },
+        mounted(){
+            this.load();
+        },
+        methods:{
+            load(){
+                this.$api.get(`${systemUrl}/usermessage/read`,{id:this.eid}).then(r=>{
+                    this.msg=r.result;
+                })
+            }
+        },
+        props:["eid"],
+        watch:{
+            eid(v,o){
+                if(v){
+                    this.load();
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="less">
+    .msg-main{
+        .title{
+            font-size:14px;
+            line-height: 45px;
+        }
+        .content{
+            padding: 10px 20px;
+        }
+        .file{
+            padding: 10px 20px;
+        }
+    }
+</style>
\ No newline at end of file

pages/home/component/staChart.vue

@@ -316,8 +316,9 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+@import "../../../assets/css/custom.less";
 .stachart {
-  background: rgba(255, 255, 255, 1);
+  background: @card-bg;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
   border-radius: 8px;
   padding: 10px;

pages/home/component/suspendChart.vue

 <template>
-  <div
-    class="stachart"
-   style="width:'100%',height:'100%'"
-  >
+  <div class="stachart" style="width:'100%',height:'100%'">
     <div class="row_head" v-if="setStatistics?false:true">
       <Icon type="ios-images" class="f20" />
       <span class="ml10">暂停任务统计</span>
@@ -192,8 +189,9 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+@import "../../../assets/css/custom.less";
 .stachart {
-  background: rgba(255, 255, 255, 1);
+  background: @card-bg;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
   border-radius: 8px;
   padding: 10px;

pages/home/component/unqualifiedEcharts.vue

@@ -174,8 +174,9 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+@import "../../../assets/css/custom.less";
 .stachart {
-  background: rgba(255, 255, 255, 1);
+  background: @card-bg;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
   border-radius: 8px;
   padding: 10px 20px 0 20px;

pages/home/component/unreadMessage.vue

@@ -11,9 +11,9 @@
       <Row v-for="(item,index) in messageList" :key="index" class="row-text">
         <Col :span="1">{{index+1}}</Col>
         <Col :span="8">
-          <Icon :type="item.icon||'md-mail'" :style="{color:item.color||'#2680eb'}" />
-          &nbsp;
-          {{item.title}}
+          <!-- :style="{color:item.color||'#2680eb'}" -->
+          <Icon :type="item.icon||'md-mail'" style="color:#2680eb" />&nbsp;
+          <span @click="clickItem(item,index)" class="text">{{item.title}}</span>
         </Col>
         <Col :span="7" class="sender">
           <User :value="item.senderId" />
@@ -21,6 +21,12 @@
         <Col :span="8" class="sender-time">{{item.creationTime}}</Col>
       </Row>
     </div>
+    <Modal v-model="modal1" :title="title" width="1200">
+      <component :is="detail" :eid="eid" />
+      <div slot="footer">
+        <Button type="primary" @click="modal1=false">取消</Button>
+      </div>
+    </Modal>
   </Card>
 </template>
 <script>
@@ -33,6 +39,10 @@ export default {
       imgUrl: iconImg,
       // listTask: [],
       messageList: [],
+      title: "消息",
+      modal1: false,
+      detail: null,
+      eid: 0,
     };
   },
   async fetch({ store, params }) {
@@ -61,7 +71,16 @@ export default {
       });
       // console.log("message55", this.messageList);
     },
-
+    clickItem(item, i) {
+      this.modal1 = true;
+      this.msg = item;
+      item.color = "#ccc";
+      item.status = 1;
+      this.$set(this.messageList, i, item);
+      this.title = item.title || "  ";
+      this.eid = item.id;
+      this.detail = () => import("./message");
+    },
     link() {
       this.$router.push("/home/msgRecord");
     },
@@ -97,6 +116,13 @@ export default {
     height: 40px;
     line-height: 40px;
     border-bottom: 1px solid #eee;
+
+    .text {
+      cursor: pointer;
+    }
+    .text:hover {
+      color: #2680eb;
+    }
     .sender {
       text-align: center;
     }

pages/home/component/workChart.vue

 <template>
-  <div
-    class="stachart"
-    style="width:'100%',height:'100%'"
-  >
+  <div class="stachart" style="width:'100%',height:'100%'">
     <div :gutter="16" class="row_head" v-if="setStatistics?false:true">
       <Icon type="ios-images" class="f20" />
       <span class="ml10">工单任务状态分布</span>
@@ -293,8 +290,9 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+@import "../../../assets/css/custom.less";
 .stachart {
-  background: rgba(255, 255, 255, 1);
+  background: @card-bg;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
   border-radius: 8px;
   padding: 10px;

pages/home/index.vue

@@ -353,6 +353,7 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+@import "../../assets/css/custom.less";
 .ivu-layout-content {
   background-color: none !important;
 }
@@ -364,7 +365,7 @@ export default {
   .card-user {
     padding: 25px 0 0 15px;
     height: 120px;
-    background: rgba(255, 255, 255, 1);
+    background-color: @card-bg;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
     border-radius: 8px;
     display: flex;
@@ -441,7 +442,7 @@ export default {
         width: 122px;
         .ivu-icon {
           font-size: 35px;
-          color: #2680eb;
+          color: @icon-color;
           cursor: pointer;
         }
         p {