我的 联系人 签名页

src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <!-- <img src="./assets/logo.png"> -->
     <router-view/>
-    <mt-tabbar v-model="selectedTab">
+    <mt-tabbar v-model="selectedTab" v-if="showTabbar">
       <mt-tab-item id="index">
         <img slot="icon" :src="icon_now.index">
         首页
@@ -55,11 +55,21 @@ export default {
         contract:icon_contract_active,
         contact:icon_contact_active,
         my:icon_my_active
-      }
-
+      },
+      showTabbar:true
 
     }
   },
+  mounted(){
+    console.log(this.$router.currentRoute.path)
+    let showTab=['/index','/contract','/contact','/my'];
+    if(!~showTab.indexOf(this.$router.currentRoute.path)){
+      this.showTabbar=false
+    }else{
+      this.showTabbar=true;
+      this.selectedTab=this.$router.currentRoute.path.substr(1);
+    }
+  },
   watch:{
     'selectedTab':function(val){
       this.$router.push('/'+val);
@@ -69,6 +79,17 @@ export default {
       }
       this.icon_now[val]=this.icon_active[val];
 
+    },
+    '$route' (to, from) {
+      // console.log(this.$router.path)
+      // console.log(to)
+      let showTab=['/index','/contract','/contact','/my'];
+      if(!~showTab.indexOf(to.path)){
+        this.showTabbar=false
+      }else{
+        this.showTabbar=true
+        this.selectedTab=to.path.substr(1);
+      }
     }
   }
 }

src/assets/css/contract/rewrite.css

@@ -0,0 +1,16 @@
+.mint-navbar .mint-tab-item {
+   padding: 0 0 0.1rem;
+  color: #c6e5fa;
+
+  /*font-size: 15px;*/
+}
+.mint-navbar .mint-tab-item.is-selected {
+  /*padding: 0 0 0.2rem;*/
+  color: #fff;
+  border-bottom: 2px solid white;
+
+  /*font-size: 15px;*/
+}
+.mint-navbar{
+  background-color: transparent;
+}

src/assets/css/general.css

@@ -0,0 +1,6 @@
+.main-bg .content .title{
+  text-align: center;
+  font-size: 0.5rem;
+  margin-top: 0.5rem;
+  color: #fff;
+}

src/assets/css/my/rewrite.css

@@ -0,0 +1,41 @@
+.button-container-rewrite{
+  display: inline-block;
+  width: 4.4rem !important;
+  height: 4rem !important;
+  background-color: white;
+  margin: 0.4rem 0;
+  float: left;
+  border-radius: 0.1rem;
+  border: 0;
+}
+.button-img-rewrite{
+  width: 2.4rem !important;
+  height: 2.8rem !important;
+  /*border:1px solid #090;*/
+  padding-top: 0.6rem;
+  /*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;
+}
+.mint-cell-wrapper{
+  background-image: none !important;
+}
+.mint-cell-text{
+  color: #333333!important;
+}
+.mint-cell:last-child{
+  background-image: none !important;
+}
+.mint-cell-value{
+  font-size:0.3rem;
+}
+

src/components/blcokButton.vue → src/components/blockButton.vue

@@ -1,19 +1,20 @@
 <template>
-    <div class="button-container" @click="buttonClick">
-      <img class="button-img" :src="buttonImgSrc">
+    <div class="button-container " :class="{'button-container-rewrite':isRewrite}" @click="buttonClick">
+      <img class="button-img" :class="{'button-img-rewrite':isRewrite}" :src="buttonImgSrc">
       <p class="button-name">{{buttonName}}</p>
     </div>
 </template>
 
 <script>
     export default {
-        name: "blcokButton",
+        name: "blockButton",
         data(){
             return{
               id:this.buttonId,
+
             }
         },
-        props:["buttonName",'buttonId',"buttonImgSrc"],
+        props:["buttonName",'buttonId',"buttonImgSrc",'isRewrite'],
         methods:{
           buttonClick:function () {
             this.$emit('click',this.id);
@@ -24,11 +25,16 @@
 
 <style scoped>
   .button-container{
-    width: 4.6rem;
+    width: 4.65rem;
     height: 3.5rem;
-    display: inline-block;
-
+    /*display: inline-block;*/
+    float: left;
     /*border: 1px solid black;*/
+    border-bottom: 1px #ececec solid;
+
+  }
+  .button-container:nth-child(2n) {
+    border-left: 1px #ececec solid;
   }
   .button-img{
     width: 1.7rem;

src/components/contactBlock.vue

@@ -0,0 +1,61 @@
+<template>
+  <div @click="handleClick(userData)" class="contact-container clearfix">
+    <img class="user-profile" :src="userData.userImg||require('../../static/contact/myavt.png')">
+    <p class="user-name">{{userData.username}}<span class="user-realname">{{userData.userRealname}}</span></p>
+    <p class="phone">{{userData.phone}}</p>
+  </div>
+</template>
+
+<script>
+    export default {
+        name: "contactBlock",
+      props:['userData'],
+      methods:{
+          handleClick(user){
+            this.$emit('click',user)
+          }
+      }
+    }
+</script>
+
+<style scoped>
+  .contact-container{
+    width: 100%;
+    height: 1.7rem;
+    background-color: white;
+    box-shadow: 0rem 0rem 0.3rem 0.1rem
+    rgba(96, 192, 255, 0.35);
+    border-radius: 0.1rem;
+    margin-top: 0.4rem;
+
+  }
+  .user-profile{
+    float: left;
+    width: 1.2rem;
+    height: 1.2rem;
+    margin:0.25rem 0.3rem;
+
+  }
+  .user-name{
+    font-size: 0.4rem;
+    line-height: 0.6rem;
+    color:#1491e2;
+    margin-top: 0.3rem;
+    text-align: left;
+  }
+  .user-realname{
+    height: 0.6rem;
+    font-size: 0.3rem;
+    color: white;
+    background-color:  #60c0ff;
+    border-radius: 0.3rem;
+    padding: 0.1rem 0.15rem;
+    margin-left: 0.3rem;
+  }
+  .phone{
+    text-align: left;
+    margin-top: 0.05rem;
+    font-size: 0.4rem;
+    color: #666666;
+  }
+</style>

src/components/contractDetail.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="detail-block-container">
+      <contract-detail-block :contract-data="contractDataInner[0]"></contract-detail-block>
+      <div @click="isPullDown=!isPullDown" class="puller">
+        <img :src="isPullDown?icon_pullup:icon_pulldown">
+      </div>
+      <div class="hide-blocks" v-show="isPullDown">
+        <contract-detail-block :is-out-date="true" v-for="(item,key) in contractDataInner" :key="key" v-if="key>0" :contract-data="item"></contract-detail-block>
+      </div>
+    </div>
+</template>
+
+<script>
+  import icon_pullup from '../../static/contract/pullup.png';
+  import icon_pulldown from '../../static/contract/pulldown.png';
+
+  import contractDetailBlock from './contractDetailBlock.vue';
+    export default {
+        name: "contractDetail",
+      props:["contractData"],
+      components:{
+          contractDetailBlock
+      },
+      data(){
+          return{
+            icon_pulldown:icon_pulldown,
+            icon_pullup:icon_pullup,
+            isPullDown:false,
+            contractDataInner:this.contractData,
+          }
+      }
+    }
+</script>
+
+<style scoped>
+.detail-block-container{
+  padding: .3rem;
+  margin-top: 0.3rem;
+  background-color: #fff;
+  box-shadow: 5px 5px 3px 1px rgba(96, 192, 255, 0.35);
+  border-radius: 0.1rem;
+  transition: all  .5s ease-in-out;
+}
+  .puller img{
+    /*margin: 0 0.3rem ;*/
+    width: 8.6rem;
+  }
+</style>

src/components/contractDetailBlock.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="detail-container">
+      <div class="header clearfix">
+        <p class="id">
+          {{contractData.id}}
+        </p>
+        <p class="status" :class="{'gray':isOutDate}">
+          {{contractData.status}}
+        </p>
+      </div>
+      <p class="title" :class="{'gray':isOutDate}">
+        {{contractData.title}}
+      </p>
+      <p class="date">
+        {{contractData.date}}
+      </p>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "contractDetailBlock",
+      props:['contractData','isOutDate'],
+      data(){
+          return{
+            contractDataInner:this.contractData,
+          }
+      }
+    }
+</script>
+
+<style scoped>
+  .header{
+    /*margin-top: 0.4rem;*/
+
+  }
+  p.id{
+    float: left;
+    color:#808080;
+    font-size: 0.4rem;
+
+  }
+  p.status{
+    color: #f1325f;
+    font-size: 0.4rem;
+    float: right;
+  }
+  p.title{
+    text-align: left;
+    font-size: 0.4rem;
+    margin-top: 0.2rem;
+    color: #1491e2;
+  }
+  p.date{
+    text-align: left;
+    color: #808080;
+    font-size: 0.3rem;
+    margin-top: 0.2rem;
+
+  }
+  .gray{
+    color: #808080 !important;
+  }
+  .detail-container + .detail-container{
+    margin-top: 0.6rem;
+  }
+</style>

