可以将以下样式定义在app.wxss文件中,方便随时调用。
卡片样式
.app-card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 10rpx;
background-color: #fff;
}
.app-card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
Grid(宫格)样式
.grid-content {
display: flex;
flex-direction: row;
flex-flow: wrap;
align-content: flex-start;
}
去除按钮背景边框样式
button {
background: initial;
padding: 0px;
line-height: 30rpx;
}
button:focus {
outline: 0;
}
button::after {
border: none;
}
常用的flex容器样式
.column-content {
display: flex;
flex-direction: column;
}
.row-content {
display: flex;
flex-direction: row;
}
.justify-center-content {
justify-content: center;
}
.align-items-center-content {
align-items: center;
}
.flex-grow-content {
display: flex;
flex-grow: 1;
}