parent
e3d4cba2ba
commit
557c93d81c
@ -1,77 +1,199 @@
|
||||
<template>
|
||||
<view>
|
||||
<text>这个是User界面</text>
|
||||
|
||||
<!-- ECharts 图表 -->
|
||||
<view style="width: 100%; height: 400px;">
|
||||
<canvas ref="myChart" style="width: 100%; height: 100%;"></canvas>
|
||||
</view>
|
||||
|
||||
<tarbar_user></tarbar_user>
|
||||
<view class="background">
|
||||
<image class="head_pic" src="../../../../static/homepages/user/user/head_pic.png"></image>
|
||||
<image class="head_button" src="../../../../static/homepages/user/user/head_button.png"></image>
|
||||
<image class="bmi_button" src="../../../../static/homepages/user/user/bmi_button.png"></image>
|
||||
<image class="eat_button" src="../../../../static/homepages/user/user/eat_button.png"></image>
|
||||
<image class="ad_button" src="../../../../static/homepages/user/user/ad_button.png"></image>
|
||||
<image class="button" src="../../../../static/homepages/user/user/button.png"></image>
|
||||
<image class="point" src="../../../../static/homepages/user/user/point.png"></image>
|
||||
<image class="user" src="../../../../static/homepages/user/user/female.png"></image>
|
||||
<text class="id">aaaaaaaaa</text>
|
||||
<text class="hot_in">20000J</text>
|
||||
<text class="hot_out">17000J</text>
|
||||
<text class="height">180cm</text>
|
||||
<text class="weight">75kg</text>
|
||||
<text class="bmi">24.9</text>
|
||||
<text class="xw">44.5</text>
|
||||
<text class="yw">34.0</text>
|
||||
<text class="tw">42.5</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
onReady() {
|
||||
this.initChart();
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
const chartDom = this.$refs.myChart;
|
||||
const myChart = echarts.init(chartDom);
|
||||
|
||||
const option = {
|
||||
legend: {
|
||||
top: 'bottom'
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
mark: { show: true },
|
||||
dataView: { show: true, readOnly: false },
|
||||
restore: { show: true },
|
||||
saveAsImage: { show: true }
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Nightingale Chart',
|
||||
type: 'pie',
|
||||
radius: [50, 250],
|
||||
center: ['50%', '50%'],
|
||||
roseType: 'area',
|
||||
itemStyle: {
|
||||
borderRadius: 8
|
||||
},
|
||||
data: [
|
||||
{ value: 40, name: 'rose 1' },
|
||||
{ value: 38, name: 'rose 2' },
|
||||
{ value: 32, name: 'rose 3' },
|
||||
{ value: 30, name: 'rose 4' },
|
||||
{ value: 28, name: 'rose 5' },
|
||||
{ value: 26, name: 'rose 6' },
|
||||
{ value: 22, name: 'rose 7' },
|
||||
{ value: 18, name: 'rose 8' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
methods:{
|
||||
navigateTo(page) {
|
||||
uni.navigateTo({
|
||||
url: page
|
||||
});
|
||||
},
|
||||
onResize() {
|
||||
this.myChart.resize();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* 添加样式 */
|
||||
.background{
|
||||
background-image: url("/static/homepages/user/user/background.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 200vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.head_pic{
|
||||
position: absolute;
|
||||
height: 4%;
|
||||
width: 20%;
|
||||
opacity: 1;
|
||||
right: 70%;
|
||||
bottom: 92%;
|
||||
}
|
||||
.head_button{
|
||||
position: absolute;
|
||||
height: 1.2%;
|
||||
width: 20%;
|
||||
opacity: 1;
|
||||
right: 5%;
|
||||
bottom: 90.7%;
|
||||
}
|
||||
.bmi_button{
|
||||
position: absolute;
|
||||
height: 1.2%;
|
||||
width: 20%;
|
||||
opacity: 1;
|
||||
right: 6%;
|
||||
bottom: 60.7%;
|
||||
}
|
||||
.ad_button{
|
||||
position: absolute;
|
||||
height: 2%;
|
||||
width: 35%;
|
||||
opacity: 1;
|
||||
right: 57%;
|
||||
bottom:17.5%;
|
||||
}
|
||||
.eat_button{
|
||||
position: absolute;
|
||||
height: 2%;
|
||||
width: 35%;
|
||||
opacity: 1;
|
||||
right: 57%;
|
||||
bottom: 10.5%;
|
||||
}
|
||||
.user{
|
||||
position: absolute;
|
||||
height: 18%;
|
||||
width: 30%;
|
||||
opacity: 1;
|
||||
right: 15%;
|
||||
bottom: 26%;
|
||||
}
|
||||
.point{
|
||||
position: absolute;
|
||||
height: 0.3%;
|
||||
width: 2%;
|
||||
opacity: 1;
|
||||
right: 50%;
|
||||
bottom: 48.5%;
|
||||
}
|
||||
.button{
|
||||
position: absolute;
|
||||
height: 5%;
|
||||
width: 88%;
|
||||
opacity: 1;
|
||||
right: 6%; /* 距右边 10% */
|
||||
bottom: 4.5%;
|
||||
}
|
||||
.id{
|
||||
position: absolute;
|
||||
height: 5%;
|
||||
width: 50%;
|
||||
opacity: 1;
|
||||
right: 13%; /* 距右边 10% */
|
||||
bottom: 90.2%;
|
||||
}
|
||||
.hot_in{
|
||||
position: absolute;
|
||||
height: 0.2%;
|
||||
width: 5%;
|
||||
opacity: 1;
|
||||
right: 77%; /* 距右边 10% */
|
||||
bottom: 87%;
|
||||
font-size: 1.3rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
.hot_out{
|
||||
position: absolute;
|
||||
height: 0.2%;
|
||||
width: 5%;
|
||||
opacity: 1;
|
||||
right: 27%; /* 距右边 10% */
|
||||
bottom: 87%;
|
||||
font-size: 0.5rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
.height{
|
||||
position: absolute;
|
||||
height: 0.2%;
|
||||
width: 5%;
|
||||
opacity: 1;
|
||||
right: 72%; /* 距右边 10% */
|
||||
bottom: 55.3%;
|
||||
font-size: 1.2rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
.weight{
|
||||
position: absolute;
|
||||
height: 0.2%;
|
||||
width: 5%;
|
||||
opacity: 1;
|
||||
right: 33%; /* 距右边 10% */
|
||||
bottom: 55.3%;
|
||||
font-size: 1.2rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
.bmi{
|
||||
position: absolute;
|
||||
height: 0.2%;
|
||||
width: 5%;
|
||||
opacity: 1;
|
||||
right: 73%; /* 距右边 10% */
|
||||
bottom: 50.5%;
|
||||
font-size: 1.2rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
.xw{
|
||||
position: absolute;
|
||||
height: 0.2%;
|
||||
width: 5%;
|
||||
opacity: 1;
|
||||
right: 79%; /* 距右边 10% */
|
||||
bottom: 39.3%;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.yw{
|
||||
position: absolute;
|
||||
height: 0.2%;
|
||||
width: 5%;
|
||||
opacity: 1;
|
||||
right: 79%; /* 距右边 10% */
|
||||
bottom: 34.5%;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.tw{
|
||||
position: absolute;
|
||||
height: 0.2%;
|
||||
width: 5%;
|
||||
opacity: 1;
|
||||
right: 79%; /* 距右边 10% */
|
||||
bottom: 29.3%;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +1,8 @@
|
||||
{
|
||||
"hash": "0aaf698d",
|
||||
"configHash": "cc60d382",
|
||||
"lockfileHash": "22a0e42d",
|
||||
"browserHash": "89d9bfb2",
|
||||
"hash": "48f6c93b",
|
||||
"configHash": "badd50c8",
|
||||
"lockfileHash": "e3b0c442",
|
||||
"browserHash": "debd2ea0",
|
||||
"optimized": {},
|
||||
"chunks": {}
|
||||
}
|
||||
Loading…
Reference in new issue