ts_aimz/pages/index/index.wxss

.bg-title {
    background-image: url('https://c-ssl.dtstatic.com/uploads/item/201907/12/20190712111036_Pa8jf.thumb.1000_0.jpeg');
}

.content-box {
    display: flex;
    flex-direction: column;
    padding: 20rpx;
    margin-top: -50rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    border-radius: 10rpx;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(206, 206, 206, 0.4);
}

.container-title {
    display: flex;
    flex-direction: column;
    height: 80px;
}

.title-func {
    display: flex;
    flex-direction: row;
}

.create-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex: 2.5;
    background-color: #FFE5BC;
    color: #550101;
    border-radius: 10rpx;
    text-align: center;
}

.create-btn:active {
    background-color: #ffe5bc79;
}

.buy-btn {
    margin-left: 20rpx;
    line-height: 78px;
    width: 80px;
    height: 78px;
    border-radius: 4px;
    background-color: rgba(78, 175, 121, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    text-align: center;
    font-family: PingFangSC-regular;
}

.buy-btn:active {
    background-color: rgba(78, 175, 121, .3);
}

.notice-box {
    background-color: #FFE5BC;
    margin-top: 20rpx;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 5px 10px;
}

.notice-box .icon {
    width: 20px;
    height: 20px;
}

.notice-box .txt {
    height: 20px;
    line-height: 17px;
    color: rgba(85, 0, 0, 1);
    font-size: 12px;
    text-align: left;
    line-height: 20px;
    font-family: PingFangSC-light;
    margin-left: 15px;
}

.container-box {
    display: flex;
    flex-direction: column;
    margin-top: 20rpx;
}

.list-title-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.list-title-txt {
    line-height: 23px;
    color: rgba(16, 16, 16, 1);
    font-size: 16px;
    font-family: TaipeiHei-bold;
    font-weight: bold;
}

.list-title-btns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 28rpx;
    text-align: center;

}

.btn-select {
    line-height: 20px;
    background-color: rgba(244, 206, 152, 0.18);
    color: rgba(233, 157, 66, 1);
    font-size: 14px;
    text-align: center;
    padding: 5px;
    border: 1px solid rgba(244, 206, 152, 0.18);
}

.btn-normal {
    line-height: 20px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    border: 1px solid rgba(248, 248, 248, 1);
    padding: 5px;
}

.list-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.tab-select {
    white-space: nowrap;
    line-height: 17px;
    border-radius: 2px;
    background-color: rgba(255, 226, 168, 0.57);
    color: rgba(93, 57, 0, 1);
    font-size: 12px;
    text-align: center;
    padding: 2px 5px;
}

.tab-normal {
    line-height: 17px;
    border-radius: 2px;
    background-color: rgba(248, 248, 248, 1);
    color: rgba(154, 154, 154, 1);
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    padding: 2px 5px;
}

.item-margin {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.item-margin:nth-of-type(n+2) {
    margin-left: 20rpx;
}

/* list */
.list-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.list-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #F7F7F7;
    border-radius: 2px;
    padding: 5px;
}

.list-item:nth-of-type(n+2) {
    margin-top: 20rpx;
}

.item-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.item-img .cover {
    width: 95px;
    height: 68px;
    border-radius: 2px;
}

.item-img-status {
    background-color: #AFE5C7;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 95px;
    font-size: 24rpx;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

.item-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    height: 68px;
    padding-left: 16px;
    width: 90vw;
}

.item-content-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


.project-name {
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: left;
    font-weight: bold;
    flex: 1;
}

.project-status {
    font-size: 30rpx;
    color: black;
    font-weight: 200;
    flex: 1;
    padding-left: 5px;
}

.item-content-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.project-aff {
    color: #4f4f4f;
    margin-top: 2px;
    font-size: 13px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.project-aff .icon {
    width: 14px;
    height: 14px;
}

.project-aff .txt {
    text-align: left;
    margin-left: 3px;
}

.project-btns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 57vw;
}

.project-create-time {
    font-size: 26rpx;
    color: #4f4f4f;
}

.project-btn {
    font-size: 28rpx;
    background-color: #FE9944;
    color: white;
    padding: 8rpx 30rpx 8rpx 30rpx;
    border-radius: 10rpx;
}

.project-btn-no {
    font-size: 28rpx;
    background-color: rgba(239, 239, 239, 1);
    color: white;
    padding: 8rpx 30rpx 8rpx 30rpx;
    border-radius: 10rpx;
}

.project-btn:active {
    background-color: #fe994479;
}