Bladeren bron

feat(stock/etf): ETF 配置模型说明卡改双列布局 — 底层标的/初始权重左列,主要逻辑右列

ligb 1 dag geleden
bovenliggende
commit
f179d6e0b4
1 gewijzigde bestanden met toevoegingen van 25 en 15 verwijderingen
  1. 25 15
      web-app/src/views/stock/etf/index.vue

+ 25 - 15
web-app/src/views/stock/etf/index.vue

@@ -70,23 +70,23 @@
           <span class="ic">说</span>
           <span class="desc-title">模型说明</span>
         </div>
-        <div class="desc-body">
-          <div class="desc-row">
-            <span class="k">底层标的</span>
-            <span class="v">{{ etfModel.pool }}</span>
-          </div>
-          <div class="desc-row">
-            <span class="k">初始权重</span>
-            <span class="v">{{ etfModel.initialWeight }}</span>
+        <div class="desc-body desc-body-cols">
+          <div class="desc-col">
+            <div class="desc-row">
+              <span class="k">底层标的</span>
+              <span class="v">{{ etfModel.pool }}</span>
+            </div>
+            <div class="desc-row">
+              <span class="k">初始权重</span>
+              <span class="v">{{ etfModel.initialWeight }}</span>
+            </div>
           </div>
-          <div class="desc-row">
-            <span class="k">主要逻辑</span>
-            <span class="v">{{ etfModel.description }}</span>
+          <div class="desc-col desc-col-main">
+            <div class="desc-row">
+              <span class="k">主要逻辑</span>
+              <span class="v">{{ etfModel.description }}</span>
+            </div>
           </div>
-          <!-- <div class="desc-row">
-            <span class="k">数据源</span>
-            <span class="v">{{ etfModel.source }}</span>
-          </div> -->
         </div>
       </div>
 
@@ -727,6 +727,15 @@ function reload() {
   color: var(--ink, #1A2438);
   font-weight: 500;
 }
+.desc-body-cols {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
+  gap: 14px 28px;
+}
+.desc-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
 
 /* 备注 / 最新权重说明 */
 .note-block {
@@ -837,6 +846,7 @@ function reload() {
 @media (max-width: 980px) {
   .kpi-grid { grid-template-columns: 1fr; }
   .desc-body { grid-template-columns: 1fr; }
+  .desc-body-cols { grid-template-columns: 1fr; }
   .card-grid.cols-2-1,
   .card-grid.cols-1-1,
   .card-grid.cols-1 { grid-template-columns: 1fr; }