Skip to content

P
peizhen-vue
Commit cc831732 by ‘巴博尔’
Options

首页修复

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