src/components/multiColorBackground.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="main-bg">
-    <div class="bg-top">
+    <div class="bg-top" :style="{height:(topHeight||4)+'rem'}">
 
     </div>
     <div class="content">
@@ -13,14 +13,15 @@
 
 <script>
     export default {
-        name: "multiColorBackground"
+        name: "multiColorBackground",
+      props:['topHeight']
     }
 </script>
 
 <style scoped>
     .bg-top{
       width: 100%;
-      height: 2.7rem;
+      height: 4rem;
       background-color: #60c0ff;
     }
    .main-bg{
@@ -30,10 +31,10 @@
    }
   .content{
     position: absolute;
-    width: 9.2rem;
-    left: 0.4rem;
+    width: 100%;
+    /*left: 0.4rem;*/
     top:0;
-    height: 100vh;
+    height: calc(100vh - 55px);
     z-index: 4;
   }
 </style>

src/components/picUploader.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="uploader-container">
+      <div class="uploader">
+          <img v-if="isReview" :src="dataSrc" ref="reviewPic" class="review-img"/>
+          <img v-if="!isReview" class="uploader-icon" :src="require('../../static/contact/myavt.png')"/>
+          <input type="file" accept="image/*" ref="picInput" class="file-uploader" @change="handleFileUpload" />
+      </div>
+      <p class="description">{{description||'请上传照片'}}</p>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "picUploader",
+        props:['description'],
+        data(){
+          return{
+            isReview:false,
+            dataSrc:null,
+          }
+        },
+      mounted(){
+        this.isReview=false;
+        this.dataSrc=null;
+      },
+      methods:{
+          handleFileUpload(){
+            const refs = this.$refs;
+            const elInput = refs.picInput;
+            const elImg = refs.reviewPic;
+            const reader = new FileReader();
+            reader.onload = (e) => {
+              const src = e.target.result;
+              this.dataSrc = src;
+            };
+            if (elInput.files && elInput.files[0]) {
+              reader.readAsDataURL(elInput.files[0]);
+            }
+            this.isReview=true;
+              console.log('file changed')
+          }
+      }
+    }
+</script>
+
+<style scoped>
+  .uploader-container{
+    width: 100%;
+    margin-bottom: 0.3rem;
+    overflow: hidden;
+  }
+  .uploader{
+    margin: 0 auto;
+
+    width: 2rem;
+    height: 2rem;
+    border-radius: 10px;
+    border: solid 2px #60c0ff;
+    position: relative;
+
+  }
+  .review-img{
+    position: absolute;
+    width: 1.8rem;
+    height: 1.8rem;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    z-index: 1;
+  }
+  .file-uploader{
+    position: absolute;
+    z-index: 2;
+    opacity: 0;
+    width: 2rem;
+    height: 2rem;
+    top: 0;
+    left: 0;
+  }
+  .uploader-icon{
+    width: 0.8rem;
+    height: 0.6rem;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    z-index: 1;
+  }
+  .description{
+    margin-top: 0.2rem;
+    font-size: 0.4rem;
+  }
+</style>

src/components/popOutBox.vue

@@ -0,0 +1,84 @@
+<template>
+  <div v-if="showBox">
+    <div @click="handleClick" class="mask">
+    </div>
+    <div class="box-container">
+      <h1 class="title">
+        <slot name="title"></slot>
+      </h1>
+      <div class="action-container">
+        <button class="action-button">
+          <slot name="action1"></slot>
+        </button>
+        <button class="action-button">
+          <slot name="action2"></slot>
+        </button>
+      </div>
+
+    </div>
+  </div>
+
+</template>
+
+<script>
+    export default {
+        name: "popOutBox",
+      props:['value'],
+      data(){
+          return{
+            showBox:false
+          }
+      },
+      methods:{
+        handleClick(){
+          this.showBox=false;
+          this.$emit('input',false)
+        }
+      },
+      watch:{
+          value(val){
+            this.showBox=!!val;
+          }
+      }
+    }
+</script>
+
+<style scoped>
+  .mask{
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-color: #000;
+    opacity: 0.5;
+    z-index: 999;
+  }
+  .box-container{
+    position: absolute;
+    width: 8.3rem;
+    height: 4.2rem;
+    border-radius: 0.1rem;
+    background-color: white;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    z-index: 1000;
+  }
+  .title{
+    margin-top: 1rem;
+    font-size: 0.4rem;
+    color: #1491e2;
+  }
+  .action-button{
+    width: 3.8rem;
+    height: 1.1rem;
+    background-color: #60c0ff;
+    border-radius: 0.6rem;
+    color:#fff;
+    border: none;
+    margin-left: 0.15rem;
+    margin-top: 0.9rem;
+    font-size: 0.4rem;
+  }
+</style>

