popularize-front/common.scss

// 文字益处处理
.text-ellipsis{
	overflow:hidden; //超出的文本隐藏
	text-overflow:ellipsis; //溢出用省略号显示
	white-space:nowrap; //溢出不换行
}
.text-ellipsis-2{
	overflow: hidden;
	text-overflow: ellipsis;
	display:-webkit-box; //作为弹性伸缩盒子模型显示。
	-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
	-webkit-line-clamp:2; //显示的行
}
.text-ellipsis-3{
	overflow: hidden;
	text-overflow: ellipsis;
	display:-webkit-box; //作为弹性伸缩盒子模型显示。
	-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
	-webkit-line-clamp:3; //显示的行
}


.share{
	padding: 0;
	margin: 0;
	background-color: #fff;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	font-size: 26rpx;
}
.share::after{
	border: none;
	padding: 0;
	margin: 0;
	width: 0;
	height: 0;
}

.head-box {
    background: url('@/static/image/nav-bg.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 534rpx;
    position: absolute;
}

.contentPosition_ {
    position: absolute;
    width: 100%;
    color: #fff;
    padding-top: calc(var(--status-bar-height) + 100rpx);
}

.cardStyle_ {
    display: flex;
    padding: 24rpx 35rpx;
    background: $uni-color-card-background;
    .left {
        width: 228rpx;
        height: 228rpx;
        border-radius: 20rpx;
        overflow: hidden;
        image {
            width: 100%;
            height: 100%;
        }
    }
    .right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            margin-left: 26px;
            color: $uni-text-color-grey;
            font-size: 24rpx;
            .detailed {
                .title {
                    font-size: 32rpx;
                    color: #fff;
                    padding-top: 11rpx;
					width: 380rpx;
					// overflow:hidden; //超出的文本隐藏
					// text-overflow:ellipsis; //溢出用省略号显示
					// white-space:nowrap; //溢出不换行
					
					overflow: hidden;
					text-overflow: ellipsis;
					display:-webkit-box; //作为弹性伸缩盒子模型显示。
					-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
					-webkit-line-clamp:2; //显示的行
                }
                .date {
                    padding: 25rpx 0 19rpx;
                    display: flex;
                    align-items: center;
                    &::before {
                        content: '';
                        display: block;
                        background: url('@/static/image/cart/timeIcon.png') no-repeat;
                        background-size: 100% 100%;
                        width: 24rpx;
                        height: 24rpx;
                        margin-right: 10rpx;
						flex-shrink: 0;
                    }
                }
                .emil {
                    padding: 25rpx 0 19rpx;
                    display: flex;
                    align-items: center;
      //               &::before {
      //                   content: '';
      //                   display: block;
      //                   background: url('@/static/image/cart/timeIcon.png') no-repeat;
      //                   background-size: 100% 100%;
      //                   width: 24rpx;
      //                   height: 24rpx;
      //                   margin-right: 10rpx;
						// flex-shrink: 0;
      //               }
                }
                .address {
                    display: flex;
                    align-items: center;
					width: 360rpx;
					overflow:hidden; //超出的文本隐藏
					text-overflow:ellipsis; //溢出用省略号显示
					white-space:nowrap; //溢出不换行
                    &::before {
                        content: '';
                        display: block;
                        background: url('@/static/image/cart/addressIcon.png') no-repeat;
                        background-size: 100% 100%;
                        width: 22rpx;
                        height: 26rpx;
                        margin-right: 10rpx;
						flex-shrink: 0;
                    }
                }
            }
            .price {
                font-size: 28rpx;
                color: #fff;
                text-align: right;
                text {
                    color: $uni-text-color-grey;
                    font-size: 25rpx;
                    padding-right: 10rpx;
                }
            }
        }
}
.fixedBtn {
    position: fixed;
    bottom: 0;
    width: 100%;
    /deep/.uv-button-wrapper {
        padding: 65rpx 35rpx;
    }
}

.cardBackground_ {
    background: url('data:image/png;base64,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
    background-size: contain;
    width: 100%;
    .grayBg {
        background-color: $uni-color-card-background;
        border-radius: 26rpx;
        padding: 24rpx 35rpx;
    }
}