Skip to content

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

顶部栏header使用封装过的组件

parent fda4f6be
Hide whitespace changes
Inline Side-by-side
Showing with 73 additions and 102 deletions
README.md
View file @ dd125de5
# vue-chain
## 更新日志
## 项目名字
2019.11.18 替换了大部分的header,使用了自己的封装组件库
2019.11.14 自己封装了组件替换了footerbar顶部栏
## 使用的外部库
中间这段时间学了一下 vuex/组件 什么的
2019.11.4 响应式适配 增加展开按钮等
2019.11.1 增加了部分二级界面 简单动画效果
2019.10.30 完成了简单的一级界面
2019.10.24 项目创建
## 使用的外部库
- Mint-ui
- 下载
- npm i mint-ui -S
......@@ -44,19 +55,5 @@
<img src="./src/assets/预览图/4.png" width="40%">
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
```
package-lock.json
View file @ dd125de5
......@@ -3311,6 +3311,12 @@
"estraverse": "^4.1.1"
}
},
"esprima": {
"version": "2.7.3",
"resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz",
"integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=",
"dev": true
},
"esrecurse": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz",
......@@ -5250,10 +5256,12 @@
},
"js-yaml": {
"version": "3.7.0",
"resolved": "",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz",
"integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=",
"dev": true,
"requires": {
"argparse": "^1.0.7"
"argparse": "^1.0.7",
"esprima": "^2.6.0"
}
},
"jsesc": {
......@@ -7868,9 +7876,9 @@
"dev": true
},
"simple-footerbar": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/simple-footerbar/-/simple-footerbar-1.0.3.tgz",
"integrity": "sha512-2OdrCkHgl9rw/X6sTW+CuKnF1F0Yz0u4eVYvG1GOuzyJF47ZQWP6SsNq/fCkO9X6scf9LHHiy6W+Duk1SJDmPQ==",
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/simple-footerbar/-/simple-footerbar-2.0.3.tgz",
"integrity": "sha512-uc0IZ0IHS+dnRNEFxpbtv6LIdiT1IVM0YcVf+ewv4QVvfAa5xdc/k693LnHX3KdAu6RxDtm8Afr38GeXqwLXAQ==",
"requires": {
"vue": "^2.5.11"
}
......
package.json
View file @ dd125de5
......@@ -12,7 +12,7 @@
"dependencies": {
"element-ui": "^2.12.0",
"mint-ui": "^2.2.13",
"simple-footerbar": "^1.0.3",
"simple-footerbar": "^2.0.3",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"vue": "^2.5.2",
......
src/components/Agreement_Person.vue
View file @ dd125de5
......@@ -90,7 +90,7 @@ export default {
text-align:left
margin-top:10px
padding:10px
padding-bottom:0
padding-bottom:10px
.detail,.text_more
.more
text-align:center
......
src/components/Contact_Header.vue deleted 100644 → 0
View file @ fda4f6be
<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/Agreement_Header.vue → src/components/agreement_choose.vue
View file @ dd125de5
<template>
<div class='header'>
<div class="header_center">合同管理</div>
<!--<div class="header_center">合同管理</div>-->
<div class="tabber">
<div class="tabber_detail" @click="select_change(0)" id="all">全部</div>
<div class="tabber_detail" @click="select_change(1)" id="wait_for_signed">待签署</div>
......
src/components/agreement_detail.vue
View file @ dd125de5
<template>
<div class="agreement_detail">
<div class="header">
<rye-header class=header>
<span slot='left'><img src="../assets/返回.png" @click="$router.back(-1)" /></span>
合同详情
</rye-header>
<!--<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>
......@@ -26,10 +33,6 @@
.header {
background: #63B8FF;
color: white;
margin: 0 auto;
padding-top: 15px;
padding-bottom: 15px;
font-size: 2.3vh;
height: 130px;
.back_botton {
float: left;
......
src/components/footerbar.vue
View file @ dd125de5
<template>
<div class='footerbar'>
<footer-bar
<rye-footerbar
:items='itemsssss'
:showIcons='showIcons'
:selected_id='selected_id'
@change="changeeee"
>
</footer-bar>
</rye-footerbar>
</div>
</template>
<script>
import FooterBar from 'simple-footerbar'
//import RyeFooterbar from 'simple-footerbar'
export default {
name: 'App',
components:{
FooterBar,
// RyeFooterbar,
},
data(){
return{
......
src/components/homepage_header.vue deleted 100644 → 0
View file @ fda4f6be
<template>
<div class='header'>
区块链合同
</div>
</template>
<script>
export default {
name: 'HomeHeader',
}
</script>
<style lang="stylus" scoped>
.header
background: #63B8FF
color:white
margin: 0 auto
height:6vh;
padding-top: 2vh;
font-size:2.8vh
</style>
src/main.js
View file @ dd125de5
......@@ -6,11 +6,13 @@ import router from './router'
import Mint from 'mint-ui'
import 'mint-ui/lib/style.css'
import ElementUI from 'element-ui';
import SimpleFooterbar from 'simple-footerbar'
//import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
/* eslint-disable no-new */
//Vue.use(Mint);
Vue.use(SimpleFooterbar);
Vue.use(ElementUI);
new Vue({
el: '#app',
......
src/pages/agreement.vue
View file @ dd125de5
<template>
<div class='agreement'>
<ag-header></ag-header>
<rye-header id="header">
合同管理
</rye-header>
<ag-choose></ag-choose>
<ag-person></ag-person>
<p></p>
</div>
</template>
<script>
import AgHeader from '../components/agreement_header'
import AgChoose from '../components/agreement_choose'
import AgPerson from '../components/agreement_person'
export default {
name: 'App',
components:{
AgHeader,
AgChoose,
AgPerson,
},
}
......@@ -21,7 +25,8 @@ export default {
.agreement
background: #63B8FF
height:130px
.tabber
font-size:13px
.header
color:white
background: #63B8FF
height: 7.5vh;
</style>
\ No newline at end of file
src/pages/contact.vue
View file @ dd125de5
<template>
<div id="mask">
<div class='contact'>
<contact-header class="header_lianxiren"></contact-header>
<rye-header id="header">
联系人
<span slot='right'><img src="../assets/添加联系人.png" /></span>
</rye-header>
<contact-person class="header_person" ></contact-person>
</div>
</div>
</template>
<script>
import ContactHeader from '../components/contact_header'
import ContactPerson from '../components/contact_person'
export default {
name: 'App',
components:{
ContactHeader,
ContactPerson,
ContactPerson,
},
}
</script>
......@@ -24,8 +25,9 @@ export default {
height:130px
font-size:14px
color:white
.header_lianxiren
font-size:20px
.header
background: #63B8FF
height 8vh;
.header_person
color:black
</style>
src/pages/homepage.vue
View file @ dd125de5
<template>
<div class="main">
<homepage-header ></homepage-header>
<!--<homepage-header ></homepage-header>-->
<rye-header id="header">
区块链合同
</rye-header>
<homepage-icons></homepage-icons>
</div>
</template>
<script>
import HomepageHeader from '../components/homepage_header'
import HomepageIcons from '../components/homepage_icons'
export default {
name: 'App',
......@@ -16,7 +18,6 @@ export default {
}
},
components:{
HomepageHeader,
HomepageIcons,
},
methods:{
......@@ -33,7 +34,6 @@ export default {
.body,.html{
height: 100%;
}
</style>
<style lang="stylus" scoped>
......@@ -45,4 +45,8 @@ export default {
height: 100%;
#for_height
height: 100%;
#header
background:#63B8FF;
height:8vh;
color:white;
</style>
src/pages/mine.vue
View file @ dd125de5
<template>
<div class='mine'>
<mine-header></mine-header>
<mine-personal></mine-personal>
<mine-icons></mine-icons>
</div>
</template>
<script>
import MineHeader from '../components/mine_header'
import MinePersonal from '../components/mine_personal'
import MineIcons from '../components/mine_icons'
export default {
name: 'App',
components:{
MineHeader,
MinePersonal,
MineIcons,
},
}
......
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