<template>
    <div>
      <div class="mt-3 common-box">
        <div class="flex mb-2 ta-l fz-20 fw-b jc-sb ai-c">
            <span>产品销量</span>
            <spam class="more-common"></spam>
        </div>
        <div class="flex mt-3 mb-3 max-w waysbox">
            <div class="flex-1">
                <goodsWays></goodsWays>
            </div>
            <div class="flex-1">
                <chartsBox></chartsBox>
            </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  import { defineComponent, reactive, onMounted, toRefs } from "vue";
  import goodsWays from "./widget/goodsWays.vue";
  import chartsBox from "./widget/charts.vue";
  export default defineComponent({
    name: "Index",
    components: {
        goodsWays,
        chartsBox
    },
    setup(props, context) {
      let data = reactive({
        roleInfo:{
          
        }   
    });
      onMounted(() => {
       
      });
      let methods = {
         
      };
      return {
        ...methods,
        ...toRefs(data),
      };
    },
  });
  </script>
  
  <style scoped>
    .common-box{
        width: 1400px;
        background: #FFFFFF;
        box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.06);
        border-radius: 6px;
        padding: 20px;
    }  
    .waysbox{
        height: 500px;
    }
  </style>