Merge branch 'master' of http://47.101.159.18:3000/Muchinfo/MTP2.0_WEB

src/assets/styles/variables.less

@@ -24,6 +24,7 @@
 @m-grey16: #405066;
 @m-grey16-hover: rgba(@m-grey16, .8);
 @m-grey17: #556772;
+@m-grey18: #1D2327;
 @m-red0: #ff4d4f;
 @m-red1: #FF2B2B;
 @m-white: #fff;

src/views/information/goods/components/rightSpot/index.vue

@@ -13,28 +13,122 @@
     </div>
     <div class="spotCont">
         <a-collapse class="spotCollapse" :bordered="false">
-            <template #expandIcon>
-                <!-- <svg class="icon svg-icon" aria-hidden="true">
+            <template #expandIcon="props">
+                <svg class="icon svg-icon" aria-hidden="true" v-if="props.isActive == 0">
                     <use xlink:href="#icon-shouqi1"></use>
-                </svg> -->
+                </svg> 
+                <svg class="icon svg-icon" aria-hidden="true" v-else>
+                    <use xlink:href="#icon-shouqi2"></use>
+                </svg> 
             </template>
-            <a-collapse-panel key="1" header="This is panel header 1">
+            <a-collapse-panel key="1">
+                <template #header>
+                        <a-row class="headRow">
+                            <a-col :span="8">品类（3）</a-col>
+                            <a-col :span="8">单位</a-col>
+                            <a-col :span="8">标仓系数</a-col>
+                        </a-row>
+                </template>
+                <a-row class="contRow">
+                    <a-col :span="8">10mm</a-col>
+                    <a-col :span="8">吨</a-col>
+                    <a-col :span="8">1.0</a-col>
+                </a-row>
+                <a-row class="contRow">
+                    <a-col :span="8">12mm</a-col>
+                    <a-col :span="8">吨</a-col>
+                    <a-col :span="8">1.1</a-col>
+                </a-row>
+                <a-row class="contRow">
+                    <a-col :span="8">15mm</a-col>
+                    <a-col :span="8">吨</a-col>
+                    <a-col :span="8">1.2</a-col>
+                </a-row>
+            </a-collapse-panel>
+            <a-collapse-panel key="2">
+                <template #header>
+                    <a-row class="headRow">
+                        <a-col :span="24">品牌（2）</a-col>
+                    </a-row>
+                </template>
+                <a-row class="contRow">
+                    <a-col :span="24">江铜</a-col>
+                </a-row>
+                <a-row class="contRow">
+                    <a-col :span="24">云铜</a-col>
+                </a-row>
+            </a-collapse-panel>
+            <a-collapse-panel key="3">
+                <template #header>
+                    <a-row class="headRow">
+                        <a-col :span="8">套保品种（2）</a-col>
+                        <a-col :span="8">单位</a-col>
+                        <a-col :span="8">套保系数</a-col>
+                    </a-row>
+                </template>
+                <a-row class="contRow">
+                    <a-col :span="8">江铜</a-col>
+                    <a-col :span="8">江铜</a-col>
+                    <a-col :span="8">江铜</a-col>
+                </a-row>
                 <a-collapse default-active-key="4">
-                    <template #expandIcon>
-                        <!-- <svg class="icon svg-icon" aria-hidden="true">
+                    <template #expandIcon="props">
+                        <svg class="icon svg-icon" aria-hidden="true" v-if="props.isActive == 0">
                             <use xlink:href="#icon-shouqi1"></use>
-                        </svg> -->
+                        </svg> 
+                        <svg class="icon svg-icon" aria-hidden="true" v-else>
+                            <use xlink:href="#icon-shouqi2"></use>
+                        </svg> 
                     </template>
