diff --git a/src/components/xEcharts/index.vue b/src/components/xEcharts/index.vue
index 7d00e8c..84c0a40 100644
--- a/src/components/xEcharts/index.vue
+++ b/src/components/xEcharts/index.vue
@@ -27,7 +27,7 @@
 			option: {
 				deep:true,
 				handler (v) {
-					unwarp(this.myChart).setOption(v);
+					unwarp(this.myChart)&&unwarp(this.myChart).setOption(v);
 				}
 			}
 		},
@@ -58,6 +58,10 @@
 				myChart.setOption(this.myOptions);
 				this.myChart = myChart;
 				window.addEventListener('resize', () => myChart.resize());
+			},
+			setEchartOption(){
+				var myChart = echarts.init(this.$refs.xEcharts, 'T');
+				myChart.setOption(this.myOptions);
 			}
 		}
 	}
diff --git a/src/views/home/widgets/components/StoreData.vue b/src/views/home/widgets/components/StoreData.vue
new file mode 100644
index 0000000..81fe6eb
--- /dev/null
+++ b/src/views/home/widgets/components/StoreData.vue
@@ -0,0 +1,139 @@
+<template>
+    <div class="card-item">
+        <div class="dis-f jus-bet al-item" style="position: relative;">
+            <div class="date-tool">
+                <span v-for="(item, i) in dateList"  :key="i" class="date-tool-title" 
+                :class="[{ 'mg-l-24': i > 0 },{'date-tool-title-check':item.type===dateTab}]" @click="dateTabCheck(item.type)">{{ item.title
+                }}</span>
+                <div class="time-mg">
+                   <el-date-picker
+                   v-model="dateData" type="daterange" 
+                   range-separator="To" 
+                   start-placeholder="Start date"
+                   value-format='YYYY-MM-DD'
+                    end-placeholder="End date" /> 
+                </div>
+            </div>
+            <el-tabs v-model="activeName" class="tabs-box">
+                <el-tab-pane label="销售量" name="sales">
+                </el-tab-pane>
+                <el-tab-pane label="访问量" name="access">
+                </el-tab-pane>
+                <storeInfo :data-type="activeName" 
+                :list-data="activeName==='access'?[900, 852, 563, 875, 705, 1120, 980, 952, 621, 548, 600, 1100]:[952, 852, 563, 875, 705, 1120, 980, 952, 621, 548, 658, 1165]"></storeInfo>
+            </el-tabs>
+        </div>
+    </div>
+</template>
+
+<script>
+import xEcharts from '@/components/xEcharts';
+import storeInfo from './component/StoreInfo.vue'
+export default {
+    title: "门店数据",
+    icon: "el-icon-data-board",
+    description: "门店销售/访问量数据",
+    components: {
+        xEcharts,
+        storeInfo
+    },
+    data() {
+        return {
+            activeName: 'sales',
+            dateList: [{title:'今日',type:'day'}, {title:'本周',type:'week'},{title:'本月',type:'month'}, {title:'全年',type:'year'}],
+            dateData:['',''],
+            dateTab:''
+        }
+    },
+    methods: {
+        dateTabCheck(type){
+            if(type===this.dateTab)return
+            this.dateTab=type
+            this.dateData=this.getDate(type)
+        },
+        getDate(type){
+            let date=new Date()
+            let dateTime = date.getTime()
+            let timeSpan = type==='day'?0:type==='week'?604800000:type==='month'?2592000000:type==='year'?31536000000:0
+            let previousDates = new Date(dateTime-timeSpan)
+            if(type==='day'){
+                return [
+                    `${previousDates.getFullYear()}-${this.determineNum(previousDates.getMonth()+1)}-${this.determineNum(previousDates.getDate())}`,
+                    `${previousDates.getFullYear()}-${this.determineNum(previousDates.getMonth()+1)}-${this.determineNum(previousDates.getDate())}`]
+            }else{
+                return [
+                    `${previousDates.getFullYear()}-${this.determineNum(previousDates.getMonth()+1)}-${this.determineNum(previousDates.getDate())}`,
+                    `${date.getFullYear()}-${this.determineNum(date.getMonth()+1)}-${this.determineNum(date.getDate())}`]
+            }
+        },
+        determineNum(num){
+            return num<10?'0'+num:num
+        }
+    },
+    mounted() {
+        
+    },
+}
+</script>
+
+<style scoped>
+.pos-r {
+    position: relative;
+}
+
+.dis-f {
+    display: flex;
+}
+
+.al-item {
+    align-items: center;
+}
+
+.jus-bet {
+    justify-content: space-between;
+}
+
+.card-item {
+    width: 100%;
+    background: #fff;
+}
+
+.tabs-box {
+    width: 100%;
+    position: relative;
+}
+
+.date-tool {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 333;
+}
+
+.date-tool .mg-l-24 {
+    margin-left: 24px;
+}
+.date-tool .time-mg{
+    margin:0 24px;
+}
+
+.date-tool-title {
+    font-size: 14px;
+    cursor: pointer;
+}
+.date-tool-title-check{
+    color:#409EFF !important;
+}
+
+::v-deep .el-tabs__nav-scroll {
+    margin: 0 24px;
+}
+
+::v-deep .el-tabs__item {
+    height: 50px;
+    line-height: 50px;
+}
+</style>
diff --git a/src/views/home/widgets/components/allDataFrom.vue b/src/views/home/widgets/components/allDataFrom.vue
index ea2cb88..e1898a4 100644
--- a/src/views/home/widgets/components/allDataFrom.vue
+++ b/src/views/home/widgets/components/allDataFrom.vue
@@ -1,95 +1,21 @@
 <template>
     <div class="card-box">
