diff --git a/front/public/index.html b/front/public/index.html
index 4c6c9c1f..817ddcf4 100644
--- a/front/public/index.html
+++ b/front/public/index.html
@@ -2,7 +2,7 @@
  * @Author: hisense.wuhongjian
  * @Date: 2022-03-29 16:45:25
  * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-06-15 09:28:40
+ * @LastEditTime: 2022-06-15 20:40:12
  * @Description: 告诉大家这是什么
 -->
 <!DOCTYPE html>
@@ -33,21 +33,21 @@
     // window.SITE_CONFIG['frontUrl'] = 'http://15.72.183.90:7008/document/#/devModelFile/';
     // window.SITE_CONFIG['apiURL'] = 'http://15.72.183.90:8000/renren-admin';
 
-    // window.SITE_CONFIG['backUrl'] = 'http://localhost:8001';
+    // window.SITE_CONFIG['backUrl'] = 'http://15.72.183.90:8001';
     // window.SITE_CONFIG['previewUrl'] = 'http://15.72.183.90:7008/';
     // window.SITE_CONFIG['frontUrl'] = 'http://15.72.183.90:7008/document/#/devModelFile/';
     // window.SITE_CONFIG['apiURL'] = 'http://15.72.183.90:8000/renren-admin';
 
 
-    // window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
-    // window.SITE_CONFIG['previewUrl'] = 'http://localhost:8080/';
-    // window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/';
-    // window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
+    window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
+    window.SITE_CONFIG['previewUrl'] = 'http://localhost:8080/';
+    window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/';
+    window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
     // 穿透版本
-    window.SITE_CONFIG['backUrl'] = 'http://124.222.94.39:9797';
-    window.SITE_CONFIG['previewUrl'] = 'http://124.222.94.39:9796/';
-    window.SITE_CONFIG['frontUrl'] = 'http://124.222.94.39:9796/document/#/devModelFile/';
-    window.SITE_CONFIG['apiURL'] = 'http://124.222.94.39:8888/renren-admin';
+    // window.SITE_CONFIG['backUrl'] = 'http://124.222.94.39:9797';
+    // window.SITE_CONFIG['previewUrl'] = 'http://124.222.94.39:9796/';
+    // window.SITE_CONFIG['frontUrl'] = 'http://124.222.94.39:9796/document/#/devModelFile/';
+    // window.SITE_CONFIG['apiURL'] = 'http://124.222.94.39:8888/renren-admin';
   </script>
 
     <link href="./leaflet/libs/leaflet/1.3.1/leaflet.css" rel="stylesheet">
diff --git a/front/public/static/image/test.jpg b/front/public/static/image/test.jpg
new file mode 100644
index 00000000..d047994a
Binary files /dev/null and b/front/public/static/image/test.jpg differ
diff --git a/front/src/config/default/setting.config.js b/front/src/config/default/setting.config.js
index f5869557..8c2342f0 100644
--- a/front/src/config/default/setting.config.js
+++ b/front/src/config/default/setting.config.js
@@ -2,7 +2,7 @@
  * @Author: hisense.wuhongjian
  * @Date: 2022-03-29 17:48:03
  * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-06-15 11:18:21
