diff --git a/public/index.html b/public/index.html
index 86d4b45..e964f5c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,6 +13,11 @@
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <style>
+      :root {
+        --beilv: 1;
+      }
+    </style>
     <title><%= webpackConfig.name %></title>
   </head>
   <body>
diff --git a/src/assets/img/choicepart/choice-item-longback.png b/src/assets/img/choicepart/choice-item-longback.png
new file mode 100644
index 0000000..12aca77
Binary files /dev/null and b/src/assets/img/choicepart/choice-item-longback.png differ
diff --git a/src/views/factory.vue b/src/views/factory.vue
index 3d08c2d..a0346fc 100644
--- a/src/views/factory.vue
+++ b/src/views/factory.vue
@@ -24,15 +24,15 @@
                 <img :style="{width: '90%', margin: 'auto 5%', marginTop: 87 * beilv + 'px'}" :src="require('../assets/img/choicepart/factory-model.png')" alt="">
                 <svg-icon
                   v-for="(i, index) in wuliuList"
-                  :key="index"
+                  :key="index + '1'"
                   :icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
-                  :style="{ position: 'absolute', fontSize: '24px', left: i.left + '%', top: i.top + '%' }"
+                  :style="{ position: 'absolute', fontSize: 24 * beilv + 'px', left: i.left + '%', top: i.top + '%' }"
                 />
                 <svg-icon
                   v-for="(i, index) in wuliuList"
-                  :key="index"
+                  :key="index + '2'"
                   :icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
-                  :style="{ position: 'absolute', fontSize: '24px', left: i.left + '%', top: i.top + 22 + '%' }"
+                  :style="{ position: 'absolute', fontSize: 24 * beilv + 'px', left: i.left + '%', top: i.top + 22 + '%' }"
                 />
               </el-carousel-item>
             </el-carousel>
@@ -56,15 +56,15 @@
                 <img :style="{width: '90%', margin: 'auto 5%', marginTop: 87 * beilv + 'px'}" :src="require('../assets/img/choicepart/factory-model.png')" alt="">
                 <svg-icon
                   v-for="(i, index) in materialList"
-                  :key="index"
+                  :key="index + '3'"
                   :icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
-                  :style="{ position: 'absolute', fontSize: '24px', left: i.left + '%', top: i.top + 22 + '%' }"
+                  :style="{ position: 'absolute', fontSize: 24 * beilv + 'px', left: i.left + '%', top: i.top + 22 + '%' }"
                 />
                 <svg-icon
                   v-for="(i, index) in materialList"
-                  :key="index"
+                  :key="index + '4'"
                   :icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
-                  :style="{ position: 'absolute', fontSize: '24px', left: i.left + '%', top: i.top + '%' }"
+                  :style="{ position: 'absolute', fontSize: 24 * beilv + 'px', left: i.left + '%', top: i.top + '%' }"
                 />
               </el-carousel-item>
             </el-carousel>
@@ -144,6 +144,8 @@ import BaseTable from '@/components/baseTable.vue'
 import statusCell from './components/statusCell.vue'
 
 let interval = null
