WXL
4 天以前 4d9da000fbe74d344e0e4580b138e79d4ad98ede
pages/case/CaseInfo.vue
@@ -4,13 +4,24 @@
    <view class="header-card">
      <view class="case-header">
        <view class="hospital-info">
          <image :src="caseDetail.hospitalLogo" mode="aspectFit" class="hospital-logo" />
          <image
            :src="caseDetail.hospitalLogo"
            mode="aspectFit"
            class="hospital-logo"
          />
          <view class="hospital-details">
            <text class="hospital-name">{{ caseDetail.treatmenthospitalname || '未填写治疗医院' }}</text>
            <text class="case-type">{{ caseDetail.donorNo ? '器官捐献案例' : '案例详情' }}</text>
            <text class="hospital-name">{{
              caseDetail.treatmenthospitalname || "未填写治疗医院"
            }}</text>
            <text class="case-type">{{
              caseDetail.donorNo ? "器官捐献案例" : "案例详情"
            }}</text>
          </view>
        </view>
        <view class="case-status" :class="getStatusClass(caseDetail.reportStatus)">
        <view
          class="case-status"
          :class="getStatusClass(caseDetail.reportStatus)"
        >
          {{ getStatusText(caseDetail.reportStatus) }}
        </view>
      </view>
@@ -19,11 +30,13 @@
        <view class="info-row">
          <view class="info-item">
            <text class="label">案例编号</text>
            <text class="value">{{ caseDetail.caseNo || '未生成' }}</text>
            <text class="value">{{ caseDetail.caseNo || "未生成" }}</text>
          </view>
          <view class="info-item">
            <text class="label">上报时间</text>
            <text class="value">{{ formatDateTime(caseDetail.reporttime) }}</text>
            <text class="value">{{
              formatDateTime(caseDetail.reporttime)
            }}</text>
          </view>
        </view>
      </view>
@@ -51,7 +64,7 @@
        <view class="info-grid">
          <view class="info-item">
            <text class="label">姓名</text>
            <text class="value">{{ caseDetail.name || '未填写' }}</text>
            <text class="value">{{ caseDetail.name || "未填写" }}</text>
          </view>
          <view class="info-item">
            <text class="label">性别</text>
@@ -59,43 +72,52 @@
          </view>
          <view class="info-item">
            <text class="label">年龄</text>
            <text class="value">{{ caseDetail.age || '0' }} {{ getAgeUnitText(caseDetail.ageunit) }}</text>
            <text class="value"
              >{{ caseDetail.age || "0" }}
              {{ getAgeUnitText(caseDetail.ageunit) }}</text
            >
          </view>
          <view class="info-item">
            <text class="label">证件号码</text>
            <text class="value">{{ caseDetail.idcardno || '未填写' }}</text>
            <text class="value">{{ caseDetail.idcardno || "未填写" }}</text>
          </view>
          <view class="info-item">
            <text class="label">血型</text>
            <text class="value">{{ getBloodTypeText(caseDetail.bloodType) }}</text>
            <text class="value">{{
              getBloodTypeText(caseDetail.bloodType)
            }}</text>
          </view>
          <view class="info-item">
            <text class="label">民族</text>
            <text class="value">{{ caseDetail.nation || '未填写' }}</text>
            <text class="value">{{ caseDetail.nation || "未填写" }}</text>
          </view>
          <view class="info-item">
            <text class="label">国籍</text>
            <text class="value">{{ caseDetail.nationality || '未填写' }}</text>
            <text class="value">{{ caseDetail.nationality || "未填写" }}</text>
          </view>
          <view class="info-item">
            <text class="label">籍贯</text>
            <text class="value">{{ caseDetail.nativeplace || '未填写' }}</text>
            <text class="value">{{ caseDetail.nativeplace || "未填写" }}</text>
          </view>
          <view class="info-item">
            <text class="label">学历</text>
            <text class="value">{{ caseDetail.education || '未填写' }}</text>
            <text class="value">{{ caseDetail.education || "未填写" }}</text>
          </view>
          <view class="info-item">
            <text class="label">职业</text>
            <text class="value">{{ caseDetail.occupation || '未填写' }}</text>
            <text class="value">{{ caseDetail.occupation || "未填写" }}</text>
          </view>
          <view class="info-item full-width">
            <text class="label">户籍地址</text>
            <text class="value">{{ getFullRegisterAddress() || '未填写' }}</text>
            <text class="value">{{
              getFullRegisterAddress() || "未填写"
            }}</text>
          </view>
          <view class="info-item full-width">
            <text class="label">现住地址</text>
            <text class="value">{{ getFullResidenceAddress() || '未填写' }}</text>
            <text class="value">{{
              getFullResidenceAddress() || "未填写"
            }}</text>
          </view>
        </view>
      </view>