src/components/radio.vue

@@ -0,0 +1,31 @@
+<template>
+    <span class="radio-container"><i :class="{'active':checked}" class="icon-checked">*</i><slot></slot></span>
+</template>
+
+<script>
+    export default {
+        name: "radio",
+      props:['checked']
+    }
+</script>
+
+<style scoped>
+    .radio-container{
+      font-size: 0.4rem;
+      line-height: 0.4rem;
+    }
+    .icon-checked{
+      display: inline-block;
+      box-sizing: content-box;
+      width: 0.4rem;
+      height: 0.4rem;
+      line-height: 0.4rem;
+      margin-right: 0.2rem;
+      border: 1px solid black;
+      border-radius: 0.2rem;
+    }
+    .icon-checked.active{
+      border: 1px solid white;
+      /*border-radius: 100%;*/
+    }
+</style>

src/components/selector.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <mt-cell @click.native="showPopup"   is-link :title="label"><p>{{selectedValue||placeholder}}</p></mt-cell>
+    <mt-popup
+      class="picker-popup"
+      v-model="popupVisible"
+      position="bottom">
+      <mt-picker :slots="slots"  :default-index="options.indexOf(value)"  @change="onValuesChange"></mt-picker>
+    </mt-popup>
+  </div>
+</template>
+
+<script>
+    export default {
+        name: "selector",
+      props:['label','placeholder','value','options'],
+      data(){
+          return{
+            selectedValue:null,
+            selectedIndex:-1,
+            popupVisible:false,
+            slots:[
+              {
+                values:[],
+                className: 'slot1',
+                textAlign: 'center'
+              }
+            ]
+          }
+      },
+      mounted(){
+
+          for(let i in this.options){
+            this.slots[0].values.push(this.options[i])
+          }
+
+          // console.log(this.optionsIn);
+        // this.optionsIn.assign(this.options);
+      },
+      computed:{
+
+      },
+      methods:{
+        showPopup(){
+          this.popupVisible=true;
+          this.selectedValue=this.slots[0].values[0];
+          this.$emit('input',this.selectedValue);
+        },
+        onValuesChange(picker,val){
+
+          if(!this.popupVisible)return;
+          this.selectedValue=val[0];
+          this.$emit('input',this.selectedValue);
+
+
+        }
+      },
+      computed:{
+
+      },
+      watch:{
+        'value':function (val) {
+          this.selectedValue = val;
+        },
+        'options':function (val) {
+          // console.log(val)
+          this.slots[0].values=[];
+
+          for(let i in val){
+            this.slots[0].values.push(val[i])
+          }
+        },
+      }
+    }
+</script>
+
+<style>
+  .mint-cell-title {
+    width: 105px;
+    flex: none;
+  }
+  .picker-popup{
+    width: 100%;
+  }
+</style>

src/components/signBlock.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="sign-block">
+      <img class="sign-pic"/>
+      <div class="control clearfix">
+        <span class="set-default-container">
+          <radio @click="setDefault()" :checked="value==signData.id"  class="set-default">设为默认</radio>
+        </span>
+        <button class="delete" @click="deleteSign()">删除</button>
+      </div>
+    </div>
+
+</template>
+
+<script>
+  import radio from '../components/radio.vue';
+    export default {
+        name: "signBlock",
+      props:['value'],
+      components:{
+          radio
+      },
+      data(){
+          return{
+            signData:{
+              id:'',
+              src:'',
+            }
+          }
+
+      },
+      methods:{
+          setDefault(){
+            this.$emit('setDefault',this.signData.id);
+          },
+          deleteSign(){
+            this.$emit('deleteSign',this.signData.id);
+          }
+      }
+    }
+</script>
+
+<style scoped>
+    .sign-block{
+      width: 100%;
+      height: 3.3rem;
+      background-color: white;
+      border-radius: 0.1rem;
+      margin-top: 0.3rem;
+    }
+  .sign-pic{
+    width: 100%;
+    height: 2.2rem;
+    border: none;
+    border-bottom: 1px solid #e8eff5;
+    box-sizing: border-box;
+  }
+  .set-default-container{
+    float: left;
+    height: 1rem;
+    line-height: 1rem;
+    margin-left: 0.4rem;
+  }
+  .delete{
+    float: right;
+    background-color: white;
+    border: none;
+    height: 1rem;
+    margin-right: 0.3rem;
+  }
+
+</style>

src/components/userSwitchBlock.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="user-switch-block">
+      <p class="name">{{userData.username}}</p>
+      <p class="is-realname">{{userData.isRealName}}<i class="icon icon-right-arrow-2">>></i></p>
+
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "userSwitchBlock",
+        props:['userData']
+    }
+</script>
+
+<style scoped>
+  .user-switch-block{
+    background-color: transparent;
+    height: 1.8rem;
+    width: 100%;
+    border-bottom: 1px solid #e8eff5;
+  }
+  .name{
+    height: 1.8rem;
+    line-height: 1.8rem;
+    font-size: 0.4rem;
+    color: #1491e2;
+    float: left;
+    margin-left: 0.3rem;
+  }
+  .is-realname{
+    float: right;
+    height: 1.8rem;
+    line-height: 1.8rem;
+    font-size: 0.3rem;
+    color: #66c0ff;
+    margin-right: 0.3rem;
+  }
+  .icon{
+    margin-left: 0.3rem;
+  }
+</style>

src/main.js

@@ -6,6 +6,7 @@ import 'mint-ui/lib/style.css'
 import App from './App.vue'
 import router from './router'
 import './assets/css/base.css'
+import './assets/css/general.css'
 // import  '//at.alicdn.com/t/font_587947_4e7wxdmocu3anhfr.css'
 
 Vue.config.productionTip = false

src/router/index.js

@@ -5,7 +5,10 @@ import index from '../views/index.vue'
 import contract from '../views/contract.vue'
 import contact from '../views/contact.vue'
 import my from '../views/my.vue'
