Skip to content

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

移动端的响应式得到了一点改观_(:з」∠)_ "合同"栏做了一些小按钮 还有一些bug存在

parent c4c834b7
Hide whitespace changes
Inline Side-by-side
Showing with 239 additions and 254 deletions
build/webpack.base.conf.js
View file @ 4c379c9c
...@@ -19,8 +19,8 @@ module.exports = { ...@@ -19,8 +19,8 @@ module.exports = {
path: config.build.assetsRoot, path: config.build.assetsRoot,
filename: '[name].js', filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production' publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath ? './'+ config.build.assetsPublicPath
: config.dev.assetsPublicPath : './'+ config.dev.assetsPublicPath
}, },
resolve: { resolve: {
extensions: ['.js', '.vue', '.json'], extensions: ['.js', '.vue', '.json'],
......
src/App.vue
View file @ 4c379c9c
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<router-view></router-view> <router-view></router-view>
</transition> </transition>
<div></div> <div></div>
<footer-bar v-show="$route.meta.navShow"></footer-bar> <footer-bar class="tabber_bar" v-show="$route.meta.navShow"></footer-bar>
</div> </div>
</template> </template>
<script> <script>
...@@ -48,11 +48,12 @@ export default { ...@@ -48,11 +48,12 @@ export default {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: #2c3e50; color: #2c3e50;
height: 740px; height:100vh;
width:100% width:100%
font-size: 10; font-size: 10;
} }
.slide-right-enter-active, .slide-right-enter-active,
.slide-right-leave-active, .slide-right-leave-active,
.slide-left-enter-active, .slide-left-enter-active,
......
src/components/Agreement_Header.vue
View file @ 4c379c9c
<template> <template>
<div class='header'> <div class='header'>
<div class="header_center">合同管理</div> <div class="header_center">合同管理</div>
<div class="tabber"> <div class="tabber">
<div class="tabber_detail" id="all">全部</div> <div class="tabber_detail" @click="select_change(0)" id="all">全部</div>
<div class="tabber_detail" id="wait_for_signed">待签署</div> <div class="tabber_detail" @click="select_change(1)" id="wait_for_signed">待签署</div>
<div class="tabber_detail" id="signed">已签署</div> <div class="tabber_detail" @click="select_change(2)" id="signed">已签署</div>
<div class="tabber_detail" id="wait_for_modify">待修改</div> <div class="tabber_detail" @click="select_change(3)" id="wait_for_modify">待修改</div>
<div class="tabber_detail" id="valid">已生效</div> <div class="tabber_detail" @click="select_change(4)" id="valid">已生效</div>
<div class="tabber_detail" id="invalid">已失效</div> <div class="tabber_detail" @click="select_change(5)" id="invalid">已失效</div>
</div>
<div id="choosed">
<div></div>
</div> </div>
</div> </div>
</template> </template>
...@@ -15,24 +18,38 @@ ...@@ -15,24 +18,38 @@
<script> <script>
export default { export default {
name: 'AgreementHeader', name: 'AgreementHeader',
methods:{
select_change(x){
document.getElementById('choosed').style.left = (8.5+x*16)+"vw";
}
}
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.header .header
background: none background: none
position:relative;
width:100%
.header_center .header_center
color:white color:white
margin: 0 auto
padding-top: 15px padding-top: 15px
.tabber .tabber
width:96vw;
font-size:13px font-size:13px
height 30px height 30px
color:white color:white
.tabber_detail .tabber_detail
margin-top:10px margin-top:10px
margin-bottom:15px margin-bottom:15px
float left float:left
margin-left 3px margin-left 1vw;
width:15% width:15vw;
#choosed
position:absolute;
left:8.5vw;
margin-left: -2.5vw;
width:5vw;
background:white
height:0.5vw;
border-radius:10px;
</style> </style>
src/components/Agreement_Person.vue
View file @ 4c379c9c
<template> <template>
<div class="contacttt"> <div class="contacttt">
<div class="text" v-for="(item,index) in items" :key="index"> <div class="text" v-for="(item,index) in items" :key="index">
<div class="number" @click="select_detail" >{{item.number}}<span class="signed">{{item.signed}}</span></div> <div class="detail">
<div class="name" @click="select_detail" >{{item.name}}</div> <div class="number" @click="select_detail" >{{item.number}}<span class="signed">{{item.signed}}</span></div>
<div class="date" @click="select_detail" >{{item.date}}</div> <div class="name" @click="select_detail" >{{item.name}}</div>
<div class="more"> <div class="date" @click="select_detail" >{{item.date}}</div>
<img class="more_pic" @click="select_showmore(index)" src="../assets/下拉.png" /></div> <div class="more">
<img class="more_pic" @click="select_showmore(index)" :src="item.imgsrc" /></div>
</div>
<div class="text_more" v-show="item.isMore">
<div class="number" @click="select_detail" >{{item.number}}<span class="signed">已失效</span></div>
<div class="name" @click="select_detail" >{{item.name}}</div>
<div class="date" @click="select_detail" >{{item.date}}</div>
</div>
</div> </div>
<router-view></router-view> <router-view></router-view>
</div> </div>
...@@ -16,46 +23,55 @@ export default { ...@@ -16,46 +23,55 @@ export default {
name: "ContactPerson", name: "ContactPerson",
data(){ data(){
return{ return{
items:[ items:[
{ {
id:1, id:1,
number:"C0000239834", number:"C0000239834",
name:"全日制劳动合同", name:"全日制劳动合同",
date:"2019-10-29", date:"2019-10-29",
signed:"已签署" signed:"已签署",
isMore:false,
imgsrc:require("../assets/下拉.png"),
}, },
{ {
id:2, id:2,
number:"C00000000", number:"C00000000",
name:"其他合同", name:"其他合同",
date:"2019-10-23", date:"2019-10-23",
signed:"已签署" signed:"已签署",
}, isMore:false,
imgsrc:require("../assets/下拉.png"),
},
{ {
id:3, id:3,
number:"C000022384",
name:"其他合同2",
date:"2019-10-30",
signed:"已签署"
},
{
id:4,
number:"C0000239834", number:"C0000239834",
name:"其他合同3名字很长长长长长", name:"其他合同3名字很长长长长长",
date:"2019-10-29", date:"2019-10-29",
signed:"已签署" signed:"已签署",
isMore:false,
imgsrc:require("../assets/下拉.png"),
}, },
] ],
} }
}, },
methods:{ methods:{
select_showmore(id){ select_showmore(id){
this.$router.push({ if(this.items[id].isMore==true){
path:'/agreement/oo' this.items[id].imgsrc=require("../assets/下拉.png");
}) }else{
this.items[id].imgsrc=require("../assets/收回.png");
}
this.items[id].isMore=!this.items[id].isMore;
//this.$router.push({
// path:'/agreement/oo'
//})
}, },
select_detail(){ select_detail(){
this.$router.push('/agreement_detail') this.$router.push('/agreement_detail')
}, },
}, },
}; };
...@@ -66,7 +82,6 @@ export default { ...@@ -66,7 +82,6 @@ export default {
margin-left:2% margin-left:2%
margin-right:2% margin-right:2%
margin-top:10px margin-top:10px
background:white background:white
.text .text
border-radius:10px border-radius:10px
...@@ -76,19 +91,22 @@ export default { ...@@ -76,19 +91,22 @@ export default {
margin-top:10px margin-top:10px
padding:10px padding:10px
padding-bottom:0 padding-bottom:0
.more .detail,.text_more
text-align:center .more
.more_pic text-align:center
width:100% .more_pic
height:22px width:100%
.name height:22px
color:#63B8FF .name
font-weight:550 color:#63B8FF
.date font-weight:550
color:#8B8386 .date
.number color:#8B8386
color:#8B8386 .number
.signed color:#8B8386
color:red .signed
float:right color:red
float:right
</style> </style>
\ No newline at end of file
src/components/Contact_Person.vue
View file @ 4c379c9c
<template> <template>
<div> <div class="contact_person">
<div class="contact" @click="select_detail" v-for="(item,index) in items" :key="index"> <div class="contact" @click="select_detail" v-for="(item,index) in items" :key="index">
<img class="photo" src="../assets/联系人-头像.png" /> <img class="photo" src="../assets/联系人-头像.png" />
<div class="text"> <div class="text">
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</div> </div>
<contact-detail v-on:childByValue="childByValue" v-show="show"></contact-detail> <contact-detail v-on:childByValue="childByValue" v-show="show"></contact-detail>
<div class="float_confirm">这里是和谁签订了合同</div> <div class="float_confirm"></div>
</div> </div>
</template> </template>
...@@ -57,8 +57,13 @@ export default { ...@@ -57,8 +57,13 @@ export default {
}, },
}; };
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.contact { .contact_person{
height:60vh;
margin-bottom:20vh;
}
.contact{
border-radius: 10px; border-radius: 10px;
margin-left: 2%; margin-left: 2%;
margin-right: 2%; margin-right: 2%;
...@@ -67,7 +72,7 @@ export default { ...@@ -67,7 +72,7 @@ export default {
-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: 8vh;
line-height: 30px; line-height: 30px;
padding-top: 15px; padding-top: 15px;
padding-left: 10px; padding-left: 10px;
...@@ -75,11 +80,9 @@ export default { ...@@ -75,11 +80,9 @@ export default {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; /* 垂直居中 */ align-items: center; /* 垂直居中 */
font-size: 0;
.photo { .photo {
display: inline; display: inline;
width: 45px; width: 7vh;
float: left; float: left;
vertical-align: middle; vertical-align: middle;
align-items: center; align-items: center;
...@@ -90,7 +93,7 @@ export default { ...@@ -90,7 +93,7 @@ export default {
padding-left: 10px; padding-left: 10px;
flex: 20; flex: 20;
float: left; float: left;
font-size: 14px; font-size:2vh;
.name { .name {
.realname { .realname {
...@@ -98,7 +101,7 @@ export default { ...@@ -98,7 +101,7 @@ export default {
background: #63B8FF; background: #63B8FF;
border-radius: 10px; border-radius: 10px;
width: 60px; width: 60px;
font-size: 12px; font-size: 1.8vh;
padding-right: 5px; padding-right: 5px;
padding-left: 5px; padding-left: 5px;
padding-top: 2px; padding-top: 2px;
......
src/components/Mine_Header.vue
View file @ 4c379c9c
<template> <template>
<div class="agreement"> <div class="mine">
<div class='header'> <div class='headers' >
<p> </p> <div class="blank"></div>
<div class='header' @click="select_detail">
<div class="picture"><img class="pic" src='../assets/我的-头像.png' /></div>
<div class="blank_after_pic" />
<div class="username" >用户名</div>
<div class="phone">18622223333</div>
<div class="realname"><div class="realname_button">已实名</div></div>
<div class="change" >切换身份 <img class="change_pic" src="../assets/切换身份.png"></div>
</div>
<transition name="modal-fade">
<router-view></router-view>
</transition>
</div> </div>
</div> </div>
</template> </template>
...@@ -9,16 +20,83 @@ ...@@ -9,16 +20,83 @@
<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>
.mine{
height:40vh;
background: #63B8FF
}
.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>
.header <style lang="stylus" scoped>
.headers
postion:relative
background: #63B8FF background: #63B8FF
color:white color:white
margin: 0 auto padding-top: 2vh
padding-top: 15px padding-bottom: 2vh
padding-bottom: 15px .blank
font-size:14 background:#63B8FF
height:40px height:15vh;
.header
width:90vw
border-radius:10px
background:white
height:21vh
margin:0 auto
color:#8B8386
font-size:2vh
.picture
position:absolute
width:10vh
height:10vh
top:12vh
left:50vw
margin-left:-5vh
text-align:center
vertical-align: middle;
.pic
width:100%
.blank_after_pic
height:8vh
.username
height:3vh
color:black
.realname
height 3vh
.realname_button
color:white
background:#63B8FF
border-radius:10px
padding-top:2px
padding-bottom:2px
margin-bottom:.3vh
width:8vh
display:inline-block
text-align:center
.phone
height:2.5vh
.change
color:#63B8FF
height:3vh
.change_pic
height:14px
width:14px
vertical-align:middle
padding-bottom:2px
</style> </style>
src/components/Mine_Icons.vue
View file @ 4c379c9c
<template> <template>
<div class="mine"> <div class="mine">
<div class="icons"> <div class="icons">
...@@ -28,28 +27,31 @@ export default { ...@@ -28,28 +27,31 @@ export default {
}; };
</script> </script>
<<style lang="stylus" scoped> <style lang="stylus" scoped>
.icons .mine
background: #63B8FF height:50vh;
color:white background:#63B8FF
margin: 0 auto .icons
padding-top: 100px background: #63B8FF
padding-bottom: 15px color:white
font-size:14 width:92vw;
height:550px margin-left:4vw;
.icon padding-top: 0.5vh
float:left font-size:14
width:45% height:48vh
border-radius:10px .icon
background:white float:left
height:120px width:43vw;
text-align:center border-radius:10px
margin-left:3% background:white
margin-bottom:3% height:23vh;
color:#8B8386 text-align:center
.pic margin-left:2vw
width:80px margin-bottom:1vh
height:80px color:#8B8386
.name .pic
font-size:14px width:16vh
height:16vh
.name
font-size:2.5vh
</style> </style>
src/components/Mine_Person.vue deleted 100644 → 0
View file @ c4c834b7
<template>
<div class="mine">
<div class='headers' >
<div class="blank"></div>
<div class='header' @click="select_detail">
<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>
<transition name="modal-fade">
<router-view></router-view>
</transition>
</div>
</div>
</template>
<script>
export default {
name: 'MineHeader',
methods:{
select_detail(){
this.$router.push('/mine/change_person')
},
},
}
</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>
<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/components/agreement/agreement_showmore.vue deleted 100644 → 0
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/agreement/agreement_detail.vue → src/components/agreement_detail.vue
View file @ 4c379c9c
...@@ -23,23 +23,21 @@ ...@@ -23,23 +23,21 @@
<style lang="stylus" scoped> <style lang="stylus" scoped>
.agreement_detail { .agreement_detail {
position: relative; position: relative;
.header { .header {
background: #63B8FF; background: #63B8FF;
color: white; color: white;
margin: 0 auto; margin: 0 auto;
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
font-size: 14; font-size: 2.3vh;
height: 130px; height: 130px;
.back_botton { .back_botton {
float: left; float: left;
background: #63B8FF; background: #63B8FF;
color: white; color: white;
display: inline-block; display: inline-block;
vertical-align: center; vertical-align: center;
padding-top: 20px; padding-top: 10px;
} }
} }
...@@ -47,10 +45,10 @@ ...@@ -47,10 +45,10 @@
box-shadow: 1px 1px 12px #63B8FF; box-shadow: 1px 1px 12px #63B8FF;
border-radius:10px border-radius:10px
position: absolute; position: absolute;
top: 100px; top: 12.5vh;
background :white background :white
width:85% width:90%
margin-left:7.5% margin-left:5%
.detail_header { .detail_header {
align: center; align: center;
display: inline-block; display: inline-block;
...@@ -60,7 +58,7 @@ ...@@ -60,7 +58,7 @@
margin-bottom:0 margin-bottom:0
align: center; align: center;
display: inline-block; display: inline-block;
font-size:16px font-size:2.7vh;
} }
} }
.detail_text{ .detail_text{
...@@ -70,7 +68,7 @@ ...@@ -70,7 +68,7 @@
padding-bottom:0 padding-bottom:0
padding-top:0 padding-top:0
margin-left:15px margin-left:15px
font-size:14px font-size:2.5vh;
} }
} }
} }
......
src/components/homepage/homepage_agreement.vue deleted 100644 → 0
View file @ c4c834b7
<template>
<div class="one_agreement">
<div>编辑合同qaq</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="stylus" scoped>
</style>
src/components/homepage_header.vue
View file @ 4c379c9c
...@@ -10,12 +10,12 @@ export default { ...@@ -10,12 +10,12 @@ export default {
} }
</script> </script>
<<style lang="stylus" scoped> <style lang="stylus" scoped>
.header .header
background: #63B8FF background: #63B8FF
color:white color:white
margin: 0 auto margin: 0 auto
padding-top: 15px height:6vh;
padding-bottom: 15px padding-top: 2vh;
font-size:14 font-size:2.8vh
</style> </style>
src/components/homepage_icons.vue
View file @ 4c379c9c
...@@ -66,10 +66,8 @@ export default { ...@@ -66,10 +66,8 @@ export default {
border-radius:10px; border-radius:10px;
background: blue background: blue
width: 85%; width: 85%;
height: 0; height: 80vh;
padding-bottom: 140%; margin-left: 7.5%;
margin-left: 8%;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
.icon { .icon {
...@@ -77,10 +75,8 @@ export default { ...@@ -77,10 +75,8 @@ export default {
overflow: hidden; overflow: hidden;
width: 50%; width: 50%;
float: left; float: left;
height: 0;
background: white; background: white;
padding-bottom: 41.2%; height:20vh;
.icon-img { .icon-img {
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -98,12 +94,13 @@ export default { ...@@ -98,12 +94,13 @@ export default {
} }
.icon-desc { .icon-desc {
font-size: 12px; font-size: 2vh;
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
height: 0.44rem; height: 0.44rem;
bottom: 0; bottom: 0;
top:15vh;
line-height: 0.44rem; line-height: 0.44rem;
color: #333; color: #333;
text-align: center; text-align: center;
......
src/components/mine_changeperson.vue
View file @ 4c379c9c
...@@ -97,7 +97,6 @@ export default { ...@@ -97,7 +97,6 @@ export default {
float:right float:right
position:absolute position:absolute
top:110px top:110px
} }
.name{ .name{
color:#63B8FF color:#63B8FF
...@@ -122,5 +121,3 @@ export default { ...@@ -122,5 +121,3 @@ export default {
} }
</style> </style>
src/components/public_footerbar.vue
View file @ 4c379c9c
...@@ -17,7 +17,10 @@ ...@@ -17,7 +17,10 @@
</mt-tabbar> </mt-tabbar>
</div> </div>
</template> </template>
<style> <style lang="stylus" scoped>
.border-1px-top{
height:10vh;
}
</style> </style>
<script> <script>
export default { export default {
......
src/pages/mine.vue
View file @ 4c379c9c
<template> <template>
<div class='mine'> <div class='mine'>
<mine-person></mine-person> <mine-header></mine-header>
<mine-icons></mine-icons> <mine-icons></mine-icons>
</div> </div>
</template> </template>
<script> <script>
import MineHeader from '../components/mine_header' import MineHeader from '../components/mine_header'
import MinePerson from '../components/mine_person'
import MineIcons from '../components/mine_icons' import MineIcons from '../components/mine_icons'
export default { export default {
name: 'App', name: 'App',
components:{ components:{
MineHeader, MineHeader,
MinePerson,
MineIcons, MineIcons,
}, },
} }
......
src/router/index.js
View file @ 4c379c9c
...@@ -2,8 +2,7 @@ import Vue from 'vue' ...@@ -2,8 +2,7 @@ import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import Homepage from '@/pages/homepage.vue' import Homepage from '@/pages/homepage.vue'
import Agreement from '@/pages/agreement.vue' import Agreement from '@/pages/agreement.vue'
import AgreementDetail from "@/components/agreement/agreement_detail.vue" import AgreementDetail from "@/components/agreement_detail.vue"
import AgreementShowmore from "@/components/agreement/agreement_showmore.vue"
import Contact from '@/pages/contact.vue' import Contact from '@/pages/contact.vue'
import ContactDetail from '@/components/contact_detail.vue' import ContactDetail from '@/components/contact_detail.vue'
import Mine from '@/pages/mine.vue' import Mine from '@/pages/mine.vue'
...@@ -22,13 +21,6 @@ export default new Router({ ...@@ -22,13 +21,6 @@ export default new Router({
path: '/agreement', path: '/agreement',
component: Agreement, component: Agreement,
meta: { navShow: true,index:20}, meta: { navShow: true,index:20},
children:[
{
path:":oo",
component:AgreementShowmore,
meta: { navShow: true},
}
]
}, },
{ {
path: '/contact', path: '/contact',
...@@ -50,7 +42,7 @@ export default new Router({ ...@@ -50,7 +42,7 @@ export default new Router({
{ {
path:":change_person", path:":change_person",
component:MineChangeperson, component:MineChangeperson,
meta: { navShow: false}, meta: { navShow: true},
} }
] ]
}, },
......
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