@@ -110,31 +132,50 @@
        <view class="info-content">
          <view class="info-group">
            <text class="group-title">疾病诊断</text>
            <text class="group-content">{{ caseDetail.diagnosisname || '未填写' }}</text>
            <text class="group-content">{{
              caseDetail.diagnosisname || "未填写"
            }}</text>
          </view>
          <view class="info-group">
            <text class="group-title">病情概况</text>
            <text class="group-content">{{ caseDetail.illnessoverview || '未填写' }}</text>
            <text class="group-content">{{
              caseDetail.illnessoverview || "未填写"
            }}</text>
          </view>
          <view class="info-group">
            <text class="group-title">病人状况</text>
            <text class="group-content">{{ caseDetail.patientstate || '未填写' }}</text>
            <text class="group-content">{{
              caseDetail.patientstate || "未填写"
            }}</text>
          </view>
          <view class="info-group">
            <text class="group-title">住院号</text>
            <text class="group-content">{{ caseDetail.inpatientno || '未填写' }}</text>
            <text class="group-content">{{
              caseDetail.inpatientno || "未填写"
            }}</text>
          </view>
          <view class="info-group">
            <text class="group-title">GCS评分</text>
            <text class="group-content">{{ caseDetail.gcsScore || '未评估' }}</text>
            <text class="group-content">{{
              caseDetail.gcsScore || "未评估"
            }}</text>
          </view>
          <view class="info-group">
            <text class="group-title">传染病情况</text>
            <text class="group-content">{{ caseDetail.infectious || '无' }}{{ caseDetail.infectiousOther ? `(${caseDetail.infectiousOther})` : '' }}</text>
            <text class="group-content"
              >{{ caseDetail.infectious || "无"
              }}{{
                caseDetail.infectiousOther
                  ? `(${caseDetail.infectiousOther})`
                  : ""
              }}</text
            >
          </view>
          <view class="info-group">
            <text class="group-title">Rh阴性</text>
            <text class="group-content">{{ caseDetail.rhYin === '1' ? '是' : '否' }}</text>
            <text class="group-content">{{
              caseDetail.rhYin === "1" ? "是" : "否"
            }}</text>
          </view>
        </view>
      </view>
@@ -149,43 +190,53 @@
        <view class="info-grid">
          <view class="info-item full-width">
            <text class="label">治疗医院</text>
            <text class="value">{{ caseDetail.treatmenthospitalname || '未填写' }}</text>
            <text class="value">{{
              caseDetail.treatmenthospitalname || "未填写"
            }}</text>
          </view>
          <view class="info-item">
            <text class="label">治疗科室</text>
            <text class="value">{{ caseDetail.treatmentdeptname || '未填写' }}</text>
            <text class="value">{{
              caseDetail.treatmentdeptname || "未填写"
            }}</text>
          </view>
          <view class="info-item">
            <text class="label">上报医院</text>
            <text class="value">{{ caseDetail.toHospital || '未填写' }}</text>
            <text class="value">{{ caseDetail.toHospital || "未填写" }}</text>
          </view>
          <view class="info-item full-width">
            <text class="label">联系电话</text>
            <text class="value">{{ caseDetail.phone || '未填写' }}</text>
            <text class="value">{{ caseDetail.phone || "未填写" }}</text>
          </view>
          <view class="info-item">
            <text class="label">信息员</text>
            <text class="value">{{ caseDetail.infoName || '未填写' }}</text>
            <text class="value">{{ caseDetail.infoName || "未填写" }}</text>
          </view>
          <view class="info-item">
            <text class="label">信息员编号</text>
            <text class="value">{{ caseDetail.infoNo || '未填写' }}</text>
            <text class="value">{{ caseDetail.infoNo || "未填写" }}</text>
          </view>
          <view class="info-item">
            <text class="label">报告者</text>
            <text class="value">{{ caseDetail.reportername || '未填写' }}</text>
            <text class="label">ICU评估医生</text>
            <text class="value">{{ caseDetail.icuDoctor || "未填写" }}</text>
          </view>
          <view class="info-item">
            <text class="label">报告者电话</text>
            <text class="value">{{ caseDetail.reporterphone || '未填写' }}</text>
            <text class="label">ICU医生电话</text>
            <text class="value">{{
              caseDetail.icuDoctorPhone || "未填写"
            }}</text>
          </view>
          <view class="info-item">
            <text class="label">协调员</text>
            <text class="value">{{ caseDetail.coordinatorName || '未填写' }}</text>
            <text class="value">{{
              caseDetail.coordinatorName || "未填写"
            }}</text>
          </view>
          <view class="info-item">
            <text class="label">协调员编号</text>
            <text class="value">{{ caseDetail.coordinatorNo || '未填写' }}</text>
            <text class="value">{{
              caseDetail.coordinatorNo || "未填写"
            }}</text>
          </view>
        </view>
      </view>