+let eventListener = null
+
 const tableProp = [
   {
     prop: 'equipmentName',
@@ -206,12 +208,13 @@ export default {
       this.time = a[1]
     }, 1000)
     this.beilv = document.body.offsetWidth / 1920
-    addEventListener('resize', () => {
+    addEventListener('resize', eventListener = () => {
       this.beilv = document.body.offsetWidth / 1920
     })
   },
   destroyed() {
     clearInterval(interval)
+    removeEventListener('resize', eventListener)
   },
   methods: {
     getTime() {
diff --git a/src/views/index.vue b/src/views/index.vue
index a0c6d24..0ea8204 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="choicepart-container">
+  <div id="choicepart-container">
     <div class="choicepart-navbar">
       <span class="navbar-left">
         {{ date }}
@@ -19,6 +19,10 @@
       <div
         v-for="item in routeList"
         :key="item.path"
+        :style="{
+          background: item.title.length > 6 ? `url(${require('../assets/img/choicepart/choice-item-longback.png')}) no-repeat` : `url(${require('../assets/img/choicepart/choice-item-back.png')}) no-repeat`,
+          backgroundSize: '100% 100%'
+        }"
         class="choicepart-item"
         @click="handelClick(item)"
       >
@@ -33,7 +37,9 @@
 
 <script>
 import Cookie from 'js-cookie'
+
 let interval = null
+let eventListener = null
 
 export default {
   name: 'ChoicePart',
@@ -44,13 +50,14 @@ export default {
       rowNum: 1,
       windowWidth: 0,
       routeList: [
-        { name: 'factory', path: 'http://www.baidu.com', title: '数字工厂总览' },
-        { name: 'mes', path: 'http://localhost:9528/#/login', title: 'MES生产管理平台' },
-        { name: 'wms', path: 'http://a.wms.picaiba.com', title: 'WMS物流仓储管理' },
+        { name: 'factory', path: 'http://192.168.1.47:9527/#/3d-overview', title: '数字工厂总览' },
+        { name: 'mes', path: 'http://192.168.1.47:9527/#/login', title: 'MES生产管理平台' },
+        { name: 'wms', path: 'http://192.168.1.103:9529/#/login', title: 'WMS物流仓储管理' },
         { name: 'data', path: 'factory', title: '数据采集平台' }
       ],
       date: '',
-      time: ''
+      time: '',
+      beilv: 1
     }
   },
   created() {
@@ -62,9 +69,16 @@ export default {
       this.date = a[0]
       this.time = a[1]
     }, 1000)
+    this.beilv = document.body.offsetWidth / 1920
+    document.documentElement.style.setProperty('--beilv', this.beilv)
+    addEventListener('resize', eventListener = () => {
+      this.beilv = document.body.offsetWidth / 1920
+      document.documentElement.style.setProperty('--beilv', this.beilv)
+    })
   },
   destroyed() {
     clearInterval(interval)
+    removeEventListener('resize', eventListener)
   },
   methods: {
     getTime() {
@@ -76,7 +90,11 @@ export default {
     },
     handelClick(item) {
       if (item.path.substring(0, 4) === 'http') {
-        window.open(`${item.path}?username=${Cookie.get('account')}&password=${Cookie.get('password')}`)
+        if (item.path === 'http://192.168.1.47:9527/#/3d-overview') {
+          window.open(item.path)
+        } else {
+          window.open(`${item.path}?username=${Cookie.get('account')}&password=${Cookie.get('password')}`)
+        }
       } else {
         this.$router.push({
           name: item.path
@@ -92,7 +110,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.choicepart-container {
+#choicepart-container {
   user-select: none;
   min-width: 100%;
   min-height: 100vh;
@@ -102,35 +120,35 @@ export default {
   overflow-x: scroll;
   .choicepart-navbar {
     width: 100%;
-    min-width: 1600px;
+    min-width: calc(1600px * var(--beilv));
     height: 11vh;
     line-height: 11vh;
     text-align: center;
     color: #fff;
-    font-size: 30px;
+    font-size: calc(30px * var(--beilv));
     background: url('../assets/img/choicepart/header.png') no-repeat;
     background-size: 100% auto;
     .navbar-left {
       color: #49E1DE;
       float: left;
       position: relative;
-      left: 58px;
-      font-size: 32px;
+      left: calc(58px * var(--beilv));
+      font-size: calc(32px * var(--beilv));
       line-height: 12vh;
     }
     .navbar-right {
       color: #49E1DE;
       float: right;
       position: relative;
-      right: 84px;
-      font-size: 32px;
+      right: calc(84px * var(--beilv));
+      font-size: calc(32px * var(--beilv));
       line-height: 12vh;
       span {
         position: relative;
         .item-icon {
           position: absolute;
           top: 0;
-          right: -56px;
+          right: calc(-56px * var(--beilv));
           cursor: pointer;
         }
       }
@@ -138,62 +156,65 @@ export default {
     .navbar-title {
       .navbar-title-icon {
         position: relative;
-        top: 13px;
-        right: 12px;
+        top: calc(13px * var(--beilv));
+        right: calc(12px * var(--beilv));
+      }
+      img {
+        width: calc(34px * var(--beilv));
+        height: calc(46px * var(--beilv));
       }
     }
   }
   .choicepart-box {
-    width: 1656px;
+    width: calc(1456px * var(--beilv));
     margin: 0 auto;
     padding-top: 16vh;
     min-height: 88vh;
     .choicepart-item {
       display: inline-block;
-      width: 334px;
-      height: 444px;
-      margin: 40px;
-      background: url('../assets/img/choicepart/choice-item-back.png') no-repeat;
-      background-size: 100% 100%;
+      width: calc(334px * var(--beilv));
+      height: calc(444px * var(--beilv));
+      margin: calc(15px * var(--beilv));
       // border: 1px dashed #fff;
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+      box-shadow: 0 calc(2px * var(--beilv)) calc(10px * var(--beilv)) rgba(0, 0, 0, 0.5);
       top: 0;
-      border-radius: 5px;
+      font-size: calc(24px * var(--beilv));
+      border-radius: calc(5px * var(--beilv));
       overflow: hidden;
       cursor: pointer;
       position: relative;
       .choicepart-item-border {
         height: 100%;
-        border-radius: 5px;
-        padding: 0 5px;
-        line-height: 32px;
-        font-size: 28px;
+        border-radius: calc(5px * var(--beilv));
+        padding: 0 calc(5px * var(--beilv));
+        line-height: calc(32px * var(--beilv));
+        font-size: calc(28px * var(--beilv));
         font-weight: lighter;
         color: #2c6bd8;
         overflow: hidden;
         img {
-          width: 158px;
-          height: 158px;
+          width: calc(158px * var(--beilv));
+          height: calc(158px * var(--beilv));
           position: relative;
-          top: 77px;
-          left: 88px;
+          top: calc(77px * var(--beilv));
+          left: calc(88px * var(--beilv));
         }
       }
       .choicepart-item-title {
         overflow: hidden;
-        padding: 0 10px;
+        padding: 0 calc(10px * var(--beilv));
         text-overflow: ellipsis;
         white-space: nowrap;
         position: absolute;
         bottom: 0;
-        left: 2px;
-        right: 2px;
+        left: calc(2px * var(--beilv));
+        right: calc(2px * var(--beilv));
         text-align: center;
         color: #fff;
-        font-size: 16px;
-        line-height: 88px;
-        height: 103px;
-        letter-spacing: 2px;
+        font-size: calc(20px * var(--beilv));
+        line-height: calc(88px * var(--beilv));
+        height: calc(103px * var(--beilv));
+        letter-spacing: calc(2px * var(--beilv));
         transition: all .5s ease;
       }
     }
@@ -210,15 +231,15 @@ export default {
 }
 ::-webkit-scrollbar {
   //滚动条的宽度
-  width: 9px;
-  height: 9px;
+  width: calc(9px * var(--beilv));
+  height: calc(9px * var(--beilv));
 }
 ::-webkit-scrollbar-thumb {
   //滚动条的设置
   background-color: #dddddd;
   background-clip: padding-box;
-  min-height: 28px;
-  border-radius: 9px;
+  min-height: calc(28px * var(--beilv));
+  border-radius: calc(9px * var(--beilv));
 }
 ::-webkit-scrollbar-thumb:hover {
   background-color: #bbb;
