diff --git a/src/assets/icons/p1.png b/src/assets/icons/p1.png
new file mode 100644
index 0000000..72896c6
Binary files /dev/null and b/src/assets/icons/p1.png differ
diff --git a/src/assets/icons/p2.png b/src/assets/icons/p2.png
new file mode 100644
index 0000000..d0fbaf7
Binary files /dev/null and b/src/assets/icons/p2.png differ
diff --git a/src/assets/icons/p3.png b/src/assets/icons/p3.png
new file mode 100644
index 0000000..b6cb5b1
Binary files /dev/null and b/src/assets/icons/p3.png differ
diff --git a/src/assets/icons/p4.png b/src/assets/icons/p4.png
new file mode 100644
index 0000000..8c7b9cb
Binary files /dev/null and b/src/assets/icons/p4.png differ
diff --git a/src/assets/icons/p5.png b/src/assets/icons/p5.png
new file mode 100644
index 0000000..4005c6f
Binary files /dev/null and b/src/assets/icons/p5.png differ
diff --git a/src/assets/icons/p6.png b/src/assets/icons/p6.png
new file mode 100644
index 0000000..4882147
Binary files /dev/null and b/src/assets/icons/p6.png differ
diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss
index 0d0cc2d..f709f38 100644
--- a/src/assets/styles/variables.scss
+++ b/src/assets/styles/variables.scss
@@ -1,6 +1,8 @@
// base color
-$blue:#324157;
-$light-blue:#3A71A8;
+// $blue:#324157;
+$blue:#107c3d;
+// $light-blue:#3A71A8;
+$light-blue:#00A546;
$red:#C03639;
$pink: #E65D6E;
$green: #30B08F;
@@ -11,17 +13,22 @@ $panGreen: #30B08F;
// 自定义暗色菜单风格
-$base-menu-color:hsla(0,0%,100%,.65);
-$base-menu-color-active:#fff;
-$base-menu-background:#010509;
+// $base-menu-color:hsla(0,0%,100%,.65);
+$base-menu-color:#718096FF;
+// $base-menu-color-active:#fff;
+$base-menu-color-active:#718096FF;
+// $base-menu-background:#010509;
+$base-menu-background:#ffffff;
$base-logo-title-color: #ffffff;
$base-menu-light-color:rgba(0,0,0,.70);
$base-menu-light-background:#ffffff;
$base-logo-light-title-color: #010509;
-$base-sub-menu-background:#010509;
-$base-sub-menu-hover: #010509;
+// $base-sub-menu-background:#010509;
+$base-sub-menu-background:#ffffff;
+// $base-sub-menu-hover: #010509;
+$base-sub-menu-hover: #ffffff;
$base-sidebar-width: 200px;
@@ -39,3 +46,13 @@ $base-sidebar-width: 200px;
logoTitleColor: $base-logo-title-color;
logoLightTitleColor: $base-logo-light-title-color
}
+
+.search-btn {
+ background-color: #fafafaff !important;
+ border: none !important;
+ color: #60687eff !important;
+}
+
+.el-divider {
+ background-color: #00a546ff !important;
+}
diff --git a/src/views/index.vue b/src/views/index.vue
index edcd2e3..5bd2ec8 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,21 +1,44 @@
<template>
<div class="app-container home">
<div class="index-content">
+ <div class="index-content-card">
+ <div
+ :class="
+ valueNew === item.value
+ ? 'index-content-card-item index-content-card-itema'
+ : 'index-content-card-item'
+ "
+ v-for="(item, index) in [
+ { label: '今天', value: 1 },
+ { label: '最近7天', value: 2 },
+ { label: '最近30天', value: 3 },
+ { label: '总计', value: 0 },
+ ]"
+ :key="index"
+ @click="clickValueChange(item)"
+ >
+ {{ item.label }}
+ </div>
+ </div>
<div class="index-content-nav">
- <el-row :gutter="20">
+ <el-row :gutter="10">
<el-col :span="4" v-if="user.roleId == 3">
<div class="index-content-nav-item">
<div class="index-content-nav-item-top">
<h3>所属城市</h3>
</div>
- <h2>{{ cityName ? cityName : "" }}</h2>
+ <h2>
+ <img src="@/assets/icons/p6.png" alt="" /><span>{{
+ cityName ? cityName : ""
+ }}</span>
+ </h2>
</div>
</el-col>
<el-col :span="4">
<div class="index-content-nav-item">
<div class="index-content-nav-item-top">
<h3>新增用户</h3>
- <el-select
+ <!-- <el-select
v-model="valueA"
placeholder="请选择"
style="width: 8em"
@@ -33,9 +56,10 @@
:value="item.value"
>
</el-option>
- </el-select>
+ </el-select> -->
</div>
<h2>
+ <img src="@/assets/icons/p1.png" alt="" />
<animate-number
from="1"
:to="sumA"
@@ -50,7 +74,7 @@
<div class="index-content-nav-item">
<div class="index-content-nav-item-top">
<h3>总销售额</h3>
- <el-select
+ <!-- <el-select
v-model="valueB"
placeholder="请选择"
style="width: 8em"
@@ -68,9 +92,10 @@
:value="item.value"
>
</el-option>
- </el-select>
+ </el-select> -->
</div>
<h2>
+ <img src="@/assets/icons/p2.png" alt="" />
<animate-number
from="1"
:to="sumB"
@@ -85,7 +110,7 @@
<div class="index-content-nav-item">
<div class="index-content-nav-item-top">
<h3>新增陪诊员</h3>
- <el-select
+ <!-- <el-select
v-model="valueC"
placeholder="请选择"
style="width: 8em"
@@ -103,15 +128,15 @@
:value="item.value"
>
</el-option>
- </el-select>
+ </el-select> -->
</div>
<h2>
+ <img src="@/assets/icons/p3.png" alt="" />
<animate-number
from="1"
:to="sumC"
:key="sumC"
duration="1000"
- :formatter="thoudsandW"
></animate-number>
</h2>
</div>
@@ -121,7 +146,7 @@
<div class="index-content-nav-item-top">
<h3 v-if="user.roleId == 3">机构收益</h3>
<h3 v-else>平台收益</h3>
- <el-select
+ <!-- <el-select
v-model="valueD"
placeholder="请选择"
style="width: 8em"
@@ -139,13 +164,15 @@
:value="item.value"
>
</el-option>
- </el-select>
+ </el-select> -->
</div>
<h2>
+ <img src="@/assets/icons/p4.png" alt="" />
<animate-number
from="1"
:to="sumD"
:key="sumD"
+ :formatter="thoudsand"
></animate-number>
</h2>
</div>
@@ -154,7 +181,7 @@
<div class="index-content-nav-item">
<div class="index-content-nav-item-top">
<h3>总订单量</h3>
- <el-select
+ <!-- <el-select
v-model="valueE"
placeholder="请选择"
style="width: 8em"
@@ -172,9 +199,10 @@
:value="item.value"
>
</el-option>
- </el-select>
+ </el-select> -->
</div>
<h2>
+ <img src="@/assets/icons/p5.png" alt="" />
<animate-number
from="1"
:to="sumE"
@@ -331,6 +359,7 @@ export default {
cityVoList: [],
cityId: "",
version: "4.8.0",
+ valueNew: 1,
valueA: 1,
sumA: 0,
valueB: 1,
@@ -383,6 +412,16 @@ export default {
this.chart = null;
},
methods: {
+ clickValueChange(item) {
+ this.valueNew = item.value;
+ this.dataUserAxios();
+ this.dataEmployeesAxios();
+ this.platformRevenueAxios();
+ this.orderQuantityAxios();
+ if (this.user.roleId != 3) {
+ this.saleroomAxios();
+ }
+ },
thoudsand(value) {
if (!value) return "";
value = value.toFixed(2);
@@ -512,7 +551,8 @@ export default {
},
async orderQuantityAxios() {
const { code, data } = await orderQuantityGet({
- condition: this.valueE,
+ // condition: this.valueE,
+ condition: this.valueNew,
});
if (code === 200) {
this.sumE = data.dataSum || 0;
@@ -521,6 +561,7 @@ export default {
async platformRevenueAxios() {
const { code, data } = await platformRevenueGet({
condition: this.valueD,
+ condition: this.valueNew,
});
if (code === 200) {
this.sumD = data.dataSum || 0;
@@ -528,7 +569,8 @@ export default {
},
async saleroomAxios() {
const { code, data } = await saleroomGet({
- condition: this.valueB,
+ // condition: this.valueB,
+ condition: this.valueNew,
});
if (code === 200) {
this.sumB = data.dataSum || 0;
@@ -536,7 +578,8 @@ export default {
},
async dataEmployeesAxios() {
const { code, data } = await dataEmployeesGet({
- condition: this.valueC,
+ // condition: this.valueC,
+ condition: this.valueNew,
});
if (code === 200) {
this.sumC = data.dataSum || 0;
@@ -544,7 +587,8 @@ export default {
},
async dataUserAxios() {
const { code, data } = await dataUserGet({
- condition: this.valueA,
+ // condition: this.valueA,
+ condition: this.valueNew,
});
if (code === 200) {
this.sumA = data.dataSum || 0;
@@ -722,6 +766,11 @@ export default {
}
}
+.app-container {
+ background: #f5f6fa;
+ height: 100vh;
+}
+
.index-content {
width: 100%;
&-nav {
@@ -729,26 +778,39 @@ export default {
display: flex;
&-item {
min-height: 50px;
- border-radius: 4px;
- box-shadow: 0 0 10px 2px #e2dfdf;
+ border-radius: 5px;
+ // box-shadow: 0 0 10px 2px #e2dfdf;
// padding: 10px;
padding: 1em;
+ background: #ffffff;
&-top {
display: flex;
justify-content: space-between;
- border-bottom: 1px solid rgb(239, 239, 245);
+ // border-bottom: 1px solid rgb(239, 239, 245);
padding-bottom: 5px;
h3 {
font-size: 1em;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: #74798c;
}
}
h2 {
width: 100%;
// height: 120px;
font-weight: 500;
- font-size: 50px;
+ font-size: 28px;
color: #000000;
+ margin: 0px;
+ padding-bottom: 10px;
+ display: flex;
+ align-items: center;
+ img {
+ width: 28px;
+ height: 28px;
+ margin: 0px 10px 5px 0px;
+ }
}
}
.el-row {
@@ -765,15 +827,42 @@ export default {
&-order {
width: 100%;
margin-top: 25px;
- box-shadow: 0 0 10px 2px #e2dfdf;
+ // box-shadow: 0 0 10px 2px #e2dfdf;
padding: 10px;
min-height: 100px;
border-radius: 4px;
+ background: #ffffff;
&-top {
width: 100%;
display: flex;
justify-content: space-between;
}
}
+ &-card {
+ background: #ffffff;
+ border-radius: 5px;
+ padding: 21px 26px;
+ margin-bottom: 20px;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ &-item {
+ background: #f2f2f2;
+ border-radius: 3px;
+ padding: 10px;
+ font-size: 12px;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: #74798c;
+ margin-right: 8px;
+ text-align: center;
+ cursor: pointer;
+ }
+ &-item:hover,
+ &-itema {
+ background: #0054fe;
+ color: #ffffff;
+ }
+ }
}
</style>
diff --git a/src/views/operation/business/index.vue b/src/views/operation/business/index.vue
index 10317e2..562fc0d 100644
--- a/src/views/operation/business/index.vue
+++ b/src/views/operation/business/index.vue
@@ -218,13 +218,14 @@
>
</el-form-item>
</el-form>
- <el-table key="inside" :data="servicesList">
+ <el-table key="inside" :data="servicesList" border="">
<el-table-column
prop="name"
label="服务名称"
:show-overflow-tooltip="true"
+ align="center"
></el-table-column>
- <el-table-column prop="cover" label="封面" width="170">
+ <el-table-column prop="cover" label="封面" width="170" align="center">
<template slot-scope="{ row }">
<imageUpload
v-model="row.cover"
@@ -242,39 +243,45 @@
<el-table-column
prop="highPrice"
label="高价"
+ align="center"
:show-overflow-tooltip="true"
/>
<el-table-column
prop="price"
label="价格"
+ align="center"
:show-overflow-tooltip="true"
/>
<el-table-column
prop="cityName"
label="城市"
+ align="center"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
prop="fenmo"
label="平台分成"
+ align="center"
:show-overflow-tooltip="true"
/>
<el-table-column
prop="duration"
label="时长(小时)"
+ align="center"
:show-overflow-tooltip="true"
/>
<el-table-column
prop="overtime"
label="超时计费/30分钟"
+ align="center"
:show-overflow-tooltip="true"
/>
<el-table-column label="服务时段" :show-overflow-tooltip="true">
<template slot-scope="{ row }">
- <span v-if="row.startTime && row.endTime"
+ <span style="text-align:center" v-if="row.startTime && row.endTime"
>{{ row.startTime }} - {{ row.endTime }}</span
>
- <span v-else>未设置</span>
+ <span style="text-align:center" v-else>未设置</span>
</template>
</el-table-column>
<el-table-column