update

src/assets/styles/mixin.less

@@ -2782,4 +2782,63 @@ input:-internal-autofill-selected {
             }
         }
     }
+}
+
+// 履约规则
+.rulesCont {
+    margin-top: 10px;
+    .flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    max-width: 450px;
+    .ruleCol.ant-col {
+        margin-bottom: 10px;
+    }
+    .ant-row {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        .ant-col {
+            padding-left: 0 !important;
+            padding-right: 0 !important;
+            margin-bottom: 20px;
+            .rounded-corners(3px);
+            display: inline-flex;
+            .line {
+                width: 100%;
+                .flex;
+                flex-direction: column;
+                .name {
+                    min-width: 120px;
+                    height: 30px;
+                    background: @m-blue28;
+                    border: 1px solid @m-black37;
+                    .rounded-corners(3px);
+                    text-align: center;
+                    font-size: 16px;
+                    color: @m-white6;
+                }
+
+                .time {
+                    margin: 6px auto 0;
+                    width: 50px;
+                    height: 28px;
+                    background: @m-black38;
+                    .rounded-corners(5px);
+                    color: @m-blue26;
+                    font-size: 14px;
+                    text-align: center;
+                }
+            }
+            .line:nth-child(2n) {
+                .name {
+                    background: @m-yellow4;
+                    border-color: @m-yellow5;
+                }
+            }
+
+            .line + .line {
+                margin-left: 5px;
+            }
+        }
+    }
 }

src/views/market/spot_trade/components/detail/index.vue

@@ -1,36 +1,33 @@
 <template>
-  <!-- 买卖大厅详情 -->
-  <Drawer :title="'详情'"
-          :placement="'right'"
-          :visible="visible"
-          class="top top486"
-          @cancel="cancel">
-    <div class="detailCont">
-      <div class="rows">
-        <div class="row"
-             v-for="item in lstitem"
-             :key="item.name">
-          <div class="left">{{item.name}}</div>
-          <div class="right">{{item.value}}</div>
-        </div>
-      </div>
-      <div class="ruleTitle">履约规则：</div>
-      <div class="rulesCont">
-        <a-row>
-          <a-col :span="24"
-                 class="ruleCol">
-            <div class="line"
-                 v-for="item in lststep"
-                 :key="item.autoid">
-              <!-- <div class="no">{{index + 1}}</div> -->
-              <div class="name">{{item.steptypename}}</div>
-              <div class="time">{{item.stepdate}}</div>
+    <!-- 买卖大厅详情 -->
+    <Drawer
+        :title="'详情'"
+        :placement="'right'"
+        :visible="visible"
+        class="top top486"
+        @cancel="cancel"
+    >
+        <div class="detailCont">
+            <div class="rows">
+                <div class="row" v-for="item in lstitem" :key="item.name">
+                    <div class="left">{{item.name}}</div>
+                    <div class="right">{{item.value}}</div>
+                </div>
+            </div>
+            <div class="ruleTitle">履约规则：</div>
+            <div class="rulesCont">
+                <a-row>
+                    <a-col :span="24" class="ruleCol">
+                        <div class="line" v-for="item in lststep" :key="item.autoid">
+                            <!-- <div class="no">{{index + 1}}</div> -->
+                            <div class="name">{{item.steptypename}}</div>
+                            <div class="time">{{item.stepdate}}</div>
+                        </div>
+                    </a-col>
+                </a-row>
             </div>
-          </a-col>
-        </a-row>
-      </div>
-    </div>
-  </Drawer>
+        </div>
+    </Drawer>
 </template>
 
 <script lang="ts">
@@ -124,62 +121,5 @@ export default defineComponent({
         font-size: 16px;
         color: @m-grey1;
     }
-    .rulesCont {
-        margin-top: 10px;
-        .flex;
-        overflow-x: auto;
-        overflow-y: hidden;
-        max-width: 450px;
-        .ruleCol.ant-col {
-            margin-bottom: 10px;
-        }
-    }
-}
-.ant-row {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-    .ant-col {
-        padding-left: 0 !important;
-        padding-right: 0 !important;
-        margin-bottom: 20px;
-        .rounded-corners(3px);
-        display: inline-flex;
-        .line {
-            width: 100%;
-            .flex;
-            flex-direction: column;
-            .name {
-                min-width: 120px;
-                height: 30px;
-                background: @m-blue28;
-                border: 1px solid @m-black37;
-                .rounded-corners(3px);
-                text-align: center;
-                font-size: 16px;
-                color: @m-white6;
-            }
-
-            .time {
-                margin: 6px auto 0;
-                width: 50px;
-                height: 28px;
-                background: @m-black38;
-                .rounded-corners(5px);
-                color: @m-blue26;
-                font-size: 14px;
-                text-align: center;
-            }
-        }
-        .line:nth-child(2n) {
-            .name {
-                background: @m-yellow4;
-                border-color: @m-yellow5;
-            }
-        }
-
-        .line + .line {
-            margin-left: 5px;
-        }
-    }
 }
 </style>

src/views/market/spot_trade/warehouse_receipt_trade/warehouse_receipt_trade_blocs/components/post-buying/permancePlanTmp.vue

@@ -1,37 +1,37 @@
 <template>
-  <!--选择履约模板-->
-  <Drawer :title="'选择履约模板'"
-          :placement="'right'"
-          :visible="visible"
-          @cancel="cancel"
-          class="top486">
-    <span class="add-permance"
-          @click="open">新增</span>
-    <a-spin :spinning="loading">
-      <div>
-        <div class="rulesCont"
-             v-for="item in tableList"
-             :key="item.autoid">
-          <div>{{item.templatename}}</div>
-          <a-row>
-            <a-col :span="24"
-                   class="ruleCol">
-              <div class="line"
-                   v-for="sub in item.LstStep"
-                   :key="sub.autoid">
-                <!-- <div class="no">{{index + 1}}</div> -->
-                <div class="name">{{sub.templatename}}</div>
-                <div class="time">{{sub.stepdate}}</div>
-              </div>
-            </a-col>
-          </a-row>
-        </div>
-      </div>
-    </a-spin>
-  </Drawer>
-  <Add v-if="show"
-       @cancel="close"
-       @update="close" />
+    <!--选择履约模板-->
+    <Drawer
+        :title="'选择履约模板'"
+        :placement="'right'"
+        :visible="visible"
+        @cancel="cancel"
+        class="top486"
+    >
+        <span class="add-permance" @click="open">
+            <svg class="icon svg-icon" aria-hidden="true">
+                <use xlink:href="#icon-xinjianzengjiaxinzeng-20" />
+            </svg>
+        </span>
+        <a-spin :spinning="loading">
+            <div class="moduleContent">
+                <div class="itemBar" v-for="item in tableList" :key="item.autoid">
+                    <div class="itemName">{{item.templatename}}</div>
+                    <div class="rulesCont">
+                        <a-row>
+                            <a-col :span="24" class="ruleCol">
+                                <div class="line" v-for="sub in item.LstStep" :key="sub.autoid">
+                                    <!-- <div class="no">{{index + 1}}</div> -->
+                                    <div class="name">{{sub.templatename}}</div>
+                                    <div class="time">{{sub.stepdate}}</div>
+                                </div>
+                            </a-col>
+                        </a-row>
+                    </div>
+                </div>
+            </div>
+        </a-spin>
+    </Drawer>
+    <Add v-if="show" @cancel="close" @update="close" />
 </template>
 
 <script lang="ts">
@@ -84,5 +84,32 @@ export default defineComponent({
     position: absolute;
     top: 10px;
     right: 20px;
+    .icon {
+        font-size: 20px;
+        color: @m-blue25;
+    }
+}
+.moduleContent {
+    padding: 10px 20px 0;
+    width: 470px;
+    height: 100%;
+    overflow-y: auto;
+    .itemBar {
+        width: 100%;
+        padding: 0 14px 6px;
+        margin-bottom: 10px;
+        .flex;
+        flex-direction: column;
+        background: #102442;
+        .rounded-corners(5px);
+        .itemName {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 1px solid #122d55;
+            color: #ffffff;
+            font-size: 16px;
+        }
+    }
 }
 </style>