806 lines
33 KiB
HTML
806 lines
33 KiB
HTML
<div class="mycontainer">
|
||
|
||
<!-- 时间筛选 -->
|
||
<!-- <div class="row">-->
|
||
<!-- <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="{:url('order/addAbnormal')}">-->
|
||
<!-- <div class="col-md-12">-->
|
||
<!-- <div class="form-group">-->
|
||
<!-- <label for="startDate" class="col-md-2 control-label">选择时间范围：</label>-->
|
||
<!-- <div class="col-md-5">-->
|
||
<!-- <input type="text" class="form-control datetimepicker" id="startDate" placeholder="开始时间" />-->
|
||
<!-- </div>-->
|
||
<!-- <div class="col-md-5">-->
|
||
<!-- <input type="text" class="form-control datetimepicker" id="endDate" placeholder="结束时间" />-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </form>-->
|
||
<!-- </div>-->
|
||
|
||
|
||
<div class="panel-heading">
|
||
<!--<div class="panel-lead"><em>多表格（Multitable）</em>用于展示在一个页面展示多个表格数据,并且每次切换时刷新</div>-->
|
||
<ul class="nav nav-tabs">
|
||
<li class="active"><a data-val="first" href="#first" data-toggle="tab">统计信息</a></li>
|
||
<li><a href="#second" data-val="second" data-toggle="tab">排行信息</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="panel-body">
|
||
<div id="myTabContent" class="tab-content">
|
||
<div class="tab-pane fade active in" id="first">
|
||
|
||
<div class="form-inline" id="chart-filter" style="margin-top:20px;margin-bottom: 30px;">
|
||
<!-- 单选：维度 -->
|
||
<!-- 时间范围 -->
|
||
<div class="form-group" style="margin-left: 15px;">
|
||
<input type="text" class="form-control datetimerange" value = "{$default_daterange}" data-locale='{"format":"YYYY-MM-DD"}' placeholder="指定日期" name="filter[daterange]" id="daterange" autocomplete="off" style="width: 180px;">
|
||
</div>
|
||
|
||
<!-- 查询按钮 -->
|
||
<button class="btn btn-default" id="filter-btn" style="margin-left: 15px;">查询</button>
|
||
</div>
|
||
|
||
<div class="col-md-12" style="margin-bottom: 10px">
|
||
<div style="display: flex">
|
||
<!-- 卡片 1: 总用户数 -->
|
||
<div class="col-md-3">
|
||
<div class="myplan">
|
||
<div class="myplan-title">
|
||
<span style="color: red" class="fa fa-line-chart fa-fw"></span>
|
||
<span>订单量</span>
|
||
</div>
|
||
<div class="myplan-num">
|
||
loading
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 卡片 1: 总用户数 -->
|
||
<div class="col-md-3">
|
||
<div class="myplan">
|
||
<div class="myplan-title">
|
||
<span style="color: #43cb34" class="fa fa-list-alt fa-fw"></span>
|
||
<span>总业绩</span>
|
||
</div>
|
||
<div class="myplan-num">
|
||
loading
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 卡片 1: 总用户数 -->
|
||
<div class="col-md-3">
|
||
<div class="myplan">
|
||
<div class="myplan-title">
|
||
<span style="color: #43cb34" class="fa fa-list-alt fa-fw"></span>
|
||
<span>总营业额</span>
|
||
</div>
|
||
<div class="myplan-num">
|
||
loading
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 卡片 1: 总用户数 -->
|
||
<div class="col-md-3">
|
||
<div class="myplan">
|
||
<div class="myplan-title">
|
||
<span style="color: #b3d4fc" class="fa fa-group fa-fw"></span>
|
||
<span>师傅总数</span>
|
||
</div>
|
||
<div class="myplan-num">
|
||
loading
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12" style="margin-top: 10px;margin-bottom: 10px">
|
||
<div class="col-md-2">
|
||
<div class="todo-plan" style="color: #55d2fe">
|
||
<div class="todo-plan-title">
|
||
<div style="font-size: 32px" class="fa fa-warning"></div>
|
||
<div class="todo-plan-title-text" style="flex: 1">
|
||
<p>报错</p>
|
||
<p>单位/笔</p>
|
||
</div>
|
||
<div>
|
||
<a onclick="Backend.api.addtabs('/admin/orders/abnormal','报错订单')" href="">详情></a>
|
||
</div>
|
||
</div>
|
||
<div class="todo-plan-num text-center">
|
||
loading
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-2">
|
||
<div class="todo-plan" style="color: #86a7ff">
|
||
<div class="todo-plan-title">
|
||
<div style="font-size: 32px" class="fa fa-gear"></div>
|
||
<div class="todo-plan-title-text" style="flex: 1">
|
||
<p>待配置</p>
|
||
<p>单位/笔</p>
|
||
</div>
|
||
<div>
|
||
<a onclick="Backend.api.addtabs('/admin/orders/configorder','待配置')" href="#">详情></a>
|
||
</div>
|
||
</div>
|
||
<div class="todo-plan-num text-center">
|
||
loading
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-2">
|
||
<div class="todo-plan" style="color: #4de171">
|
||
<div class="todo-plan-title">
|
||
<div style="font-size: 32px" class="fa fa-envelope-open"></div>
|
||
<div class="todo-plan-title-text" style="flex: 1">
|
||
<p>待审核</p>
|
||
<p>单位/笔</p>
|
||
</div>
|
||
<div>
|
||
<a onclick="Backend.api.addtabs('/admin/orders/auditorder','待审核')" href="#">详情></a>
|
||
</div>
|
||
</div>
|
||
<div class="todo-plan-num text-center">
|
||
loading
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-2">
|
||
<div class="todo-plan" style="color: #b896ff">
|
||
<div class="todo-plan-title">
|
||
<div style="font-size: 32px" class="fa fa-pencil"></div>
|
||
<div class="todo-plan-title-text" style="flex: 1">
|
||
<p>待回访</p>
|
||
<p>单位/笔</p>
|
||
</div>
|
||
<div>
|
||
<a onclick="Backend.api.addtabs('/admin/orders/revisitorder','待回访')" href="#">详情></a>
|
||
</div>
|
||
</div>
|
||
<div class="todo-plan-num text-center">
|
||
loading
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-2">
|
||
<div class="todo-plan" style="color: #f8bf18">
|
||
<div class="todo-plan-title">
|
||
<div style="font-size: 32px" class="fa fa-leaf"></div>
|
||
<div class="todo-plan-title-text" style="flex: 1">
|
||
<p>待售后</p>
|
||
<p>单位/笔</p>
|
||
</div>
|
||
<div>
|
||
<a onclick="Backend.api.addtabs('/admin/aftersales/aftersale','待售后')" href="#">详情></a>
|
||
</div>
|
||
</div>
|
||
<div class="todo-plan-num text-center">
|
||
loading
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-2">
|
||
<div class="todo-plan" style="color: #f58164">
|
||
<div class="todo-plan-title">
|
||
<div style="font-size: 32px" class="fa fa-file-text-o"></div>
|
||
<div class="todo-plan-title-text" style="flex: 1">
|
||
<p>开票</p>
|
||
<p>单位/笔</p>
|
||
</div>
|
||
<div>
|
||
<a onclick="Backend.api.addtabs('/admin/orders/abnormal','开票')" href="#">详情></a>
|
||
</div>
|
||
</div>
|
||
<div class="todo-plan-num text-center">
|
||
loading
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<div id="money_line" style="height: 600px;width: 100%">
|
||
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<div class="col-md-3">
|
||
|
||
<div id="cancel_order_pie" style="width: 100%;height:400px">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="col-md-3">
|
||
|
||
<div id="item_pie" style="width: 100%;height:400px">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<div class="col-md-3">
|
||
|
||
<div id="area_pie" style="width: 100%;height:400px">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<div class="col-md-3">
|
||
|
||
<div id="source_pie" style="width: 100%;height:400px">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane fade" id="second">
|
||
|
||
<div class="col-md-12">
|
||
<div class="col-md-3">
|
||
<div class="order-count-plan" style="color: #55d2fe">
|
||
<div class="order-count-title">
|
||
<div class="todo-plan-title-text text-left" style="flex: 1">
|
||
<span class="fa fa-clock-o"></span> 进行中的订单
|
||
</div>
|
||
</div>
|
||
<div class="order-count-num text-left">
|
||
0 / 0 / 0 / 0
|
||
</div>
|
||
<div class="order-count-num-sub text-left">
|
||
待派单 / 待接单 / 待上门 / 服务中
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<div class="col-md-6">
|
||
<div class="col-md-12">订单数据</div>
|
||
<div class="col-md-6 ">
|
||
<div class="static-plan">
|
||
<div class="static-img fa fa-jpy" style="color: #2281df">
|
||
</div>
|
||
<div class="static-text">
|
||
<p class="static-text-num">loading</p>
|
||
<p class="static-text-sub">今日收款</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 ">
|
||
<div class="static-plan">
|
||
<div class="static-img fa fa-jpy" style="color: #2281df">
|
||
</div>
|
||
<div class="static-text">
|
||
<p class="static-text-num">loading</p>
|
||
<p class="static-text-sub">本月收款</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 ">
|
||
<div class="static-plan">
|
||
<div class="static-img fa fa-building-o" style="background-color: #eee4ff;color: #0a4b3e">
|
||
</div>
|
||
<div class="static-text">
|
||
<p class="static-text-num">88</p>
|
||
<p class="static-text-sub">今日订单数</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 ">
|
||
<div class="static-plan">
|
||
<div class="static-img fa fa-building-o" style="background-color: #eee4ff;color: #0a4b3e">
|
||
</div>
|
||
<div class="static-text">
|
||
<p class="static-text-num">loading</p>
|
||
<p class="static-text-sub">本月订单数</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 ">
|
||
<div class="static-plan">
|
||
<div class="static-img fa fa-building-o" style="background-color: #eee4ff;color: #8951fd">
|
||
</div>
|
||
<div class="static-text">
|
||
<p class="static-text-num">88</p>
|
||
<p class="static-text-sub">今日新增师傅数</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 ">
|
||
<div class="static-plan" >
|
||
<div class="static-img fa fa-users fa-fw" style="background-color: #eee4ff;color: #8951fd">
|
||
</div>
|
||
<div class="static-text">
|
||
<p class="static-text-num">loading</p>
|
||
<p class="static-text-sub">本月新增师傅数</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 ">
|
||
<div class="static-plan">
|
||
<div class="static-img fa fa-users fa-fw" style="color: #f34f61;background-color: #fce1e4">
|
||
</div>
|
||
<div class="static-text">
|
||
<p class="static-text-num">loading</p>
|
||
<p class="static-text-sub">今日退款数</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 ">
|
||
<div class="static-plan">
|
||
<div class="static-img fa fa-users fa-fw" style="color: #f34f61;background-color: #fce1e4">
|
||
</div>
|
||
<div class="static-text">
|
||
<p class="static-text-num">loading</p>
|
||
<p class="static-text-sub">本月退款数</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 ">
|
||
<div class="static-plan">
|
||
<div class="static-img fa fa-strikethrough fa-fw" style="color:#48cac2;background-color: #f5f6ff">
|
||
</div>
|
||
<div class="static-text">
|
||
<p class="static-text-num">loading</p>
|
||
<p class="static-text-sub">今日取消订单数</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 ">
|
||
<div class="static-plan">
|
||
<div class="static-img fa fa-strikethrough fa-fw" style="color:#48cac2;background-color: #f5f6ff">
|
||
</div>
|
||
<div class="static-text">
|
||
<p class="static-text-num">loading</p>
|
||
<p class="static-text-sub">本月取消订单数</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-3" id="order_rank">
|
||
<div class="col-md-12">录单排行</div>
|
||
<div class="col-md-12">
|
||
<div class="rank-plan">
|
||
<div class="rank-avatar">
|
||
</div>
|
||
<div class="rank-name">
|
||
虚位以待
|
||
</div>
|
||
<div class="rank-num">
|
||
0单
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<div class="rank-plan">
|
||
<div class="rank-avatar">
|
||
</div>
|
||
<div class="rank-name">
|
||
虚位以待
|
||
</div>
|
||
<div class="rank-num">
|
||
0单
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<div class="rank-plan">
|
||
<div class="rank-avatar">
|
||
</div>
|
||
<div class="rank-name">
|
||
虚位以待
|
||
</div>
|
||
<div class="rank-num">
|
||
0单
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<div class="rank-plan">
|
||
<div class="rank-avatar">
|
||
</div>
|
||
<div class="rank-name">
|
||
虚位以待
|
||
</div>
|
||
<div class="rank-num">
|
||
0单
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<div class="rank-plan">
|
||
<div class="rank-avatar">
|
||
</div>
|
||
<div class="rank-name">
|
||
虚位以待
|
||
</div>
|
||
<div class="rank-num">
|
||
0单
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-3" id="order_worker">
|
||
<div class="col-md-12">接单排行</div>
|
||
<div class="col-md-12">
|
||
<div class="rank-plan">
|
||
<div class="rank-avatar">
|
||
</div>
|
||
<div class="rank-name">
|
||
虚位以待
|
||
</div>
|
||
<div class="rank-num">
|
||
0单
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<div class="rank-plan">
|
||
<div class="rank-avatar">
|
||
</div>
|
||
<div class="rank-name">
|
||
虚位以待
|
||
</div>
|
||
<div class="rank-num">
|
||
0单
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<div class="rank-plan">
|
||
<div class="rank-avatar">
|
||
</div>
|
||
<div class="rank-name">
|
||
虚位以待
|
||
</div>
|
||
<div class="rank-num">
|
||
0单
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<div class="rank-plan">
|
||
<div class="rank-avatar">
|
||
</div>
|
||
<div class="rank-name">
|
||
虚位以待
|
||
</div>
|
||
<div class="rank-num">
|
||
0单
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<div class="rank-plan">
|
||
<div class="rank-avatar">
|
||
</div>
|
||
<div class="rank-name">
|
||
虚位以待
|
||
</div>
|
||
<div class="rank-num">
|
||
0单
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6" id="hot_item_rank">
|
||
<h4 class="mb-4">热门服务</h4>
|
||
|
||
<div class="service-item">
|
||
<div class="rank-icon">🥇</div>
|
||
<div class="service-content">
|
||
<div class="service-content-title">虚位以待</div>
|
||
<div class="service-content-sub">0</div>
|
||
<div class="progress">
|
||
<div class="progress-bar bg-pink" style="background-color: #f06292;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="service-item">
|
||
<div class="rank-icon">🥈</div>
|
||
<div class="service-content">
|
||
<div clase="service-content-title">虚位以待</div>
|
||
<div class="service-content-sub">0</div>
|
||
<div class="progress">
|
||
<div class="progress-bar bg-pink" style="background-color: #f06292;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="service-item">
|
||
<div class="rank-icon">🥉</div>
|
||
<div class="service-content">
|
||
<div clase="service-content-title">虚位以待</div>
|
||
<div class="service-content-sub">0</div>
|
||
<div class="progress">
|
||
<div class="progress-bar bg-pink" style="background-color: #f06292;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="service-item">
|
||
<div class="rank-icon-num">#4</div>
|
||
<div class="service-content">
|
||
<div clase="service-content-title">虚位以待</div>
|
||
<div class="service-content-sub">0</div>
|
||
</div>
|
||
</div>
|
||
<div class="service-item">
|
||
<div class="rank-icon-num">#5</div>
|
||
<div class="service-content">
|
||
<div clase="service-content-title">虚位以待</div>
|
||
<div class="service-content-sub">0</div>
|
||
</div>
|
||
</div>
|
||
<div class="service-item">
|
||
<div class="rank-icon-num">#6</div>
|
||
<div class="service-content">
|
||
<div clase="service-content-title">虚位以待</div>
|
||
<div class="service-content-sub">0</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6" id="hot_area_rank">
|
||
<h4 class="mb-4">热门地区</h4>
|
||
|
||
<div class="service-item">
|
||
<div class="rank-icon">🥇</div>
|
||
<div class="service-content">
|
||
<div class="service-content-title">虚位以待</div>
|
||
<div class="service-content-sub">0</div>
|
||
<div class="progress">
|
||
<div class="progress-bar bg-pink" style="background-color: #f06292;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="service-item">
|
||
<div class="rank-icon">🥈</div>
|
||
<div class="service-content">
|
||
<div clase="service-content-title">虚位以待</div>
|
||
<div class="service-content-sub">0</div>
|
||
<div class="progress">
|
||
<div class="progress-bar bg-pink" style="background-color: #f06292;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="service-item">
|
||
<div class="rank-icon">🥉</div>
|
||
<div class="service-content">
|
||
<div clase="service-content-title">虚位以待</div>
|
||
<div class="service-content-sub">0</div>
|
||
<div class="progress">
|
||
<div class="progress-bar bg-pink" style="background-color: #f06292;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="service-item">
|
||
<div class="rank-icon-num">#4</div>
|
||
<div class="service-content">
|
||
<div clase="service-content-title">虚位以待</div>
|
||
<div class="service-content-sub">0</div>
|
||
</div>
|
||
</div>
|
||
<div class="service-item">
|
||
<div class="rank-icon-num">#5</div>
|
||
<div class="service-content">
|
||
<div clase="service-content-title">虚位以待</div>
|
||
<div class="service-content-sub">0</div>
|
||
</div>
|
||
</div>
|
||
<div class="service-item">
|
||
<div class="rank-icon-num">#6</div>
|
||
<div class="service-content">
|
||
<div clase="service-content-title">虚位以待</div>
|
||
<div class="service-content-sub">0</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
<style>
|
||
.mycontainer {
|
||
background-color: white;
|
||
padding-top: 10px;
|
||
height: auto;
|
||
overflow: auto;
|
||
}
|
||
|
||
.myplan {
|
||
box-shadow: 0 2px 6px rgba(12, 72, 128, .1);
|
||
height: 90px;
|
||
padding: 12px 16px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.myplan-title {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.myplan-num {
|
||
color: #434343;
|
||
font-weight: 500;
|
||
font-size: 32px;
|
||
font-style: normal;
|
||
line-height: 38px;
|
||
}
|
||
|
||
.row {
|
||
margin: 0;
|
||
}
|
||
|
||
.todo-plan {
|
||
padding: 15px;
|
||
/*height: 100px;*/
|
||
box-shadow: 0 2px 6px rgba(12, 72, 128, .1);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.todo-plan-num {
|
||
line-height: 40px;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.todo-plan-title {
|
||
display: flex;
|
||
}
|
||
|
||
.todo-plan-title-text {
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.todo-plan-title-text > p {
|
||
margin: 0;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.todo-plan a {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.order-count-title {
|
||
background-color: #c389f6;
|
||
color: #7b38b7;
|
||
padding: 5px;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.order-count-plan {
|
||
padding: 15px;
|
||
/*height: 100px;*/
|
||
box-shadow: 0 0 6px rgba(12, 72, 128, .1);
|
||
border-radius: 4px;
|
||
/*margin: 10px;*/
|
||
}
|
||
|
||
.order-count-num {
|
||
font-size: 20px;
|
||
margin: 10px 0;
|
||
color: #292e39;
|
||
}
|
||
|
||
.order-count-num-sub {
|
||
font-size: 12px;
|
||
color: #C9C5C5;
|
||
}
|
||
.static-plan{
|
||
display: flex;
|
||
box-shadow: 0 0 6px rgba(12, 72, 128, .1);
|
||
border-radius: 4px;
|
||
padding: 10px 15px;
|
||
margin: 10px 0;
|
||
}
|
||
.static-img{
|
||
padding: 5px;
|
||
background-color: #b3d4fc;
|
||
border-radius: 10px;
|
||
height: 40px;
|
||
width: 40px;
|
||
font-size: 20px;
|
||
line-height: 33px;
|
||
text-align: center;
|
||
}
|
||
.static-text{
|
||
flex: 1;
|
||
margin-left: 10px;
|
||
}
|
||
.static-text > p{
|
||
margin: 0;
|
||
}
|
||
.static-text-num{
|
||
font-size: 16px;
|
||
}
|
||
.static-text-sub{
|
||
color: #C9C5C5;
|
||
font-size: 12px;
|
||
}
|
||
.rank-plan{
|
||
display: flex;
|
||
background-color: #f5f6ff;
|
||
box-shadow: 0 0 6px rgba(12, 72, 128, .1);
|
||
border-radius: 4px;
|
||
padding: 10px 15px;
|
||
margin: 10px 0;
|
||
height: 60px;
|
||
}
|
||
.rank-avatar{
|
||
background-color: #e0dfff;
|
||
border-radius: 50%;
|
||
width: 40px;
|
||
height: 40px;
|
||
text-align: center;
|
||
}
|
||
.rank-plan > div{
|
||
line-height: 40px;
|
||
}
|
||
.rank-name{
|
||
flex: 1;
|
||
margin-left: 10px;
|
||
color: #7345a5;
|
||
}
|
||
.rank-num{
|
||
font-size: 12px;
|
||
color: #7345a5;
|
||
}
|
||
.service-item {
|
||
margin-bottom: 1.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.progress {
|
||
height: 10px;
|
||
}
|
||
.rank-icon {
|
||
font-size: 30px;
|
||
width: 40px;
|
||
height: 40px;
|
||
background-color: #f3f3f3;
|
||
border-radius: 50%;
|
||
line-height: 40px;
|
||
display: inline-block;
|
||
text-align: center;
|
||
margin-right: 10px;
|
||
}
|
||
.rank-icon-num{
|
||
font-size: 14px;
|
||
width: 40px;
|
||
height: 40px;
|
||
background-color: #f3f3f3;
|
||
border-radius: 50%;
|
||
line-height: 40px;
|
||
display: inline-block;
|
||
text-align: center;
|
||
color: #7a8591;
|
||
margin-right: 10px;
|
||
}
|
||
.service-content{
|
||
flex: 1;
|
||
}
|
||
.service-content-sub{
|
||
color: #ccc;
|
||
font-size: 12px;
|
||
}
|
||
</style> |