mock

mock/db.json

@@ -0,0 +1,9 @@
+{
+  "posts": [
+    { "id": 1, "title": "json-server", "author": "louisian" }
+  ],
+  "comments": [
+    { "id": 1, "body": "some comment", "postId": 1 }
+  ],
+  "profile": { "name": "louisian" }
+}

mock/faker-data.js

@@ -0,0 +1,60 @@
+module.exports = function () {
+  var faker = require("faker");
+  faker.locale = "zh_CN";
+  var _ = require("lodash");
+  return {
+    "index-count":{
+      code:200,
+      data:{
+        wait_edit:(faker.random.number()%100)+1,
+        wait_sign:(faker.random.number()%100)+1,
+        already_active:(faker.random.number()%100)+1,
+        already_sign:(faker.random.number()%100)+1,
+        temp:(faker.random.number()%100)+1,
+        out_date:(faker.random.number()%100)+1
+      }
+    },
+    contract:{
+      code:200,
+      data:_.times(20,function (n) {
+        return _.times(5,function (j) {
+          return {
+            id:n*10+j,
+            status:(j%2===0?'待签署':'已签署'),
+            title:faker.commerce.productName(),
+            date:faker.date.recent(),
+          }
+        })
+      })
+    },
+    contact:{
+      code:200,
+      data:_.times(20,function (n) {
+        return{
+          username:faker.name.firstName()+faker.name.lastName(),
+          userRealname:'已实名',
+          phone:faker.phone.phoneNumber('1##########'),
+          userImg:faker.image.avatar()
+        }
+      })
+    },
+    'current-user':{
+      code:200,
+      data:{
+        username:faker.name.firstName()+faker.name.lastName(),
+        userRealname:'已实名',
+        phone:faker.phone.phoneNumber('1##########'),
+        userImg:faker.image.avatar()
+      }
+    },
+    'switch-user':{
+      code:200,
+      data:_.times(5,function (n) {
+        return{
+          username:((faker.random.number()%100>50)?faker.name.firstName()+faker.name.lastName():faker.company.companyName()),
+          isRealname:'已实名',
+        }
+      })
+    }
+  }
+}

mock/route.json

@@ -0,0 +1,3 @@
+{
+  "/":"/"
+}

package.json

@@ -11,9 +11,14 @@
     "e2e": "node test/e2e/runner.js",
     "test": "npm run unit && npm run e2e",
     "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
-    "build": "node build/build.js"
+    "build": "node build/build.js",
+    "mockfaker": "json-server mock/faker-data.js --routes mock/route.json -d 150"
   },
   "dependencies": {
+    "axios": "^0.18.0",
+    "faker": "^4.1.0",
+    "json-server": "^0.12.1",
+    "mockjs": "^1.0.1-beta3",
     "postcss": "^5.2.18",
     "postcss-import": "^11.1.0",
     "vue": "^2.5.2",

src/App.vue

@@ -81,7 +81,7 @@ export default {
 
     },
     '$route' (to, from) {
-      // console.log(this.$router.path)
+      // console.log(this.$route.json.path)
       // console.log(to)
       let showTab=['/index','/contract','/contact','/my'];
       if(!~showTab.indexOf(to.path)){

src/assets/connectAdress/adress.js

@@ -0,0 +1,13 @@
+let pre='http://localhost:3000';
+let address={
+  indexCount:'/index-count',
+  contractData:'/contract',
+  contactData:'/contact',
+  currentUserData:'/current-user',
+  switchUserData:'/switch-user',
+};
+
+for(let i in address){
+  address[i]=pre+address[i];
+}
+module.exports=address;

src/assets/css/contract/rewrite.css

@@ -1,4 +1,5 @@
 .mint-navbar .mint-tab-item {
+  /*box-sizing: border-box!important;*/
    padding: 0 0 0.1rem;
   color: #c6e5fa;
 

src/assets/css/general.css

@@ -4,3 +4,14 @@
   margin-top: 0.5rem;
   color: #fff;
 }
+.fixed{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 5;
+  padding-bottom: 5px;
+}
+.multi-blue{
+  background-color: #60c0ff;
+}

src/components/contactBlock.vue

@@ -34,6 +34,7 @@
     width: 1.2rem;
     height: 1.2rem;
     margin:0.25rem 0.3rem;
+    border-radius: 100%;
 
   }
   .user-name{

src/components/contractDetailBlock.vue

@@ -8,7 +8,7 @@
           {{contractData.status}}
         </p>
       </div>
-      <p class="title" :class="{'gray':isOutDate}">
+      <p class="contract-title" :class="{'gray':isOutDate}">
         {{contractData.title}}
       </p>
       <p class="date">
@@ -45,7 +45,7 @@
     font-size: 0.4rem;
     float: right;
   }
-  p.title{
+  p.contract-title{
     text-align: left;
     font-size: 0.4rem;
     margin-top: 0.2rem;

src/components/infoBlock.vue

@@ -0,0 +1,57 @@
+<template>
+    <div class="info-container" @click="handleClick">
+      <div class="info-container-inner">
+        <p class="info-title">{{infoData.title}}</p>
+        <p class="info-content">{{infoData.content}}</p>
+        <i class="right-arrow icon">></i>
+      </div>
+
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "infoBlock",
+        props:['infoData'],
+      methods:{
+          handleClick(){
+            this.$emit('click-info',this.infoData.id);
+          }
+      }
+    }
+</script>
+
+<style scoped>
+  .info-container{
+    width: 100%;
+    height: 1.4rem;
+    background-color: white;
+    border-radius: 0.1rem;
+    display: flex;
+    margin-bottom: 0.3rem;
+  }
+  .info-container-inner{
+    width: 100%;
+    margin: 0 0.3rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .info-title,.info-content{
+    flex-grow: 1;
+  }
+  .info-title{
+    font-size: 0.4rem;
+    color: #1491e2;
+    text-align: left;
+
+  }
+  .info-content{
+    font-size: 0.3rem;
+    color: #808080;
+    text-align: right;
+  }
+  .icon{
+    margin-left: 0.3rem;
+  }
+</style>

src/components/multiColorBackground.vue

@@ -35,6 +35,8 @@
     /*left: 0.4rem;*/
     top:0;
     height: calc(100vh - 55px);
+    overflow-y: scroll;
     z-index: 4;
+
   }
 </style>

src/components/radio.vue

@@ -1,31 +1,57 @@
 <template>
-    <span class="radio-container"><i :class="{'active':checked}" class="icon-checked">*</i><slot></slot></span>
+    <p class="radio-container" @click="setValue">
+      <i :class="{'active':checked}" class="icon-checked"></i>
+      <span class="radio-text" :class="{'active':checked}">
+        <slot></slot>
+      </span>
+    </p>
 </template>
 
 <script>
     export default {
         name: "radio",
-      props:['checked']
+      props:['checked'],
+      methods:{
+          setValue(){
+            if(this.checked){
+              return;
+            }
+            this.$emit('clickRadio')
+          }
+      }
     }
 </script>
 
 <style scoped>
     .radio-container{
+     display: inline-flex;
+      align-items: center;
+      /*display: inline-block;*/
+      height: 100%;
+
+      width: 100%;
+      /*vertical-align: middle;*/
+    }
+    .radio-text{
       font-size: 0.4rem;
-      line-height: 0.4rem;
+      margin-left: 0.2rem;
+      /*line-height: 0.5rem;*/
+
+
     }
     .icon-checked{
-      display: inline-block;
-      box-sizing: content-box;
-      width: 0.4rem;
+      box-sizing: border-box;
+      flex-basis: 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: 1px solid #60c0ff;
+      background-color: #60c0ff;
       /*border-radius: 100%;*/
     }
+    .radio-text.active{
+      color: #60c0ff;
+    }
 </style>

src/components/signBlock.vue

@@ -3,7 +3,7 @@
       <img class="sign-pic"/>
       <div class="control clearfix">
         <span class="set-default-container">
-          <radio @click="setDefault()" :checked="value==signData.id"  class="set-default">设为默认</radio>
+          <radio @clickRadio="setDefault()" :checked="isDefault"  class="set-default">{{isDefault?'默认签名':'设为默认'}}</radio>
         </span>
         <button class="delete" @click="deleteSign()">删除</button>
       </div>
@@ -15,19 +15,21 @@
   import radio from '../components/radio.vue';
     export default {
         name: "signBlock",
-      props:['value'],
+      props:['value','signData'],
       components:{
           radio
       },
       data(){
           return{
-            signData:{
-              id:'',
-              src:'',
-            }
+
           }
 
       },
+      computed:{
+        isDefault:function(){
+            return this.value==this.signData.id
+        }
+      },
       methods:{
           setDefault(){
             this.$emit('setDefault',this.signData.id);
@@ -57,6 +59,7 @@
   .set-default-container{
     float: left;
     height: 1rem;
+    width: 50%;
     line-height: 1rem;
     margin-left: 0.4rem;
   }
@@ -67,5 +70,8 @@
     height: 1rem;
     margin-right: 0.3rem;
   }
+  .control{
+    margin-top: 0;
+  }
 
 </style>

src/main.js

@@ -7,10 +7,14 @@ import App from './App.vue'
 import router from './router'
 import './assets/css/base.css'
 import './assets/css/general.css'
+import Adress from './assets/connectAdress/adress.js';
 // import  '//at.alicdn.com/t/font_587947_4e7wxdmocu3anhfr.css'
-
+Vue.prototype.ADRESS=Adress;
+Vue.prototype.$http=axios;
+import axios from 'axios'
 Vue.config.productionTip = false
 Vue.use(MintUI);
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/router/index.js

@@ -8,7 +8,9 @@ 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'
+import sign from '../views/sign.vue';
+import person from '../views/person.vue';
+import setting from '../views/setting.vue';
 Vue.use(Router)
 
 export default new Router({
@@ -40,6 +42,13 @@ export default new Router({
     },{
       path:'/sign',
       component:sign
+    },
+    {
+      path:'/person',
+      component:person
+    },{
+      path:'/setting',
+      component:setting
     }
 
   ]

src/views/contact.vue

@@ -2,14 +2,17 @@
   <div>
     <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>
+        <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>
-        <mt-tab-container v-model="selected">
+          </mt-navbar>
+        </div>
+
+        <mt-tab-container class="contact-list" 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>
@@ -50,28 +53,14 @@
             showBox:false,
             selected:'1',
             showTitle:'',
-            userData:[
-              {
-                username:'1',
-                userRealname:'未实名',
-                phone:'12345678',
-                userImg:''
-              },
-              {
-                username:'1',
-                userRealname:'未实名',
-                phone:'12345678',
-                userImg:''
-              },
-              {
-                username:'1',
-                userRealname:'未实名',
-                phone:'12345678',
-                userImg:''
-              }
-            ]
+            userData:[]
           }
       },
+      mounted(){
+        this.$http.get(this.ADRESS.contactData).then((response)=>{
+          this.userData=response.data.data;
+        })
+      },
       methods:{
           handleClick(user){
             this.showTitle= "与“"+user.username+"”签合同？"
@@ -99,11 +88,14 @@
     background-size: cover;
     width: 0.7rem;
     height: 0.7rem;
-    top:0rem;
-    right: 0rem;
+    top:0.4rem;
+    right: 0.4rem;
   }
   .navbar{
-    margin-top: 0.9rem;
-  }
+    margin: 0.6rem 0.4rem 0;
 
+  }
+  .contact-list{
+    margin-top: 2.2rem;
+  }
 </style>

src/views/contract.vue

@@ -1,16 +1,19 @@
 <template>
     <multi-background>
-     <div class="search-container">
-       <i class="icon-search"></i>
-       <input placeholder="合同名称或合同编号" class="search-input"/>
-     </div>
-      <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">
+      <div class="fixed multi-blue">
+        <div class="search-container ">
+          <i class="icon-search"></i>
+          <input placeholder="合同名称或合同编号" class="search-input"/>
+        </div>
+        <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>
+      </div>
+
+      <mt-tab-container class="contract-list" 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">
@@ -36,45 +39,13 @@
         data(){
           return{
             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'
-                }],
-            ]
+            contractData:[]
           }
+        },
+        mounted(){
+          this.$http.get(this.ADRESS.contractData).then((response)=>{
+            this.contractData=response.data.data;
+          })
         }
     }
 </script>
@@ -118,7 +89,7 @@
     margin: 0 0.4rem;
 
   }