@@ -195,10 +246,19 @@
    <view v-if="activeTab === 'transport'" class="info-section fade-in-up">
      <view class="section-card">
        <view class="section-header">
          <view style="display: flex; justify-content: space-between; align-items: center;">
          <view
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <text class="section-title">转运信息</text>
            <!-- 转运操作按钮 -->
            <view v-if="caseDetail.reportStatus === '3'" style="display: flex; gap: 20rpx;">
            <view
              v-if="caseDetail.reportStatus === '3'"
              style="display: flex; gap: 20rpx"
            >
              <button 
                v-if="caseDetail.isTransport === '2' && !hasTransport" 
                class="small-btn primary" 
@@ -220,23 +280,38 @@
        <view class="info-content">
          <view class="info-group">
            <text class="group-title">是否需要转运</text>
            <text class="group-content">{{ caseDetail.isTransport === '2' ? '需要' : '不需要' }}</text>
            <text class="group-content">{{
              caseDetail.isTransport === "2" ? "需要" : "不需要"
            }}</text>
          </view>
          
          <!-- 有转运信息时显示 -->
          <view v-if="hasTransport && caseDetail.serviceTransport" class="transport-info">
            <view class="info-group" v-for="transport in caseDetail.serviceTransport" :key="transport.id">
          <view
            v-if="hasTransport && caseDetail.serviceTransport"
            class="transport-info"
          >
            <view
              class="info-group"
              v-for="transport in caseDetail.serviceTransport"
              :key="transport.id"
            >
              <view class="sub-group">
                <text class="sub-label">转运单号:</text>
                <text class="sub-value">{{ transport.reportId || transport.id }}</text>
                <text class="sub-value">{{
                  transport.reportId || transport.id
                }}</text>
              </view>
              <view class="sub-group">
                <text class="sub-label">出发地点:</text>
                <text class="sub-value">{{ transport.transportStartPlace }}</text>
                <text class="sub-value">{{
                  transport.transportStartPlace
                }}</text>
              </view>
              <view class="sub-group">
                <text class="sub-label">出发时间:</text>
                <text class="sub-value">{{ formatDateTime(transport.transportStartTime) }}</text>
                <text class="sub-value">{{
                  formatDateTime(transport.transportStartTime)
                }}</text>
              </view>
              <view class="sub-group">
                <text class="sub-label">负责协调员:</text>
@@ -244,7 +319,10 @@
              </view>
              <view class="sub-group">
                <text class="sub-label">转运状态:</text>
                <text class="sub-value status" :class="getTransportStatusClass(transport.transitStatus)">
                <text
                  class="sub-value status"
                  :class="getTransportStatusClass(transport.transitStatus)"
                >
                  {{ getTransportStatusText(transport.transitStatus) }}
                </text>
              </view>
