首页+合同页

package.json

@@ -14,6 +14,8 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "postcss": "^5.2.18",
+    "postcss-import": "^11.1.0",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1"
   },

src/App.vue

@@ -2,12 +2,75 @@
   <div id="app">
     <!-- <img src="./assets/logo.png"> -->
     <router-view/>
+    <mt-tabbar v-model="selectedTab">
+      <mt-tab-item id="index">
+        <img slot="icon" :src="icon_now.index">
+        首页
+      </mt-tab-item>
+      <mt-tab-item id="contract">
+        <img slot="icon" :src="icon_now.contract">
+        合同
+      </mt-tab-item>
+      <mt-tab-item id="contact">
+        <img slot="icon" :src="icon_now.contact">
+        联系人
+      </mt-tab-item>
+      <mt-tab-item id="my">
+        <img slot="icon" :src="icon_now.my">
+        我的
+      </mt-tab-item>
+    </mt-tabbar>
   </div>
 </template>
 
 <script>
+
+  import icon_index from '../static/tabbar/index.png';
+  import icon_contract from '../static/tabbar/contract.png';
+  import icon_contact from '../static/tabbar/contact.png';
+  import icon_my from '../static/tabbar/my.png';
+  import icon_index_active from '../static/tabbar/index_active.png';
+  import icon_contract_active from '../static/tabbar/contract_active.png';
+  import icon_contact_active from '../static/tabbar/contact_active.png';
+  import icon_my_active from '../static/tabbar/my_active.png';
 export default {
-  name: 'App'
+  name: 'App',
+  data(){
+    return{
+      selectedTab:'index',
+      icon_now:{
+        index:icon_index_active,
+        contract:icon_contract,
+        contact:icon_contact,
+        my:icon_my
+      },
+      icon:{
+        index:icon_index,
+        contract:icon_contract,
+        contact:icon_contact,
+        my:icon_my
+      },
+      icon_active:{
+        index:icon_index_active,
+        contract:icon_contract_active,
+        contact:icon_contact_active,
+        my:icon_my_active
+      }
+
+
+    }
+  },
+  watch:{
+    'selectedTab':function(val){
+      this.$router.push('/'+val);
+
+      for(let i in this.icon_now){
+        this.icon_now[i]=this.icon[i];
+      }
+      this.icon_now[val]=this.icon_active[val];
+
+    }
+  }
 }
 </script>
 

src/components/HelloWorld.vue

@@ -1,113 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li>
-        <a
-          href="https://vuejs.org"
-          target="_blank"
-        >
-          Core Docs
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://forum.vuejs.org"
-          target="_blank"
-        >
-          Forum
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://chat.vuejs.org"
-          target="_blank"
-        >
-          Community Chat
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://twitter.com/vuejs"
-          target="_blank"
-        >
-          Twitter
-        </a>
-      </li>
-      <br>
-      <li>
-        <a
-          href="http://vuejs-templates.github.io/webpack/"
-          target="_blank"
-        >
-          Docs for This Template
-        </a>
-      </li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li>
-        <a
-          href="http://router.vuejs.org/"
-          target="_blank"
-        >
-          vue-router
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vuex.vuejs.org/"
-          target="_blank"
-        >
-          vuex
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vue-loader.vuejs.org/"
-          target="_blank"
-        >
-          vue-loader
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-        >
-          awesome-vue
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/blcokButton.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="button-container" @click="buttonClick">
+      <img class="button-img" :src="buttonImgSrc">
+      <p class="button-name">{{buttonName}}</p>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "blcokButton",
+        data(){
+            return{
+              id:this.buttonId,
+            }
+        },
+        props:["buttonName",'buttonId',"buttonImgSrc"],
+        methods:{
+          buttonClick:function () {
+            this.$emit('click',this.id);
+          }
+        },
+    }
+</script>
+
+<style scoped>
+  .button-container{
+    width: 4.6rem;
+    height: 3.5rem;
+    display: inline-block;
+
+    /*border: 1px solid black;*/
+  }
+  .button-img{
+    width: 1.7rem;
+    height: 2.2rem;
+    padding-top: 0.6rem;
+    /*padding: 0.6rem auto 0;*/
+    /*margin: 0 auto;*/
+  }
+  .button-name{
+    text-align: center;
+    margin: 0.2rem auto 0;
+    font-size: 0.4rem;
+    color: #666666;
+  }
+
+</style>

