Trang chủ Khám phá Trợ giúp
Đăng nhập
louisian
/
contract
1
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu khéo về 0 Wiki
Browse Source

修复iphone上的大量显示bug

louyu 7 năm trước cách đây
mục cha
90c2f4ebfb
commit
ccb8d4dbb7
16 tập tin đã thay đổi với 148 bổ sung và 71 xóa
Split View Hiển thị tình trạng sai khác
  1. 1 1
      config/index.js
  2. 3 2
      index.html
  3. 1 1
      src/App.vue
  4. 1 1
      src/assets/connectAdress/adress.js
  5. 20 3
      src/assets/css/general.css
  6. 3 8
      src/assets/css/my/rewrite.css
  7. 4 0
      src/components/blockButton.vue
  8. 1 0
      src/components/contactBlock.vue
  9. 8 5
      src/components/multiColorBackground.vue
  10. 8 1
      src/main.js
  11. 0 5
      src/views/companyAuth.vue
  12. 11 14
      src/views/contact.vue
  13. 5 2
      src/views/contract.vue
  14. 33 15
      src/views/drawSign.vue
  15. 16 6
      src/views/index.vue
  16. 33 7
      src/views/my.vue

+ 1 - 1
config/index.js
Xem Tập Tin 

@@ -13,7 +13,7 @@ module.exports = {
 
     proxyTable: {},
 
 
     // Various Dev Server settings
 
-    host: 'localhost', // can be overwritten by process.env.HOST
 
+    host: '0.0.0.0', // can be overwritten by process.env.HOST
 
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
 
     autoOpenBrowser: true,
 
     errorOverlay: true,

+ 3 - 2
index.html
Xem Tập Tin 

@@ -2,13 +2,14 @@
 
 <html>
 
   <head>
 
     <meta charset="utf-8">
 
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0">
 
     <title>合同</title>
 
       <link rel="stylesheet" href="//at.alicdn.com/t/font_587947_4e7wxdmocu3anhfr.css">
 
+    <script src="http://192.168.20.5:8081/target/target-script-min.js#anonymous"></script>
 
     <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
 
   </head>
 
   <body>
 
-    <div id="app"></div>
 
+    <div  id="app"></div>
 
     <!-- built files will be auto injected -->
 
   </body>
 
 </html>

+ 1 - 1
src/App.vue
Xem Tập Tin 

@@ -1,5 +1,5 @@
 
 <template>
 
-  <div id="app">
 
+  <div class="safari-fix" :class="{'hide-bar':!showTabbar}" id="app">
 
     <!-- <img src="./assets/logo.png"> -->
 
     <router-view/>
 
     <mt-tabbar v-model="selectedTab" v-if="showTabbar">

+ 1 - 1
src/assets/connectAdress/adress.js
Xem Tập Tin 

@@ -1,4 +1,4 @@
 
-let pre='http://localhost:3000';
 
+let pre='http://192.168.20.5:3000';
 
 let address={
 
   indexCount:'/index-count',
 
   contractData:'/contract',

+ 20 - 3
src/assets/css/general.css
Xem Tập Tin 

@@ -1,11 +1,11 @@
 
-.main-bg .content .title{
 
+h1.title{
 
   text-align: center;
 
   font-size: 0.5rem;
 
-  margin-top: 0.5rem;
 
+  padding-top: 0.5rem!important;
 
   color: #fff;
 
 }
 
 .fixed{
 
-  position: fixed;
 
+  position:absolute;
 
   top: 0;
 
   left: 0;
 
   width: 100%;
 
@@ -15,3 +15,20 @@
 
 .multi-blue{
 
   background-color: #60c0ff;
 
 }
 
+.mint-tabbar{
 
+  position: fixed;
 
+  z-index: 9;
 
+}
 
+.safari-fix{
 
+  /*display: flex;*/
 
+  position: absolute;
 
+  top:0;
 
+  left: 0;
 
+  bottom: 55px;
 
+  overflow: auto;
 
+  -webkit-overflow-scrolling:auto;
 
+  right: 0;
 
+}
 
+.safari-fix.hide-bar{
 
+  bottom: 0;
 
+}

+ 3 - 8
src/assets/css/my/rewrite.css
Xem Tập Tin 

@@ -3,8 +3,8 @@
 
   width: 4.4rem !important;
 
   height: 4rem !important;
 
   background-color: white;
 
-  margin: 0.4rem 0;
 
-  float: left;
 
+
 
+
 
   border-radius: 0.1rem;
 
   border: 0;
 
 }
 
@@ -16,12 +16,7 @@
 
   /*padding: 0.6rem auto 0;*/
 
   /*margin: 0 auto;*/
 
 }
 
-.button-container-rewrite:nth-child(2n+1){
 
-  margin-left: 0.35rem;
 
-}
 
-.button-container-rewrite:nth-last-child,.button-container-rewrite:nth-last-child(2){
 
-  margin-top:0rem!important;
 
-}
 
+
 
 .mint-cell{
 
   background-color: transparent !important;
 
   border-bottom: 1px solid #e8eff5;

+ 4 - 0
src/components/blockButton.vue
Xem Tập Tin 

@@ -33,6 +33,10 @@
 
     border-bottom: 1px #ececec solid;
 
 
   }
 
+  .button-container:last-child,.button-container:last-child(2){
 
+    border-bottom:0;
 
+  }
 
+
 
   .button-container:nth-child(2n) {
 
     border-left: 1px #ececec solid;
 
   }

+ 1 - 0
src/components/contactBlock.vue
Xem Tập Tin 

@@ -59,4 +59,5 @@
 
     font-size: 0.4rem;
 
     color: #666666;
 
   }
 
+
 
 </style>

+ 8 - 5
src/components/multiColorBackground.vue
Xem Tập Tin 

@@ -3,6 +3,9 @@
 
     <div v-if="showGoBack" class="icon go-back" @click="handleClick"><</div>
 
     <div class="bg-top" :style="{height:(topHeight||4)+'rem'}">
 
 
+    </div>
 
+    <div class="fixed multi-blue">
 
+      <slot name="header"></slot>
 
     </div>
 
     <div class="content" :class="{'full-height':showGoBack}">
 
       <slot></slot>
 
@@ -31,12 +34,12 @@
 
       background-color: #60c0ff;
 
     }
 
    .main-bg{
 
-     position: relative;
 
-     height: 100vh;
 
+     /*position: relative;*/
 
+     height: 100%;
 
      background-color: #e8eff5;
 
    }
 
    .icon{
 
-     position: fixed;
 
+     position: absolute;
 
      display: inline-block;
 
      top:0.6rem;
 
      left: 0.5rem;
 
@@ -52,12 +55,12 @@
 
     width: 100%;
 
     /*left: 0.4rem;*/
 
     top:0;
 
-    height: calc(100vh - 55px);
 
+    height: 100%;
 
     overflow-y: scroll;
 
     z-index: 4;
 
 
   }
 
   .content.full-height{
 
-    height: 100vh;
 
+    height: 100%;
 
   }
 
 </style>

