miniWxDemo
/
app.wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

/* ==================
        初始化
 ==================== */
 page {
	/* Color 可以自定义相关配色 */
	/* var属性兼容性 --> https://www.caniuse.com/#feat=css-variables */
	/* 标准色 */
	--red: #e54d42;
	--orange: #f37b1d;
	--yellow: #fbbd08;
	--olive: #8dc63f;
	--green: #39b54a;
	--darkgreen: #0E9489;
	--cyan: #1cbbb4;
	--blue: #347DFF;
	--purple: #6739b6;
	--mauve: #9c26b0;
	--pink: #e03997;
	--brown: #a5673f;
	--grey: #8799a3;
	--black: #333333;
	--darkGray: #666666;
	--gray: #aaaaaa;
	--ghostWhite: #f1f1f1;
	--white: #ffffff;
	/* 浅色 */
	--redLight: #fadbd9;
	--orangeLight: #fde6d2;
	--yellowLight: #fef2ce;
	--oliveLight: #e8f4d9;
	--greenLight: #d7f0db;
	--cyanLight: #d2f1f0;
	--blueLight: #cce6ff;
	--purpleLight: #e1d7f0;
	--mauveLight: #ebd4ef;
	--pinkLight: #f9d7ea;
	--brownLight: #ede1d9;
	--greyLight: #e7ebed;

	/* 阴影透明色 */
	--ShadowSize: 6rpx 6rpx 8rpx;
	--redShadow: rgba(204, 69, 59, 0.2);
	--orangeShadow: rgba(217, 109, 26, 0.2);
	--yellowShadow: rgba(224, 170, 7, 0.2);
	--oliveShadow: rgba(124, 173, 55, 0.2);
	--greenShadow: rgba(48, 156, 63, 0.2);
	--darkgreenShadow: rgba(48, 156, 63, 0.2);
	--cyanShadow: rgba(28, 187, 180, 0.2);
	--blueShadow: rgba(0, 102, 204, 0.2);
	--purpleShadow: rgba(88, 48, 156, 0.2);
	--mauveShadow: rgba(133, 33, 150, 0.2);
	--pinkShadow: rgba(199, 50, 134, 0.2);
	--brownShadow: rgba(140, 88, 53, 0.2);
	--greyShadow: rgba(114, 130, 138, 0.2);
	--grayShadow: rgba(114, 130, 138, 0.2);
	--blackShadow: rgba(26, 26, 26, 0.2);

	background-color: var(--ghostWhite);
	font-size: 28rpx;
	color: var(--black);
	font-family: Helvetica Neue, Helvetica, sans-serif;
}

view,
scroll-view,
swiper,
button,
input,
textarea,
label,
navigator,
image {
	box-sizing: border-box;
}

.hide {
	display: none;
}

.round {
	border-radius: 5000rpx;
}

.radius {
	border-radius: 6rpx;
}

.block {
	display: block;
}

/* 多行文本 */
.text-content{
	line-height: 1.6;
	table-layout:fixed; word-break: break-all; overflow:hidden;
}

/* ==================
          布局
 ==================== */

/*  -- flex弹性布局 -- */

.flex {
	display: flex;
}

