修改样式、功能完成，待测试

public/css/cai.css

@@ -191,6 +191,27 @@
 .cxz-data-table {
   width: 100%;
   border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.cxz-data-table .cxz-col-expert {
+  width: 30%;
+}
+
+.cxz-data-table .cxz-col-issue {
+  width: 22%;
+}
+
+.cxz-data-table .cxz-col-recommend {
+  width: 22%;
+}
+
+.cxz-data-table .cxz-col-rate {
+  width: 13%;
+}
+
+.cxz-data-table .cxz-col-action {
+  width: 13%;
 }
 
 .cxz-data-table thead {
@@ -216,12 +237,28 @@
   vertical-align: middle;
 }
 
+.cxz-data-table th:nth-child(1),
+.cxz-data-table td:nth-child(1) {
+  text-align: left;
+}
+
+.cxz-data-table td:nth-child(2),
+.cxz-data-table td:nth-child(3) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .cxz-data-table tbody tr {
   transition: background 0.2s ease;
 }
 
+.cxz-table-box .cxz-data-table tbody tr:nth-child(even) {
+  background: #eef4fc;
+}
+
 .cxz-data-table tbody tr:hover {
-  background: var(--bg-light, #f4f6fb);
+  background: #e4edf9;
 }
 
 .cxz-data-table tbody tr:last-child td {
@@ -282,136 +319,51 @@
   border-radius: var(--radius-md, 8px) !important;
 }
 
-/* ----------------------------------------------------------
-   5. Ranking Box
-   ---------------------------------------------------------- */
-.cxz-ranking-box {
-  background: var(--white, #ffffff);
-  border-radius: var(--radius-lg, 12px);
-  overflow: hidden;
-  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.08));
-  margin-bottom: 20px;
-  border: 1px solid var(--border-light, #e5e7eb);
-}
-
-.cxz-ranking-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  border-bottom: 2px solid var(--gold, #fdb933);
-  background: linear-gradient(135deg, var(--bg-light, #f4f6fb), #ffffff);
-}
-
-.cxz-ranking-title {
-  font-size: 16px;
-  font-weight: 700;
-  color: var(--primary, #102b6a);
-  padding-left: 14px;
-  border-left: 4px solid var(--gold, #fdb933);
-  line-height: 1.4;
-}
-
-.cxz-rank-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.cxz-rank-table thead {
-  background: var(--bg-light, #f4f6fb);
-}
-
-.cxz-rank-table th {
-  padding: 12px 16px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-muted, #6b7280);
-  text-align: center;
-  white-space: nowrap;
-  border-bottom: 1px solid var(--border-light, #e5e7eb);
-}
-
-.cxz-rank-table td {
-  padding: 14px 16px;
-  font-size: 14px;
-  text-align: center;
-  border-bottom: 1px solid var(--border-light, #e5e7eb);
-  color: var(--text-dark, #1a1a2e);
-  vertical-align: middle;
-}
-
-.cxz-rank-table tbody tr {
-  transition: background 0.2s ease;
-}
-
-.cxz-rank-table tbody tr:hover {
-  background: var(--bg-light, #f4f6fb);
-}
-
-.cxz-rank-table tbody tr:last-child td {
-  border-bottom: none;
-}
-
-/* Highlight top-3 rows */
-.cxz-rank-table tbody tr:nth-child(1) {
-  background: rgba(253, 185, 51, 0.04);
-}
-
-.cxz-rank-table tbody tr:nth-child(2) {
-  background: rgba(192, 192, 192, 0.04);
-}
-
-.cxz-rank-table tbody tr:nth-child(3) {
-  background: rgba(205, 127, 50, 0.04);
-}
-
-/* ----------------------------------------------------------
-   6. Rank Badges
-   ---------------------------------------------------------- */
-.cxz-rank-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  font-size: 13px;
-  font-weight: 700;
-  color: #ffffff;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-  flex-shrink: 0;
-}
-
-/* 1st place - Gold */
-.cxz-rank-1 {
-  background: linear-gradient(135deg, #fdb933, #f5a623);
-  box-shadow: 0 2px 8px rgba(253, 185, 51, 0.45);
-}
-
-/* 2nd place - Silver */
-.cxz-rank-2 {
-  background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
-  box-shadow: 0 2px 8px rgba(192, 192, 192, 0.45);
-}
-
-/* 3rd place - Bronze */
-.cxz-rank-3 {
-  background: linear-gradient(135deg, #cd7f32, #b5651d);
-  box-shadow: 0 2px 8px rgba(205, 127, 50, 0.45);
-}
-
-/* 4th and beyond - Muted */
-.cxz-rank-n {
-  background: var(--text-muted, #6b7280);
-  box-shadow: 0 1px 4px rgba(107, 114, 128, 0.3);
-}
-
 .cxz-expert-cell {
   display: inline-flex;
   align-items: center;
   gap: 10px;
+  max-width: 100%;
   color: var(--text);
   font-weight: 600;
+  overflow: hidden;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.cxz-expert-rank {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  color: var(--text-muted, #6b7280);
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.cxz-expert-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.table-img,
+.cxz-table-avatar-placeholder {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  vertical-align: middle;
+  object-fit: cover;
+}
+
+.cxz-table-avatar-placeholder {
+  background: linear-gradient(135deg, var(--navy, #08183c), var(--primary, #102b6a));
+  color: #ffffff;
+  font-size: 13px;
+  font-weight: 700;
 }
 
 .cxz-expert-avatar {
@@ -437,40 +389,6 @@
   font-size: 13px;
 }
 
-/* ----------------------------------------------------------
-   7. Expert Link
-   ---------------------------------------------------------- */
-.cxz-expert-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--primary, #102b6a);
-  text-decoration: none;
-  font-weight: 600;
-  font-size: 14px;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-}
-
-.cxz-expert-link:hover {
-  color: var(--orange, #f15a22);
-}
-
-.cxz-expert-link::before {
-  content: "";
-  display: inline-block;
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background: var(--primary, #102b6a);
-  flex-shrink: 0;
-  transition: background 0.2s ease;
-}
-
-.cxz-expert-link:hover::before {
-  background: var(--orange, #f15a22);
-}
-
 /* ----------------------------------------------------------
    8. Buy / Action Button
    ---------------------------------------------------------- */
@@ -578,10 +496,6 @@
     font-size: 12px;
   }
 
-  .cxz-ranking-box {
-    margin-bottom: 16px;
-  }
-
   .cxz-cai-layout {
     grid-template-columns: 1fr;
   }
@@ -686,53 +600,6 @@
     min-width: 560px;
   }
 
-  /* Ranking */
-  .cxz-ranking-box {
-    border-radius: var(--radius-md, 8px);
-    margin-bottom: 16px;
-  }
-
-  .cxz-ranking-header {
-    padding: 12px 14px;
-  }
-
-  .cxz-ranking-title {
-    font-size: 14px;
-    padding-left: 10px;
-    border-left-width: 3px;
-  }
-
-  .cxz-rank-table th {
-    padding: 10px 6px;
-    font-size: 12px;
-  }
-
-  .cxz-rank-table td {
-    padding: 10px 6px;
-    font-size: 12px;
-  }
-
-  .cxz-ranking-box {
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .cxz-rank-table {
-    min-width: 420px;
-  }
-
-  /* Rank badges - slightly smaller on mobile */
-  .cxz-rank-badge {
-    width: 24px;
-    height: 24px;
-    font-size: 12px;
-  }
-
-  /* Expert link */
-  .cxz-expert-link {
-    font-size: 13px;
-  }
-
   /* Buy button */
   .cxz-btn-buy {
     padding: 4px 14px;
@@ -813,32 +680,12 @@
     margin: 1px 0;
   }
 
-  .cxz-rank-table {
-    min-width: 360px;
-  }
-
-  .cxz-rank-badge {
-    width: 22px;
-    height: 22px;
-    font-size: 11px;
-  }
-
   .cxz-btn-buy {
     padding: 3px 10px;
     font-size: 10px;
     border-radius: 10px;
   }
 
-  .cxz-expert-link {
-    font-size: 12px;
-    gap: 4px;
-  }
-
-  .cxz-expert-link::before {
-    width: 3px;
-    height: 3px;
-  }
-
   .cxz-pagination {
     padding: 12px 6px;
   }
@@ -874,24 +721,6 @@
   animation: cxz-fade-in 0.4s ease-out;
 }
 
-.cxz-ranking-box {
-  animation: cxz-fade-in 0.5s ease-out;
-}
-
-/* Badge pulse animation for 1st place */
-@keyframes cxz-badge-pulse {
-  0%, 100% {
-    box-shadow: 0 2px 8px rgba(253, 185, 51, 0.45);
-  }
-  50% {
-    box-shadow: 0 2px 14px rgba(253, 185, 51, 0.7);
-  }
-}
-
-.cxz-rank-1 {
-  animation: cxz-badge-pulse 2s ease-in-out infinite;
-}
-
 /* ----------------------------------------------------------
    15. Print Styles
    ---------------------------------------------------------- */
@@ -903,16 +732,13 @@
     display: none !important;
   }
 
-  .cxz-ranking-box,
   .cxz-table-box {
     box-shadow: none;
     border: 1px solid #ccc;
   }
 
   .cxz-data-table th,
-  .cxz-data-table td,
-  .cxz-rank-table th,
-  .cxz-rank-table td {
+  .cxz-data-table td {
     padding: 6px 8px;
     font-size: 11px;
   }

public/css/caiinfo.css

@@ -2,6 +2,38 @@
    caiinfo.css - Expert Detail Page (caiinfo.html)
    ============================================================ */
 
+.cxz-breadcrumb {
+  gap: 10px 14px;
+}
+
+.cxz-breadcrumb-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  color: #5f6f86;
+}
+
+.cxz-breadcrumb-back .layui-icon {
+  font-size: 14px;
+}
+
+.cxz-breadcrumb-trail {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+}
+
+.cxz-table-box .cxz-data-table tbody tr:nth-child(even) {
+  background: #eef4fc;
+}
+
+.cxz-table-box .cxz-data-table tbody tr:hover {
+  background: #e4edf9;
+}
+
 /* ----------------------------------------------------------
    1. Expert Card
    ---------------------------------------------------------- */
@@ -879,38 +911,250 @@
 }
 
 .cxz-data-table td .fushi234item {
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: wrap;
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
   gap: 0;
-  color: #333;
+  color: #de2103;
   font-weight: 700;
   line-height: 1.8;
   vertical-align: middle;
 }
 
-.cxz-data-table td .recommend-number-text,
-.cxz-data-table td .recommend-separator {
-  color: #333;
-  font-size: 14px;
+.cxz-data-table td .cxz-recommend-wrap {
+  display: inline-grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  vertical-align: middle;
 }
 
-.cxz-data-table td .recommend-number-hit,
-.recommend-number-dialog .recommend-number-hit,
-.recommend-number-content .recommend-number-hit {
+.cxz-data-table td .cxz-recommend-content {
+  display: block;
+  min-width: 0;
+}
+
+.cxz-data-table td .recommend-clickable {
+  cursor: pointer;
+}
+
+.cxz-data-table td .recommend-clickable .fushi234item {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.cxz-data-table td .recommend-preview-text {
+  display: inline-block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cxz-data-table td .recommend-view-all {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  margin-left: 6px;
+  color: #409eff;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.cxz-data-table td .recommend-clickable:hover .recommend-view-all {
   color: #de2103;
 }
 
+.cxz-data-table td .recommend-number-text,
+.cxz-data-table td .recommend-separator,
+.cxz-number-popup .recommend-number-text,
+.cxz-number-popup .recommend-separator {
+  color: #de2103;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.cxz-data-table td .recommend-number-hit,
+.cxz-number-popup .recommend-number-hit,
+.recommend-number-dialog .recommend-number-hit,
+.recommend-number-content .recommend-number-hit {
+  color: #de2103;
+  font-weight: 700;
+}
+
 .cxz-data-table td .recommend-number-blue,
+.cxz-number-popup .recommend-number-blue,
 .recommend-number-dialog .recommend-number-blue,
 .recommend-number-content .recommend-number-blue {
   color: #1c89f8;
+  font-weight: 700;
 }
 
 .cxz-data-table td .recommend-number-missed,
+.cxz-number-popup .recommend-number-missed,
 .recommend-number-dialog .recommend-number-missed,
 .recommend-number-content .recommend-number-missed {
   color: #999;
+  font-weight: 700;
+}
+
+.cxz-data-table td .cxz-number-wrap--recommend {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #de2103;
+  cursor: default;
+  font: inherit;
+  font-weight: 700;
+  line-height: 1.8;
+  vertical-align: middle;
+}
+
+.cxz-data-table td .cxz-number-wrap--recommend .cxz-number-preview {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.cxz-data-table td .cxz-number-wrap--recommend .cxz-number-preview--full,
+.cxz-data-table td .cxz-number-wrap--recommend.cxz-number-wrap--fit .cxz-number-preview--full {
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.cxz-data-table td .cxz-number-wrap--recommend .cxz-number-preview--short,
+.cxz-data-table td .cxz-number-wrap--recommend .cxz-number-more {
+  display: none;
+}
+
+.cxz-data-table td .cxz-number-wrap--recommend.cxz-number-wrap--overflow {
+  cursor: pointer;
+}
+
+.cxz-data-table td .cxz-number-wrap--recommend.cxz-number-wrap--overflow .cxz-number-preview--full {
+  display: none;
+}
+
+.cxz-data-table td .cxz-number-wrap--recommend.cxz-number-wrap--overflow .cxz-number-preview--short {
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.cxz-data-table td .cxz-number-wrap--recommend.cxz-number-wrap--overflow .cxz-number-more {
+  display: inline-flex;
+  flex: 0 0 auto;
+  margin-left: 6px;
+  color: #409eff;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.cxz-data-table td .cxz-number-wrap--recommend:hover .cxz-number-more {
+  color: #de2103;
+}
+
+.cxz-number-wrap--recommend-full {
+  display: block;
+  color: #de2103;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.9;
+  white-space: normal;
+  word-break: break-all;
+}
+
+.cxz-number-wrap--recommend-full .cxz-number-group {
+  display: inline;
+}
+
+.cxz-number-popup {
+  padding: 18px 22px;
+}
+
+.cxz-number-popup-title {
+  margin-bottom: 12px;
+  color: #102b6a;
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.cxz-number-popup .cxz-number-wrap--popup {
+  padding: 14px 16px;
+  border: 1px solid #ffd8d2;
+  border-radius: 6px;
+  background: #fff7f5;
+  max-height: 180px;
+  overflow-y: auto;
+}
+
+.recommend-number-layer {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.recommend-number-layer .layui-layer-title {
+  border-bottom: 1px solid #f0f0f0;
+  font-size: 16px;
+  font-weight: 700;
+  height: 48px;
+  line-height: 48px;
+}
+
+.recommend-number-layer .layui-layer-content {
+  padding: 0;
+}
+
+.recommend-number-dialog {
+  padding: 18px 22px 8px;
+}
+
+.recommend-number-content {
+  background: #fff7f5;
+  border: 1px solid #ffd8d2;
+  border-radius: 6px;
+  color: #de2103;
+  line-height: 1.9;
+  max-height: 180px;
+  overflow-y: auto;
+  padding: 14px 16px;
+  text-align: left;
+  word-break: break-all;
+}
+
+.recommend-number-content .fushi234item {
+  display: block;
+  overflow: visible;
+  white-space: normal;
+  word-break: break-all;
+}
+
+.recommend-number-actions {
+  display: flex;
+  justify-content: flex-start;
+  padding-top: 14px;
+}
+
+.recommend-dialog-copy {
+  height: 30px;
+  padding: 0 14px;
+  border: none;
+  border-radius: 15px;
+  background: #102b6a;
+  color: #fff;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 700;
 }
 
 .cxz-data-table td .cxz-status-hit {
@@ -963,6 +1207,18 @@
   font-weight: 700;
 }
 
+.cxz-data-table td span[style*="#8c8c8c"] .caiinfo-status-label,
+.cxz-data-table td span[style*="#8c8c8c"] .caiinfo-status-front,
+.cxz-data-table td span[style*="#8c8c8c"] .caiinfo-status-back,
+.cxz-data-table td span[style*="#8c8c8c"] .caiinfo-status-separator {
+  color: #8c8c8c;
+}
+
+.cxz-data-table td .cxz-pending-publish-text {
+  color: #de2103;
+  font-weight: 700;
+}
+
 .cxz-data-table td .cxz-number-ball--wrong,
 .cxz-number-wrap--popup .cxz-number-ball--wrong {
   position: relative;

public/css/finance.css

@@ -320,7 +320,8 @@
 
 /* Page wrapper */
 .je-container {
-  max-width: 900px;
+  max-width: 1200px;
+  min-width: 1200px;
   margin: 0 auto;
   padding: 20px 16px;
   /* min-height: 100vh; */
@@ -1235,9 +1236,12 @@
    ============================ */
 
 @keyframes pulse-dot {
-  0%, 100% {
+
+  0%,
+  100% {
     opacity: 1;
   }
+
   50% {
     opacity: 0.3;
   }
@@ -1248,6 +1252,7 @@
     opacity: 0;
     transform: translateY(12px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -1266,12 +1271,29 @@
   animation-fill-mode: backwards;
 }
 
-.cz-amount-item:nth-child(1) { animation-delay: 0.03s; }
-.cz-amount-item:nth-child(2) { animation-delay: 0.06s; }
-.cz-amount-item:nth-child(3) { animation-delay: 0.09s; }
-.cz-amount-item:nth-child(4) { animation-delay: 0.12s; }
-.cz-amount-item:nth-child(5) { animation-delay: 0.15s; }
-.cz-amount-item:nth-child(6) { animation-delay: 0.18s; }
+.cz-amount-item:nth-child(1) {
+  animation-delay: 0.03s;
+}
+
+.cz-amount-item:nth-child(2) {
+  animation-delay: 0.06s;
+}
+
+.cz-amount-item:nth-child(3) {
+  animation-delay: 0.09s;
+}
+
+.cz-amount-item:nth-child(4) {
+  animation-delay: 0.12s;
+}
+
+.cz-amount-item:nth-child(5) {
+  animation-delay: 0.15s;
+}
+
+.cz-amount-item:nth-child(6) {
+  animation-delay: 0.18s;
+}
 
 /* ============================
    QR Code Section (Recharge)
@@ -1386,6 +1408,7 @@
 
 /* Tablets and small desktops */
 @media (max-width: 768px) {
+
   .cz-page,
   .je-container,
   .tx-page,
@@ -1456,6 +1479,7 @@
 
 /* Mobile devices */
 @media (max-width: 640px) {
+
   .cz-page,
   .je-container,
   .tx-page,
@@ -1625,4 +1649,4 @@
   .tx-balance-value {
     font-size: 18px;
   }
-}
+}

public/css/layout-fix.css

@@ -0,0 +1,19 @@
+html {
+  min-height: 100%;
+}
+
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+body > main {
+  flex: 0 0 auto;
+}
+
+body > footer.site-footer {
+  margin-top: auto;
+  padding-top: 28px;
+  flex-shrink: 0;
+}

public/css/pagination.css

@@ -469,6 +469,66 @@ button.cxz-number-wrap {
   background: #f7f9ff;
 }
 
+.cxz-data-table td .cxz-number-wrap--recommend .cxz-number-more {
+  height: auto;
+  margin-left: 6px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: #409eff;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: inherit;
+}
+
+.cxz-data-table td .cxz-number-wrap--recommend:hover .cxz-number-more {
+  border-color: transparent;
+  background: transparent;
+  color: #de2103;
+}
+
+.cxz-data-table td .cxz-number-wrap--recommend {
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.cxz-data-table td .cxz-number-wrap--recommend:hover {
+  background: transparent;
+  box-shadow: none;
+}
+
+.cxz-number-popup .recommend-number-text,
+.cxz-number-popup .recommend-separator {
+  color: #de2103;
+}
+
+.cxz-number-popup .recommend-number-hit {
+  color: #de2103;
+}
+
+.cxz-number-popup .recommend-number-blue {
+  color: #1c89f8;
+}
+
+.cxz-number-popup .recommend-number-missed {
+  color: #999;
+}
+
+.cxz-data-table td .cxz-number-wrap--recommend .recommend-number-text,
+.cxz-data-table td .cxz-number-wrap--recommend .recommend-separator,
+.cxz-data-table td .cxz-number-wrap--recommend .recommend-number-hit,
+.cxz-data-table td .cxz-number-wrap--recommend .recommend-number-blue,
+.cxz-data-table td .cxz-number-wrap--recommend .recommend-number-missed,
+.cxz-number-popup .recommend-number-text,
+.cxz-number-popup .recommend-separator,
+.cxz-number-popup .recommend-number-hit,
+.cxz-number-popup .recommend-number-blue,
+.cxz-number-popup .recommend-number-missed {
+  font-weight: 700 !important;
+}
+
 .cxz-number-popup {
   padding: 20px 22px 22px;
   background: #fff;

public/css/public.css

@@ -563,6 +563,7 @@ select {
    ---------------------------------------------------------- */
 .cxz-main {
   max-width: 1200px;
+  min-width: 1200px;
   margin: 0 auto;
   padding: 20px;
 }
@@ -1245,4 +1246,4 @@ select {
     height: auto;
     aspect-ratio: 1 / 1;
   }
-}
+}

public/css/publish.css

@@ -7,6 +7,7 @@
 .publish-card,
 .cxz-form-card {
   width: 100%;
+  padding: 20px;
   margin: 26px auto 54px;
   overflow: hidden;
   border: 1px solid var(--border-light);
@@ -430,6 +431,7 @@
 }
 
 @media (max-width: 768px) {
+
   .page-main,
   .page-wrap {
     width: calc(100% - 24px);
@@ -437,6 +439,7 @@
 
   .publish-card,
   .cxz-form-card {
+
     margin: 18px auto 32px;
     border-radius: 16px;
   }
@@ -465,4 +468,4 @@
   .publish-tab-item:last-child {
     border-bottom: 0;
   }
-}
+}