Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
a4842210 by 任超
Options

style：btn组件完成

1 parent 063b2912
Inline Side-by-side
Showing 9 changed files with 40 additions and 11 deletions
1 import dialogBox from '@/components/DialogBox/dialogBox.vue' 1 import dialogBox from '@/components/DialogBox/dialogBox.vue'
2 import LbTable from '@/components/LbTable/lb-table.vue' 2 import LbTable from '@/components/LbTable/lb-table.vue'
3 import Theme from '@/components/Theme/theme.vue' 3 import Theme from '@/components/Theme/theme.vue'
4 // 引入按钮
5 import btn from '@/components/Button/src/button'
4 import Popup from '@/components/Popup/index' 6 import Popup from '@/components/Popup/index'
5 import MessageBox from '@/components/MessageBox/index.js' 7 import MessageBox from '@/components/MessageBox/index.js'
6 export default { 8 export default {
7 install: (Vue) => { 9 install: (Vue) => {
8 Vue.component('dialogBox', dialogBox); 10 Vue.component('dialogBox', dialogBox);
11 Vue.component('btn', btn);
9 Vue.component('lbTable', LbTable); 12 Vue.component('lbTable', LbTable);
10 Vue.component('Theme', Theme); 13 Vue.component('Theme', Theme);
11 Vue.prototype.$popup = Popup.install; 14 Vue.prototype.$popup = Popup.install;
......
1 <template> 1 <template>
2 <button class="el-button" :class="nativeType" @click="handleClick" :type="nativeType"> 2 <button class="button" :class="nativeType" @click="handleClick" :type="nativeType">
3 <slot></slot> 3 <slot></slot>
4 </button> 4 </button>
5 </template> 5 </template>
...@@ -20,5 +20,22 @@ export default { ...@@ -20,5 +20,22 @@ export default {
20 }; 20 };
21 </script> 21 </script>
22 <style scoped lang="scss"> 22 <style scoped lang="scss">
23 .button {
24 width: 77px;
25 height: 32px;
26 color: #ffffff;
27 margin: 0 5px;
28 }
23 29
30 .cx {
31 background: url('../../../image/btn.png') no-repeat -4px -40px;
32 }
33
34 .cz {
35 background: url('../../../image/btn.png') no-repeat -4px -4px;
36 }
37
38 .sb {
39 background: url('../../../image/btn.png') no-repeat -4px -112px;
40 }
24 </style> 41 </style>
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
5 <Breadcrumb /> 5 <Breadcrumb />
6 </div> 6 </div>
7 <div class="right-menu"> 7 <div class="right-menu">
8 <div class="dataView pointer" @click="handleDataView">大屏展示</div> 8 <div class="dataView d-center pointer" @click="handleDataView">大屏展示</div>
9 <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand"> 9 <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand">
10 <div class="avatar-wrapper"> 10 <div class="avatar-wrapper">
11 <span style="padding-right:10px">{{ name }}</span> 11 <span style="padding-right:10px">{{ name }}</span>
...@@ -66,6 +66,11 @@ export default { ...@@ -66,6 +66,11 @@ export default {
66 66
67 .dataView { 67 .dataView {
68 color: #fff; 68 color: #fff;
69 width: 120px;
70 height: 32px;
71 background: url('../../image/dp.png');
72 background-size: cover;
73 margin-right: 20px;
69 } 74 }
70 75
71 .NoticeBar { 76 .NoticeBar {
......
...@@ -159,7 +159,11 @@ div:focus { ...@@ -159,7 +159,11 @@ div:focus {
159 display: flex; 159 display: flex;
160 align-items: center; 160 align-items: center;
161 } 161 }
162 162 .d-center {
163 display: flex;
164 align-items: center;
165 justify-content: center;
166 }
163 .bg-color-blue { 167 .bg-color-blue {
164 background-color: #1a5cd7; 168 background-color: #1a5cd7;
165 } 169 }
......
...@@ -27,8 +27,8 @@ ...@@ -27,8 +27,8 @@
27 </el-col> 27 </el-col>
28 <!-- 操作按钮 --> 28 <!-- 操作按钮 -->
29 <el-col :span="6" class="btnColRight"> 29 <el-col :span="6" class="btnColRight">
30 <el-button @click="resetForm('ruleForm')">重置</el-button> 30 <btn nativeType="cz" @click="resetForm('ruleForm')">重置</btn>
31 <el-button type="primary" @click="handleSubmit">查询结果</el-button> 31 <btn nativeType="cx" @click="handleSubmit">查询</btn>
32 </el-col> 32 </el-col>
33 </el-row> 33 </el-row>
34 </el-form> 34 </el-form>
......
...@@ -59,9 +59,9 @@ ...@@ -59,9 +59,9 @@
59 <!-- 按钮操作 --> 59 <!-- 按钮操作 -->
60 <el-col :span="6" class="btnColRight"> 60 <el-col :span="6" class="btnColRight">
61 <el-form-item> 61 <el-form-item>
62 <el-button @click="resetForm('ruleForm')">重置</el-button> 62 <btn nativeType="cz" @click="resetForm('ruleForm')">重置</btn>
63 <el-button type="primary" @click="handleSubmit">查询</el-button> 63 <btn nativeType="cx" click="handleSubmit">查询</btn>
64 <el-button type="primary">入库</el-button> 64 <btn nativeType="sb">入库</btn>
65 </el-form-item> 65 </el-form-item>
66 </el-col> 66 </el-col>
67 </el-row> 67 </el-row>
......
...@@ -50,9 +50,9 @@ ...@@ -50,9 +50,9 @@
50 </el-col> 50 </el-col>
51 <!-- 操作按钮 --> 51 <!-- 操作按钮 -->
52 <el-col :span="12" class="btnColRight"> 52 <el-col :span="12" class="btnColRight">
53 <el-button @click="resetForm('ruleForm')">重置</el-button> 53 <btn nativeType="cz" @click="resetForm('ruleForm')">重置</btn>
54 <el-button type="primary" @click="featchData">查询结果</el-button> 54 <btn nativeType="cx" @click="featchData">查询</btn>
55 <el-button type="primary" @click="handleEscalation">上报</el-button> 55 <btn nativeType="sb" @click="handleEscalation">上报</btn>
56 </el-col> 56 </el-col>
57 </el-row> 57 </el-row>
58 </el-form> 58 </el-form>
......