.flex-row {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.flex-column {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.basis-xs {
	flex-basis: 20%;
}

.basis-sm {
	flex-basis: 40%;
}

.basis-df {
	flex-basis: 50%;
}

.basis-lg {
	flex-basis: 60%;
}

.basis-xl {
	flex-basis: 80%;
}

.flex-sub {
	flex: 1;
}

.flex-twice {
	flex: 2;
}

.flex-treble {
	flex: 3;
}

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

.flex-wrap {
	flex-wrap: wrap;
}

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

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

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

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

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

.self-center {
	align-self: flex-center;
}

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

.self-stretch {
	align-self: stretch;
}

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

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

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

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

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

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

/*  -- 内外边距 -- */

.margin-0 {
	margin: 0;
}

.margin-xxs {
	margin: 5rpx;
}

.margin-xs {
	margin: 10rpx;
}

.margin-s {
	margin: 20rpx;
}

.margin {
	margin: 30rpx;
}

.margin-lg {
	margin: 40rpx;
}

.margin-xl {
	margin: 50rpx;
}

.margin-xxl {
	margin: 60rpx;
}

.margin-top-xxxs {
	margin-top: 5rpx;
}

.margin-top-xxs {
	margin-top: 5rpx;
}

.margin-top-xs {
	margin-top: 10rpx;
}

.margin-top-s {
	margin-top: 20rpx;
}

.margin-top {
	margin-top: 30rpx;
}

.margin-top-l {
	margin-top: 40rpx;
}

.margin-top-xl {
	margin-top: 50rpx;
}

.margin-top-xxl {
	margin-top: 60rpx;
}

.margin-right-xxxs {
	margin-right: 3rpx;
}

.margin-right-xxs {
	margin-right: 5rpx;
}

.margin-right-xs {
	margin-right: 10rpx;
}

.margin-right-s {
	margin-right: 20rpx;
}

.margin-right {
	margin-right: 30rpx;
}

.margin-right-l {
	margin-right: 40rpx;
}

.margin-right-xl {
	margin-right: 50rpx;
}

.margin-right-xxl {
	margin-right: 60rpx;
}

.margin-bottom-xxs {
	margin-bottom: 5rpx;
}

.margin-bottom-xxxs {
	margin-bottom: 3rpx;
}

.margin-bottom-xs {
	margin-bottom: 10rpx;
}

.margin-bottom-s {
	margin-bottom: 20rpx;
}

.margin-bottom {
	margin-bottom: 30rpx;
}

.margin-bottom-l {
	margin-bottom: 40rpx;
}

.margin-bottom-xl {
	margin-bottom: 50rpx;
}

.margin-bottom-xxl {
	margin-bottom: 60rpx;
}

.margin-bottom-xxxl {
	margin-bottom: 70rpx;
}

.margin-left-xxxs {
	margin-left: 3rpx;
}

.margin-left-xxs {
	margin-left: 5rpx;
}

.margin-left-xs {
	margin-left: 10rpx;
}

.margin-left-s {
	margin-left: 20rpx;
}

.margin-left {
	margin-left: 30rpx;
}

.margin-left-l {
	margin-left: 40rpx;
}

.margin-left-xl {
	margin-left: 50rpx;
}

.margin-left-xxl {
	margin-left: 60rpx;
}


.padding-0 {
	padding: 0;
}

.padding-xs {
	padding: 10rpx;
}

.padding-s {
	padding: 20rpx;
}

.padding {
	padding: 30rpx;
}

.padding-l {
	padding: 40rpx;
}

.padding-xl {
	padding: 50rpx;
}

.padding-top-xs {
	padding-top: 10rpx;
}

.padding-top-s {
	padding-top: 20rpx;
}

.padding-top {
	padding-top: 30rpx;
}

.padding-top-l {
	padding-top: 40rpx;
}

.padding-top-xl {
	padding-top: 50rpx;
}

.padding-right-xs {
	padding-right: 10rpx;
}

.padding-right-s {
	padding-right: 20rpx;
}

.padding-right {
	padding-right: 30rpx;
}

.padding-right-l {
	padding-right: 40rpx;
}

.padding-right-xl {
	padding-right: 50rpx;
}

.padding-bottom-xs {
	padding-bottom: 10rpx;
}

.padding-bottom-s {
	padding-bottom: 20rpx;
}

.padding-bottom {
	padding-bottom: 30rpx;
}

.padding-bottom-l {
	padding-bottom: 40rpx;
}

.padding-bottom-xl {
	padding-bottom: 50rpx;
}

.padding-left-xs {
	padding-left: 10rpx;
}

.padding-left-s {
	padding-left: 20rpx;
}

.padding-left {
	padding-left: 30rpx;
}

.padding-left-l {
	padding-left: 40rpx;
}

.padding-left-xl {
	padding-left: 50rpx;
}

.padding-lr-xs {
	padding-left: 10rpx;
	padding-right: 10rpx;
}

.padding-lr-s {
	padding-left: 20rpx;
	padding-right: 20rpx;
}

.padding-lr {
	padding-left: 30rpx;
	padding-right: 30rpx;
}

.padding-lr-l {
	padding-left: 40rpx;
	padding-right: 40rpx;
}

.padding-lr-xl {
	padding-left: 50rpx;
	padding-right: 50rpx;
}


/* grid布局 */

.grid {
	display: flex;
	flex-wrap: wrap;
}

.grid.grid-square {
	overflow: hidden;
}

.grid.grid-square .cu-tag {
	position: absolute;
	right: 0;
	top: 0;
	border-bottom-left-radius: 6rpx;
	padding: 6rpx 12rpx;
	height: auto;
	background-color: rgba(0, 0, 0, 0.5);
}

.grid.grid-square>view>text[class*="cuIcon-"] {
	font-size: 52rpx;
	position: absolute;
	color: var(--grey);
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.grid.grid-square>view {
	margin-right: 20rpx;
	margin-bottom: 20rpx;
	border-radius: 6rpx;
	position: relative;
	overflow: hidden;
}

.grid.grid-square>view.bg-img image {
	width: 100%;
	height: 100%;
	position: absolute;
}

.grid.col-1.grid-square>view {
	padding-bottom: 100%;
	height: 0;
	margin-right: 0;
}

.grid.col-2.grid-square>view {
	padding-bottom: calc((100% - 20rpx)/2);
	height: 0;
	width: calc((100% - 20rpx)/2);
}

.grid.col-3.grid-square>view {
	padding-bottom: calc((100% - 40rpx)/3);
	height: 0;
	width: calc((100% - 40rpx)/3);
}

.grid.col-4.grid-square>view {
	padding-bottom: calc((100% - 60rpx)/4);
	height: 0;
	width: calc((100% - 60rpx)/4);
}

.grid.col-5.grid-square>view {
	padding-bottom: calc((100% - 80rpx)/5);
	height: 0;
	width: calc((100% - 80rpx)/5);
}

.grid.col-2.grid-square>view:nth-child(2n),
.grid.col-3.grid-square>view:nth-child(3n),
.grid.col-4.grid-square>view:nth-child(4n),
.grid.col-5.grid-square>view:nth-child(5n) {
	margin-right: 0;
}

.grid.col-1>view {
	width: 100%;
}

.grid.col-2>view {
	width: 50%;
}

.grid.col-3>view {
	width: 33.33%;
}

.grid.col-4>view {
	width: 25%;
}

.grid.col-5>view {
	width: 20%;
}