+ * @LastEditTime: 2022-06-15 19:40:28
  * @Description: 告诉大家这是什么
  */
 /**
@@ -23,7 +23,7 @@ const setting = {
   // baseURL: 'mock-server',
   // 请求接口
   // 丁港
-  baseURL: 'http://124.222.94.39:8888/renren-admin',
+  baseURL: 'http://15.72.183.90:8000/renren-admin',
   // : 'http://15.2.21.238:8888/renren-admin/',
   // 'http://15.72.183.90:8000/renren-admin',
   // 黄工
diff --git a/front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue b/front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue
index 03a98a13..35db3991 100644
--- a/front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue
+++ b/front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue
@@ -9,7 +9,7 @@
             <a-image
               :width="510"
               :height="340"
-              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              :src="responseUrl"
             />
             <a-upload
               v-model:file-list="fileList"
@@ -76,43 +76,63 @@
   </div>
 </template>
 <script setup>
-  import { ref } from 'vue'
-  // import { paddleocr } from '@/api/file'
+  import { ref, onMounted } from 'vue'
+  import { paddleocr } from '@/api/file'
+  import { message } from 'ant-design-vue'
+  const uploadUrl = window.SITE_CONFIG.apiURL + '/upload'
+  let fileList = ref([])
   // const responseUrl = ref('')
   const imageResult = ref('')
   const imageResult0 = ref('')
   const imageResult1 = ref('')
   const menuOpenKeys2 = ref(['全文还原'])
-  // const checkImage = () => {
-  //   getUrlBase64(responseUrl.value, 'png', (base64) => {
-  //     console.log('1111111', base64)
-  //     const param = {
-  //       img: base64.split('base64,')[1],
-  //     }
-  //     paddleocr(param).then((res) => {
-  //       // wordValue.value = res.data
-  //       console.log('1111', res.data)
-  //       // imageResult.value = res.data.output
-  //       // imageResult0.value = res.data.output
-  //       // imageResult1.value = res.data.output
-  //     })
-  //   })
-  // }
-  // const getUrlBase64 = (url, ext, callback) => {
-  //   var canvas = document.createElement('canvas') //创建canvas DOM元素
-  //   var ctx = canvas.getContext('2d')
-  //   var img = new Image()
-  //   img.crossOrigin = 'Anonymous'
-  //   img.src = url
-  //   img.onload = function () {
-  //     canvas.height = img.height //指定画板的高度,自定义
-  //     canvas.width = img.width //指定画板的宽度，自定义
-  //     ctx.drawImage(img, 0, 0, img.width, img.height) //参数可自定义
-  //     var dataURL = canvas.toDataURL('image/' + ext)
-  //     callback.call(this, dataURL) //回掉函数获取Base64编码
-  //     canvas = null
-  //   }
-  // }
+  let responseUrl = ref('static/image/test.jpg')
+  const handleChange = (info) => {
+    debugger;
+        if (info.file.status !== 'uploading') {
+          console.log(info.file, info.fileList)
+        }
+        if (info.file.status === 'done') {
+          message.success(`${info.file.name} file uploaded successfully`)
+          responseUrl.value = info.file.response.data
+          checkImage()
+        } else if (info.file.status === 'error') {
+          message.error(`${info.file.name} file upload failed.`)
+        }
+      }
+  const checkImage = () => {
+    getUrlBase64(responseUrl.value, 'jpg', (base64) => {
+      console.log('1111111', base64)
+      const param = {
+        img: base64.split('base64,')[1],
+      }
+      paddleocr(param).then((res) => {
+        // wordValue.value = res.data
+        console.log('1111', res.data)
+        imageResult.value = res.data.output
+        imageResult0.value = res.data.output
+        imageResult1.value = res.data.output
+      })
+    })
+  }
+  const getUrlBase64 = (url, ext, callback) => {
+    var canvas = document.createElement('canvas') //创建canvas DOM元素
+    var ctx = canvas.getContext('2d')
+    var img = new Image()
+    img.crossOrigin = 'Anonymous'
+    img.src = url
+    img.onload = function () {
+      canvas.height = img.height //指定画板的高度,自定义
+      canvas.width = img.width //指定画板的宽度，自定义
+      ctx.drawImage(img, 0, 0, img.width, img.height) //参数可自定义
+      var dataURL = canvas.toDataURL('image/' + ext)
+      callback.call(this, dataURL) //回掉函数获取Base64编码
+      canvas = null
+    }
+  }
+  onMounted(() => {
+    checkImage()
+  })
 </script>
 <style lang="less" scoped>
   .evaluate3 {
diff --git a/front/src/views/home/DetailsPageconetent.vue b/front/src/views/home/DetailsPageconetent.vue
index 9c4af758..97f0ef59 100644
--- a/front/src/views/home/DetailsPageconetent.vue
+++ b/front/src/views/home/DetailsPageconetent.vue
@@ -16,6 +16,7 @@
             class="photo"
             :style="{
               backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
             }"
           ></span>
           <span>{{ item.name }}</span>
@@ -180,7 +181,7 @@
           <div class="top-content-father">
             <div class="top-content-son">
               <div class="top-content">
-                <span class="top-content-title" :style="{ marginRight: '8px' }">
+                <span class="top-content-title" :style="{ marginRight: '.08rem' }">
                   标签
                 </span>
                 <div
@@ -191,7 +192,7 @@
                     <a-checkable-tag
                       :checked="selBqTags.indexOf(tag) > -1"
                       @change="(checked) => handleChangeBqTags(tag, checked)"
-                      style="width: 100px"
+                      style="width: 1rem"
                     >
                       {{ tag }}
                     </a-checkable-tag>
@@ -199,7 +200,7 @@
                 </div>
               </div>
               <div class="top-content">
-                <span class="top-content-title" :style="{ marginRight: '8px' }">
+                <span class="top-content-title" :style="{ marginRight: '.08rem' }">
                   在线状态
                 </span>
                 <div class="leixingsumfather leixingsumfather2">
@@ -207,7 +208,7 @@
                     <a-checkable-tag
                       :checked="selStateTags.indexOf(tag) > -1"
                       @change="(checked) => handleChangeStateTag(tag, checked)"
-                      style="width: 100px"
+                      style="width: 1rem"
                     >
                       {{ tag }}
                     </a-checkable-tag>
@@ -226,7 +227,7 @@
             class="resultListSearchInput"
           />
           <button class="button-reset" @click="chongzhi()">重置</button>
-          <div class="itemList" style="margin-top: 20px">
+          <div class="itemList" style="margin-top: .2rem">
             <a-card :loading="loading">
               <a-card-grid
                 style="width: 20%; text-align: center"
@@ -279,7 +280,7 @@
           </div>
         </div>
       </div>
-      <div v-if="resourceList.data?.length <= 0" style="margin-top: 200px">
+      <div v-if="resourceList.data?.length <= 0" style="margin-top: 2rem">
         <a-empty
           v-if="!(Cardsname == '基础设施') && !(Cardsname == '数据资源')"
         />
@@ -297,6 +298,7 @@
             class="photo"
             :style="{
               backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
             }"
           ></span>
           <span>{{ item.name }}</span>
@@ -962,38 +964,38 @@
 <style lang="less" scoped>
   .resultListSearchInput-father {
     background: #f3f5f9;
-    padding-left: 20px;
-    padding-top: 20px;
+    padding-left: .2rem;
+    padding-top: .2rem;
     .resultListSearchInput-son {
       background: #fff;
-      padding: 20px 20px 0px 30px;
-      margin-right: 20px;
+      padding: .2rem .2rem 0rem .3rem;
+      margin-right: .2rem;
       .hengxian {
         width: 100%;
-        height: 1px;
+        height: .01rem;
         background: rgba(150, 144, 144, 0.3);
-        margin-top: 20px;
+        margin-top: .2rem;
       }
     }
   }
   .resultListSearchInput {
-    margin-left: 10px;
+    margin-left: .1rem;
     :deep(.ant-input) {
-      width: 400px;
-      height: 36px;
+      width: 4rem;
+      height: .36rem;
       background: #fff;
-      border-radius: 4px;
+      border-radius: .04rem;
     }
     :deep(.ant-input-search-button) {
-      width: 80px;
-      height: 36px;
+      width: .8rem;
+      height: .36rem;
       background: #0087ff;
-      border-radius: 4px !important;
-      font-size: 14px;
+      border-radius: .04rem !important;
+      font-size: .14rem;
       font-weight: 400;
       color: #fff;
-      line-height: 34px;
-      margin-left: 10px;
+      line-height: .34rem;
+      margin-left: .1rem;
     }
     :deep(.ant-input-group-addon) {
       left: 0 !important;
@@ -1002,15 +1004,15 @@
   .button-reset {
     border: 0;
     outline: none;
-    width: 80px;
-    height: 36px;
+    width: .8rem;
+    height: .36rem;
     background: #e1edfa;
-    border-radius: 4px;
-    font-size: 14px;
+    border-radius: .04rem;
+    font-size: .14rem;
     font-weight: 400;
     color: #0087ff;
-    line-height: 34px;
-    margin-left: 250px;
+    line-height: .34rem;
+    margin-left: 2.5rem;
     cursor: pointer;
   }
   .details-pageconetent {
@@ -1020,59 +1022,59 @@
     // flex-direction: column;
     justify-content: center;
     align-items: center;
-    margin-top: 67px;
+    margin-top: .67rem;
     position: relative;
     background: rgba(245, 243, 243, 0.3);
     .details-pageconetent-left {
-      max-height: 790px;
+      max-height: 7.9rem;
       position: absolute;
-      width: 250px;
-      top: 17px;
-      left: 250px;
-      margin-right: 17px;
+      width: 2.5rem;
+      top: .17rem;
+      left: 2.5rem;
+      margin-right: .17rem;
       overflow: auto;
     }
     .top {
-      min-height: 720px;
+      min-height: 7.2rem;
       position: relative;
-      width: 1087px;
+      width: 10.87rem;
       display: flex;
-      padding-top: 20px;
+      padding-top: .2rem;
       flex-direction: column;
       // align-items: center;
-      font-size: 16px;
+      font-size: .16rem;
       justify-content: left;
-      margin-left: 250px;
+      margin-left: 2.5rem;
       .pagination {
         background: #f3f5f9;
-        padding-bottom: 60px;
+        padding-bottom: .6rem;
       }
       .jichusheshi {
         // display: flex;
         // flex-direction: column;
         // justify-content: center;
-        // padding-top: 40px;
-        height: 445px;
+        // padding-top: .4rem;
+        height: 4.45rem;
         // overflow: hidden;
         .yunziyuan {
           width: 100%;
           position: relative;
           .shuoming {
             position: absolute;
-            right: 20px;
-            top: 15px;
-            font-size: 12px;
+            right: .2rem;
+            top: .15rem;
+            font-size: .12rem;
           }
           .yunziyuan-title {
             display: flex;
             align-items: center;
             .tupian {
-              // width: 89px;
-              // height: 74px;
+              // width: .89rem;
+              // height: .74rem;
               // background: url('~@/assets/home/yunziyuan.png');
             }
             .title {
-              margin-left: 10px;
+              margin-left: .1rem;
               font-weight: 600;
               text-decoration: underline;
               cursor: pointer;
@@ -1080,15 +1082,15 @@
           }
           .fenlei {
             display: flex;
-            margin-left: 20px;
-            margin-right: 30px;
+            margin-left: .2rem;
+            margin-right: .3rem;
             justify-content: space-between;
           }
           .keyongziyuan {
             display: flex;
             justify-content: space-between;
-            margin-left: 30px;
-            margin-right: 30px;
+            margin-left: .3rem;
+            margin-right: .3rem;
             div {
               display: flex;
               div:last-child {
@@ -1098,7 +1100,7 @@
           }
         }
         .yunziyuan > div {
-          margin-bottom: 10px;
+          margin-bottom: .1rem;
         }
         .shipin {
           width: 100%;
@@ -1106,12 +1108,12 @@
             display: flex;
             align-items: center;
             .tupian {
-              // width: 56px;
-              // height: 50px;
+              // width: .56rem;
+              // height: .5rem;
               // background: url('~@/assets/home/shipin.png');
             }
             .title {
-              margin-left: 10px;
+              margin-left: .1rem;
               font-weight: 600;
               text-decoration: underline;
               cursor: pointer;
@@ -1119,9 +1121,9 @@
           }
           .fenlei {
             display: flex;
-            margin-left: 20px;
+            margin-left: .2rem;
             div {
-              margin-right: 60px;
+              margin-right: .6rem;
             }
             .shuzi {
               font-weight: 600;
@@ -1129,41 +1131,41 @@
           }
         }
         .shipin > div {
-          margin-bottom: 10px;
+          margin-bottom: .1rem;
         }
       }
       .jichusheshi > div {
         // background: #eaf4ff;
-        padding-top: 10px;
-        border-radius: 4px;
-        margin-bottom: 20px;
-        padding-bottom: 40px;
+        padding-top: .1rem;
+        border-radius: .04rem;
+        margin-bottom: .2rem;
+        padding-bottom: .4rem;
       }
       .shujuziyuan {
         display: flex;
         flex-direction: column;
         justify-content: center;
-        padding-top: 40px;
+        padding-top: .4rem;
         .yunziyuan {
           width: 100%;
           position: relative;
           .shuoming {
             position: absolute;
-            right: 20px;
-            top: 15px;
-            font-size: 12px;
+            right: .2rem;
+            top: .15rem;
+            font-size: .12rem;
           }
           .yunziyuan-title {
             display: flex;
             align-items: center;
-            margin-left: 20px;
+            margin-left: .2rem;
             .tupian {
-              // width: 51px;
-              // height: 50px;
+              // width: .51rem;
+              // height: .5rem;
               // background: url('~@/assets/home/shujuziyuan.png');
             }
             .title {
-              margin-left: 10px;
+              margin-left: .1rem;
               font-weight: 600;
               text-decoration: underline;
               cursor: pointer;
@@ -1171,15 +1173,15 @@
           }
           .fenlei {
             display: flex;
-            margin-left: 20px;
-            margin-right: 30px;
+            margin-left: .2rem;
+            margin-right: .3rem;
             justify-content: space-between;
           }
           .keyongziyuan {
             display: flex;
             justify-content: space-between;
-            margin-left: 30px;
-            margin-right: 30px;
+            margin-left: .3rem;
+            margin-right: .3rem;
             div {
               display: flex;
               div:last-child {
@@ -1189,33 +1191,33 @@
           }
         }
         .yunziyuan > div {
-          margin-bottom: 10px;
+          margin-bottom: .1rem;
         }
       }
       .shujuziyuan > div {
         background: #eaf4ff;
-        padding-top: 10px;
-        border-radius: 4px;
-        margin-bottom: 20px;
-        padding-bottom: 40px;
+        padding-top: .1rem;
+        border-radius: .04rem;
+        margin-bottom: .2rem;
+        padding-bottom: .4rem;
       }
       .top-title {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        font-size: 20px;
+        font-size: .2rem;
         font-family: 'Alibaba PuHuiTi';
         color: #000000;
-        line-height: 34px;
+        line-height: .34rem;
         .photo {
           display: inline-block;
-          height: 44px;
-          width: 44px;
-          margin-right: 10px;
+          height: .44rem;
+          width: .44rem;
+          margin-right: .1rem;
         }
         div {
-          margin: 0 20px;
-          padding: 0 10px;
+          margin: 0 .2rem;
+          padding: 0 .1rem;
           cursor: pointer;
           display: flex;
           align-items: center;
@@ -1226,82 +1228,82 @@
         .sel {
           font-weight: 600;
           color: #0087ff;
-          border-bottom: 2px solid #0087ff;
+          border-bottom: .02rem solid #0087ff;
         }
       }
       .top-content-father {
-        width: 1087px;
-        padding-left: 20px;
-        // margin-bottom: 20px;
+        width: 10.87rem;
+        padding-left: .2rem;
+        // margin-bottom: .2rem;
         background: #f3f5f9;
         .top-content-son {
           background: #fff;
-          margin: 0px 20px 20px 0px;
-          padding-top: 20px;
-          padding-bottom: 20px;
+          margin: 0rem .2rem .2rem 0rem;
+          padding-top: .2rem;
+          padding-bottom: .2rem;
         }
         .top-content {
           display: flex;
-          margin-top: 0px;
+          margin-top: 0rem;
           span:nth-child(1) {
             display: inline-block;
             position: relative;
-            // width: 70px;
-            line-height: 36.14px;
+            // width: .7rem;
+            line-height: .3614rem;
             white-space: normal;
             text-align: center;
             vertical-align: middle;
           }
           // .top-content-title {
-          //   top: -20px;
+          //   top: -0.2rem;
           // }
           .leixingsumfather {
-            width: 810px;
+            width: 8.1rem;
             display: inline-block;
-            height: 30.14px;
+            height: .3014rem;
             overflow: hidden;
-            // width: 718px;
+            // width: 7.18rem;
           }
           .leixingsumfather2 {
-            width: 920px;
+            width: 9.2rem;
           }
           .leixingsum {
             display: inline-block;
             cursor: pointer;
             text-align: center;
-            margin-top: 5px;
-            // margin-bottom: 10px;
+            margin-top: .05rem;
+            // margin-bottom: .1rem;
             .ant-tag-checkable {
-              width: 83px;
-              height: 25px;
+              width: .83rem;
+              height: .25rem;
               display: flex;
               justify-content: center;
               align-items: center;
-              padding-left: 5px;
-              padding-right: 5px;
+              padding-left: .05rem;
+              padding-right: .05rem;
               float: left;
-              margin: 0 15px;
+              margin: 0 .15rem;
               font-family: 'AlibabaPuHuiTiR';
-              font-size: 14px;
+              font-size: .14rem;
               color: #333333;
               font-weight: 500;
               text-align: center;
-              line-height: 14px;
+              line-height: .14rem;
             }
             :deep(.ant-tag-checkable-checked) {
-              // width: 67px;
-              margin-left: 15px;
-              margin-right: 15px;
+              // width: .67rem;
+              margin-left: .15rem;
+              margin-right: .15rem;
               text-align: center;
             }
             .ant-tag-checkable:active,
             .ant-tag-checkable-checked {
-              width: 85px;
+              width: .85rem;
               font-family: 'Alibaba PuHuiTi';
               font-weight: 500;
               background-color: #0087ff;
               color: #ffffff;
-              border-radius: 16px;
+              border-radius: .16rem;
             }
           }
           .active {
@@ -1312,17 +1314,17 @@
           }
         }
         .top-content:nth-child(1) {
-          margin-top: 0px !important;
+          margin-top: 0rem !important;
         }
       }
     }
   }
   .shrinkTag {
-    width: 50px;
+    width: .5rem;
     display: flex;
     justify-content: center;
     align-items: flex-end;
-    margin-bottom: 5px;
+    margin-bottom: .05rem;
     span {
       cursor: pointer;
     }
@@ -1333,84 +1335,84 @@
   }
   .talk-monitor {
     position: fixed;
-    bottom: 50px;
-    right: 10px;
+    bottom: .5rem;
+    right: .1rem;
     z-index: 9999;
     cursor: pointer;
     i {
-      width: 64px;
-      height: 64px;
+      width: .64rem;
+      height: .64rem;
       display: inline-block;
       background: url('~@/assets/home/icon-talk.png');
       background-size: cover;
     }
   }
   .top-content-father {
-    width: 1087px;
-    padding-left: 20px;
-    // margin-bottom: 20px;
+    width: 10.87rem;
+    padding-left: .2rem;
+    // margin-bottom: .2rem;
     .top-content {
       display: flex;
-      margin-top: 23px;
+      margin-top: .23rem;
       span:nth-child(1) {
         display: inline-block;
         position: relative;
-        width: 68px;
+        width: .68rem;
         font-weight: 600;
         white-space: normal;
         text-align: center;
         vertical-align: middle;
-        font-size: 16px;
-        margin-left: 30px;
+        font-size: .16rem;
+        margin-left: .3rem;
       }
       // .top-content-title {
-      //   top: -20px;
+      //   top: -0.2rem;
       // }
       .leixingsumfather {
-        width: 770px;
+        width: 7.7rem;
         display: inline-block;
-        height: 30.14px;
+        height: .3014rem;
         overflow: hidden;
-        // width: 718px;
+        // width: 7.18rem;
       }
       .leixingsum {
-        width: 93px;
+        width: .93rem;
         display: inline-block;
         cursor: pointer;
         text-align: center;
-        margin-top: 5px;
-        // margin-bottom: 10px;
+        margin-top: .05rem;
+        // margin-bottom: .1rem;
         .ant-tag-checkable {
-          width: 85px;
-          height: 25px;
+          width: .85rem;
+          height: .25rem;
           display: flex;
           justify-content: center;
           align-items: center;
-          padding-left: 5px;
-          padding-right: 5px;
+          padding-left: .05rem;
+          padding-right: .05rem;
           float: left;
-          margin: 0 15px;
+          margin: 0 .15rem;
           font-family: 'AlibabaPuHuiTiR';
-          font-size: 14px;
+          font-size: .14rem;
           color: #333333;
           font-weight: 500;
           text-align: center;
-          line-height: 14px;
+          line-height: .14rem;
         }
         :deep(.ant-tag-checkable-checked) {
-          // width: 67px;
-          margin-left: 15px;
-          margin-right: 15px;
+          // width: .67rem;
+          margin-left: .15rem;
+          margin-right: .15rem;
           text-align: center;
         }
         .ant-tag-checkable:active,
         .ant-tag-checkable-checked {
-          width: 85px;
+          width: .85rem;
           font-family: 'Alibaba PuHuiTi';
           font-weight: 500;
           background-color: #0087ff;
           color: #ffffff;
-          border-radius: 16px;
+          border-radius: .16rem;
         }
       }
       .active {
@@ -1421,7 +1423,7 @@
       }
     }
     .top-content:nth-child(1) {
-      margin-top: 41px !important;
+      margin-top: .41rem !important;
     }
   }
   :deep(.ant-card-grid) {
diff --git a/front/src/views/home/detailsPageconetentTree.vue b/front/src/views/home/detailsPageconetentTree.vue
index d222662c..7ebcfcba 100644
--- a/front/src/views/home/detailsPageconetentTree.vue
+++ b/front/src/views/home/detailsPageconetentTree.vue
@@ -29,8 +29,8 @@
                   version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="2156"
-                  width="25"
-                  height="25"
+                  width="0.25rem"
+                  height="0.25rem"
                   v-show="selectId == val.key"
                 >
                   <path
@@ -65,8 +65,8 @@
                     version="1.1"
                     xmlns="http://www.w3.org/2000/svg"
                     p-id="2156"
-                    width="25"
-                    height="25"
+                    width="0.25rem"
+                    height="0.25rem"
                     v-show="selectId == child.key"
                   >
                     <path
@@ -343,48 +343,48 @@
   // .wrapper {
   //   height: 100%;
   //   width: 100%;
-  //   padding: 20px;
+  //   padding: .2rem;
   //   .wrapper-title {
-  //     height: 28px;
+  //     height: .28rem;
   //     width: 100%;
-  //     margin-bottom: 25px;
+  //     margin-bottom: .25rem;
   //     .wrapper-title-name {
   //       width: 100%;
-  //       height: 17px;
-  //       font-size: 18px;
+  //       height: .17rem;
+  //       font-size: .18rem;
   //       font-family: 'AlibabaPuHuiTiR';
   //       font-weight: 400;
   //       color: #0058e1;
-  //       line-height: 34px;
+  //       line-height: .34rem;
   //     }
   //     .wrapper-title-yangshi {
-  //       width: 40px;
-  //       height: 3px;
+  //       width: .4rem;
+  //       height: .03rem;
   //       background: #0058e1;
-  //       border-radius: 2px;
-  //       margin-top: 20px;
-  //       margin-left: 15px;
+  //       border-radius: .02rem;
+  //       margin-top: .2rem;
+  //       margin-left: .15rem;
   //     }
   //   }
   //   .wrapper-title-left-tree {
   //     overflow-y: auto;
   //     height: 80%;
-  //     width: 210px;
+  //     width: 2.1rem;
   //   }
   //   .wrapper-title-left-tree::-webkit-scrollbar {
-  //     width: 5px;
-  //     height: 5px;
+  //     width: .05rem;
+  //     height: .05rem;
   //   }
   //   .wrapper-title-left-tree::-webkit-scrollbar-thumb {
-  //     border-radius: 5px;
+  //     border-radius: .05rem;
   //     background-color: #0058e1;
   //   }
   //   .wrapper-title-left-tree::-webkit-scrollbar-track {
   //     background-color: transparent;
   //   }
   //   :deep(.ant-tree-treenode) {
-  //     margin-top: 10px;
-  //     height: 23px;
+  //     margin-top: .1rem;
+  //     height: .23rem;
   //     overflow: hidden;
   //     text-overflow: ellipsis;
   //     display: -webkit-box;
@@ -395,13 +395,13 @@
   .primaryNode {
     .top {
       width: 100%;
-      height: 40px;
+      height: .4rem;
       background: rgba(0, 135, 225, 0.1);
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 0 10px;
-      margin-top: 8px;
+      padding: 0 .1rem;
+      margin-top: .08rem;
     }
     .top:hover {
       cursor: pointer;
@@ -422,16 +422,16 @@
     .bottom {
       width: 100%;
       background: rgba(244, 245, 248, 0.8);
-      padding: 0 10px;
-      // margin-bottom: 8px;
+      padding: 0 .1rem;
+      // margin-bottom: .08rem;
       .up {
         cursor: pointer;
-        height: 40px;
+        height: .4rem;
         display: flex;
         justify-content: space-between;
         align-items: center;
-        border-top: 1px solid #ccc;
-        padding: 0 10px;
+        border-top: .01rem solid #ccc;
+        padding: 0 .1rem;
         & > div {
           display: flex;
           justify-content: flex-start;
@@ -455,9 +455,9 @@
         }
       }
       .select {
-        padding: 0 10px 0 0;
+        padding: 0 .1rem 0 0;
         .name {
-          width: 170px;
+          width: 1.7rem;
           color: #0058e1;
           font-weight: 600;
         }
@@ -473,11 +473,11 @@
         width: 100%;
         .child {
           cursor: pointer;
-          height: 40px;
+          height: .4rem;
           display: flex;
           justify-content: space-between;
           align-items: center;
-          padding: 0 10px;
+          padding: 0 .1rem;
           & > div {
             display: flex;
             justify-content: flex-start;
@@ -502,7 +502,7 @@
         }
         .select2 {
           .name {
-            width: 170px;
+            width: 1.7rem;
             color: #0058e1;
             font-weight: 600;
           }
@@ -510,7 +510,7 @@
             color: #0058e1;
             font-weight: 600;
           }
-          padding: 0 10px 0 0;
+          padding: 0 .1rem 0 0;
         }
       }
     }
