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
$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;
}
src/views/index.vue
<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>
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
......
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