gov_propagandize/pages/index/index.wxss

/**index.wxss**/

.text-expansion {
    display: flex;
}

.text-expansion__text {
    position: relative;
    overflow: hidden;
    line-height: 1.5;
    font-size: 20rpx;
    color: #6F6F6F;
    text-align: justify;
    max-height: calc(3em * 1.5);
}

.text-expansion__text::before {
    content: "";
    float: right;
    height: 100%;
    margin-bottom: calc(3em - 1.5em - 3em);
}

.text-expansion__text::after {
    content: '';
    width: 100vw;
    height: 100vh;
    position: absolute;
    box-shadow: inset calc(120rpx - 100vw) calc(1.45em - 100vh) 0 0 #FFFFFF;
    margin-left: -120rpx;
}

.text-expansion__button {
    position: relative;
    font-size: 20rpx;
    color: #256742;
    float: right;
    font-weight: 400;
    clear: both;
    line-height: 2em;
}

.text-expansion__button::before {
    content: '...';
    margin-right: 8rpx;
}

.text-expansion__button::after {
    content: '';
    font-size: 16rpx;
    display: inline-block;
    margin-bottom: 2rpx;
    margin-left: 4rpx;
    transition: transform 0.3s;
}

.text-expansion__text--expand {
    max-height: none;
}

.text-expansion__text--expand::after {
    visibility: hidden;
}

.text-expansion__text--expand .text-expansion__button::before {
    visibility: hidden;
}

.text-expansion__text--expand .text-expansion__button::after {
    transform: rotate(180deg);
}

/***********/
.scrollarea {
    flex: 1;
    overflow-y: hidden;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.scrollX {
    width: 100vw;
    padding-bottom: 10rpx;
}


.superiority-item {
    display: flex;
    flex-direction: column;
    position: relative;
}

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

.superiory-txt {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.49);
    width: 100%;
    text-align: center;
    font-size: 20rpx;
    color: white;
    border-bottom-left-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
}

.superiory-icon {
    width: 257rpx;
    height: 167rpx;
    border-radius: 10rpx;
}


.scrollX-nowrap {
    width: 100vw;
    flex-wrap: nowrap;
    white-space: nowrap;
}



.invest-title {
    display: flex;
    flex-direction: row;
    align-items: center;
}


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

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

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

.tab-select {
    font-size: 20rpx;
    color: white;
    background-color: #256742;
    text-align: center;
    background: #256742;
    border-radius: 17rpx;
    padding: 5rpx 15rpx;
    white-space: nowrap;
}

.tab-select image {
    width: 24rpx;
    height: 24rpx;
    display: "";
    margin-left: 10rpx;
}

.tab-normal {
    font-size: 20rpx;
    color: #3F3F3F;
    background: #EAEAEA;
    text-align: center;
    border-radius: 17rpx;
    padding: 5rpx 30rpx;
    white-space: nowrap;
}

.tab-normal image {
    width: 24rpx;
    height: 24rpx;
    margin-left: 10rpx;
    display: none;
}

.invest-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 20rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #303030;
    line-height: 40rpx;
    text-indent: 2em;
}
.invest-box{
    display: flex;
    flex-direction: column;
    flex: content;
    justify-content: center;
    align-items: flex-start;
}

.slider-bar-box {
    width: 40px;
    height: 5px;
    background-color: #CDCDCD;
    border-radius: 2.5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    align-self: center;
}

.slider-bar {
    height: 5px;
    background-color: #256742;
    border-radius: 2.5px;
}

.desc-title {
    margin-top: 39rpx;
    font-weight: 400;
    font-size: 40rpx;
    color: #303030;
    line-height: 27rpx;
}

.sheet-title-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 40rpx;
}

.picker {
    width: 100vw;
    height: 300rpx;
}

.picker-item {
    line-height: 30px;
    text-align: center;
}

.title {
    font-size: 35rpx;
}

.cancel {
    font-size: 30rpx;
    color: crimson;
}

.confirm {
    font-size: 30rpx;
    color: #256742;
}

/* .superiority-title-box {
    display: flex;
    flex-direction: row;
    align-items: center;
} */

/* .superiority-title-box image {
    width: 40rpx;
    height: 40rpx;
} */

