commit

src/assets/styles/variables.less

@@ -60,6 +60,10 @@
 @m-white0-hover: rgba(@m-white0, .8);
 @m-white1: #E5E5E5;
 @m-green0: #1FF195;
+@m-red0: #FF5C6F;
+@m-red0-hover: rgba(@m-red0, .8);
+@m-red1: #FB7F75;
+@m-red1-hover: rgba(@m-red1, .8);
 
 @font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 

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

@@ -36,11 +36,11 @@ const handleMenu = () => {
           children: [
             {
               key: '1-1',
-              title: 'SHFE-沪银(千克)',
+              title: '铜杆(吨)',
             },
             {
               key: '1-2',
-              title: 'SHFE-沪铜(吨)',
+              title: '铜板(吨)',
             },
           ],
         },
@@ -50,7 +50,7 @@ const handleMenu = () => {
           children: [
             {
               key: '2-1',
-              title: 'SHFE-沪铁(吨)',
+              title: 'SHFE-银锭(千克)',
             },
           ],
         },

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

@@ -0,0 +1,99 @@
+<template>
+  <div class="rightSpot">
+    <div class="title">
+        <!-- <a-icon type="gold"/> -->
+        <div class="tltLeft">
+            <span class="blue">铜杆（吨）</span>
+            <span class="green ml10">正常</span>
+        </div>
+        <div class="tltBtns">
+            <a-button class="blueBtn">修改</a-button>
+            <a-button class="redBtn">停用</a-button>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, PropType } from 'vue';
+import APP from '@/services';
+export default defineComponent({
+    name: 'rightSpot',
+    props: {
+
+    },
+    components: {},
+    setup(props, context) {
+        
+        return {
+            
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.rightSpot {
+    width: 100%;
+    height: 100%;
+    padding: 10px 12px;
+    .flex;
+    flex-direction: column;
+    .title {
+        width: 100%;
+        height: 35px;
+        .flex;
+        justify-content: space-between;
+        div {
+            align-self: center;
+            align-items: center;
+        }
+        .tltLeft {
+            font-size: 16px;
+        }
+        .tltBtns {
+            .ant-btn+.ant-btn {
+                margin-left: 10px;
+            }
+        }
+
+    }
+}
+.blue {
+    color: @m-blue0;
+}
+.green {
+    color: @m-green0;
+}
+.ml10 {
+    margin-left: 10px;
+}
+.blueBtn {
+    width: 80px;
+    height: 26px;
+    text-align: center;
+    background: linear-gradient(0deg, @m-blue2, @m-blue0);
+    box-shadow: -1px 0px 0px 0px #121618;
+    .rounded-corners(3px);
+    border: 0;
+    color: @m-white0;
+    font-size: 14px;
+    &:hover {
+         background: linear-gradient(0deg, @m-blue2-hover, @m-blue0-hover);
+         color: @m-white0-hover;
+    }
+}
+.redBtn {
+    width: 80px;
+    height: 26px;
+    background: linear-gradient(0deg, @m-red0, @m-red1);
+    .rounded-corners(3px);
+    border: 0;
+    color: @m-white0;
+    font-size: 14px;
+    &:hover {
+         background: linear-gradient(0deg, @m-red0-hover, @m-red1-hover);
+         color: @m-white0-hover;
+    }
+}
+</style>;

src/views/information/goods/list/spot-variety/index.vue

@@ -8,8 +8,8 @@
       <div class="leftSpot">
        <leftMenu></leftMenu>
       </div>
-      <div class="rightSpot">
-
+      <div class="rightCont">
+        <rightSpot></rightSpot>
       </div>
     </div>
   </div>
@@ -20,13 +20,16 @@ import { defineComponent } from 'vue';
 
 import filterCustomTable from '@/views/information/goods/components/filterTable/index.vue';
 import leftMenu from '@/views/information/goods/components/leftMenu/index.vue';
+import rightSpot from '@/views/information/goods/components/rightSpot/index.vue';
+
 import { initData } from '@/setup/methods/index';
 
 export default defineComponent({
     name: 'spot-variety',
     components: {
       filterCustomTable,
-      leftMenu
+      leftMenu,
+      rightSpot
     },
     setup() {
         initData(() => {
@@ -41,19 +44,21 @@ export default defineComponent({
 .spot-variety {
   width: 100%;
   height: 100%;
+  .flex;
+  flex-direction: column;
   .spotTableCont {
     width: 100%;
     height: calc(100% - 45px);
     overflow-y: auto;
+    .inlineflex;
     .leftSpot {
       width: 180px;
       height: 100%;
       background: @m-black4;
     }
-    .rightSpot {
+    .rightCont {
       flex: 1;
       height: 100%;
-      max-width: calc(100% - 180px);
       background: @m-black2;
     }
   }