-  .tab-height{
-    height: calc(100vh - 2.9rem - 25px);
+  .contract-list{
+   margin-top: 2.2rem;
   }
 </style>

src/views/index.vue

@@ -4,12 +4,12 @@
     <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>
-      <block-button button-id="wait_edit" button-name="待修改" @click="handleClick" :button-img-src="require('../../static/index/wait_edit.png')"></block-button>
-      <block-button button-id="wait_sign" button-name="待签署" @click="handleClick" :button-img-src="require('../../static/index/wait_sign.png')"></block-button>
-      <block-button button-id="already_sign" button-name="已签署" @click="handleClick" :button-img-src="require('../../static/index/already_sign.png')"></block-button>
-      <block-button button-id="already_active" button-name="已生效" @click="handleClick" :button-img-src="require('../../static/index/already_active.png')"></block-button>
-      <block-button button-id="out_date" button-name="已失效" @click="handleClick" :button-img-src="require('../../static/index/out_date.png')"></block-button>
+      <block-button button-id="temp" :button-name="'草稿箱('+count.temp+')'" @click="handleClick" :button-img-src="require('../../static/index/temp.png')"></block-button>
+      <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>
 
     </div>
   </div>
@@ -24,9 +24,23 @@
       },
       data(){
           return{
-
+            count:{
+              temp:0,
+              wait_edit:0,
+              wait_sign:0,
+              already_sign:0,
+              already_active:0,
+              out_date:0
+            }
           }
       },