-
+import companyAuth from '../views/companyAuth.vue';
+import addContact from '../views/addContact.vue';
+import drawSign from '../views/drawSign.vue';
+import sign from '../views/sign.vue'
 Vue.use(Router)
 
 export default new Router({
@@ -25,6 +28,19 @@ export default new Router({
     },{
       path:'/my',
       component:my
+    },{
+      path:'/company',
+      component:companyAuth
+    },{
+      path:'/add-contact',
+      component:addContact
+    },{
+      path:'/draw-sign',
+      component:drawSign
+    },{
+      path:'/sign',
+      component:sign
     }
+
   ]
 })

src/views/addContact.vue

@@ -0,0 +1,67 @@
+<template>
+    <multi-color-background top-height="2.7">
+      <h1 class="title">添加联系人</h1>
+      <div class="main" >
+        <div class="input-container">
+          <mt-field label="姓名" placeholder="请输入真实姓名或公司名称" v-model="contactInfo.name"></mt-field>
+          <mt-field label="账号" placeholder="请输入联系人账号" v-model="contactInfo.phone"></mt-field>
+          <selector label="分类" placeholder="请选择联系人类别" :options="typeOptions" v-model="contactInfo.type"></selector>
+        </div>
+        <button class="submit" @click="fakeSubmit">提交</button>
+      </div>
+    </multi-color-background>
+</template>
+
+<script>
+    import MultiColorBackground from "../components/multiColorBackground";
+    import Selector from "../components/selector";
+    export default {
+        name: "addContact",
+      components: {Selector, MultiColorBackground},
+      data(){
+          return{
+            contactInfo:{
+              name:'',
+              phone:'',
+              type:''
+            },
+            typeOptions:[
+              '个人',
+              '企业'
+            ]
+          }
+      },
+      methods: {
+        fakeSubmit() {
+          console.log(this.contactInfo)
+        }
+      }
+    }
+</script>
+
+<style scoped>
+  .title{
+    color:white;
+    font-size: 0.5rem;
+    margin-top: 0.6rem;
+  }
+  .main .input-container{
+    background-color: white;
+    border: 1px  white solid;
+    border-radius: 10px;
+  }
+  .main{
+    margin: 0.4rem 0.4rem 0;
+
+  }
+  .submit{
+    width: 100%;
+    height: 1.1rem;
+    border: none;
+    border-radius: 0.6rem;
+    margin-top: 1.4rem;
+    background-color: #60c0ff;
+    font-size: 0.4rem;
+    color: white;
+  }
+</style>

src/views/companyAuth.vue

@@ -0,0 +1,224 @@
+<template>
+    <multi-color-background>
+        <h1 class="title">企业认证</h1>
+        <div class="step-bar">
+          <span class="step" :class="{'active':stepNum===1 }">企业信息</span>
+          <i class="right-arrow"></i>
+          <span class="step" :class="{'active':stepNum===2 }">法人信息</span>
+          <i class="right-arrow"></i>
+          <span class="step" :class="{'active':stepNum===3 }">授权人信息</span>
+        </div>
+        <div class="step-block" v-if="stepNum===1">
+          <div class="input-container">
+            <mt-field label="企业名称" placeholder="请输入企业名称" v-model="companyInfo.name"></mt-field>
+            <mt-field label="企业电话" placeholder="请输入企业电话" v-model="companyInfo.phone"></mt-field>
+            <mt-field label="企业地址" placeholder="请输入企业地址" v-model="companyInfo.address"></mt-field>
+            <mt-field label="营业执照" placeholder="请输入营业执照号码" v-model="companyInfo.licenceNo"></mt-field>
+            <pic-uploader key="licence-pic" description="请上传营业执照" class="pic-uploader licence-uploader"></pic-uploader>
+          </div>
+          <button class="next-step" @click="stepNum++">下一步</button>
+        </div>
+        <div class="step-block" v-if="stepNum===2">
+          <div class="input-container clearfix">
+            <mt-field label="法人姓名" placeholder="请输入法人姓名" v-model="authInfo.name"></mt-field>
+            <mt-field label="法人电话" placeholder="请输入法人电话" v-model="authInfo.phone"></mt-field>
+            <mt-field label="身份证号" placeholder="请输入法人身份证号" v-model="authInfo.idcard"></mt-field>
+
+            <pic-uploader key="idcard-t-pic" description="身份证正面" class="pic-uploader idcard-uploader"></pic-uploader>
+            <pic-uploader key="idcard-b-pic" description="身份证反面" class="pic-uploader idcard-uploader"></pic-uploader>
+          </div>
+          <button class="next-step" @click="stepNum++">下一步</button>
+        </div>
+        <div class="step-block" v-if="stepNum===3">
+          <div class="input-container clearfix">
+          <mt-field label="授权人姓名" placeholder="授权人姓名" v-model="authInfo.name"></mt-field>
+          <mt-field label="授权人电话" placeholder="请输入授权人电话" v-model="authInfo.phone"></mt-field>
+          <mt-field label="身份证号" placeholder="请输入授权人身份证号码" v-model="authInfo.idcard"></mt-field>
+
+          <pic-uploader key="auth-t-pic" description="身份证正面" class="pic-uploader auth-uploader"></pic-uploader>
+          <pic-uploader key="auth-b-pic" description="身份证反面" class="pic-uploader auth-uploader"></pic-uploader>
+          <pic-uploader key="auth-s-pic" description="授权书(公章)" class="pic-uploader auth-uploader"></pic-uploader>
+          </div>
+          <button class="next-step"  @click="stepNum++">提交</button>
+        </div>
+      <div class="step-block clearfix" v-if="stepNum===4">
+        <div class="info-container">
+          <div class="user-container">
+            <user-switch-block v-for="item,index in userGroupInfo" :key="index" :user-data="item"></user-switch-block>
+
+          </div>
+          <hr class="divider"/>
+          <p class="description">添加企业认证</p>
+          <button class="add-company" @click="stepNum=1">+</button>
+        </div>
+      </div>
+    </multi-color-background>
+</template>
+
+<script>
+    import MultiColorBackground from "../components/multiColorBackground";
+    import PicUploader from "../components/picUploader";
+    import UserSwitchBlock from "../components/userSwitchBlock";
+    export default {
+        name: "companyAuth",
+      components: {UserSwitchBlock, PicUploader, MultiColorBackground},
+      data(){
+          return{
+            stepNum:1,
+            companyInfo:{
+              name:'',
+              phone:'',
+              address:'',
+              licenceNo:'',
+              licence:null,
+            },
+            authInfo:{
+              name:'',
+              phone:'',
+              idcard:''
+            },
+            authInfo:{
+              name:'',
+              phone:'',
+              idcard:''
+            },
+            userGroupInfo:[
+              {
+                username:'111',
+                isRealName:'已实名'
+              },
+              {
+                username:'111',
+                isRealName:'已实名'
+              },
+              {
+                username:'111',
+                isRealName:'已实名'
+              },
+              {
+                username:'111',
+                isRealName:'已实名'
+              },
+              {
+                username:'111',
+                isRealName:'已实名'
+              },
+              {
+                username:'111',
+                isRealName:'已实名'
+              },
+              {
+                username:'111',
+                isRealName:'已实名'
+              },
+              {
+                username:'111',
+                isRealName:'已实名'
+              },
+              {
+                username:'111',
+                isRealName:'已实名'
+              },
+              {
+                username:'111',
+                isRealName:'已实名'
+              },{
+                username:'111',
+                isRealName:'已实名'
+              }
+
+            ]
+          }
+      }
+    }
+</script>
+
+<style scoped>
+  .title{
+    color:white;
+    font-size: 0.5rem;
+    margin-top: 0.6rem;
+  }
+  .step-bar{
+    margin-top: 0.6rem;
+  }
+  .step{
+    font-size: 0.4rem;
+    color:#c6e5fa;
+    padding-bottom: 10px;
+    margin-right: 1.2rem;
+  }
+  .step:last-child{
+    margin-right: 0;
+  }
+  .step.active{
+    color: white;
+    border-bottom: 1px white solid;
+  }
+  .step-block{
+    margin: 0.4rem 0.4rem 0;
+
+  }
+  .step-block .input-container{
+    background-color: white;
+    border: 1px  white solid;
+    border-radius: 10px;
+  }
+  .step-block .info-container{
+    background-color: white;
+    border-radius: 10px;
+    height: 13.9rem;
+    position: relative;
+  }
+  .user-container{
+    height: 11.1rem;
+    margin: 0;
+    overflow-y: scroll;
+  }
+  .pic-uploader{
+    margin-top: 0.3rem;
+  }
+  .idcard-uploader{
+     float: left;
+     width: 50%!important;
+   }
+  .auth-uploader{
+    float: left;
+    width: 33%!important;
+  }
+  .next-step{
+    width: 100%;
+    height: 1.1rem;
+    border: none;
+    border-radius: 0.6rem;
+    margin-top: 1.4rem;
+    background-color: #60c0ff;
+    font-size: 0.4rem;
+    color: white;
+  }
+  .divider{
+    background-color: #60c0ff;
+    margin: 0 0.4rem;
+    border: 1px solid #60c0ff;
+  }
+  .description{
+    margin-top: 0.9rem;
+    color: #60c0ff;
+    font-size: 0.4rem;
+  }
+  .add-company{
+    width: 1.4rem;
+    height: 1.4rem;
+    border-radius: 0.7rem;
+    background-color: white;
+    color:#60c0ff;
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    border: none;
+    box-shadow: 0px 3px 21px 5px
+    rgba(96, 192, 255, 0.35);
+  }
+
+</style>

