Skip to content

M
mes-ui
Commit 65289aaa authored by 骆瑛's avatar 骆瑛
Browse files
Options

修改工单样式

parent 9ab076e2
Hide whitespace changes
Inline Side-by-side
Showing with 396 additions and 6 deletions
assets/css/custom.less
View file @ 65289aaa
//定义变量
// @import './themes/deepBlank.less';
@import './themes/green.less';
@import './themes/deepBlank.less';
// @import './themes/green.less';
// @import './themes/default.less';
assets/css/iview-reset.less
View file @ 65289aaa
......@@ -244,9 +244,9 @@
text-align: right;
}
.ivu-card-head {
background: #f5f6fa;
}
// .ivu-card-head {
// background: #f5f6fa;
// }
.ivu-btn-ghost.ivu-btn-dashed,
.ivu-btn-ghost.ivu-btn-default {
......
assets/css/themes/deepBlank.less
View file @ 65289aaa
......@@ -153,3 +153,13 @@
@select_title:#ffffff;
//表格树的下拉
@treetr_icon:#ffffff;
//选择搜索框
@input-group-prepend: #2F2F57;
@look_search_input:#2F2F57;
@select-selection_bg:#222341;
//按钮组
@all_btn_col:#253d6d;
@loading_btn_col:#09D472;
@stop_btn_col:#F62B65;
@incomplete_btn_col:rgba(255, 255, 255,0.4);
@over_btn_col:#106FFE;
assets/css/themes/default.less
View file @ 65289aaa
......@@ -153,3 +153,13 @@
@select_title:#515a6e;
//表格树的下拉
@treetr_icon: #2d8cf0;
//选择搜索框
@input-group-prepend: #ffffff;
@look_search_input:#ffffff;
@select-selection_bg:#515a6e;
//按钮组
@all_btn_col: #253d6d;
@loading_btn_col:#04bb8c;
@stop_btn_col:#ff6464;
@incomplete_btn_col:#182c51;
@over_btn_col:#106ffe;
\ No newline at end of file
assets/css/themes/green.less
View file @ 65289aaa
......@@ -153,4 +153,13 @@
@select_title:#04BB8C;
//表格树的下拉
@treetr_icon: #515A6E;
//选择搜索框
@input-group-prepend: #ffffff;
@look_search_input:transparent;
@select-selection_bg:transparent;
//按钮组
@all_btn_col: #2F2F57;
@loading_btn_col:#04bb8c;
@stop_btn_col:#ff6464;
@incomplete_btn_col:#182c51;
@over_btn_col:#106ffe;
pages/theme/index.vue
View file @ 65289aaa
......@@ -307,6 +307,9 @@ export default {
border-radius: 0px 4px 4px 0px !important;
}
}
.search_icon:hover{
opacity: 0.6;
}
.search_text {
span {
font-weight: 400;
......
pages/those/index.vue 0 → 100644
View file @ 65289aaa
<template>
<div>
<Row style="margin: 30px 0 0px 60px">
<Col span="6">
<div class="look_seach">
<Form ref="formInline" :model="formInline" inline>
<FormItem prop="user">
<Input placeholder="" style="width: auto">
<Select v-model="select1" slot="prepend" style="width: 80px">
<Option value="http">http://</Option>
<Option value="https">https://</Option>
</Select>
</Input>
</FormItem>
<FormItem>
<Button
type="primary"
icon="ios-search"
class="search_icon"
></Button>
<Button type="text" class="search_text">高级搜索</Button>
</FormItem>
</Form>
</div>
</Col>
<Col span="17" offset="1" class="click_btn">
<Button type="primary" class="all_btn" @click="loading_click('0')">全部</Button>
<Button type="primary" class="loading_btn" @click="loading_click('1')">执行中</Button>
<Button type="error" class="stop_btn" @click="loading_click('2')">暂停中</Button>
<Button type="primary" class="incomplete_btn" @click="loading_click('3')">未开工</Button>
<Button type="primary" class="over_btn" @click="loading_click('4')"> 已完成</Button>
</Col>
</Row>
<Row class="card_more">
<div class="card_box" v-for="(item,i) in list" :key='i'>
<div class="heard_carl" :style="{background:item.background}"><span>{{item.name}}</span><span style="float: right;">{{item.code}} </span></div>
<div class="img_box">
<img
src="https://file.iviewui.com/iview-pro/icon-404.svg"
alt=""
/>
<p>{{item.imgname}}</p>
</div>
<div class="card_count">
<p>开始时间</p>
<p>2020-07-12 15：23：15</p>
<p>计划结束时间</p>
<p>2020-07-12 12：23：15</p>
<p>生产数量</p>
<p>47个</p>
</div>
</div>
</Col>
</Row>
</div>
</template>
<script>
export default {
data() {
return {
formInline: {
user: "",
password: "",
},
select1: "选择",
value12: "",
list: [
{
id: 1,
name: "气源分配器壳体",
code: "DDBH_20200519_1",
imgname: "图号:JPEG4620",
background: "rgba(4, 187, 140, 0.4)",
},
{
id: 1,
name: "气源分配器壳体",
code: "DDBH_20200519_1",
imgname: "图号:JPEG4620",
background: "rgba(16, 111, 254,0.4)",
},
{
id: 1,
name: "气源分配器壳体",
code: "DDBH_20200519_1",
imgname: "图号:JPEG4620",
background: "rgba(255, 100, 100, 0.4)",
},
{
id: 1,
name: "气源分配器壳体",
code: "DDBH_20200519_1",
imgname: "图号:JPEG4620",
background: "rgba(24, 44, 81,0.4)",
},
{
id: 1,
name: "气源分配器壳体",
code: "DDBH_20200519_1",
imgname: "图号:JPEG4620",
background: "rgba(4, 187, 140, 0.4)",
},
{
id: 1,
name: "气源分配器壳体",
code: "DDBH_20200519_1",
imgname: "图号:JPEG4620",
background: "rgba(4, 187, 140, 0.4)",
},
{
id: 1,
name: "气源分配器壳体",
code: "DDBH_20200519_1",
imgname: "图号:JPEG4620",
background: "rgba(4, 187, 140, 0.4)",
},
{
id: 1,
name: "气源分配器壳体",
code: "DDBH_20200519_1",
imgname: "图号:JPEG4620",
background: "rgba(16, 111, 254,0.4)",
},
{
id: 1,
name: "气源分配器壳体",
code: "DDBH_20200519_1",
imgname: "图号:JPEG4620",
background: "rgba(24, 44, 81, 0.4)",
},
{
id: 1,
name: "气源分配器壳体",
code: "DDBH_20200519_1",
imgname: "图号:JPEG4620",
background: "rgba(255, 100, 100, 0.4)",
},
{
id: 1,
name: "气源分配器壳体",
code: "DDBH_20200519_1",
imgname: "图号:JPEG4620",
background: "rgba(4, 187, 140, 0.4)",
},
{
id: 1,
name: "气源分配器壳体",
code: "DDBH_20200519_1",
imgname: "图号:JPEG4620",
background: "rgba(4, 187, 140, 0.4)",
},
{
id: 1,
name: "气源分配器壳体",
code: "DDBH_20200519_1",
imgname: "图号:JPEG4620",
background: "rgba(16, 111, 254,0.4)",
},
{
id: 1,
name: "气源分配器壳体",
code: "DDBH_20200519_1",
imgname: "图号:JPEG4620",
background: "rgba(4, 187, 140, 0.4)",
},
{
id: 1,
name: "气源分配器壳体",
code: "DDBH_20200519_1",
imgname: "图号:JPEG4620",
background: "rgba(4, 187, 140, 0.4)",
},
{
id: 1,
name: "气源分配器壳体",
code: "DDBH_20200519_1",
imgname: "图号:JPEG4620",
background: "rgba(4, 187, 140, 0.4)",
},
],
};
},
methods: {
loading_click(val) {
if (val == 1) {
//执行中
} else if (val == 2) {
//暂停中
} else if (val == 3) {
//未开工
} else if (val == 4) {
//已完成
} else {
}
},
},
};
</script>
<style lang="less" >
@import "../../assets/css/custom.less";
.look_seach {
.ivu-form-inline .ivu-input-group {
top: 0px;
}
.ivu-input {
border: 1px solid @look_search_input !important;
border-left-color: transparent !important;
border-radius: 0px;
background: @look_search_input !important;
}
.ivu-form-item .ivu-input-group-prepend {
background-color: @input-group-prepend;
border: 1px solid @look_search_input !important;
border-right-color: rgba(24, 44, 81, 0.2) !important;
border-radius: 8px 0px 0px 8px;
.ivu-select-selection {
background: @look_search_input !important;
margin: 0 1px;
border-right: 1px solid @select-selection_bg !important;
.ivu-select-placeholder {
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.2);
}
}
}
.search_icon {
//修改的搜索框样式
width: 36px;
margin-left: -8px;
height: 36px;
background: @search_icon_bg;
border: 1px solid @search_icon_bg;
box-sizing: border-box;
border-radius: 0px 4px 4px 0px !important;
.ivu-btn {
border-radius: 0px 4px 4px 0px !important;
}
}
.search_icon:hover {
opacity: 0.6;
}
.search_text {
span {
font-weight: 400;
color: @search_text_span !important;
border: 1px solid transparent !important;
}
.ivu-icon {
line-height: 14px !important;
font-size: 14px;
color: @search_text_span !important;
}
}
.search_text:hover,
.search_text:focus {
.ivu-icon {
color: #106ffe !important;
}
span {
color: #106ffe !important;
}
background: transparent !important;
}
}
.click_btn {
.ivu-btn {
background: transparent;
width: 100px;
height: 36px;
margin-right: 30px;
}
.ivu-btn:hover {
opacity: 0.6;
}
.all_btn {
border: 1px solid @all_btn_col;
background: @all_btn_col;
}
.loading_btn {
border: 2px solid @loading_btn_col;
color: @loading_btn_col;
}
.stop_btn {
border: 2px solid @stop_btn_col;
color: @stop_btn_col;
}
.incomplete_btn {
color: @incomplete_btn_col;
border: 2px solid @incomplete_btn_col;
}
.over_btn {
border: 2px solid @over_btn_col;
color: @over_btn_col;
}
}
</style>
<style lang="less" scoped>
.card_more {
display: flex;
flex-wrap: wrap;
height: auto;
.card_box {
margin: 0 0 60px 60px;
background: #ffffff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
border-radius: 8px;
height: 220px;
width: 400px;
}
.heard_carl {
height: 40px;
border-radius: 8px 8px 0px 0px;
span {
font-size: 14px;
font-weight: bold;
line-height: 40px;
color: #182c51;
margin: 0 20px;
}
}
.img_box {
margin: 20px 0 0 40px;
width: 120px;
float: left;
img {
width: 120px;
height: 120px;
border: 1px dashed #182c51;
}
p {
font-size: 12px;
font-weight: 400;
line-height: 20px;
color: #182c51;
text-align: center;
}
}
}
.card_count {
width: calc(100% - 200px);
float: right;
margin: 20px 0 0 40px;
p {
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #182c51;
}
p:nth-child(2),
p:nth-child(4) {
margin-bottom: 16px;
}
}
</style>
\ 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