Skip to content

C
confucius
Commit 3ff11504 authored by 罗超's avatar 罗超
Browse files
Options

新增首页页面

parent 2f3c689d
Show whitespace changes
Inline Side-by-side
Showing with 1552 additions and 205 deletions
src/components/work/bonus.vue 0 → 100644
View file @ 3ff11504
<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>
src/components/work/commission.vue 0 → 100644
View file @ 3ff11504
<template>
<div class="q-px-md q-pt-md item-shadow commission">
<div class="row flex justify-between items-center q-mb-lg">
<div class="flex items-center">
<div class="commission-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" style="height:62px">
<img src="../../assets/images/newindex/ticheng1.png" alt="">
<div class="flex content-between q-pl-lg" style="height:62px">
<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="block-name q-px-md">
<div>当月年终进度</div>
<div class="progress-box flex no-wrap">
<el-tooltip placement="bottom" :value="true" :offset="-5" manual popper-class="progress-tip">
<div slot="content">
25%
</div>
<q-linear-progress size="20px" :value="progress1" track-color="progress-1" color="blue-3"
class="progress-block ">
<div class="absolute-full flex flex-center progress-tag">
0-2.5w
</div>
</q-linear-progress>
</el-tooltip>
<el-tooltip placement="bottom" :value="true" :offset="-5" manual popper-class="progress-tip">
<div slot="content">
50%
</div>
<q-linear-progress size="20px" :value="progress2" track-color="progress-2" color="blue-4"
class="progress-block ">
<div class="absolute-full flex flex-center progress-tag">
2.5w-5w
</div>
</q-linear-progress>
</el-tooltip>
<el-tooltip placement="bottom" :value="true" :offset="-5" manual popper-class="progress-tip">
<div slot="content">
75%
</div>
<q-linear-progress size="20px" :value="progress3" track-color="progress-3" color="blue-5"
class="progress-block ">
<div class="absolute-full flex flex-center progress-tag">
5w-7.5w
</div>
</q-linear-progress>
</el-tooltip>
<el-tooltip placement="bottom" :value="true" :offset="-5" manual popper-class="progress-tip">
<div slot="content">
100%
</div>
<q-linear-progress size="20px" :value="progress4" track-color="progress-4" color="blue-6"
class="progress-block ">
<div class="absolute-full flex flex-center progress-tag">
7.5w-10w
</div>
</q-linear-progress>
</el-tooltip>
</div>
</div>
<div class="commission-block2 flex wrap content-between">
<div class="col flex q-pl-xs">
<img src="../../assets/images/newindex/ticheng2.png" alt="" style="height:62px">
<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="flex justify-between full-width">
<div class="statistic-block flex wrap justify-center content-center">
<div class="statistic-price full-width flex justify-center items-baseline">
<span class="before">¥</span>
0
<span class="after">.00</span>
</div>
<div class="statistic-name">
提成累计
</div>
</div>
<div class="statistic-block flex wrap justify-center content-center">
<div class="statistic-price full-width flex justify-center items-baseline">
<span class="before">¥</span>
0
<span class="after">.00</span>
</div>
<div class="statistic-name">
已发放
</div>
</div>
<div class="statistic-block flex wrap justify-center content-center">
<div class="statistic-price full-width flex justify-center items-baseline">
<span class="before">¥</span>
0
<span class="after">.00</span>
</div>
<div class="statistic-name">
待发放
</div>
</div>
</div>
</div>
<div class="commission-table">
<div class="row q-mb-md">
<q-input filled dense v-model="input" label="标题" class="col-4 q-mr-md" />
<q-select filled dense v-model="select" :options="options" label="状态" option-label="label" class="col-4"
option-value="value" map-options emit-value />
</div>
<q-table :data="tableData" :pagination="pageMsg" no-data-label="暂无相关数据" flat :columns="columns" row-key="Id"
separator="horizontal" hide-bottom>
<template v-slot:body-cell-ratio="props">
<q-td auto-width :props="props">
<div>{{props.row.ratio*100}}%</div>
<q-linear-progress :value="parseFloat(props.row.ratio)" rounded size="sm"/>
</q-td>
</template>
</q-table>
</div>
</div>
</template>
<script>
import VueApexCharts from "vue-apexcharts";
export default {
components: {
VueApexCharts
},
data() {
return {
tab: 1,
date: "",
elDateType: "month",
elDatePlaceholder: "选择月",
progress1: 1,
progress2: 1,
progress3: 1,
progress4: 0.2,
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
}
}
},
input: "",
select: "",
options: [{
label: '选项一',
value: 1,
}, {
label: '选项二',
value: 2,
}],
tableData: [{
name: "202109",
commission: "0",
giveout: "0",
all: "0",
ratio: "0.2",
}, {
name: "202109",
commission: "0",
giveout: "0",
all: "0",
ratio: "0.3",
}],
columns: [{
name: 'name',
label: '标题',
align: 'center',
field: "name",
headerStyle: 'color: #A4A5B7',
style: 'color: #A4A5B7',
}, {
name: 'commission',
label: '总提成',
align: 'center',
field: "commission",
headerStyle: 'color: #A4A5B7',
style: 'color: #A4A5B7',
}, {
name: 'giveout',
label: '已发放',
align: 'center',
field: "giveout",
headerStyle: 'color: #A4A5B7',
style: 'color: #A4A5B7',
}, {
name: 'all',
label: '销售总额',
align: 'center',
field: "all",
headerStyle: 'color: #A4A5B7',
style: 'color: #A4A5B7',
}, {
name: 'ratio',
label: '比例',
align: 'center',
field: "ratio",
headerStyle: 'color: #A4A5B7;width: 100px',
style: 'color: #A4A5B7',
}],
pageMsg: {
rowsPerPage: 0
}
};
},
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>
.commission {
// width: 660px;
height: 980px;
border-radius: 8px;
background-color: #FFFFFF;
margin-bottom:20px;
.commission-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: 40px;
color: #404040;
font-weight: 700;
line-height: 20px;
.block-icon {
font-size: 20px;
font-weight: 300;
}
.block-after {
font-size: 20px;
font-weight: 500;
}
}
.progress-box {
// width: 600px;
height: 20px;
margin: 10px auto;
border-radius: 2px;
overflow: hidden;
.progress-block {
width: 25%;
}
.progress-tag {
text-align: center;
font-size: 12px;
line-height: 20px;
color: #FFFFFF;
}
}
.commission-block2 {
width: 600px;
height: 250px;
margin: 50px auto 25px;
border-radius: 8px;
background-color: #F2F4F7;
padding: 40px 30px;
.statistic-block {
width: 150px;
height: 75px;
background-color: #FFFFFF;
border-radius: 6px;
.statistic-price {
font-size: 30px;
color: #404040;
font-weight: 700;
// text-align: center;
line-height: 20px;
.before {
font-weight: 300;
font-size: 20px;
}
.after {
font-size: 20px;
}
}
.statistic-name {
font-size: 14px;
color: #999999;
text-align: center;
}
}
}
.commission-table {
width: 600px;
height: 375px;
margin: 0 auto;
border-top: 1px solid #EAEBF0;
padding-top: 15px;
}
}
/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>
<style>
.bg-progress-1 {
background-color: #E1E1E1;
}
.bg-progress-2 {
background-color: #CACACA;
}
.bg-progress-3 {
background-color: #B3B3B3;
}
.bg-progress-4 {
background-color: #9B9B9B;
}
.bg-active-1 {
background-color: #89A8FE;
}
.bg-active-2 {
background-color: #6187F0;
}
.bg-active-3 {
background-color: #2961FE;
}
.bg-active-4 {
background-color: #0545F7;
}
.progress-tip {
padding: 2px 10px;
border-radius: 15px;
background-color: #CACACA !important;
}
.popper__arrow {
border-bottom-color: #cacaca !important;
}
.popper__arrow::after {
border-bottom-color: #cacaca !important;
}
</style>
src/components/work/dasbord.vue
View file @ 3ff11504
......@@ -3,18 +3,19 @@
<div class="q-my-md text-dark" style="font-size:20px">
客户关系
</div>
<div class="row q-gutter-md">
<q-card flat class=" col-3 item-shadow">
<div class="q-pl-md q-pt-md">
<div class="row items-center">
<div
class="text-applegrey text-weight-bold col"
style="font-size:16px"
>
新增学员
<div class="row q-gutter-md wrap work-con">
<div >
<div class="item-shadow return-commission" style="flex-shrink:1">
<div class="q-px-md q-pt-md row items-center">
<div class="col return-commission-title">
返佣
</div>
<div>
<q-btn color="text-dark" dense round flat icon="more_vert">
<el-date-picker v-model="value2" value-format="yyyy-MM" size="small" type="month" style="width:110px"
placeholder="选择月" 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>
......@@ -32,142 +33,126 @@
</q-btn>
</div>
</div>
<div class="text-dark din text-weight-bold" style="font-size:36px">
<span>36</span>
<span
class="text-applegrey pingfang q-ml-xs text-weight-regular"
style="font-size:12px;"
>
<span class="q-mr-md">人</span>
<span class="q-mr-xs">较30日均值</span>
<span class="text-weight-bold text-negative">+36%</span>
</span>
</div>
</div>
<VueApexCharts
width="100%"
height="20"
:options="chartOptions"
:series="series"
></VueApexCharts>
</q-card>
<q-card flat class=" col-3 item-shadow">
<div class="q-pl-md q-pt-md">
<div class="row items-center">
<div
class="text-applegrey text-weight-bold col"
style="font-size:16px"
>
待跟进
<VueApexCharts width="100%" height="90" :options="chartOptions" :series="series" style="margin-top:90px">
</VueApexCharts>
<div class="return-commission-Statistics flex wrap content-start">
<div class="Statistics-block">
<div class="Statistics-num">
<span class="Statistics-pre">¥</span>
0.00
</div>
<div class="Statistics-label">
已返佣
</div>
</div>
<div class="Statistics-block">
<div class="Statistics-num">
<span class="Statistics-pre">￥</span>
0.00
</div>
<div class="Statistics-label">
待结算
</div>
</div>
<div class="Statistics-block">
<div class="Statistics-num">
<span class="Statistics-pre">￥</span>
0.00
</div>
<div class="Statistics-label">
累计返佣
</div>
</div>
<div class="Statistics-block">
<div class="Statistics-num">
<span class="Statistics-pre">￥</span>
0.00
</div>
<div class="Statistics-label">
待返佣
</div>
</div>
</div>
</div>
<div class="item-shadow q-pa-md adviser" style="flex-shrink:1">
<div class="adviser-title">学管/课程顾问</div>
<div class="adviser-block flex justify-between items-center">
<div class="left">
<div class="num">
0 <span class="after">个</span>
</div>
<div>
<q-btn color="text-dark" dense round flat icon="more_vert">
<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>
<q-avatar size="md">
<img src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg">
</q-avatar>
</div>
</div>
<div class="row items-center">
<div class="text-dark col din text-weight-bold" style="font-size:36px">
<span>36</span>
<span
class="text-applegrey pingfang q-ml-xs text-weight-regular"
style="font-size:12px;"
>
<span class="q-mr-md">人</span>
</span>
</div>
<div class="q-pr-md">
<VueApexCharts
width="40"
height="40"
:options="chartOptions4"
:series="series4"
></VueApexCharts>
</div>
</div>
</div>
</q-card>
<q-card flat class=" col-3 item-shadow">
<div class="q-pl-md q-pt-md">
<div class="row items-center">
<div
class="text-applegrey text-weight-bold col"
style="font-size:16px"
>
今日预约到访
<div class="adviser-block flex justify-between items-center" style="background-color:#F2FAFF;">
<div class="left">
<div class="num">
0 <span class="after">个</span>
</div>
<div>
<q-btn color="text-dark" dense round flat icon="more_vert">
<q-menu auto-close>
<q-list dense>
<q-item clickable>
<q-item-section>
<div class="row">
<div class="q-mr-xs">
<q-icon name="add" size="14"></q-icon>
缺勤学员
</div>
<div>添加到访</div>
</div>
</q-item-section>
</q-item>
<q-item clickable>
<q-item-section>
<div class="row">
<div class="q-mr-xs">
<q-icon name="add" size="14"></q-icon>
<div>
<q-avatar size="md">
<img src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg">
</q-avatar>
</div>
<div>添加预约</div>
</div>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<div class="adviser-block flex justify-between items-center" style="background-color:#FFF5F8;">
<div class="left">
<div class="num">
0 <span class="after">个</span>
</div>
<div>
即将结业学员
</div>
</div>
<div>
<q-avatar size="md">
<img src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg">
</q-avatar>
</div>
<div class="row">
<div class="text-dark din text-weight-bold" style="font-size:36px">
<span>2 </span>
<span
class="text-applegrey pingfang q-ml-xs text-weight-regular"
style="font-size:12px;"
>
<span class="q-mr-md">人</span>
</span>
</div>
<div class="q-mx-xs q-mt-xs col bg-grey-2 border-radius" style="height:64px;">
</div>
</div>
<Commission style="flex-shrink:1"></Commission>
<div style="flex-shrink:1">
<Sell></Sell>
<Bonus></Bonus>
</div>
</q-card>
</div>
</div>
</template>
<script>
import VueApexCharts from "vue-apexcharts";
export default {
components: { VueApexCharts },
import VueApexCharts from "vue-apexcharts";
import Bonus from './bonus'
import Commission from './commission'
import Sell from './sell'
export default {
components: {
VueApexCharts,
Bonus,
Commission,
Sell
},
data() {
return {
series: [
{
value2: "",
series: [{
name: "新加名单",
data: [
{
data: [{
x: "09-10",
y: 5
},
......@@ -288,8 +273,7 @@ export default {
y: 3
}
]
}
],
}],
chartOptions6: {
chart: {
type: "bar",
......@@ -320,7 +304,7 @@ export default {
},
y: {
title: {
formatter: function(seriesName) {
formatter: function (seriesName) {
return "";
}
}
......@@ -358,7 +342,7 @@ export default {
}
}
},
series4: [4,3,2,20,7],
series4: [4, 3, 2, 20, 7],
chartOptions4: {
labels: ["A类客户", "B类客户", "C类客户", "D类客户", "E类客户"],
chart: {
......@@ -380,7 +364,153 @@ export default {
}
};
}
};
};
</script>
<style></style>
<style lang="scss" scoped>
.work-con {
height: calc(100vh - 230px);
overflow: scroll;
box-sizing: border-box;
}
.return-commission {
// width: 330px;
height: 440px;
border-radius: 8px;
background-color: #FA9D0A;
overflow: hidden;
position: relative;
.return-commission-title {
font-size: 18px;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
}
.btn_bg {
background-color: rgba(255, 255, 255, 0.15);
color: #fff;
border-radius: 6px;
}
.return-commission-Statistics {
// width: 330px;
height: 210px;
position: absolute;
left: 0;
bottom: 0;
background-color: #fff;
border-radius: 12px 12px 0 0;
padding-top: 40px;
.Statistics-block {
width: 50%;
height: 50px;
padding-left: 25px;
margin-bottom: 20px;
.Statistics-num {
font-size: 20px;
font-weight: bolder;
color: #404040;
display: flex;
align-items: baseline;
.Statistics-pre {
font-weight: 400;
letter-spacing: 1px;
}
}
.Statistics-label {
font-family: PingFang SC;
font-size: 14px;
color: #999999;
}
}
}
}
.adviser {
width: 330px;
height: 520px;
background-color: #FFFFFF;
border-radius: 8px;
margin-top: 20px;
.adviser-title {
font-size: 18px;
line-height: 17px;
font-family: PingFang SC;
font-weight: bold;
color: #111111;
margin-bottom: 35px;
}
.adviser-block {
width: 275px;
height: 110px;
background-color: #F8F5FF;
border-radius: 6px;
margin: 0 auto 20px;
padding: 0 20px;
.left {
.num {
font-size: 36px;
font-weight: 800;
line-height:15px;
color: #404040;
.after{
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #404040;
}
}
}
}
}
/deep/el-input,
/deep/.el-input__inner {
background-color: rgba(255, 255, 255, 0.15);
color: #fff;
border: none;
}
/deep/.el-input__prefix,
/deep/.el-input__suffix {
color: #fff;
}
/deep/.el-input__inner::placeholder {
color: #fff;
font-size: 12px;
}
</style>
<style>
.work-con::-webkit-scrollbar {
width: 5px;
height: 5px;
}
.work-con::-webkit-scrollbar-track {
background: #fff;
border-radius: 2px;
}
.work-con::-webkit-scrollbar-thumb {
background: #444;
border-radius: 10px;
}
.work-con::-webkit-scrollbar-thumb:hover {
background: #999;
}
.work-con::-webkit-scrollbar-corner {
background: #204754;
}
</style>
src/components/work/sell.vue 0 → 100644
View file @ 3ff11504
<template>
<div class="q-mb-lg">
<q-card flat class="item-shadow sell">
<div class="top">
<div class="row flex justify-between items-center">
<div class="flex items-center q-px-md q-pt-md q-mb-xs">
<div class="sell-title">市场/销售</div>
</div>
</div>
<VueApexCharts width="100%" height="105" :options="chartOptions" :series="series">
</VueApexCharts>
</div>
<div class="bottom flex justify-between content-between">
<div class="sell-block">
<div class="flex justify-between items-center">
<img src="../../assets/images/newindex/sell1.png" style="width:26px;height:26px">
<q-btn size="sm" dense flat round 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 class="sell-num">
0<span class="unit">人</span>
</div>
<div class="flex justify-between items-center">
<div class="sell-name">今日新名单</div>
<img src="../../assets/images/newindex/sell8.png" alt="" style="width:10px;">
</div>
</div>
<div class="sell-block" style="background-color:#FFF5F8">
<div class="flex justify-between items-center">
<img src="../../assets/images/newindex/sell2.png" style="width:26px;height:26px">
<q-btn size="sm" dense flat round 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 class="sell-num">
0<span class="unit">人</span>
</div>
<div class="flex justify-between items-center">
<div class="sell-name">待跟进</div>
<img src="../../assets/images/newindex/sell8.png" alt="" style="width:10px;">
</div>
</div>
<div class="sell-block" style="background-color:#E8FFF3">
<div class="flex justify-between items-center">
<img src="../../assets/images/newindex/sell3.png" style="width:26px;height:26px">
<q-btn size="sm" dense flat round 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 class="sell-num">
0<span class="unit">人</span>
</div>
<div class="flex justify-between items-center">
<div class="sell-name">今日到访</div>
<img src="../../assets/images/newindex/sell8.png" alt="" style="width:10px;">
</div>
</div>
<div class="sell-block" style="background-color:#F2FAFF;box-shadow: 1px 3px 49px 0px rgba(0, 158, 247, 0.28);">
<div class="flex justify-between items-center">
<img src="../../assets/images/newindex/sell4.png" style="width:26px;height:26px">
<q-btn size="sm" dense flat round 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 class="sell-num">
0<span class="unit">人</span>
</div>
<div class="flex justify-between items-center">
<div class="sell-name">今日拜访</div>
<img src="../../assets/images/newindex/sell8.png" alt="" style="width:10px;">
</div>
</div>
<div class="sell-block" style="background-color:#FFFAF5">
<div class="flex justify-between items-center">
<img src="../../assets/images/newindex/sell5.png" style="width:26px;height:26px">
<q-btn size="sm" dense flat round 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 class="sell-num">
0<span class="unit">人</span>
</div>
<div class="flex justify-between items-center">
<div class="sell-name">今日新同行</div>
<img src="../../assets/images/newindex/sell7.png" alt="" style="width:10px;">
</div>
</div>
<div class="sell-block" style="background-color:#FEF4FE">
<div class="flex justify-between items-center">
<img src="../../assets/images/newindex/sell6.png" style="width:26px;height:26px">
<q-btn size="sm" dense flat round 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 class="sell-num">
0<span class="unit">人</span>
</div>
<div class="flex justify-between items-center">
<div class="sell-name">今日试听</div>
<img src="../../assets/images/newindex/sell8.png" alt="" style="width:10px;">
</div>
</div>
</div>
</q-card>
</div>
</template>
<script>
import VueApexCharts from "vue-apexcharts";
export default {
components: {
VueApexCharts
},
data() {
return {
series: [{
name: "新加名单",
data: [{
x: "09-10",
y: 5
},
{
x: "09-11",
y: 2
},
{
x: "09-12",
y: 1
},
{
x: "09-13",
y: 22
},
{
x: "09-14",
y: 11
},
{
x: "09-15",
y: 3
},
{
x: "09-12",
y: 1
},
{
x: "09-13",
y: 22
},
{
x: "09-14",
y: 11
},
{
x: "09-15",
y: 3
},
{
x: "09-10",
y: 5
},
{
x: "09-11",
y: 2
},
{
x: "09-12",
y: 1
},
{
x: "09-13",
y: 22
},
{
x: "09-14",
y: 11
},
{
x: "09-15",
y: 3
},
{
x: "09-12",
y: 1
},
{
x: "09-13",
y: 22
},
{
x: "09-14",
y: 11
},
{
x: "09-15",
y: 3
},
{
x: "09-10",
y: 5
},
{
x: "09-11",
y: 2
},
{
x: "09-12",
y: 1
},
{
x: "09-13",
y: 22
},
{
x: "09-14",
y: 11
},
{
x: "09-15",
y: 3
},
{
x: "09-12",
y: 1
},
{
x: "09-13",
y: 22
},
{
x: "09-14",
y: 11
},
{
x: "09-15",
y: 3
}
]
}],
chartOptions: {
chart: {
type: "line",
sparkline: {
enabled: true
}
},
stroke: {
width: 2,
curve: "smooth" //straight,smooth
},
fill: {
type: "solid",
opacity: [1, 1]
},
yaxis: {
min: 0
},
colors: ["#fff"],
title: {
text: " ",
offsetX: 0,
style: {
fontSize: "36px",
color: "#000"
}
}
},
};
},
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>
.sell {
// width: 660px;
height: 515px;
border-radius: 8px;
background-color: #FFFFFF;
overflow: hidden;
position: relative;
.sell-title {
font-size: 18px;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
margin-right: 40px;
}
.top {
// width: 660px;
height: 185px;
border-radius: 8px 8px 0 0;
background-color: #009EF7;
}
.bottom {
width: 600px;
height:320px;
position: absolute;
top: 160px;
left: 50%;
transform: translateX(-50%);
padding:0 15px;
.sell-block {
width: 175px;
height: 145px;
background-color: #F8F5FF;
border-radius: 6px;
padding: 16px;
.sell-num {
height:60px;
font-size: 36px;
font-family: Source Han Sans CN;
font-weight: 800;
color: #404040;
line-height:30px;
padding-top:20px;
.unit{
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #404040;
}
}
.sell-name{
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #404040;
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment