Bladeren bron

refactor(styles): 将营销活动页面的样式提取到单独的文件中

yz 1 maand geleden
bovenliggende
commit
eea61baffc
2 gewijzigde bestanden met toevoegingen van 258 en 286 verwijderingen
  1. 256 0
      src/views/order/marketing-activity/index.scss
  2. 2 286
      src/views/order/marketing-activity/index.vue

+ 256 - 0
src/views/order/marketing-activity/index.scss

@@ -0,0 +1,256 @@
+/* 附件缩略图样式 */
+.attachment-thumbnail {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 60px;
+    height: 60px;
+    margin: 0 auto;
+    border: 1px solid #e8e8e8;
+    border-radius: 4px;
+    background-color: #fafafa;
+    overflow: hidden;
+}
+
+.thumbnail-image {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: cover;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+
+.thumbnail-image:hover {
+    transform: scale(1.1);
+}
+
+.file-type-icon {
+    font-size: 24px;
+    color: #666;
+}
+
+.error-icon {
+    font-size: 24px;
+    color: #ccc;
+}
+
+.clickable-filename {
+    color: #409eff;
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+.clickable-filename:hover {
+    color: #66b1ff;
+}
+
+/* 图片预览弹窗样式 */
+.image-preview-dialog .el-dialog__body {
+    padding: 20px;
+    text-align: center;
+}
+
+.image-preview-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400px;
+    max-height: 70vh;
+    overflow: hidden;
+}
+
+.preview-image {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 4px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.image-error {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #999;
+}
+
+.image-error i {
+    font-size: 48px;
+    margin-bottom: 10px;
+}
+
+.image-error p {
+    margin: 0;
+    font-size: 14px;
+}
+
+/* 附件表格优化 */
+.detail-section .el-table {
+    margin-top: 10px;
+    font-size: 13px;
+}
+
+.detail-section .el-table th {
+    background-color: #f5f7fa;
+    color: #333;
+    font-weight: 600;
+}
+
+.detail-section .el-table td {
+    padding: 12px 0;
+}
+
+.detail-section .el-button--text {
+    padding: 0;
+    margin: 0 4px;
+    font-size: 12px;
+}
+
+.detail-section .el-tag {
+    border-radius: 2px;
+}
+
+.approval-records-header {
+    margin-bottom: 20px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #ebeef5;
+}
+
+.approval-records-header h4 {
+    margin: 0 0 8px 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+}
+
+.approval-records-header p {
+    margin: 0;
+    font-size: 14px;
+    color: #606266;
+}
+
+.approval-records-pagination {
+    margin-top: 20px;
+    text-align: right;
+}
+
+.dialog-footer {
+    text-align: right;
+}
+
+/* 查看详情弹窗样式 */
+.activity-detail-dialog .el-dialog__body {
+    padding: 20px;
+    max-height: 70vh;
+    overflow-y: auto;
+}
+
+.activity-detail-container {
+    min-height: 200px;
+}
+
+.activity-detail-content {
+    padding: 0;
+}
+
+.detail-section {
+    margin-bottom: 30px;
+    padding: 20px;
+    background: #fafafa;
+    border-radius: 6px;
+    border: 1px solid #e8e8e8;
+}
+
+.detail-section:last-child {
+    margin-bottom: 0;
+}
+
+.section-title {
+    margin: 0 0 20px 0;
+    padding-bottom: 10px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    border-bottom: 2px solid #409eff;
+}
+
+.detail-item {
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+}
+
+.detail-item:last-child {
+    margin-bottom: 0;
+}
+
+.detail-item label {
+    min-width: 100px;
+    font-weight: 500;
+    color: #666;
+    margin-right: 10px;
+}
+
+.detail-item span {
+    color: #333;
+    word-break: break-all;
+}
+
+.description-content {
+    padding: 15px;
+    background: #fff;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+    line-height: 1.6;
+    color: #333;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+/* 弹窗底部按钮 */
+.dialog-footer {
+    text-align: center;
+    padding: 20px 0 10px 0;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .image-preview-dialog {
+        width: 95% !important;
+    }
+
+    .attachment-thumbnail {
+        width: 50px;
+        height: 50px;
+    }
+
+    .thumbnail-image {
+        max-width: 100%;
+        max-height: 100%;
+    }
+
+    .activity-detail-dialog {
+        width: 95% !important;
+    }
+
+    .detail-item {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .detail-item label {
+        min-width: auto;
+        margin-bottom: 5px;
+    }
+
+    .detail-section .el-table {
+        font-size: 12px;
+    }
+}
+
+@media (max-width: 1200px) {
+    .activity-detail-dialog {
+        width: 90% !important;
+    }
+}

+ 2 - 286
src/views/order/marketing-activity/index.vue

@@ -1378,290 +1378,6 @@ export default {
 }
 </script>
 
-<style scoped>
-/* 附件缩略图样式 */
-.attachment-thumbnail {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 60px;
-    height: 60px;
-    margin: 0 auto;
-    border: 1px solid #e8e8e8;
-    border-radius: 4px;
-    background-color: #fafafa;
-    overflow: hidden;
-}
-
-.thumbnail-image {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: cover;
-    cursor: pointer;
-    transition: transform 0.2s ease;
-}
-
-.thumbnail-image:hover {
-    transform: scale(1.1);
-}
-
-.file-type-icon {
-    font-size: 24px;
-    color: #666;
-}
-
-.error-icon {
-    font-size: 24px;
-    color: #ccc;
-}
-
-.clickable-filename {
-    color: #409eff;
-    cursor: pointer;
-    text-decoration: underline;
-}
-
-.clickable-filename:hover {
-    color: #66b1ff;
-}
-
-/* 图片预览弹窗样式 */
-.image-preview-dialog .el-dialog__body {
-    padding: 20px;
-    text-align: center;
-}
-
-.image-preview-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 400px;
-    max-height: 70vh;
-    overflow: hidden;
-}
-
-.preview-image {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-    border-radius: 4px;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-}
-
-.image-error {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    color: #999;
-}
-
-.image-error i {
-    font-size: 48px;
-    margin-bottom: 10px;
-}
-
-.image-error p {
-    margin: 0;
-    font-size: 14px;
-}
-
-/* 附件表格优化 */
-.detail-section .el-table {
-    margin-top: 10px;
-    font-size: 13px;
-}
-
-.detail-section .el-table th {
-    background-color: #f5f7fa;
-    color: #333;
-    font-weight: 600;
-}
-
-.detail-section .el-table td {
-    padding: 12px 0;
-}
-
-.detail-section .el-button--text {
-    padding: 0;
-    margin: 0 4px;
-    font-size: 12px;
-}
-
-.detail-section .el-tag {
-    border-radius: 2px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-    .image-preview-dialog {
-        width: 95% !important;
-    }
-
-    .attachment-thumbnail {
-        width: 50px;
-        height: 50px;
-    }
-
-    .thumbnail-image {
-        max-width: 100%;
-        max-height: 100%;
-    }
-}
-
-.approval-records-header {
-    margin-bottom: 20px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #ebeef5;
-}
-
-.approval-records-header h4 {
-    margin: 0 0 8px 0;
-    font-size: 16px;
-    font-weight: 600;
-    color: #303133;
-}
-
-.approval-records-header p {
-    margin: 0;
-    font-size: 14px;
-    color: #606266;
-}
-
-.approval-records-pagination {
-    margin-top: 20px;
-    text-align: right;
-}
-
-.dialog-footer {
-    text-align: right;
-}
-
-/* 查看详情弹窗样式 */
-.activity-detail-dialog .el-dialog__body {
-    padding: 20px;
-    max-height: 70vh;
-    overflow-y: auto;
-}
-
-.activity-detail-container {
-    min-height: 200px;
-}
-
-.activity-detail-content {
-    padding: 0;
-}
-
-.detail-section {
-    margin-bottom: 30px;
-    padding: 20px;
-    background: #fafafa;
-    border-radius: 6px;
-    border: 1px solid #e8e8e8;
-}
-
-.detail-section:last-child {
-    margin-bottom: 0;
-}
-
-.section-title {
-    margin: 0 0 20px 0;
-    padding-bottom: 10px;
-    font-size: 16px;
-    font-weight: 600;
-    color: #333;
-    border-bottom: 2px solid #409eff;
-}
-
-.detail-item {
-    margin-bottom: 15px;
-    display: flex;
-    align-items: center;
-}
-
-.detail-item:last-child {
-    margin-bottom: 0;
-}
-
-.detail-item label {
-    min-width: 100px;
-    font-weight: 500;
-    color: #666;
-    margin-right: 10px;
-}
-
-.detail-item span {
-    color: #333;
-    word-break: break-all;
-}
-
-.description-content {
-    padding: 15px;
-    background: #fff;
-    border-radius: 4px;
-    border: 1px solid #ddd;
-    line-height: 1.6;
-    color: #333;
-    white-space: pre-wrap;
-    word-break: break-word;
-}
-
-/* 附件表格样式 */
-.detail-section .el-table {
-    margin-top: 10px;
-    font-size: 13px;
-}
-
-.detail-section .el-table th {
-    background-color: #f5f7fa;
-    color: #333;
-    font-weight: 600;
-}
-
-.detail-section .el-table td {
-    padding: 8px 0;
-}
-
-.detail-section .el-button--text {
-    padding: 0;
-    margin: 0 4px;
-    font-size: 12px;
-}
-
-.detail-section .el-tag {
-    border-radius: 2px;
-}
-
-/* 弹窗底部按钮 */
-.dialog-footer {
-    text-align: center;
-    padding: 20px 0 10px 0;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-    .activity-detail-dialog {
-        width: 95% !important;
-    }
-
-    .detail-item {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    .detail-item label {
-        min-width: auto;
-        margin-bottom: 5px;
-    }
-
-    .detail-section .el-table {
-        font-size: 12px;
-    }
-}
-
-@media (max-width: 1200px) {
-    .activity-detail-dialog {
-        width: 90% !important;
-    }
-}
+<style lang="scss" scoped >
+@import './index.scss'
 </style>