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 # 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 - Mint-ui
- 下载 - 下载
- npm i mint-ui -S - npm i mint-ui -S
...@@ -44,19 +55,5 @@ ...@@ -44,19 +55,5 @@
<img src="./src/assets/预览图/4.png" width="40%"> <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 @@ ...@@ -3311,6 +3311,12 @@
"estraverse": "^4.1.1" "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": { "esrecurse": {
"version": "4.2.1", "version": "4.2.1",
"resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz", "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz",
...@@ -5250,10 +5256,12 @@ ...@@ -5250,10 +5256,12 @@
}, },
"js-yaml": { "js-yaml": {
"version": "3.7.0", "version": "3.7.0",
"resolved": "", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz",
"integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=",
"dev": true, "dev": true,
"requires": { "requires": {
"argparse": "^1.0.7" "argparse": "^1.0.7",
"esprima": "^2.6.0"
} }
}, },
"jsesc": { "jsesc": {
...@@ -7868,9 +7876,9 @@ ...@@ -7868,9 +7876,9 @@
"dev": true "dev": true
}, },
"simple-footerbar": { "simple-footerbar": {
"version": "1.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/simple-footerbar/-/simple-footerbar-1.0.3.tgz", "resolved": "https://registry.npmjs.org/simple-footerbar/-/simple-footerbar-2.0.3.tgz",
"integrity": "sha512-2OdrCkHgl9rw/X6sTW+CuKnF1F0Yz0u4eVYvG1GOuzyJF47ZQWP6SsNq/fCkO9X6scf9LHHiy6W+Duk1SJDmPQ==", "integrity": "sha512-uc0IZ0IHS+dnRNEFxpbtv6LIdiT1IVM0YcVf+ewv4QVvfAa5xdc/k693LnHX3KdAu6RxDtm8Afr38GeXqwLXAQ==",
"requires": { "requires": {
"vue": "^2.5.11" "vue": "^2.5.11"
} }
......
package.json
View file @ dd125de5
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
"dependencies": { "dependencies": {
"element-ui": "^2.12.0", "element-ui": "^2.12.0",
"mint-ui": "^2.2.13", "mint-ui": "^2.2.13",
"simple-footerbar": "^1.0.3", "simple-footerbar": "^2.0.3",
"stylus": "^0.54.7", "stylus": "^0.54.7",
"stylus-loader": "^3.0.2", "stylus-loader": "^3.0.2",
"vue": "^2.5.2", "vue": "^2.5.2",
......
src/components/Agreement_Person.vue
View file @ dd125de5
...@@ -90,7 +90,7 @@ export default { ...@@ -90,7 +90,7 @@ export default {
text-align:left text-align:left
margin-top:10px margin-top:10px
padding:10px padding:10px
padding-bottom:0 padding-bottom:10px
.detail,.text_more .detail,.text_more
.more .more
text-align:center 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> <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" @click="select_change(0)" id="all">全部</div> <div class="tabber_detail" @click="select_change(0)" id="all">全部</div>
<div class="tabber_detail" @click="select_change(1)" id="wait_for_signed">待签署</div> <div class="tabber_detail" @click="select_change(1)" id="wait_for_signed">待签署</div>
......
src/components/agreement_detail.vue
View file @ dd125de5
<template> <template>
<div class="agreement_detail"> <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> <mt-button class="back_botton" icon="back" @click="$router.back(-1)"></mt-button>
<div class="header">合同详情qwqqqq</div> <div class="header">合同详情qwqqqq</div>
</div> </div>
-->
<div class="detail"> <div class="detail">
<div class="detail_header"> <div class="detail_header">
<p class="aaa">全日制劳动合同<br>时间 日期</p> <p class="aaa">全日制劳动合同<br>时间 日期</p>
...@@ -26,10 +33,6 @@ ...@@ -26,10 +33,6 @@
.header { .header {
background: #63B8FF; background: #63B8FF;
color: white; color: white;
margin: 0 auto;
padding-top: 15px;
padding-bottom: 15px;
font-size: 2.3vh;
height: 130px; height: 130px;
.back_botton { .back_botton {
float: left; float: left;
......
src/components/footerbar.vue
View file @ dd125de5
<template> <template>
<div class='footerbar'> <div class='footerbar'>
<footer-bar <rye-footerbar
:items='itemsssss' :items='itemsssss'
:showIcons='showIcons' :showIcons='showIcons'
:selected_id='selected_id' :selected_id='selected_id'
@change="changeeee" @change="changeeee"
> >
</footer-bar> </rye-footerbar>
</div> </div>
</template> </template>
<script> <script>
import FooterBar from 'simple-footerbar' //import RyeFooterbar from 'simple-footerbar'
export default { export default {
name: 'App', name: 'App',
components:{ components:{
FooterBar, // RyeFooterbar,
}, },
data(){ data(){
return{ 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' ...@@ -6,11 +6,13 @@ import router from './router'
import Mint from 'mint-ui' import Mint from 'mint-ui'
import 'mint-ui/lib/style.css' import 'mint-ui/lib/style.css'
import ElementUI from 'element-ui'; import ElementUI from 'element-ui';
import SimpleFooterbar from 'simple-footerbar'
//import 'element-ui/lib/theme-chalk/index.css'; //import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false Vue.config.productionTip = false
/* eslint-disable no-new */ /* eslint-disable no-new */
//Vue.use(Mint); //Vue.use(Mint);
Vue.use(SimpleFooterbar);
Vue.use(ElementUI); Vue.use(ElementUI);
new Vue({ new Vue({
el: '#app', el: '#app',
......
src/pages/agreement.vue
View file @ dd125de5
<template> <template>
<div class='agreement'> <div class='agreement'>
<ag-header></ag-header> <rye-header id="header">
合同管理
</rye-header>
<ag-choose></ag-choose>
<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 AgChoose from '../components/agreement_choose'
import AgPerson from '../components/agreement_person' import AgPerson from '../components/agreement_person'
export default { export default {
name: 'App', name: 'App',
components:{ components:{
AgHeader, AgChoose,
AgPerson, AgPerson,
}, },
} }
...@@ -21,7 +25,8 @@ export default { ...@@ -21,7 +25,8 @@ export default {
.agreement .agreement
background: #63B8FF background: #63B8FF
height:130px height:130px
.tabber .header
font-size:13px
color:white color:white
background: #63B8FF
height: 7.5vh;
</style> </style>
\ No newline at end of file
src/pages/contact.vue
View file @ dd125de5
<template> <template>
<div id="mask"> <div id="mask">
<div class='contact'> <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> <contact-person class="header_person" ></contact-person>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
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:{
ContactHeader, ContactPerson,
ContactPerson,
}, },
} }
</script> </script>
...@@ -24,8 +25,9 @@ export default { ...@@ -24,8 +25,9 @@ export default {
height:130px height:130px
font-size:14px font-size:14px
color:white color:white
.header_lianxiren .header
font-size:20px background: #63B8FF
height 8vh;
.header_person .header_person
color:black color:black
</style> </style>
src/pages/homepage.vue
View file @ dd125de5
<template> <template>
<div class="main"> <div class="main">
<homepage-header ></homepage-header> <!--<homepage-header ></homepage-header>-->
<rye-header id="header">
区块链合同
</rye-header>
<homepage-icons></homepage-icons> <homepage-icons></homepage-icons>
</div> </div>
</template> </template>
<script> <script>
import HomepageHeader from '../components/homepage_header'
import HomepageIcons from '../components/homepage_icons' import HomepageIcons from '../components/homepage_icons'
export default { export default {
name: 'App', name: 'App',
...@@ -16,7 +18,6 @@ export default { ...@@ -16,7 +18,6 @@ export default {
} }
}, },
components:{ components:{
HomepageHeader,
HomepageIcons, HomepageIcons,
}, },
methods:{ methods:{
...@@ -33,7 +34,6 @@ export default { ...@@ -33,7 +34,6 @@ export default {
.body,.html{ .body,.html{
height: 100%; height: 100%;
} }
</style> </style>
<style lang="stylus" scoped> <style lang="stylus" scoped>
...@@ -45,4 +45,8 @@ export default { ...@@ -45,4 +45,8 @@ export default {
height: 100%; height: 100%;
#for_height #for_height
height: 100%; height: 100%;
#header
background:#63B8FF;
height:8vh;
color:white;
</style> </style>
src/pages/mine.vue
View file @ dd125de5
<template> <template>
<div class='mine'> <div class='mine'>
<mine-header></mine-header> <mine-personal></mine-personal>
<mine-icons></mine-icons> <mine-icons></mine-icons>
</div> </div>
</template> </template>
<script> <script>
import MineHeader from '../components/mine_header' import MinePersonal from '../components/mine_personal'
import MineIcons from '../components/mine_icons' import MineIcons from '../components/mine_icons'
export default { export default {
name: 'App', name: 'App',
components:{ components:{
MineHeader, MinePersonal,
MineIcons, 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