新增首页页面

src/components/work/bonus.vue

+<template>
+  <div>
+    <q-card flat class="item-shadow bonus">
+      <div class="q-px-md q-pt-md">
+        <div class="row flex justify-between items-center q-mb-lg">
+          <div class="flex items-center">
+            <div class="bonus-title">奖金</div>
+            <div class="tab" :class="{'active-tab':tab==1}" @click="checkTab(1)">月度
+              <div class='dot' v-show="tab==1"></div>
+            </div>
+            <div class="tab" :class="{'active-tab':tab==2}" @click="checkTab(2)">年度
+              <div class='dot' v-show="tab==2"></div>
+            </div>
+
+          </div>
+          <div>
+            <el-date-picker v-model="date" value-format="yyyy-MM" size="small" :type="elDateType" style="width:110px"
+              :placeholder="elDatePlaceholder" class="q-mr-sm">
+            </el-date-picker>
+            <q-btn class="btn_bg" dense flat icon="more_horiz">
+              <q-menu auto-close>
+                <q-list dense>
+                  <q-item clickable>
+                    <q-item-section>
+                      <div class="row">
+                        <div class="q-mr-xs">
+                          <q-icon name="arrow-up" size="14"></q-icon>
+                        </div>
+                        <div>立即跟进</div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </div>
+        </div>
+        <div class="row items-center q-my-lg">
+          <div class="col flex q-pl-lg">
+            <img src="../../assets/images/newindex/bonus.png" alt="">
+            <div class="flex content-between q-pl-lg">
+              <div class="full-width block-name">月度总奖金</div>
+              <div class="block-num flex items-baseline"><span class="block-icon">¥</span> 0<span
+                  class="block-after">.00</span> </div>
+            </div>
+          </div>
+          <div class="q-pr-md">
+            <VueApexCharts width="105" height="105" :options="chartOptions4" :series="series4"></VueApexCharts>
+          </div>
+        </div>
+        <div class="list-box">
+          <div class="list flex no-wrap items-center">
+            <div class="name">开单数量</div>
+            <div class="progress"> <span class="cur">0</span>/0</div>
+            <div class="progress-charts">
+              <div>
+                距3档还差1个
+              </div>
+              <q-linear-progress rounded size="6px" :value="0.8" color="warning" style="width:90px" />
+            </div>
+            <div class="grade">1挡</div>
+            <div class="num">
+              +¥0.00
+            </div>
+          </div>
+          <div class="list flex no-wrap items-center">
+            <div class="name">名单人数</div>
+            <div class="progress"> <span class="cur">0</span>/0</div>
+            <div class="progress-charts">
+              <div>
+                距0档还差0个
+              </div>
+              <q-linear-progress rounded size="6px" :value="0.8" color="warning" style="width:90px" />
+            </div>
+            <div class="grade">0挡</div>
+            <div class="num">
+              +¥0.00
+            </div>
+          </div>
+          <div class="list flex no-wrap items-center">
+            <div class="name">名单人数</div>
+            <div class="progress"> <span class="cur">0</span>/0</div>
+            <div class="progress-charts">
+              <div>
+                距0档还差0个
+              </div>
+              <q-linear-progress rounded size="6px" :value="0.8" color="warning" style="width:90px" />
+            </div>
+            <div class="grade">0挡</div>
+            <div class="num">
+              +¥0.00
+            </div>
+          </div>
+          <div class="list flex no-wrap items-center">
+            <div class="name">名单人数</div>
+            <div class="progress"> <span class="cur">0</span>/0</div>
+            <div class="progress-charts">
+              <div>
+                距0档还差0个
+              </div>
+              <q-linear-progress rounded size="6px" :value="0.8" color="warning" style="width:90px" />
+            </div>
+            <div class="grade">0挡</div>
+            <div class="num">
+              +¥0.00
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+  </div>
+</template>
+<script>
+  import VueApexCharts from "vue-apexcharts";
+  export default {
+    components: {
+      VueApexCharts
+    },
+    data() {
+      return {
+        tab: 2,
+        date: "",
+        elDateType:"month",
+        elDatePlaceholder:"选择月",
+        series4: [ 4, 3, 2, 20, 7],
+        chartOptions4: {
+          labels: ["A类客户", "B类客户", "C类客户", "D类客户", "E类客户"],
+          chart: {
+            type: "donut",
+            width: 40,
+            height: 40,
+            sparkline: {
+              enabled: true
+            }
+          },
+          stroke: {
+            width: 1
+          },
+          tooltip: {
+            fixed: {
+              enabled: false
+            }
+          }
+        }
+      };
+    },
+    methods:{
+      checkTab(type){
+        if(type==1){
+          this.tab=1
+          this.elDateType="month"
+          this.elDatePlaceholder="选择月"
+          this.date=""
+        }else if(type==2){
+          this.tab=2
+          this.elDateType="year"
+          this.elDatePlaceholder="选择年"
+          this.date=""
+        }
+      }
+    }
+  };
+
+</script>
+<style lang="scss" scoped>
+  .bonus {
+    // width: 660px;
+    height: 440px;
+    border-radius: 8px;
+    background-color: #FFFFFF;
+
+    .bonus-title {
+      font-size: 18px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: #111111;
+      margin-right: 40px;
+    }
+
+    .tab {
+      font-size: 14px;
+      font-family: PingFang SC;
+      color: #999999;
+      margin: 0 25px;
+      position: relative;
+
+      .dot {
+        width: 6px;
+        height: 6px;
+        background-color: #2961FE;
+        border-radius: 50%;
+        position: absolute;
+        bottom: -5px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+
+    .active-tab {
+      font-weight: 800;
+      color: #111111 !important;
+    }
+
+    .btn_bg {
+      background-color: #F2F4F7;
+      color: #fff;
+      border-radius: 6px;
+    }
+
+    .btn_bg:hover {
+      background-color: #2961FE;
+    }
+
+    .block-name {
+      font-size: 14px;
+      font-family: PingFang SC;
+      color: #A4A5B7;
+    }
+
+    .block-num {
+      font-size: 25px;
+      color: #404040;
+      font-weight: 700;
+
+      .block-icon {
+        font-size: 15px;
+        font-weight: 300;
+      }
+
+      .block-after {
+        font-size: 15px;
+        font-weight: 500;
+      }
+    }
+
+    .list-box {
+      padding: 0 15px;
+    }
+
+    .list {
+      height: 40px;
+      margin-bottom: 15px;
+      padding: 0 35px;
+      background-color: #F2F4F7;
+      border-radius: 6px;
+
+      .name {
+        font-size: 14px;
+        color: #111111;
+        margin-right: 55px;
+      }
+
+      .progress {
+        width: 100px;
+        font-size: 14px;
+        color: #A4A5B7;
+        border-radius: 6px;
+
+        .cur {
+          font-size: 18px;
+          font-weight: bold;
+          color: #111111;
+        }
+      }
+
+      .progress-charts {
+        width: 150px;
+        font-size: 12px;
+        color: #666666;
+      }
+
+      .grade {
+        width: 70px;
+        font-size: 14px;
+        color: #999999;
+      }
+
+      .num {
+        font-size: 14px;
+        font-weight: 500;
+        color: #999999;
+      }
+    }
+  }
+
+  /deep/el-input,
+  /deep/.el-input__inner {
+    background-color: #F2F4F7 !important;
+    color: #2961FE !important;
+    border: none !important;
+  }
+
+  /deep/.el-input__prefix,
+  /deep/.el-input__suffix {
+    color: #2961FE !important;
+  }
+
+  /deep/.el-input__inner::placeholder {
+    color: #2961FE !important;
+    font-size: 12px;
+  }
+
+</style>