src/views/contact.vue

@@ -1,15 +1,109 @@
 <template>
   <div>
-    contact
+    <multi-color-background>
+      <div class="inner-container">
+        <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>
+        <mt-tab-container v-model="selected">
+          <mt-tab-container-item id="1">
+            <contact-block @click="handleClick" v-for="item,key in userData" :key="key" :user-data="item"></contact-block>
+          </mt-tab-container-item>
+          <mt-tab-container-item id="2">
+            <!--<mt-cell v-for="n in 4" :title="'测试 ' + n" />-->
+          </mt-tab-container-item>
+
+        </mt-tab-container>
+      </div>
+
+
+    </multi-color-background>
+    <pop-out-box v-model="showBox">
+      <h1 slot="title">
+        {{showTitle}}
+      </h1>
+      <p slot="action1">上传合同</p>
+      <p slot="action2">模版合同</p>
+    </pop-out-box>
   </div>
+
 </template>
 
 <script>
+  import '../assets/css/contract/rewrite.css'
+  import MultiColorBackground from "../components/multiColorBackground";
+  import ContactBlock from "../components/contactBlock";
+  import PopOutBox from "../components/popOutBox";
     export default {
-        name: "contact"
+        name: "contact",
+      components: {
+        PopOutBox,
+        ContactBlock,
+          MultiColorBackground
+        },
+      data(){
+          return{
+            showBox:false,
+            selected:'1',
+            showTitle:'',
+            userData:[
+              {
+                username:'1',
+                userRealname:'未实名',
+                phone:'12345678',
+                userImg:''
+              },
+              {
+                username:'1',
+                userRealname:'未实名',
+                phone:'12345678',
+                userImg:''
+              },
+              {
+                username:'1',
+                userRealname:'未实名',
+                phone:'12345678',
+                userImg:''
+              }
+            ]
+          }
+      },
+      methods:{
+          handleClick(user){
+            this.showTitle= "与“"+user.username+"”签合同？"
+            this.showBox=true
+
+          }
+      }
     }
 </script>
 
 <style scoped>
+  .inner-container{
+    position: relative;
+    margin: 0 0.4rem;
+  }
+  .title{
+    margin-top: 0.5rem;
+    font-size: 0.5rem;
+    color: #fff;
+  }
+  .add-contact{
+    display: inline-block;
+    position: absolute;
+    background: url("../../static/contact/add_contact.png") 0 0 no-repeat ;
+    background-size: cover;
+    width: 0.7rem;
+    height: 0.7rem;
+    top:0rem;
+    right: 0rem;
+  }
+  .navbar{
+    margin-top: 0.9rem;
+  }
 
 </style>

src/views/contract.vue

@@ -4,24 +4,76 @@
        <i class="icon-search"></i>
        <input placeholder="合同名称或合同编号" class="search-input"/>
      </div>
-      <mt-navbar v-model="selectedType">
-        <mt-tab-item id="1">选项一</mt-tab-item>
+      <mt-navbar class="navbar" v-model="selectedType">
+        <mt-tab-item id="all">全部</mt-tab-item>
         <mt-tab-item id="2">选项二</mt-tab-item>
         <mt-tab-item id="3">选项三</mt-tab-item>
       </mt-navbar>
+      <mt-tab-container class="tab-height" v-model="selectedType">
+        <mt-tab-container-item id="all">
+          <contract-detail class="tab-margin" :key="key" v-for="item,key in contractData" :contract-data="item"></contract-detail>
+        </mt-tab-container-item>
+        <mt-tab-container-item id="2">
+          <contract-detail class="tab-margin" :key="key" v-for="item,key in contractData" :contract-data="item"></contract-detail>
+        </mt-tab-container-item>
+        <mt-tab-container-item id="3">
+          <contract-detail class="tab-margin" :key="key" v-for="item,key in contractData" :contract-data="item"></contract-detail>
+        </mt-tab-container-item>
+      </mt-tab-container>
     </multi-background>
 </template>
 
 <script>
