前台页面移动端浏览器显示适配

.env.development

 ENV = 'development'
 
 # 接口地址
-VUE_APP_BASE_API  = 'http://192.168.3.23:7001'
-VUE_APP_WS_API = 'ws://192.168.3.23:7001'
+#VUE_APP_BASE_API  = 'http://192.168.3.23:7001'
+#VUE_APP_WS_API = 'ws://192.168.3.23:7001'
 
-#VUE_APP_BASE_API  = 'http://60.217.78.224:7001'
-#VUE_APP_WS_API = 'ws://60.217.78.224:7001'
+VUE_APP_BASE_API  = 'http://60.217.78.224:7001'
+VUE_APP_WS_API = 'ws://60.217.78.224:7001'
 
 # 是否启用 babel-plugin-dynamic-import-node插件
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="renderer" content="webkit">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
     <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=686ljhxEzzmQTsn2nYUnngIYKZfLTVsm"></script>

src/assets/styles/index.scss

@@ -9,32 +9,6 @@
   font-family: Source Han Sans CN;
   src: url("./font/SourceHanSansCN-Regular.otf");
 }
-::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width : 4px;  /*高宽分别对应横竖滚动条的尺寸*/
-  height: 0;
-}
-::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius   : 4px;
-  background-color: #1961C5;
-  background-image: -webkit-linear-gradient(
-      45deg,
-      rgba(255, 255, 255, 0.2) 25%,
-      transparent 25%,
-      transparent 50%,
-      rgba(255, 255, 255, 0.2) 50%,
-      rgba(255, 255, 255, 0.2) 75%,
-      transparent 75%,
-      transparent
-  );
-}
-::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
-  background   : #ededed;
-  border-radius: 10px;
-}
 
 body {
   height: 100%;
@@ -56,9 +30,71 @@ html {
 img {
   -webkit-user-drag: none;
 }
-
-#app {
+@media screen and (max-width: 1530px) {
+  ::-webkit-scrollbar {
+    width : 0;
+    height: 0;
+  }
+  #app {
     height: 100%;
+    width: 1920px;
+    overflow-x: hidden;
+  }
+  .head-box {
+    width: 1920px;
+    position: absolute;
+  }
+  .head-box-login {
+    width: 1920px;
+    position: absolute;
+  }
+  .fixed-View {
+    position: absolute;
+    left: 1380px
+  }
+}
+@media screen and (min-width: 1530px) {
+  ::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width : 4px;  /*高宽分别对应横竖滚动条的尺寸*/
+    height: 0;
+  }
+  ::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius   : 4px;
+    background-color: #1961C5;
+    background-image: -webkit-linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.2) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.2) 50%,
+        rgba(255, 255, 255, 0.2) 75%,
+        transparent 75%,
+        transparent
+    );
+  }
+  ::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background   : #ededed;
+    border-radius: 10px;
+  }
+  #app {
+    height: 100%;
+  }
+  .head-box {
+    width: 100%;
+    position: fixed;
+  }
+  .head-box-login {
+    width: 100%;
+    position: fixed;
+  }
+  .fixed-View {
+    position: fixed;
+    right: 8vw;
+  }
 }
 
 *,

src/views/homepage/components/floatInquiryView.vue

