fzu102201435
/
front
1
0
Fork 4
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

完成了个人主页与信息修改的静态页面

Browse Source
master
zhanxin 4 days ago
parent e3d4cba2ba
commit 557c93d81c
4 changed files with 344 additions and 74 deletions
Show Stats Download Patch File Download Diff File

10
pages.json
Unescape View File

@ -175,13 +175,15 @@
} }
},*/ },*/
/*------------------------------------------------------------------进入主页的过渡界面--------------------------------------------*/ /*------------------------------------------------------------------进入主页的过渡界面--------------------------------------------*/
/*
{ {
"path": "pages/homepages/homes/home/home", "path": "pages/homepages/homes/home/home",
"style": { "style": {
"navigationStyle": "custom" "navigationStyle": "custom"
} }
} }
/
*/
/* { /* {
"path": "pages/homepages/homes/my_recipe_plan/my_recipe_plan", "path": "pages/homepages/homes/my_recipe_plan/my_recipe_plan",
"style": { "style": {
@ -224,12 +226,12 @@
} }
},*/ },*/
/*---------------------------------------------------------------------社区界面------------------------------------------------------*/ /*---------------------------------------------------------------------社区界面------------------------------------------------------*/
/*{ {
"path": "pages/homepages/user/user/user", "path": "pages/homepages/user/user/user",
"style": { "style": {
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}*/ },
/*---------------------------------------------------------------------个人信息界面以及跳转的几个界面----------------------------------------------------*/ /*---------------------------------------------------------------------个人信息界面以及跳转的几个界面----------------------------------------------------*/
/* /*
{ {
@ -470,7 +472,7 @@
}*/ }*/
/*--------------------------------------------------------知识图谱界面----------------------------------------------------------------------*/ /*--------------------------------------------------------知识图谱界面----------------------------------------------------------------------*/
/*-------------------------------------------------------------------部分组件的测试类---------------------------------------------------*/, /*-------------------------------------------------------------------部分组件的测试类---------------------------------------------------*/
{ {
"path": "pages/homepages/homes/my_exercise_plan/my_exercise_plan", "path": "pages/homepages/homes/my_exercise_plan/my_exercise_plan",
"style": { "style": {

154
pages/homepages/user/basic_information/basic_information.vue
Unescape View File

@ -1,6 +1,21 @@
<template> <template>
<view> <view class="background">
<view class="user_head">
<image class="head" src="/static/homepages/user/basic_information/head.png"></image>
<image class="head_pic" src="/static/homepages/user/basic_information/head_pic.png"></image>
<image class="head_but" @click="" src="/static/homepages/user/basic_information/but.png"></image>
</view>
<view class="self_back">
<view class="name">
<image class="user_name_but" @click="" src="/static/homepages/user/basic_information/but.png"></image>
<text class="name_text">puppy</text>
</view>
<view class="self">
<image class="self_but" @click="" src="/static/homepages/user/basic_information/but.png"></image>
<text class="self_write"></text>
</view>
<image class="button" src="/static/homepages/user/basic_information/button.png"></image>
</view>
</view> </view>
</template> </template>
@ -8,10 +23,141 @@
export default { export default {
data() { data() {
return {}; return {};
},
methods:{
navigateTo(page) {
uni.navigateTo({
url: page
});
},
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.background{
</style> background-image: url("/static/homepages/user/basic_information/img.png");
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.self_back{
background-image: url("/static/homepages/user/basic_information/back.png");
background-size: cover;
flex:1;
height: 80vh;
width: 57.3vh;
position: absolute;
bottom:-7%
}
.name{
background-image: url("/static/homepages/user/basic_information/user_name.png");
background-size: cover;
background-position: center;
height: 30vh;
flex:1;
align-items: center;
position: absolute;
height: 10.1vh;
width: 45vh;
right: 10.5%;
bottom: 71%;
}
.self{
background-image: url("/static/homepages/user/basic_information/self_back.png");
background-size: cover;
background-position: center;
height: 20vh;
flex:1;
align-items: center;
position: absolute;
height: 36vh;
width: 45vh;
right: 10.5%;
bottom: 23%;
}
.user_head{
background-image: url("/static/homepages/user/basic_information/user_back.png");
background-size: cover;
flex:1;
height: 30vh;
width: 57.3vh;
position: absolute;
bottom:70%
}
.head{
position: absolute;
height: 55%;
width: 30%;
opacity: 1;
right: 34%; /* 距右边 10% */
bottom: -20%;
z-index: 1;
}
.head_pic{
position: absolute;
height: 50%;
width: 25%;
opacity: 1;
right: 36.7%; /* 距右边 10% */
bottom: -10%;
z-index: 1;
}
.head_but{
position: absolute;
height: 14%;
width: 7%;
opacity: 1;
right: 34%; /* 距右边 10% */
bottom: -17%;
z-index: 1;
}
.user_name_but{
position: absolute;
height: 47%;
width: 10%;
opacity: 1;
right: 3%; /* 距右边 10% */
bottom: 30%;
}
.name_text{
position: absolute;
font-size: 1.4em;
text-align: center;
width: 100%;
height: 20%;
top: 17%;
color:#000000;
font-weight: bold;
}
.self_but{
position: absolute;
height: 13%;
width: 10%;
opacity: 1;
right: 3%; /* 距右边 10% */
bottom: 3%;
}
.self_write{
position: absolute;
font-size: 1em;
text-align: center;
width: 100%;
height: 20%;
top: 4%;
color:#000000;
}
.button{
position: absolute;
height: 10%;
width: 37%;
opacity: 1;
right: 31%; /* 距右边 10% */
bottom: 11%;
}
</style>

246
pages/homepages/user/user/user.vue
Unescape View File

@ -1,77 +1,199 @@
<template> <template>
<view> <view class="background">
<text>这个是User界面</text> <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>
<!-- ECharts 图表 --> <image class="bmi_button" src="../../../../static/homepages/user/user/bmi_button.png"></image>
<view style="width: 100%; height: 400px;"> <image class="eat_button" src="../../../../static/homepages/user/user/eat_button.png"></image>
<canvas ref="myChart" style="width: 100%; height: 100%;"></canvas> <image class="ad_button" src="../../../../static/homepages/user/user/ad_button.png"></image>
</view> <image class="button" src="../../../../static/homepages/user/user/button.png"></image>
<image class="point" src="../../../../static/homepages/user/user/point.png"></image>
<tarbar_user></tarbar_user> <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> </view>
</template> </template>
<script> <script>
import * as echarts from 'echarts';
export default { export default {
data() { data() {
return {}; return {};
}, },
onReady() { methods:{
this.initChart(); navigateTo(page) {
}, uni.navigateTo({
methods: { url: page
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">
/* 添加样式 */ .background{
</style> 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>

8
unpackage/dist/cache/.vite/deps/_metadata.json vendored
Unescape View File

@ -1,8 +1,8 @@
{ {
"hash": "0aaf698d", "hash": "48f6c93b",
"configHash": "cc60d382", "configHash": "badd50c8",
"lockfileHash": "22a0e42d", "lockfileHash": "e3b0c442",
"browserHash": "89d9bfb2", "browserHash": "debd2ea0",
"optimized": {}, "optimized": {},
"chunks": {} "chunks": {}
} }
Write Preview
Loading…
Cancel
Save