MP-zxs/pages/indexPages/workGuide/workGuide.wxss

/* pages/indexPages/workGuide/workGuide.wxss */
.background {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.background>image {
    width: 100%;
    height: auto;
}

.tips {
    padding: 0 50rpx;
    width: 100%;
    height: 200rpx;
    font-family: "苹方R";
    font-size: 48rpx;
    color: #6392FF;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
}

.tip {
    padding: 0 26rpx;
    margin: 0 50rpx;
    width: calc(100% - 100rpx);
    height: 70rpx;
    line-height: 70rpx;
    font-family: "苹方R";
    font-size: 28rpx;
    color: #FFFFFF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #306efd;
    border-radius: 16rpx;
    box-sizing: border-box;
}

.guide-container {
    padding: 26rpx 0;
    margin: 0 50rpx;
    width: calc(100% - 100rpx);
    height: calc(100vh - 450rpx);
    background: #ffffff;
    border-radius: 16rpx;
    box-sizing: border-box;
}

.lists {
    width: 100%;
    height: calc(100% - 170rpx);
}

.list {
    padding: 20rpx;
    margin: 0 26rpx 36rpx 26rpx;
    width: calc(100% - 52rpx);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15rpx;
    background: linear-gradient(180deg, #dce4fd, #ebf0fe 51%, #e4ebff);
    box-sizing: border-box;
}

.list>.index {
    width: 15rpx;
    height: 15rpx;
    background: #306efd;
    border-radius: 50%;
}

.list>.content {
    margin: 0 20rpx;
    width: 0;
    flex: 1;
}

.list>.content>.title {
    font-family: "苹方M";
    font-size: 28rpx;
    color: #2C3579;
}

.list>.content>.introduce {
    padding-top: 10rpx;
    font-family: "苹方R";
    font-size: 26rpx;
    color: #2C3579;
}

.list>.look {
    width: 80rpx;
    height: 80rpx;
    background: linear-gradient(180deg, #87a4f9, #678dfa);
    border-radius: 50%;
    font-family: "苹方R";
    font-size: 24rpx;
    color: #FFFFFF;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
}


.list-tip {
    padding: 26rpx 26rpx 0 26rpx;
    width: 100%;
    height: 134rpx;
    box-sizing: border-box;
}

.list-tip>view {
    line-height: 36rpx;
    font-family: "苹方R";
    font-size: 24rpx;
    color: #FF0000;
}

.toHandle {
    margin: auto;
    margin-top: 40rpx;
    width: calc(100% - 100rpx);
    height: 80rpx;
    font-family: "苹方M";
    font-size: 36rpx;
    color: #FFFFFF;
    background: #FF9200;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.active {
    opacity: 0.6;
}