+  import '../assets/css/contract/rewrite.css'
   import multiBackground from '../components/multiColorBackground.vue';
+  import contractDetail from '../components/contractDetail.vue';
     export default {
         name: "contract",
         components:{
-          multiBackground
+          multiBackground,
+          contractDetail
         },
         data(){
           return{
-            selectedType:'1',
+            selectedType:'all',
+            contractData:[
+              [{
+                id:12345,
+                status:'待签署',
+                title:'123456789',
+                date:'1234678'
+              },
+              {
+                id:12345,
+                status:'待签署',
+                title:'123456789',
+                date:'1234678'
+              },
+              {
+                id:12345,
+                status:'待签署',
+                title:'123456789',
+                date:'1234678'
+              }],
+              [{
+                id:12345,
+                status:'待签署',
+                title:'123456789',
+                date:'1234678'
+              },
+                {
+                  id:12345,
+                  status:'待签署',
+                  title:'123456789',
+                  date:'1234678'
+                },
+                {
+                  id:12345,
+                  status:'待签署',
+                  title:'123456789',
+                  date:'1234678'
+                }],
+            ]
           }
         }
     }
@@ -29,11 +81,12 @@
 
 <style scoped>
   .search-container{
-    width: 100%;
+    width: 9.2rem;
+
     height: 1.1rem;
     border-radius: 0.6rem;
     border: 1px solid #fff;
-    margin-top: 0.2rem;
+    margin: 0.2rem 0.4rem 0;
     position: relative;
 
   }
@@ -58,4 +111,14 @@
     color: #fff;
 
   }
+ .navbar{
+   margin: 0.4rem 0.4rem 0;
+ }
+  .tab-margin{
+    margin: 0 0.4rem;
+
+  }
+  .tab-height{
+    height: calc(100vh - 2.9rem - 25px);
+  }
 </style>

src/views/drawSign.vue

