vue2-client 1.14.42 → 1.14.43

package/src/base-client/components/his/threeTestOrders/textBox.vue

@@ -13,7 +13,7 @@ const props = defineProps({
   modalType: {
     type: String,
     default: 'create',
-    validator: (value) => ['create', 'update', 'baby'].includes(value)
+    validator: (value) => ['create', 'update'].includes(value)
   },
   editorReady: {
     type: Boolean,
@@ -27,8 +27,7 @@ const emit = defineEmits(['update:visible', 'submit', 'cancel'])
 // 常量
 const modalTitles = {
   create: '创建体温单',
-  update: '更新体温单',
-  baby: '新生儿体温单'
+  update: '更新体温单'
 }
 
 // 响应式状态
@@ -118,9 +117,9 @@ const resetForm = () => {
   formData.heart = ''
   formData.tempType = ''
   formData.temperature = ''
-  formData.physicalcool = ''
-  formData.breath = ''
-  formData.sphygmus = ''
+  formData.pulse = ''
+  formData.breathing = ''
+  formData.bloodPressure = ''
   formData.labels = ''
   formData.data1 = ''
   formData.data2 = ''
@@ -222,7 +221,6 @@ const closeModal = () => {
 
 // 验证表单
 const validateForm = () => {
-  const isBaby = props.modalType === 'baby'
   const errors = {}
   let hasError = false
   // 通用字段验证
@@ -247,23 +245,15 @@ const validateForm = () => {
     { key: 'data5', label: '小便次数' }
   ]
   // 成人特有字段
-  if (!isBaby) {
-    requiredFields.push(
-      { key: 'diag', label: '诊断' },
-      { key: 'operateDate', label: '手术日期' },
-      { key: 'sphygmus', label: '脉搏' },
-      { key: 'data6', label: '身高' },
-      { key: 'data7', label: '体重' },
-      { key: 'data8', label: '过敏药' },
-      { key: 'data9', label: '其他数据' }
-    )
-  } else {
-    // 婴儿特有字段
-    requiredFields.push(
-      { key: 'weight', label: '体重' },
-      { key: 'physicalcool', label: '物理降温' }
-    )
-  }
+  requiredFields.push(
+    { key: 'diag', label: '诊断' },
+    { key: 'operateDate', label: '手术日期' },
+    { key: 'sphygmus', label: '脉搏' },
+    { key: 'data6', label: '身高' },
+    { key: 'data7', label: '体重' },
+    { key: 'data8', label: '过敏药' },
+    { key: 'data9', label: '其他数据' }
+  )
   // 检查每个必填字段
   requiredFields.forEach(field => {
     // 首先检查字段是否存在
@@ -290,9 +280,8 @@ const validateForm = () => {
 
 // 获取表单数据
 const getFormData = () => {
-  const isBaby = props.modalType === 'baby'
   const commonData = {
-    id: formData.id || `${isBaby ? 'BY' : 'VS'}${Date.now()}`,
+    id: formData.id || `VS${Date.now()}`,
     name: formData.name,
     inDate: formData.inDate,
     dept: formData.dept,
@@ -310,26 +299,18 @@ const getFormData = () => {
     data3: formData.data3,
     data4: formData.data4,
     data5: formData.data5,
-    pain: formData.pain
-  }
-  if (isBaby) {
-    return {
-      ...commonData,
-      type: 'baby',
-      sex: formData.sex,
-      weight: formData.weight,
-      physicalcool: formData.physicalcool
-    }
-  }
-  return {
-    ...commonData,
-    diag: formData.diag,
-    operateDate: formData.operateDate,
-    sphygmus: formData.sphygmus,
     data6: formData.data6,
     data7: formData.data7,
     data8: formData.data8,
-    data9: formData.data9
+    data9: formData.data9,
+    pain: formData.pain,
+    diag: formData.diag,
+    operateDate: formData.operateDate,
+    sphygmus: formData.sphygmus
+  }
+  return {
+    ...commonData,
+    type: 'normal'
   }
 }
 
@@ -368,7 +349,7 @@ const submitForm = async () => {
     <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
       <!-- 通用基础信息字段 -->
       <a-form-item label="ID" :validateStatus="formErrors.id ? 'error' : ''" :help="formErrors.id">
-        <a-input v-model="formData.id" :placeholder="`请输入ID，如：${modalType === 'baby' ? 'BY' : 'AD'}20230001`" />
+        <a-input v-model="formData.id" :placeholder="`请输入ID，如：AD20230001`" />
       </a-form-item>
       <a-form-item label="姓名" :validateStatus="formErrors.name ? 'error' : ''" :help="formErrors.name">
         <a-input v-model="formData.name" placeholder="请输入姓名，如：张三" />
@@ -376,24 +357,12 @@ const submitForm = async () => {
       <a-form-item label="入院日期" :validateStatus="formErrors.inDate ? 'error' : ''" :help="formErrors.inDate">
         <a-input v-model="formData.inDate" placeholder="请输入日期，如：2023-08-01" />
       </a-form-item>
-      <!-- 新生儿特有字段 -->
-      <template v-if="modalType === 'baby'">
-        <a-form-item label="性别">
-          <a-radio-group v-model="formData.sex">
-            <a-radio value="男">男</a-radio>
-            <a-radio value="女">女</a-radio>
-          </a-radio-group>
-        </a-form-item>
-      </template>
-      <!-- 成人特有字段 -->
-      <template v-else>
         <a-form-item label="诊断" :validateStatus="formErrors.diag ? 'error' : ''" :help="formErrors.diag">
           <a-input v-model="formData.diag" placeholder="请输入诊断，如：新型冠状病毒肺炎" />
         </a-form-item>
-      </template>
       <!-- 通用字段 -->
       <a-form-item label="科室" :validateStatus="formErrors.dept ? 'error' : ''" :help="formErrors.dept">
-        <a-input v-model="formData.dept" :placeholder="`请输入科室，如：${modalType === 'baby' ? '妇产科' : '呼吸内科'}`" />
+        <a-input v-model="formData.dept" :placeholder="`请输入科室，如：呼吸内科`" />
       </a-form-item>
       <a-form-item label="床位" :validateStatus="formErrors.bed ? 'error' : ''" :help="formErrors.bed">
         <a-input v-model="formData.bed" placeholder="请输入床位，如：801" />
@@ -404,30 +373,19 @@ const submitForm = async () => {
       <a-form-item label="开始日期" :validateStatus="formErrors.begin ? 'error' : ''" :help="formErrors.begin">
         <a-input v-model="formData.begin" placeholder="请输入日期，如：2023-08-01" />
       </a-form-item>
-      <!-- 成人特有字段 -->
-      <template v-if="modalType !== 'baby'">
-        <a-form-item label="手术日期" :validateStatus="formErrors.operateDate ? 'error' : ''" :help="formErrors.operateDate">
-          <a-input v-model="formData.operateDate" placeholder="请输入日期，如：2023-08-03" />
-        </a-form-item>
-      </template>
+      <a-form-item label="手术日期" :validateStatus="formErrors.operateDate ? 'error' : ''" :help="formErrors.operateDate">
+        <a-input v-model="formData.operateDate" placeholder="请输入日期，如：2023-08-03" />
+      </a-form-item>
       <!-- 备注字段 -->
       <a-form-item label="备注" :validateStatus="formErrors.notes ? 'error' : ''" :help="formErrors.notes">
         <a-input v-model="formData.notes" :placeholder="`请输入备注，如：${modalType === 'baby' ? '出生-十时二十分' : '入院-十时二十分,,转入ICU,,,,,,,手术'}`" />
         <div class="input-tip">格式：多个值用逗号分隔，对应不同日期</div>
       </a-form-item>
       <!-- 根据表单类型显示不同的数据字段 -->
-      <template v-if="modalType !== 'baby'">
-        <a-form-item label="脉搏" :validateStatus="formErrors.sphygmus ? 'error' : ''" :help="formErrors.sphygmus">
-          <a-input v-model="formData.sphygmus" placeholder="脉搏数据，如：112,110,109,103,108,85" />
-          <div class="input-tip">格式：多个值用逗号分隔</div>
-        </a-form-item>
-      </template>
-      <template v-else>
-        <a-form-item label="体重" :validateStatus="formErrors.weight ? 'error' : ''" :help="formErrors.weight">
-          <a-input v-model="formData.weight" placeholder="体重数据，多个值用逗号分隔，如：3200,,,,3300,,,,3400" />
-          <div class="input-tip">格式：多个值用逗号分隔，每组数据对应一天</div>
-        </a-form-item>
-      </template>
+      <a-form-item label="脉搏" :validateStatus="formErrors.sphygmus ? 'error' : ''" :help="formErrors.sphygmus">
+        <a-input v-model="formData.sphygmus" placeholder="脉搏数据，如：112,110,109,103,108,85" />
+        <div class="input-tip">格式：多个值用逗号分隔</div>
+      </a-form-item>
       <!-- 生命体征数据字段 -->
       <a-form-item label="心率" :validateStatus="formErrors.heart ? 'error' : ''" :help="formErrors.heart">
         <a-input v-model="formData.heart" placeholder="心率数据，多个值用逗号分隔，如：112,120,118,111" />
@@ -438,16 +396,9 @@ const submitForm = async () => {
         <div class="input-tip">格式：多个值用逗号分隔，0-3表示不同类型</div>
       </a-form-item>
       <a-form-item label="体温" :validateStatus="formErrors.temperature ? 'error' : ''" :help="formErrors.temperature">
-        <a-input v-model="formData.temperature" :placeholder="`体温数据，如：${modalType === 'baby' ? '37.7,37.9,38.5,37.1' : '38.7,38.9,38.5,39.1,38.5,38.5|37.1'}`" />
+        <a-input v-model="formData.temperature" :placeholder="`体温数据，如：38.7,38.9,38.5,39.1,38.5,38.5|37.1`" />
         <div class="input-tip">格式：多个值用逗号分隔<template v-if="modalType !== 'baby'">，|表示新一行数据</template></div>
       </a-form-item>
-      <!-- 新生儿特有字段 -->
-      <template v-if="modalType === 'baby'">
-        <a-form-item label="物理降温" :validateStatus="formErrors.physicalcool ? 'error' : ''" :help="formErrors.physicalcool">
-          <a-input v-model="formData.physicalcool" placeholder="物理降温数据，如：,,,37.6,,,,,,,,37.5" />
-          <div class="input-tip">格式：多个值用逗号分隔，空值用逗号表示</div>
-        </a-form-item>
-      </template>
       <!-- 通用数据字段 -->
       <a-form-item label="呼吸" :validateStatus="formErrors.breath ? 'error' : ''" :help="formErrors.breath">
         <a-input v-model="formData.breath" placeholder="呼吸数据，如：30,30,R,,35,35" />
@@ -478,25 +429,22 @@ const submitForm = async () => {
         <a-input v-model="formData.data5" placeholder="小便次数数据，如：2,4,5,3,3,3,2,,2" />
         <div class="input-tip">格式：多个值用逗号分隔</div>
       </a-form-item>
-      <!-- 成人特有字段 -->
-      <template v-if="modalType !== 'baby'">
-        <a-form-item label="身高" :validateStatus="formErrors.data6 ? 'error' : ''" :help="formErrors.data6">
-          <a-input v-model="formData.data6" placeholder="身高数据，如：167cm,,,,,,,,,164cm" />
-          <div class="input-tip">格式：多个值用逗号分隔</div>
-        </a-form-item>
-        <a-form-item label="体重" :validateStatus="formErrors.data7 ? 'error' : ''" :help="formErrors.data7">
-          <a-input v-model="formData.data7" placeholder="体重数据，如：95kg,,,,,90kg" />
-          <div class="input-tip">格式：多个值用逗号分隔</div>
-        </a-form-item>
-        <a-form-item label="过敏药" :validateStatus="formErrors.data8 ? 'error' : ''" :help="formErrors.data8">
-          <a-input v-model="formData.data8" placeholder="过敏药数据，如：青霉素," />
-          <div class="input-tip">格式：多个值用逗号分隔</div>
-        </a-form-item>
-        <a-form-item label="其他数据" :validateStatus="formErrors.data9 ? 'error' : ''" :help="formErrors.data9">
-          <a-input v-model="formData.data9" placeholder="其他数据，如：测试," />
-          <div class="input-tip">格式：多个值用逗号分隔</div>
-        </a-form-item>
-      </template>
+      <a-form-item label="身高" :validateStatus="formErrors.data6 ? 'error' : ''" :help="formErrors.data6">
+        <a-input v-model="formData.data6" placeholder="身高数据，如：167cm,,,,,,,,,164cm" />
+        <div class="input-tip">格式：多个值用逗号分隔</div>
+      </a-form-item>
+      <a-form-item label="体重" :validateStatus="formErrors.data7 ? 'error' : ''" :help="formErrors.data7">
+        <a-input v-model="formData.data7" placeholder="体重数据，如：95kg,,,,,90kg" />
+        <div class="input-tip">格式：多个值用逗号分隔</div>
+      </a-form-item>
+      <a-form-item label="过敏药" :validateStatus="formErrors.data8 ? 'error' : ''" :help="formErrors.data8">
+        <a-input v-model="formData.data8" placeholder="过敏药数据，如：青霉素," />
+        <div class="input-tip">格式：多个值用逗号分隔</div>
+      </a-form-item>
+      <a-form-item label="其他数据" :validateStatus="formErrors.data9 ? 'error' : ''" :help="formErrors.data9">
+        <a-input v-model="formData.data9" placeholder="其他数据，如：测试," />
+        <div class="input-tip">格式：多个值用逗号分隔</div>
+      </a-form-item>
       <!-- 按钮 -->
       <a-form-item :wrapper-col="{ span: 18, offset: 6 }">
         <a-button type="primary" @click="submitForm" :loading="submitLoading" style="margin-right: 10px">确定</a-button>

package/src/base-client/components/his/threeTestOrders/threeTestOrders.vue

@@ -8,19 +8,16 @@
         <a-button plain type="primary" @click="showVitalSignsModal('update')" :loading="loading" :disabled="!editorReady">更新体温单</a-button>
       </a-button-group>
       <a-button-group style="margin: 0 20px;">
-        <a-button plain type="primary" @click="showVitalSignsModal('baby')" :loading="loading" :disabled="!editorReady">新生儿体温单</a-button>
-      </a-button-group>
-      <a-button-group style="margin: 0 20px;">
-        <a-button plain type="primary" @click="execCommand('preview')" :loading="loading" :disabled="!editorReady">打印预览</a-button>
         <a-button plain type="primary" @click="execCommand('print')" :loading="loading" :disabled="!editorReady">打印</a-button>
       </a-button-group>
       <!-- 修改清空体温单按钮样式，使其更加醒目 -->
-      <a-button type="primary"
-                danger
-                @click="clearVitalSigns"
-                :loading="loading"
-                :disabled="!editorReady"
-                style="margin-left: 10px;">
+      <a-button
+        type="primary"
+        danger
+        @click="clearVitalSigns"
+        :loading="loading"
+        :disabled="!editorReady"
+        style="margin-left: 10px;">
         <a-icon type="delete" /> 清空体温单
       </a-button>
     </a-row>
@@ -70,8 +67,7 @@ const emit = defineEmits(['submit'])
 // 常量
 const modalTitles = {
   create: '创建体温单',
-  update: '更新体温单',
-  baby: '新生儿体温单'
+  update: '更新体温单'
 }
 
 // 显示弹窗
@@ -272,22 +268,16 @@ const handleSubmit = async (formData) => {
   loading.value = true
   generating.value = true // 开始生成，显示加载遮罩
   try {
-    // 简化代码，直接在现有体温单上创建新的体温单（不再清空）
     let result
     try {
       const iframe = editorComponent.value.$refs.editorIframe
       if (iframe?.contentWindow) {
-        const dataStr = JSON.stringify(formData)
-        const script = `
-          try {
-            const data = JSON.parse('${dataStr.replace(/'/g, "\\'")}');
-            return editor.createVitalSigns(data);
-          } catch(e) {
-            console.error('iframe执行错误:', e);
-            return null;
-          }
-        `
-        result = iframe.contentWindow.eval(script)
+        // 直接传递数据对象，避免使用eval
+        if (iframe.contentWindow.editor && typeof iframe.contentWindow.editor.createVitalSigns === 'function') {
+          result = iframe.contentWindow.editor.createVitalSigns(formData)
+        } else {
+          throw new Error('编辑器对象无效')
+        }
       } else if (window.iframeEditor) {
         result = window.iframeEditor.createVitalSigns(formData)
       } else {

package/src/pages/WorkflowDetail/WorkFlowDemo.vue

@@ -6,7 +6,7 @@ export default {
   components: { WorkflowDetail },
   mounted () {
     this.$refs.workFlow.init({
-      workflowId: '1'
+      workflowId: '31'
     })
   },
   methods: {

package/src/pages/WorkflowDetail/WorkflowDetail.vue

@@ -2,64 +2,97 @@
   <!-- 抽屉 -->
   <a-drawer
     :visible="visible"
-    width="85vw"
+    width="95vw"
     :placement="direction"
     title="流程详情"
     @close="onClose"
+    class="modern-workflow-drawer"
+    :bodyStyle="{ padding: '0', background: '#f5f7fa' }"
+    :headerStyle="{ borderBottom: '1px solid #eaedf2', padding: '16px 24px' }"
   >
-    <div>
-      <!-- 基础信息 -->
-      <workflow-base-information
-        v-if="details"
-        ref="baseInformation"
-        :workflow-id="workflowId"
-        :details="details"
-        :visible="visible"
-      />
-      <div :style="{ height: screenHeight * 0.9 + 'px' }">
-        <a-card style="margin-top: 20px">
-          <a-tabs :activeKey="activeKey" @change="changeTab">
-            <a-tab-pane key="1" tab="查看 / 编辑进度">
-              <WorkFlowHandle
-                v-if="
-                  activeKey === '1' &&
-                    details.f_state !== undefined &&
-                    steps !== undefined
-                "
-                ref="workflowHandle"
+    <div class="workflow-container">
+      <!-- 基础信息卡片 -->
+      <div class="info-section">
+        <workflow-base-information
+          v-if="details"
+          ref="baseInformation"
+          :workflow-id="workflowId"
+          :details="details"
+          :visible="visible"
+          class="base-info-card"
+        />
+      </div>
+
+      <!-- 内容区域 -->
+      <div class="content-section" :style="{ minHeight: screenHeight * 0.7 + 'px' }">
+        <a-card class="content-card" :bordered="false">
+          <a-tabs
+            :activeKey="activeKey"
+            @change="changeTab"
+            class="modern-tabs"
+            :tabBarStyle="{ marginBottom: '5px', borderBottom: '1px solid #eaedf2' }"
+          >
+            <!-- 查看/编辑进度标签页 -->
+            <a-tab-pane key="1" tab="开始工作">
+              <template v-if="details">
+                <WorkFlowHandle
+                  v-if="activeKey === '1' && details.f_state !== undefined && steps !== undefined"
+                  ref="workflowHandle"
+                  :workflow-id="workflowId"
+                  :workflowState="details.f_state === 1"
+                  :complete-time="details.f_complete_time"
+                  :stepsForChild="steps"
+                  :visible="visible"
+                  :taskName="details.f_task_name"
+                  :details="details"
+                  @refresh="stepChanged"
+                  @success="success"
+                  @nextClick="nextClick"
+                  class="handle-content"
+                />
+              </template>
+            </a-tab-pane>
+
+            <!-- 任务流转记录标签页 -->
+            <a-tab-pane key="2" tab="流转记录">
+              <workflow-log
+                v-if="activeKey === '2'"
                 :workflow-id="workflowId"
-                :workflowState="details.f_state === 1"
-                :complete-time="details.f_complete_time"
-                :stepsForChild="steps"
-                :visible="visible"
-                :taskName="details.f_task_name"
-                :details="details"
-                @refresh="stepChanged"
-                @success="success"
-                @nextClick="nextClick"
+                class="log-content"
               />
             </a-tab-pane>
-            <a-tab-pane key="2" tab="任务流转记录">
-              <workflow-log v-if="activeKey === '2'" :workflow-id="workflowId"/>
-            </a-tab-pane>
+
+            <!-- 任务留言标签页 -->
             <a-tab-pane key="4">
-              <span slot="tab">
+              <span slot="tab" class="message-tab">
                 <span>任务留言</span>
                 <a-badge
                   :count="messageList.length"
-                  :offset="[4, -4]"
-                  :number-style="{ backgroundColor: '#b2b2b2' }"></a-badge>
+                  :offset="[8, -4]"
+                  :numberStyle="{ backgroundColor: '#5B6B8F', fontSize: '12px', padding: '0 6px', height: '18px', lineHeight: '18px', borderRadius: '9px' }"
+                />
               </span>
-              <a-row>
-                <a-col :span="14">
+              <div class="message-content">
+                <template v-if="details">
                   <leave-message
-                    :workflowId="this.workflowId"
+                    :workflowId="workflowId"
                     :projectName="details.f_task_name"
                     :data="messageList"
                     :loading="messageLoading"
-                    @success="success"/>
-                </a-col>
-              </a-row>
+                    @success="success"
+                    class="leave-message-component"
+                  />
+                </template>
+              </div>
+            </a-tab-pane>
+
+            <!-- 查看附件标签页 -->
+            <a-tab-pane key="5" tab="查看附件">
+              <template v-if="details">
+                <XUploadFilesView
+                  :currUserInfo="{ f_userinfo_id: 90613 }"
+                />
+              </template>
             </a-tab-pane>
           </a-tabs>
         </a-card>
@@ -77,6 +110,7 @@ import { postByServiceName } from '@vue2-client/services/api/restTools'
 import { workFlowViewApi } from '@vue2-client/services/api/workFlow'
 import WorkflowLog from './WorkflowPageDetail/WorkflowLog.vue'
 import LeaveMessage from './WorkflowPageDetail/LeaveMessage'
+import XUploadFilesView from '@vue2-client/base-client/components/common/XUploadFilesView/index.vue'
 
 export default {
   name: 'WorkflowDetail',
@@ -85,7 +119,8 @@ export default {
     WorkFlowHandle,
     XFormTable,
     WorkflowLog,
-    LeaveMessage
+    LeaveMessage,
+    XUploadFilesView
   },
   data () {
     return {
@@ -98,7 +133,7 @@ export default {
       // 保存流程和留言信息
       steps: undefined,
       // 基础信息
-      details: {},
+      details: undefined,
       // 是否已完成
       allStepDown: false,
       // 给XFormTable增加额外查询条件
@@ -113,7 +148,7 @@ export default {
       messageList: [],
       messageLoading: true,
       workflowId: '',
-      direction: '',
+      direction: 'right',
       visible: false
     }
   },
@@ -150,7 +185,7 @@ export default {
       this.visible = false
       this.activeKey = '1'
       this.allStepDown = false
-      this.details = {}
+      this.details = undefined
       this.fixedAddForm = {}
       this.fixedQueryForm = {}
       this.steps = undefined
@@ -180,7 +215,7 @@ export default {
       this.fixedAddForm.a_f_workflow_id = this.workflowId
     },
     // 初始化两张固定表
-    async init ({ workflowId, direction, visible = true }) {
+    async init ({ workflowId, direction = 'right', visible = true }) {
       this.workflowId = workflowId
       this.direction = direction
       this.visible = visible
@@ -204,6 +239,72 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.workflow-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .info-section {
+    padding: 16px 24px;
+    background-color: #fff;
+    border-bottom: 1px solid #eaedf2;
+  }
+
+  .content-section {
+    flex: 1;
+    padding: 16px 24px;
+
+    .content-card {
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+      height: 100%;
+
+      /deep/ .ant-card-body {
+        padding: 0px 24px 24px;
+      }
+    }
+  }
+}
+
+.modern-tabs {
+  /deep/ .ant-tabs-nav {
+    margin-bottom: 0;
+  }
+
+  /deep/ .ant-tabs-tab {
+    padding: 12px 0;
+    margin-right: 48px;
+    font-size: 15px;
+  }
+
+  /deep/ .ant-tabs-tab-active {
+    font-weight: 500;
+  }
+
+  /deep/ .ant-tabs-ink-bar {
+    height: 3px;
+    border-radius: 3px 3px 0 0;
+  }
+}
+
+.message-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.message-content {
+  max-width: 900px;
+
+  .leave-message-component {
+    width: 100%;
+  }
+}
+
+.log-content {
+  margin-top: 16px;
+}
+
 /deep/ .step-label {
   &:not(:first-child) {
     margin-left: 16px;
@@ -220,15 +321,15 @@ export default {
     margin-right: 8px;
 
     &.blue {
-      border: 3px solid rgb(24, 144, 255);
+      border: 3px solid #5B6B8F;
     }
 
     &.green {
-      border: 3px solid rgb(82, 196, 26);
+      border: 3px solid #4CAF50;
     }
 
     &.gray {
-      border: 3px solid rgb(191, 191, 191);
+      border: 3px solid #cfd8e3;
     }
   }
 }