+      mounted(){
+        // console.log(this.ADRESS.indexCount)
+        this.$http.get(this.ADRESS.indexCount).then((response)=>{
+          console.log(response.data)
+          this.count=response.data.data
+        })
+      },
       methods:{
           handleClick(id){
               console.log(id);

src/views/my.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="main">
       <div class="user-info">
-            <img class="profile" :src="require('../../static/contact/myavt.png')">
+            <img class="profile" :src="user.userImg||require('../../static/contact/myavt.png')">
         <div class="user-info-container">
           <div class="user-info-inner-container">
             <p class="username">{{user.username}}</p>
@@ -49,22 +49,17 @@
               userImg:'',
               userRealname:'未实名'
             },
-            userSwitch:[{
-              username:'123',
-              isRealName:'已实名'
-            },{
-              username:'123',
-              isRealName:'已实名'
-            },{
-              username:'123',
-              isRealName:'已实名'
-            },{
-              username:'123',
-              isRealName:'已实名'
-            }
-            ]
+            userSwitch:[]
           }
       },
+      mounted(){
+        this.$http(this.ADRESS.currentUserData).then((response)=>{
+          this.user=response.data.data;
+        }) ;
+        this.$http(this.ADRESS.switchUserData).then((response)=>{
+          this.userSwitch=response.data.data;
+        })
+      },
       methods:{
           handleClick(id){
             this.$router.push('/'+id);

src/views/person.vue

@@ -0,0 +1,79 @@
+<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="personInfo.name"></mt-field>
+          <mt-field label="身份证号" placeholder="请输入身份证号码" v-model="personInfo.idcard"></mt-field>
+          <mt-field label="银行卡号" placeholder="请输入银行卡号码" v-model="personInfo.bankCard"></mt-field>
+          <mt-field label="预留手机" placeholder="请输入银行预留手机号码" v-model="personInfo.phone"></mt-field>
+          <mt-field class="vcode-input" label="验证码" placeholder="请输入验证码" v-model="personInfo.verifyCode"></mt-field>
+          <button class="get-vcode">获取验证码</button>
+        </div>
+        <button class="submit" @click="fakeSubmit">提交</button>
+      </div>
+    </multi-color-background>
+</template>
+
+<script>
+    import MultiColorBackground from "../components/multiColorBackground";
+    export default {
+        name: "person",
+      components: {MultiColorBackground},
+      data(){
+          return{
+            personInfo:{
+              name:'',
+              idcard:'',
+              bankCard:'',
+              phone:'',
+              verifyCode:''
+            }
+          }
+      },
+      methods: {
+        fakeSubmit() {
+          console.log(this.contactInfo)
+        }
+      }
+
+    }
+</script>
+
+<style scoped>
+  .main .input-container{
+    background-color: white;
+    border: 1px  white solid;
+    position: relative;
+    border-radius: 10px;
+    text-align: left;
+  }
+  .main{
+    margin: 0.4rem 0.4rem 0;
+
+  }
+  .vcode-input{
+    width: 68%;
+  }
+  .get-vcode{
+    position: absolute;
+    bottom:0.3rem;
+    right:0.3rem;
+    width: 2.8rem;
+    border: 1px solid #60c0ff;
+    color:#60c0ff;
+    border-radius: 0.5rem;
+    height: 0.9rem;
+    background-color: white;
+  }
+  .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/setting.vue

@@ -0,0 +1,44 @@
+<template>
+    <multi-color-background top-height="2.7">
+      <h1 class="title">安全设置</h1>
+      <div class="main">
+        <info-block v-for="item,index in infoData" :info-data="item" :key="index"></info-block>
+      </div>
+
+    </multi-color-background>
+</template>
+
+<script>
+    import MultiColorBackground from "../components/multiColorBackground";
+    import InfoBlock from "../components/infoBlock";
+    export default {
+        name: "setting",
+      components: {InfoBlock, MultiColorBackground},
+      data(){
+          return{
+            infoData:[
+              {
+                id:1,
+                title:'124',
+                content:'34567',
+              },{
+                id:2,
+                title:'124',
+                content:'34567',
+              },{
+                id:3,
+                title:'124',
+                content:'',
+              }
+            ]
+          }
+      }
+    }
+</script>
+
+<style scoped>
+  .main{
+    margin: 0.4rem 0.4rem 0;
+
+  }
+</style>

src/views/sign.vue

@@ -8,12 +8,12 @@
           <mt-tab-item id="3">已驳回</mt-tab-item>
 
         </mt-navbar>
-        <button class="add-sign">
+        <button class="add-sign" @click="popupVisible=true">
           <i class="icon-add">+</i>创建签名
         </button>
         <mt-tab-container v-model="selected">
           <mt-tab-container-item id="1">
-            <sign-block></sign-block>
+            <sign-block @setDefault="setDefault" v-for="item,index in signData" :key="index" v-model="defaultSign" :sign-data="item"></sign-block>
           </mt-tab-container-item>
           <mt-tab-container-item id="2">
             <!--<mt-cell v-for="n in 4" :title="'测试 ' + n" />-->
@@ -21,8 +21,18 @@
 
         </mt-tab-container>
       </div>
+      <mt-popup
+        v-model="popupVisible">
+        <div class="sign-button-container">
+          <button class="sign-button">拍照签名</button>
+          <button class="sign-button" @click="$router.push('/draw-sign')">手绘签名</button>
+          <button class="sign-button">模板签名</button>
+          <button class="cancel-button" @click="popupVisible=false">取消</button>
+        </div>
 
+      </mt-popup>
     </multi-color-background>
+
 </template>
 
 <script>
@@ -33,9 +43,26 @@
       components: {SignBlock, MultiColorBackground},
       data(){
           return{
-            selected:'1'
+            selected:'1',
+            defaultSign:'1',
+            popupVisible:false,
+            signData:[
+              {
+                id:'1',
+                src:''
+              },
+              {
+                id:'2',
+                src:''
+              }
+            ]
           }
-    }
+    },
+      methods:{
+          setDefault(){
+            console.log('hellp')
+          }
+      }
     }
 </script>
 
@@ -57,5 +84,27 @@
     font-size: 0.4rem;
     color:  #60c0ff;
   }
-
+  .sign-button-container{
+    width: 7.2rem;
+    margin: 0.7rem 0.4rem;
+  }
+  .sign-button{
+    width: 100%;
+    height: 1.1rem;
+    margin-bottom: 0.4rem;
+    background-color: #60c0ff;
+    border-radius: 0.6rem;
+    border: none;
+    color: white;
+    font-size: 0.4rem;
+  }
+  .cancel-button{
+    width: 100%;
+    height: 1.1rem;
+    border-radius: 0.6rem;
+    border: solid 1px #60c0ff;
+    background-color: white;
+    color: #60c0ff;
+    font-size: 0.4rem;
+  }
 </style>

test/unit/jest.conf.js

@@ -24,7 +24,7 @@ module.exports = {
   collectCoverageFrom: [
     'src/**/*.{js,vue}',
     '!src/main.js',
-    '!src/router/index.js',
+    '!src/route.json/index.js',
     '!**/node_modules/**'
   ]
 }