feat:新增devStyles

src/components/base/messageBubble/index.vue

@@ -8,7 +8,7 @@
 			<div class="header-title">
 				<slot name="title">{{ "社交媒体" }}</slot>
 			</div>
-			<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
+			<!-- <div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div> -->
 		</div>
 		<div class="msg-bubble-main">
 			<div class="message-bubble" v-for="(item, index) in messageList" :key="index" @click="handleClickPerson(item)">

src/styles/common.scss

@@ -178,56 +178,88 @@
     font-size: 12px;
 }
 
-.main-color{
+.main-color {
     color: rgb(5, 95, 194);
 }
 
 // 业务主色 高亮背景
-.color-bg-active{
+.color-bg-active {
     background: rgb(246, 250, 255);
 }
 
 // 黑色
-.text-primary-clor{
+.text-primary-clor {
     color: #0a121e;
 }
 
 // 黑色90% / 主标题文字颜色
-.text-primary-90-clor{
+.text-primary-90-clor {
     color: #222934;
 }
 
 // 黑色80% / 小标题文字颜色
-.text-primary-80-clor{
+.text-primary-80-clor {
     color: #3b414b;
 }
 
 // 黑色65% / 正文颜色
-.text-primary-65-clor{
+.text-primary-65-clor {
     color: #5f656c;
 }
 
 // 黑色50%
-.text-primary-50-clor{
+.text-primary-50-clor {
     color: #84888e;
 }
 
 // 黑色10%
-.bg-black-10{
+.bg-black-10 {
     background: #E6E7E8;
 }
 
 // 黑色5%
-.bg-black-5{
+.bg-black-5 {
     background: #EAECEE;
 }
 
 // 黑色2%
-.bg-black-2{
+.bg-black-2 {
     background: #F7F8F9;
 }
 
 // 白色主色
-.bg-white-100{
+.bg-white-100 {
     background: #FFFFFF;
+}
+
+.color-red-100 {
+    color: rgb(206, 79, 81);
+}
+
+.bg-red-10 {
+    background: rgba(206, 79, 81, 0.1);
+}
+
+.color-orange-100 {
+    color: rgb(255, 149, 77)
+}
+
+.bg-orange-10 {
+    background: rgba(255, 149, 77, 0.1)
+}
+
+.color-yellow-100 {
+    color: rgb(232, 189, 11);
+}
+
+.bg-yellow-10 {
+    background: rgba(232, 189, 11, 0.1);
+}
+
+.color-green-100 {
+    color: rgb(33, 129, 57);
+}
+
+.bg-green-10 {
+    background: rgba(33, 129, 57, 0.1);
 }
\ No newline at end of file

src/styles/components/textStyle.vue

@@ -96,7 +96,19 @@ const tableData = ref([
     { name: '白色主色', className: 'bg-white-100'},
 
     {name: '主色', className: 'main-color'},
-    {name: '高亮背景色', className: 'color-bg-active'}
+    {name: '高亮背景色', className: 'color-bg-active'},
+
+    {name: '红色', className: 'color-red-100'},
+    {name: '红色10%', className: 'bg-red-10'},
+
+    {name: '橙色', className: 'color-orange-100'},
+    {name: '橙色10%', className: 'bg-orange-10'},
+
+    {name: '黄色', className: 'color-yellow-100'},
+    {name: '黄色10%', className: 'bg-yellow-10'},
+
+    {name: '绿色', className: 'color-green-100'},
+    {name: '绿色10%', className: 'bg-green-10'},
 
 ])
 </script>