-                    <a-collapse-panel key="4" header="This is panel nest panel">
-                        <p>A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world</p>
+                    <a-collapse-panel key="4">
+                        <template #header>
+                            <a-row class="headRow">
+                                <a-col :span="8">期货品种（2）</a-col>
+                                <a-col :span="8">单位</a-col>
+                                <a-col :span="8">品种系数</a-col>
+                            </a-row>
+                        </template>
+                        <a-row class="contRow">
+                            <a-col :span="8">江铜</a-col>
+                            <a-col :span="8">江铜</a-col>
+                            <a-col :span="8">江铜</a-col>
+                        </a-row>
+                    </a-collapse-panel>
+                </a-collapse>
+                <a-row class="contRow">
+                    <a-col :span="8">江铜</a-col>
+                    <a-col :span="8">江铜</a-col>
+                    <a-col :span="8">江铜</a-col>
+                </a-row>
+                <a-collapse default-active-key="4">
+                    <template #expandIcon="props">
+                        <svg class="icon svg-icon" aria-hidden="true" v-if="props.isActive == 0">
+                            <use xlink:href="#icon-shouqi1"></use>
+                        </svg> 
+                        <svg class="icon svg-icon" aria-hidden="true" v-else>
+                            <use xlink:href="#icon-shouqi2"></use>
+                        </svg> 
+                    </template>
+                    <a-collapse-panel key="4">
+                        <template #header>
+                            <a-row class="headRow">
+                                <a-col :span="8">期货品种（2）</a-col>
+                                <a-col :span="8">单位</a-col>
+                                <a-col :span="8">品种系数</a-col>
+                            </a-row>
+                        </template>
+                        <a-row class="contRow">
+                            <a-col :span="8">江铜</a-col>
+                            <a-col :span="8">江铜</a-col>
+                            <a-col :span="8">江铜</a-col>
+                        </a-row>
+                        <a-row class="contRow">
+                            <a-col :span="8">江铜</a-col>
+                            <a-col :span="8">江铜</a-col>
+                            <a-col :span="8">江铜</a-col>
+                        </a-row>
                     </a-collapse-panel>
                 </a-collapse>
-            </a-collapse-panel>
-            <a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
-                <p>A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world</p>
-            </a-collapse-panel>
-            <a-collapse-panel key="3" header="This is panel header 3">
-                <p>A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world</p>
             </a-collapse-panel>
         </a-collapse>
     </div>
@@ -109,7 +203,7 @@ export default defineComponent({
     border: 0;
     color: @m-white0;
     font-size: 14px;
-    &:hover {
+    &:hover,&:focus {
          background: linear-gradient(0deg, @m-blue2-hover, @m-blue0-hover);
          color: @m-white0-hover;
     }
@@ -122,11 +216,26 @@ export default defineComponent({
     border: 0;
     color: @m-white0;
     font-size: 14px;
-    &:hover {
+    &:hover,&:focus {
          background: linear-gradient(0deg, @m-red0-hover, @m-red1-hover);
          color: @m-white0-hover;
     }
 }
+.ant-collapse {
+    background-color: transparent;
+    border: 0;
+    .ant-collapse-item {
+        border: 0;
+        .ant-collapse-header {
+            background-color: transparent;
+            border-bottom: 0;
+        }
+        .ant-collapse-content {
+            background-color: transparent;
+            border-top: 0;
+        }
+    }
+}
 .ant-collapse.spotCollapse.ant-collapse-borderless {
     margin-top: 10px;
     background-color: transparent;
@@ -135,10 +244,56 @@ export default defineComponent({
         .ant-collapse-header {
             color: @m-grey17;
             font-size: 14px;
+            border-bottom: 1px solid @m-grey18;
+            padding: 10px 8px 10px 44px;
+            height: 43px;
+            .ant-collapse-arrow {
+                fill: @m-grey17;
+                width: 16px;
+                height: 16px;
+                font-size: 16px;
+                left: 0;
+            }
         }
         .ant-collapse-content {
-
+            .ant-collapse-content-box {
+                padding: 0 0 0 30px;
+                background-color: transparent;
+                .ant-row.contRow {
+                    width: 100%;
+                    height: 40px;
+                    line-height: 40px;
+                    font-size: 16px;
+                    color: @m-white1;
+                    margin-bottom: 10px;
+                    background: #0F161C;
+                    border: 1px solid #172B56;
+                    border-radius: 3px;
+                    padding-left: 14px;
+                    padding-right: 12px;
+                    .ant-col:last-child {
+                        text-align: right;
+                    }
+                    .ant-col:first-child {
+                        text-align: left;
+                    }
+                }
+                .contRow:first-child {
+                    margin-top: 9px;
+                }
+                .contRow:last-child {
+                    margin-bottom: 20px;
+                }
+            }
         }
     }
 }
+.ant-row.headRow {
+    .ant-col:first-child {
+        text-align: left;
+    }
+    .ant-col:nth-child(3) {
+        text-align: right;
+    }
+}
 </style>;