Today I'm going to implement the login part of my page, which has several key difficulties.
1. How to realize that the picture is a round border.
We only need to add the style border-radius: 50rpx to the picture; here, define his rounded corner as a height value and the frame will be rounded.
.user-center-card-myphoto{
width: 100rpx;
height: 100rpx;
border-radius: 50rpx;
}
2. How to realize full screen display.
We only need to add it to the page json file that needs to be displayed in full screen. "navigationStyle": "custom"
{
"usingComponents": {
"yd-user-center-card":"./componts/user-center-card"
},
"navigationStyle":"custom"
}
3. How to vertically center the picture and the text
Here in the layout we are more commonly used is the flex box flex, to use the flex box, you must first set an element as a flex container,
display: flex uses flex layout,
justify-content: flex-start; how justify-content is allocated on the main axis The blank space (how the elements on the main axis are arranged) The flex-start elements are arranged along the main axis, that is, if they are left-aligned, the left side will be used up first, and the extra space will be on the right.
align-items: center; how align-items elements are aligned on the auxiliary axis, center is centered, this can make several elements in the horizontal direction vertically centered.
color: #333;
position: relative;
position:relative;: Relative positioning
Based on the original position of the element, adjusting the position of the element according to the set top and left
will not change the page layout, and will not affect the offset of other elements, so it will When no positioning is added to this element, the position is left blank. This function is mainly for fine-tuning some positions.