From 04c5571156dc904de0ab2478a6b73b304bc16c4c Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期二, 09 八月 2022 11:13:41 +0800
Subject: [PATCH] 1.项目整体样式修改
---
src/views/zlgl/gxjy.vue | 232 +++++++++++++++++++++++----------------------------------
1 files changed, 95 insertions(+), 137 deletions(-)
diff --git a/src/views/zlgl/gxjy.vue b/src/views/zlgl/gxjy.vue
index 70b27a2..fccc514 100644
--- a/src/views/zlgl/gxjy.vue
+++ b/src/views/zlgl/gxjy.vue
@@ -1,12 +1,15 @@
<template>
<div>
<div class="body" :style="{height:mainHeight+'px'}">
- <div style="margin-left: 10px;margin-top:10px;display: flex;flex-direction: column">
+ <div style="padding-top: 10px;display: flex;flex-direction: column">
<div style="margin-bottom: 15px;font-size: 14px">
<i class="el-icon-s-operation" style="color:#42b983; margin-right: 5px" />鎵爜淇℃伅
</div>
<div style="display: flex;align-items: center">
- <div style="width: 90px;display: flex"><div style="color: red;width:10px">*</div>鎵弿鏉＄爜锛�</div>
+ <div style="width: 90px;display: flex">
+ <div style="color: red;width:10px">*</div>
+ 鎵弿鏉＄爜锛�
+ </div>
<el-input
v-model="form.orderstepqrcode"
name="GXproduceCode"
@@ -15,8 +18,8 @@
/>
</div>
<!-- 鍏」淇℃伅 -->
- <div v-if="!isIpad" style="display:flex;margin-top: 10px;align-items: center; line-height: 50px">
- <div style="display: flex;">
+ <div v-if="!isIpad" style="background:#f8f8fa ;display:flex;margin-top: 10px;align-items: center; line-height: 50px">
+ <div style="display: flex; margin-left: 10px">
<div style="display: flex;margin-right: 50px">
<div style="width: 90px">宸ュ崟缂栫爜锛�</div>
<div style="width: 200px">{{ form.wo_code }}</div>
@@ -47,7 +50,10 @@
</div>
</div>
</div>
- <div v-if="isIpad" style="display:flex;margin-top: 10px;align-items: center;line-height: 30px; flex-direction: column">
+ <div
+ v-if="isIpad"
+ style="display:flex;margin-top: 10px;align-items: center;line-height: 30px; flex-direction: column"
+ >
<div style="display: flex; justify-content: flex-start;width: 100%">
<div style="display: flex;margin-right: 50px">
<div style="width: 90px">宸ュ崟缂栫爜锛�</div>
@@ -83,7 +89,10 @@
<i class="el-icon-s-operation" style="color:#42b983; margin-right: 5px" />妫�楠屾爣鍑嗕俊鎭�
</div>
<div style="display: flex;align-items: center">
- <div style="width: 90px;display: flex"><div style="color: red;width:10px">*</div>妫�楠屾爣鍑嗭細</div>
+ <div style="width: 90px;display: flex">
+ <div style="color: red;width:10px">*</div>
+ 妫�楠屾爣鍑嗭細
+ </div>
<el-select
v-model="checkStandard"
style="width: 200px;"
@@ -98,7 +107,10 @@
:value="item.code"
/>
</el-select>
- <div style="width: 90px;margin-left: 50px;display: flex"><div style="color: red;width:10px">*</div>妫�楠屼汉鍛橈細</div>
+ <div style="width: 90px;margin-left: 50px;display: flex">
+ <div style="color: red;width:10px">*</div>
+ 妫�楠屼汉鍛橈細
+ </div>
<el-select
v-model="checkUser"
style="width: 200px;"
@@ -123,14 +135,13 @@
<el-table
ref="multipleTable"
:data="JYTableData"
- :height="(tableHeight-195)+'px'"
+ :height="tableHeight+'px'"
border
- stripe
+ :row-class-name="tableRowClassName"
:style="{width: 100+'%',height:tableHeight+'px',}"
highlight-current-row
:header-cell-style="this.$headerCellStyle"
:cell-style="this.$cellStyle"
- :row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"
@cell-dblclick="cellDblclick"
>
@@ -138,6 +149,7 @@
type="index"
label="搴忓彿"
width="100"
+ fixed
/>
<!-- <el-table-column-->
<!-- prop="code"-->
@@ -184,7 +196,8 @@
/>
<div
v-else
- > {{ scope.row.stepcheckitem_desc }}</div>
+ > {{ scope.row.stepcheckitem_desc }}
+ </div>
</template>
</el-table-column>
@@ -244,7 +257,10 @@
<div style="display: flex;margin-top: 20px;align-items: center">
<div style="display: flex;margin-right: 50px;align-items: center">
- <div style="width: 90px;display: flex"><div style="color: red;width:10px">*</div>妫�楠岀粨鏋滐細</div>
+ <div style="width: 90px;display: flex">
+ <div style="color: red;width:10px">*</div>
+ 妫�楠岀粨鏋滐細
+ </div>
<el-select
v-model="checkResult"
style="width: 200px;"
@@ -601,7 +617,8 @@
// this.tabClickIndex = row.index
// this.tabClickLabel = column.label
// break
- default: return
+ default:
+ return
}
},
// 鍥炶溅浜嬩欢
@@ -612,14 +629,15 @@
tableRowClassName({ row, rowIndex }) {
// 鎶婃瘡涓�琛岀殑绱㈠紩鏀捐繘row
row.index = rowIndex
+ return 'custom-row'
},
// 鑾峰彇椤甸潰楂樺害
getHeight() {
this.$nextTick(() => {
- this.mainHeight = window.innerHeight - 250
- this.tableHeight = this.mainHeight - 100
+ this.mainHeight = window.innerHeight - 85
+ this.tableHeight = this.mainHeight - 450
- this.isIpad = window.innerHeight < 769
+ this.isIpad = window.innerHeight < 769 && window.innerWidth < 1367
})
}
}
@@ -627,30 +645,61 @@
</script>
<style lang="scss" scoped>
+::v-deep .el-select .el-input .el-select__caret {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+</style>
+<!--鍏叡椤甸潰鏍峰紡-->
+<style lang="scss" scoped>
$main_color: #42b983;
+.el-button--text {
+ font-size: 14px;
+ cursor: pointer;
+}
+
+.el-icon-share, .el-icon-delete, .el-icon-edit-outline {
+ color: $main_color;
+ cursor: pointer;
+}
+
+.el-icon-edit-outline {
+ margin-right: 15px;
+}
+
+::v-deep .el-button--primary, .el-button--default, .el-button--info {
+ height: 34px;
+ display: flex;
+ align-items: center;
+ padding: 0 15px;
+}
+
::v-deep .el-button--primary {
- background-color: $main_color !important;
- height: 30px;
- display: flex;
- align-items: center;
- //border: 1px solid $main_color;
- border: none;
- padding: 0 20px;
+ //background-color: $main_color !important;
}
-::v-deep .el-button--primary:hover {
+::v-deep .el-button--default {
+ background-color: #f8f8fa;
border: none;
}
-::v-deep .el-button--info {
- height: 30px;
- display: flex;
- align-items: center;
- padding: 0 20px;
+::v-deep .el-input__inner {
+ height: 34px;
+ line-height: 34px;
+ //color: #a7a7a7;
}
-::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
- background-color: $main_color !important;
+::v-deep .el-dialog__body {
+ padding: 20px 100px !important;
+}
+
+::v-deep .dialogVisibleRoles .el-dialog__body {
+ padding: 20px 20px !important;
+}
+
+::v-deep .importPickerClass .el-dialog__body {
+ padding: 20px 20px !important;
}
::v-deep .el-dialog__footer {
@@ -658,106 +707,30 @@
justify-content: flex-end;
}
-.footerButton {
- display: flex;
- justify-content: end;
-}
-
-::v-deep .el-button--default {
- background-color: #ffffff !important;
- height: 30px;
- display: flex;
- align-items: center;
- padding: 0 20px;
-}
-
-::v-deep .el-button--default:hover {
- color: #606266;
-}
-
-::v-deep .el-dialog__body {
- padding: 20px 100px !important;
-}
-
-::v-deep .el-radio__input.is-checked .el-radio__inner {
- background-color: $main_color;
- border-color: $main_color;
-}
-
-::v-deep .el-radio__input.is-checked + .el-radio__label {
- color: $main_color !important;
-}
-
-::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
- border-color: $main_color;
- background-color: $main_color;
-}
-
-::v-deep .el-input__inner {
- height: 30px;
- line-height: 30px;
-}
-
-::v-deep .el-input__inner:focus {
- border-color: $main_color;
-}
-
::v-deep .el-table .caret-wrapper {
transform: scale(0.8);
}
::v-deep .cell {
- display: flex !important;
- align-items: center !important;
- justify-content: space-between !important;
-}
-
-::v-deep .el-button--text {
- color: $main_color;
- font-size: 14px;
- cursor: pointer;
-}
-
-.operationClass {
- height: 23px;
display: flex;
- justify-content: space-between;
align-items: center;
+ justify-content: space-between;
}
-.el-icon-share {
- color: $main_color;
- cursor: pointer;
+::v-deep .el-table::before {
+ height: 0;
}
-.el-checkbox.is-bordered.is-checked {
- border-color: $main_color;
+::v-deep .el-table__body-wrapper {
+ background-color: #f8f8fa;
}
-::v-deep .el-radio__input.is-checked .el-radio__inner {
- border-color: $main_color;
- background: $main_color;
+::v-deep .el-table__body .el-table__row.hover-row td {
+ background-color: #eaecef;
}
-::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
- border-color: $main_color;
- background: $main_color;
-}
-
-::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
- color: $main_color !important;
-}
-
-::v-deep .el-checkbox.is-bordered + .el-checkbox.is-bordered {
- margin: 10px 30px 0px 0;
-}
-
-::v-deep .el-radio__input.is-checked + .el-radio__label {
- color: $main_color;
-}
-
-::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
- margin: 10px 30px 0px 0;
+::v-deep .el-form--inline .el-form-item__label {
+ color: #a7a7a7;
}
.body ::v-deep .el-divider {
@@ -770,29 +743,14 @@
margin-bottom: 0;
}
-::v-deep .el-input__inner:focus {
- border-color: $main_color;
+.userDialogVisible ::v-deep .el-form-item {
+ margin-bottom: 0;
}
-::v-deep .el-select .el-input__inner:focus {
- border-color: $main_color;
-}
+</style>
+<style>
-::v-deep .el-select-dropdown__item.selected {
- color: $main_color;
-}
-
-::v-deep .el-checkbox__inner:hover {
- border-color: $main_color;
-}
-
-::v-deep .el-textarea__inner:focus {
- border-color: $main_color;
-}
-
-::v-deep .el-select .el-input .el-select__caret {
- display: flex;
- align-items: center;
- justify-content: center;
+.el-table .custom-row {
+ background: #f8f8fa;
}
</style>
--
Gitblit v1.9.3