212 lines
3.6 KiB
Plaintext
212 lines
3.6 KiB
Plaintext
/* 全局css */
|
||
|
||
.TabBar{
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 99999;
|
||
}
|
||
|
||
/* 平铺水平对齐 */
|
||
.flex-con1 {
|
||
display: -webkit-flex;
|
||
display: flex;
|
||
-webkit-justify-content: space-between;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
/* 垂直居中对齐 */
|
||
.flex-con2 {
|
||
display: -webkit-flex;
|
||
display: flex;
|
||
-webkit-align-items: center;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 水平垂直居中 */
|
||
|
||
.flex-con3 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 垂直平铺 */
|
||
.flex-con4 {
|
||
display: -webkit-flex;
|
||
display: flex;
|
||
-webkit-flex-direction: column;
|
||
flex-direction: column;
|
||
}
|
||
/* 水平居中右对齐 */
|
||
.flex-con5{
|
||
display: -webkit-flex;
|
||
display: flex;
|
||
-webkit-flex-direction: row-reverse;
|
||
flex-direction: row-reverse;
|
||
-webkit-align-items: center;
|
||
align-items: center;
|
||
}
|
||
/* 右对齐，盒子底部 */
|
||
.flex-con6{
|
||
display: -webkit-flex;
|
||
display: flex;
|
||
-webkit-flex-wrap: wrap-reverse;
|
||
flex-wrap: wrap-reverse;
|
||
-webkit-flex-direction: row-reverse;
|
||
flex-direction: row-reverse;
|
||
}
|
||
/* 溢出隐藏 */
|
||
.clamp1 {
|
||
display: -webkit-box !important;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
overflow: hidden;
|
||
}
|
||
/* flex布局横向 */
|
||
.dis-flex{
|
||
display: flex;
|
||
}
|
||
/* flex布局纵向 */
|
||
.dis-flex1{
|
||
display: flex;
|
||
flex-flow: column;
|
||
}
|
||
.flex1{
|
||
flex: 1;
|
||
}
|
||
.flex2{
|
||
flex: 2;
|
||
}
|
||
.text-left{
|
||
text-align: left;
|
||
}
|
||
.text-right{
|
||
text-align: right;
|
||
}
|
||
.load-all{
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
.load-bac{
|
||
height: 100%;
|
||
width: 100%;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.clear{
|
||
clear: both;
|
||
}
|
||
|
||
|
||
/* 空列表 */
|
||
.empty {
|
||
height: 600rpx;
|
||
width: 100%;
|
||
text-align: center;
|
||
font-family: PingFang-SC-Medium;
|
||
font-size: 26rpx;
|
||
font-weight: 400;
|
||
font-stretch: normal;
|
||
color: #999;
|
||
}
|
||
|
||
.empty_img {
|
||
width: 116rpx;
|
||
height: 83rpx;
|
||
}
|
||
|
||
/* 固定到底部按钮 */
|
||
.add{
|
||
position: fixed;
|
||
bottom: 0;
|
||
height: 100rpx;
|
||
width: 100%;
|
||
background-image: linear-gradient(
|
||
#1dbf53,
|
||
#1dbf53),
|
||
linear-gradient(
|
||
#2dc44e,
|
||
#2dc44e);
|
||
background-blend-mode: normal,
|
||
normal;
|
||
font-family: PingFang-SC-Medium;
|
||
font-size: 38rpx;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
line-height: 100rpx;
|
||
}
|
||
/* 提交按钮 */
|
||
.sub{
|
||
margin: 90rpx auto 0;
|
||
width: 690rpx;
|
||
height: 100rpx;
|
||
background-image: linear-gradient(
|
||
#1dbf53,
|
||
#1dbf53),
|
||
linear-gradient(
|
||
#2fd152,
|
||
#2fd152);
|
||
background-blend-mode: normal,
|
||
normal;
|
||
border-radius: 50rpx;
|
||
text-align: center;
|
||
line-height: 100rpx;
|
||
font-family: PingFang-SC-Bold;
|
||
font-size: 38rpx;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* 动画 */
|
||
|
||
.live{
|
||
|
||
}
|
||
@keyframes living {
|
||
0%{
|
||
transform: scale(1);
|
||
opacity: 0.5;
|
||
}
|
||
50%{
|
||
transform: scale(1.5);
|
||
opacity: 0; /*圆形放大的同时，透明度逐渐减小为0*/
|
||
}
|
||
100%{
|
||
transform: scale(1);
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
.liveSpan{
|
||
position: absolute;
|
||
width: 128rpx;
|
||
height: 128rpx;
|
||
top: -110rpx;
|
||
left: 6px;
|
||
right: 0;
|
||
background: #21d85c;
|
||
border-radius: 50%;
|
||
-webkit-animation: living 3s linear infinite;
|
||
z-index: -1;
|
||
}
|
||
.liveSpan:nth-child(2){
|
||
-webkit-animation-delay: 1.5s; /*第二个span动画延迟1.5秒*/
|
||
}
|
||
|
||
|
||
@keyframes loading {
|
||
0%{
|
||
transform: scale(0.2);
|
||
opacity: 0.5;
|
||
}
|
||
100%{
|
||
transform: scale(1);
|
||
opacity: 0; /*圆形放大的同时，透明度逐渐减小为0*/
|
||
}
|
||
} |