/* .superiority-title-box text {
    margin-left: 20rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 27rpx;
    color: #303030;
} */

.superiority-content {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    min-height: 120rpx;
}

.superiority-content .item {
    width: 150rpx;
    height: 150rpx;
}

.chance-title-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
}

/* .chance-title-box .more {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24rpx;
    color: #434343;
} */

.chance-item-box {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #E8FFF2 0%, #E8FFF2 100%);
    padding: 28rpx;
    border-radius: 5rpx;
}

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

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

.chance-item-title .title {
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 24rpx;
    color: #303030;
    overflow: hidden;
    /* 超出部分隐藏 */
    white-space: nowrap;
    /* 文本不换行 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
}

.chance-item-attrs {
    background: #FFFFFF;
    border-radius: 13rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 10rpx;
}

.chance-attr {
    display: flex;
    flex-direction: column;
    padding: 20rpx;
}

.chance-attr .title {
    font-size: 16rpx;
    color: #757575;
}

.chance-attr .content {
    font-size: 24rpx;
    margin-top: 10rpx;
    color: #F99E00;
}

.divide-line {
    width: 1rpx;
    height: 33rpx;
    background: rgba(204, 226, 214, 0.35);
}

.chance-item-content {
    font-family: STZhongsong;
    font-weight: 400;
    font-size: 16rpx;
    color: #8E8E8E;
    margin-top: 10rpx;
}

.chance-item-title .more {
    width: 107rpx;
    height: 36rpx;
    background: linear-gradient(0deg, #F99E00 0%, #FF8282 100%);
    border-radius: 3rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 16rpx;
    color: #FFFFFF;
    text-align: center;
    line-height: 36rpx;
}

.desc-video {
    width: 100%;
    height: 370rpx;
    border-radius: 10rpx;
}

.desc-content {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 20rpx;
    color: #6F6F6F;
}

.desc-tag-box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 39rpx;
    margin-bottom: 30rpx;
}


.desc-tag {
    background: rgba(41, 176, 98, 0.08);
    border-radius: 13rpx;
    padding: 15rpx 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

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

.desc-tag image {
    width: 28rpx;
    height: 28rpx;
}

.desc-tag text {
    font-size: 16rpx;
    color: #256742;
    margin-left: 6rpx;
}


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

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

.statistics-title image {
    width: 40rpx;
    height: 40rpx;
}

.statistics-title text {
    font-size: 24rpx;
    color: black;
    margin-left: 11rpx;
}

.statistics-term {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: black;
    font-size: 24rpx;
    width: 130rpx;
    text-align: center;
    height: 45rpx;
    line-height: 45rpx;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 22rpx;
}

.statistics-term-arrow {
    width: 40rpx;
    height: 40rpx;
}

.statistics-content-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    padding: 10rpx;
}

.statistics-content-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin: 30rpx 0rpx;
    align-items: center;
}

.statistics-content-item-title {
    flex: 0.3;
    text-align: end;
    font-size: 24rpx;
}

.statistics-content-item-content {
    flex: 0.8;
    margin-left: 20rpx;
    font-size: 20rpx;
    height: 30rpx;
    background-color: #F0F0F0;
    margin-right: 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 6rpx;
    padding: 0rpx 5rpx;
    position: relative;
}

.statistics-content-item-content .progress {
    height: 15rpx;
    border-radius: 6rpx;
}

.statistics-content-item-content .text {
    font-family: FZZhengHeiS-EB-GB;
    font-size: 24rpx;
    color: #CB3232;
    font-style: italic;
    text-align: end;
    margin-right: 5rpx;
    font-weight: bold;
    position: absolute;
    right: 0px;
}

.right-more-bg {
    background: #E7E7E7;
    font-weight: 500;
    align-self: flex-end;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 5rpx 10rpx;
    border-radius: 15rpx;
    align-items: center;
}

.right-more-bg .icon {
    width: 20rpx;
    height: 20rpx;
    margin-left: 5rpx;
}

.right-more-bg .txt {
    font-size: 16rpx;
    color: #256742;
    text-align: center;
}

.statistics-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20rpx 34rpx;
    background-image: url('data:image/png;base64,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
}