-        <el-card shadow="hover" class="card-item">
+        <el-card shadow="hover" class="card-item" v-for="(item, i) in list" :key="i">
             <div>
                 <div class="item-text dis-f al-item jus-bet">
-                    总销售额
+                    {{ item.title }}
                     <el-icon :size="15">
                         <el-icon-warning-filled />
                     </el-icon>
                 </div>
                 <div class="item-price mg-t-10 mg-b-3" style="margin-left: -6px;">
-                    <span style="margin-right:2px;">￥</span>{{ setMark('45123456') }}
+                    <span v-if="item.type == 'sale'"><span style="margin-right:2px;">￥</span>{{ setNumMark('45123456')
+                    }}</span>
+                    <span v-if="item.type == 'access'">{{ setNumMark('45123456') }}</span>
+                    <span v-if="item.type == 'payment'">{{ setNumMark('45123456') }}</span>
+                    <span v-if="item.type == 'operate'">78%</span>
                 </div>
-                <div class="dis-f al-item item-text color-000">
-                    同比周 <span class="mg-l-10">12%</span>
-                    <el-icon :size="10" color="#f5222d" class="mg-l-5">
-                        <el-icon-caret-top />
-                    </el-icon>
-                </div>
-                <div class="dis-f al-item item-text color-000">
-                    同比日 <span class="mg-l-10">11%</span>
-                    <el-icon :size="10" color="#52c41a" class="mg-l-5">
-                        <el-icon-caret-bottom />
-                    </el-icon>
-                </div>
-                <div class="bor-b"></div>
-                <div class="item-text color-000">
-                    日销售额 <span style="margin-right:2px;">￥</span>{{ setMark('45123456') }}
-                </div>
-            </div>
-        </el-card>
-        <el-card shadow="hover" class="card-item">
-            <div>
-                <div class="item-text dis-f al-item jus-bet">
-                    访问量
-                    <el-icon :size="15">
-                        <el-icon-warning-filled />
-                    </el-icon>
-                </div>
-                <div class="item-price mg-t-10 mg-b-3">
-                    {{ setMark('45123456') }}
-                </div>
-                <div ref="echartDiv" style="height:44px;width:100%;">
-
-                </div>
-                <!-- <xEcharts ref="c1" height="44px" :option="accessOption"></xEcharts> -->
-                <div class="bor-b"></div>
-                <div class="item-text color-000">
-                    日访问量 <span style="margin-right:2px;">￥</span>{{ setMark('45123456') }}
-                </div>
-            </div>
-        </el-card>
-        <el-card shadow="hover" class="card-item">
-            <div>
-                <div class="item-text dis-f al-item jus-bet">
-                    支付笔数
-                    <el-icon :size="15">
-                        <el-icon-warning-filled />
-                    </el-icon>
-                </div>
-                <div class="item-price mg-t-10 mg-b-3">
-                    {{ setMark('45123456') }}
-                </div>
-                <xEcharts ref="c1" height="44px" :option="payOption"></xEcharts>
-                <div class="bor-b"></div>
-                <div class="item-text color-000">
-                    转化率 60%
-                </div>
-            </div>
-        </el-card>
-        <el-card shadow="hover" class="card-item">
-            <div>
-                <div class="item-text dis-f al-item jus-bet">
-                    运营活动效果图
-                    <el-icon :size="15">
-                        <el-icon-warning-filled />
-                    </el-icon>
-                </div>
-                <div class="item-price mg-t-10 mg-b-3">
-                    78%
-                </div>
-                <div class="progress-box">
-                    <div class="dis-f al-item pos-r">
-                        <el-progress style="width:100%;position: relative;" :percentage="80"
-                            :format="(percentage) => (percentage === 100 ? '' : '')">
-                                <div class="line" style="left:80%;">
-                                </div>
-                        </el-progress>
-                    </div>
-                </div>
-                <div class="bor-b"></div>
-                <div class="item-text color-000 dis-f al-item jus-bet">
+                <div v-if="item.type == 'sale'">
                     <div class="dis-f al-item item-text color-000">
                         同比周 <span class="mg-l-10">12%</span>
                         <el-icon :size="10" color="#f5222d" class="mg-l-5">
@@ -103,14 +29,55 @@
                         </el-icon>
                     </div>
                 </div>
+                <div v-if="item.type == 'access'">
+                    <xEcharts ref="c1" height="44px" :option="accessOption"></xEcharts>
+                </div>
+                <div v-if="item.type == 'payment'">
+                    <xEcharts ref="c1" height="44px" :option="payOption"></xEcharts>
+                </div>
+                <div v-if="item.type == 'operate'">
+                    <div class="progress-box">
+                        <div class="dis-f al-item pos-r">
+                            <el-progress style="width:100%;position: relative;" :percentage="80"
+                                :format="(percentage) => (percentage === 100 ? '' : '')">
+                                <div class="line-box" style="left:80%;">
+                                    <div class="line"></div>
+                                    <div class="line"></div>
+                                </div>
+                            </el-progress>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="bor-b"></div>
+                <div class="item-text color-000" :class="{ 'dis-f al-item jus-bet': item.type == 'operate' }">
+                    <span v-if="item.type == 'sale'">日销售额 <span style="margin-right:2px;">￥</span>{{ setNumMark('45123456')
+                    }}</span>
+                    <span v-if="item.type == 'access'">日访问量 <span style="margin-right:2px;">￥</span>{{
+                        setNumMark('45123456')
+                    }}</span>
+                    <span v-if="item.type == 'payment'">转化率 60%</span>
+                    <div class="dis-f al-item item-text color-000" v-if="item.type == 'operate'">
+                        同比周 <span class="mg-l-10">12%</span>
+                        <el-icon :size="10" color="#f5222d" class="mg-l-5">
+                            <el-icon-caret-top />
+                        </el-icon>
+                    </div>
+                    <div class="dis-f al-item item-text color-000" v-if="item.type == 'operate'">
+                        同比日 <span class="mg-l-10">11%</span>
+                        <el-icon :size="10" color="#52c41a" class="mg-l-5">
+                            <el-icon-caret-bottom />
+                        </el-icon>
+                    </div>
+                </div>
             </div>
         </el-card>
     </div>
 </template>
 
 <script>
-import * as echarts from 'echarts';
 import xEcharts from '@/components/xEcharts';
+import { setMark } from './tool.js'
 export default {
     title: "各项数据",
     icon: "el-icon-trend-charts",
@@ -120,6 +87,25 @@ export default {
     },
     data() {
         return {
+
+            list: [
+                {
+                    type: 'sale',
+                    title: '销售总额'
+                },
+                {
+                    type: 'access',
+                    title: '访问总量'
+                },
+                {
+                    type: 'payment',
+                    title: '支付笔数'
+                },
+                {
+                    type: 'operate',
+                    title: '运营活动效果图'
+                },
+            ],
             accessOption: {
                 xAxis: {
                     show: false,
@@ -139,7 +125,7 @@ export default {
                     {
                         data: [820, 932, 901, 934, 1290, 1330, 1320],
                         type: 'line',
-                        areaStyle: {}
+                        // areaStyle: {}
                     }
                 ]
             },
@@ -169,19 +155,11 @@ export default {
         }
     },
     methods: {
-        setMark(num) {
-            return num.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-        },
-        setEchart() {
-            let myChart = echarts.init(this.$refs.echartDiv, 'T');
-
-            let option;
-            option = this.accessOption
-            option && myChart.setOption(option);
+        setNumMark(num) {
+            return setMark(num)
         }
     },
     mounted() {
-        this.setEchart()
     },
 }
 </script>
@@ -227,10 +205,13 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    flex-wrap: wrap;
 }
 
 .card-item {
     width: 24%;
+    min-width: 246px;
+    /* margin-right: 10px; */
 }
 
 .item-text {
@@ -261,19 +242,43 @@ export default {
     position: relative;
 }
 
-.progress-box .line {
+.progress-box .line-box {
     height: 20px;
     width: 1px;
     position: absolute;
-    top: -6px;
+    top: -7px;
     z-index: 6;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: column;
+}
+
+.progress-box .line-box .line {
     background: #409EFF;
+    height: 3px;
+    width: 2px;
 }
 
 /* .el-progress--line {
     width: 350px
 } */
-::v-deep .el-progress{
-    display:block;
+::v-deep .el-progress {
+    display: block;
+}
+
+@media screen and (max-width: 550px) {
+    .card-item {
+        width: 100%;
+    }
+}
+
+@media (min-width:550px) and (max-width: 1115px) {
+    .card-item {
+        width: 48%;
+        min-width: 246px;
+        /* margin-right: 10px; */
+    }
 }
 </style>
diff --git a/src/views/home/widgets/components/component/StoreInfo.vue b/src/views/home/widgets/components/component/StoreInfo.vue
new file mode 100644
index 0000000..f9bdd89
--- /dev/null
+++ b/src/views/home/widgets/components/component/StoreInfo.vue
@@ -0,0 +1,176 @@
+<template>
+    <div class="dis-f al-item jus-bet box-pd font">
+        <div class="w-70">
+            <div style="margin-bottom:20px">
+                {{ dataType === 'sales' ? '销售趋势' : '访问量趋势' }}
+            </div>
+            <xEcharts ref="c1" height="254px" :option="payOption"></xEcharts>
+        </div>
+        <div class="w-30">
+            <div style="margin-bottom:20px">
+                {{ dataType === 'sales' ? '门店销售额排名' : '门店访问量排名' }}
+            </div>
+            <div style="height:254px;">
+                <div class="dis-f al-item w-100 mg-t-16" v-for="(item, i) in list" :key="i">
+                    <div class="list-num" :class="{ 'list-top': i < 3 }">{{ i + 1 }}</div>
+                    <div class="dis-f al-item" style="flex: 1;justify-content: space-between;">
+                        <span>{{ item.title }}</span>
+                        <span>{{ setNumMark(item.num) }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import xEcharts from '@/components/xEcharts';
+import { setMark } from '../tool';
+export default {
+    components: {
+        xEcharts
+    },
+    props: {
+        dataType: {
+            type: String,
+            default: 'sales'
+        },
+        listData:{
+            type:Array,
+            default:function(){
+                return []
+            }
+        }
+    },
+    watch:{
+        listData(nval){
+            this.payOption.series[0].data=nval
+        }
+    },
+    data() {
+        return {
+            payOption: {
+                xAxis: {
+                    splitLine: false,
+                    type: 'category',
+                    boundaryGap: true,
+                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+                },
+                yAxis: {
+                    min: 0,
+                    splitNumber: 3,
+                    type: 'value'
+                },
+                tooltip: {
+                    trigger: 'axis'
+                },
+                series: [
+                    {
+                        data: this.listData,
+                        type: 'bar',
+                        // areaStyle: {},
+                    }
+                ]
+            },
+            list: [
+                {
+                    title: '123',
+                    num: '123456789'
+                },
+                {
+                    title: '123',
+                    num: '123456789'
+                },
+                {
+                    title: '123',
+                    num: '123456789'
+                },
+                {
+                    title: '123',
+                    num: '123456789'
+                },
+                {
+                    title: '123',
+                    num: '123456789'
+                },
+                {
+                    title: '123',
+                    num: '123456789'
+                },
+                {
+                    title: '123',
+                    num: '123456789'
+                }
+            ]
+        }
+    },
+    methods: {
+        setNumMark(num) {
+            return setMark(num)
+        }
+    },
+    mounted() {
+
+    },
+}
+</script>
+
+<style scoped>
+.pos-r {
+    position: relative;
+}
+
+.dis-f {
+    display: flex;
+}
+
+.al-item {
+    align-items: center;
+}
+
+.jus-bet {
+    justify-content: space-between;
+}
+
+.box-pd {
+    padding: 0 24px 24px 24px;
+}
+
+.font {
+    color: #000000d9;
+    font-weight: 500;
+    font-size: 14px;
+}
+
+.w-70 {
+    width: 70%
+}
+
+.w-30 {
+    width: 30%
+}
+
+.w-100 {
+    width: 100%;
+}
+
+.mg-t-16{
+    margin-top:16px;
+}
+.list-num {
+    width: 20px;
+    height: 20px;
+    margin-top: 1.5px;
+    margin-right: 16px;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 20px;
+    text-align: center;
+    border-radius: 50%;
+    background: #f5f5f5;
+}
+
+.list-top {
+    color: #fff;
+    background: #314659;
+}</style>
diff --git a/src/views/home/widgets/components/hotSearch.vue b/src/views/home/widgets/components/hotSearch.vue
new file mode 100644
index 0000000..9c8a0b9
--- /dev/null
+++ b/src/views/home/widgets/components/hotSearch.vue
@@ -0,0 +1,208 @@
+<template>
+    <div class="card-item">
+        <div class="dis-f al-item jus-bet box-text" style="padding:0 24px;">
+            线上热门搜索
+            <el-dropdown>
+                <span class="el-dropdown-link">
+                    <el-icon :size="15">
+                        <el-icon-More />
+                    </el-icon>
+                </span>
+                <template #dropdown>
+                    <el-dropdown-menu>
+                        <el-dropdown-item>Action 1</el-dropdown-item>
+                        <el-dropdown-item>Action 2</el-dropdown-item>
+                    </el-dropdown-menu>
+                </template>
+            </el-dropdown>
+        </div>
+        <div class="line" style="margin-top:16px;"></div>
+        <div class="info-box">
+            <div class="dis-f al-item jus-bet">
+                <div style="flex: 0.5;">
+                    <div class="dis-f al-item">
+                        搜索用户数
+                        <el-dropdown style="margin-left:15px;">
+                            <span class="el-dropdown-link">
+                                <el-icon :size="15">
+                                    <el-icon-Warning />
+                                </el-icon>
+                            </span>
+                            <template #dropdown>
+                                <el-dropdown-menu>
+                                    <el-dropdown-item>指标说明</el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                    </div>
+                    <div class="info-num-text dis-f al-item">
+                        {{ setNumMark('12321') }}
+                        <span style="font-size: 16px;margin-left:30px;">
+                            17.1
+                            <el-icon :size="10" color="#52c41a">
+                                <el-icon-caret-bottom />
+                            </el-icon>
+                            <el-icon :size="10" color="#f5222d">
+                                <el-icon-caret-top />
+                            </el-icon>
+                        </span>
+                    </div>
+                    <div>
+                        <xEcharts ref="c1" height="45px" :option="seachOption"></xEcharts>
+                    </div>
+                </div>
+                <div style="flex: 0.5;">
+                    <div class="dis-f al-item">
+                        人均搜索次数
+                        <el-dropdown style="margin-left:15px;">
+                            <span class="el-dropdown-link">
+                                <el-icon :size="15">
+                                    <el-icon-Warning />
+                                </el-icon>
+                            </span>
+                            <template #dropdown>
+                                <el-dropdown-menu>
+                                    <el-dropdown-item>指标说明</el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                    </div>
+                    <div class="info-num-text dis-f al-item">
+                        2.7
+                        <span style="font-size: 16px;margin-left:30px;">
+                            17.1
+                            <el-icon :size="10" color="#52c41a">
+                                <el-icon-caret-bottom />
+                            </el-icon>
+                            <el-icon :size="10" color="#f5222d">
+                                <el-icon-caret-top />
+                            </el-icon>
+                        </span>
+                    </div>
+                    <div>
+                        <xEcharts ref="c1" height="45px" :option="seachOption"></xEcharts>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <el-table :data="tableData" style="width: 100%">
+                    <el-table-column prop="id" label="排名" />
+                    <el-table-column prop="seachKey" label="搜索关键词" />
+                    <el-table-column prop="userNum" label="用户数" sortable />
+                    <el-table-column prop="Increase" label="周涨幅" sortable>
+                        <template #default="scope">
+                            {{ scope.row.Increase }}
+                            <el-icon :size="10" color="#52c41a">
+                                <el-icon-caret-bottom />
+                            </el-icon>
+                            <el-icon :size="10" color="#f5222d">
+                                <el-icon-caret-top />
+                            </el-icon>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </div>
+        <div class="dis-f" style="justify-content: flex-end;margin-top:16px;padding:0 24px;">
+           <el-pagination layout="prev, pager, next" :total="50" /> 
+        </div>
+    </div>
+</template>
+
+<script>
+import xEcharts from '@/components/xEcharts';
+import { setMark } from './tool.js'
+export default {
+    title: "线上热门搜索",
+    icon: "el-icon-search",
+    description: "热门搜索数据",
+    components: {
+        xEcharts
+    },
+    data() {
+        return {
+            seachOption: {
+                xAxis: {
+                    show: false,
+                    type: 'category',
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                },
+                yAxis: {
+                    show: false,
+                    type: 'value'
+                },
+                tooltip: {
+                    trigger: 'axis'
+                },
+                series: [
+                    {
+                        data: [820, 932, 901, 934, 1290, 1330, 1320],
+                        type: 'line',
+                        smooth: true
+                    }
+                ]
+            },
+            tableData: [
+                { id: 1, seachKey: '搜索123', userNum: 158, Increase: '4%' }
+            ]
+        }
+    },
+    methods: {
+        setNumMark(num) {
+            return setMark(num)
+        }
+    },
+    mounted() {
+
+    },
+}
+</script>
+
+<style scoped>
+.pos-r {
+    position: relative;
+}
+
+.dis-f {
+    display: flex;
+}
+
+.al-item {
+    align-items: center;
+}
+
+.jus-bet {
+    justify-content: space-between;
+}
+
+.box-text {
+    color: #000000d9;
+    font-weight: 500;
+    font-size: 16px;
+}
+
+.card-item {
+    background: #fff;
+    padding: 16px 0;
+}
+
+.line {
+    width: 100%;
+    height: 1px;
+    background: #f0f0f0;
+}
+
+.info-box {
+    padding: 24px 24px 0 24px;
+    font-size: 14px;
+    color: #00000073;
+}
+
+.info-num-text {
+    color: #000000d9;
+    height: 32px;
+    font-size: 24px;
+    line-height: 32px;
+    margin-top: 10px;
+}
+</style>
diff --git a/src/views/home/widgets/components/saleInfo.vue b/src/views/home/widgets/components/saleInfo.vue
new file mode 100644
index 0000000..2df497a
--- /dev/null
+++ b/src/views/home/widgets/components/saleInfo.vue
@@ -0,0 +1,133 @@
+<template>
+    <div class="card-item">
+        <div class="dis-f al-item jus-bet box-text pd-24">
+            销售额类别占比
+            <el-dropdown>
+                <span class="el-dropdown-link">
+                    <el-icon :size="15">
+                        <el-icon-More />
+                    </el-icon>
+                </span>
+                <template #dropdown>
+                    <el-dropdown-menu>
+                        <el-dropdown-item>Action 1</el-dropdown-item>
+                        <el-dropdown-item>Action 2</el-dropdown-item>
+                    </el-dropdown-menu>
+                </template>
+            </el-dropdown>
+        </div>
+        <div class="line" style="margin-top:16px;"></div>
+        <div class="info-box pd-24">
+            <div class="mg-tb-32">销售额</div>
+            <div class="dis-f al-item">
+                <div style="width:100%;height:300px;">
+                   <xEcharts ref="c1" :option="saleOption"></xEcharts> 
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import xEcharts from '@/components/xEcharts';
+export default {
+    title: "销售额类别占比",
+    icon: "el-icon-help-filled",
+    description: "销售额类别",
+    components: {
+        xEcharts
+    },
+    data() {
+        return {
+            saleOption:{
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    top: '5%',
+    left: 'center'
+  },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      label: {
+        show: false,
+        position: 'center'
+      },
+      labelLine: {
+        show: false
+      },
+      data: [
+        { value: 1048, name: 'Search Engine' },
+        { value: 735, name: 'Direct' },
+        { value: 580, name: 'Email' },
+        { value: 484, name: 'Union Ads' },
+        { value: 300, name: 'Video Ads' }
+      ]
+    }
+  ]
+}
+        }
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+}
+</script>
+
+<style scoped>
+.dis-f {
+    display: flex;
+}
+
+.al-item {
+    align-items: center;
+}
+
+.jus-bet {
+    justify-content: space-between;
+}
+
+.box-text {
+    color: #000000d9;
+    font-weight: 500;
+    font-size: 16px;
+}
+
+.card-item {
+    background: #fff;
+    padding: 16px 0;
+    margin-top:15px;
+}
+
+.line {
+    width: 100%;
+    height: 1px;
+    background: #f0f0f0;
+}
+
+.info-box {
+    padding-top: 24px;
+    font-size: 14px;
+    color: #000000d9;
+    font-size:500;
+}
+.pd-24{
+    padding:0 24px;
+}
+.mg-tb-32{
+    margin:32px 0;
+}
+
+</style>
diff --git a/src/views/home/widgets/components/tool.js b/src/views/home/widgets/components/tool.js
new file mode 100644
index 0000000..e05fec1
--- /dev/null
+++ b/src/views/home/widgets/components/tool.js
@@ -0,0 +1,4 @@
+const setMark=(num)=> {
+    return num.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+}
+export {setMark} 
\ No newline at end of file
diff --git a/src/views/home/widgets/index.vue b/src/views/home/widgets/index.vue
index 77e0a6b..7ce7b1f 100644
--- a/src/views/home/widgets/index.vue
+++ b/src/views/home/widgets/index.vue
@@ -111,7 +111,7 @@
 						comp.disabled = true
 					}
 				}
-				console.log(allCompsList)
+				// console.log(allCompsList)
 				return allCompsList
 			},
 			myCompsList(){
@@ -222,7 +222,7 @@
 		border: 1px dashed var(--el-color-primary);
 		padding: 15px;
 	}
-	.customize-overlay {position: absolute;top:0;right:0;bottom:0;left:0;z-index: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;background: rgba(255,255,255,0.9);cursor: move;}
+	.customize-overlay {position: absolute;top:0;right:0;bottom:0;left:0;z-index: 666;display: flex;flex-direction: column;align-items: center;justify-content: center;background: rgba(255,255,255,0.9);cursor: move;}
 	.customize-overlay label {background: var(--el-color-primary);color: #fff;height:40px;padding:0 30px;border-radius: 40px;font-size: 18px;display: flex;align-items: center;justify-content: center;cursor: move;}
 	.customize-overlay label i {margin-right: 15px;font-size: 24px;}
 	.customize-overlay .close {position: absolute;top:15px;right:15px;}