MTP2.0_WEB/src/views/information/goods/components/rightSpot/index.vue

<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 class="spotCont">
        <a-collapse class="spotCollapse" :bordered="false">
            <template #expandIcon>
                <!-- <svg class="icon svg-icon" aria-hidden="true">
                    <use xlink:href="#icon-shouqi1"></use>
                </svg> -->
            </template>
            <a-collapse-panel key="1" header="This is panel header 1">
                <a-collapse default-active-key="4">
                    <template #expandIcon>
                        <!-- <svg class="icon svg-icon" aria-hidden="true">
                            <use xlink:href="#icon-shouqi1"></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>
                </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>
  </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;
            }
        }

    }
    .spotCont {
        width: 100%;
        padding: 0 30px;
    }
}
.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;
    }
}
.ant-collapse.spotCollapse.ant-collapse-borderless {
    margin-top: 10px;
    background-color: transparent;
    .ant-collapse-item {
        border-bottom: 0;
        .ant-collapse-header {
            color: @m-grey17;
            font-size: 14px;
        }
        .ant-collapse-content {

        }
    }
}
</style>;