fix: #2225,#2226

src/modules/product-analysis/components/Cost.vue

 <template>
   <box title="基金涉及费用">
     <div class="cost-box">
-      <div class="li">
-        <img src="https://webapp-pub.ezijing.com/x-training-new/cost-i1.png" class="icon">
+      <div class="li" v-for="item in data.completions" :key="item.id">
+        <img
+          src="https://webapp-pub.ezijing.com/x-training-new/cost-i2.png"
+          class="icon"
+          v-if="item.tag === 'management_expense_completion'"
+        />
+        <img src="https://webapp-pub.ezijing.com/x-training-new/cost-i1.png" class="icon" v-else />
         <div class="right-con">
           <div class="num">
-            <input v-model="data.completions[0].commit_answer" type="text" placeholder="请输入">
+            <input v-model="item.commit_answer" type="text" placeholder="请输入" />
             <span>%</span>
           </div>
-          <div class="name">托管费</div>
-        </div>
-      </div>
-      <div class="li">
-        <img src="https://webapp-pub.ezijing.com/x-training-new/cost-i2.png" class="icon">
-        <div class="right-con col-blue">
-          <div class="num">
-            <input v-model="data.completions[1].commit_answer" type="text" placeholder="请输入">
-            <span>%</span>
-          </div>
-          <div class="name">管理费</div>
+          <div class="name">{{ item.subject }}</div>
         </div>
       </div>
     </div>
@@ -39,72 +34,72 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.cost-box{
+.cost-box {
   display: flex;
   justify-content: center;
   padding-top: 30px;
-  .li{
+  .li + .li {
+    margin-left: 20px;
+  }
+  .li {
     width: 225px;
     height: 97px;
-    background: #FFFFFF;
+    background: #ffffff;
     box-shadow: 0px 9px 9px 0px rgba(175, 175, 175, 0.27);
     border-radius: 10px;
     display: flex;
     align-items: center;
-    .icon{
+    .icon {
       width: 53px;
       height: 53px;
       display: block;
       margin-left: 24px;
     }
-    .right-con{
+    .right-con {
       margin-left: 24px;
-      &.col-blue{
-        .num{
-          input{
-            color: #47BCDE;
+      &.col-blue {
+        .num {
+          input {
+            color: #47bcde;
           }
-          span{
-            color: #47BCDE;
+          span {
+            color: #47bcde;
           }
         }
       }
-      .num{
+      .num {
         display: flex;
-        input{
+        input {
           outline: none;
           background: none;
           width: 80px;
           font-size: 30px;
           font-weight: bold;
-          color: #4EB198;
+          color: #4eb198;
           line-height: 100%;
           font-weight: bold;
           height: 28px;
           width: 65px;
           text-align: right;
-          &::-webkit-input-placeholder{
+          &::-webkit-input-placeholder {
             font-size: 16px;
           }
         }
-        span{
+        span {
           font-size: 14px;
-          color: #4EB198;
+          color: #4eb198;
           line-height: 100%;
           margin-top: 12px;
           margin-left: 3px;
         }
       }
-      .name{
+      .name {
         font-size: 16px;
         color: #666666;
         line-height: 100%;
         margin-top: 10px;
       }
     }
-    &:nth-child(1){
-      margin-right: 30px;
-    }
   }
 }
 </style>

src/modules/product-analysis/components/Products.vue

@@ -2,7 +2,7 @@
   <box title="产品概括">
     <ul>
       <li v-for="(item, index) in data.completions" :key="index">
-        <img :src="`https://webapp-pub.ezijing.com/x-training-new/products${index + 1}.png`" class="icon" />
+        <img :src="iconUrl(item)" class="icon" />
         <div class="tag">{{ item.subject }}</div>
         <textarea placeholder="请输入" v-model="item.commit_answer"></textarea>
       </li>
@@ -20,7 +20,18 @@ export default {
   data() {
     return {}
   },
-  created() {
+  methods: {
+    iconUrl(item) {
+      const map = {
+        product_overview_completion: 'https://webapp-pub.ezijing.com/x-training-new/products1.png',
+        operation_mode_completion: 'https://webapp-pub.ezijing.com/x-training-new/products2.png',
+        open_frequency_completion: 'https://webapp-pub.ezijing.com/x-training-new/products3.png',
+        transaction_currency_completion: 'https://webapp-pub.ezijing.com/x-training-new/products4.png',
+        fund_manager_completion: 'https://webapp-pub.ezijing.com/x-training-new/products5.png',
+        fund_principal_completion: 'https://webapp-pub.ezijing.com/x-training-new/products6.png'
+      }
+      return map[item.tag]
+    }
   }
 }
 </script>