feat:init

src/api/screen.js

@@ -29,7 +29,7 @@ export const screenApi = {
   /**
     * 七牛云文件上传：
     */
-  upLoadImage: () => http.post('/qiniuyun/upLoadImage'),
+  upLoadImage: (data) => http.post('/qiniuyun/upLoadImage', data),
 
   /**
     * 获取个人信息接口

src/api/user.js

@@ -15,4 +15,8 @@ export const userApi = {
    * 退出登录
    */
   postLogout: () => http.post('/logout'),
+  /**
+   * 修改个人信息接口
+   */
+  UpUser: (data) => http.put('/system/user/profile', data),
 }

src/components/User/userEdit.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { reactive } from 'vue';
-import { NForm, NFormItem, NSelect, NButton, NInput } from "naive-ui";
-
-defineProps({
+import { upLoadImageFun } from "@/utils/tools";
+import { NForm, NFormItem, NButton } from "naive-ui";
+import { userApi } from "@/api/user";
+import { useMessage } from 'naive-ui';
+const props = defineProps({
   user: {
     type: Object,
     default: {
@@ -10,18 +12,47 @@ defineProps({
     }
   },
 })
-
+const message = useMessage();
 const model = reactive({
   des: null,
-  selectValue: "信义污水厂"
+  selectValue: "信义污水厂",
+  submitStatus: false
 });
 
-const generalOptions = ['信义污水厂'].map(
-  (v) => ({
-    label: v,
-    value: v
-  })
-)
+
+const changeImg = async (e) => {
+  const avatar = await upLoadImageFun(e.target)
+  console.log(avatar, 12);
+  if (avatar) {
+    props.user.avatar = avatar
+  }
+
+}
+const submit = () => {
+  console.log(model.submitStatus);
+  if (!model.submitStatus) {
+    model.submitStatus = true
+    const data = {
+      avatar: props.user.avatar,
+      userName: props.user.userName,
+      phonenumber: props.user.phonenumber,
+      nickName: props.user.nickName,
+      position: props.user.position,
+      deptId: props.user.deptId,
+      emergencyPhone: props.user.emergencyPhone,
+    }
+    userApi.UpUser(data).then((res) => {
+      if (res.code == 200) {
+        message.success(res.msg)
+      } else {
+        message.error(res.msg)
+      }
+
+    }).finally(() => {
+      model.submitStatus = false
+    })
+  }
+}
 </script>
 
 <template>
@@ -30,7 +61,7 @@ const generalOptions = ['信义污水厂'].map(
       <n-form ref="formRef" :model="model" label-placement="left" label-align="left" :label-width="72">
         <n-form-item label="选择头像">
           <div class="avatar-wrap">
-            <div class="replace">更换<input class="file" type="file"></input></div>
+            <div class="replace">更换<input class="file" type="file" @change="changeImg"></input></div>
             <div class="avatar-wrap-box">
               <figure class="avatar"><img :src="user.avatar" alt=""></figure>
               <span>头像尺寸64*64</span>
@@ -61,7 +92,8 @@ const generalOptions = ['信义污水厂'].map(
         </n-form-item>
         <n-form-item label="水厂" v-if="user.dept">
           <div class="content">
-            {{ user.dept['deptName'] }}
+            信义污水厂
+            <!-- {{ user.dept['deptName'] }} -->
             <span class="des">设置为默认登录</span>
           </div>
         </n-form-item>
@@ -71,7 +103,7 @@ const generalOptions = ['信义污水厂'].map(
           </div>
         </n-form-item>
       </n-form>
-      <n-button attr-type="button" class="submit">提交</n-button>
+      <n-button attr-type="button" class="submit" @click="submit" :loading="model.submitStatus">提交</n-button>
     </div>
   </div>
 </template>
@@ -99,6 +131,7 @@ const generalOptions = ['信义污水厂'].map(
       height: 88px;
       border-radius: 50%;
       background: #F5F5F5;
+      overflow: hidden;
       margin-right: 24px;
       display: inline-block;
 

src/main.ts

@@ -8,6 +8,7 @@ import './permission'
 import 'virtual:svg-icons-register'
 import './assets/styles/tailwind.css'
 import './assets/styles/index.scss'
+import './utils/resize';
 
 const app = createApp(App)
 
@@ -15,3 +16,5 @@ app.use(pinia)
 app.use(router)
 
 app.mount('#app')
+
+

src/utils/resize.js

@@ -0,0 +1,18 @@
+(function () {
+  changeSize();
+
+  function changeSize () {
+    // 基于设计稿 1920px 宽度的计算
+    document.documentElement.style.fontSize = (document.documentElement.clientWidth * 10) / 1920 + 'px';
+  }
+
+  window.addEventListener('resize', changeSize, false);
+
+  // 当一条会话历史记录被执行的时候将会触发页面显示 (pageshow) 事件。
+  // (这包括了后退/前进按钮操作，同时也会在 onload 事件触发后初始化页面时触发)
+  window.addEventListener('pageshow', function (e) {
+    if (e.persisted) {
+      changeSize();
+    }
+  });
+})();

src/utils/tools.ts

@@ -1,6 +1,6 @@
 const baseUrl = import.meta.env.VITE_BASE_URL;
 const basePrefix = import.meta.env.VITE_BASE_PREFIX;
-
+import { screenApi } from "@/api/screen"
 interface IUrlParams {
   [propsName: string]: any
 }
@@ -96,3 +96,38 @@ export function copyText(options: { text: string; origin?: boolean }) {
   document.body.removeChild(input)
 }
 
+
+export const upLoadImageFun = async (targe:any) => {
+  const file = targe.files[0]; // 获取上传的文件
+  const allowedTypes = [
+    "image/png",
+    "application/pdf",
+    "image/jpg",
+    "image/jpeg",
+  ]; // 允许的文件类型
+  const maxFileSizeMB = 10; // 最大文件大小（以 MB 为单位）
+  // 校验文件类型
+  if (!allowedTypes.includes(file.type)) {
+    alert("请选择(jpg, png, pdf)类型的文件");
+    return;
+  }
+  // 校验文件大小
+  if (file.size > maxFileSizeMB * 1024 * 1024) {
+    alert("文件大小不能超过 10MB");
+    return;
+  }
+  const formData = new FormData();
+  formData.append("file", file);
+  try {
+    const res = await screenApi.upLoadImage(formData);
+    if (res.code === 200) {
+      return res.data;
+    } else {
+      alert(res.msg);
+      return false
+    }
+
+  } catch (error) {
+    return "";
+  }
+};

src/views/screen/ScreenView.vue

@@ -130,31 +130,30 @@ onBeforeUnmount(() => {
   &-top {
     display: flex;
     justify-content: space-between;
-    padding: 38px 20px 32px 32px;
-    height: 36px;
+    padding: 3.8rem 2rem 3.2rem 3.2rem;
+    height: 3.6rem;
 
     .left {
       display: flex;
       align-items: center;
-      font-size: 16px;
+      font-size: 1.6rem;
       background: #415B73;
       flex: 1;
     }
 
     .time {
-      font-size: 36px;
+      font-size: 3.6rem;
       font-weight: bold;
       color: #333;
-      width: 140px;
-
+      width: 14rem;
     }
 
     .line {
-      margin: 0 10px 0 15px;
+      margin: 0 1rem 0 1.5rem;
       display: inline-block;
       background: #767C82;
-      height: 28px;
-      width: 2px;
+      height: 2.8rem;
+      width: 0.2rem;
     }
 
     .right {
@@ -164,8 +163,7 @@ onBeforeUnmount(() => {
   }
 
   .screen-container {
-    padding: 0 60px;
-
+    padding: 0 6rem;
 
     .menu {
       display: flex;
@@ -173,36 +171,48 @@ onBeforeUnmount(() => {
       justify-content: center;
 
       .item {
-        width: 218px;
-        height: 52px;
-        background: url('@/assets/images/home/menu_1.png') no-repeat;
-        background-size: 100% 100%;
+        width: 21.8rem;
+        height: 5.2rem;
         display: inline-block;
         font-size: 0;
-        transition: all 0.3s ease;
-        /* 添加平滑过渡效果 */
       }
 
       .item1 {
-        background: url('@/assets/images/home/menu_1.png') no-repeat;
+        background: url('@/assets/images/home/menu_1_hover.png') no-repeat;
         background-size: 100% 100%;
       }
 
       .item2 {
         background: url('@/assets/images/home/menu_2.png') no-repeat;
         background-size: 100% 100%;
-        margin-right: 200px;
+        margin-right: 20rem;
+
+        &:hover {
+          background: url('@/assets/images/home/menu_2_hover.png') no-repeat;
+          background-size: 100% 100%;
+        }
       }
 
       .item3 {
         background: url('@/assets/images/home/menu_3.png') no-repeat;
         background-size: 100% 100%;
+
+        &:hover {
+          background: url('@/assets/images/home/menu_3_hover.png') no-repeat;
+          background-size: 100% 100%;
+        }
       }
 
       .item4 {
         background: url('@/assets/images/home/menu_4.png') no-repeat;
         background-size: 100% 100%;
+
+        &:hover {
+          background: url('@/assets/images/home/menu_4_hover.png') no-repeat;
+          background-size: 100% 100%;
+        }
       }
+
     }
 
     &-main {
@@ -219,20 +229,23 @@ onBeforeUnmount(() => {
       flex: 1;
     }
   }
+
+
+
 }
 </style>
 
 <style lang="scss">
 .home-box {
   background: rgba(255, 255, 255, 0.8);
-  width: 540px;
-  height: 420px;
-  border-radius: 8px;
-  border: 1px solid #fff;
-  margin-top: 20px;
+  width: 54rem;
+  height: 42rem;
+  border-radius: 0.8rem;
+  border: 0.1rem solid #fff;
+  margin-top: 2rem;
 
   &-top {
-    padding: 7px 24px 7px 12px;
+    padding: 0.7rem 2.4rem 0.7rem 1.2rem;
     display: flex;
     justify-content: space-between;
     position: relative;
@@ -240,28 +253,28 @@ onBeforeUnmount(() => {
 
     &::after {
       content: '';
-      height: 2px;
+      height: 0.2rem;
       background: url('@/assets/images/home/line.png') no-repeat;
       background-size: 100% 100%;
       width: 100%;
       position: absolute;
-      left: 12px;
+      left: 1.2rem;
       bottom: 0;
     }
 
     .title {
-      font-size: 18px;
+      font-size: 1.8rem;
       font-weight: bold;
       display: flex;
       align-items: center;
 
       &::before {
         content: '';
-        width: 20px;
-        height: 20px;
+        width: 2rem;
+        height: 2rem;
         background: url('@/assets/images/home/mark.png') no-repeat;
         background-size: cover;
-        margin-right: 8px;
+        margin-right: 0.8rem;
         display: inline-block;
       }
     }

src/views/screen/components/cicle.vue

@@ -1,19 +1,19 @@
 <template>
-
-  <div class="gauge">
+  <div :class='["gauge", errorStatus ? "warning-wrap" : ""]'>
     <div class="gauge__body"></div>
     <svg id="progress-bar" width="100%" height="100%" viewBox="0 0 200 120" preserveAspectRatio="xMidYMid meet">
       <defs>
-        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
-          <stop offset="0%" style="stop-color: #00e3b5; stop-opacity: 1" />
-          <stop offset="100%" style="stop-color: #00557f; stop-opacity: 1" />
+        <linearGradient :id="`grad1-${errorStatus}`" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" :style="`stop-color: ${errorStatus ? '#FF6737' : '#00BAF5'}; stop-opacity: 1`" />
+          <stop offset="100%" :style="`stop-color: ${errorStatus ? '#F5BF00' : '#02E1A2'}; stop-opacity: 1`" />
         </linearGradient>
       </defs>
       <path d="M 20,100 A 80,80 0 0,1 180,100" stroke="#00557f" stroke-width="16" fill="none" stroke-linecap="round" />
-      <path id="progress" d="M 20,100 A 80,80 0 0,1 180,100" :stroke="`${progessValue > 0 ? 'url(#grad1)' : '#00557f'}`"
-        stroke-width="16" fill="none" :stroke-dasharray="strokeDashArray" stroke-linecap="round" />
+      <path id="progress" d="M 20,100 A 80,80 0 0,1 180,100"
+        :stroke="`${progressValue > 0 ? `url(#grad1-${errorStatus})` : '#00557f'}`" stroke-width="16" fill="none"
+        :stroke-dasharray="strokeDashArray" stroke-linecap="round" />
     </svg>
-    <span class="img"></span>
+    <span class="img" :style="{ transform: `translate(-50%, 50%) rotate(${angle}deg)` }"></span>
     <div class="text">{{ valueNumber }}</div>
   </div>
 </template>
@@ -21,88 +21,114 @@
 <script setup>
 import { computed } from "vue";
 
-
-
 const props = defineProps({
   progress: {
     type: Number,
     default: 0,
   },
-  value: 0,
-  levelVal: 0
-})
+  value: {
+    type: Number,
+    default: 0,
+  },
+  levelVal: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const angle = computed(() => {
+  if (!props.value) {
+    return 0;
+  }
+  return props.value / props.levelVal > 1 ? 170 : parseInt((props.value / props.levelVal) * 180);
+});
 
 const strokeDashArray = computed(() => {
   const radius = 80;
   const circumference = Math.PI * radius;
-  const offset = circumference * (1 - progessValue.value / 100);
+  const offset = circumference * (1 - progressValue.value / 100);
   return `${circumference - offset}, ${circumference}`;
-})
+});
 
 const valueNumber = computed(() => {
-  return Number(props.value).toFixed(2)
-})
+  return props.value ? Number(props.value).toFixed(2) : 0;
+});
 
-const progessValue = computed(() => {
-  return (props.value / props.levelVal) * 100 .toFixed(2)
-})
+const progressValue = computed(() => {
+  return props.value / props.levelVal > 1 ? 100 : parseInt((props.value / props.levelVal) * 100);
+});
 
+const errorStatus = computed(() => {
+  return parseInt((props.value / props.levelVal) * 100) >= 100;
+});
 </script>
 
 <style scoped lang="scss">
 .gauge {
-  width: 108px;
-  height: 54px;
+  width: 10.8rem;
+  height: 5.4rem;
   overflow: hidden;
   position: relative;
-  z-index: 1;
-
-
+  z-index: 2;
 
   .gauge__body {
-    width: 90px;
-    height: 90px;
+    width: 9rem;
+    height: 9rem;
     border-radius: 50%;
-    border: 1px solid rgba(2, 225, 162, 1);
-    padding: 3px;
+    border: 0.1rem solid rgba(2, 225, 162, 1);
+    padding: 0.3rem;
     position: absolute;
     z-index: -1;
-    margin-left: 9px;
-    margin-top: 4px
+    margin-left: 0.9rem;
+    margin-top: 0.4rem;
+  }
+
+  &.warning-wrap {
+    .gauge__body {
+      border: 0.1rem solid #FF9237;
+    }
+
+    .text {
+      background: linear-gradient(-180.71deg, #FF9237 30.93%, rgba(50, 128, 255, 0) 80%);
+    }
+
+    .img {
+      background: url('@/assets/images/home/waring_arrow.png') no-repeat;
+      background-size: cover;
+    }
   }
 
   #progress-bar {
-    margin-top: 5px;
+    margin-top: 0.5rem;
   }
 
   .text {
-    width: 45px;
-    height: 45px;
+    width: 4.5rem;
+    height: 4.5rem;
     border-radius: 50%;
-    background: linear-gradient(-180.71deg, #02E1A2 8.93%, rgba(50, 128, 255, 0) 60%);
+    background: linear-gradient(-180.71deg, #02E1A2 8.93%, rgba(50, 128, 255, 0.8) 60%);
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translate(-50%, 50%);
     text-align: center;
-    font-size: 12px;
+    font-size: 1.2rem;
     color: #fff;
     font-weight: bold;
-    padding-top: 4px;
+    padding-top: 0.4rem;
+    z-index: 4;
   }
 
   .img {
-    width: 46px;
-    height: 36px;
+    width: 6.4rem;
+    height: 4.5rem;
     background: url('@/assets/images/home/arrow.png') no-repeat;
     background-size: cover;
     position: absolute;
     left: 50%;
-    transform: translate(-50%, 50%) rotate(0deg);
-    bottom: 10px;
+    bottom: 0.4rem;
     transform-origin: center center;
-    // rotate: (180deg);
+    z-index: -1;
   }
-
 }
 </style>

src/views/screen/components/csBox.vue

@@ -5,7 +5,7 @@
         <cicle :levelVal="screenData.cscodBzz" :value="screenData.csCod"></cicle>
       </div>
       <div class="name">COD</div>
-      <div class="value">标准值：&lt;{{ screenData.cscodBzz }}mg/L</div>
+      <div class="value">标准值：&lt;{{ screenData.cscodBzz || 0 }}mg/L</div>
     </li>
 
     <li class="box-item">

src/views/screen/components/dataBox.vue

@@ -29,22 +29,21 @@ const content = '① 因房地产市场并不十分活跃和顺利运转，因
   background: rgba(255, 255, 255, 0.8);
 
   &-main {
-    padding: 20px 40px;
+    padding: 2rem 4rem;
     display: flex;
     align-items: center;
     flex-direction: column;
 
     .content {
 
-
       .title {
-        margin: 6px 0 16px;
-        font-size: 16px;
+        margin: 0.6rem 0 1.6rem;
+        font-size: 1.6rem;
         font-weight: bold;
       }
 
       .html-box {
-        height: 226px;
+        height: 22.6rem;
         overflow-y: auto;
       }
 
@@ -54,20 +53,18 @@ const content = '① 因房地产市场并不十分活跃和顺利运转，因
     }
 
     .btn {
-      width: 124px;
-      height: 44px;
+      width: 12.4rem;
+      height: 4.4rem;
       background: linear-gradient(270deg, #59CCFA 0%, #3C97F7 100%);
-      font-size: 16px;
+      font-size: 1.6rem;
       font-weight: 500;
       color: #fff;
-      border-radius: 4px;
+      border-radius: 0.4rem;
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-top: 20px
+      margin-top: 2rem;
     }
   }
-
-
 }
 </style>

src/views/screen/components/gongyi.vue

@@ -1,13 +1,17 @@
 <script setup>
-
+import { useRouter } from 'vue-router';
 defineProps({
   gongyiData: {
     type: Array,
     default: []
   },
 })
-
+const router = useRouter()
 const types = ['水质报警', '生化报警', '预测报警']
+const toGongyi = (item) => {
+  router.push('water-warn');
+}
+
 </script>
 
 <template>
@@ -22,7 +26,7 @@ const types = ['水质报警', '生化报警', '预测报警']
         <span>触发时间</span>
       </div>
       <ul class="gongyi-wrap-list">
-        <li class="gongyi-wrap-item" v-for="item in gongyiData">
+        <li class="gongyi-wrap-item" v-for="item in gongyiData" @click="toGongyi">
           <span>{{ types[item.type] }}</span>
           <span>{{ item.reason }}</span>
           <span>{{ item.time }}</span>
@@ -34,31 +38,29 @@ const types = ['水质报警', '生化报警', '预测报警']
 
 <style scoped lang="scss">
 .gongyi {
-  height: 364px;
-  margin-top: 20px;
+  height: 36.4rem;
+  margin-top: 2rem;
 
   .gongyi-wrap {
-    padding: 12px;
+    padding: 1.2rem;
 
     &-top {
       background: rgba(10, 139, 207, 0.12);
-      font-size: 14px;
+      font-size: 1.4rem;
       color: #1A2029;
       font-weight: bold;
-
-
     }
 
     &-list {
-      height: 265px;
+      height: 26.5rem;
       overflow-y: auto;
     }
 
     &-item {
-      margin-bottom: 10px;
-      padding: 10px 12px;
+      margin-bottom: 1rem;
+      padding: 1rem 1.2rem;
       display: flex;
-      line-height: 14px;
+      line-height: 1.4rem;
       background: rgba(10, 139, 207, 0.06);
       justify-content: space-between;
       align-items: center;
@@ -69,7 +71,6 @@ const types = ['水质报警', '生化报警', '预测报警']
         flex: 1;
       }
 
-
       >span:nth-child(2) {
         text-align: center;
       }

src/views/screen/components/liuliang.vue

@@ -8,12 +8,12 @@ defineProps({
 })
 const showHBarrow = (value) => {
   const str = value > 0 ? '↑' : '↓'
-  const num = (value * 100).toFixed(2)
+  const num = value ? (value * 100).toFixed(2) : 0
   return str + num
 }
 
 const showVal = (value) => {
-  return Number(value).toFixed(2)
+  return value ? Number(value).toFixed(2) : 0
 }
 </script>
 
@@ -69,24 +69,23 @@ const showVal = (value) => {
 
 <style scoped lang="scss">
 .liuliang {
-  height: 364px;
-  margin-top: 20px;
+  height: 36.4rem;
+  margin-top: 2rem;
 
   .box-wrap {
-    margin-top: 30px;
-    padding: 0 30px;
+    margin-top: 3rem;
+    padding: 0 3rem;
 
     &-title {
-      font-size: 16px;
+      font-size: 1.6rem;
       font-weight: 600;
       color: #1A2029;
-      margin-bottom: 16px;
-      line-height: 16px;
+      margin-bottom: 1.6rem;
+      line-height: 1.6rem;
     }
 
     &-list {
       display: flex;
-
     }
 
     &-item:nth-child(2) {
@@ -101,31 +100,28 @@ const showVal = (value) => {
 
     &-item {
       flex: 1;
-      margin-right: 8px;
-      width: 154px;
-      height: 76px;
+      margin-right: 0.8rem;
+      width: 15.4rem;
+      height: 7.6rem;
       background: url(@/assets/images/home/liuliang1.png) no-repeat;
       background-size: 100% 100%;
-      padding-left: 58px;
-      font-size: 12px;
+      padding-left: 5.8rem;
+      font-size: 1.2rem;
       color: #415B73;
       display: flex;
       flex-direction: column;
       justify-content: center;
       line-height: 1;
 
-
-
       &:last-child {
         margin-right: 0;
       }
 
       .num {
         color: #1A2029;
-        font-size: 14px;
+        font-size: 1.4rem;
         font-weight: bold;
-        margin: 8px 0 2px;
-
+        margin: 0.8rem 0 0.2rem;
       }
 
       .footer {
@@ -134,7 +130,7 @@ const showVal = (value) => {
         &::before {
           content: '环比';
           color: #7395B3;
-          margin-right: 15px;
+          margin-right: 1.5rem;
           display: inline-block;
           scale: 0.8;
         }

src/views/screen/components/middleBox.vue

@@ -12,43 +12,41 @@ defineProps({
 
 <style scoped lang="scss">
 .send-ask {
-  margin: 0 20px;
+  margin: 0 2rem;
   position: relative;
   height: 100%;
 
-
-
   &-button {
     position: absolute;
     width: 100%;
-    height: 60px;
-    border-radius: 8px;
-    box-shadow: 0px 3px 12px 0px #97D3FF40;
+    height: 6rem;
+    border-radius: 0.8rem;
+    box-shadow: 0 0.3rem 1.2rem 0 #97D3FF40;
     background: #FFFFFF;
-    font-size: 15px;
+    font-size: 1.5rem;
     color: #9E9E9E99;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 17px 0 34px;
-    bottom: 47px;
+    padding: 0 1.7rem 0 3.4rem;
+    bottom: 4.7rem;
 
     &::before {
       content: attr(data-time);
       display: block;
       position: absolute;
       right: 0;
-      bottom: 68px;
+      bottom: 6.8rem;
       color: #9E9E9E;
-      font-size: 12px;
+      font-size: 1.2rem;
     }
 
     &::after {
       content: '';
       background: url(@/assets/images/home/send.png) no-repeat;
       background-size: contain;
-      width: 56px;
-      height: 36px;
+      width: 5.6rem;
+      height: 3.6rem;
     }
   }
 }

src/views/screen/components/shuizhi.vue

@@ -34,10 +34,10 @@ defineProps({
 .shuizhi {
   .right {
     .btn {
-      width: 62px;
-      height: 28px;
+      width: 6.2rem;
+      height: 2.8rem;
       background: rgba(238, 249, 255, 1);
-      border: 1px solid rgba(122, 215, 249, 1);
+      border: 0.1rem solid rgba(122, 215, 249, 1);
       float: left;
       border-radius: 0;
       display: flex;
@@ -48,14 +48,14 @@ defineProps({
 
       &:first-child {
         border-right: 0;
-        border-top-left-radius: 4px;
-        border-bottom-left-radius: 4px;
+        border-top-left-radius: 0.4rem;
+        border-bottom-left-radius: 0.4rem;
       }
 
       &:last-child {
         border-left: 0;
-        border-top-right-radius: 4px;
-        border-bottom-right-radius: 4px;
+        border-top-right-radius: 0.4rem;
+        border-bottom-right-radius: 0.4rem;
       }
     }
 
@@ -68,38 +68,37 @@ defineProps({
   }
 
   :deep(.main) {
-    padding: 18px 48px 16px;
+    padding: 1.8rem 4.8rem 1.6rem;
 
     .box-wrap {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
-      grid-gap: 10px 60px;
-
+      grid-gap: 1rem 6rem;
     }
 
     .box-item {
-      height: 108px;
+      height: 10.8rem;
       display: flex;
       align-items: center;
       flex-direction: column;
 
       .cicle {
-        height: 52px;
-        margin-bottom: 10px;
+        height: 5.2rem;
+        margin-bottom: 1rem;
         width: 100%;
       }
 
       .name {
         color: #0A284E;
-        font-size: 14px;
-        line-height: 20px;
-        margin-bottom: 2px;
+        font-size: 1.4rem;
+        line-height: 2rem;
+        margin-bottom: 0.2rem;
         font-weight: bold;
       }
 
       .value {
-        font-size: 12px;
-        line-height: 18px;
+        font-size: 1.2rem;
+        line-height: 1.8rem;
         color: #466993;
       }
     }