|
|
@@ -0,0 +1,1569 @@
|
|
|
+<template>
|
|
|
+ <div class="pages">
|
|
|
+ <!--顶部头像-->
|
|
|
+ <div class="headerInfo">
|
|
|
+ <img class="headBack" src="../static/images/main/banner_null.png" width="100%"/>
|
|
|
+ <div class="userInfo">
|
|
|
+ <img src="../static/images/mine/header_default.png" class="round_icon">
|
|
|
+ <span v-if="user.sex == 1">{{ user.Name }}</span>
|
|
|
+ <span v-else style="font-size: 16px;color: #E75296">{{ user.Name }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <em>{{ user.height }}</em>
|
|
|
+ <span>身高cm</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <em>{{ user.age }}</em>
|
|
|
+ <span>年龄</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <em>{{ user.weight }}</em>
|
|
|
+ <span>体重kg</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <em v-if="user.sex == 1">男</em>
|
|
|
+ <em v-else>女</em>
|
|
|
+ <span>性别</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="pageReport" v-show="true">
|
|
|
+ <!--中间4个标签页-->
|
|
|
+ <div class="tag">
|
|
|
+ <!--第一行内容-->
|
|
|
+ <div>
|
|
|
+ <!--总卡路里-->
|
|
|
+ <div class="card">
|
|
|
+ <div class="row1">
|
|
|
+ <img src="../static/images/report/report_cle_total.png">
|
|
|
+ <em>总卡路里</em>
|
|
|
+ </div>
|
|
|
+ <div class="row2">
|
|
|
+ <span>211234</span>
|
|
|
+ <em>千卡</em>
|
|
|
+ </div>
|
|
|
+ <div class="row3">
|
|
|
+ <span>俱乐部内排名</span>
|
|
|
+ <em>32</em>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--总CK-->
|
|
|
+ <div class="card" style="background: linear-gradient(#FFFFFF, #FFECD3);">
|
|
|
+ <div class="row1">
|
|
|
+ <img src="../static/images/report/report_ck.png">
|
|
|
+ <em>总CK</em>
|
|
|
+ </div>
|
|
|
+ <div class="row2">
|
|
|
+ <span>9432</span>
|
|
|
+ </div>
|
|
|
+ <div class="row3">
|
|
|
+ <span>俱乐部内排名</span>
|
|
|
+ <em>32</em>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--第二行内容-->
|
|
|
+ <div>
|
|
|
+ <!--总上课次数-->
|
|
|
+ <div class="card" style="background: linear-gradient(#FFFFFF, #D3E7FF);">
|
|
|
+ <div class="row1">
|
|
|
+ <img src="../static/images/report/report_class.png">
|
|
|
+ <em>总上课次数</em>
|
|
|
+ </div>
|
|
|
+ <div class="row2">
|
|
|
+ <span>78</span>
|
|
|
+ <em>次</em>
|
|
|
+ </div>
|
|
|
+ <div class="row3">
|
|
|
+ <span>俱乐部内排名</span>
|
|
|
+ <em>32</em>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--平均卡路里-->
|
|
|
+ <div class="card" style="background: linear-gradient(#FFFFFF, #FFD3FC);">
|
|
|
+ <div class="row1">
|
|
|
+ <img src="../static/images/report/report_cle_avg.png">
|
|
|
+ <em>平均卡路里</em>
|
|
|
+ </div>
|
|
|
+ <div class="row2">
|
|
|
+ <span>9432</span>
|
|
|
+ <em>千卡/课时</em>
|
|
|
+ </div>
|
|
|
+ <div class="row3">
|
|
|
+ <span>俱乐部内排名</span>
|
|
|
+ <em>32</em>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--卡路里统计-->
|
|
|
+ <div class="reportCalorie">
|
|
|
+ <div class="title">
|
|
|
+ <i class="fa-square"/>
|
|
|
+ <span>卡路里月统计表</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="chartCalorie" id="calorieMonth"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--CK月统计-->
|
|
|
+ <div class="reportCalorie">
|
|
|
+ <div class="title" style="color: #FFA310">
|
|
|
+ <i class="fa-square" style="background: #FFA310"/>
|
|
|
+ <span>CK月统计表</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="chartCalorie" id="ckMonth"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--课时月统计-->
|
|
|
+ <div class="reportCalorie">
|
|
|
+ <div class="title" style="color: #028FE1">
|
|
|
+ <i class="fa-square" style="background: #028FE1"/>
|
|
|
+ <span>上课次数统计表</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="chartCalorie" id="classMonth"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--课程统计-->
|
|
|
+ <div class="reportCalorie" style="padding-bottom: 100px;background: #F2F2F2">
|
|
|
+ <div class="title" style="color: #E75296">
|
|
|
+ <i class="fa-square" style="background: #E75296"/>
|
|
|
+ <span>课程统计</span>
|
|
|
+ <span style="font-size: 10px;color: #C9C9C9;margin-left: 10px">(共12课程)</span>
|
|
|
+ <span style="float: right;margin-right: 10px;color: #909090;padding-bottom: 10px">...</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <ul class="classReport">
|
|
|
+ <li>
|
|
|
+ <span class="className">体能训练</span>
|
|
|
+ <div class="calorieToTal">
|
|
|
+ <em>2313</em>
|
|
|
+ <span>总卡路里</span>
|
|
|
+ </div>
|
|
|
+ <div class="calorieToTal">
|
|
|
+ <em>321</em>
|
|
|
+ <span>总ck</span>
|
|
|
+ </div>
|
|
|
+ <div class="calorieToTal">
|
|
|
+ <em>12</em>
|
|
|
+ <span>总上课次数</span>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="className">体能训练</span>
|
|
|
+ <div class="calorieToTal">
|
|
|
+ <em>2313</em>
|
|
|
+ <span>总卡路里</span>
|
|
|
+ </div>
|
|
|
+ <div class="calorieToTal">
|
|
|
+ <em>321</em>
|
|
|
+ <span>总ck</span>
|
|
|
+ </div>
|
|
|
+ <div class="calorieToTal">
|
|
|
+ <em>12</em>
|
|
|
+ <span>总上课次数</span>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--以下是控制隐藏项-->
|
|
|
+ <!--全部课程-->
|
|
|
+ <div class="pageClass" v-show="true">
|
|
|
+ <em>全部课程</em>
|
|
|
+ <ul class="dayList">
|
|
|
+ <li class="dayDetail">
|
|
|
+ <span class="dayTitle"> 2021年7月22日 星期四</span>
|
|
|
+ <ul class="classList">
|
|
|
+ <li>
|
|
|
+ <span class="className">体能训练</span>
|
|
|
+ <span class="classTime">10:00-12:00</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="className">体能训练</span>
|
|
|
+ <span class="classTime">10:00-12:00</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li class="dayDetail">
|
|
|
+ <span class="dayTitle"> 2021年7月22日 星期四</span>
|
|
|
+ <ul class="classList">
|
|
|
+ <li>
|
|
|
+ <span class="className">体能训练</span>
|
|
|
+ <span class="classTime">10:00-12:00</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="className">体能训练</span>
|
|
|
+ <span class="classTime">10:00-12:00</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="className">体能训练</span>
|
|
|
+ <span class="classTime">10:00-12:00</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="dayDetail">
|
|
|
+ <span class="dayTitle"> 2021年7月22日 星期四</span>
|
|
|
+ <ul class="classList">
|
|
|
+ <li>
|
|
|
+ <span class="className">体能训练</span>
|
|
|
+ <span class="classTime">10:00-12:00</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--课程详情-->
|
|
|
+ <div class="pageDetail" v-show="true">
|
|
|
+ <span class="btnBack">返回</span>
|
|
|
+ <!--课程标题-->
|
|
|
+ <div class="classDetail">
|
|
|
+ <div class="detailTitle">
|
|
|
+ <span class="className">体能训练</span>
|
|
|
+ <span class="classTime">10:00-12:00</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--会员基本信息-->
|
|
|
+ <div class="memberInfo">
|
|
|
+ <span>上课时基本信息 ｜年龄 </span><em>11</em>
|
|
|
+ <span> 岁 ｜身高 </span><em>11</em>
|
|
|
+ <span> cm ｜ 体重 </span><em>11</em>
|
|
|
+ <span> Kg</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--课程基本信息-->
|
|
|
+ <div class="classInfo">
|
|
|
+ <ul style="border-top: 1px solid #CCC; padding-top: 15px">
|
|
|
+ <li>
|
|
|
+ <em>1233</em>
|
|
|
+ <span>卡路里</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <em>{{ user.age }}</em>
|
|
|
+ <span>CK</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <em>{{ user.weight }}</em>
|
|
|
+ <span>EI</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <em>87分钟</em>
|
|
|
+ <span>上课时长</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <em>{{ user.age }}</em>
|
|
|
+ <span>排名</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <em>9</em>
|
|
|
+ <span>上课人数</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!--运动强度柱状图-->
|
|
|
+ <div class="chartCalorie" id="activePercent" style="margin-top: 20px;width: 100%;margin-left: 0"/>
|
|
|
+
|
|
|
+ <!--运动心率折线图-->
|
|
|
+ <div class="chartCalorie" id="sportHeartRate"
|
|
|
+ style="margin-top: 10px;width: 100%;margin-left: 0;"/>
|
|
|
+ <!--动作评分-->
|
|
|
+ <div class="pageScore" v-show="true">
|
|
|
+ <div style="height: 10px;background: #F2F2F2;"></div>
|
|
|
+ <div class="scoreTitle">
|
|
|
+ <span>动作质量反馈</span>
|
|
|
+ </div>
|
|
|
+ <ul class="scoreContent">
|
|
|
+ <li>
|
|
|
+ <span class="left">总分</span>
|
|
|
+ <span class="right">192</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="left">俯卧撑</span>
|
|
|
+ <span class="right">29</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="left">原地蹲</span>
|
|
|
+ <span class="right">78</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="left">箭步蹲</span>
|
|
|
+ <span class="right">32</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="left">臀桥</span>
|
|
|
+ <span class="right">45</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--底部课程统计-->
|
|
|
+ <bottomTab :curTab="thisTab"/>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import axios from 'axios';
|
|
|
+import bottomTab from '../components/bottomTab'
|
|
|
+import {
|
|
|
+ VipUserSelfQuery,
|
|
|
+ VipUserCleCkSum,
|
|
|
+ MyShopQuery,
|
|
|
+} from '../api/getApiRes.js'
|
|
|
+
|
|
|
+let qs = require('qs');
|
|
|
+import Global from '../Global.js'
|
|
|
+// 引入基本模板
|
|
|
+let echarts = require('echarts/lib/echarts')
|
|
|
+// 引入柱状图组件
|
|
|
+require('echarts/lib/chart/bar')
|
|
|
+// 引入提示框和title组件
|
|
|
+require('echarts/lib/component/tooltip')
|
|
|
+require('echarts/lib/component/title')
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ num: 0,
|
|
|
+ thisTab: '数据统计',
|
|
|
+ active: 0,
|
|
|
+ sum: 0,
|
|
|
+ openAlert: false,
|
|
|
+ list: [],
|
|
|
+ dialog: {
|
|
|
+ id: '',
|
|
|
+ name: '',
|
|
|
+ timeLong: '',
|
|
|
+ },
|
|
|
+ user: {
|
|
|
+ height: 10,
|
|
|
+ age: 20,
|
|
|
+ weight: 30,
|
|
|
+ sex: 10,
|
|
|
+ Ck: 0,
|
|
|
+ CKMonth: 0,
|
|
|
+ Cle: 0,
|
|
|
+ CleMonth: 0,
|
|
|
+ CalorieMonth: 0,
|
|
|
+ CalorieTotal: 0,
|
|
|
+ ClassFinish: 0,
|
|
|
+ ClassRemain: 0,
|
|
|
+ ClassTotal: 0,
|
|
|
+ ExpTime: 0,
|
|
|
+ Name: '',
|
|
|
+ Phone: '',
|
|
|
+ VipType: 0,
|
|
|
+ },
|
|
|
+ ckRs: {
|
|
|
+ Ck: 0,
|
|
|
+ CKMonth: 0,
|
|
|
+ Cle: 0,
|
|
|
+ CleMonth: 0,
|
|
|
+ },
|
|
|
+ schools: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getInfo();
|
|
|
+ this.getOrderShopQuery();
|
|
|
+ this.getCalorie()
|
|
|
+ this.loadCalMonthChart();
|
|
|
+ this.loadCkMonthChart();
|
|
|
+ this.loadClassMonthChart();
|
|
|
+ this.loadActivePercentChart();
|
|
|
+ this.loadSportHrChart();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ loadCalMonthChart() {
|
|
|
+ let echarts = require('echarts');
|
|
|
+ let myChart = echarts.init(document.getElementById('calorieMonth'));
|
|
|
+ myChart.setOption({
|
|
|
+ color: ['#FF5800'],
|
|
|
+ tooltip: {},
|
|
|
+ xAxis: {
|
|
|
+ data: ['1月', '2月', '3月', '4月', '5月', '6月']
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ series: [{
|
|
|
+ name: '千卡',
|
|
|
+ type: 'line',
|
|
|
+ itemStyle: {label: {show: true}},// 显示数值
|
|
|
+ data: [705, 1020, 1520, 820, 1206, 1610]
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ },
|
|
|
+ loadCkMonthChart() {
|
|
|
+ let echarts = require('echarts');
|
|
|
+ let myChart = echarts.init(document.getElementById('ckMonth'));
|
|
|
+ myChart.setOption({
|
|
|
+ color: ['#FFA310'],
|
|
|
+ tooltip: {},
|
|
|
+ xAxis: {
|
|
|
+ data: ['1月', '2月', '3月', '4月', '5月', '6月']
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ series: [{
|
|
|
+ name: '千卡',
|
|
|
+ type: 'line',
|
|
|
+ itemStyle: {label: {show: true}},// 显示数值
|
|
|
+ data: [705, 1020, 1520, 820, 1206, 1610]
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ },
|
|
|
+ loadClassMonthChart() {
|
|
|
+ let echarts = require('echarts');
|
|
|
+ let myChart = echarts.init(document.getElementById('classMonth'));
|
|
|
+ myChart.setOption({
|
|
|
+ color: ['#028FE1'],
|
|
|
+ tooltip: {},
|
|
|
+ xAxis: {
|
|
|
+ data: ['1月', '2月', '3月', '4月', '5月', '6月']
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ series: [{
|
|
|
+ name: '千卡',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 10,//柱图宽度
|
|
|
+ itemStyle: {label: {show: true, position: 'top'}},// 显示数值
|
|
|
+ data: [705, 1020, 1520, 820, 1206, 1610]
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ },
|
|
|
+ loadActivePercentChart() {
|
|
|
+ let echarts = require('echarts');
|
|
|
+ let myChart = echarts.init(document.getElementById('activePercent'));
|
|
|
+ let dataLine = [12, 8, 44, 12, 5, 12]
|
|
|
+ let positionLeft = 0.4;
|
|
|
+ let max = 50 + 2 * positionLeft
|
|
|
+ // 绘制图表
|
|
|
+ let option = {
|
|
|
+ // 设置图表的位置
|
|
|
+ grid: [
|
|
|
+ {
|
|
|
+ left: '8%',
|
|
|
+ top: '12%',
|
|
|
+ bottom: '8%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ top: '12%',
|
|
|
+ bottom: '8%',
|
|
|
+ containLabel: true
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 提示框组件
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis', // 触发类型, axis: 坐标轴触发
|
|
|
+ axisPointer: {
|
|
|
+ // 指示器类型 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器
|
|
|
+ // 'cross' 十字准星指示器 其实是种简写，表示启用两个正交的轴的 axisPointer
|
|
|
+ type: 'none'
|
|
|
+ },
|
|
|
+ color: '#cdd3ee', // 文字颜色
|
|
|
+ // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式 折线（区域）图、柱状（条形）图、K线图
|
|
|
+ // {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
|
|
|
+ formatter: '{b}<br/>{a0}: {c}%'
|
|
|
+ },
|
|
|
+ // X轴
|
|
|
+ xAxis: [{
|
|
|
+ max: max,
|
|
|
+ show: false
|
|
|
+ }],
|
|
|
+ yAxis: [{
|
|
|
+ axisTick: 'none',
|
|
|
+ axisLine: 'none',
|
|
|
+ offset: '10',
|
|
|
+ inverse: true,
|
|
|
+ axisLabel: {
|
|
|
+ color: '#000000', //y轴字体颜色
|
|
|
+ fontSize: '16'
|
|
|
+ },
|
|
|
+ data: ['激活放松', '动态热身', '脂肪燃烧', '糖分消耗', '心肺训练', '峰值训练']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ axisTick: 'none',
|
|
|
+ axisLine: 'none',
|
|
|
+ show: false,
|
|
|
+ axisLabel: {
|
|
|
+ color: '#ffffff',
|
|
|
+ fontSize: '16'
|
|
|
+ },
|
|
|
+ data: [1, 1, 1, 1, 1, 1]
|
|
|
+ }, {
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(0,0,0,0)' //y轴线颜色
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ { //设置柱状图右边参数
|
|
|
+ // show: true,
|
|
|
+ // inverse: true,
|
|
|
+ // data: dataLine,
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ // splitLine: {
|
|
|
+ // show: false
|
|
|
+ // },
|
|
|
+ // axisTick: {
|
|
|
+ // show: false
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // 系列列表
|
|
|
+ series: [{
|
|
|
+ name: '占比',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'b',
|
|
|
+ yAxisIndex: 0,
|
|
|
+ data: dataLine,
|
|
|
+ color: '#ffffff',
|
|
|
+ fontSize: '16',
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'right',
|
|
|
+ distance: 5,
|
|
|
+ formatter: function (param) {
|
|
|
+ return param.value + '%'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ barWidth: 11,
|
|
|
+ itemStyle: {
|
|
|
+ color: function (params) {
|
|
|
+ //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
|
|
|
+ let colorList = ['#028FE1', '#6D29FA', '#0AB105', '#B9CB01', '#EA8813', '#D11122'];
|
|
|
+ return colorList[params.dataIndex];
|
|
|
+ },
|
|
|
+ borderRadius: [100, 100, 100, 100, 100, 100],
|
|
|
+ },
|
|
|
+ z: 2
|
|
|
+ }, { //背景灰框
|
|
|
+ name: '白框',
|
|
|
+ type: 'bar',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ barGap: '-100%',//设置-100% 则表示灰色柱状图与红色柱状图重合
|
|
|
+ data: [99.8, 99.9, 99.9, 99.9],
|
|
|
+ barWidth: 11,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#DDDDDD',
|
|
|
+ borderRadius: [100, 100, 100, 100, 100, 100],
|
|
|
+ },
|
|
|
+ z: 1 // 设置维度越高这表示覆盖低的
|
|
|
+ }, //进度条底框
|
|
|
+ {
|
|
|
+ name: '外框',
|
|
|
+ type: 'bar',
|
|
|
+ yAxisIndex: 2,
|
|
|
+ barGap: '-100%',
|
|
|
+ data: [100, 100, 100, 100, 100, 100],
|
|
|
+ barWidth: 13,
|
|
|
+ label: {//右边的文字
|
|
|
+ show: true,
|
|
|
+ position: 'right',
|
|
|
+ distance: 5,
|
|
|
+ color: '#000000',
|
|
|
+ formatter: function (data) {
|
|
|
+ return dataLine[data.dataIndex] + "分钟";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //进度条底色
|
|
|
+ itemStyle: {
|
|
|
+ color: '#DDDDDD',
|
|
|
+ borderRadius: [100, 100, 100, 100, 100, 100],
|
|
|
+ },
|
|
|
+ z: 0
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ myChart.setOption(option);
|
|
|
+ },
|
|
|
+ loadSportHrChart() {
|
|
|
+ let date = [];
|
|
|
+ let data = [];
|
|
|
+
|
|
|
+ let dateNow = new Date();
|
|
|
+
|
|
|
+
|
|
|
+ for (let i = 1; i < 3000; i++) {
|
|
|
+ date.push(new Date(dateNow).toLocaleString('zh', {hour12: false}));
|
|
|
+ data.push(Math.floor(Math.random() * (30 + 1) + 80));
|
|
|
+ }
|
|
|
+
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ let myChart = echarts.init(document.getElementById('sportHeartRate'));
|
|
|
+ myChart.setOption({
|
|
|
+ tooltip: {
|
|
|
+ // 当trigger为’item’时只会显示该点的数据，为’axis’时显示该列下所有坐标轴所对应的数据。
|
|
|
+ trigger: 'axis',
|
|
|
+ // 提示框的位置
|
|
|
+ position: function (pt) {
|
|
|
+ return [pt[0], '10%'];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ left: 'center',
|
|
|
+ text: '心率趋势图'
|
|
|
+ },
|
|
|
+ // toolbox：这是ECharts中的工具栏。内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
|
|
|
+ // toolbox: {
|
|
|
+ // feature 各工具配置项: dataZoom 数据区域缩放;restore 配置项还原;saveAsImage下载为图片;magicType动态类型切换
|
|
|
+ // feature: {
|
|
|
+ // dataZoom: {
|
|
|
+ // yAxisIndex: 'none' // y轴不缩放，Index默认为0
|
|
|
+ // },
|
|
|
+ // restore: {},
|
|
|
+ // saveAsImage: {}
|
|
|
+ // ,magicType: {
|
|
|
+ // type: ['bar', 'line']
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category', // category为一级分类,适用于离散的类目数据
|
|
|
+ boundaryGap: false, // 无间隙
|
|
|
+ data: date
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value', // 'value' 数值轴，适用于连续数据。
|
|
|
+ boundaryGap: [0, '100%'] // 分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，
|
|
|
+ },
|
|
|
+ dataZoom: [{ // 内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系
|
|
|
+ type: 'inside',
|
|
|
+ start: 0,
|
|
|
+ end: 10
|
|
|
+ }, {
|
|
|
+ start: 0,
|
|
|
+ end: 10,//柄的 icon 形状，支持路径字符串
|
|
|
+ // handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
|
|
+ handleSize: '80%', // 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同。
|
|
|
+ handleStyle: {
|
|
|
+ color: 'pink',
|
|
|
+ shadowBlur: 3, // shadowBlur图片阴影模糊值，shadowColor阴影的颜色
|
|
|
+ shadowColor: 'red',
|
|
|
+ shadowOffsetX: 2,
|
|
|
+ shadowOffsetY: 2
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '瞬时心率',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true, // 开启平滑处理。true的平滑程度相当于0.5
|
|
|
+ symbol: 'none', // 标记的图形。
|
|
|
+ sampling: 'average', // 取过滤点的平均值
|
|
|
+ itemStyle: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#ff6f4a'/*折线的颜色*/
|
|
|
+ },
|
|
|
+ color: "#ff6f4a"/*图例(legend)的颜色,不是图例说明文字的颜色*/
|
|
|
+ },
|
|
|
+ areaStyle: { // 区域填充样式。
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0, 0, 0, 1,
|
|
|
+ [
|
|
|
+ {offset: 0, color: '#ff6f4a'},
|
|
|
+ /* {offset: 0.5, color: '#c4e1ff'},*/
|
|
|
+ {offset: 1, color: '#ecf5ff'}
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ },
|
|
|
+ data: data
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获得卡路里
|
|
|
+ getCalorie() {
|
|
|
+ let that = this;
|
|
|
+ let param = {
|
|
|
+ token: localStorage.token,
|
|
|
+ };
|
|
|
+ let postdata = qs.stringify(param);
|
|
|
+ VipUserCleCkSum(postdata).then(res => {
|
|
|
+ let json = res;
|
|
|
+ if (json.Code == 0) {
|
|
|
+ that.ckRs = json;
|
|
|
+ } else {
|
|
|
+ that.$toast.message(json.Memo);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getOrderShopQuery() {
|
|
|
+ let that = this;
|
|
|
+ let param = {
|
|
|
+ token: localStorage.token,
|
|
|
+ };
|
|
|
+ let postdata = qs.stringify(param);
|
|
|
+// OrderShopQuery(postdata).then(res => {
|
|
|
+ MyShopQuery(postdata).then(res => {
|
|
|
+ let json = res;
|
|
|
+ if (json.Code == 0) {
|
|
|
+ that.schools = json.Rs;
|
|
|
+ } else {
|
|
|
+ that.$toast.message(json.Memo);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ logoutBtn() {
|
|
|
+ let that = this;
|
|
|
+ this.$confirm('是否退出账号？', '提示', {
|
|
|
+ type: 'warning'
|
|
|
+ }).then(({result}) => {
|
|
|
+ if (result) {
|
|
|
+ localStorage.token = '';
|
|
|
+ that.$router.push({path: '/login'});
|
|
|
+ } else {
|
|
|
+ that.$toast.message('点击了取消');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getInfo() {
|
|
|
+ let that = this;
|
|
|
+ let param = {
|
|
|
+ token: localStorage.token,
|
|
|
+ active: this.active
|
|
|
+ };
|
|
|
+ let postdata = qs.stringify(param);
|
|
|
+ VipUserSelfQuery(postdata).then(res => {
|
|
|
+ res = "{\"Code\":0,\"Memo\":\"执行成功\",\"Rs\":{\"Name\":\"郑伟\",\"Phone\":\"15662797503\",\"height\":120,\"age\":8,\"weight\":31,\"sex\":1,\"CalorieMonth\":0,\"CalorieTotal\":2039,\"CKTotal\":26,\"CKMonth\":0}}";
|
|
|
+ let json = JSON.parse(res);
|
|
|
+// let json = res;
|
|
|
+ if (json.Code == 0) {
|
|
|
+ that.user = json.Rs;
|
|
|
+ } else {
|
|
|
+ that.$toast.message(json.Memo);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ hidePhone: function (val) {
|
|
|
+ let str = String(val)
|
|
|
+ let len = str.length;
|
|
|
+ if (len >= 7) {
|
|
|
+ let reg = str.slice(-8, -4)
|
|
|
+ return str.replace(reg, "****")
|
|
|
+ } else if (len < 7 && len >= 6) {
|
|
|
+ let reg = str.slice(-4, -2)
|
|
|
+ return str.replace(reg, "**")
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fmtTime: function (value) {
|
|
|
+ if (!value) {
|
|
|
+ return 0
|
|
|
+ } else {
|
|
|
+// js默认使用毫秒
|
|
|
+ value = value * 1000
|
|
|
+ let date = new Date(value);
|
|
|
+ let y = date.getFullYear();
|
|
|
+ let MM = date.getMonth() + 1;
|
|
|
+ MM = MM < 10 ? ('0' + MM) : MM;
|
|
|
+ let d = date.getDate();
|
|
|
+ d = d < 10 ? ('0' + d) : d;
|
|
|
+ let h = date.getHours();
|
|
|
+ h = h < 10 ? ('0' + h) : h;
|
|
|
+ let m = date.getMinutes();
|
|
|
+ m = m < 10 ? ('0' + m) : m;
|
|
|
+ let s = date.getSeconds();
|
|
|
+ s = s < 10 ? ('0' + s) : s;
|
|
|
+ return y + '-' + MM + '-' + d;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeRouteEnter(to, from, next) {
|
|
|
+ next(vm => {
|
|
|
+//因为当钩子执行前，组件实例还没被创建
|
|
|
+// vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
|
|
|
+ if (to.name == 'mine') {
|
|
|
+ vm.getInfo();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'active'() {
|
|
|
+ console.log(123);
|
|
|
+ this.getList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ bottomTab
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.pages {
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: #F2F2F2;
|
|
|
+}
|
|
|
+
|
|
|
+.headerInfo {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.headerInfo .headBack {
|
|
|
+ height: 120px;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.headerInfo .userInfo {
|
|
|
+ left: 42%;
|
|
|
+ top: 1.2rem;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+}
|
|
|
+
|
|
|
+.headerInfo .userInfo span {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #028FE1;
|
|
|
+ margin-left: 12px;
|
|
|
+ padding-top: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.num {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-weight: 300;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ color: #909090;
|
|
|
+ padding: 13px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.round_icon {
|
|
|
+ width: 64px;
|
|
|
+ height: 64px;
|
|
|
+ display: flex;
|
|
|
+ border-radius: 50%;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ border: solid 2px white;
|
|
|
+}
|
|
|
+
|
|
|
+.info {
|
|
|
+ background: #fff;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 120px;
|
|
|
+}
|
|
|
+
|
|
|
+.info ul {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.info li {
|
|
|
+ width: 25%;
|
|
|
+ border-left: 1px solid #fff;
|
|
|
+ border-right: 1px solid #fff;
|
|
|
+ float: left;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.info li:nth-child(2) {
|
|
|
+ border-color: #e2e2e2;
|
|
|
+}
|
|
|
+
|
|
|
+.info li:nth-child(3) {
|
|
|
+ border-color: #e2e2e2;
|
|
|
+ border-left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.info li em {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ color: #363636;
|
|
|
+ font-size: 20px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.info li span {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ color: #c4c4c4;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.tag {
|
|
|
+ height: 252px;
|
|
|
+}
|
|
|
+
|
|
|
+.tag .card {
|
|
|
+ width: 45%;
|
|
|
+ float: left;
|
|
|
+ height: 106px;
|
|
|
+ margin-left: 3%;
|
|
|
+ margin-top: 20px;
|
|
|
+ border-radius: 13px;
|
|
|
+ background: linear-gradient(#FFFFFF, #FFD4D3);
|
|
|
+}
|
|
|
+
|
|
|
+.tag .card .row1 img {
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 17.5px;
|
|
|
+ height: 19px;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+.tag .card .row1 em {
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 40px;
|
|
|
+ margin-left: 10px;
|
|
|
+ color: #3b3b3b;
|
|
|
+}
|
|
|
+
|
|
|
+.tag .card .row2 span {
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left: 35px;
|
|
|
+ color: #363636;
|
|
|
+}
|
|
|
+
|
|
|
+.tag .card .row2 em {
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 10px;
|
|
|
+ color: #909090;
|
|
|
+}
|
|
|
+
|
|
|
+.tag .card .row3 span {
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 35px;
|
|
|
+ color: #363636;
|
|
|
+}
|
|
|
+
|
|
|
+.tag .card .row3 em {
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 5px;
|
|
|
+ color: #363636;
|
|
|
+}
|
|
|
+
|
|
|
+.reportCalorie {
|
|
|
+ margin-top: 10px;
|
|
|
+ background: #FFF;
|
|
|
+ color: #FF5800;
|
|
|
+}
|
|
|
+
|
|
|
+.reportCalorie .title {
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ background: #FFF;
|
|
|
+}
|
|
|
+
|
|
|
+.fa-square {
|
|
|
+ background: #FF5800;
|
|
|
+ height: 8px;
|
|
|
+ width: 8px;
|
|
|
+ float: left;
|
|
|
+ margin-left: 15px;
|
|
|
+ margin-top: 5px;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.chartCalorie {
|
|
|
+ text-align: center;
|
|
|
+ width: 95%;
|
|
|
+ height: 200px;
|
|
|
+ margin-top: -35px;
|
|
|
+ margin-left: 5%;
|
|
|
+}
|
|
|
+
|
|
|
+.classReport {
|
|
|
+ background: #F2F2F2;
|
|
|
+}
|
|
|
+
|
|
|
+.reportCalorie ul {
|
|
|
+ padding-bottom: 100px;
|
|
|
+ margin-top: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.classReport li {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 1px;
|
|
|
+ background: #FFF;
|
|
|
+ height: 66px;
|
|
|
+ padding-left: 15px;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+.classReport li .className {
|
|
|
+ background: #EBFFE3;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 1px 11px;
|
|
|
+ border-radius: 250px;
|
|
|
+ float: left;
|
|
|
+ margin-top: 20px;
|
|
|
+ border: solid 1px #37CB00;
|
|
|
+ text-align: center;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.classReport li .calorieToTal {
|
|
|
+ float: left;
|
|
|
+ text-align: center;
|
|
|
+ display: block;
|
|
|
+ width: 25%;
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.calorieToTal em {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ color: black;
|
|
|
+ display: block;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.calorieToTal span {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 10px;
|
|
|
+ color: #C9C9C9;
|
|
|
+}
|
|
|
+
|
|
|
+/*pageClass*/
|
|
|
+.pageClass {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.pageClass em {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.dayList .dayDetail {
|
|
|
+ background: #FFF;
|
|
|
+ margin-top: 5px;
|
|
|
+ padding-top: 5px;
|
|
|
+ height: 100px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.dayDetail .dayTitle {
|
|
|
+ font-size: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-weight: normal;
|
|
|
+ color: #BFBFBF;
|
|
|
+}
|
|
|
+
|
|
|
+.classList {
|
|
|
+ margin-top: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ *display: inline;
|
|
|
+ zoom: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.classList li {
|
|
|
+ float: left;
|
|
|
+ display: block;
|
|
|
+ background: #EBFFE3;
|
|
|
+ border-radius: 12px;
|
|
|
+ margin-right: 10px;
|
|
|
+ padding: 1px 15px;
|
|
|
+ border: solid 1.5px #37CB00;
|
|
|
+}
|
|
|
+
|
|
|
+.classList li .className {
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.classList li .classTime {
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.classList li span {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.pageDetail {
|
|
|
+ text-align: center;
|
|
|
+ background: #FFF;
|
|
|
+ margin-top: 20px;
|
|
|
+ height: 1200px;
|
|
|
+}
|
|
|
+
|
|
|
+.pageDetail .btnBack {
|
|
|
+ float: left;
|
|
|
+ margin-left: 15px;
|
|
|
+ margin-top: 14px;
|
|
|
+ font-size: 16px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ color: #ACACAC;
|
|
|
+}
|
|
|
+
|
|
|
+.pageDetail .classDetail {
|
|
|
+ display: inline-block;
|
|
|
+ *display: inline;
|
|
|
+ margin-right: 45px;
|
|
|
+ zoom: 1;
|
|
|
+ margin-top: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.pageDetail .detailTitle {
|
|
|
+ float: left;
|
|
|
+ background: #EBFFE3;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 1px 15px;
|
|
|
+ border: solid 1.5px #37CB00;
|
|
|
+}
|
|
|
+
|
|
|
+.detailTitle span {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.pageDetail .memberInfo {
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.memberInfo em {
|
|
|
+ color: #FFA310;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.memberInfo span {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909090;
|
|
|
+}
|
|
|
+
|
|
|
+.classInfo {
|
|
|
+ background: #FFF;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.classInfo ul {
|
|
|
+ width: 80%;
|
|
|
+ margin-left: 10%;
|
|
|
+ height: 40px;
|
|
|
+ border-bottom: 1px solid #CCC;
|
|
|
+ padding-bottom: 50px
|
|
|
+}
|
|
|
+
|
|
|
+.classInfo li {
|
|
|
+ width: 33%;
|
|
|
+ border-left: 1px solid #fff;
|
|
|
+ border-right: 1px solid #fff;
|
|
|
+ text-align: center;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+.classInfo li:nth-child(2) {
|
|
|
+ border-color: #e2e2e2;
|
|
|
+}
|
|
|
+
|
|
|
+.classInfo li em {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ color: #E75296;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.classInfo li span {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ color: #c4c4c4;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+动作评分结果选项
|
|
|
+ */
|
|
|
+
|
|
|
+.pageScore {
|
|
|
+ background: #F2F2F2;
|
|
|
+ height: 200px;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.pageScore .scoreTitle {
|
|
|
+ background: #FFF;
|
|
|
+}
|
|
|
+
|
|
|
+.pageScore span {
|
|
|
+ height: 50px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ padding-top: 10px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+ font-family: "PingFang SC";
|
|
|
+}
|
|
|
+
|
|
|
+.pageScore .scoreContent {
|
|
|
+ margin-top: 5px;
|
|
|
+ font-weight: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.pageScore .scoreContent li {
|
|
|
+ width: 100%;
|
|
|
+ background: #FFF;
|
|
|
+ height: 50px;
|
|
|
+ border-bottom: solid 1px #F2F2F2;
|
|
|
+}
|
|
|
+
|
|
|
+.pageScore .scoreContent li span {
|
|
|
+ font-weight: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.pageScore .scoreContent li:first-child span{
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.pageScore .scoreContent li .left {
|
|
|
+ width: 50%;
|
|
|
+ float: left;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: right;
|
|
|
+ padding-right: 50px;
|
|
|
+ display: block;
|
|
|
+ border-right: 1px solid #F2F2F2;
|
|
|
+}
|
|
|
+
|
|
|
+.pageScore .scoreContent li .right {
|
|
|
+ /*background: #EBFFE3;*/
|
|
|
+ width: 50%;
|
|
|
+ float: left;
|
|
|
+ text-align: left;
|
|
|
+ line-height: 30px;
|
|
|
+ padding-left: 50px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.user {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 58px;
|
|
|
+ background: #fff;
|
|
|
+ padding: 17px 3%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.user img {
|
|
|
+ width: 26.29px;
|
|
|
+ height: 26.29px;
|
|
|
+ float: left;
|
|
|
+ margin-right: 11px;
|
|
|
+}
|
|
|
+
|
|
|
+.user span {
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: left;
|
|
|
+ color: #3b3b3b;
|
|
|
+}
|
|
|
+
|
|
|
+.user em {
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: left;
|
|
|
+ color: #3b3b3b;
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+
|
|
|
+.user p {
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: left;
|
|
|
+ color: #ffb43c;
|
|
|
+ float: right;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ margin-left: 3px;
|
|
|
+ line-height: 26px;
|
|
|
+}
|
|
|
+
|
|
|
+.value {
|
|
|
+ width: 100%;
|
|
|
+ /*height: 131px;*/
|
|
|
+ background: #fff;
|
|
|
+ padding: 13px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.value .vTitle {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-weight: 300;
|
|
|
+ font-size: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.vTitle i {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ display: inline-block;
|
|
|
+ border-radius: 250px;
|
|
|
+ margin-right: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+.vTitle.year {
|
|
|
+ color: #E75296;
|
|
|
+}
|
|
|
+
|
|
|
+.vTitle.year i {
|
|
|
+ background: #e75296;
|
|
|
+}
|
|
|
+
|
|
|
+.vTitle.price {
|
|
|
+ color: #FFB43C;
|
|
|
+}
|
|
|
+
|
|
|
+.vTitle.price i {
|
|
|
+ background: #FFB43C;
|
|
|
+}
|
|
|
+
|
|
|
+.vNum {
|
|
|
+ width: 100%;
|
|
|
+ /*height: 25px;*/
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 5px auto;
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.center {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.vNum em {
|
|
|
+ position: relative;
|
|
|
+ float: right;
|
|
|
+ bottom: 20px;
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #c9c9c9;
|
|
|
+ padding-right: 3%;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .linear-progress {
|
|
|
+ width: 90%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ border-radius: 250px;
|
|
|
+}
|
|
|
+
|
|
|
+.limit {
|
|
|
+ width: 90%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.limit em {
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-weight: 300;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: right;
|
|
|
+ color: #e75296;
|
|
|
+ padding-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.limit span {
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-weight: 300;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: right;
|
|
|
+ color: #909090;
|
|
|
+ float: right;
|
|
|
+ text-align: right;
|
|
|
+ padding-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.dataSum {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: #fff;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.dataSum .row {
|
|
|
+ width: 90%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 2% 0;
|
|
|
+}
|
|
|
+
|
|
|
+.dataSum .row em {
|
|
|
+ float: left;
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-weight: 300;
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: right;
|
|
|
+ color: #3b3b3b;
|
|
|
+}
|
|
|
+
|
|
|
+.dataSum .row span {
|
|
|
+ font-family: "PingFang SC";
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: right;
|
|
|
+ color: #3b3b3b;
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+
|
|
|
+.row .mid {
|
|
|
+ width: 66%;
|
|
|
+ height: 0px;
|
|
|
+ background: transparent;
|
|
|
+ border: 1px dotted #e0e0e0;
|
|
|
+ float: left;
|
|
|
+ margin-top: 11px;
|
|
|
+ margin-right: 5px;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.row .midl {
|
|
|
+ width: 54%;
|
|
|
+ height: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.login_btn {
|
|
|
+ width: 96%;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ padding-left: 3%;
|
|
|
+ padding-right: 3%;
|
|
|
+ background: #E75296;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ border: none;
|
|
|
+ padding: 0;
|
|
|
+ font-size: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .mu-warning-text-color {
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+.vNum span {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+@media only screen and (max-width: 640px) {
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+@media only screen and (max-width: 480px) {
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+@media only screen and (max-width: 375px) {
|
|
|
+ .vNum em {
|
|
|
+ padding-right: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row .mid {
|
|
|
+ width: 49%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row .midl {
|
|
|
+ width: 44%;
|
|
|
+ height: 0px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media only screen and (max-width: 360px) {
|
|
|
+ .vNum em {
|
|
|
+ padding-right: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row .mid {
|
|
|
+ width: 49%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row .midl {
|
|
|
+ width: 44%;
|
|
|
+ height: 0px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media only screen and (max-width: 320px) {
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+@media only screen and (min-width: 641px) {
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
