Skip to content

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

暂存_布局未解决_一点二级界面和简单动画效果

parent 80c34f7e
Hide whitespace changes
Inline Side-by-side
Showing with 821 additions and 207 deletions
README.md
View file @ c4c834b7
# vue-chain # vue-chain
> A Vue.js project by wrx
## 项目名字
- 先按这个改：
- homepage
- agreement
- contact
- mine
## 使用的外部库
- Mint-ui
- 下载
- npm i mint-ui -S
- 引用
- import MintUI from 'mint-ui'
- import 'mint-ui/lib/style.css'
- Vue.use(MintUI)
## 已完成的 ## 已完成的
- 一级界面的样子大概做好了 - 第一次
- 底部导航栏路由做好可以自己切换 - 一级界面的样子大概做好了
- 使用了vue组件 - 底部导航栏路由做好可以自己切换
- 使用了vue之组件
- 第二次新增
- 模拟数据
## 未完成的 ## 未完成的
- 二级界面 和响应（控件功能） - 二级界面 和响应（控件功能）
- 数据接口 (当前是写死了) - 数据接口 (当前是写死了)
- 支持多种分辨率 (目前只有在谷歌浏览器-调试台 iPhone5/SE的分辨率正常一点...) - 支持多种分辨率 (目前只有在谷歌浏览器-调试台 iPhone5/SE的分辨率正常一点...)
- 代码写的太烂了 感觉都是为了实现功能而去加的一些 没做到整体上巴拉巴拉
## 效果预览 ## 效果预览
<img src="./src/assets/预览图/1.png" width="40%"> <img src="./src/assets/预览图/1.png" width="40%">
......
index.html
View file @ c4c834b7
<!DOCTYPE html> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html lang="zh-CN">
<html> <html>
<head>
<meta charset="utf-8"> <head>
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta charset="utf-8" />
<title>vue-chain</title> <meta name="viewport"
</head> content="width=device-width,
<body> target-densitydpi=high-dpi,
<div id="app"></div> initial-scale=1.0,
<!-- built files will be auto injected --> minimum-scale=1.0,
</body> maximum-scale=1.0,
</html> user-scalable=no,
shrink-to-fit=no" />
<title>合同链练习项目-王瑞欣</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body>
<div id="app"></div>
</body>
</html>
\ No newline at end of file
src/App.vue
View file @ c4c834b7
<template> <template>
<div id="app"> <div id="app">
<router-view/> <transition :name="transitionName" >
<router-view></router-view>
</transition>
<div></div> <div></div>
<footer-bar></footer-bar> <footer-bar v-show="$route.meta.navShow"></footer-bar>
</div> </div>
</template> </template>
<script> <script>
import FooterBar from './components/FooterBar' import FooterBar from './components/public_footerbar'
export default { export default {
name: 'App', name: 'App',
components:{ data(){
FooterBar, return{
transitionName:""
}
}, },
components:{
FooterBar,
},
watch:{
$route(to, from) {
//如果to的索引值为0，不添加任何动画；如果to索引大于from索引,判断为前进状态,反之则为后退状态
if(to.meta.index > 0){
if( to.meta.index < from.meta.index){
this.transitionName = 'slide-right';
}else{
this.transitionName = 'slide-left';
}
} else if(to.meta.index == 0 && from.meta.index > 0){
this.transitionName = 'slide-right';
}
}
},
} }
</script> </script>
<style >
<style> *{
padding:0px;
margin:0px;
}
</style>
<style lang="stylus" scoped>
#app { #app {
font-family: 'Avenir', Helvetica, Arial, sans-serif; font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: #2c3e50; color: #2c3e50;
height: 540px; height: 740px;
overflow: hidden; width:100%
font-size:10 font-size: 10;
} }
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all .3s;
position: absolute;
width:100%;
left:0;
}
.slide-right-enter {
transform: translateX(-100%);
}
.slide-right-leave-active {
transform: translateX(100%);
}
.slide-left-enter {
transform: translateX(100%);
}
.slide-left-leave-active {
transform: translateX(-100%);
}
</style> </style>
src/components/Agreement_Header.vue
View file @ c4c834b7
<template> <template>
<div class='header'> <div class='header'>
<p class="header_center">合同管理</p> <div class="header_center">合同管理</div>
<div class="tabber">
<div class="tabber_detail" id="all">全部</div>
<div class="tabber_detail" id="wait_for_signed">待签署</div>
<div class="tabber_detail" id="signed">已签署</div>
<div class="tabber_detail" id="wait_for_modify">待修改</div>
<div class="tabber_detail" id="valid">已生效</div>
<div class="tabber_detail" id="invalid">已失效</div>
</div>
</div> </div>
</template> </template>
...@@ -9,11 +17,22 @@ export default { ...@@ -9,11 +17,22 @@ export default {
name: 'AgreementHeader', name: 'AgreementHeader',
} }
</script> </script>
<<style lang="stylus" scoped> <style lang="stylus" scoped>
.header .header
background: none background: none
.header_center .header_center
color:white color:white
margin: 0 auto margin: 0 auto
padding-top: 15px padding-top: 15px
.tabber
font-size:13px
height 30px
color:white
.tabber_detail
margin-top:10px
margin-bottom:15px
float left
margin-left 3px
width:15%
</style> </style>
src/components/Agreement_Person.vue
View file @ c4c834b7
<template> <template>
<div class="contacttt"> <div class="contacttt">
<div class="text"> <div class="text" v-for="(item,index) in items" :key="index">
<div class="number">C201202310<span class="signed">已签署</span></div> <div class="number" @click="select_detail" >{{item.number}}<span class="signed">{{item.signed}}</span></div>
<div class="name">全日制劳动合同</div> <div class="name" @click="select_detail" >{{item.name}}</div>
<div class="date">2019-10-29</div> <div class="date" @click="select_detail" >{{item.date}}</div>
<img class="more" src="../assets/下拉.png" /> <div class="more">
<img class="more_pic" @click="select_showmore(index)" src="../assets/下拉.png" /></div>
</div> </div>
<router-view></router-view>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "ContactPerson" name: "ContactPerson",
data(){
return{
items:[
{
id:1,
number:"C0000239834",
name:"全日制劳动合同",
date:"2019-10-29",
signed:"已签署"
},
{
id:2,
number:"C00000000",
name:"其他合同",
date:"2019-10-23",
signed:"已签署"
},
{
id:3,
number:"C000022384",
name:"其他合同2",
date:"2019-10-30",
signed:"已签署"
},
{
id:4,
number:"C0000239834",
name:"其他合同3名字很长长长长长",
date:"2019-10-29",
signed:"已签署"
},
]
}
},
methods:{
select_showmore(id){
this.$router.push({
path:'/agreement/oo'
})
},
select_detail(){
this.$router.push('/agreement_detail')
},
},
}; };
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
...@@ -20,15 +66,21 @@ export default { ...@@ -20,15 +66,21 @@ export default {
margin-left:2% margin-left:2%
margin-right:2% margin-right:2%
margin-top:10px margin-top:10px
box-shadow:1px 1px 12px #63B8FF;
background:white background:white
.text .text
border-radius:10px
box-shadow:1px 1px 12px #63B8FF;
font-size:14px font-size:14px
text-align:left text-align:left
margin-top:10px
padding:10px padding:10px
padding-bottom:0 padding-bottom:0
.more .more
height:22px text-align:center
.more_pic
width:100%
height:22px
.name .name
color:#63B8FF color:#63B8FF
font-weight:550 font-weight:550
......
src/components/Contact_Person.vue
View file @ c4c834b7
<template> <template>
<div class="contact"> <div>
<img class="photo" src="../assets/联系人-头像.png" /> <div class="contact" @click="select_detail" v-for="(item,index) in items" :key="index">
<div class="text"> <img class="photo" src="../assets/联系人-头像.png" />
<div class="name">齐天大圣啊啊啊<span class="realname">已实名</span></div> <div class="text">
<div class="phone">13506354567</div> <div class="name">
{{item.name}}
<span class="realname">{{item.status}}</span>
</div>
<div class="phone">{{item.phone}}</div>
</div>
</div> </div>
<contact-detail v-on:childByValue="childByValue" v-show="show"></contact-detail>
<div class="float_confirm">这里是和谁签订了合同</div>
</div> </div>
</template> </template>
<script> <script>
import ContactDetail from './contact_detail'
export default { export default {
name: "ContactPerson" name: "ContactPerson",
data() {
return {
items: [
{
name: "我是第一个人",
status: "已实名",
phone: "13512345678"
},
{
name: "我是第二个人",
status: "已认证",
phone: "15888886666"
},
{
name: "我是第三个人",
status: "已认证",
phone: "15888886666"
},
],
show:false,
};
},
components:{
ContactDetail,
},
methods:{
select_detail(){
this.show=true
},
childByValue(childValue){
this.show=childValue
}
},
}; };
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.contact .contact {
border-radius:10px border-radius: 10px;
margin-left:2% margin-left: 2%;
margin-right:2% margin-right: 2%;
margin-top:10px margin-top: 10px;
-moz-box-shadow:1px 1px 14px #6887C4 -moz-box-shadow: 1px 1px 14px #6887C4;
-webkit-box-shadow:1px 1px 14px #6887C4 -webkit-box-shadow: 1px 1px 14px #6887C4;
box-shadow:1px 1px 12px #63B8FF; box-shadow: 1px 1px 12px #63B8FF;
background:white background: white;
height:30px height: 30px;
line-height:30px line-height: 30px;
padding-top: 15px; padding-top: 15px;
padding-left:10px; padding-left: 10px;
padding-bottom: 15px; padding-bottom: 15px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; /*垂直居中*/ align-items: center; /* 垂直居中 */
font-size: 0; font-size: 0;
.photo
display:inline .photo {
width:45px display: inline;
float:left width: 45px;
vertical-align: middle float: left;
align-items: center; vertical-align: middle;
.text align-items: center;
text-align: left }
padding-left: 10px
flex: 20 .text {
float:left text-align: left;
font-size:14px padding-left: 10px;
.name flex: 20;
.realname float: left;
color:white font-size: 14px;
background:#63B8FF
border-radius:10px .name {
width:60px .realname {
font-size: 12px color: white;
padding-right:5px background: #63B8FF;
padding-left:5px border-radius: 10px;
padding-top:2px width: 60px;
padding-bottom:2px font-size: 12px;
margin-left:5px padding-right: 5px;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 2px;
margin-left: 5px;
}
}
}
}
</style> </style>
\ No newline at end of file
src/components/Mine_Person.vue
View file @ c4c834b7
<template> <template>
<div class="mine"> <div class="mine">
<div class='headers'> <div class='headers' >
<div class="blank"></div> <div class="blank"></div>
<div class='header'> <div class='header' @click="select_detail">
<img class="pic" src='../assets/我的-头像.png' /> <img class="pic" src='../assets/我的-头像.png' />
<div class="blank_after_pic" /> <div class="blank_after_pic" />
<div class="username">用户名</div> <div class="username" >用户名</div>
<div class="phone">18622223333</div> <div class="phone">18622223333</div>
<div class="realname">已实名</div> <div class="realname">已实名</div>
<div class="change">切换身份 <img class="change_pic" src="../assets/切换身份.png"></div> <div class="change" >切换身份 <img class="change_pic" src="../assets/切换身份.png"></div>
</div> </div>
<transition name="modal-fade">
<router-view></router-view>
</transition>
</div> </div>
</div> </div>
</template> </template>
...@@ -18,10 +21,25 @@ ...@@ -18,10 +21,25 @@
<script> <script>
export default { export default {
name: 'MineHeader', name: 'MineHeader',
methods:{
select_detail(){
this.$router.push('/mine/change_person')
},
},
} }
</script> </script>
<style lang="stylus" scoped>
.modal-fade-enter,
.modal-fade-leave-to {
opacity: 0;
}
.modal-fade-enter-active,
.modal-fade-leave-active {
transition: opacity .5s ease
}
<<style lang="stylus" scoped> </style>
<style lang="stylus" scoped>
.headers .headers
postion:relative postion:relative
background: #63B8FF background: #63B8FF
......
src/components/agreement/agreement_detail.vue 0 → 100644
View file @ c4c834b7
<template>
<div class="agreement_detail">
<div class="header">
<mt-button class="back_botton" icon="back" @click="$router.back(-1)"></mt-button>
<div class="header">合同详情qwqqqq</div>
</div>
<div class="detail">
<div class="detail_header">
<p class="aaa">全日制劳动合同<br>时间 日期</p>
</div>
<div class="detail_text">
<p align="left">
甲方：
<br />甲方地址：
<br />乙方：
<br />乙方地址：
<br />根据《中华人民共和国劳动法》的规定，根据《中华人民共和国劳动法》的规定，根据《中华人民共和国劳动法》的规定，根据《中华人民共和国劳动法》的规定，根据《中华人民共和国劳动法》的规定，根据《中华人民共和国劳动法》的规定，根据《中华人民共和国劳动法》的规定，根据《中华人民共和国劳动法》的规定，根据《中华人民共和国劳动法》的规定，根据《中华人民共和国劳动法》的规定，根据《中华人民共和国劳动法》的规定，根据《中华人民共和国劳动法》的规定，根据《中华人民共和国劳动法》的规定，根据《中华人民共和国劳动法》的规定……
</p>
</div>
</div>
</div>
</template>
<style lang="stylus" scoped>
.agreement_detail {
position: relative;
.header {
background: #63B8FF;
color: white;
margin: 0 auto;
padding-top: 15px;
padding-bottom: 15px;
font-size: 14;
height: 130px;
.back_botton {
float: left;
background: #63B8FF;
color: white;
display: inline-block;
vertical-align: center;
padding-top: 20px;
}
}
.detail {
box-shadow: 1px 1px 12px #63B8FF;
border-radius:10px
position: absolute;
top: 100px;
background :white
width:85%
margin-left:7.5%
.detail_header {
align: center;
display: inline-block;
.aaa {
top:0
margin-top:2px
margin-bottom:0
align: center;
display: inline-block;
font-size:16px
}
}
.detail_text{
margin-top:2px
margin-bottom:0
top:0
padding-bottom:0
padding-top:0
margin-left:15px
font-size:14px
}
}
}
</style>
\ No newline at end of file
src/components/agreement/agreement_showmore.vue 0 → 100644
View file @ c4c834b7
<template>
<div class="top">
<p>啊啊啊啊啊啊啊</p>
</div>
</template>
<style lang="stylus" scoped>
.top
height: 100%
width:100%
background :pink
</style>
\ No newline at end of file
src/components/contact_detail.vue 0 → 100644
View file @ c4c834b7
<template>
<transition name="modal-fade">
<div class="modal-backdrop">
<div class="modal">
<div class="modal-body">
<slot name="body">
<span class="name" >与 齐天大圣签订合同？</span>
<button type="button" class="btn-close" @click="select_detail">x</button>
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
<div class="contact_button" id="upload">上传合同</div>
<div class="contact_button" id="template">模板合同</div>
</slot>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'Modal',
data () {
return {
childValue:"false"
}
},
methods: {
select_detail(){
this.childValue=false
this.$emit('childByValue', this.childValue)
//this.$router.back(-1)
},
}
}
</script>
<style lang="stylus" scoped>
.modal-fade-enter,
.modal-fade-leave-to {
opacity: 0;
}
.modal-fade-enter-active,
.modal-fade-leave-active {
transition: opacity .5s ease
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,.5);
display: flex;
justify-content: center;
align-items: center;
}
.modal {
background-color: #fff;
border-radius:5px;
overflow-x:auto;
display: flex;
padding-bottom:10px
width: 60%
flex-direction: column;
}
.modal-header,
.modal-footer {
padding: 5px;
display: flex;
}
.modal-header {
border-bottom: 1px solid #eee;
color: #4aae9b;
justify-content: space-between;
}
.modal-footer {
border-top: 1px solid #eee;
justify-content: flex-end;
}
.modal-body {
position: relative;
padding: 20px 10px;
}
.btn-close {
border: none 0;
font-size: 16px;
cursor: pointer;
font-weight: bold;
color: #63B8FF;
background-color: transparent;
float:right
}
.contact_button{
float:left
width:45%
background:#63B8FF
border-radius:20px
color:white
padding-top:10px
padding-bottom:10px
margin-left:10px
}
.name{
color:#63B8FF
}
</style>
src/components/homepage/homepage_agreement.vue 0 → 100644
View file @ c4c834b7
<template>
<div class="one_agreement">
<div>编辑合同qaq</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="stylus" scoped>
</style>
src/components/Home_Icons.vue → src/components/homepage_icons.vue
View file @ c4c834b7
<template> <template>
<div class="icons"> <div class="icons">
<div class="for_radius"> <div class="for_radius">
<div class="icon"> <div class="icon" @click="select_detail" v-for="(item,index) in items" :key=index>
<div class="icon-img"> <div class="icon-img">
<img class="icon-img-content" src="../assets/上传合同.png" /> <img class="icon-img-content" :src="item.imgsrc" />
</div>
<p class="icon-desc">{{item.text}}</p>
</div> </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>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "HomeIcons" name: "HomeIcons",
data(){
return{
items:[
{
imgsrc:require("../assets/上传合同.png"),
text:"上传合同",
},
{
imgsrc:require("../assets/模板创建.png"),
text:"模板创建",
},
{
imgsrc:require("../assets/草稿箱.png"),
text:"草稿箱(0)",
},
{
imgsrc:require("../assets/待修改.png"),
text:"待修改(0)",
},
{
imgsrc:require("../assets/待签署.png"),
text:"待签署(0)",
},
{
imgsrc:require("../assets/已签署.png"),
text:"已签署(0)",
},
{
imgsrc:require("../assets/已失效.png"),
text:"已生效(0)",
},
{
imgsrc:require("../assets/已生效.png"),
text:"已失效(0)",
},
]
}
},
methods:{
select_detail(){
this.$router.push('/agreement_detail')
},
},
}; };
</script> </script>
...@@ -110,5 +111,3 @@ export default { ...@@ -110,5 +111,3 @@ export default {
} }
} }
</style> </style>
<style lang="stylus" scoped>
</style>
\ No newline at end of file
src/components/mine_changeperson.vue 0 → 100644
View file @ c4c834b7
<template>
<div class="modal-backdrop">
<div class='line'></div>
<img src="../assets/叉号.png" id="line_btn" class="btn-close" @click="$router.back(-1)" />
<div class="modal">
<div class="modal-body">
<slot name="body">
<div class="list">
<span class="name">齐天大圣</span>
<span class="realname">已实名 >></span>
</div>
<br>
<hr align="center" width="100%" size="1" color="#ffffff">
<div class="list">
<span class="name">杭州复杂美科技有限公司</span>
<span class="realname">已实名 >></span>
</div>
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
<div class="mine_button" id="quit">退出登录</div>
</slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Modal',
data () {
return {
}
},
methods: {
}
}
</script>
<style lang="stylus" scoped>
.modal-fade-enter,
.modal-fade-leave-to {
opacity: 0;
}
.modal-fade-enter-active,
.modal-fade-leave-active {
transition: opacity .5s ease
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,.5);
display: flex;
justify-content: center;
align-items: center;
}
.line{
background:white
height:25%
width:1px
position:absolute
top:130px
}
#line_btn{
widows: 20px
height: 20px
}
.modal {
background-color: #fff;
border-radius:5px;
overflow-x:auto;
display: flex;
width: 90%
flex-direction: column;
}
.modal-footer {
padding: 5px;
display: flex;
border-top: 1px solid #eee;
justify-content: flex-end;
text-align:center
position: relative;
}
.modal-body {
position: relative;
padding: 20px 10px;
}
.btn-close {
border: none 0;
font-size: 16px;
cursor: pointer;
font-weight: bold;
color: #63B8FF;
background-color: transparent;
float:right
position:absolute
top:110px
}
.name{
color:#63B8FF
float:left
font-size:16px
}
.realname{
float:right
color:#63B8FF
font-size :12px
}
.mine_button{
width:100%
background:#63B8FF
border-radius:20px
color:white
padding-top:10px
padding-bottom:10px
margin-left:20px
margin-right:20px
}
</style>
src/components/FooterBar.vue → src/components/public_footerbar.vue
View file @ c4c834b7
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div id="tab-bar"> <div id="tab-bar">
<mt-tabbar v-model="selected" v-show="isShow" <mt-tabbar v-model="selected" v-show="isShow"
fixed class="border-1px-top"> fixed class="border-1px-top">
<mt-tab-item id="main"> <mt-tab-item id="homepage">
<img :src="img1" slot="icon">首页 <img :src="img1" slot="icon">首页
</mt-tab-item> </mt-tab-item>
<mt-tab-item id="agreement"> <mt-tab-item id="agreement">
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
export default { export default {
data(){ data(){
return { return {
selected: 'main', selected: "homepage",
img1: "static/首页-选中.png", img1: "static/首页-选中.png",
img3: "static/合同-未选.png", img3: "static/合同-未选.png",
img5: "static/联系人-未选.png", img5: "static/联系人-未选.png",
...@@ -38,8 +38,8 @@ ...@@ -38,8 +38,8 @@
watch: { watch: {
'selected': { 'selected': {
handler(){ handler(){
if (this.selected == "main") { if (this.selected == "homepage") {
this.$router.push('/main'); this.$router.push('/homepage');
this.img1 = "static/首页-选中.png" this.img1 = "static/首页-选中.png"
} else { } else {
this.img1 = "static/首页-未选.png" this.img1 = "static/首页-未选.png"
......
src/pages/4_mine.vue deleted 100644 → 0
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/pages/2_agreement.vue → src/pages/agreement.vue
View file @ c4c834b7
<template> <template>
<div class='agreement'> <div class='agreement'>
<ag-header></ag-header> <ag-header></ag-header>
<p class="tabber">全部 待签署 已签署 待修改 已生效 已失效</p>
<ag-person></ag-person>
<ag-person></ag-person>
<ag-person></ag-person> <ag-person></ag-person>
<p></p> <p></p>
</div> </div>
</template> </template>
<script> <script>
import AgHeader from '../components/Agreement_Header' import AgHeader from '../components/agreement_header'
import AgPerson from '../components/Agreement_Person' import AgPerson from '../components/agreement_person'
export default { export default {
name: 'App', name: 'App',
components:{ components:{
......
src/pages/3_contact.vue → src/pages/contact.vue
View file @ c4c834b7
<template> <template>
<div class='contact'> <div id="mask">
<div class='contact'>
<contact-header class="header_lianxiren"></contact-header> <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> </div>
<contact-person class="header_person"></contact-person>
<contact-person class="header_person"></contact-person>
</div> </div>
</template> </template>
<script> <script>
import ContactHeader from '../components/Contact_Header' import ContactHeader from '../components/contact_header'
import ContactPerson from '../components/Contact_Person' import ContactPerson from '../components/contact_person'
export default { export default {
name: 'App', name: 'App',
components:{ components:{
...@@ -20,7 +18,8 @@ export default { ...@@ -20,7 +18,8 @@ export default {
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.contact
.contact
background: #63B8FF background: #63B8FF
height:130px height:130px
font-size:14px font-size:14px
......
src/pages/1_home.vue → src/pages/homepage.vue
View file @ c4c834b7
<template> <template>
<div id="page_1"> <div class="main">
<home-header ></home-header> <homepage-header ></homepage-header>
<home-icons></home-icons> <homepage-icons></homepage-icons>
</div> </div>
</template> </template>
<script> <script>
import HomeHeader from '../components/Home_Header' import HomepageHeader from '../components/homepage_header'
import HomeIcons from '../components/Home_Icons' import HomepageIcons from '../components/homepage_icons'
export default { export default {
name: 'App', name: 'App',
data(){ data(){
...@@ -15,8 +16,8 @@ export default { ...@@ -15,8 +16,8 @@ export default {
} }
}, },
components:{ components:{
HomeHeader, HomepageHeader,
HomeIcons, HomepageIcons,
}, },
methods:{ methods:{
print:function ( ){ print:function ( ){
...@@ -26,18 +27,22 @@ export default { ...@@ -26,18 +27,22 @@ export default {
} }
} }
</script> </script>
<style>
<!-- 这里删不掉！！！！ 这里删了整个格式都坏了我不知道为啥 先放着吧 -->
<style scoped>
.body,.html{ .body,.html{
height: 100%; height: 100%;
} }
#page_1 {
</style>
<style lang="stylus" scoped>
.main
font-family: 'Avenir', Helvetica, Arial, sans-serif; font-family: 'Avenir', Helvetica, Arial, sans-serif;
text-align: center; text-align: center;
color: #2c3e50; color: #2c3e50;
background:#63B8FF; background:#63B8FF;
height: 100%; height: 100%;
} #for_height
#for_height{
height: 100%; height: 100%;
}
</style> </style>
src/pages/mine.vue 0 → 100644
View file @ c4c834b7
<template>
<div class='mine'>
<mine-person></mine-person>
<mine-icons></mine-icons>
</div>
</template>
<script>
import MineHeader from '../components/mine_header'
import MinePerson from '../components/mine_person'
import MineIcons from '../components/mine_icons'
export default {
name: 'App',
components:{
MineHeader,
MinePerson,
MineIcons,
},
}
</script>
<style lang="stylus" scoped>
#mask{
width: 100%;
opacity: 0.6;
background-color: black;
bottom: 0;
left: 0;
position: fixed;
z-index: 998;
}
</style>
src/router/index.js
View file @ c4c834b7
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import Main from '@/pages/1_home.vue' import Homepage from '@/pages/homepage.vue'
import Agreement from '@/pages/2_agreement.vue' import Agreement from '@/pages/agreement.vue'
import Contact from '@/pages/3_contact.vue' import AgreementDetail from "@/components/agreement/agreement_detail.vue"
import Mine from '@/pages/4_mine.vue' import AgreementShowmore from "@/components/agreement/agreement_showmore.vue"
import Contact from '@/pages/contact.vue'
import ContactDetail from '@/components/contact_detail.vue'
import Mine from '@/pages/mine.vue'
import MineChangeperson from '@/components/mine_changeperson.vue'
Vue.use(Router) Vue.use(Router)
export default new Router({ export default new Router({
routes: [{ routes: [{
path: '/', path: '/',
component: Main component: Homepage,
meta: { navShow: true,index:0},
}, { }, {
path: '/main', path: '/homepage',
component: Main component: Homepage,
meta: { navShow: true,index:10},
}, { }, {
path: '/agreement', path: '/agreement',
component: Agreement component: Agreement,
}, { meta: { navShow: true,index:20},
children:[
{
path:":oo",
component:AgreementShowmore,
meta: { navShow: true},
}
]
},
{
path: '/contact', path: '/contact',
component: Contact component: Contact,
},{ meta: { navShow: true,index:30},
children:[
{
path:":contact_detail",
component:ContactDetail,
meta: { navShow: false},
}
]
},
{
path: '/mine', path: '/mine',
component:Mine component:Mine,
} meta: { navShow: true,index:40},
children:[
{
path:":change_person",
component:MineChangeperson,
meta: { navShow: false},
}
]
},
{
path:'/agreement_detail',
component: AgreementDetail,
meta: { navShow: false,index: 50},
},
] ]
}) })
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