appointment-detail.wxss
5.47 KB
.container{min-height:100vh;background:linear-gradient(135deg,#e8f5e9,#b2dfdb);padding:20px}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.back-btn{background:#fff;border:none;border-radius:12px;padding:8px 12px;color:#388e3c;font-size:.9em;box-shadow:0 2px 8px rgba(76,175,80,.15)}.title{text-align:center;color:#388e3c;margin:10px 0;letter-spacing:2px;font-size:1.2em;font-weight:700}.detail-card{background:#fff;border-radius:16px;box-shadow:0 4px 16px rgba(76,175,80,.1);overflow:hidden;margin-bottom:20px}.detail-header{background:linear-gradient(120deg,#43e97b,#38f9d7);padding:20px;color:#fff;text-align:center}.customer-name{font-size:1.3em;font-weight:700;margin-bottom:8px}.customer-phone{font-size:1em;opacity:.9}.detail-content{padding:20px}.detail-section{margin-bottom:24px}.detail-section:last-child{margin-bottom:0}.section-title{font-size:1.1em;font-weight:600;color:#2e7d32;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid #e8f5e9;letter-spacing:1px}.detail-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #f0f0f0}.detail-row:last-child{border-bottom:none}.detail-label{color:#6a9c6a;font-weight:500;font-size:.95em;min-width:80px}.detail-value{color:#2e7d32;font-weight:500;text-align:right;flex:1;margin-left:16px}.status-badge{padding:4px 12px;border-radius:12px;font-size:.85em;font-weight:500}.status-badge.success{background:#e8f5e9;color:#2e7d32}.status-badge.failed{background:#ffebee;color:#c62828}.status-badge.pending{background:#fff3e0;color:#ef6c00}.loading{text-align:center;padding:60px 20px;color:#6a9c6a;font-size:1.1em}.error-state{text-align:center;padding:60px 20px;color:#c62828}.retry-btn{background:#43a047;color:#fff;border:none;border-radius:8px;padding:12px 24px;margin-top:16px;font-size:1em}.action-buttons{display:flex;gap:12px;margin-top:20px}.action-btn{flex:1;padding:8px 12px;border:none;border-radius:8px;font-size:.9em;font-weight:500}.action-btn.primary{background:linear-gradient(135deg,#43e97b,#38f9d7);color:#fff;box-shadow:0 4px 16px rgba(67,233,123,.3)}.action-btn.secondary{background:#f5f5f5;color:#666;border:1px solid #ddd}.custom-alert{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000}.alert-content{background:#fff;border-radius:12px;padding:24px;max-width:280px;width:85%;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}.alert-icon{width:50px;height:50px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px}.alert-icon.success{background:#e8f5e9;color:#43a047}.alert-icon.error{background:#ffebee;color:#c62828}.alert-icon.warning{background:#fff3e0;color:#ef6c00}.alert-title{font-size:1.1em;font-weight:600;color:#333;margin-bottom:10px}.alert-message{color:#666;line-height:1.4;margin-bottom:20px;font-size:.95em}.alert-buttons{display:flex;gap:12px;justify-content:center}.alert-btn{padding:8px 20px;border:none;border-radius:6px;font-size:.9em;font-weight:500;min-width:70px}.alert-btn.primary{background:#43a047;color:#fff}.alert-btn.secondary{background:#f5f5f5;color:#666;border:1px solid #ddd}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:hsla(0,0%,100%,.9);display:flex;align-items:center;justify-content:center;z-index:999}.loading-spinner{width:40px;height:40px;border:4px solid #e8f5e9;border-radius:50%;border-top-color:#43a047;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1001}.remark-dialog{background:#fff;border-radius:16px;overflow:hidden;width:85%;max-width:500px;box-shadow:0 8px 24px rgba(0,0,0,.25)}.dialog-header{background:linear-gradient(120deg,#43e97b,#38f9d7);padding:20px 24px;display:flex;align-items:center;justify-content:space-between}.dialog-title{color:#fff;font-size:1.1em;font-weight:600;letter-spacing:1px}.dialog-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;background:hsla(0,0%,100%,.2);transition:background .3s}.dialog-close:hover{background:hsla(0,0%,100%,.3)}.close-icon{color:#fff;font-size:18px;font-weight:700}.dialog-content{padding:24px}.remark-section{display:flex;flex-direction:column}.remark-label{font-size:.95em;color:#2e7d32;font-weight:500;margin-bottom:12px}.remark-input{width:100%;min-height:120px;padding:12px;border:1px solid #e0e0e0;border-radius:8px;font-size:.9em;color:#333;background:#fafafa;resize:none;box-sizing:border-box}.remark-input:focus{border-color:#43a047;background:#fff;outline:none}.dialog-buttons{display:flex;gap:12px;padding:16px 24px;border-top:1px solid #f0f0f0}.dialog-btn{flex:1;padding:10px 20px;border:none;border-radius:8px;font-size:.95em;font-weight:500;cursor:pointer;transition:all .3s}.dialog-btn:disabled{opacity:.5;cursor:not-allowed}.cancel-dialog-btn{background:#f5f5f5;color:#666;border:1px solid #ddd}.cancel-dialog-btn:active{background:#e0e0e0}.confirm-dialog-btn{background:linear-gradient(135deg,#43e97b,#38f9d7);color:#fff;box-shadow:0 4px 12px rgba(67,233,123,.3)}.confirm-dialog-btn:active:not(:disabled){-webkit-transform:translateY(1px);transform:translateY(1px);box-shadow:0 2px 8px rgba(67,233,123,.3)}