微信小程序时间轴demo_微信小程序-时间轴 - osc_3xz91vxi的个人空间 - OSCHINA - 中文开源技术交流社区...

page{

width: 100%;

height: 100%;

overflow-x: hidden;

}

.class{

padding: 152rpx 2.5% 2.5% 2.5%;

}

.all{

width: 100%;

display: flex;

flex-wrap:nowrap;

justify-content: space-between;

}

.left{

width: 50%;

/* height: 320rpx; */

text-align: right;

display: flex;

flex-wrap: wrap;

color: #00a6ed;

}

.center{

width: 0rpx;

/* height: 320rpx; */

background: #fff;

border: 2rpx #ccc dashed;

display:table-cell;

vertical-align:bottom;

}

.topText{

font-size: 40rpx;

color: #000;

position: absolute;

top:20rpx;

left: 30rpx;

}

.right{

width: 41.5%;

/* height:320rpx; */

}

.round{

width: 60rpx;

height: 60rpx;

border-radius: 50%;

background: #00a6ed;

}

.M{

position: relative;

top: 10rpx;

margin-left:5rpx;

}

.left_text{

display: flex;

flex-direction: row;

justify-content: right;

text-align: right;

}

.left_pad{

display: flex;

flex-direction: row;

justify-content: center;

width: 80%;

height: 85rpx;

line-height: 85rpx;

font-size: 34rpx;

border-radius: 10rpx;

margin-bottom: 17rpx;

text-align: right;

position: relative;

right:-74rpx;

top: -21rpx;

}

.right_pad{

display: flex;

flex-wrap:wrap;

justify-content: space-around;

width: 198rpx;

background: #53535323;

height: 50rpx;

color: #535353;

line-height: 50rpx;

margin-top: 25rpx;

font-size: 24rpx;

border-radius: 10rpx;

margin-bottom: 17rpx;

text-align: right;

position: relative;

left: -25rpx;

}

.round_top{

width: 60rpx;

height: 60rpx;

border-radius: 50%;

background: #00a6ed;

position: relative;

left: -4.55%;

top: -18rpx;

}

.round_bottom{

width: 112rpx;

height: 112rpx;

line-height: 112rpx;

color: #fff;

border-radius: 50%;

font-size: 28rpx;

background: #00a6ed;

opacity: 0.4;

text-align: center;

position: relative;

left: 301rpx;

top: 3rpx;

/* margin: 0 auto; */

/* box-shadow: 0rpx 0rpx 28rpx 14rpx rgba(0,166,237,0.6); */

}

.round_bottom_w{

width: 84rpx;

height: 84rpx;

line-height: 84rpx;

color: #fff;

border-radius: 50%;

font-size: 28rpx;

background: #00a6ed;

opacity: 1;

text-align: center;

display: table-cell;

vertical-align: middle;

position: relative;

left: 314rpx;

top: -96rpx;

/* box-shadow: 0rpx 0rpx 28rpx 14rpx rgba(0,166,237,0.6); */

}