Skip to content

M
mes-ui
Commit 73641eca authored by 骆瑛's avatar 骆瑛
Browse files
Options

修改右侧操作按钮及样式

parent b0f92a69
Hide whitespace changes
Inline Side-by-side
Showing with 129 additions and 72 deletions
assets/css/custom.less
View file @ 73641eca
//定义变量
// @import './themes/deepBlank.less';
@import './themes/green.less';
// @import './themes/default.less';
// @import './themes/green.less';
@import './themes/default.less';
assets/css/iview-reset.less
View file @ 73641eca
......@@ -421,7 +421,13 @@
}
//左侧搜索框
.search{
.ivu-input{
border-radius: 4px;
border: 1px solid #182C51 ;
}
.ivu-input-icon{
height: 36px;
line-height: 36px;
background: @search-icon !important;
color: @font_search !important;
border-radius: 0px 4px 4px 0px;
......
assets/css/themes/deepBlank.less
View file @ 73641eca
......@@ -97,6 +97,7 @@
@padding_input_border:#222341;
@search_icon_bg: #106FFE;
@table_checkbox_bg: #106FFE;
@table_checkbox_bd:#FFFFFF;
@table_checkbox_bd_header:#FFFFFF;
@table_line_shadow:none;
......@@ -120,6 +121,7 @@
@table-body-bg:#2F2F57;
@table-body-bd:transparent;
@table_check_bd:1px solid #ffffff;
@table_check_body_bd:1px solid #ffffff;
@table-body-bg_even:rgba(34, 35, 65, 0.41);
@table-body-bd_odd:transparent;
@checkbox-inner:transparent;
......@@ -138,7 +140,10 @@
@table_line:#106FFE;//不能改变高显行
@table-bottom_line:transparent;
@table-bottom-border:#ffffff;
// @border-right_line:transparent;
@action-buttons_col:#106FFE;
@add_col:#ffffff;
@buttons_bg:rgba(47, 47, 87, 0.6);
@add_border-right:rgba(255, 255, 255, 0.06);
//工单列表等背景色
@part_body_backcolor:#2F2F57;
//表格页面背景色处理
......
assets/css/themes/default.less
View file @ 73641eca
......@@ -121,6 +121,7 @@
@table-body-bg: #fff;
@table-body-bd:none;
@table_check_bd:transparent;
@table_check_body_bd:1px solid #e8eaec;
@table-body-bg_even:#f8f8f9;
@table-body-bd_odd: 1px solid #e8eaec;
@checkbox-inner:transparent;
......@@ -139,7 +140,10 @@
@table_line:#ebf7ff;
@table-bottom_line:#dcdee2;
@table-bottom-border:#ffffff;
// @border-right_line:#dcdee2;
@action-buttons_col:#515a6e;
@buttons_bg:rgba(186, 232, 238, 0.06);
@add_border-right:rgba(98, 97, 102, 0.06);
@add_col:#5f6470;
//工单列表等背景色
@part_body_backcolor:#ffffff;
//表格页面背景色处理
......
assets/css/themes/green.less
View file @ 73641eca
......@@ -60,7 +60,7 @@
@form-footer-color: #fff;
@form-divider-boder-color: #e8eaec;
@input-bg-color: #fff;
@input-boder-color: #182C51;;
@input-boder-color: rgba(24, 44, 81, 0.1);
......@@ -120,6 +120,7 @@
@table-header-color:#ffffff;
@table-body-bg: #fff;
@table_check_bd:1px solid #ffffff;
@table_check_body_bd:1px solid #253D6D;
@table-body-bd:transparent;
@table-body-bg_even:rgba(4, 187, 140, 0.06);
@table-body-bd_odd:transparent;
......@@ -137,10 +138,12 @@
@part_top_border:1px solid #ffffff;
@table_border-bg:transparent;
@table_line: #ffffff;
@buttons_bg:rgba(255, 255, 255, 0.6);
@table-bottom_line:transparent;
@table-bottom-border:#ffffff;
// @border-right_line:transparent;
@action-buttons_col:#04BB8C;
@add_border-right:rgba(24, 44, 81, 0.2);
@add_col:#253D6D;
//工单列表等背景色
@part_body_backcolor:#ffffff;
//表格页面背景色处理
......
pages/technology/index.vue
View file @ 73641eca
......@@ -32,8 +32,7 @@
</a>
</div>
<Content class="con" :class="!showMenu?'con_bord':''">
<theme ></theme>
<!-- <DataGrid :columns="columns" ref="grid" :action="action" exportTitle="工艺规程" >
<DataGrid :columns="columns" ref="grid" :action="action" exportTitle="工艺规程" >
<template slot="easySearch">
<Form ref="formInline" :model="easySearch" inline>
<FormItem prop="keys">
......@@ -61,7 +60,7 @@
</Dropdown>
<Button @click="openModalIm" icon="icon iconfont icondaoru" class="search_text" type="text">导入</Button>
</template>
</DataGrid> -->
</DataGrid>
<Modal v-model="modal" :title="title" width="1120" footer-hide>
<component :is="detail" :eid="curId" :uid="uId" :title="title" :headid="hid" @on-close="cancel" @on-ok="ok" />
</Modal>
......@@ -124,7 +123,6 @@ export default {
sendAudit,
routingchangeorder,
changelist,
theme
},
head: {
title: "工艺规程",
......@@ -133,14 +131,6 @@ export default {
},
data() {
return {
formInline:{
value:''
},
ruleValidate: {
value: [
{ required: true, message: '输入不能为空', trigger: 'blur' }
],
},
showMenu: true,
treeHeight: "",
action: Api.index,
......
pages/theme/index.vue
View file @ 73641eca
......@@ -43,23 +43,33 @@
</Row>
<Row>
<Col span="24" class="table_style">
<Table
:border="false"
stripe
:columns="columns1"
:data="data1"
context-menu
show-context-menu
@on-contextmenu="handleContextMenu"
></Table>
<template slot="contextMenu">
<DropdownItem
@click.native="handleContextMenuEdit"
style="backgorund: red"
>编辑</DropdownItem
<Table :border="false" stripe :columns="columns1" :data="data1">
<template
slot="action"
slot-scope="{ row, index }"
style="width: 100%; height: 100%"
>
<DropdownItem style="color: #ed4014">删除</DropdownItem>
</template>
<a href="" class="action-buttons"
>• • •
<div class="buttons">
<a class="add mr20">
<Icon type="icon iconfont icongongdan-gongyichakan" />
查看</a>
<a class="add mr20">
<Icon type="icon iconfont iconbianji" />
编辑</a>
<a class="add mr20">
<Icon type="icon iconfont iconshanchu" />
删除</a
>
<!-- <a class="add mr20">
<Icon type="icon iconfont iconshanchu" />
分解</a
> -->
</div>
</a>
</template>
</Table>
</Col>
</Row>
<Row>
......@@ -206,26 +216,7 @@ export default {
key: "action",
minWidth: 100,
align: "center",
render: (h, params) => {
return h("div", [
h(
"div",
{
style: {
marginRight: "5px",
color: " #106FFE",
fontSize: "18px",
},
on: {
click: () => {
this.show(params.index);
},
},
},
"• • •"
),
]);
},
slot: "action",
},
],
data1: [
......@@ -290,16 +281,7 @@ export default {
};
},
props: [],
methods: {
handleContextMenu(row) {
const index = this.data1.findIndex((item) => item.name === row.name);
console.log(index);
this.contextLine = index + 1;
},
handleContextMenuEdit() {
this.$Message.info("Click edit of line" + this.contextLine);
},
},
methods: {},
};
</script>
<style lang="less" >
......@@ -317,9 +299,10 @@ export default {
line-height: 36px;
height: 36px;
border-radius: 4px 0px 0px 4px;
border: 1px solid @padding_input_border;
border: 1px solid @padding_input_border !important;
}
.search_icon { //修改的搜索框样式
.search_icon {
//修改的搜索框样式
width: 36px;
height: 34px;
background: @search_icon_bg;
......@@ -356,7 +339,11 @@ export default {
.ivu-icon {
color: @search_text_span !important;
}
.ivu-dropdown-rel .zhanshi {
font-size: 22px;
}
.ivu-select-dropdown {
background-color: #222341 !important;
.ivu-dropdown-item {
color: #ffffff !important;
......@@ -392,7 +379,8 @@ export default {
color: @table-color !important;
font-weight: 400;
font-size: 14px;
th,td {
th,
td {
//表格内checkbox
.ivu-checkbox-inner {
background: @checkbox-inner;
......@@ -404,6 +392,38 @@ export default {
border: @table_check_bd;
background: @table_checkbox_bg !important;
}
.ivu-table-cell {
overflow: visible;
.action-buttons {
color: @action-buttons_col;
position: relative;
height: 60px;
.buttons {
position: absolute;
display: none;
right: -58px;
top: -22px;
width: -webkit-max-content; // 兼容
width: -moz-max-content; // 兼容
width: max-content;
height: 60px;
background:@buttons_bg ;
z-index: 9;
.add {
font-weight: bold;
line-height:60px;
color:@add_col ;
font-size: 16px;
height: 18px;
padding:0 17px;
border-right: 1px solid @add_border-right;
}
}
}
.action-buttons:hover .buttons {
display: block;
}
}
}
.ivu-table-header {
border: 1px solid @table-header-bg;
......@@ -435,13 +455,15 @@ export default {
border-right: 1px solid @table-tr-bd;
border-left: 1px solid @table-tr-bd;
border-bottom: 1px solid @table-body-bg;
//选中状态
.ivu-checkbox-checked .ivu-checkbox-inner {
border: @table_check_body_bd;
}
span {
color: @table_body_allcol;
}
.ivu-table-cell {
span {
color: @table_body_allcol;
}
.ivu-table-cell span {
color: @table_body_allcol;
}
}
}
......
pages/theme/test.vue 0 → 100644
View file @ 73641eca
<template>
<div>
<h2>hello,routers!</h2>
<nuxt-link to="/theme/test/ok">ok</nuxt-link>
<nuxt-link to="/theme/test">index</nuxt-link>
<hr/>
<nuxt-child keep-alive></nuxt-child>
</div>
</template>
<script>
export default {
layout: "empty",
}
</script>
\ No newline at end of file
pages/theme/test/index.vue 0 → 100644
View file @ 73641eca
<template>
<h2>33333-----hello,routers!</h2>
</template>
\ No newline at end of file
pages/theme/test/ok.vue 0 → 100644
View file @ 73641eca
<template>
<div>
<h2>Ok,luoying!</h2>
</div>
</template>
<script>
export default {
layout: "empty",
}
</script>
\ No newline at end of file
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