@@ -165,12 +165,10 @@ export default {
   cursor: grabbing;
 }
 .fixed-View {
-  position: fixed;
   margin-left: 0;
   padding: 20px;
   width: 348px;
   height: 442px;
-  right: 8vw;
   bottom: 230px;
   background: #FFFFFF;
   border: 1px solid rgba(0,0,0,0.12);

src/views/homepage/console/askLog.vue

@@ -207,9 +207,7 @@ export default {
   }
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/console/collectPro.vue

@@ -172,9 +172,7 @@ export default {
   text-overflow: ellipsis;
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/console/collectSup.vue

@@ -181,9 +181,7 @@ export default {
   text-overflow: ellipsis;
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/console/index.vue

@@ -128,9 +128,7 @@ export default {
   text-overflow: ellipsis;
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/console/product.vue

@@ -256,9 +256,7 @@ export default {
   }
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/console/registerInfo.vue

@@ -265,9 +265,7 @@ export default {
   border-radius: 10px;
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/console/replyLog.vue

@@ -218,9 +218,7 @@ export default {
   }
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/console/userInfo.vue

@@ -416,9 +416,7 @@ export default {
   border-radius: 10px;
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/course/index.vue

@@ -174,9 +174,7 @@ export default {
   }
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/footer/cooperate.vue

@@ -216,9 +216,7 @@ export default {
   border-radius: 10px;
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/footer/index.vue

@@ -169,9 +169,7 @@ export default {
   }
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/footer/opinion.vue

@@ -217,9 +217,7 @@ export default {
   border-radius: 10px;
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/index.vue

 <template>
   <div class="page-body">
-    <div class="head-box">
+    <div class="head-box-home">
       <div class="head-box-top">
         <div class="top-call" />
         <div class="top-call"><img src="@/assets/home_images/cisnet_logo.png"></div>
@@ -513,8 +513,8 @@ export default {
     }
   }
 }
-.head-box {
-  width: 100vw;
+.head-box-home {
+  width: 100%;
   height: 750px;
   background: #1961C5;
   .head-box-top {

src/views/homepage/index_.vue

-<template>
-  <div>
-    <custom-table :col="col" :data="data" :span-method="arraySpanMethod" />
-  </div>
-</template>
-
-<script>
-import CustomTable from '@/components/CustomTable'
-/*
-
- */
-export default {
-  components: {
-    CustomTable
-  },
-  data() {
-    return {
-      col: [
-        {
-          prop: 'date',
-          label: '日期'
-        },
-        {
-          label: '配送信息',
-          children: [
-            {
-              prop: 'name',
-              label: '姓名'
-            },
-            {
-              label: '地址',
-              children: [
-                {
-                  prop: 'province',
-                  label: '省份'
-                },
-                {
-                  prop: 'city',
-                  label: '市区'
-                },
-                {
-                  prop: 'address',
-                  label: '地址'
-                }
-              ]
-            }
-          ]
-        }
-      ],
-      data: [
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          span: [
-            [1, 2], [1, 0], [2, 1], [1, 1], [1, 1]
-          ]
-        },
-        {
-          date: '2016-05-02',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          span: [
-            [1, 1], [1, 1], [0, 1], [1, 1], [1, 1]
-          ]
-        }
-      ]
-    }
-  },
-  methods: {
-    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
-      return row.span[columnIndex]
-    }
-  }
-}
-</script>
-<style>
-</style>

src/views/homepage/information/details.vue

@@ -187,9 +187,7 @@ export default {
   }
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/information/index.vue

@@ -242,9 +242,7 @@ export default {
   }
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/login.vue

@@ -387,9 +387,7 @@ export default {
   text-underline-offset: 5px; //下划线和文字间距
 }
 .head-box-login {
-  width: 100vw;
   background: #1961C5;
-  position: fixed;
   z-index: 999;
   .head-box-top {
     display: flex;
@@ -408,7 +406,7 @@ export default {
   }
 }
 .content-box-login {
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   display: table;
   background: #1961C5;

src/views/homepage/product/details.vue

@@ -261,9 +261,7 @@ export default {
   text-overflow: ellipsis;
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/product/hardware.vue

@@ -307,9 +307,7 @@ export default {
   }
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/product/index.vue

@@ -342,9 +342,7 @@ export default {
   text-overflow: ellipsis;
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/project/index.vue

@@ -219,9 +219,7 @@ export default {
   }
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/publish/buyInfo.vue

@@ -281,9 +281,7 @@ export default {
   border-radius: 10px;
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/publish/index.vue

@@ -183,9 +183,7 @@ export default {
   }
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/publish/otherInfo.vue

@@ -213,9 +213,7 @@ export default {
   border-radius: 10px;
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/publish/supplyInfo.vue

@@ -504,9 +504,7 @@ export default {
   border-radius: 10px;
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/software/index.vue

@@ -173,9 +173,7 @@ export default {
   }
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/supplier/details.vue

@@ -491,9 +491,7 @@ export default {
   }
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/supplier/index.vue

@@ -328,9 +328,7 @@ export default {
   }
 }
 .head-box {
-  width: 100vw;
   top: 0;
-  position: fixed;
   background: none repeat scroll 0 0 white;
   z-index: 999;
   box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);

src/views/homepage/userAgreement.vue

@@ -158,25 +158,5 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.logo{
-  position: fixed;
-  background-color: #333;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  opacity: 0.6;
-}
-.zck{
-  position: fixed;
-  height: 545px;
-  width: 947px;
-  top: 10px;
-  left: 197px;
-  background-color: white;
-}
-.sm{
-  background-color: lightgrey;
-  height: 31px;
-}
+
 </style>