src/components/multiColorBackground.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="main-bg">
+    <div class="bg-top">
+
+    </div>
+    <div class="content">
+      <slot></slot>
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+    export default {
+        name: "multiColorBackground"
+    }
+</script>
+
+<style scoped>
+    .bg-top{
+      width: 100%;
+      height: 2.7rem;
+      background-color: #60c0ff;
+    }
+   .main-bg{
+     position: relative;
+     height: 100vh;
+     background-color: #e8eff5;
+   }
+  .content{
+    position: absolute;
+    width: 9.2rem;
+    left: 0.4rem;
+    top:0;
+    height: 100vh;
+    z-index: 4;
+  }
+</style>

src/components/tabbar.vue

@@ -0,0 +1,39 @@
+<template>
+
+    <mt-tabbar v-model="selectedTab">
+      <mt-tab-item id="外卖">
+        <img slot="icon" src="">
+        外卖
+      </mt-tab-item>
+      <mt-tab-item id="订单">
+        <img slot="icon" src="">
+        订单
+      </mt-tab-item>
+      <mt-tab-item id="发现">
+        <img slot="icon" src="">
+        发现
+      </mt-tab-item>
+      <mt-tab-item id="我的">
+        <img slot="icon" src="">
+        我的
+      </mt-tab-item>
+    </mt-tabbar>
+
+</template>
+<script>
+
+  export default{
+    name:'tabbar',
+    data(){
+      return{
+        selectedTab:'',
+      }
+    },
+    components:{
+
+    },
+    methods:{
+
+    }
+  }
+</script>

src/components/title.vue

@@ -1,68 +0,0 @@
-<template>
-	<div class="title">
-		<div class="title-main">
-			<div class="title-contant">
-				<i class="iconfont icon-logo"></i>
-				<span>YUANCHAIN</span>
-			</div>
-			<ul class="title-ul">
-				<li v-for="item in lillist">{{item}}</li>
-			</ul>
-		</div>
-	</div>
-</template>
-<script>
-	export default{
-		data(){
-			return{
-				lillist:['首页','白皮书','技术特色','应用场景','顾问介绍','云矿机']
-			}
-		},
-		mounted(){
-
-		},
-		methods:{
-
-		}
-	}
-</script>
-<style>
-	.title{
-		.title-main{
-			float: left;
-			overflow: hidden;
-			height: 59px;
-			width: 100%;
-			.title-contant{
-				margin-top: 13px ;
-               width: 8.3%;
-               height: 32px;
-               line-height: 32px;
-               color: #000;
-               float: left;
-               margin-left: 34px;
-               font-weight: bold;
-               .icon-logo{
-                     border: 2px solid #000;
-                     border-radius: 50%;
-               }
-			}
-			.title-ul{
-				float: left;
-				width: 26.47%;
-				line-height: 59px;
-				font-size: 14px;
-				margin-left: 141.75px;
-				li{ 
-					width: 20%;
-					float: left;
-				}
-			}
-			.title-ul:hover{
-				li{
-
-				}
-			}
-		}
-	}
-</style>

src/main.js

@@ -1,13 +1,15 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
-import App from './App'
+import MintUI from 'mint-ui'
+import 'mint-ui/lib/style.css'
+import App from './App.vue'
 import router from './router'
 import './assets/css/base.css'
 // import  '//at.alicdn.com/t/font_587947_4e7wxdmocu3anhfr.css'
 
 Vue.config.productionTip = false
-
+Vue.use(MintUI);
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/router/index.js

@@ -1,6 +1,10 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Main   from '../views/main.vue'
+import index from '../views/index.vue'
+import contract from '../views/contract.vue'
+import contact from '../views/contact.vue'
+import my from '../views/my.vue'
 
 Vue.use(Router)
 
