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>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<text>这个是User界面</text>
|
<text>这个是User界面</text>
|
||||||
|
|
||||||
|
<!-- ECharts 图表 -->
|
||||||
|
<view style="width: 100%; height: 400px;">
|
||||||
|
<canvas ref="myChart" style="width: 100%; height: 100%;"></canvas>
|
||||||
|
</view>
|
||||||
|
|
||||||
<tarbar_user></tarbar_user>
|
<tarbar_user></tarbar_user>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {};
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
/* 添加样式 */
|
||||||
</style>
|
</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",
|
"configHash": "cc60d382",
|
||||||
"lockfileHash": "e3b0c442",
|
"lockfileHash": "22a0e42d",
|
||||||
"browserHash": "e601f541",
|
"browserHash": "eed84a77",
|
||||||
"optimized": {},
|
"optimized": {
|
||||||
|
"echarts": {
|
||||||
|
"src": "../../../../../node_modules/echarts/index.js",
|
||||||
|
"file": "echarts.js",
|
||||||
|
"fileHash": "12ff8916",
|
||||||
|
"needsInterop": false
|
||||||
|
}
|
||||||
|
},
|
||||||
"chunks": {}
|
"chunks": {}
|
||||||
}
|
}
|
||||||
Loading…
Reference in new issue