|
|
@@ -108,25 +108,25 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- Work Order Dialog -->
|
|
|
- <el-dialog v-model="show" :title="`${$t('personalCenter.gongdan')}`" width="784" custom-class="personal-dialog">
|
|
|
+ <el-dialog v-model="show" :title="`${$t('personalCenter.gongdan')}`" width="784" custom-class="work-order-dialog">
|
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
<el-tab-pane v-for="tab in tabs" :key="tab.name" :label="`${$t(tab.label)}`" :name="tab.name">
|
|
|
<template v-if="activeName == 0">
|
|
|
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto">
|
|
|
<el-form-item :label="`${$t('personalCenter.gongdanleixing')}`" prop="issueCategory">
|
|
|
<el-select v-model="ruleForm.issueCategory"
|
|
|
- :placeholder="`${$t('personalCenter.gongdanleixing_placeholder')}`" style="width: 100%">
|
|
|
+ :placeholder="`${$t('personalCenter.gongdanleixing_placeholder')}`" class="work-input-style" style="width: 100%">
|
|
|
<el-option v-for="item in workTypeList" :key="item.value" :label="`${$t(item.label)}`"
|
|
|
:value="item.value" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item :label="`${$t('personalCenter.gongdanbiaoti')}`" prop="issueTitle">
|
|
|
<el-input v-model="ruleForm.issueTitle"
|
|
|
- :placeholder="`${$t('personalCenter.gongdanbiaoti_placeholder')}`" />
|
|
|
+ :placeholder="`${$t('personalCenter.gongdanbiaoti_placeholder')}`" class="work-input-style" />
|
|
|
</el-form-item>
|
|
|
<el-form-item :label="`${$t('personalCenter.gongdanneirong')}`" prop="issueContent">
|
|
|
<el-input v-model="ruleForm.issueContent"
|
|
|
- :placeholder="`${$t('personalCenter.gongdanneirong_placeholder')}`" :rows="10" type="textarea" />
|
|
|
+ :placeholder="`${$t('personalCenter.gongdanneirong_placeholder')}`" class="work-input-style" :rows="10" type="textarea" />
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</template>
|
|
|
@@ -1407,16 +1407,355 @@ onMounted(() => {
|
|
|
|
|
|
/* ===== DIALOGS ===== */
|
|
|
.personal-dialog {
|
|
|
+ border-radius: 12px;
|
|
|
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
|
|
|
+ overflow: hidden;
|
|
|
.el-dialog__header {
|
|
|
padding: 24px 24px 0;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ .el-dialog__title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1f2937;
|
|
|
}
|
|
|
-
|
|
|
.el-dialog__body {
|
|
|
padding: 24px;
|
|
|
+ max-height: 70vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
}
|
|
|
|
|
|
.el-dialog__footer {
|
|
|
- padding: 0 24px 24px;
|
|
|
+ padding: 16px 24px;
|
|
|
+ background: #fff;
|
|
|
+ border-top: 1px solid #f0f0f0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== WORK ORDER DIALOG ===== */
|
|
|
+.work-order-dialog {
|
|
|
+ border-radius: 16px;
|
|
|
+ box-shadow:
|
|
|
+ 0 20px 60px rgba(0, 0, 0, 0.3),
|
|
|
+ 0 8px 20px rgba(0, 0, 0, 0.2);
|
|
|
+ overflow: hidden;
|
|
|
+ backdrop-filter: blur(20px);
|
|
|
+ -webkit-backdrop-filter: blur(20px);
|
|
|
+ background: rgba(17, 24, 39, 0.95);
|
|
|
+ border: 1px solid rgba(79, 70, 229, 0.2);
|
|
|
+
|
|
|
+ .el-dialog__header {
|
|
|
+ padding: 24px;
|
|
|
+ border-bottom: 1px solid rgba(79, 70, 229, 0.15);
|
|
|
+ background: rgba(17, 24, 39, 0.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #F9FAFB;
|
|
|
+ letter-spacing: -0.02em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 24px;
|
|
|
+ max-height: 70vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ background: rgba(255, 255, 255, 0.05);
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ background: rgba(79, 70, 229, 0.3);
|
|
|
+ border-radius: 3px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(79, 70, 229, 0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__footer {
|
|
|
+ padding: 20px 24px;
|
|
|
+ background: rgba(17, 24, 39, 0.5);
|
|
|
+ border-top: 1px solid rgba(79, 70, 229, 0.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 工单弹窗表单样式
|
|
|
+ .el-form {
|
|
|
+ :deep(.el-form-item) {
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-form-item__label) {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff !important;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input,
|
|
|
+ .el-textarea {
|
|
|
+ :deep(.el-input__wrapper),
|
|
|
+ :deep(.el-textarea__inner) {
|
|
|
+ background: rgba(255, 255, 255, 0.08);
|
|
|
+ box-shadow:
|
|
|
+ 0 0 0 1px rgba(79, 70, 229, 0.2) inset,
|
|
|
+ 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
+ padding: 10px 16px;
|
|
|
+ border-radius: 8px;
|
|
|
+ transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ box-shadow:
|
|
|
+ 0 0 0 1px rgba(79, 70, 229, 0.3) inset,
|
|
|
+ 0 4px 12px rgba(79, 70, 229, 0.15);
|
|
|
+ background: rgba(255, 255, 255, 0.12);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.is-focus {
|
|
|
+ box-shadow:
|
|
|
+ 0 0 0 2px rgba(79, 70, 229, 0.3),
|
|
|
+ 0 0 0 4px rgba(79, 70, 229, 0.1) inset,
|
|
|
+ 0 4px 16px rgba(79, 70, 229, 0.2);
|
|
|
+ background: rgba(255, 255, 255, 0.15);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-input__inner),
|
|
|
+ :deep(.el-textarea__inner) {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff !important;
|
|
|
+
|
|
|
+ &::placeholder {
|
|
|
+ color: #9CA3AF !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select {
|
|
|
+ :deep(.el-select__wrapper) {
|
|
|
+ background: rgba(255, 255, 255, 0.08);
|
|
|
+ box-shadow:
|
|
|
+ 0 0 0 1px rgba(79, 70, 229, 0.2) inset,
|
|
|
+ 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
+ padding: 10px 16px;
|
|
|
+ border-radius: 8px;
|
|
|
+ transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ box-shadow:
|
|
|
+ 0 0 0 1px rgba(79, 70, 229, 0.3) inset,
|
|
|
+ 0 4px 12px rgba(79, 70, 229, 0.15);
|
|
|
+ background: rgba(255, 255, 255, 0.12);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.is-focus {
|
|
|
+ box-shadow:
|
|
|
+ 0 0 0 2px rgba(79, 70, 229, 0.3),
|
|
|
+ 0 0 0 4px rgba(79, 70, 229, 0.1) inset,
|
|
|
+ 0 4px 16px rgba(79, 70, 229, 0.2);
|
|
|
+ background: rgba(255, 255, 255, 0.15);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-select__placeholder) {
|
|
|
+ color: #9CA3AF !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-select__selected-item) {
|
|
|
+ color: #ffffff !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-collapse {
|
|
|
+ border: none;
|
|
|
+
|
|
|
+ :deep(.el-collapse-item__header) {
|
|
|
+ background: rgba(255, 255, 255, 0.03);
|
|
|
+ border: 1px solid rgba(79, 70, 229, 0.15);
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 16px 20px;
|
|
|
+ color: #ffffff !important;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(255, 255, 255, 0.05);
|
|
|
+ border-color: rgba(79, 70, 229, 0.25);
|
|
|
+ box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.is-active {
|
|
|
+ background: rgba(79, 70, 229, 0.08);
|
|
|
+ border-color: rgba(79, 70, 229, 0.3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-collapse-item__wrap) {
|
|
|
+ background: rgba(255, 255, 255, 0.02);
|
|
|
+ border: none;
|
|
|
+ border-radius: 0 0 8px 8px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-collapse-item__content) {
|
|
|
+ padding: 20px;
|
|
|
+ color: #ffffff !important;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-descriptions {
|
|
|
+ :deep(.el-descriptions__header) {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-descriptions__label) {
|
|
|
+ background: rgba(79, 70, 229, 0.08);
|
|
|
+ color: #ffffff !important;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-descriptions__content) {
|
|
|
+ background: rgba(255, 255, 255, 0.02);
|
|
|
+ color: #ffffff !important;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-descriptions__cell) {
|
|
|
+ border-color: rgba(79, 70, 229, 0.15);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cell-item {
|
|
|
+ color: #ffffff !important;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tag {
|
|
|
+ background: rgba(79, 70, 229, 0.15);
|
|
|
+ border: 1px solid rgba(79, 70, 229, 0.3);
|
|
|
+ color: #818CF8;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 4px 12px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 500;
|
|
|
+
|
|
|
+ &.el-tag--success {
|
|
|
+ background: rgba(16, 185, 129, 0.15);
|
|
|
+ border-color: rgba(16, 185, 129, 0.3);
|
|
|
+ color: #34D399;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.el-tag--primary {
|
|
|
+ background: rgba(79, 70, 229, 0.15);
|
|
|
+ border-color: rgba(79, 70, 229, 0.3);
|
|
|
+ color: #818CF8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tabs {
|
|
|
+ :deep(.el-tabs__header) {
|
|
|
+ margin: 0 0 24px;
|
|
|
+ border-bottom: 1px solid rgba(79, 70, 229, 0.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-tabs__nav-wrap::after) {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-tabs__item) {
|
|
|
+ color: #9CA3AF;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 500;
|
|
|
+ padding: 0 20px;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #F9FAFB;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.is-active {
|
|
|
+ color: #4F46E5;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-tabs__active-bar) {
|
|
|
+ background: linear-gradient(90deg, #4F46E5, #7C3AED);
|
|
|
+ height: 3px;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-footer {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ padding: 10px 24px;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+
|
|
|
+ &:not(.gradient) {
|
|
|
+ background: rgba(255, 255, 255, 0.05);
|
|
|
+ border: 1px solid rgba(79, 70, 229, 0.3);
|
|
|
+ color: #F9FAFB;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border-color: rgba(79, 70, 229, 0.5);
|
|
|
+ box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .gradient {
|
|
|
+ background: linear-gradient(135deg, #4F46E5, #7C3AED);
|
|
|
+ border: none;
|
|
|
+ color: white;
|
|
|
+ box-shadow:
|
|
|
+ 0 4px 12px rgba(79, 70, 229, 0.4),
|
|
|
+ 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow:
|
|
|
+ 0 6px 16px rgba(79, 70, 229, 0.5),
|
|
|
+ 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1494,10 +1833,10 @@ onMounted(() => {
|
|
|
}
|
|
|
|
|
|
.personal-tag {
|
|
|
- background: rgba(79, 70, 229, 0.1);
|
|
|
- color: #4f46e5;
|
|
|
- border: none;
|
|
|
- border-radius: 12px;
|
|
|
+ background: #ecf5ff;
|
|
|
+ color: #409eff;
|
|
|
+ border: 1px solid #d9ecff;
|
|
|
+ border-radius: 4px;
|
|
|
padding: 6px 12px;
|
|
|
font-size: 13px;
|
|
|
font-weight: 600;
|
|
|
@@ -1715,4 +2054,77 @@ onMounted(() => {
|
|
|
display: none;
|
|
|
}
|
|
|
}
|
|
|
+.inputStyle,
|
|
|
+.work-input-style {
|
|
|
+ :deep(.el-input__wrapper) {
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 0 0 0 1px #dcdfe6 inset !important;
|
|
|
+ padding: 8px 15px;
|
|
|
+ border-radius: 6px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ box-shadow: 0 0 0 1px #c0c4cc inset !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.is-focus {
|
|
|
+ box-shadow: 0 0 0 1px #409eff inset !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-input__inner) {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #606266;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-form-item {
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ :deep(.el-form-item__label) {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #606266;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-tag {
|
|
|
+ background: #ecf5ff;
|
|
|
+ color: #409eff;
|
|
|
+ border: 1px solid #d9ecff;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 6px 12px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.dialog-footer {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gradient {
|
|
|
+ background: linear-gradient(135deg, #4f46e5, #7c3aed);
|
|
|
+ border: none;
|
|
|
+ color: white;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ opacity: 0.9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.countdown-btn {
|
|
|
+ background: #f5f7fa !important;
|
|
|
+ color: #909399 !important;
|
|
|
+ border-color: #dcdfe6 !important;
|
|
|
+ cursor: not-allowed;
|
|
|
+}
|
|
|
</style>
|
liuqiwen