+ 8 - 1
src/main.js
Xem Tập Tin 

@@ -14,7 +14,14 @@ Vue.prototype.$http=axios;
 
 import axios from 'axios'
 
 Vue.config.productionTip = false
 
 Vue.use(MintUI);
 
-
 
+var lastTouchEnd = 0;
 
+document.documentElement.addEventListener('touchend', function (event) {
 
+  var now = Date.now();
 
+  if (now - lastTouchEnd <=400) {
 
+    event.preventDefault();
 
+  }
 
+  lastTouchEnd = now;
 
+}, false);
 
 /* eslint-disable no-new */
 
 new Vue({
 
   el: '#app',

+ 0 - 5
src/views/companyAuth.vue
Xem Tập Tin 

@@ -134,11 +134,6 @@
 
 </script>
 
 
 <style scoped>
 
-  .title{
 
-    color:white;
 
-    font-size: 0.5rem;
 
-    margin-top: 0.6rem;
 
-  }
 
   .step-bar{
 
     margin-top: 0.6rem;
 
   }

+ 11 - 14
src/views/contact.vue
Xem Tập Tin 

@@ -1,16 +1,17 @@
 
 <template>
 
   <div>
 
     <multi-color-background>
 
+      <div  slot="header">
 
+        <h1 class="title">联系人</h1>
 
+        <i class="add-contact" @click="$router.push('/add-contact')"></i>
 
+        <mt-navbar class="navbar" v-model="selected">
 
+          <mt-tab-item id="1">个人</mt-tab-item>
 
+          <mt-tab-item id="2">企业</mt-tab-item>
 
+
 
+        </mt-navbar>
 
+      </div>
 
       <div class="inner-container">
 
-        <div class="fixed multi-blue">
 
-          <h1 class="title">联系人</h1>
 
-          <i class="add-contact" @click="$router.push('/add-contact')"></i>
 
-          <mt-navbar class="navbar" v-model="selected">
 
-            <mt-tab-item id="1">个人</mt-tab-item>
 
-            <mt-tab-item id="2">企业</mt-tab-item>
 
 
-          </mt-navbar>
 
-        </div>
 
 
         <mt-tab-container class="contact-list" v-model="selected">
 
           <mt-tab-container-item id="1">
 
@@ -73,14 +74,10 @@
 
 
 <style scoped>
 
   .inner-container{
 
-    position: relative;
 
+    /*position: relative;*/
 
     margin: 0 0.4rem;
 
   }
 
-  .title{
 
-    margin-top: 0.5rem;
 
-    font-size: 0.5rem;
 
-    color: #fff;
 
-  }
 
+
 
   .add-contact{
 
     display: inline-block;
 
     position: absolute;

+ 5 - 2
src/views/contract.vue
Xem Tập Tin 

@@ -1,6 +1,6 @@
 
 <template>
 
     <multi-background>
 
-      <div class="fixed multi-blue">
 
+      <div class="fix-margin" slot="header">
 
         <div class="search-container ">
 
           <i class="icon-search"></i>
 
           <input placeholder="合同名称或合同编号" class="search-input"/>
 
@@ -57,10 +57,13 @@
 
     height: 1.1rem;
 
     border-radius: 0.6rem;
 
     border: 1px solid #fff;
 
-    margin: 0.2rem 0.4rem 0;
 
+    margin: 0 0.4rem ;
 
     position: relative;
 
 
   }
 
+  .fix-margin{
 
+    padding-top: 0.2rem;
 
+  }
 
   .icon-search{
 
     position: absolute;
 
     display: inline-block;

+ 33 - 15
src/views/drawSign.vue
Xem Tập Tin 

@@ -1,7 +1,7 @@
 
 <template>
 
   <multi-color-background show-go-back="1">
 
     <h1 class="title">手绘签名</h1>
 
-    <div class="inner draw" >
 
+    <div class="inner draw">
 
       <div class="canvas-container" @mousemove="beginPath($event)">
 
         <canvas
 
           id="canvas"
 
@@ -48,6 +48,8 @@
 
   </multi-color-background>
 
 </template>
 
 <script>
 
+
 
+
 
   import MultiColorBackground from "../components/multiColorBackground";
 
   export default {
 
     components: {MultiColorBackground},
 
@@ -76,6 +78,27 @@
 
     created () {
 
     },
 
     mounted () {
 
+      var content = document.getElementById('canvas');
 
+      if(content){
 
+        content.addEventListener('touchstart', function (event) {
 
+          this.allowUp = (this.scrollTop > 0);
 
+          this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
 
+          this.slideBeginY = event.pageY;
 
+        });
 
+
 
+        content.addEventListener('touchmove', function (event) {
 
+          var up = (event.pageY > this.slideBeginY);
 
+          var down = (event.pageY < this.slideBeginY);
 
+          this.slideBeginY = event.pageY;
 
+          if ((up && this.allowUp) || (down && this.allowDown)) {
 
+            event.stopPropagation();
 
+          }
 
+          else {
 
+            event.preventDefault();
 
+          }
 
+        });
 
+      }
 
+      // console.log('hellp')
 
       const canvas = document.querySelector('#canvas')
 
       this.canvasHeight=parseFloat(window.getComputedStyle(canvas).getPropertyValue('height'));
 
       this.canvasWidth=parseFloat(window.getComputedStyle(canvas).getPropertyValue('width'));
 
@@ -107,6 +130,7 @@
 
       }
 
     },
 
     methods: {
 
+
 
       isPc () {
 
         const userAgentInfo = navigator.userAgent
 
         const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
 
@@ -133,13 +157,9 @@
 
           const t = e.target
 
           let canvasX
 
           let canvasY
 
-          if (this.isPc()) {
 
-            canvasX = e.clientX - t.parentNode.offsetLeft
 
-            canvasY = e.clientY - t.parentNode.offsetTop
 
-          } else {
 
-            canvasX = e.changedTouches[0].clientX - t.parentNode.offsetLeft
 
-            canvasY = e.changedTouches[0].clientY - t.parentNode.offsetTop
 
-          }
 
+          canvasX = e.touches[0].clientX - t.parentNode.offsetLeft
 
+          canvasY = e.touches[0].clientY - t.parentNode.offsetTop
 
+
 
           this.context.lineTo(canvasX, canvasY)
 
           this.context.stroke()
 
         }
 
@@ -172,8 +192,10 @@
 
         this.canvasMoveUse = true
 
         // client是基于整个页面的坐标
 
         // offset是cavas距离顶部以及左边的距离
 
-        const canvasX = e.clientX - e.target.parentNode.offsetLeft
 
-        const canvasY = e.clientY - e.target.parentNode.offsetTop
 
+        console.log(e)
 
+        console.log('a',e.touches[0].clientX,e.touches[0].clientY,e.target.parentNode.offsetLeft,e.target.parentNode.offsetTop)
 
+        const canvasX = e.touches[0].clientX -e.target.parentNode.offsetLeft
 
+        const canvasY = e.touches[0].clientY - e.target.parentNode.offsetTop
 
         this.setCanvasStyle()
 
         // 清除子路径
 
         this.context.beginPath()
 
@@ -234,11 +256,6 @@
 
   }
 
 </script>
 
 <style >
 
-  .title{
 
-  color:white;
 
-  font-size: 0.5rem;
 
-  margin-top: 0.6rem;
 
-  }
 
   .control{
 
 
     width: 100%;
 
@@ -291,6 +308,7 @@
 
     text-align: right;
 
   }
 
   #canvas{
 
+    /*position: absolute;*/
 
       width: 100%;
 
     /*width: 100%;*/
 
       height: 11.1rem;

+ 16 - 6
src/views/index.vue
Xem Tập Tin 

@@ -8,8 +8,8 @@
 
       <block-button button-id="wait_edit" :button-name="'待修改('+count.wait_edit+')'" @click="handleClick" :button-img-src="require('../../static/index/wait_edit.png')"></block-button>
 
       <block-button button-id="wait_sign" :button-name="'待签署('+count.wait_sign+')'" @click="handleClick" :button-img-src="require('../../static/index/wait_sign.png')"></block-button>
 
       <block-button button-id="already_sign" :button-name="'已签署('+count.already_sign+')'" @click="handleClick" :button-img-src="require('../../static/index/already_sign.png')"></block-button>
 
-      <block-button button-id="already_active" :button-name="'已生效('+count.already_active+')'" @click="handleClick" :button-img-src="require('../../static/index/already_active.png')"></block-button>
 
-      <block-button button-id="out_date" :button-name="'已失效('+count.out_date+')'" @click="handleClick" :button-img-src="require('../../static/index/out_date.png')"></block-button>
 
+      <block-button class="no-bottom-border" button-id="already_active" :button-name="'已生效('+count.already_active+')'" @click="handleClick" :button-img-src="require('../../static/index/already_active.png')"></block-button>
 
+      <block-button class="no-bottom-border" button-id="out_date" :button-name="'已失效('+count.out_date+')'" @click="handleClick" :button-img-src="require('../../static/index/out_date.png')"></block-button>
 
 
     </div>
 
   </div>
 
@@ -52,21 +52,31 @@
 
 
 <style scoped>
 
   .main-bg{
 
-    padding: 1px ;
 
     background-color: #60c0ff;
 
-    height: 100vh;
 
+    height: 100%;
 
+    display: flex;
 
+
 
+    flex-direction: column;
 
+    align-items: center;
 
+    justify-content: space-around;
 
+  }
 
+  .no-bottom-border{
 
+    border-bottom: 0!important;
 
   }
 
   .button-inner{
 
     width: 9.3rem;
 
-    margin: 0.6rem auto 0;
 
+    margin: 0 auto 0;
 
     background-color: #fff;
 
     border-radius: 0.1rem;
 
 
+    /*padding-bottom: 0.5rem;*/
 
+
 
   }
 
   .title{
 
     text-align: center;
 
     font-size: 0.5rem;
 
-    margin-top: 0.5rem;
 
+    /*margin-top: 0.5rem;*/
 
     color: #fff;
 
+
 
   }
 
 </style>

+ 33 - 7
src/views/my.vue
Xem Tập Tin 

@@ -12,10 +12,27 @@
 
 
         </div>
 
       </div>
 
-    <block-button :is-rewrite="true" button-id="person" button-name="个人认证" @click="handleClick" :button-img-src="require('../../static/my/person.png')"></block-button>
 
-    <block-button :is-rewrite="true" button-id="company" button-name="企业认证" @click="handleClick" :button-img-src="require('../../static/my/company.png')"></block-button>
 
-    <block-button :is-rewrite="true" button-id="sign" button-name="我的签名" @click="handleClick" :button-img-src="require('../../static/my/sign.png')"></block-button>
 
-    <block-button :is-rewrite="true" button-id="setting" button-name="安全设置" @click="handleClick" :button-img-src="require('../../static/my/setting.png')"></block-button>
 
+    <div class="button-line">
 
+      <block-button
 
+        :is-rewrite="true"
 
+        button-id="person"
 
+        button-name="个人认证"
 
+        @click="handleClick"
 
+        :button-img-src="require('../../static/my/person.png')">
 
+      </block-button>
 
+      <block-button
 
+        :is-rewrite="true"
 
+        button-id="company"
 
+        button-name="企业认证"
 
+        @click="handleClick"
 
+        :button-img-src="require('../../static/my/company.png')">
 
+      </block-button>
 
+    </div>
 
+    <div class="button-line">
 
+      <block-button :is-rewrite="true" button-id="sign" button-name="我的签名" @click="handleClick" :button-img-src="require('../../static/my/sign.png')"></block-button>
 
+      <block-button :is-rewrite="true" button-id="setting" button-name="安全设置" @click="handleClick" :button-img-src="require('../../static/my/setting.png')"></block-button>
 
+    </div>
 
+
 
     <mt-popup
 
       v-model="userSwitcherVisible"
 
       class="switch-popup"
 
@@ -75,8 +92,11 @@
 
   @import '../assets/css/my/rewrite.css';
 
   .main{
 
     background-color: #60c0ff;
 
-    height: 100vh;
 
+    height: 100%;
 
+    display: flex;
 
+    flex-direction: column;
 
     padding: 1px 0.4rem;
 
+    justify-content: space-around;
 
   }
 
   .user-info{
 
     /*margin-top: 1rem;*/
 
@@ -88,14 +108,14 @@
 
     height: 1.9rem;
 
     border-radius: 1.9rem;
 
     border: 2px white solid;
 
-    top:1rem;
 
+    top:0.5rem;
 
     left: 50%;
 
     transform: translateX(-50%);
 
   }
 
   .user-info-container{
 
     width: 100%;
 
     height: 4.7rem;
 
-    margin-top: 2rem;
 
+    margin-top: 1rem;
 
     background-color: white;
 
     display: inline-block;
 
     border-radius: 0.1rem;
 
@@ -177,4 +197,10 @@
 
     background-color: white;
 
     margin: 0 auto;
 
   }
 
+
 
+  .button-line{
 
+    display: flex;
 
+    width: 100%;
 
+    justify-content: space-between;
 
+  }
 
 </style>