1. Introduction
applet my page
2. Software environment
2.1 WeChat Developer Tools
3. Main process
3.1 Build html structure
<view class="container_full">
<view class="user_information">
<view class="user_img">
<image src="https://profile.csdnimg.cn/4/F/8/1_qq_45179361" mode="" />
</view>
<view class="user_name">
jiajun
</view>
</view>
<view class="user_competition">
<view class="competition_order">
<view class="competition_order_left">
我的竞赛
</view>
<view class="competition_order_right">
<view>
全部竞赛
</view>
<image src="https://lowcode-3gzggxse31702e14-1253226562.tcloudbaseapp.com/resources/2021-06/lowcode-4206" alt="" class="news_img" />
</view>
</view>
<view class="competition_message">
<navigator url="" class="competition_message_item" hover-class="none">
<view class="competition_message_item_img">
<image src="../../images/user/application.png" mode="" />
</view>
<view class="competition_message_item_text">
待报名
</view>
</navigator>
<navigator url="" class="competition_message_item" hover-class="none">
<view class="competition_message_item_img">
<image src="../../images/user/commit.png" mode="" />
</view>
<view class="competition_message_item_text">
待提交
</view>
</navigator>
<navigator url="" class="competition_message_item" hover-class="none">
<view class="competition_message_item_img">
<image src="../../images/user/result.png" mode="" />
</view>
<view class="competition_message_item_text">
结果
</view>
</navigator>
<navigator url="" class="competition_message_item" hover-class="none">
<view class="competition_message_item_img">
<image src="../../images/user/comment.png" mode="" />
</view>
<view class="competition_message_item_text">
评价
</view>
</navigator>
</view>
</view>
<view class="user_function">
<navigator url="" class="user_function_item" hover-class="none">
<view class="competition_order">
<view class="competition_order_left">
课程表
</view>
<view class="competition_order_right">
<view>
</view>
<image src="https://lowcode-3gzggxse31702e14-1253226562.tcloudbaseapp.com/resources/2021-06/lowcode-4206" alt="" class="news_img" />
</view>
</view>
</navigator>
<navigator url="" class="user_function_item" hover-class="none">
<view class="competition_order">
<view class="competition_order_left">
备忘录
</view>
<view class="competition_order_right">
<view>
</view>
<image src="https://lowcode-3gzggxse31702e14-1253226562.tcloudbaseapp.com/resources/2021-06/lowcode-4206" alt="" class="news_img" />
</view>
</view>
</navigator>
<navigator url="" class="user_function_item" hover-class="none">
<view class="competition_order">
<view class="competition_order_left">
学习课程
</view>
<view class="competition_order_right">
<view>
</view>
<image src="https://lowcode-3gzggxse31702e14-1253226562.tcloudbaseapp.com/resources/2021-06/lowcode-4206" alt="" class="news_img" />
</view>
</view>
</navigator>
<navigator url="" class="user_function_item" hover-class="none">
<view class="competition_order">
<view class="competition_order_left">
绩点计算
</view>
<view class="competition_order_right">
<view>
</view>
<image src="https://lowcode-3gzggxse31702e14-1253226562.tcloudbaseapp.com/resources/2021-06/lowcode-4206" alt="" class="news_img" />
</view>
</view>
</navigator>
</view>
<view class="user_help">
<navigator url="" class="user_function_item" hover-class="none">
<view class="competition_order">
<view class="competition_order_left">
帮助
</view>
<view class="competition_order_right">
<view>
</view>
<image src="https://lowcode-3gzggxse31702e14-1253226562.tcloudbaseapp.com/resources/2021-06/lowcode-4206" alt="" class="news_img" />
</view>
</view>
</navigator>
<navigator url="" class="user_function_item" hover-class="none">
<view class="competition_order">
<view class="competition_order_left">
客服
</view>
<view class="competition_order_right">
<view>
</view>
<image src="https://lowcode-3gzggxse31702e14-1253226562.tcloudbaseapp.com/resources/2021-06/lowcode-4206" alt="" class="news_img" />
</view>
</view>
</navigator>
</view>
</view>
3.2 Add css style
.container_full {
width: 100%;
height: 100vh;
padding-left: 15px;
padding-right: 15px;
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #f2f4f8;
}
.user_information {
margin-top: 16px;
margin-bottom: 16px;
margin-left: 16px;
display: flex;
flex-direction: row;
}
.user_img {
}
.user_img image {
width: 60px;
height: 60px;
border-radius: 50%;
}
.user_name {
height: 60px;
line-height: 60px;
margin-left: 20px;
}
.user_competition {
display: flex;
flex-direction: column;
background-color: #fff;
border-radius: 16rpx 16rpx 0 0;
height: 130px;
margin-bottom: 12px;
}
.competition_order {
display: flex;
flex-direction: row;
height: 48px;
line-height: 24px;
padding: 12px 9px 12px 16px;
}
.competition_order_right {
display: flex;
flex-direction: row;
font-size: 24rpx;
color: #666;
line-height: 24px;
}
.competition_order_right image {
width: 18px;
height: 18px;
display: inline-block;
position: static;
margin-top: 3px;
margin-left: 4px;
}
.competition_order_left {
width: 146px;
line-height: 24px;
}
.competition_order_right view {
width: 146px;
text-align: right;
}
.competition_message {
width: 100%;
height: 82px;
display: flex;
flex-direction: row;
}
.competition_message_item {
width: 25%;
text-align: center;
font-size: 24rpx;
color: #666;
line-height: 32rpx;
}
.competition_message_item_img image {
height: 28px;
width: 28px;
margin-bottom: 10px;
}
.user_function {
background-color: #fff;
border-radius: 16rpx 16rpx 0 0;
margin-bottom: 10px;
}
.user_function_item {
display: flex;
flex-direction: row;
height: 48px;
line-height: 24px;
}
.user_function_item image{
width: 18px;
height: 18px;
display: inline-block;
position: static;
margin-top: 3px;
margin-left: 4px;
}
.user_function_item_text {
width: 146px;
line-height: 24px;
}
.user_function_item_img view {
width: 146px;
text-align: right;
}
.user_function_item_img image {
width: 18px;
height: 18px;
display: inline-block;
position: static;
margin-top: 3px;
margin-left: 4px;
}
.user_help {
background-color: #fff;
border-radius: 16rpx 16rpx 0 0;
margin-bottom: 10px;
}
3.3 js code
3.4 Page display