@@ -0,0 +1,360 @@
+<template>
+  <multi-color-background>
+    <h1 class="title">手绘签名</h1>
+    <div class="inner draw" >
+      <div class="canvas-container" @mousemove="beginPath($event)">
+        <canvas
+          id="canvas"
+          class="fl"
+          :width="canvasWidth"
+          :height="canvasHeight"
+          @mousedown="canvasDown($event)"
+          @mouseup="canvasUp($event)"
+          @mousemove="canvasMove($event)"
+          @touchstart="canvasDown($event)"
+          @touchend="canvasUp($event)"
+          @touchmove="canvasMove($event)"
+        >
+        </canvas>
+      </div>
+
+        <div class="control">
+          <!--画笔颜色-->
+          <div class="canvas-color clearfix">
+            <ul>
+              <li
+                v-for="item in colors"
+                class="color-shower"
+                :class="{'active':config.lineColor === item}"
+                :style="{ background: item }"
+                @click="setColor(item)"
+              ></li>
+            </ul>
+          </div>
+
+          <!--操作-->
+          <div class="canvas-control clearfix">
+            <button class="go-prev action-button" @click="controlCanvas('prev')"><-</button>
+            <button class="go-next action-button"  @click="controlCanvas('next')">-></button>
+          </div>
+          <!-- 生成图像-->
+
+
+
+        </div>
+      <button class="draw-image" @click="getImage()">预览</button>
+      <!--存放图片-->
+    </div>
+  </multi-color-background>
+</template>
+<script>
+  import MultiColorBackground from "../components/multiColorBackground";
+  export default {
+    components: {MultiColorBackground},
+    data () {
+      return {
+        colors: ['#333333','#1491e2','#df4848'],
+        context: {},
+        imgUrl: [],
+        canvasMoveUse: true,
+        // 存储当前表面状态数组-上一步
+        preDrawAry: [],
+        // 存储当前表面状态数组-下一步
+        nextDrawAry: [],
+        // 中间数组
+        middleAry: [],
+        // 配置参数
+        config: {
+          lineWidth: 1,
+          lineColor: '#333333',
+          shadowBlur: 2
+        },
+        canvasHeight:0,
+        canvasWidth:0
+      }
+    },
+    created () {
+    },
+    mounted () {
+      const canvas = document.querySelector('#canvas')
+      this.canvasHeight=parseFloat(window.getComputedStyle(canvas).getPropertyValue('height'));
+      this.canvasWidth=parseFloat(window.getComputedStyle(canvas).getPropertyValue('width'));
+      this.context = canvas.getContext('2d')
+      this.initDraw()
+      this.setCanvasStyle()
+      // document.querySelector('#footer').classList.add('hide-footer')
+      // document.querySelector('body').classList.add('fix-body')
+    },
+    destroyed () {
+      // document.querySelector('#footer').classList.remove('hide-footer')
+      // document.querySelector('body').classList.remove('fix-body')
+    },
+    computed: {
+      controls () {
+        return [{
+          title: '上一步',
+          action: 'prev',
+          className: this.preDrawAry.length ? 'active fa fa-reply' : 'fa fa-reply'
+        }, {
+          title: '下一步',
+          action: 'next',
+          className: this.nextDrawAry.length ? 'active fa fa-share' : 'fa fa-share'
+        }, {
+          title: '清除',
+          action: 'clear',
+          className: (this.preDrawAry.length || this.nextDrawAry.length) ? 'active fa fa-trash' : 'fa fa-trash'
+        }]
+      }
+    },
+    methods: {
+      isPc () {
+        const userAgentInfo = navigator.userAgent
+        const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
+        let flag = true
+        for (let v = 0; v < Agents.length; v++) {
+          if (userAgentInfo.indexOf(Agents[v]) > 0) {
+            flag = false
+            break
+          }
+        }
+        return flag
+      },
+      removeImg (src) {
+        this.imgUrl = this.imgUrl.filter(item => item !== src)
+      },
+      initDraw () {
+        const preData = this.context.getImageData(0, 0, this.canvasWidth, this.canvasHeight)
+        // 空绘图表面进栈
+        this.middleAry.push(preData)
+      },
+      canvasMove (e) {
+        if (this.canvasMoveUse) {
+          console.log('canvasMove')
+          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
+          }
+          this.context.lineTo(canvasX, canvasY)
+          this.context.stroke()
+        }
+      },
+      beginPath (e) {
+        const canvas = document.querySelector('#canvas')
+        if (e.target !== canvas) {
+          console.log('beginPath')
+          this.context.beginPath()
+        }
+      },
+      // mouseup
+      canvasUp (e) {
+        console.log('canvasUp')
+        const preData = this.context.getImageData(0, 0, 600, 400)
+        if (!this.nextDrawAry.length) {
+          // 当前绘图表面进栈
+          this.middleAry.push(preData)
+        } else {
+          this.middleAry = []
+          this.middleAry = this.middleAry.concat(this.preDrawAry)
+          this.middleAry.push(preData)
+          this.nextDrawAry = []
+        }
+        this.canvasMoveUse = false
+      },
+      // mousedown
+      canvasDown (e) {
+        console.log('canvasDown')
+        this.canvasMoveUse = true
+        // client是基于整个页面的坐标
+        // offset是cavas距离顶部以及左边的距离
+        const canvasX = e.clientX - e.target.parentNode.offsetLeft
+        const canvasY = e.clientY - e.target.parentNode.offsetTop
+        this.setCanvasStyle()
+        // 清除子路径
+        this.context.beginPath()
+        this.context.moveTo(canvasX, canvasY)
+        console.log('moveTo', canvasX, canvasY)
+        // 当前绘图表面状态
+        const preData = this.context.getImageData(0, 0, 600, 400)
+        // 当前绘图表面进栈
+        this.preDrawAry.push(preData)
+      },
+      // 设置颜色
+      setColor (color) {
+        // console.log(111)
+        this.config.lineColor = color
+      },
+      // 操作
+      controlCanvas (action) {
+        switch (action) {
+          case 'prev':
+            if (this.preDrawAry.length) {
+              const popData = this.preDrawAry.pop()
+              const midData = this.middleAry[this.preDrawAry.length + 1]
+              this.nextDrawAry.push(midData)
+              this.context.putImageData(popData, 0, 0)
+            }
+            break
+          case 'next':
+            if (this.nextDrawAry.length) {
+              const popData = this.nextDrawAry.pop()
+              const midData = this.middleAry[this.middleAry.length - this.nextDrawAry.length - 2]
+              this.preDrawAry.push(midData)
+              this.context.putImageData(popData, 0, 0)
+            }
+            break
+          case 'clear':
+            this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height)
+            this.preDrawAry = []
+            this.nextDrawAry = []
+            this.middleAry = [this.middleAry[0]]
+            break
+        }
+      },
+      // 生成图片
+      getImage () {
+        const canvas = document.querySelector('#canvas')
+        const src = canvas.toDataURL('image/png')
+        this.imgUrl.push(src)
+        console.log(src);
+      },
+      // 设置绘画配置
+      setCanvasStyle () {
+        this.context.lineWidth = this.config.lineWidth
+        this.context.shadowBlur = this.config.shadowBlur
+        this.context.shadowColor = this.config.lineColor
+        this.context.strokeStyle = this.config.lineColor
+      }
+    }
+  }
+</script>
+<style >
+  .title{
+  color:white;
+  font-size: 0.5rem;
+  margin-top: 0.6rem;
+  }
+  .control{
+
+    width: 100%;
+    margin-top: 0.6rem;
+
+  }
+  .draw-image{
+    width: 100%;
+    height: 1.1rem;
+    border-radius: 0.6rem;
+    border: none;
+    background-color: #60c0ff;
+    color: #fff;
+    font-size: 0.4rem;
+    margin-top: 0.6rem;
+  }
+  .canvas-container{
+    padding: 1px;
+    width: 100%;
+    height: 11.1rem;
+  }
+
+  .inner{
+      margin: 0.4rem 0.4rem 0;
+      width: 9.2rem;
+
+      }
+  .color-shower{
+    width: 0.4rem;
+    height: 0.4rem;
+    border-radius: 0.2rem;
+    float: left;
+    margin-right: 0.6rem;
+    margin-top: 0.1rem;
+  }
+  .color-shower.active{
+    width: 0.6rem;
+    height: 0.6rem;
+    border-radius: 0.3rem;
+    margin-top: 0;
+  }
+  .canvas-color{
+    margin-top: 0.25rem;
+    float: left;
+    width: 50%;
+  }
+  .canvas-control{
+    float: right;
+    width: 50%;
+    text-align: right;
+  }
+  #canvas{
+      width: 100%;
+    /*width: 100%;*/
+      height: 11.1rem;
+      background-color: white;
+      border-radius: 0.1rem;
+      }
+  .action-button{
+    width: 1.1rem;
+    height: 1.1rem;
+    border: none;
+    border-radius: 100%;
+    background-color: #60c0ff;
+    color: white;
+    font-size: 0.4rem;
+  }
+  .go-prev{
+    margin-right: 0.7rem;
+  }
+</style>
+<!--<template>-->
+
+    <!--<multi-color-background top-height="2.7">-->
+      <!--<h1 class="title">手绘签名</h1>-->
+      <!--<div class="main" >-->
+        <!--<canvas class="draw-area" id="draw-area">-->
+
+        <!--</canvas>-->
+      <!--</div>-->
+    <!--</multi-color-background>-->
+
+<!--</template>-->
+
+<!--<script>-->
+    <!--import Draw from '../components/drawing.js';-->
+
+    <!--import MultiColorBackground from "../components/multiColorBackground";-->
+    <!--export default {-->
+        <!--name: "drawSign",-->
+      <!--components: {MultiColorBackground},-->
+      <!--mounted(){-->
+        <!--let draw = new Draw('draw-area')-->
+      <!--}-->
+    <!--}-->
+<!--</script>-->
+
+<!--<style scoped>-->
+  <!--.title{-->
+    <!--color:white;-->
+    <!--font-size: 0.5rem;-->
+    <!--margin-top: 0.6rem;-->
+  <!--}-->
+  <!--.main .input-container{-->
+    <!--background-color: white;-->
+    <!--border: 1px  white solid;-->
+    <!--border-radius: 10px;-->
+  <!--}-->
+  <!--.main{-->
+    <!--margin: 0.4rem 0.4rem 0;-->
+
+  <!--}-->
+  <!--.draw-area{-->
+    <!--width: 100%;-->
+    <!--height: 11.1rem;-->
+    <!--background-color: white;-->
+    <!--border-radius: 0.1rem;-->
+  <!--}-->
+<!--</style>-->

src/views/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="main-bg">
     <h1 class="title">区块链合同</h1>
