This commit is contained in:
yiqiu
@@ -1,562 +0,0 @@
|
|||||||
.order-search-wrapper {
|
|
||||||
padding: 5px 0;
|
|
||||||
display: flex;
|
|
||||||
margin-bottom: 43px;
|
|
||||||
}
|
|
||||||
.order-search-wrapper.internal {
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.order-search-wrapper .t-input__wrap {
|
|
||||||
width: 240px;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
.list-card-container {
|
|
||||||
width: auto !important;
|
|
||||||
}
|
|
||||||
.order-search-wrapper .t-select__wrap {
|
|
||||||
width: 240px;
|
|
||||||
}
|
|
||||||
.order-search-wrapper .t-input__wrap .t-input__prefix.t-input__prefix-icon {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
.search-left-bottom {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
.search-left-top,
|
|
||||||
.search-left-bottom {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.search-left-top > div,
|
|
||||||
.search-left-bottom > div {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
.search-left-bottom .t-button {
|
|
||||||
width: 70px;
|
|
||||||
height: 32px;
|
|
||||||
background: var(--td-brand-color);
|
|
||||||
border-radius: 3px;
|
|
||||||
color: #FFFFFF;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.search-box-right {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.search-box-right .t-select {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.t-table .t-table__header--fixed:not(.t-table__header--multiple) > tr > th {
|
|
||||||
background-color: #ffffff;
|
|
||||||
color: #999999;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.table-status-span {
|
|
||||||
color: var(--td-brand-color);
|
|
||||||
}
|
|
||||||
.turn-inside-dialog-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: end;
|
|
||||||
}
|
|
||||||
.turn-inside-dialog-footer button {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
.hover-name {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.order-name {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.order-name:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
.product-info {
|
|
||||||
margin: 20px 0;
|
|
||||||
display: flex;
|
|
||||||
column-gap: 50px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.product-info .host-item {
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--td-brand-color);
|
|
||||||
}
|
|
||||||
.order-type-add-btn {
|
|
||||||
width: 100%;
|
|
||||||
height: 42px;
|
|
||||||
border-top: 0;
|
|
||||||
border-radius: 0px;
|
|
||||||
border-color: #e7e7e7 !important;
|
|
||||||
}
|
|
||||||
.order-type-close-btn {
|
|
||||||
margin-left: calc(50% - 30px);
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
.upload-btn .t-button__text {
|
|
||||||
display: flex;
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
.order-upload-wrapper .t-form__controls-content {
|
|
||||||
align-items: baseline;
|
|
||||||
}
|
|
||||||
/* 回复页 */
|
|
||||||
.no-wrap {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.reply-divider {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.reply-divider .t-divider__inner-text {
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
.t-divider--with-text .t-divider__inner-text:not(:empty) {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
.reply-divider.t-divider--with-text-left:before {
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
.reply-divider.t-divider--with-text-left:after {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
.detail-row {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.detail-value {
|
|
||||||
word-break: break-all;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
}
|
|
||||||
.detail-item {
|
|
||||||
margin-left: 16px;
|
|
||||||
margin-right: 40px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: baseline;
|
|
||||||
}
|
|
||||||
.detail-value {
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 36px;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
.detail-label {
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 36px;
|
|
||||||
color: #999999;
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
.reply-list {
|
|
||||||
margin-top: 34px;
|
|
||||||
padding-right: 73px;
|
|
||||||
}
|
|
||||||
.reply-list .t-list-item__content {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.reply-list .t-comment__avatar-image {
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
}
|
|
||||||
.reply-list .t-comment__detail {
|
|
||||||
background: #F0F0FD;
|
|
||||||
border-radius: 0px 12px 12px 12px;
|
|
||||||
padding: 12px 20px 16px 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 24px;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
.reply-list .t-comment__actions {
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-left: -30px;
|
|
||||||
}
|
|
||||||
.reply-list .t-list-item {
|
|
||||||
padding: 12px 16px;
|
|
||||||
}
|
|
||||||
.reply-list-attachment {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.reply-list-attachment-item {
|
|
||||||
color: rgba(0, 0, 0, 0.4);
|
|
||||||
margin-right: 10px;
|
|
||||||
max-width: 130px;
|
|
||||||
overflow: hidden;
|
|
||||||
word-break: break-all;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.reply-list-attachment-item:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
color: #0052d9;
|
|
||||||
}
|
|
||||||
.reply-form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-end;
|
|
||||||
padding: 0 16px;
|
|
||||||
}
|
|
||||||
.reply-form-btn {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 14px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.reply-form-btn .t-upload__trigger {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
.reply-form-btn .t-upload__single {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.reply-form-btn .upload-list {
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
}
|
|
||||||
.t-comment__actions > li:hover {
|
|
||||||
color: rgba(0, 0, 0, 0.4);
|
|
||||||
}
|
|
||||||
/* 图标 */
|
|
||||||
.icon-reply {
|
|
||||||
background: url(../img/icon/icon-reply.png) 7px no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
background-size: 17px 17px;
|
|
||||||
}
|
|
||||||
.icon-forward {
|
|
||||||
background: url(../img/icon/icon-forward.png) 7px no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
background-size: 17px 17px;
|
|
||||||
}
|
|
||||||
.icon-save {
|
|
||||||
background: url(../img/icon/icon-save.png) 8px no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
background-size: 15px 15px;
|
|
||||||
}
|
|
||||||
.detail-box {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.detail-box .top-title {
|
|
||||||
margin-top: 25px;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.detail-box .top-title .ticket-title {
|
|
||||||
width: 45%;
|
|
||||||
margin-right: 134px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-size: 16px;
|
|
||||||
color: rgba(0, 0, 0, 0.9);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.detail-box .top-title .ticket-info {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.detail-box .top-title .ticket-info .info-title {
|
|
||||||
font-size: 14px;
|
|
||||||
color: rgba(0, 0, 0, 0.4);
|
|
||||||
}
|
|
||||||
.detail-box .top-title .ticket-info .log-btn {
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-block;
|
|
||||||
border-radius: 3px;
|
|
||||||
background: #ECF2FE;
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--td-brand-color);
|
|
||||||
width: 88px;
|
|
||||||
text-align: center;
|
|
||||||
height: 32px;
|
|
||||||
line-height: 32px;
|
|
||||||
}
|
|
||||||
.detail-box .top-title .ticket-info .blue-text {
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--td-brand-color);
|
|
||||||
}
|
|
||||||
.detail-box .top-title .ticket-info .info-item {
|
|
||||||
color: rgba(0, 0, 0, 0.9);
|
|
||||||
}
|
|
||||||
.detail-box .select-box {
|
|
||||||
margin-top: 35px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.detail-box .select-box .left-btn {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.detail-box .select-box .left-btn .host-div {
|
|
||||||
min-width: 200px;
|
|
||||||
max-width: 500px;
|
|
||||||
margin-right: 57px;
|
|
||||||
white-space: inherit;
|
|
||||||
}
|
|
||||||
.detail-box .select-box .left-btn .host-item {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.detail-box .select-box .left-btn .host-item:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
.detail-box .select-box .left-btn > div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.detail-box .select-box .left-btn > div > span {
|
|
||||||
white-space: nowrap;
|
|
||||||
color: rgba(0, 0, 0, 0.9);
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.detail-box .select-box .left-btn .select-240 {
|
|
||||||
min-width: 240px;
|
|
||||||
height: 32px;
|
|
||||||
margin-right: 30px;
|
|
||||||
}
|
|
||||||
.detail-box .select-box .left-btn .no-mar {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.detail-box .select-box .left-btn .save-btn {
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
.detail-box .top-box {
|
|
||||||
background: #FFFFFF;
|
|
||||||
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.04);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 20px 50px 20px 30px;
|
|
||||||
}
|
|
||||||
.detail-box .bottom-box {
|
|
||||||
background: #FFFFFF;
|
|
||||||
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.04);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 20px 40px 0px 40px;
|
|
||||||
}
|
|
||||||
.reply-item {
|
|
||||||
margin-bottom: 57px;
|
|
||||||
}
|
|
||||||
.reply-item .reply-top .reply-user {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 10px;
|
|
||||||
border-radius: 3px;
|
|
||||||
color: rgba(255, 255, 255, 0.9);
|
|
||||||
}
|
|
||||||
.reply-item .reply-top .user-name {
|
|
||||||
color: #333333;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 16px;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
.reply-item .reply-top .link-style {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.reply-item .reply-top .link-style:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
.reply-item .reply-top .green-text {
|
|
||||||
background: #03B193;
|
|
||||||
}
|
|
||||||
.reply-item .reply-top .red-text {
|
|
||||||
background: #5090FF;
|
|
||||||
}
|
|
||||||
.reply-item .reply-top .pink-text {
|
|
||||||
background: #EB5F80;
|
|
||||||
}
|
|
||||||
.reply-item .reply-main {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.reply-item .reply-main .reply-middle {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: 11px;
|
|
||||||
border-radius: 3px;
|
|
||||||
padding: 20px 100px 22px 30px;
|
|
||||||
border: 1px solid #DCDCDC;
|
|
||||||
}
|
|
||||||
.reply-item .reply-main .reply-middle .replu-conten {
|
|
||||||
display: inline-block;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
.reply-item .reply-main .reply-middle .replu-conten img {
|
|
||||||
width: 140px;
|
|
||||||
height: 84px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.reply-item .reply-main .reply-middle .replu-conten p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.reply-item .reply-main .reply-middle .text-btn {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0px;
|
|
||||||
right: 0px;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
.reply-item .reply-main .reply-bottom {
|
|
||||||
width: 100%;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.reply-item .reply-main .reply-bottom > div {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.reply-item .reply-main .time-div {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999999;
|
|
||||||
width: 100%;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.reply-item .green-bg {
|
|
||||||
border: 1px solid #DCDCDC;
|
|
||||||
background: #FBFFFE;
|
|
||||||
}
|
|
||||||
.reply-item .green-bg:hover {
|
|
||||||
border: 1px solid #03B193;
|
|
||||||
}
|
|
||||||
.reply-item .blue-bg {
|
|
||||||
border: 1px solid #5090FF;
|
|
||||||
background: #F2F7FF;
|
|
||||||
}
|
|
||||||
.reply-item .blue-bg:hover {
|
|
||||||
border: 1px solid #5090FF;
|
|
||||||
}
|
|
||||||
.reply-item .pink-bg {
|
|
||||||
border: 1px solid #DCDCDC;
|
|
||||||
background: #FFFBFB;
|
|
||||||
}
|
|
||||||
.reply-item .pink-bg:hover {
|
|
||||||
border: 1px solid #EB5F80;
|
|
||||||
}
|
|
||||||
.relply-input {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
.btn-box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
.btn-box .add-btn {
|
|
||||||
border-radius: 4px;
|
|
||||||
height: 32px;
|
|
||||||
background: #4787F0;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
.btn-box .re-btn {
|
|
||||||
margin-left: 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
height: 32px;
|
|
||||||
background: #ED7B2F;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
.btn-box .re-btn:hover {
|
|
||||||
background: rgba(237, 123, 47, 0.678);
|
|
||||||
}
|
|
||||||
.btn-box .send-btn {
|
|
||||||
margin-right: 15px;
|
|
||||||
height: 32px;
|
|
||||||
background: var(--td-brand-color);
|
|
||||||
border-radius: 4px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
.btn-box .ok-btn {
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: var(--td-brand-color);
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
.btn-box .canle-btn {
|
|
||||||
margin-left: 20px;
|
|
||||||
border: none;
|
|
||||||
color: #333333;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: #E7E7E7;
|
|
||||||
}
|
|
||||||
.btn-box .left {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.btn-box .file {
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
.btn-box .upload .t-button__text {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.btn-box .upload .t-icon {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
.description-box {
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
.description-box p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.description-box img {
|
|
||||||
width: 140px;
|
|
||||||
height: 84px;
|
|
||||||
}
|
|
||||||
.replay-box {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
overflow: auto;
|
|
||||||
height: 280px;
|
|
||||||
border: 1px solid #DCDCDC;
|
|
||||||
background: rgba(231, 231, 231, 0.4);
|
|
||||||
padding: 0 12px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
|
||||||
.replay-item {
|
|
||||||
margin-top: 10px;
|
|
||||||
padding: 13px 16px;
|
|
||||||
border: 1px solid #DCDCDC;
|
|
||||||
border-radius: 3px;
|
|
||||||
background: #FFFFFF;
|
|
||||||
}
|
|
||||||
.replay-item p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.replay-item:hover {
|
|
||||||
color: var(--td-brand-color);
|
|
||||||
border: 1px solid var(--td-brand-color);
|
|
||||||
}
|
|
||||||
.tox-statusbar__branding {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
#viewer {
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
.row-class {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.user-name {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.isEn .forwardForm .t-form__label {
|
|
||||||
width: 190px !important;
|
|
||||||
}
|
|
||||||
#content .ticket_detail {
|
|
||||||
background: transparent !important;
|
|
||||||
}
|
|
||||||
.center-box {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
html {
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
@@ -1,714 +0,0 @@
|
|||||||
.order-search-wrapper {
|
|
||||||
padding: 5px 0;
|
|
||||||
display: flex;
|
|
||||||
margin-bottom: 43px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-search-wrapper.internal {
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-search-wrapper .t-input__wrap {
|
|
||||||
width: 240px;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-card-container {
|
|
||||||
width: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-search-wrapper .t-select__wrap {
|
|
||||||
width: 240px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.order-search-wrapper .t-input__wrap .t-input__prefix.t-input__prefix-icon {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-left-bottom {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-left-top,
|
|
||||||
.search-left-bottom {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-left-top>div,
|
|
||||||
.search-left-bottom>div {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-left-bottom .t-button {
|
|
||||||
width: 70px;
|
|
||||||
height: 32px;
|
|
||||||
background: var(--td-brand-color);
|
|
||||||
border-radius: 3px;
|
|
||||||
color: #FFFFFF;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-box-right {
|
|
||||||
text-align: right;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-box-right .t-select {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.t-table .t-table__header--fixed:not(.t-table__header--multiple)>tr>th {
|
|
||||||
background-color: #ffffff;
|
|
||||||
color: #999999;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-status-span {
|
|
||||||
color: var(--td-brand-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.turn-inside-dialog-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.turn-inside-dialog-footer button {
|
|
||||||
margin-left: 10px
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.hover-name {
|
|
||||||
cursor: pointer
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-name {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-name:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-info {
|
|
||||||
margin: 20px 0;
|
|
||||||
display: flex;
|
|
||||||
column-gap: 50px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.host-item {
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--td-brand-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.order-type-add-btn {
|
|
||||||
width: 100%;
|
|
||||||
height: 42px;
|
|
||||||
border-top: 0;
|
|
||||||
border-radius: 0px;
|
|
||||||
border-color: #e7e7e7 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-type-close-btn {
|
|
||||||
margin-left: calc(50% - 30px);
|
|
||||||
margin-top: 30px
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-btn .t-button__text {
|
|
||||||
display: flex;
|
|
||||||
color: #999999
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-upload-wrapper .t-form__controls-content {
|
|
||||||
align-items: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 回复页 */
|
|
||||||
.no-wrap {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-divider {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-divider .t-divider__inner-text {
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.t-divider--with-text .t-divider__inner-text:not(:empty) {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-divider.t-divider--with-text-left:before {
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-divider.t-divider--with-text-left:after {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-row {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-value {
|
|
||||||
word-break: break-all;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-item {
|
|
||||||
margin-left: 16px;
|
|
||||||
margin-right: 40px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-value {
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 36px;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-label {
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 36px;
|
|
||||||
color: #999999;
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-list {
|
|
||||||
margin-top: 34px;
|
|
||||||
padding-right: 73px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-list .t-list-item__content {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-list .t-comment__avatar-image {
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-list .t-comment__detail {
|
|
||||||
background: #F0F0FD;
|
|
||||||
border-radius: 0px 12px 12px 12px;
|
|
||||||
padding: 12px 20px 16px 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 24px;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-list .t-comment__actions {
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-left: -30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-list .t-list-item {
|
|
||||||
padding: 12px 16px
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-list-attachment {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-list-attachment-item {
|
|
||||||
color: rgba(0, 0, 0, 0.4);
|
|
||||||
margin-right: 10px;
|
|
||||||
max-width: 130px;
|
|
||||||
overflow: hidden;
|
|
||||||
word-break: break-all;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-list-attachment-item:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
color: #0052d9
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-end;
|
|
||||||
padding: 0 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-form-btn {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 14px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-form-btn .t-upload__trigger {
|
|
||||||
margin-right: 10px
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-form-btn .t-upload__single {
|
|
||||||
display: flex
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-form-btn .upload-list {
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline
|
|
||||||
}
|
|
||||||
|
|
||||||
.t-comment__actions>li:hover {
|
|
||||||
color: rgba(0, 0, 0, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* 图标 */
|
|
||||||
.icon-reply {
|
|
||||||
background: url(../img/icon/icon-reply.png) 7px no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
background-size: 17px 17px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-forward {
|
|
||||||
background: url(../img/icon/icon-forward.png) 7px no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
background-size: 17px 17px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-save {
|
|
||||||
background: url(../img/icon/icon-save.png) 8px no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
background-size: 15px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.detail-box {
|
|
||||||
width: 100%;
|
|
||||||
// min-width: 1500px;
|
|
||||||
|
|
||||||
.top-title {
|
|
||||||
margin-top: 25px;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.ticket-title {
|
|
||||||
width: 45%;
|
|
||||||
margin-right: 134px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-size: 16px;
|
|
||||||
color: rgba(0, 0, 0, 0.9);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ticket-info {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.info-title {
|
|
||||||
font-size: 14px;
|
|
||||||
color: rgba(0, 0, 0, 0.4000);
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-btn {
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-block;
|
|
||||||
border-radius: 3px;
|
|
||||||
background: #ECF2FE;
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--td-brand-color);
|
|
||||||
width: 88px;
|
|
||||||
text-align: center;
|
|
||||||
height: 32px;
|
|
||||||
line-height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blue-text {
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--td-brand-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-item {
|
|
||||||
color: rgba(0, 0, 0, 0.9);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-box {
|
|
||||||
margin-top: 35px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.left-btn {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.host-div {
|
|
||||||
min-width: 200px;
|
|
||||||
max-width: 500px;
|
|
||||||
margin-right: 57px;
|
|
||||||
white-space: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.host-item {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
>div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
>div>span {
|
|
||||||
white-space: nowrap;
|
|
||||||
color: rgba(0, 0, 0, 0.9);
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-240 {
|
|
||||||
min-width: 240px;
|
|
||||||
height: 32px;
|
|
||||||
margin-right: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-mar {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.save-btn {
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-box {
|
|
||||||
background: #FFFFFF;
|
|
||||||
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.04);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 20px 50px 20px 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom-box {
|
|
||||||
background: #FFFFFF;
|
|
||||||
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.04);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 20px 40px 0px 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-item {
|
|
||||||
margin-bottom: 57px;
|
|
||||||
|
|
||||||
|
|
||||||
.reply-top {
|
|
||||||
.reply-user {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 10px;
|
|
||||||
border-radius: 3px;
|
|
||||||
color: rgba(255, 255, 255, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-name {
|
|
||||||
color: #333333;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 16px;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-style {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.green-text {
|
|
||||||
background: #03B193;
|
|
||||||
}
|
|
||||||
|
|
||||||
.red-text {
|
|
||||||
background: #5090FF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pink-text {
|
|
||||||
background: #EB5F80;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.reply-main {
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
.reply-middle {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: 11px;
|
|
||||||
border-radius: 3px;
|
|
||||||
padding: 20px 100px 22px 30px;
|
|
||||||
border: 1px solid #DCDCDC;
|
|
||||||
|
|
||||||
.replu-conten {
|
|
||||||
display: inline-block;
|
|
||||||
word-break: break-word;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 140px;
|
|
||||||
height: 84px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-btn {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0px;
|
|
||||||
right: 0px;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-bottom {
|
|
||||||
width: 100%;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #333;
|
|
||||||
|
|
||||||
>div {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-div {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999999;
|
|
||||||
width: 100%;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.green-bg {
|
|
||||||
border: 1px solid #DCDCDC;
|
|
||||||
background: #FBFFFE;
|
|
||||||
}
|
|
||||||
|
|
||||||
.green-bg:hover {
|
|
||||||
border: 1px solid #03B193;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blue-bg {
|
|
||||||
border: 1px solid #5090FF;
|
|
||||||
background: #F2F7FF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blue-bg:hover {
|
|
||||||
border: 1px solid #5090FF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pink-bg {
|
|
||||||
border: 1px solid #DCDCDC;
|
|
||||||
background: #FFFBFB;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pink-bg:hover {
|
|
||||||
border: 1px solid #EB5F80;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.relply-input {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
|
|
||||||
.add-btn {
|
|
||||||
border-radius: 4px;
|
|
||||||
height: 32px;
|
|
||||||
background: #4787F0;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.re-btn {
|
|
||||||
margin-left: 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
height: 32px;
|
|
||||||
background: #ED7B2F;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.re-btn:hover {
|
|
||||||
background: rgba(237, 123, 47, 0.678);
|
|
||||||
}
|
|
||||||
|
|
||||||
.send-btn {
|
|
||||||
margin-right: 15px;
|
|
||||||
height: 32px;
|
|
||||||
background: var(--td-brand-color);
|
|
||||||
border-radius: 4px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ok-btn {
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: var(--td-brand-color);
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.canle-btn {
|
|
||||||
margin-left: 20px;
|
|
||||||
border: none;
|
|
||||||
color: #333333;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: #E7E7E7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file {
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload {
|
|
||||||
.t-button__text {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.t-icon {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.description-box {
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 140px;
|
|
||||||
height: 84px;
|
|
||||||
}
|
|
||||||
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.replay-box {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
overflow: auto;
|
|
||||||
height: 280px;
|
|
||||||
border: 1px solid #DCDCDC;
|
|
||||||
background: rgba(231, 231, 231, 0.4);
|
|
||||||
padding: 0 12px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.replay-item {
|
|
||||||
margin-top: 10px;
|
|
||||||
padding: 13px 16px;
|
|
||||||
border: 1px solid #DCDCDC;
|
|
||||||
border-radius: 3px;
|
|
||||||
background: #FFFFFF;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.replay-item:hover {
|
|
||||||
color: var(--td-brand-color);
|
|
||||||
border: 1px solid var(--td-brand-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.tox-statusbar__branding {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#viewer {
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row-class {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-name {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.isEn .forwardForm .t-form__label {
|
|
||||||
width: 190px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content .ticket_detail {
|
|
||||||
background: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center-box {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
@@ -1,281 +0,0 @@
|
|||||||
<link rel="stylesheet" href="/plugins/addon/idcsmart_ticket/template/admin/css/order_copy.css" />
|
|
||||||
<link rel="stylesheet" href="/plugins/addon/idcsmart_ticket/template/admin/css/common/viewer.min.css">
|
|
||||||
<!-- =======内容区域======= -->
|
|
||||||
<div id="content" class="template" v-cloak>
|
|
||||||
<com-config class="ticket_detail">
|
|
||||||
<t-loading attach="#content" size="small" :loading="pageLoading"></t-loading>
|
|
||||||
<div class="detail-box" ref="scrollDiv">
|
|
||||||
<div class="left-list-box">
|
|
||||||
<div class="left-top">
|
|
||||||
<t-divider class="reply-divider" align="left">{{lang.order_text26}}</t-divider>
|
|
||||||
<t-list class="reply-list">
|
|
||||||
<t-list-item v-for="(item, index) in replyList" :key="index">
|
|
||||||
<div class="reply-item">
|
|
||||||
<div class="reply-top" v-if="orderDetailData.post_admin_id > 0 && item.id == 0">
|
|
||||||
<span class="reply-user red-text">{{lang.order_text28 }}</span>
|
|
||||||
<span class="user-name" :class="item.client_id ? 'link-style' : ''"
|
|
||||||
@click="goClientPage(item.client_id)">{{item.type === 'Client' ? item.client_name : item.type ===
|
|
||||||
'Admin' ? item.admin_name : item.name ? item.name : '--'}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="reply-top" v-else>
|
|
||||||
<span class="reply-user"
|
|
||||||
:class="item.type === 'Client' ? 'green-text' : item.type === 'Admin' ? 'red-text' : 'pink-text'">{{item.type
|
|
||||||
=== 'Client' ? lang.order_text27 : item.type === 'Admin' ? lang.order_text28 : lang.order_text29
|
|
||||||
}}</span>
|
|
||||||
<span class="user-name" :class="item.client_id ? 'link-style' : ''"
|
|
||||||
@click="goClientPage(item.client_id)">{{item.type === 'Client' ? item.client_name : item.type ===
|
|
||||||
'Admin' ? item.admin_name : item.name ? item.name : '--'}}</span>
|
|
||||||
<span class="time-div"><span>{{formatDate(item.create_time)}}</span></span>
|
|
||||||
</div>
|
|
||||||
<div class="reply-main">
|
|
||||||
<div class="peply-wide" @mouseover="mouseOver(item)" @mouseleave="mouseLeave(item)">
|
|
||||||
<div class="reply-middle"
|
|
||||||
:class="item.type === 'Client' ? 'green-bg' : item.type === 'Admin' ? 'blue-bg' : 'pink-bg'">
|
|
||||||
<div v-html="item.content" @click="hanldeImage($event)" class="replu-conten"></div>
|
|
||||||
</div>
|
|
||||||
<div class="btns">
|
|
||||||
<template v-if="item.type === 'notes'">
|
|
||||||
<div class="text-btn" v-permission="'auth_user_ticket_detail_create_notes'"
|
|
||||||
v-show="item.isShowBtn && item.id != 0 && orderDetailData.can_operate !== 0">
|
|
||||||
<t-button :disabled="orderDetailData.can_operate === 0" shape="circle" class="edit-btn"
|
|
||||||
variant="text" @click="editItem(item)">
|
|
||||||
<t-icon name="edit-1" size="small" style="color:#1862DC" />
|
|
||||||
</t-button>
|
|
||||||
<t-button :disabled="orderDetailData.can_operate === 0" shape="circle" variant="text"
|
|
||||||
@click="deleteItem(item)">
|
|
||||||
<t-icon name="delete" size="small" style="color:#FF0000" />
|
|
||||||
</t-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<div class="text-btn" v-permission="'auth_user_ticket_detail_reply_ticket'"
|
|
||||||
v-show="item.isShowBtn && item.id != 0 && orderDetailData.can_operate !== 0">
|
|
||||||
<t-button :disabled="orderDetailData.can_operate === 0" shape="circle" class="edit-btn"
|
|
||||||
variant="text" @click="editItem(item)">
|
|
||||||
<t-icon name="edit-1" size="small" style="color:#1862DC" />
|
|
||||||
</t-button>
|
|
||||||
<t-button :disabled="orderDetailData.can_operate === 0" shape="circle" variant="text"
|
|
||||||
@click="deleteItem(item)">
|
|
||||||
<t-icon name="delete" size="small" style="color:#FF0000" />
|
|
||||||
</t-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="reply-bottom">
|
|
||||||
<div v-if="item.attachment && item.attachment.length > 0">
|
|
||||||
<div class="reply-list-attachment-item" v-for="(f,i) in item.attachment" :key="i"
|
|
||||||
@click="clickFile(f)">
|
|
||||||
<span :title="f.name">
|
|
||||||
<t-icon name="file-paste" size="small" style="color:#9696A3"></t-icon>{{f.name}}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="time-div"><span>{{formatDate(item.create_time)}}</span></div> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</t-list-item>
|
|
||||||
</t-list>
|
|
||||||
</div>
|
|
||||||
<div class="left-bottom relply-input">
|
|
||||||
<com-tinymce ref="comTinymce"></com-tinymce>
|
|
||||||
</div>
|
|
||||||
<div class="btn-box">
|
|
||||||
|
|
||||||
<div v-if="isEditing">
|
|
||||||
<t-button :disabled="orderDetailData.can_operate === 0" class="ok-btn" @click="handelEdit"
|
|
||||||
:loading="editLoding">{{lang.order_text32}}</t-button>
|
|
||||||
<t-button :disabled="orderDetailData.can_operate === 0" theme="default" class="canle-btn"
|
|
||||||
@click="cancelEdit">{{lang.order_text33}}</t-button>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="isAddNotes">
|
|
||||||
<div>
|
|
||||||
<t-button class="ok-btn" :disabled="orderDetailData.can_operate === 0" @click="handelAddNotes"
|
|
||||||
:loading="addNotesLing"
|
|
||||||
v-if="$checkPermission('auth_user_ticket_detail_create_notes')">{{lang.order_text30}}</t-button>
|
|
||||||
<t-button :disabled="orderDetailData.can_operate === 0" theme="default" class="canle-btn"
|
|
||||||
@click="cancelAddNotes">{{lang.order_text33}}</t-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<div>
|
|
||||||
<t-upload v-model="attachmentList" :action="uploadUrl" :headers="uploadHeaders" multiple
|
|
||||||
:auto-upload="true" :format-response="formatResponse" class="file">
|
|
||||||
<t-button class="upload"><t-icon name="upload"></t-icon>{{lang.order_text99}}</t-button>
|
|
||||||
</t-upload>
|
|
||||||
<t-button :disabled="orderDetailData.can_operate === 0" class="send-btn" @click="submitReply"
|
|
||||||
:loading="sendLoading"
|
|
||||||
v-if="$checkPermission('auth_user_ticket_detail_reply_ticket')">{{lang.order_text34}}</t-button>
|
|
||||||
<t-button theme="default" @click="goList">{{lang.order_text35}}</t-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="left">
|
|
||||||
<template v-if="!isAddNotes">
|
|
||||||
<t-button :disabled="orderDetailData.can_operate === 0" class="add-btn" @click="addNotes"
|
|
||||||
v-show="!isEditing"
|
|
||||||
v-if="$checkPermission('auth_user_ticket_detail_create_notes')">{{lang.order_text30}}
|
|
||||||
</t-button>
|
|
||||||
<t-button :disabled="orderDetailData.can_operate === 0" class=" re-btn" @click="replayVisible = true"
|
|
||||||
v-if="$checkPermission('auth_user_ticket_detail_use_prereply')">{{lang.order_text31}}
|
|
||||||
</t-button>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right-form-box">
|
|
||||||
<t-divider class="reply-divider" align="left">{{lang.order_detail}}</t-divider>
|
|
||||||
<div class="log-btn mt-15" @click="handelLog" v-permission="'auth_user_ticket_detail_ticket_log'">
|
|
||||||
{{lang.order_text21}}
|
|
||||||
</div>
|
|
||||||
<div class="info-title">{{lang.order_text15}}：<span class="info-item">#{{orderDetailData.ticket_num}}-
|
|
||||||
<span v-if="orderDetailData.downstream_delivery === 1">{{lang.order_text78}}</span><span
|
|
||||||
v-if="orderDetailData.upstream_ticket_id > 0">{{lang.order_text79}}</span>{{orderDetailData.title}}
|
|
||||||
</span></div>
|
|
||||||
<div class="info-title" @click="goUserPagr">{{lang.order_text18}}：<span
|
|
||||||
class="blue-text">{{orderDetailData.username}}</span></div>
|
|
||||||
<div class="info-title">{{lang.order_text19}}：<span class="info-item">{{ orderDetailData.create_time ?
|
|
||||||
formatDate(orderDetailData.create_time) : '--'}}</span></div>
|
|
||||||
<div class="info-title">{{lang.order_text20}}：<span class="info-item">{{orderDetailData.distanceTime}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="product-info" v-for="(item,index) in product_obj_list" :key="item.id">
|
|
||||||
<div class="product-item">
|
|
||||||
<span class="info-title">{{lang.order_text102}}：</span>
|
|
||||||
<span @click="goProductDetail(item)" class="host-item">{{item.product_name}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="product-item">
|
|
||||||
<span class="info-title">{{lang.order_text103}}：</span>
|
|
||||||
<span>{{item.name || '--'}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="product-item">
|
|
||||||
<span class="info-title">{{lang.order_text104}}：</span>
|
|
||||||
<span v-if="item.ip_num > 0">{{item.dedicate_ip}}
|
|
||||||
<span v-if="item.ip_num > 1">{{item.ip_num - 1}}
|
|
||||||
</span>
|
|
||||||
<svg class="common-look" @click="copyIp(item)">
|
|
||||||
<use xlink:href="#icon-copy">
|
|
||||||
</use>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<span v-else>--</span>
|
|
||||||
</div>
|
|
||||||
<div class="product-item">
|
|
||||||
<span class="info-title">{{lang.order_text105}}：</span>
|
|
||||||
<span>{{currency_prefix}}{{item.first_payment_amount}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="product-item">
|
|
||||||
<span class="info-title">{{lang.order_text106}}：</span>
|
|
||||||
<span>{{formatDate(item.due_time)}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- start -->
|
|
||||||
<div class="select-box">
|
|
||||||
<div class="left-btn">
|
|
||||||
<div class="mt-15">
|
|
||||||
<span class="info-title">{{lang.order_text22}}：</span>
|
|
||||||
<t-select v-if="orderDetailData.can_operate !== 0" :disabled="orderDetailData.can_operate === 0"
|
|
||||||
class="select-240" :max="1" @change="hostChange" :min-collapsed-num="1" clearable multiple
|
|
||||||
:placeholder="lang.order_text24" clearable v-model="params.selectHostList" :options="hostList"
|
|
||||||
:keys="{ label: 'showName', value: 'id'}" :scroll="{ type: 'virtual' }"
|
|
||||||
:popup-props="{ overlayInnerStyle: { height: '300px' } }">
|
|
||||||
</t-select>
|
|
||||||
<template v-else>
|
|
||||||
<span class="host-div" v-if="product_obj_list !==0">
|
|
||||||
<span v-for="(item,index) in product_obj_list" :key="item.id" class="host-item"
|
|
||||||
@click="goProductDetail(item)">
|
|
||||||
{{item.showName}}
|
|
||||||
<span v-if="(index !== product_obj_list.length - 1) && product_obj_list.length !== 1">、</span>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span class="host-div" v-else>
|
|
||||||
<span class="host-item">--</span>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<div class="mt-15">
|
|
||||||
<span class="info-title">{{lang.order_text65}}：</span>
|
|
||||||
<t-select class="select-240" :placeholder="lang.please_search_order_type" clearable
|
|
||||||
v-model="params.ticket_type" :keys="{ label: 'name', value: 'id' }" :options="orderTypeList"></t-select>
|
|
||||||
</div>
|
|
||||||
<div class="mt-15">
|
|
||||||
<span class="info-title">{{lang.order_text25}}：</span>
|
|
||||||
<t-select :disabled="orderDetailData.can_operate === 0" class="select-240 no-mar"
|
|
||||||
:placeholder="lang.please_search_order_status" clearable v-model="params.status"
|
|
||||||
:keys="{ label: 'name', value: 'id'}" :options="order_status_options"></t-select>
|
|
||||||
</div>
|
|
||||||
<div class="save-btn">
|
|
||||||
<t-button @click="handelEditOrderStatus" :loading="editLoding"
|
|
||||||
v-permission="'auth_user_ticket_detail_save_ticket'">{{lang.order_text13}}</t-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<t-button v-if="orderDetailData.delivery_operate !== 0"
|
|
||||||
@click="deliveryVisible = true">{{delivery_operate_type[orderDetailData.delivery_operate]}}</t-button>
|
|
||||||
</div>
|
|
||||||
<!-- end -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<t-back-top container=".area" :visible-height="0" style="position: fixed" :offset="['30px', '245px']"
|
|
||||||
:duration="200">
|
|
||||||
<template #content>
|
|
||||||
<div>
|
|
||||||
<t-icon name="backtop" size="28"></t-icon>
|
|
||||||
<div>{{lang.order_text100}}</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</t-back-top>
|
|
||||||
|
|
||||||
<t-back-top :visible-height="0" style="position: fixed" :offset="['30px', '165px']" :duration="200">
|
|
||||||
<template #content>
|
|
||||||
<div @click="goBotoom" class="center-box">
|
|
||||||
<t-icon name="backtop" size="28" style="transform:rotate(180deg);"></t-icon>
|
|
||||||
<div>{{lang.order_text101}}</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</t-back-top>
|
|
||||||
|
|
||||||
<!-- 删除弹窗 -->
|
|
||||||
<t-dialog :visible.sync="deleteVisible" :header="lang.order_text36" :body="lang.order_text37"
|
|
||||||
@confirm="handelDelete" @close="deleteVisible = false">
|
|
||||||
</t-dialog>
|
|
||||||
<!-- 传递弹窗 -->
|
|
||||||
<t-dialog theme="danger" :visible.sync="deliveryVisible"
|
|
||||||
:header="lang.order_text84 + delivery_operate_type[orderDetailData.delivery_operate] + '?'">
|
|
||||||
<template slot="footer">
|
|
||||||
<t-button theme="primary" @click="handelDeliveryOperate" :loading="deliveryLoading">{{lang.sure}}</t-button>
|
|
||||||
<t-button theme="default" @click="deliveryVisible = false">{{lang.cancel}}</t-button>
|
|
||||||
</template>
|
|
||||||
</t-dialog>
|
|
||||||
<!-- 日志记录弹窗 -->
|
|
||||||
<t-dialog :header="lang.order_text21" placement="center" :visible.sync="logVisible" width="800" :footer="false">
|
|
||||||
<t-table :pagination="pagination" @page-change="onPageChange" row-key="index" :data="logList" :columns="columns">
|
|
||||||
<template #description="slotProps">
|
|
||||||
<div class="description-box" v-html="slotProps.row.description"></div>
|
|
||||||
</template>
|
|
||||||
<template #create_time="slotProps">
|
|
||||||
<div>{{formatDate(slotProps.row.create_time)}}</div>
|
|
||||||
</template>
|
|
||||||
</t-table>
|
|
||||||
</t-dialog>
|
|
||||||
<!-- 预设回复弹窗 -->
|
|
||||||
<t-dialog :header="lang.order_text38" :placement="top" :close-btn="false" :confirm-btn="null" :top="'20%'"
|
|
||||||
:visible.sync="replayVisible" width="1300">
|
|
||||||
<div class="replay-box">
|
|
||||||
<div class="replay-item" @click="usePrePlay(item)" v-for="item in prereplyList" :key="item.id"
|
|
||||||
v-html="item.content"></div>
|
|
||||||
</div>
|
|
||||||
</t-dialog>
|
|
||||||
<div>
|
|
||||||
<img id="viewer" :src="preImg" alt="">
|
|
||||||
</div>
|
|
||||||
</com-config>
|
|
||||||
</div>
|
|
||||||
<!-- =======页面独有======= -->
|
|
||||||
<script src="/plugins/addon/idcsmart_ticket/template/admin/js/lang.js"></script>
|
|
||||||
|
|
||||||
<script src="/plugins/addon/idcsmart_ticket/template/admin/api/order.js"></script>
|
|
||||||
<script src="/plugins/addon/idcsmart_ticket/template/admin/js/ticket_detail.js"></script>
|
|
||||||
<script src="/tinymce/tinymce.min.js"></script>
|
|
||||||
<script src="/plugins/addon/idcsmart_ticket/template/admin/js/common/viewer.min.js"></script>
|
|
||||||
<script src="/plugins/addon/idcsmart_ticket/template/admin/js/xss.js"></script>
|
|
||||||
<script src="/{$template_catalog}/template/{$themes}/components/comTinymce/comTinymce.js"></script>
|
|
||||||
@@ -7,6 +7,30 @@
|
|||||||
.template {
|
.template {
|
||||||
max-width: 1400px;
|
max-width: 1400px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 隐藏加载时的闪烁 */
|
||||||
|
[v-cloak] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 页面标题优化 */
|
||||||
|
.template > h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1e293b;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
border-bottom: 2px solid #e2e8f0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.template > h1::before {
|
||||||
|
content: '🎨';
|
||||||
|
font-size: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 卡片优化 - 增加层次感和呼吸感 */
|
/* 卡片优化 - 增加层次感和呼吸感 */
|
||||||
@@ -16,17 +40,33 @@
|
|||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
background: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-card:hover {
|
.theme-card:hover {
|
||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片标题优化 */
|
||||||
|
.theme-card .t-card__title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1e293b;
|
||||||
|
padding: 20px 24px;
|
||||||
|
border-bottom: 2px solid #f1f5f9;
|
||||||
|
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-card .t-card__body {
|
||||||
|
padding: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 表单网格 - 优化间距和布局 */
|
/* 表单网格 - 优化间距和布局 */
|
||||||
.form-grid {
|
.form-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
gap: 20px;
|
gap: 24px;
|
||||||
padding: 4px 0;
|
padding: 4px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -34,7 +74,7 @@
|
|||||||
.form-item {
|
.form-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 70px;
|
min-height: 76px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-item--full {
|
.form-item--full {
|
||||||
@@ -44,9 +84,9 @@
|
|||||||
/* 标签样式优化 - 更清晰的视觉层次 */
|
/* 标签样式优化 - 更清晰的视觉层次 */
|
||||||
.form-item label {
|
.form-item label {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
color: #374151;
|
color: #374151;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
@@ -55,11 +95,11 @@
|
|||||||
.form-item label::before {
|
.form-item label::before {
|
||||||
content: '';
|
content: '';
|
||||||
width: 3px;
|
width: 3px;
|
||||||
height: 14px;
|
height: 16px;
|
||||||
background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%);
|
background: linear-gradient(180deg, #38BDF8 0%, #6366F1 100%);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
margin-right: 8px;
|
margin-right: 10px;
|
||||||
opacity: 0.6;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Switch 开关优化 - 解决"新窗口打开"文字过长问题 */
|
/* Switch 开关优化 - 解决"新窗口打开"文字过长问题 */
|
||||||
@@ -67,10 +107,10 @@
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
min-height: 48px;
|
min-height: 52px;
|
||||||
padding: 12px 16px;
|
padding: 14px 18px;
|
||||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||||
border-radius: 8px;
|
border-radius: 10px;
|
||||||
border: 1px solid #e2e8f0;
|
border: 1px solid #e2e8f0;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
@@ -78,82 +118,86 @@
|
|||||||
.form-item--switch:hover {
|
.form-item--switch:hover {
|
||||||
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
|
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
|
||||||
border-color: #cbd5e1;
|
border-color: #cbd5e1;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-item--switch label {
|
.form-item--switch label {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
font-size: 13px;
|
font-size: 14px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
|
||||||
|
|
||||||
.form-item--switch label::before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Switch 标签图标优化 */
|
|
||||||
.switch-label {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
color: #64748b;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-item--switch label::before {
|
||||||
|
background: linear-gradient(180deg, #38BDF8 0%, #6366F1 100%);
|
||||||
|
height: 14px;
|
||||||
|
width: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Switch 标签图标优化 */
|
||||||
.switch-label-icon {
|
.switch-label-icon {
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 10px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
|
margin-right: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 提示文本优化 */
|
/* 提示文本优化 */
|
||||||
.theme-tip {
|
.theme-tip {
|
||||||
margin: 0 0 16px;
|
margin: 0 0 20px;
|
||||||
padding: 12px 16px;
|
padding: 14px 18px;
|
||||||
background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);
|
background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);
|
||||||
border-left: 3px solid #3b82f6;
|
border-left: 4px solid #38BDF8;
|
||||||
border-radius: 6px;
|
border-radius: 8px;
|
||||||
color: #475569;
|
color: #475569;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 1.6;
|
line-height: 1.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-tip code {
|
.theme-tip code {
|
||||||
padding: 2px 6px;
|
padding: 3px 8px;
|
||||||
background: rgba(59, 130, 246, 0.1);
|
background: rgba(56, 189, 248, 0.12);
|
||||||
border-radius: 3px;
|
border-radius: 4px;
|
||||||
color: #3b82f6;
|
color: #38BDF8;
|
||||||
font-family: 'JetBrains Mono', Consolas, monospace;
|
font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* JSON 编辑器优化 */
|
/* JSON 编辑器优化 */
|
||||||
.theme-textarea textarea {
|
.theme-textarea textarea {
|
||||||
font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
|
font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 1.6;
|
line-height: 1.7;
|
||||||
background: #1e293b;
|
background: #0f172a;
|
||||||
color: #e2e8f0;
|
color: #e2e8f0;
|
||||||
border-radius: 8px;
|
border-radius: 10px;
|
||||||
padding: 16px !important;
|
padding: 18px !important;
|
||||||
|
border: 1px solid #1e293b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-textarea textarea:focus {
|
||||||
|
background: #1e293b;
|
||||||
|
border-color: #38BDF8;
|
||||||
|
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 轮播/配置项卡片优化 - 更有层次感 */
|
/* 轮播/配置项卡片优化 - 更有层次感 */
|
||||||
.banner-item,
|
.banner-item,
|
||||||
.config-item {
|
.config-item {
|
||||||
border: 1px solid #e2e8f0;
|
border: 1px solid #e2e8f0;
|
||||||
border-radius: 10px;
|
border-radius: 12px;
|
||||||
padding: 20px;
|
padding: 24px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 24px;
|
||||||
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
||||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -167,7 +211,7 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 4px;
|
height: 4px;
|
||||||
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
|
background: linear-gradient(90deg, #38BDF8 0%, #6366F1 50%, #8B5CF6 100%);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.3s ease;
|
transition: opacity 0.3s ease;
|
||||||
}
|
}
|
||||||
@@ -175,8 +219,8 @@
|
|||||||
.banner-item:hover,
|
.banner-item:hover,
|
||||||
.config-item:hover {
|
.config-item:hover {
|
||||||
border-color: #cbd5e1;
|
border-color: #cbd5e1;
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
|
||||||
transform: translateY(-2px);
|
transform: translateY(-3px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner-item:hover::before,
|
.banner-item:hover::before,
|
||||||
@@ -190,48 +234,48 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 24px;
|
||||||
padding-bottom: 12px;
|
padding-bottom: 14px;
|
||||||
border-bottom: 2px solid #f1f5f9;
|
border-bottom: 2px solid #f1f5f9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner-item__header h4,
|
.banner-item__header h4,
|
||||||
.config-item__header h4 {
|
.config-item__header h4 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 16px;
|
font-size: 17px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
color: #1e293b;
|
color: #1e293b;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner-item__header h4::before,
|
.banner-item__header h4::before,
|
||||||
.config-item__header h4::before {
|
.config-item__header h4::before {
|
||||||
content: '●';
|
content: '●';
|
||||||
color: #3b82f6;
|
color: #38BDF8;
|
||||||
font-size: 12px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 子标题优化 */
|
/* 子标题优化 */
|
||||||
.sub-title {
|
.sub-title {
|
||||||
margin: 24px 0 12px;
|
margin: 32px 0 16px;
|
||||||
padding-left: 12px;
|
padding-left: 14px;
|
||||||
font-size: 15px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
color: #475569;
|
color: #475569;
|
||||||
border-left: 3px solid #3b82f6;
|
border-left: 4px solid #38BDF8;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 空状态优化 - 更友好的视觉引导 */
|
/* 空状态优化 - 更友好的视觉引导 */
|
||||||
.empty-tip {
|
.empty-tip {
|
||||||
padding: 32px 24px;
|
padding: 40px 24px;
|
||||||
border: 2px dashed #cbd5e1;
|
border: 2px dashed #cbd5e1;
|
||||||
border-radius: 10px;
|
border-radius: 12px;
|
||||||
color: #64748b;
|
color: #64748b;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 24px;
|
||||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@@ -243,9 +287,9 @@
|
|||||||
.empty-tip::before {
|
.empty-tip::before {
|
||||||
content: '📋';
|
content: '📋';
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 32px;
|
font-size: 36px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
opacity: 0.6;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-tip:hover {
|
.empty-tip:hover {
|
||||||
@@ -257,7 +301,7 @@
|
|||||||
.upload-row {
|
.upload-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-row .t-input {
|
.upload-row .t-input {
|
||||||
@@ -266,7 +310,7 @@
|
|||||||
|
|
||||||
.upload-row .t-button {
|
.upload-row .t-button {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
min-width: 80px;
|
min-width: 90px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 底部操作栏优化 */
|
/* 底部操作栏优化 */
|
||||||
@@ -275,12 +319,12 @@
|
|||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
margin-top: 32px;
|
margin-top: 40px;
|
||||||
padding: 20px 24px;
|
padding: 24px;
|
||||||
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
|
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
border: 1px solid #e2e8f0;
|
border: 1px solid #e2e8f0;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||||
position: sticky;
|
position: sticky;
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
@@ -288,24 +332,26 @@
|
|||||||
|
|
||||||
/* 按钮增强 */
|
/* 按钮增强 */
|
||||||
.action-bar .t-button {
|
.action-bar .t-button {
|
||||||
min-width: 120px;
|
min-width: 130px;
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
padding: 10px 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-bar .t-button--primary {
|
.action-bar .t-button--primary {
|
||||||
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
|
||||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
box-shadow: 0 4px 14px rgba(56, 189, 248, 0.35);
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-bar .t-button--primary:hover {
|
.action-bar .t-button--primary:hover {
|
||||||
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
|
box-shadow: 0 6px 20px rgba(56, 189, 248, 0.45);
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 间距工具类优化 */
|
/* 间距工具类优化 */
|
||||||
.mt-10 {
|
.mt-10 {
|
||||||
margin-top: 16px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ml-10 {
|
.ml-10 {
|
||||||
@@ -313,29 +359,41 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.mb-10 {
|
.mb-10 {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tab 标签页优化 */
|
/* Tab 标签页优化 */
|
||||||
.t-tabs__nav {
|
.t-tabs__nav {
|
||||||
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
||||||
border-radius: 10px 10px 0 0;
|
border-radius: 12px 12px 0 0;
|
||||||
padding: 8px;
|
padding: 10px;
|
||||||
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-tab {
|
.t-tab {
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
|
font-size: 15px;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-tab:hover {
|
||||||
|
background: rgba(56, 189, 248, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-tab.t-is-active {
|
.t-tab.t-is-active {
|
||||||
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%) !important;
|
||||||
color: white !important;
|
color: white !important;
|
||||||
border-radius: 6px;
|
box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 响应式优化 */
|
/* 响应式优化 */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
.template {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.form-grid {
|
.form-grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
@@ -343,12 +401,14 @@
|
|||||||
|
|
||||||
.banner-item,
|
.banner-item,
|
||||||
.config-item {
|
.config-item {
|
||||||
padding: 16px;
|
padding: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-bar {
|
.action-bar {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 8px;
|
gap: 10px;
|
||||||
|
position: relative;
|
||||||
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-bar .t-button {
|
.action-bar .t-button {
|
||||||
@@ -364,36 +424,37 @@
|
|||||||
|
|
||||||
/* 滚动条美化 */
|
/* 滚动条美化 */
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 8px;
|
width: 10px;
|
||||||
height: 8px;
|
height: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background: #f1f5f9;
|
background: #f1f5f9;
|
||||||
border-radius: 4px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%);
|
background: linear-gradient(180deg, #38BDF8 0%, #6366F1 100%);
|
||||||
border-radius: 4px;
|
border-radius: 5px;
|
||||||
transition: background 0.3s ease;
|
transition: background 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
background: linear-gradient(180deg, #2563eb 0%, #7c3aed 100%);
|
background: linear-gradient(180deg, #0EA5E9 0%, #4F46E5 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 输入框聚焦优化 */
|
/* 输入框聚焦优化 */
|
||||||
.t-input:focus-within,
|
.t-input:focus-within,
|
||||||
.t-textarea:focus-within {
|
.t-textarea:focus-within {
|
||||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
|
||||||
border-color: #3b82f6;
|
border-color: #38BDF8;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 加载状态优化 */
|
/* 加载状态优化 */
|
||||||
.t-button--loading {
|
.t-button--loading {
|
||||||
opacity: 0.7;
|
opacity: 0.6;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 删除按钮优化 */
|
/* 删除按钮优化 */
|
||||||
@@ -403,7 +464,7 @@
|
|||||||
|
|
||||||
.t-button--danger:hover {
|
.t-button--danger:hover {
|
||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 成功状态提示 */
|
/* 成功状态提示 */
|
||||||
@@ -411,25 +472,44 @@
|
|||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
padding: 4px 12px;
|
padding: 6px 14px;
|
||||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||||
color: white;
|
color: white;
|
||||||
border-radius: 16px;
|
border-radius: 20px;
|
||||||
font-size: 12px;
|
font-size: 13px;
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
|
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 表单验证提示 */
|
/* 表单验证提示 */
|
||||||
.form-error {
|
.form-error {
|
||||||
color: #ef4444;
|
color: #ef4444;
|
||||||
font-size: 12px;
|
font-size: 13px;
|
||||||
margin-top: 4px;
|
margin-top: 6px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4px;
|
gap: 6px;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-error::before {
|
.form-error::before {
|
||||||
content: '⚠';
|
content: '⚠';
|
||||||
font-size: 14px;
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 动画效果 */
|
||||||
|
@keyframes slideIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-item,
|
||||||
|
.config-item {
|
||||||
|
animation: slideIn 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user