From fe75cffbf3bae6777aa2794fd89fa5dc37f5df8d Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 10:11:23 +0800
Subject: [PATCH] 项目初始化
---
src/pages_qiun/pages/sport/index.vue | 762 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 762 insertions(+), 0 deletions(-)
diff --git a/src/pages_qiun/pages/sport/index.vue b/src/pages_qiun/pages/sport/index.vue
new file mode 100644
index 0000000..620d34c
--- /dev/null
+++ b/src/pages_qiun/pages/sport/index.vue
@@ -0,0 +1,762 @@
+<template>
+ <view class="body">
+ <view class="nav row_align_center" id="nav">
+ <li class="li_7" style="z-index: 999;font-size: 50rpx;" :class="['iconfont icon-zuojiantou back']" @click="gotoBack()">
+ </li>
+ </view>
+ <view class="head">
+ <view class="title">杩愬姩鎶ュ憡</view>
+ <view class="customer_img">
+ <!-- <open-data type="userAvatarUrl" class="img"></open-data> -->
+ <image class="img" src="https://s1.ax1x.com/2022/11/16/zZUoK1.jpg" mode="widthFix"></image>
+ </view>
+ </view>
+ <view class="score_view">
+ <view class="title">鏈璇勫垎</view>
+ <view class="detail">
+ <view class="socre">98</view>
+ <li class="li_7" :class="['iconfont icon-up text-green']" @click="gotoBack()"></li>
+ <view class="up_socre">0.4</view>
+ </view>
+ </view>
+ <view class="census_view">
+ <view class="left">
+ <view class="text_gray small_text">娑堣��(鍗冨崱)</view>
+ <view class="middle_text text_wide_900">165</view>
+ </view>
+ <view class="right">
+ <view class="text_gray small_text">蹇冪巼涓昏闆嗕腑鍦�</view>
+ <view style="font-size: 30rpx;">鐕冪儳鑴傝偑</view>
+ </view>
+ </view>
+ <view class="census_view">
+ <view class="left">
+ <view class="text_gray small_text">鏃堕暱(鍒嗛挓)</view>
+ <view class="middle_text text_wide_900">75</view>
+ </view>
+ <view class="center">
+ <view class="text_gray small_text">绱鎵撳崱(澶�)</view>
+ <view class="middle_text text_wide_900">24</view>
+ </view>
+ <view class="right">
+ <view class="text_gray small_text">骞冲潎蹇冪巼(娆�/鍒嗛挓)</view>
+ <view class="middle_text text_wide_900">98</view>
+ </view>
+ </view>
+ <view class="consume_view">
+ <view class="wrap"><span class="consume_tip">韬綋娑堣��</span></view>
+ <li class="li_7" :class="['iconfont icon-niunai consume_icon']"></li>
+ <view class="desc">
+ <view class="small_text">绾︽秷鑰�</view>
+ <view class="text_wide_900"><text class="left">1000</text><text class="right">姣崌鐗涘ザ</text></view>
+ </view>
+ </view>
+ <view class="heart_rate_view">
+ <view class="left">
+ <li class="li_7" :class="['iconfont icon-zhexiantu']"></li>
+ <text class="title">蹇冪巼鍙樺寲鏇茬嚎</text>
+ </view>
+ <view class="right text_gray">蹇冪巼鍙樺寲</view>
+ </view>
+ <view v-if="heartRateData.series" class="heart_rate_chart">
+ <view class="charts-box">
+ <qiun-data-charts type="tline" canvasId="sport_a" :canvas2d="isCanvas2d" :resshow="delayload"
+ :opts="{ padding: [0, 20, 10, 0], legend: { position: 'top', lineHeight: 20 }, xAxis: { disableGrid: true, format: 'xAxisDemo3' }, yAxis: { data: [{ min: 0, max: 175 }], gridType: 'solid' }, dataLabel: false, dataPointShape: false }"
+ :chartData="heartRateData" />
+ </view>
+ </view>
+ <view class="title_view">
+ <view class="left">
+ <li class="li_7" :class="['iconfont icon-xinlv']"></li>
+ <text class="title">蹇冪巼鍖洪棿</text>
+ </view>
+ </view>
+ <view class="heart_rate_range">
+ <view class="top">
+ <view class="item" v-for="(item, index) in heatRateRange" :key="index">
+ <view class="name text_gray">{{ item.name }}</view>
+ <view class="data">{{ item.type }}{{ item.data }}<text class="unit text_gray">鍒嗛挓</text></view>
+ </view>
+ </view>
+ <view v-if="heartRateRangeData" class="charts-box">
+ <qiun-data-charts type="ring" canvasId="sport_b" :canvas2d="isCanvas2d" :resshow="delayload"
+ :opts="{ legend: { position: 'bottom' }, extra: { ring: { border: false, centerColor: '#312C34' } }, title: { name: '' }, subtitle: { name: '' } }"
+ :chartData="heartRateRangeData" />
+ </view>
+ </view>
+ <view class="title_view">
+ <view class="left">
+ <li class="li_7" :class="['iconfont icon-pie']"></li>
+ <text class="title">杩愬姩鍒嗘瀽</text>
+ </view>
+ </view>
+ <view class="sport_analysis_view">
+ <view class="top">
+ <li class="iconfont icon-feiji li_7"></li>
+ <text class="title font-s-34">璺戞鏈�</text>
+ </view>
+ <view class="middle">
+ <view class="left">
+ <li class="iconfont icon-clock li_7"></li>
+ <view>3.24P.M</view>
+ </view>
+ <view class="right">
+ <li class="iconfont icon-huo li_7"></li>
+ <view>鐑噺娑堣��(鍗冨崱)</view>
+ </view>
+ </view>
+ <view class="bottom">
+ <view class="left">
+ <li class="iconfont icon-kongxinyuan li_7"></li>
+ <view>鐕冪儳鑴傝偑</view>
+ </view>
+ <view class="right">
+ <view class="text_wide_600 font-s-40">637</view>
+ </view>
+ </view>
+ </view>
+ <view class="box_view speed_rank_view">
+ <view class="top">
+ <view class="item" v-for="(item, index) in speedRank" :key="index">
+ <view class="name text_gray">{{ item.name }}</view>
+ <view class="data">{{ item.data }}<text class="unit text_gray">{{ item.unit }}</text></view>
+ </view>
+ </view>
+ <view v-if="speedRankData" class="charts-box">
+ <qiun-data-charts type="bar" canvasId="sport_c" :canvas2d="isCanvas2d" :resshow="delayload"
+ :chartData="speedRankData" background="none"
+ :opts="{ xAxis: { disabled: true, disableGrid: true }, extra: { bar: { barBorderCircle: true, width: 20 } }, legend: { show: false } }" />
+ </view>
+ </view>
+ <view class="box_view">
+ <view v-if="speedAndRateData.series" class="charts-box">
+ <qiun-data-charts type="tline" canvasId="sport_d" :canvas2d="isCanvas2d" :resshow="delayload"
+ :opts="{ padding: [0, 20, 10, 0], legend: { position: 'top', lineHeight: 20 }, xAxis: { disableGrid: true, format: 'xAxisDemo3' }, yAxis: { data: [{ position: 'left', min: 0, max: 25 }, { position: 'right', min: 50, max: 175 }], gridType: 'solid' }, dataLabel: false, dataPointShape: false }"
+ :chartData="speedAndRateData" />
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+import heartRateData from "../../static/json/sport/1.json"
+import heartRateRangeData from "../../static/json/sport/2.json"
+import speedRankData from "../../static/json/sport/3.json"
+import speedAndRateData from "../../static/json/sport/4.json"
+import Config from '../../static/js/config'
+import Common from '../../static/js/common'
+
+export default {
+ components: {
+
+ },
+ data() {
+ return {
+ info: '澶т究瓒呬汉', //鐢ㄦ埛鏁版嵁
+ isCanvas2d: Config.ISCANVAS2D,
+ heartRateData: {},
+ speedRankData: {},
+ speedAndRateData: {},
+ delayload: null,
+ heartRateRangeData: {},
+ heatRateRange: [{
+ name: "婵�娲绘斁鏉�",
+ data: "5",
+ type: "鈮�"
+ },
+ {
+ name: "鍔ㄦ�佺儹韬�",
+ data: "13",
+ type: ""
+ },
+ {
+ name: "鑴傝偑鐕冪儳",
+ data: "24",
+ type: ""
+ },
+ {
+ name: "绯栧垎娑堣��",
+ data: "8",
+ type: "鈮�"
+ },
+ {
+ name: "蹇冭偤璁粌",
+ data: "7",
+ type: ""
+ },
+ {
+ name: "鏋侀檺閿荤偧",
+ data: "16",
+ type: ""
+ },
+ ],
+ speedRank: [{
+ name: "璺濈",
+ data: "5",
+ unit: "鍏噷"
+ },
+ {
+ name: "鏃堕暱",
+ data: "12",
+ unit: "鍒嗛挓"
+ },
+ {
+ name: "骞冲潎閰嶉��",
+ data: "6\'05\"",
+ unit: ""
+ }
+ ]
+ };
+ },
+ watch: {
+
+ },
+ methods: {
+ async getData() {
+ uni.showLoading();
+ /*灏嗛挓鐐规椂闂撮殢鏈鸿浆鎴愭煇涓�澶╃殑鍏蜂綋鏃堕棿鎴�*/
+ if (typeof heartRateData.series[0].data[0][0] == 'string') {
+ for (let i = 0; i < heartRateData.series.length; i++) {
+ heartRateData.series[i].data.map(x => {
+ x[0] = "2018/08/08 " + x[0];
+ x[0] = this.tranTimestamp(x[0]);
+ return x[0];
+ })
+ }
+
+ }
+ if (typeof speedAndRateData.series[0].data[0][0] == 'string') {
+ for (let i = 0; i < speedAndRateData.series.length; i++) {
+ speedAndRateData.series[i].data.map(x => {
+ x[0] = "2018/08/08 " + x[0];
+ x[0] = this.tranTimestamp(x[0]);
+ return x[0];
+ })
+ }
+ }
+
+ this.heartRateData = heartRateData;
+ this.heartRateRangeData = heartRateRangeData;
+ this.speedRankData = speedRankData;
+ this.speedAndRateData = speedAndRateData;
+ this.delayload = true;
+ uni.hideLoading();
+ },
+ tranTimestamp(date) {
+ return new Date(date).getTime()
+ },
+ gotoBack() {
+ Common.navigateBack("/index/index");
+ },
+
+ },
+ onReady() {
+ //#ifndef H5
+ uni.showShareMenu();
+ //#endif
+ this.getData()
+ }
+}
+</script>
+
+<style scoped lang="scss">
+.body {
+ height: 100%;
+ background-color: #1C191F;
+ margin: 0;
+ color: #fff;
+ padding: 80rpx 20rpx 0 20rpx;
+ width: 100%;
+ box-sizing: border-box;
+ padding-bottom: 50rpx;
+
+ .box_view {
+ width: 100%;
+ padding: 20rpx;
+ position: relative;
+ background-color: #312C34;
+ color: #FFFFFF;
+ box-sizing: border-box;
+ border-radius: 20rpx;
+ overflow: hidden;
+ margin-top: 30rpx;
+ }
+
+ .speed_rank_view {
+ .top {
+ width: 100%;
+
+ &:after {
+ content: "";
+ clear: both;
+ display: block;
+ }
+
+ .item {
+ float: left;
+ width: 33%;
+ box-sizing: border-box;
+ padding: 30rpx 20rpx;
+ text-align: left;
+
+ .name {
+ font-size: 26rpx;
+ }
+
+ .data {
+ font-size: 40rpx;
+ margin-top: 10rpx;
+
+ .unit {
+ font-size: 24rpx;
+ margin-left: 14rpx;
+ }
+ }
+ }
+ }
+ }
+
+ .sport_analysis_view {
+ width: 100%;
+ padding: 20rpx;
+ position: relative;
+ background-color: #312C34;
+ color: #FFFFFF;
+ box-sizing: border-box;
+ border-radius: 20rpx;
+ overflow: hidden;
+
+ .top {
+ width: 100%;
+ height: 120rpx;
+ display: flex;
+ align-items: center;
+
+ .icon-feiji {
+ margin-top: 10rpx;
+ }
+
+ .title {
+ margin-left: 10rpx;
+ }
+ }
+
+ .middle {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ font-size: 28rpx;
+
+ .iconfont {
+ font-size: 28rpx;
+ margin-right: 10rpx;
+ margin-top: 4rpx;
+ }
+
+ .left {
+ width: 50%;
+ height: 60rpx;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ }
+
+ .right {
+ width: 50%;
+ height: 60rpx;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ }
+ }
+
+ .bottom {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ font-size: 28rpx;
+
+ .iconfont {
+ font-size: 28rpx;
+ margin-right: 10rpx;
+ margin-top: 4rpx;
+ }
+
+ .left {
+ width: 50%;
+ height: 60rpx;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+
+ .icon-kongxinyuan {
+ color: #6FCEF7;
+ }
+ }
+
+ .right {
+ width: 50%;
+ height: 60rpx;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ }
+ }
+ }
+
+ .heart_rate_range {
+ width: 100%;
+ position: relative;
+ background-color: #312C34;
+ color: #FFFFFF;
+ box-sizing: border-box;
+ border-radius: 20rpx;
+ overflow: hidden;
+
+ .top {
+ width: 100%;
+
+ &:after {
+ content: "";
+ clear: both;
+ display: block;
+ }
+
+ .item {
+ float: left;
+ width: 33%;
+ box-sizing: border-box;
+ padding: 30rpx 20rpx;
+ text-align: center;
+
+ .name {
+ font-size: 26rpx;
+ }
+
+ .data {
+ font-size: 40rpx;
+ margin-top: 10rpx;
+
+ .unit {
+ font-size: 24rpx;
+ margin-left: 14rpx;
+ }
+ }
+ }
+ }
+ }
+
+ .heart_rate_chart {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ position: relative;
+ background-color: #312C34;
+ color: #FFFFFF;
+ box-sizing: border-box;
+ border-radius: 20rpx;
+ overflow: hidden;
+ }
+
+ .title_view {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ height: 150rpx;
+
+ .left {
+ display: flex;
+ align-items: center;
+
+ .iconfont {
+ font-size: 40rpx !important;
+ }
+
+ .title {
+ font-size: 34rpx;
+ margin-left: 20rpx;
+ }
+ }
+ }
+
+ .heart_rate_view {
+ display: flex;
+ width: 100%;
+ justify-content: space-around;
+ align-items: center;
+ height: 150rpx;
+
+ .left {
+ display: flex;
+ align-items: center;
+
+ .icon-zhexiantu {
+ font-size: 26rpx;
+ }
+
+ .title {
+ font-size: 34rpx;
+ margin-left: 20rpx;
+ }
+ }
+
+ .right {
+ font-size: 22rpx;
+ padding: 10rpx 30rpx;
+ border-radius: 40rpx;
+ background-color: #342E39;
+ }
+ }
+
+ .consume_view {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ height: 190rpx;
+ position: relative;
+ margin-top: 100rpx;
+ background-color: #312C34;
+ color: #FFFFFF;
+ box-sizing: border-box;
+ border-radius: 10rpx;
+
+ .consume_img {
+ width: 240rpx;
+ height: auto;
+ position: absolute;
+ top: -80rpx;
+ left: 20rpx;
+ }
+
+ .consume_icon {
+ font-size: 220rpx;
+ position: absolute;
+ top: -80rpx;
+ left: 20rpx;
+ }
+
+ .desc {
+ position: absolute;
+ right: 80rpx;
+ top: 20rpx;
+
+ view {
+ padding: 10rpx 0;
+ display: flex;
+ align-items: center;
+ }
+
+ .left {
+ font-size: 50rpx;
+ }
+
+ .right {
+ font-size: 30rpx;
+ margin-left: 10rpx;
+ font-weight: 400;
+ }
+ }
+ }
+
+ .text-green {
+ color: #10A764;
+ }
+
+ .text_gray {
+ color: #8E8B8B;
+ }
+
+ .small_text {
+ font-size: 24rpx;
+ }
+
+ .font-s-34 {
+ font-size: 34rpx;
+ }
+
+ .font-s-36 {
+ font-size: 36rpx;
+ }
+
+ .font-s-38 {
+ font-size: 38rpx;
+ }
+
+ .font-s-40 {
+ font-size: 40rpx;
+ }
+
+ .middle_text {
+ font-size: 36rpx;
+ }
+
+ .text_wide_900 {
+ font-weight: 900;
+ }
+
+ .text_wide_600 {
+ font-weight: 600;
+ }
+
+ .census_view {
+ width: 100%;
+ display: flex;
+ justify-content: space-around;
+
+ .left {
+ text-align: left;
+
+ view {
+ padding: 10rpx 0;
+ }
+ }
+
+ .center {
+ text-align: center;
+
+ view {
+ padding: 10rpx 0;
+ }
+ }
+
+ .right {
+ text-align: right;
+
+ view {
+ padding: 10rpx 0;
+ }
+ }
+ }
+
+ .score_view {
+ width: 100%;
+
+ .title {
+ color: #8E8B8B;
+ font-size: 24rpx;
+ }
+
+ .detail {
+ height: 120rpx;
+ width: 100%;
+ display: flex;
+ align-items: flex-end;
+
+ .icon-up {
+ margin-left: 40rpx;
+ height: 54rpx;
+ font-weight: 600;
+ }
+
+ .socre {
+ font-size: 80rpx;
+ font-weight: 900;
+ }
+
+ .up_socre {
+ color: #10A764;
+ height: 50rpx;
+ font-size: 24rpx;
+ font-weight: 600;
+ }
+ }
+ }
+
+ .head {
+ height: 140rpx;
+ line-height: 140rpx;
+ position: relative;
+
+ .title {
+ font-size: 40rpx;
+ margin-left: 20rpx;
+ }
+
+ .customer_img {
+ position: absolute;
+ bottom: 0rpx;
+ right: 20rpx;
+ width: 100rpx;
+ height: 100rpx;
+ margin: 0;
+ padding: 0;
+ background-size: 100% 100%;
+ border-radius: 100%;
+ overflow: hidden;
+
+ .img {
+ height: auto;
+ width: 100%;
+ }
+ }
+ }
+
+ .li_7 {
+ list-style-type: none;
+ }
+
+ .nav {
+ position: fixed;
+ top: 50rpx;
+ left: 20rpx;
+ }
+}
+
+.consume_view:nth-child(even) {
+ margin-right: 4%;
+}
+
+.consume_tip {
+ display: inline-block;
+ text-align: center;
+ width: 188rpx;
+ height: 30rpx;
+ line-height: 30rpx;
+ position: absolute;
+ top: 36rpx;
+ right: -44rpx;
+ z-index: 2;
+ overflow: hidden;
+ transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -webkit-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ border: 1px dashed;
+ box-shadow: 0 0 0 3px #10A764, 0px 21px 5px -18px rgba(0, 0, 0, 0.6);
+ background: #10A764;
+ font-size: 16rpx;
+}
+
+.wrap {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: -12rpx;
+ left: 12rpx;
+ overflow: hidden;
+}
+
+.wrap:before {
+ content: "";
+ display: block;
+ border-radius: 8px 8px 0px 0px;
+ width: 80rpx;
+ height: 14rpx;
+ position: absolute;
+ right: 68rpx;
+ top: -1px;
+ background: #4D6530;
+}
+
+.wrap:after {
+ content: "";
+ display: block;
+ border-radius: 0px 8px 8px 0px;
+ width: 14rpx;
+ height: 80rpx;
+ position: absolute;
+ right: -1px;
+ top: 66rpx;
+ background: #4D6530;
+}</style>
--
Gitblit v1.9.3