-    <div class="button-inner">
+    <div class="button-inner clearfix">
       <block-button button-id="upload_contract" button-name="上传合同" @click="handleClick" :button-img-src="require('../../static/index/upload_contract.png')"></block-button>
       <block-button button-id="template_create" button-name="模版创建" @click="handleClick" :button-img-src="require('../../static/index/template_create.png')"></block-button>
       <block-button button-id="temp" button-name="草稿箱" @click="handleClick" :button-img-src="require('../../static/index/temp.png')"></block-button>
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-  import BlockButton from '../components/blcokButton.vue';
+  import BlockButton from '../components/blockButton.vue';
     export default {
         name: "index",
       components:{

src/views/my.vue

@@ -1,15 +1,185 @@
 <template>
-  <div>
-    my
+  <div class="main">
+      <div class="user-info">
+            <img class="profile" :src="require('../../static/contact/myavt.png')">
+        <div class="user-info-container">
+          <div class="user-info-inner-container">
+            <p class="username">{{user.username}}</p>
+            <p class="phone">{{user.phone}}</p>
+            <p class="user-realname">{{user.userRealname}}</p>
+            <p class="switch" @click="showSwitcher">切换身份<i class="icon-switch"></i></p>
+          </div>
+
+        </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>
+    <mt-popup
+      v-model="userSwitcherVisible"
+      class="switch-popup"
+      popup-transition="popup-fade">
+      <div class="popup-container">
+        <i @click="userSwitcherVisible=false" class="icon-close"></i>
+        <div class="hoz-line"></div>
+        <div class="switch-block-container">
+          <user-switch-block :key="index" v-for="item,index in userSwitch" :user-data="item"></user-switch-block>
+        </div>
+        <button class="logout">退出登录</button>
+      </div>
+    </mt-popup>
   </div>
 </template>
 
 <script>
+    import '../assets/css/my/rewrite.css';
+    import BlockButton from "../components/blockButton";
+    import UserSwitchBlock from "../components/userSwitchBlock";
+
     export default {
-        name: "my"
+        name: "my",
+      components: {UserSwitchBlock, BlockButton},
+      data(){
+          return{
+            userSwitcherVisible:false,
+            user:{
+              username:'1',
+              phone:'1234567',
+              userImg:'',
+              userRealname:'未实名'
+            },
+            userSwitch:[{
+              username:'123',
+              isRealName:'已实名'
+            },{
+              username:'123',
+              isRealName:'已实名'
+            },{
+              username:'123',
+              isRealName:'已实名'
+            },{
+              username:'123',
+              isRealName:'已实名'
+            }
+            ]
+          }
+      },
+      methods:{
+          handleClick(id){
+            this.$router.push('/'+id);
+          },
+          showSwitcher(){
+            this.userSwitcherVisible=true;
+          }
+      }
     }
 </script>
 
 <style scoped>
+  @import '../assets/css/my/rewrite.css';
+  .main{
+    background-color: #60c0ff;
+    height: 100vh;
+    padding: 1px 0.4rem;
+  }
+  .user-info{
+    /*margin-top: 1rem;*/
+  }
+  .profile{
+    position: absolute;
+    display: inline-block;
+    width: 1.9rem;
+    height: 1.9rem;
+    border-radius: 1.9rem;
+    border: 2px white solid;
+    top:1rem;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .user-info-container{
+    width: 100%;
+    height: 4.7rem;
+    margin-top: 2rem;
+    background-color: white;
+    display: inline-block;
+    border-radius: 0.1rem;
+  }
+  .user-info-inner-container{
+    margin-top: 1rem;
+  }
+  .username{
+    font-size: 0.5rem;
+
+  }
+  .phone{
+    font-size: 0.3rem;
+    color:#808080;
+    /*margin-top: 0.2rem;*/
+  }
+  .user-realname{
+    display: inline-block;
+    height: 0.7rem;
+    background-color: #60c0ff;
+    border-radius: 0.3rem;
+    line-height: 0.7rem;
+    font-size: 0.4rem;
+    padding: 0 0.4rem;
+    margin-top: 0.2rem;
 
+  }
+  .switch{
+    font-size: 0.4rem;
+    line-height: 0.4rem;
+    margin-top: 0.6rem;
+    color: #60c0ff;
+  }
+  .icon-switch{
+    display: inline-block;
+    background: url("../../static/my/switch.png");
+    width: 0.4rem;
+    height: 0.4rem;
+  }
+  .switch-block-container{
+    background-color: white;
+    border-radius: 10px;
+    padding-bottom: 1.1rem;
+  }
+  .switch-popup{
+    background-color: transparent;
+  }
+  .logout{
+    width: 5.6rem;
+    height: 1.1rem;
+    position: absolute;
+    left: 50%;
+    top: 100%;
+    transform: translate(-50%,-50%);
+    background-color: #ffffff;
+    box-shadow: 0rem 0rem 0.3rem 0.1rem
+    rgba(96, 192, 255, 0.35);
+    border-radius: 0.6rem;
+    border: none;
+    font-size: 0.4rem;
+    color: #1491e2;
+  }
+  .popup-container{
+    position: relative;
+    width: 9.2rem;
+    background-color: transparent;
+    /*border-radius: 10px;*/
+  }
+  .icon-close{
+    width: 0.8rem;
+    height: 0.8rem;
+    display: block;
+    background-color: white;
+    margin: 0 auto;
+  }
+  .hoz-line{
+    height: 2rem;
+    width: 2px;
+    background-color: white;
+    margin: 0 auto;
+  }
 </style>

src/views/sign.vue

@@ -0,0 +1,61 @@
+<template>
+    <multi-color-background>
+      <div class="main">
+        <h1 class="title">我的签名</h1>
+        <mt-navbar class="navbar" v-model="selected">
+          <mt-tab-item id="1">有效签名</mt-tab-item>
+          <mt-tab-item id="2">审核中</mt-tab-item>
+          <mt-tab-item id="3">已驳回</mt-tab-item>
+
+        </mt-navbar>
+        <button class="add-sign">
+          <i class="icon-add">+</i>创建签名
+        </button>
+        <mt-tab-container v-model="selected">
+          <mt-tab-container-item id="1">
+            <sign-block></sign-block>
+          </mt-tab-container-item>
+          <mt-tab-container-item id="2">
+            <!--<mt-cell v-for="n in 4" :title="'测试 ' + n" />-->
+          </mt-tab-container-item>
+
+        </mt-tab-container>
+      </div>
+
+    </multi-color-background>
+</template>
+
+<script>
+    import MultiColorBackground from "../components/multiColorBackground";
+    import SignBlock from "../components/signBlock";
+    export default {
+        name: "sign",
+      components: {SignBlock, MultiColorBackground},
+      data(){
+          return{
+            selected:'1'
+          }
+    }
+    }
+</script>
+
+<style scoped>
+  .navbar{
+    margin-top: 0.9rem;
+  }
+  .main{
+    width: 9.2rem;
+    margin: 0 0.4rem;
+  }
+  .add-sign{
+    width: 100%;
+    height: 1.4rem;
+    background-color: white;
+    margin-top: 0.4rem;
+    border-radius: 0.1rem;
+    border: none;
+    font-size: 0.4rem;
+    color:  #60c0ff;
+  }
+
+</style>