Skip to content

C
contarct-chain-wrx
Commit 80c34f7e authored by wangruixin's avatar wangruixin
Browse files
Options

完成了一级界面

parent 0f7f5860
Hide whitespace changes
Inline Side-by-side
Showing with 697 additions and 126 deletions
README.md
View file @ 80c34f7e
# vue-chain
> A Vue.js project
> A Vue.js project by wrx
## 已完成的
- 一级界面的样子大概做好了
- 底部导航栏路由做好可以自己切换
- 使用了vue组件
## 未完成的
- 二级界面 和响应（控件功能）
- 数据接口 (当前是写死了)
- 支持多种分辨率 (目前只有在谷歌浏览器-调试台 iPhone5/SE的分辨率正常一点...)
- 代码写的太烂了 感觉都是为了实现功能而去加的一些 没做到整体上巴拉巴拉
## 效果预览
<img src="./src/assets/预览图/1.png" width="40%">
<img src="./src/assets/预览图/2.png" width="40%">
<img src="./src/assets/预览图/3.png" width="40%">
<img src="./src/assets/预览图/4.png" width="40%">
## Build Setup
......@@ -18,4 +36,3 @@ npm run build
npm run build --report
```
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
package.json
View file @ 80c34f7e
......@@ -10,6 +10,10 @@
"build": "node build/build.js"
},
"dependencies": {
"element-ui": "^2.12.0",
"mint-ui": "^2.2.13",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
......
src/App.vue
View file @ 80c34f7e
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<div></div>
<footer-bar></footer-bar>
</div>
</template>
<script>
import FooterBar from './components/FooterBar'
export default {
name: 'App'
name: 'App',
components:{
FooterBar,
},
}
</script>
......@@ -18,6 +23,8 @@ export default {
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
height: 540px;
overflow: hidden;
font-size:10
}
</style>
src/components/Agreement_Header.vue 0 → 100644
View file @ 80c34f7e
<template>
<div class='header'>
<p class="header_center">合同管理</p>
</div>
</template>
<script>
export default {
name: 'AgreementHeader',
}
</script>
<<style lang="stylus" scoped>
.header
background: none
.header_center
color:white
margin: 0 auto
padding-top: 15px
</style>
src/components/Agreement_Person.vue 0 → 100644
View file @ 80c34f7e
<template>
<div class="contacttt">
<div class="text">
<div class="number">C201202310<span class="signed">已签署</span></div>
<div class="name">全日制劳动合同</div>
<div class="date">2019-10-29</div>
<img class="more" src="../assets/下拉.png" />
</div>
</div>
</template>
<script>
export default {
name: "ContactPerson"
};
</script>
<style lang="stylus" scoped>
.contacttt
border-radius:10px
margin-left:2%
margin-right:2%
margin-top:10px
box-shadow:1px 1px 12px #63B8FF;
background:white
.text
font-size:14px
text-align:left
padding:10px
padding-bottom:0
.more
height:22px
.name
color:#63B8FF
font-weight:550
.date
color:#8B8386
.number
color:#8B8386
.signed
color:red
float:right
</style>
\ No newline at end of file
src/components/Contact_Header.vue 0 → 100644
View file @ 80c34f7e
<template>
<div class='header'>
<p class="header_center">联系人</p>
<img class="header_right" src="../assets/添加联系人.png"/>
</div>
</template>
<script>
export default {
name: 'HomeHeader',
}
</script>
<<style lang="stylus" scoped>
.header
display:flex
background: none
.header_center
color:white
margin: 0 auto
padding-left:10%
padding-top: 15px
padding-bottom: 15px
.header_right
float:right
width:25px
height:25px
margin-right:10px
padding-top: 15px
padding-bottom: 15px
</style>
src/components/Contact_Person.vue 0 → 100644
View file @ 80c34f7e
<template>
<div class="contact">
<img class="photo" src="../assets/联系人-头像.png" />
<div class="text">
<div class="name">齐天大圣啊啊啊<span class="realname">已实名</span></div>
<div class="phone">13506354567</div>
</div>
</div>
</template>
<script>
export default {
name: "ContactPerson"
};
</script>
<style lang="stylus" scoped>
.contact
border-radius:10px
margin-left:2%
margin-right:2%
margin-top:10px
-moz-box-shadow:1px 1px 14px #6887C4
-webkit-box-shadow:1px 1px 14px #6887C4
box-shadow:1px 1px 12px #63B8FF;
background:white
height:30px
line-height:30px
padding-top: 15px;
padding-left:10px;
padding-bottom: 15px;
display: flex;
flex-direction: row;
align-items: center; /*垂直居中*/
font-size: 0;
.photo
display:inline
width:45px
float:left
vertical-align: middle
align-items: center;
.text
text-align: left
padding-left: 10px
flex: 20
float:left
font-size:14px
.name
.realname
color:white
background:#63B8FF
border-radius:10px
width:60px
font-size: 12px
padding-right:5px
padding-left:5px
padding-top:2px
padding-bottom:2px
margin-left:5px
</style>
\ No newline at end of file
src/components/FooterBar.vue 0 → 100644
View file @ 80c34f7e
<template>
<div id="tab-bar">
<mt-tabbar v-model="selected" v-show="isShow"
fixed class="border-1px-top">
<mt-tab-item id="main">
<img :src="img1" slot="icon">首页
</mt-tab-item>
<mt-tab-item id="agreement">
<img :src="img3" slot="icon">合同
</mt-tab-item>
<mt-tab-item id="contact">
<img :src="img5" slot="icon">联系人
</mt-tab-item>
<mt-tab-item id="mine">
<img :src="img7" slot="icon">我的
</mt-tab-item>
</mt-tabbar>
</div>
</template>
<style>
</style>
<script>
export default {
data(){
return {
selected: 'main',
img1: "static/首页-选中.png",
img3: "static/合同-未选.png",
img5: "static/联系人-未选.png",
img7: "static/我-未选.png",
}
},
computed: {
isShow: function () {
return true;
}
},
watch: {
'selected': {
handler(){
if (this.selected == "main") {
this.$router.push('/main');
this.img1 = "static/首页-选中.png"
} else {
this.img1 = "static/首页-未选.png"
}
if (this.selected == "agreement") {
this.$router.push('/agreement');
this.img3 = 'static/合同-选中.png'
} else {
this.img3 = 'static/合同-未选.png'
}
if (this.selected == "contact") {
this.$router.push('/contact')
this.img5 = "static/联系人-选中.png";
} else {
this.img5 = "static/联系人-未选.png";
}
if (this.selected == "mine") {
this.$router.push('/mine')
this.img7 = "static/我-选中.png";
} else {
this.img7 = "static/我-未选.png";
}
}
}
}
}
</script>
\ No newline at end of file
src/components/HelloWorld.vue deleted 100644 → 0
View file @ 0f7f5860
<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/Home_Header.vue 0 → 100644
View file @ 80c34f7e
<template>
<div class='header'>
区块链合同
</div>
</template>
<script>
export default {
name: 'HomeHeader',
}
</script>
<<style lang="stylus" scoped>
.header
background: #63B8FF
color:white
margin: 0 auto
padding-top: 15px
padding-bottom: 15px
font-size:14
</style>
src/components/Home_Icons.vue 0 → 100644
View file @ 80c34f7e
<template>
<div class="icons">
<div class="for_radius">
<div class="icon">
<div class="icon-img">
<img class="icon-img-content" src="../assets/上传合同.png" />
</div>
<p class="icon-desc">上传合同</p>
</div>
<div class="icon">
<div class="icon-img">
<img class="icon-img-content" src="../assets/模板创建.png" />
</div>
<p class="icon-desc">模板创建</p>
</div>
<div class="icon">
<div class="icon-img">
<img class="icon-img-content" src="../assets/草稿箱.png" />
</div>
<p class="icon-desc">草稿箱(0)</p>
</div>
<div class="icon">
<div class="icon-img">
<img class="icon-img-content" src="../assets/待修改.png" />
</div>
<p class="icon-desc">待修改(0)</p>
</div>
<div class="icon">
<div class="icon-img">
<img class="icon-img-content" src="../assets/待签署.png" />
</div>
<p class="icon-desc">待签署(0)</p>
</div>
<div class="icon">
<div class="icon-img">
<img class="icon-img-content" src="../assets/已签署.png" />
</div>
<p class="icon-desc">已签署(0)</p>
</div>
<div class="icon">
<div class="icon-img">
<img class="icon-img-content" src="../assets/已生效.png" />
</div>
<p class="icon-desc">已生效(0)</p>
</div>
<div class="icon">
<div class="icon-img">
<img class="icon-img-content" src="../assets/已失效.png" />
</div>
<p class="icon-desc">已失效(0)</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: "HomeIcons"
};
</script>
<style lang="stylus" scoped>
.icons {
float:left
border-radius:10px;
background: blue
width: 85%;
height: 0;
padding-bottom: 140%;
margin-left: 8%;
text-align: center;
overflow: hidden;
.icon {
position: relative;
overflow: hidden;
width: 50%;
float: left;
height: 0;
background: white;
padding-bottom: 41.2%;
.icon-img {
position: absolute;
top: 0;
left: 0;
right: 0;
box-sizing: border-box;
padding: 0.1rem;
bottom: 0.44rem;
.icon-img-content {
display: block;
margin: 0 auto;
height: 80%;
}
}
.icon-desc {
font-size: 12px;
position: absolute;
left: 0;
right: 0;
height: 0.44rem;
bottom: 0;
line-height: 0.44rem;
color: #333;
text-align: center;
}
}
}
</style>
<style lang="stylus" scoped>
</style>
\ No newline at end of file
src/components/Mine_Header.vue 0 → 100644
View file @ 80c34f7e
<template>
<div class="agreement">
<div class='header'>
<p> </p>
</div>
</div>
</template>
<script>
export default {
name: 'MineHeader',
}
</script>
<<style lang="stylus" scoped>
.header
background: #63B8FF
color:white
margin: 0 auto
padding-top: 15px
padding-bottom: 15px
font-size:14
height:40px
</style>
src/components/Mine_Icons.vue 0 → 100644
View file @ 80c34f7e
<template>
<div class="mine">
<div class="icons">
<div class="icon">
<img class="pic" src="../assets/个人认证.png" />
<div class="name">个人认证</div>
</div>
<div class="icon">
<img class="pic" src="../assets/企业认证.png" />
<div class="name">企业认证</div>
</div>
<div class="icon">
<img class="pic" src="../assets/我的签名.png" />
<div class="name">我的签名</div>
</div>
<div class="icon">
<img class="pic" src="../assets/安全设置.png" />
<div class="name">安全设置</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "MineHeader"
};
</script>
<<style lang="stylus" scoped>
.icons
background: #63B8FF
color:white
margin: 0 auto
padding-top: 100px
padding-bottom: 15px
font-size:14
height:550px
.icon
float:left
width:45%
border-radius:10px
background:white
height:120px
text-align:center
margin-left:3%
margin-bottom:3%
color:#8B8386
.pic
width:80px
height:80px
.name
font-size:14px
</style>
src/components/Mine_Person.vue 0 → 100644
View file @ 80c34f7e
<template>
<div class="mine">
<div class='headers'>
<div class="blank"></div>
<div class='header'>
<img class="pic" src='../assets/我的-头像.png' />
<div class="blank_after_pic" />
<div class="username">用户名</div>
<div class="phone">18622223333</div>
<div class="realname">已实名</div>
<div class="change">切换身份 <img class="change_pic" src="../assets/切换身份.png"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'MineHeader',
}
</script>
<<style lang="stylus" scoped>
.headers
postion:relative
background: #63B8FF
color:white
margin: 0 auto
padding-top: 15px
padding-bottom: 15px
font-size:14
height:110px
position:relative
.blank
background:#63B8FF
height:80px
.header
width:95%
border-radius:10px
background:white
height:120px
margin:0 auto
color:#8B8386
font-size:14px
.blank_after_pic
height:35px
.pic
position:absolute
width:60px
height:60px
top:60px
right:40%
align:center
vertical-align: middle;
.username
font-size:16px
color:black
.realname
color:white
background:#63B8FF
border-radius:10px
padding-top:2px
padding-bottom:2px
width:60px
display:inline-block
text-align:center
.change
color:#63B8FF
.change_pic
height:14px
width:14px
vertical-align:middle
padding-bottom:2px
</style>
src/main.js
View file @ 80c34f7e
......@@ -3,10 +3,15 @@
import Vue from 'vue'
import App from './App'
import router from './router'
import Mint from 'mint-ui'
import 'mint-ui/lib/style.css'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
/* eslint-disable no-new */
Vue.use(Mint);
Vue.use(ElementUI);
new Vue({
el: '#app',
router,
......
src/pages/1_home.vue 0 → 100644
View file @ 80c34f7e
<template>
<div id="page_1">
<home-header ></home-header>
<home-icons></home-icons>
</div>
</template>
<script>
import HomeHeader from '../components/Home_Header'
import HomeIcons from '../components/Home_Icons'
export default {
name: 'App',
data(){
return{
       screenHeight: document.body.clientHeight, // 这里是给到了一个默认值 （这个很重要）   
}
},
components:{
HomeHeader,
HomeIcons,
},
methods:{
print:function ( ){
console.log(this.screenHeight);
console.log("这里想根据按钮做一个自适应的按钮。。。 但是高度获取到都是540 不知道是不是因为 在电脑端的关系 先没做了");
}
}
}
</script>
<style>
.body,.html{
height: 100%;
}
#page_1 {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
background:#63B8FF;
height: 100%;
}
#for_height{
height: 100%;
}
</style>
src/pages/2_agreement.vue 0 → 100644
View file @ 80c34f7e
<template>
<div class='agreement'>
<ag-header></ag-header>
<p class="tabber">全部 待签署 已签署 待修改 已生效 已失效</p>
<ag-person></ag-person>
<ag-person></ag-person>
<ag-person></ag-person>
<p></p>
</div>
</template>
<script>
import AgHeader from '../components/Agreement_Header'
import AgPerson from '../components/Agreement_Person'
export default {
name: 'App',
components:{
AgHeader,
AgPerson,
},
}
</script>
<style lang="stylus" scoped>
.agreement
background: #63B8FF
height:130px
.tabber
font-size:13px
color:white
</style>
\ No newline at end of file
src/pages/3_contact.vue 0 → 100644
View file @ 80c34f7e
<template>
<div class='contact'>
<contact-header class="header_lianxiren"></contact-header>
选择公司 选择个人
<contact-person class="header_person" ></contact-person>
<contact-person class="header_person"></contact-person>
<contact-person class="header_person"></contact-person>
<contact-person class="header_person"></contact-person>
</div>
</template>
<script>
import ContactHeader from '../components/Contact_Header'
import ContactPerson from '../components/Contact_Person'
export default {
name: 'App',
components:{
ContactHeader,
ContactPerson,
},
}
</script>
<style lang="stylus" scoped>
.contact
background: #63B8FF
height:130px
font-size:14px
color:white
.header_lianxiren
font-size:20px
.header_person
color:black
</style>
src/pages/4_mine.vue 0 → 100644
View file @ 80c34f7e
<template>
<div class='contact'>
<me-person></me-person>
<me-icons></me-icons>
</div>
</template>
<script>
import MeHeader from '../components/Mine_Header'
import MePerson from '../components/Mine_Person'
import MeIcons from '../components/Mine_Icons'
export default {
name: 'App',
components:{
MeHeader,
MePerson,
MeIcons,
},
}
</script>
<style scoped>
</style>
src/router/index.js
View file @ 80c34f7e
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Main from '@/pages/1_home.vue'
import Agreement from '@/pages/2_agreement.vue'
import Contact from '@/pages/3_contact.vue'
import Mine from '@/pages/4_mine.vue'
Vue.use(Router)
export default new Router({
routes: [
{
routes: [{
path: '/',
name: 'HelloWorld',
component: HelloWorld
component: Main
}, {
path: '/main',
component: Main
}, {
path: '/agreement',
component: Agreement
}, {
path: '/contact',
component: Contact
},{
path: '/mine',
component:Mine
}
]
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment