修改首页样式

src/views/dashboard/OrderCount.vue

@@ -1,33 +1,5 @@
 <template>
-  <div class="divBox">
-    <el-row :gutter="24">
-      <el-col san="24" class="ivu-mb">
-        <el-card :bordered="false" class="dashboard-console-visit">
-          <div slot="header">
-            <div class="acea-row row-between-wrapper">
-              <div class="acea-row row-middle">
-                <el-avatar
-                  icon="el-icon-s-data"
-                  size="small"
-                  style="color: #1890ff; background: #e6f7ff; font-size: 13px"
-                />
-                <span class="ivu-pl-8">订单</span>
-              </div>
-              <div class="checkTime">
-                <!-- <el-radio-group v-model="visitDate" class="ivu-mr-8">
-                                    <el-radio label="last30" @change="handleChangeVisitType">30天</el-radio>
-                                    <el-radio label="week" @change="handleChangeWeek">周</el-radio>
-                                    <el-radio label="month" @change="handleChangeMonth">月</el-radio>
-                                    <el-radio label="year" @change="handleChangeYear">年</el-radio>
-                                </el-radio-group> -->
-              </div>
-            </div>
-          </div>
           <div :class="className" ref="chart" :style="{ height: height, width: width }" />
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
 </template>
 
 <script>

src/views/dashboard/PanelGroup.vue

@@ -9,35 +9,7 @@
               <el-tag type="success">昨日</el-tag>
             </div>
             <div class="content" v-if="count">
-              <span class="content-number spBlock mb15">{{
+              <span class="content-number spBlock mb15"><count-to :start-val="0" :end-val="count.userCount" :duration="2600" class="card-panel-num" /></span>
-                count.userCount
-              }}</span>
-              <div>
-                <span class="content-time mr20"
-                  >日同比：<i
-                    class="content-is"
-                    :class="Number(count.dayRate) >= 0 ? 'up' : 'down'"
-                    >{{ count.dayRate }}</i
-                  ><i
-                    :class="
-                      Number(count.dayRate) >= 0
-                        ? 'el-icon-caret-top'
-                        : 'el-icon-caret-bottom'
-                    "
-                /></span>
-                <span class="content-time"
-                  >周同比：<i
-                    class="content-is"
-                    :class="Number(count.weekRate) >= 0 ? 'up' : 'down'"
-                    >{{ count.weekRate }}</i
-                  ><i
-                    :class="
-                      Number(count.weekRate) >= 0
-                        ? 'el-icon-caret-top'
-                        : 'el-icon-caret-bottom'
-                    "
-                /></span>
-              </div>
               <el-divider></el-divider>
               <div class="acea-row row-between-wrapper">
                 <span class="content-time">总销售额</span>
@@ -53,35 +25,7 @@
               <el-tag type="success">昨日</el-tag>
             </div>
             <div class="content" v-if="count">
-              <span class="content-number spBlock mb15">{{
+              <span class="content-number spBlock mb15"><count-to :start-val="0" :end-val="count.orderCount" :duration="3000" class="card-panel-num" /></span>
-                count.userCount
-              }}</span>
-              <div>
-                <span class="content-time mr20"
-                  >日同比：<i
-                    class="content-is"
-                    :class="Number(count.dayRate) >= 0 ? 'up' : 'down'"
-                    >{{ count.dayRate }}</i
-                  ><i
-                    :class="
-                      Number(count.dayRate) >= 0
-                        ? 'el-icon-caret-top'
-                        : 'el-icon-caret-bottom'
-                    "
-                /></span>
-                <span class="content-time"
-                  >周同比：<i
-                    class="content-is"
-                    :class="Number(count.weekRate) >= 0 ? 'up' : 'down'"
-                    >{{ count.weekRate }}</i
-                  ><i
-                    :class="
-                      Number(count.weekRate) >= 0
-                        ? 'el-icon-caret-top'
-                        : 'el-icon-caret-bottom'
-                    "
-                /></span>
-              </div>
               <el-divider></el-divider>
               <div class="acea-row row-between-wrapper">
                 <span class="content-time">总访问量</span>
@@ -97,35 +41,7 @@
               <el-tag type="success">昨日</el-tag>
             </div>
             <div class="content" v-if="count">
-              <span class="content-number spBlock mb15">{{
+              <span class="content-number spBlock mb15"><count-to :start-val="0" :end-val="count.priceCount" :duration="3200" class="card-panel-num" /></span>
-                count.userCount
-              }}</span>
-              <div>
-                <span class="content-time mr20"
-                  >日同比：<i
-                    class="content-is"
-                    :class="Number(count.dayRate) >= 0 ? 'up' : 'down'"
-                    >{{ count.dayRate }}</i
-                  ><i
-                    :class="
-                      Number(count.dayRate) >= 0
-                        ? 'el-icon-caret-top'
-                        : 'el-icon-caret-bottom'
-                    "
-                /></span>
-                <span class="content-time"
-                  >周同比：<i
-                    class="content-is"
-                    :class="Number(count.weekRate) >= 0 ? 'up' : 'down'"
-                    >{{ count.weekRate }}</i
-                  ><i
-                    :class="
-                      Number(count.weekRate) >= 0
-                        ? 'el-icon-caret-top'
-                        : 'el-icon-caret-bottom'
-                    "
-                /></span>
-              </div>
               <el-divider></el-divider>
               <div class="acea-row row-between-wrapper">
                 <span class="content-time">总订单量</span>
@@ -141,35 +57,7 @@
               <el-tag type="success">昨日</el-tag>
             </div>
             <div class="content" v-if="count">
-              <span class="content-number spBlock mb15">{{
+              <span class="content-number spBlock mb15"><count-to :start-val="0" :end-val="count.goodsCount" :duration="3600" class="card-panel-num" /></span>
-                count.userCount
-              }}</span>
-              <div>
-                <span class="content-time mr20"
-                  >日同比：<i
-                    class="content-is"
-                    :class="Number(count.dayRate) >= 0 ? 'up' : 'down'"
-                    >{{ count.dayRate }}</i
-                  ><i
-                    :class="
-                      Number(count.dayRate) >= 0
-                        ? 'el-icon-caret-top'
-                        : 'el-icon-caret-bottom'
-                    "
-                /></span>
-                <span class="content-time"
-                  >周同比：<i
-                    class="content-is"
-                    :class="Number(count.weekRate) >= 0 ? 'up' : 'down'"
-                    >{{ count.weekRate }}</i
-                  ><i
-                    :class="
-                      Number(count.weekRate) >= 0
-                        ? 'el-icon-caret-top'
-                        : 'el-icon-caret-bottom'
-                    "
-                /></span>
-              </div>
               <el-divider></el-divider>
               <div class="acea-row row-between-wrapper">
                 <span class="content-time">总用户</span>

src/views/home.vue

@@ -4,18 +4,8 @@
       <!--<yshop-info />-->
       <panel-group />
       <panel-group-t />
-      <order-count></order-count>
 
       <div class="divBox">
-        <el-row :gutter="24">
-          <el-col
-            :xl="16"
-            :lg="12"
-            :md="24"
-            :sm="24"
-            :xs="24"
-            class="ivu-mb mb10 dashboard-console-visit"
-          >
         <el-card :bordered="false" dis-hover>
           <div slot="header">
             <div class="acea-row row-middle">
@@ -24,32 +14,47 @@
                 size="small"
                 style="color: #1890ff; background: #e6f7ff; font-size: 13px"
               />
-                  <span class="ivu-pl-8">本月成交额</span>
+              <span class="ivu-pl-8">订单</span>
             </div>
           </div>
-              <bar-chart />
+          <el-row :gutter="24">
-            </el-card>
+            <el-col
-          </el-col>
+              :xl="8"
-          <el-col :xl="8" :lg="12" :md="24" :sm="24" :xs="24">
+              :lg="8"
-            <el-card
+              :md="24"
-              :bordered="false"
+              :sm="24"
-              dis-hover
+              :xs="24"
-              class="dashboard-console-visit"
+              class="ivu-mb mb10 dashboard-console-visit"
+            >
+              <span class="ivu-pl-8">商品分析</span>
+              <order-count></order-count>
+            </el-col>
+            <el-col
+              :xl="8"
+              :lg="8"
+              :md="24"
+              :sm="24"
+              :xs="24"
+              class="ivu-mb mb10 dashboard-console-visit"
+            >
+              <span class="ivu-pl-8">本月成交额</span>
+            
+              <bar-chart />
+            </el-col>
+            <el-col
+              :xl="8"
+              :lg="8"
+              :md="24"
+              :sm="24"
+              :xs="24"
+              class="ivu-mb mb10 dashboard-console-visit"
             >
-              <div slot="header">
-                <div class="acea-row row-middle">
-                  <el-avatar
-                    icon="el-icon-picture-outline-round"
-                    size="small"
-                    style="color: #1890ff; background: #e6f7ff; font-size: 13px"
-                  />
               <span class="ivu-pl-8">本月订单数</span>
-                </div>
+
-              </div>
               <pie-chart />
-            </el-card>
             </el-col>
           </el-row>
+        </el-card>
       </div>
     </div>
   </div>