uni-halo/common/styles/app.base.scss

// 全局css基础样式

.card-shadow {
	box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.08);
}
.bg-white {
	background-color: #fff;
}
.load-text {
	padding: 0 0 20rpx 0;
	text-align: center;
	color: #999;
	font-size: 24rpx;
}
.e-fixed {
	position: fixed;
	left: 0;
	/* #ifndef H5 */
	top: 0;
	/* #endif */
	/* #ifdef H5 */
	top: 88rpx;
	/* #endif */
	right: 0;
	z-index: 6;
}
.e-loading-icon {
	animation: eLoading 0.8s linear infinite;
}

@keyframes eLoading {
	0% {
		transform: rotateZ(0deg);
	}
	100% {
		transform: rotateZ(360deg);
	}
}

// 自定义广告

.ad-card {
	position: relative;
	box-sizing: border-box;
	padding: 24rpx;
	box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
	background-color: #ffffff;
	border-radius: 12rpx;

	&.is-lr {
		display: flex;
		.ad-card_tip {
			top: initial;
			left: 288rpx;
			bottom: 24rpx;
			// right: 160rpx;
			padding: 4rpx 20rpx;
			background-color: transparent;
			border: 2rpx solid #607d8b;
			color: #607d8b;
		}
		.ad-card_cover {
			width: 240rpx;
			height: 180rpx;
			animation: adLinkAni 1s ease-in-out infinite;
		}
		.ad-card_info {
			width: 0;
			flex-grow: 1;
			padding-left: 24rpx;
			&-title {
				margin-top: 0;
				width: 100%;
				font-size: 30rpx;
			}
			&-link {
				top: initial;
				// right: 150rpx;
				bottom: 0;
				transform: scale(1);
			}
		}
	}

	&_tip {
		position: absolute;
		left: 36rpx;
		top: 36rpx;
		display: inline-flex;
		box-sizing: border-box;
		border-radius: 6rpx;
		padding: 4rpx 10rpx;
		background-color: rgba(0, 0, 0, 0.3);
		color: #ffffff;
		font-size: 24rpx;
		z-index: 2;
	}
	&_cover {
		width: 100%;
		height: 300rpx;
		border-radius: 6rpx;
	}
	&_info {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		position: relative;
		&-title {
			width: calc(100% - 120rpx);
			font-size: 28rpx;
			font-weight: bold;
			margin-top: 8rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: #333;
		}
		&-desc {
			margin-top: 6rpx;
			font-size: 24rpx;
			color: #616161;
			line-height: 1.8;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}
		&-link {
			position: absolute;
			right: 0;
			top: 6rpx;
			display: inline-flex;
			box-sizing: border-box;
			border-radius: 6rpx;
			padding: 4rpx 10rpx;
			border: 2rpx solid #03a9f4;
			color: #03a9f4;
			font-size: 24rpx;
			transform: scale(0.93);
			// animation: adLinkAni 0.8s ease-in-out infinite;
		}
	}
}
@keyframes adLinkAni {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.02);
	}
	100% {
		transform: scale(1);
	}
}

/* 文本省略样式 开始 */
.text-sub-one {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 多行文本省略 */
@for $i from 2 through 30 {
	.text-sub-more-#{$i} {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: $i;
		overflow: hidden;
	}
}

/* 文本省略样式 结束 */

.box-border{
	box-sizing: border-box;
}

// 定义尺寸变量（单位：rpx）
$spacing-sizes: (
        0: 0,
        2: 4rpx,
        4: 8rpx,
        8: 16rpx,
        12: 24rpx,
        24: 48rpx,
        48: 96rpx
);

// 内边距类
@each $name, $size in $spacing-sizes {
  // 全方向内边距：p-{size}
  .uh-p-#{$name} {
    padding: $size !important;
  }

  // 水平方向内边距：px-{size}
  .uh-px-#{$name} {
    padding-left: $size !important;
    padding-right: $size !important;
  }

  // 垂直方向内边距：py-{size}
  .uh-py-#{$name} {
    padding-top: $size !important;
    padding-bottom: $size !important;
  }

  // 上内边距：pt-{size}
  .uh-pt-#{$name} {
    padding-top: $size !important;
  }

  // 右内边距：pr-{size}
  .uh-pr-#{$name} {
    padding-right: $size !important;
  }

  // 下内边距：pb-{size}
  .uh-pb-#{$name} {
    padding-bottom: $size !important;
  }

  // 左内边距：pl-{size}
  .uh-pl-#{$name} {
    padding-left: $size !important;
  }
}

//外边距工具类
@each $name, $size in $spacing-sizes {
  // 全方向外边距：m-{size}
  .uh-m-#{$name} {
    margin: $size !important;
  }

  // 水平方向外边距：mx-{size}
  .uh-mx-#{$name} {
    margin-left: $size !important;
    margin-right: $size !important;
  }

  // 垂直方向外边距：my-{size}
  .uh-my-#{$name} {
    margin-top: $size !important;
    margin-bottom: $size !important;
  }

  // 上外边距：mt-{size}
  .uh-mt-#{$name} {
    margin-top: $size !important;
  }

  // 右外边距：mr-{size}
  .uh-mr-#{$name} {
    margin-right: $size !important;
  }

  // 下外边距：mb-{size}
  .uh-mb-#{$name} {
    margin-bottom: $size !important;
  }

  // 左外边距：ml-{size}
  .uh-ml-#{$name} {
    margin-left: $size !important;
  }
}

// gap 类
@each $name, $size in $spacing-sizes {
  // 全方向gap：gap-{size}
  .uh-gap-#{$name} {
    gap: $size !important;
  }

  // 水平方向gap：gap-x-{size}
  .uh-gap-x-#{$name} {
    column-gap: $size !important;
  }

  // 垂直方向gap：gap-y-{size}
  .uh-gap-y-#{$name} {
    row-gap: $size !important;
  }
}


.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-end {
  justify-content: flex-end;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}