Gary
3 weeks ago
parent
7541b66d76
commit
ba5fac606d
@ -0,0 +1,13 @@
|
||||
{
|
||||
"name": "fitjourney前端代码",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"echarts": "^5.5.1"
|
||||
}
|
||||
}
|
||||
@ -1,18 +1,77 @@
|
||||
<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>
|
||||
</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);
|
||||
},
|
||||
onResize() {
|
||||
this.myChart.resize();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
/* 添加样式 */
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,68 @@
|
||||
|
||||
.background {
|
||||
background-image: url("@/static/homepages/homes/ai_recognize_recipe/pictures/background.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column; /* 纵向排列 */
|
||||
align-items: center; /* 水平居中 */
|
||||
justify-content: flex-end; /* 使内容向底部对齐 */
|
||||
position: relative; /* 为绝对定位子元素提供相对定位的上下文 */
|
||||
}
|
||||
.upload_picture{
|
||||
position: absolute; /* 绝对定位 */
|
||||
width: 90%;
|
||||
height: 30%;
|
||||
top: 43%; /* 距离底部 20% 的位置 */
|
||||
left: 50%; /* 水平居中 */
|
||||
transform: translateX(-50%); /* 通过 translateX 使其居中 */
|
||||
}
|
||||
.button {
|
||||
position: absolute; /* 绝对定位 */
|
||||
width: 15%;
|
||||
height: 7%;
|
||||
top: 1%; /* 距离底部 20% 的位置 */
|
||||
left: 8%; /* 水平居中 */
|
||||
transform: translateX(-50%); /* 通过 translateX 使其居中 */
|
||||
}
|
||||
.calorie_container {
|
||||
background-image: url("@/static/homepages/homes/ai_recognize_recipe/pictures/calorie.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex; /* 使用 flex 布局 */
|
||||
flex-direction: column;
|
||||
align-items: center; /* 水平居中 */
|
||||
justify-content: center; /* 垂直居中 */
|
||||
position: absolute;
|
||||
width: 40%;
|
||||
height: 25%;
|
||||
bottom: 2%;
|
||||
left: 6%;
|
||||
}
|
||||
.calorie_text {
|
||||
font-size: 23px;
|
||||
color: #c63030;
|
||||
font-weight: bold;
|
||||
margin-top: 100%; /* 向下移动 100% */
|
||||
}
|
||||
.name_container{
|
||||
background-image: url("@/static/homepages/homes/ai_recognize_recipe/pictures/name.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex; /* 使用 flex 布局 */
|
||||
flex-direction: column;
|
||||
align-items: center; /* 水平居中 */
|
||||
justify-content: center; /* 垂直居中 */
|
||||
position: absolute;
|
||||
width: 40%;
|
||||
height: 26%;
|
||||
bottom: 2%;
|
||||
left: 54%;
|
||||
}
|
||||
.name_text {
|
||||
font-size: 23px;
|
||||
color: #c63030;
|
||||
font-weight: 800;
|
||||
margin-top: 100%; /* 向下移动 100% */
|
||||
}
|
||||
|
After Width: | Height: | Size: 161 KiB |
|
After Width: | Height: | Size: 562 B |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 45 KiB |
@ -1,8 +1,15 @@
|
||||
{
|
||||
"hash": "3dcffc29",
|
||||
"hash": "0aaf698d",
|
||||
"configHash": "cc60d382",
|
||||
"lockfileHash": "e3b0c442",
|
||||
"browserHash": "e601f541",
|
||||
"optimized": {},
|
||||
"lockfileHash": "22a0e42d",
|
||||
"browserHash": "eed84a77",
|
||||
"optimized": {
|
||||
"echarts": {
|
||||
"src": "../../../../../node_modules/echarts/index.js",
|
||||
"file": "echarts.js",
|
||||
"fileHash": "12ff8916",
|
||||
"needsInterop": false
|
||||
}
|
||||
},
|
||||
"chunks": {}
|
||||
}
|
||||
Loading…
Reference in new issue