@@ -268,10 +346,16 @@
          </view>
          
          <!-- 无转运信息但需要转运 -->
          <view v-else-if="caseDetail.isTransport === '2'" class="transport-info">
          <view
            v-else-if="caseDetail.isTransport === '2'"
            class="transport-info"
          >
            <view class="empty-transport">
              <text>该案例需要转运,但尚未创建转运单</text>
              <text v-if="caseDetail.reportStatus !== '3'" style="color: #f0ad4e; font-size: 24rpx; margin-top: 10rpx;">
              <text
                v-if="caseDetail.reportStatus !== '3'"
                style="color: #f0ad4e; font-size: 24rpx; margin-top: 10rpx"
              >
                需先审批同意才能创建转运单
              </text>
            </view>
@@ -292,9 +376,13 @@
      <button class="action-btn secondary" @tap="goBack">返回</button>
      
      <!-- 根据状态显示不同操作 -->
      <button v-if="caseDetail.reportStatus === '1' || caseDetail.reportStatus === '2'"
      <button
        v-if="
          caseDetail.reportStatus === '1' || caseDetail.reportStatus === '2'
        "
              class="action-btn primary" 
              @tap="handleEdit">
        @tap="handleEdit"
      >
        编辑案例
      </button>
      
@@ -311,80 +399,84 @@
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useDict } from "@/utils/dict"
import { ref, computed, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useDict } from "@/utils/dict";
// 字典数据
const dict = ref({})
const dict = ref({});
// 数据
const caseDetail = ref({})
const loading = ref(false)
const activeTab = ref('basic')
const caseId = ref(null)
const caseDetail = ref({});
const loading = ref(false);
const activeTab = ref("basic");
const caseId = ref(null);
// 选项卡
const tabs = ref([
  { id: 'basic', label: '基本信息' },
  { id: 'medical', label: '医疗信息' },
  { id: 'contact', label: '联系信息' },
  { id: 'transport', label: '转运信息' }
])
  { id: "basic", label: "基本信息" },
  { id: "medical", label: "医疗信息" },
  { id: "contact", label: "联系信息" },
  { id: "transport", label: "转运信息" },
]);
// 计算属性
const hasTransport = computed(() => {
  return caseDetail.value.serviceTransport
})
  return caseDetail.value.serviceTransport;
});
const canDelete = computed(() => {
  // 允许删除未审批或已驳回的案例
  return caseDetail.value.reportStatus === '1' ||
         caseDetail.value.reportStatus === '2' ||
         caseDetail.value.reportStatus === '4'
})
  return (
    caseDetail.value.reportStatus === "1" ||
    caseDetail.value.reportStatus === "2" ||
    caseDetail.value.reportStatus === "4"
  );
});
onLoad(async (options) => {
  if (options.id) {
    caseId.value = options.id
    caseId.value = options.id;
    // 获取字典数据
    dict.value = await useDict(
      "sys_user_sex",
      "sys_BloodType",
      "sys_IDType",
      "sys_AgeUnit"
    )
      "sys_AgeUnit",
    );
    // 加载案例详情
    await loadCaseDetail(options.id)
    await loadCaseDetail(options.id);
  }
})
});
// 加载案例详情
const loadCaseDetail = async (id) => {
  loading.value = true
  loading.value = true;
  try {
    const res = await uni.$uapi.get(`/project/donatebaseinforeport/getInfo/${id}`)
    const res = await uni.$uapi.get(
      `/project/donatebaseinforeport/getInfo/${id}`,
    );
    
    if (res.data) {
      caseDetail.value = res.data
      caseDetail.value = res.data;
      
      // 如果状态是"已上报"(1),自动更新为"已阅读"(2)
      // if (caseDetail.value.reportStatus === '1') {
      //   await updateCaseStatus('2')
      // }
    } else {
      throw new Error(res.msg || '数据加载失败')
      throw new Error(res.msg || "数据加载失败");
    }
  } catch (error) {
    console.error('加载案例详情失败:', error)
    console.error("加载案例详情失败:", error);
    uni.showToast({
      title: '数据加载失败,请重试',
      icon: 'none'
    })
      title: "数据加载失败,请重试",
      icon: "none",
    });
  } finally {
    loading.value = false
    loading.value = false;
  }
}
};
// 更新案例状态
const updateCaseStatus = async (newStatus) => {
@@ -392,66 +484,73 @@
    const updateData = {
      ...caseDetail.value,
      reportStatus: newStatus,
      updateTime: new Date().toISOString().replace('T', ' ').substring(0, 19),
      updateBy: '移动端用户'
    }
      updateTime: new Date().toISOString().replace("T", " ").substring(0, 19),
      updateBy: "移动端用户",
    };
    
    const res = await uni.$uapi.post("/project/donatebaseinforeport/edit", updateData)
    const res = await uni.$uapi.post(
      "/project/donatebaseinforeport/edit",
      updateData,
    );
    
    if (res.code === 200) {
      caseDetail.value.reportStatus = newStatus
      caseDetail.value.reportStatus = newStatus;
    }
  } catch (error) {
    console.error('更新状态失败:', error)
    console.error("更新状态失败:", error);
  }
}
};
// 获取状态样式
const getStatusClass = (status) => {
  const map = {
    '1': 'reported',
    '2': 'read',
    '3': 'agreed',
    '4': 'rejected'
  }
  return map[status] || 'reported'
}
    1: "reported",
    2: "read",
    3: "agreed",
    4: "rejected",
  };
  return map[status] || "reported";
};
// 获取状态文本
const getStatusText = (status) => {
  const map = {
    '1': '已上报',
    '2': '已阅读',
    '3': '已同意',
    '4': '已驳回'
  }
  return map[status] || '已上报'
}
    1: "已上报",
    2: "已阅读",
    3: "已同意",
    4: "已驳回",
  };
  return map[status] || "已上报";
};
// 获取性别文本
const getGenderText = (gender) => {
  if (!dict.value.sys_user_sex) return gender
  const genderItem = dict.value.sys_user_sex.find(item => item.dictValue === gender)
  return genderItem ? genderItem.dictLabel : gender
}
  if (!dict.value.sys_user_sex) return gender;
  const genderItem = dict.value.sys_user_sex.find(
    (item) => item.dictValue === gender,
  );
  return genderItem ? genderItem.dictLabel : gender;
};
// 获取血型文本
const getBloodTypeText = (bloodType) => {
  if (!dict.value.sys_BloodType) return bloodType
  const bloodTypeItem = dict.value.sys_BloodType.find(item => item.dictValue === bloodType)
  return bloodTypeItem ? bloodTypeItem.dictLabel : bloodType
}
  if (!dict.value.sys_BloodType) return bloodType;
  const bloodTypeItem = dict.value.sys_BloodType.find(
    (item) => item.dictValue === bloodType,
  );
  return bloodTypeItem ? bloodTypeItem.dictLabel : bloodType;
};
// 获取年龄单位文本
const getAgeUnitText = (ageunit) => {
  if (!ageunit) return ''
  if (!ageunit) return "";
  const unitMap = {
    'year': '岁',
    'month': '个月',
    'day': '天'
  }
  return unitMap[ageunit] || ageunit
}
    year: "岁",
    month: "个月",
    day: "天",
  };
  return unitMap[ageunit] || ageunit;
};
// 获取完整户籍地址
const getFullRegisterAddress = () => {
@@ -460,18 +559,18 @@
    registercityname, 
    registertownname, 
    registercommunityname, 
    registeraddress
  } = caseDetail.value
    registeraddress,
  } = caseDetail.value;
  
  const parts = [
    registerprovincename,
    registercityname,
    registertownname,
    registercommunityname,
    registeraddress
  ]
  return parts.filter(part => part).join('')
}
    registeraddress,
  ];
  return parts.filter((part) => part).join("");
};
// 获取完整现住地址
const getFullResidenceAddress = () => {
@@ -480,115 +579,115 @@
    residencecountyname, 
    residencetownname, 
    residencecommunityname, 
    residenceaddress
  } = caseDetail.value
    residenceaddress,
  } = caseDetail.value;
  
  const parts = [
    residenceprovincename,
    residencecountyname,
    residencetownname,
    residencecommunityname,
    residenceaddress
  ]
  return parts.filter(part => part).join('')
}
    residenceaddress,
  ];
  return parts.filter((part) => part).join("");
};
// 获取转运状态文本
const getTransportStatusText = (status) => {
  const map = {
    1: '待转运',
    2: '转运中',
    3: '转运完成',
    4: '转运取消',
    5: '暂存'
  }
  return map[status] || '未知'
}
    1: "待转运",
    2: "转运中",
    3: "转运完成",
    4: "转运取消",
    5: "暂存",
  };
  return map[status] || "未知";
};
// 获取转运状态样式
const getTransportStatusClass = (status) => {
  const map = {
    1: 'pending',
    2: 'transporting',
    3: 'completed',
    4: 'cancelled',
    5: 'draft'
  }
  return map[status] || 'pending'
}
    1: "pending",
    2: "transporting",
    3: "completed",
    4: "cancelled",
    5: "draft",
  };
  return map[status] || "pending";
};
// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return ''
  return dateTime.replace('T', ' ').substring(0, 16)
}
  if (!dateTime) return "";
  return dateTime.replace("T", " ").substring(0, 16);
};
// 选项卡切换
const switchTab = (tabId) => {
  activeTab.value = tabId
}
  activeTab.value = tabId;
};
// 返回
const goBack = () => {
  uni.navigateBack()
}
  uni.navigateBack();
};
// 编辑案例
const handleEdit = () => {
  uni.navigateTo({
    url: `/pages/case/CaseDetails?id=${caseId.value}&edit=true`
  })
}
    url: `/pages/case/CaseDetails?id=${caseId.value}&edit=true`,
  });
};
// 删除案例
const handleDelete = () => {
  uni.showModal({
    title: '确认删除',
    title: "确认删除",
    content: `确定要删除案例 ${caseDetail.value.caseNo} 吗?`,
    success: async (res) => {
      if (res.confirm) {
        try {
          const result = await uni.$uapi.delete(`/project/donatebaseinforeport/${caseId.value}`)
          const result = await uni.$uapi.delete(
            `/project/donatebaseinforeport/${caseId.value}`,
          );
          if (result.code === 200) {
            uni.showToast({ title: '删除成功', icon: 'success' })
            uni.showToast({ title: "删除成功", icon: "success" });
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
              uni.navigateBack();
            }, 1500);
          } else {
            uni.showToast({ title: result.msg || '删除失败', icon: 'none' })
            uni.showToast({ title: result.msg || "删除失败", icon: "none" });
          }
        } catch (error) {
          console.error('删除失败:', error)
          uni.showToast({ title: '删除失败', icon: 'none' })
          console.error("删除失败:", error);
          uni.showToast({ title: "删除失败", icon: "none" });
        }
      }
    }
  })
}
    },
  });
};
// 创建转运单
const createTransport = () => {
  if (caseDetail.value.reportStatus !== '3') {
    uni.showToast({ title: '案例需先审批同意', icon: 'none' })
    return
  if (caseDetail.value.reportStatus !== "3") {
    uni.showToast({ title: "案例需先审批同意", icon: "none" });
    return;
  }
  
  uni.navigateTo({
    url: `/pages/transport/create?caseId=${caseId.value}&caseNo=${caseDetail.value.caseNo}`
  })
}
    url: `/pages/transport/create?caseId=${caseId.value}&caseNo=${caseDetail.value.caseNo}`,
  });
};
// 查看转运单详情
const viewTransportDetail = () => {
  if (hasTransport.value && caseDetail.value.serviceTransport[0]) {
    const transport = caseDetail.value.serviceTransport[0]
    const transport = caseDetail.value.serviceTransport[0];
    uni.navigateTo({
      url: `/pages/transport/detail?id=${transport.id}`
    })
      url: `/pages/transport/detail?id=${transport.id}`,
    });
  }
}
};
</script>
<style lang="scss" scoped>
@@ -604,7 +703,7 @@
  border-radius: 32rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 12px 48px 0 rgba(0, 113, 227, 0.10);
  box-shadow: 0 12px 48px 0 rgba(0, 113, 227, 0.1);
  border: 1.5px solid #e5eaf0;
}
@@ -737,7 +836,7 @@
  border-radius: 32rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 12px 48px 0 rgba(0, 113, 227, 0.10);
  box-shadow: 0 12px 48px 0 rgba(0, 113, 227, 0.1);
  border: 1.5px solid #e5eaf0;
}