im chat ui

src/components/IM/chat.scss

@@ -106,9 +106,7 @@
                   display: inline-block;
                   max-width: 520px;
                   border-radius: 8px;
-                  background: #ebf5fc;
                   text-align: justify;
-                  color: #333333;
                   &.no-support {
                     display: flex;
                     align-items: center;
@@ -129,7 +127,7 @@
                   justify-content: space-between;
                   text-align: left;
                   padding: 10px 15px;
-                  background: #f0f1f2;
+                  //background: #f0f1f2;
                   border-radius: 8px;
                   min-height: 80px;
                   cursor: pointer;
@@ -182,7 +180,7 @@
                   width: 260px;
                   text-align: left;
                   padding: 10px 15px;
-                  background: #f0f1f2;
+                  //background: #ffffff;
                   border-radius: 8px;
                   min-height: 80px;
                   .title {
@@ -192,9 +190,8 @@
                   }
                   .dia-text {
                     font-size: 12px;
-                    color: #7C7C7C;
                     .label {
-                        color: #B4B4B4;
+                      color: #ffffff;
                     }
                   }
                 }
@@ -202,9 +199,10 @@
                   width: 260px;
                   text-align: left;
                   padding: 10px 15px;
-                  background: #f0f1f2;
+                  //background: #ffffff;
                   border-radius: 8px;
                   min-height: 80px;
+
                   .title {
                     padding-bottom: 10px;
                     font-size: 14px;
@@ -217,14 +215,13 @@
                   }
                   .time-text {
                     font-size: 12px;
-                    color: #7C7C7C;
                   }
                 }
                 & > .suggession-box {
                   width: 260px;
                   text-align: left;
                   padding: 10px 15px;
-                  background: #f0f1f2;
+                  //background: #f0f1f2;
                   border-radius: 8px;
                   min-height: 80px;
                   .title {
@@ -234,9 +231,7 @@
                   }
                   .suggession-text {
                     font-size: 12px;
-                    color: #7C7C7C;
                     .label {
-                        color: #B4B4B4;
                     }
                   }
 
@@ -244,14 +239,14 @@
                 & > .audio-box audio {
                   width: 242px;
                   height: 44px;
-                  background: #EBF5FC;
+                  //background: #EBF5FC;
                   border-radius: 20px;
                 }
                 & > .live-box {
                   width: 202px;
                   height: 44px;
                   line-height: 44px;
-                  background: #f0f1f2;
+                  background: #ffffff;
                   border-radius: 8px;
                   text-align: center;
                 }
@@ -264,20 +259,19 @@
                     align-items: center;
                     margin: 15px 0;
                     font-size: 14px;
-                    color: #999999;
                     &::before {
                       flex: 1;
                       content: '';
                       height: 1px;
                       margin-right: 18px;
-                      background: #f0f1f2;
+                      //background: #f0f1f2;
                     }
                     &::after {
                       flex: 1;
                       content: '';
                       height: 1px;
                       margin-left: 18px;
-                      background: #f0f1f2;
+                      //background: #f0f1f2;
                     }
                   }
                 }
@@ -296,11 +290,26 @@
               .msg-item-detail {
                 text-align: right;
                 & > .mid-text {
-                  background: #f0f1f2;
+                  background: #449284;
                 }
               }
             }
           }
+          .msg-item{
+            color: #063948;
+            .mid-text{
+              background: #ffffff;
+            }
+          }
+          .cr{
+            color: #ffffff;
+            .mid-text, .live-notice, .time-box, .diagnosis-box{
+              background: #449284;
+              .time{
+                color: #ffffff;
+              }
+            }
+          }
           .split-line {
             width: 100%;
             display: flex;