洛阳学员端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

238 lines
4.9 KiB

<template>
<view class="myData" id="app" ref="appref" :style="{ background: `url(${imgUrl}) #f6f6f6 no-repeat`, backgroundSize: backgroundSize }">
<topNavbar title=" "></topNavbar>
<view class="pad">
<view class="topText">
<view class="h3">专属您的</view>
<view class="h4">学车数据</view>
</view>
<view class="card">
<view class="row">
<view class="leftCon">
<view class="icon">
<image src="@/static/images/userCenter/ic_jiaxiao.png" mode=""></image>
</view>
<view class="text">我的驾校</view>
</view>
<view class="value">翔力驾校</view>
</view>
<view class="row">
<view class="leftCon">
<view class="icon">
<image src="@/static/images/userCenter/ic_jiaolian.png" mode=""></image>
</view>
<view class="text">我的教练</view>
</view>
<view class="value">xxx</view>
</view>
<view class="row">
<view class="leftCon">
<view class="icon">
<image src="@/static/images/userCenter/ic_chexing.png" mode=""></image>
</view>
<view class="text">所学车型</view>
</view>
<view class="value">xxx</view>
</view>
<view class="row">
<view class="leftCon">
<view class="icon">
<image src="@/static/images/userCenter/ic_shijian.png" mode=""></image>
</view>
<view class="text">报名时间</view>
</view>
<view class="value">xxx</view>
</view>
</view>
<!-- 学驾共历时 -->
<view class="card">
<view class="chart_row">
<view class="leftText">
<view class="lab">学驾共历时</view>
<view class="val">33</view>
</view>
<view class="rightChart">
<ringChart />
</view>
</view>
</view>
<!-- 考试通过率 -->
<view class="card">
<view class="chart_row">
<view class="leftText" style="width: 200rpx;">
<view class="lab">考试通过率</view>
<view class="val">90%</view>
</view>
<view class="rightChart pad28">
<view class="blueBg">
<columnChart/>
</view>
</view>
</view>
</view>
<view class="flex-b">
<view class="count card">
<view class="lab">实操练习次数</view>
<view class="val">20</view>
</view>
<view class="count card">
<view class="lab">模拟训练次数</view>
<view class="val">20</view>
</view>
</view>
</view>
<!-- <view class="btnBorder" @click="destImgFn">立即分享</view>
<canvas canvas-id="canvas" style="width: 300px; height: 300px;" class="canvas" ref="canvas"></canvas>
<view class="img" style="width: 300px; height: 300px;">
<image :src="shareImageUrl" mode=""></image>
</view> -->
</view>
</template>
<script>
import ringChart from './ringChart.vue'
import columnChart from './columnChart'
import { imgUrl } from '@/config/site.config'
export default {
components: { ringChart, columnChart },
data() {
return {
shareImageUrl: '',
imgUrl: imgUrl+'mydatabg.png',
backgroundSize: '100% 544rpx',
}
},
onReady() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.myData {
width: 100%;
// background: url('http://192.168.1.20:81/zhili/image/20230818/409dca21dfec44eb8477e056ee23e437.png') #f6f6f6 no-repeat;
// background-size: 100% 544rpx;
min-height: 100vh;
font-size: 28rpx;
padding-bottom: 40rpx;
.topText {
padding: 56rpx 34rpx 84rpx 34rpx;
color: #fff;
font-weight: 600;
.h3 {
font-size: 42rpx;
}
.h4 {
font-size: 64rpx;
}
}
.card {
padding: 0 24rpx;
margin-bottom: 20rpx;
.row {
display: flex;
border-bottom: 2rpx solid #E8E9EC;
height: 102rpx;
align-items: center;
.leftCon {
display: flex;
align-items: center;
.icon {
width: 40rpx;
height: 40rpx;
}
.text {
font-size: 28rpx;
padding: 0 40rpx 0 12rpx;
}
}
.value {
font-size: 28rpx;
color: #1989FA;
flex: 1;
}
}
}
.count {
width: 48%;
height: 196rpx;
background: #FFFFFF;
border-radius: 16rpx;
text-align: center;
.lab {
margin: 36rpx 0 28rpx 0;
}
.val {
font-weight: 500;
font-size: 40rpx;
color: $themC;
}
}
.btnBorder {
width: 396rpx;
margin: 48rpx auto 0 auto;
}
}
.chart_row {
height: 300rpx;
border-radius: 16rpx;
display: flex;
.leftText {
width: 270rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.lab {
margin: 0rpx 0 24rpx 0;
}
.val {
font-weight: 500;
font-size: 40rpx;
color: $themC;
}
}
.rightChart {
width: 0;
flex: 1;
&.pad28 {
padding: 28rpx 0;
}
.blueBg {
padding: 20rpx 0 10rpx 0;
width: 100%;
height: 100%;
background-color: #F2F8FF;
}
}
}
.img {
width: 100vw;
height: 100vh;
}
</style>