@@ -8,7 +12,19 @@ export default new Router({
   routes: [
     {
     	path: '/',
-    	component: Main
+    	redirect:'/index'
+    },{
+      path:'/index',
+      component:index
+    },{
+      path:'/contract',
+      component:contract
+    },{
+      path:'/contact',
+      component:contact
+    },{
+      path:'/my',
+      component:my
     }
   ]
 })

src/views/contact.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    contact
+  </div>
+</template>
+
+<script>
+    export default {
+        name: "contact"
+    }
+</script>
+
+<style scoped>
+
+</style>

src/views/contract.vue

@@ -0,0 +1,61 @@
+<template>
+    <multi-background>
+     <div class="search-container">
+       <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-tab-item id="2">选项二</mt-tab-item>
+        <mt-tab-item id="3">选项三</mt-tab-item>
+      </mt-navbar>
+    </multi-background>
+</template>
+
+<script>
+  import multiBackground from '../components/multiColorBackground.vue';
+    export default {
+        name: "contract",
+        components:{
+          multiBackground
+        },
+        data(){
+          return{
+            selectedType:'1',
+          }
+        }
+    }
+</script>
+
+<style scoped>
+  .search-container{
+    width: 100%;
+    height: 1.1rem;
+    border-radius: 0.6rem;
+    border: 1px solid #fff;
+    margin-top: 0.2rem;
+    position: relative;
+
+  }
+  .icon-search{
+    position: absolute;
+    display: inline-block;
+    background: url('../../static/contract/search.png') 0 0 no-repeat ;
+    background-size: cover;
+    top: 0.18rem;
+    left: 0.4rem;
+    width: 0.625rem;
+    height: 0.625rem;
+  }
+  .search-input{
+    border: none;
+    background-color: transparent;
+    line-height: 1rem;
+    height: 1rem;
+    width: 7.2rem;
+    margin-left: 0.6rem;
+    font-size: 0.3rem;
+    color: #fff;
+
+  }
+</style>

src/views/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="main-bg">
+    <h1 class="title">区块链合同</h1>
+    <div class="button-inner">
+      <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>
+
+    </div>
+  </div>
+</template>
+
+<script>
+  import BlockButton from '../components/blcokButton.vue';
+    export default {
+        name: "index",
+      components:{
+          BlockButton
+      },
+      data(){
+          return{
+
+          }
+      },
+      methods:{
+          handleClick(id){
+              console.log(id);
+          }
+      }
+
+    }
+</script>
+
+<style scoped>
+  .main-bg{
+    padding: 1px ;
+    background-color: #60c0ff;
+    height: 100vh;
+  }
+  .button-inner{
+    width: 9.3rem;
+    margin: 0.6rem auto 0;
+    background-color: #fff;
+    border-radius: 0.1rem;
+
+  }
+  .title{
+    text-align: center;
+    font-size: 0.5rem;
+    margin-top: 0.5rem;
+    color: #fff;
+  }
+</style>

src/views/main.vue

@@ -1,18 +1,35 @@
 <template>
 	<div>
-		<ti-tle/>
+    <mt-tabbar v-model="selectedTab">
+      <mt-tab-item id="外卖">
+        <img slot="icon" src="">
+        外卖
+      </mt-tab-item>
+      <mt-tab-item id="订单">
+        <img slot="icon" src="">
+        订单
+      </mt-tab-item>
+      <mt-tab-item id="发现">
+        <img slot="icon" src="">
+        发现
+      </mt-tab-item>
+      <mt-tab-item id="我的">
+        <img slot="icon" src="">
+        我的
+      </mt-tab-item>
+    </mt-tabbar>
 	</div>
 </template>
 <script>
-	import TiTle from "../components/title.vue"
+
 	 export default{
 	 	data(){
-             return{
-
-             }
+      return{
+        selectedTab:'',
+      }
 	 	},
 	 	components:{
-             TiTle
+
 	 	},
 	 	methods:{
 

src/views/my.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    my
+  </div>
+</template>
+
+<script>
+    export default {
+        name: "my"
+    }
+</script>
+
+<style scoped>
+
+</style>