/* flex布局 */ .flex {display: flex;} /* 盒模型 */ .border-box{box-sizing: border-box;} /* 背景颜色 */ .background-white{background-color: #ffffff;} .background-orange{background-color: #febf00;} .background-grey{background-color: #484848;} /* 圆角 */ .radius10{border-radius: 10rpx;} .radius15{border-radius: 15rpx;} .radius20{border-radius: 20rpx;} .radius25{border-radius: 25rpx;} .radius30{border-radius: 30rpx;} .radius35{border-radius: 35rpx;} .radius40{border-radius: 40rpx;} .radius100{border-radius: 100%;} /* 外边距 */ .mar-sxc10{margin: 10rpx auto;} .mar-sxc15{margin: 15rpx auto;} .mar-sxc20{margin: 20rpx auto;} .mar-sxc25{margin: 25rpx auto;} .mar-sxc30{margin: 30rpx auto;} .mar-sx10{margin: 10rpx 0;} .mar-sx15{margin: 15rpx 0;} .mar-sx20{margin: 20rpx 0;} .mar-sx25{margin: 25rpx 0;} .mar-sx30{margin: 30rpx 0;} .mar-zy10{margin: 0 10rpx;} .mar-zy15{margin: 0 15rpx;} .mar-zy20{margin: 0 20rpx;} .mar-zy25{margin: 0 25rpx;} .mar-zy30{margin: 0 30rpx;} .mar-s10{margin-top: 10rpx;} .mar-s15{margin-top: 15rpx;} .mar-s20{margin-top: 20rpx;} .mar-s25{margin-top: 25rpx;} .mar-s30{margin-top: 30rpx;} .mar-s35{margin-top: 35rpx;} .mar-s40{margin-top: 40rpx;} .mar-s50{margin-top: 50rpx;} .mar-s60{margin-top: 60rpx;} .mar-s70{margin-top: 70rpx;} .mar-s80{margin-top: 80rpx;} .mar-x10{margin-bottom: 10rpx;} .mar-x15{margin-bottom: 15rpx;} .mar-x20{margin-bottom: 20rpx;} .mar-x25{margin-bottom: 25rpx;} .mar-x30{margin-bottom: 30rpx;} .mar-x35{margin-bottom: 35rpx;} .mar-x40{margin-bottom: 40rpx;} .mar-x50{margin-bottom: 50rpx;} .mar-x60{margin-bottom: 60rpx;} .mar-x70{margin-bottom: 70rpx;} .mar-x80{margin-bottom: 80rpx;} /* 内边距 */ .pad-all10{padding: 10rpx;} .pad-all15{padding: 15rpx;} .pad-all20{padding: 20rpx;} .pad-all25{padding: 25rpx;} .pad-all30{padding: 30rpx;} .pad-all35{padding: 35rpx;} .pad-all40{padding: 40rpx;} .pad-sx10{padding: 10rpx 0;} .pad-sx15{padding: 15rpx 0;} .pad-sx20{padding: 20rpx 0;} .pad-sx25{padding: 25rpx 0;} .pad-sx30{padding: 30rpx 0;} .pad-sx35{padding: 35rpx 0;} .pad-sx40{padding: 40rpx 0;} .pad-zy10{padding: 0 10rpx;} .pad-zy15{padding: 0 15rpx;} .pad-zy20{padding: 0 20rpx;} .pad-zy25{padding: 0 25rpx;} .pad-zy30{padding: 0 30rpx;} .pad-zy35{padding: 0 35rpx;} .pad-zy40{padding: 0 40rpx;} .pad-x130{padding-bottom: 130rpx;} .pad-x140{padding-bottom: 140rpx;} .pad-x150{padding-bottom: 150rpx;} .pad-x160{padding-bottom: 160rpx;} .pad-x170{padding-bottom: 170rpx;} .pad-x180{padding-bottom: 180rpx;} .pad-x190{padding-bottom: 190rpx;} /* 字体 */ .font18{ font-size: 18rpx;} .font20{ font-size: 20rpx;} .font22{ font-size: 22rpx;} .font24{ font-size: 24rpx;} .font26{ font-size: 26rpx;} .font28{ font-size: 28rpx;} .font30{ font-size: 30rpx;} .font32{ font-size: 32rpx;} .font34{ font-size: 34rpx;} .font36{ font-size: 36rpx;} .font38{ font-size: 38rpx;} .font40{ font-size: 40rpx;} .font42{ font-size: 42rpx;} .font44{ font-size: 44rpx;} .font46{ font-size: 46rpx;} .font48{ font-size: 48rpx;} .font60{ font-size: 60rpx;} .color-ff{ color: #ffffff;} .color-00{ color: #000000;} .color-48{ color: #484848;} .color-66{ color: #666666;} .color-99{ color: #999999;} .color-orange{color: #febf00;} .color-red{ color: #dd062f;} .color-8c{ color: #8c8c9b;} /* 文字行数 */ .clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips4{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips5{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips6{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips7{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 7;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips8{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 8;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips9{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 9;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips10{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 10;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} image{ /* 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */ border: 0; /* 取消图片底侧有空白缝隙的问题 ① */ vertical-align: middle; /* 取消图片底侧有空白缝隙的问题 ② */ object-fit: cover; } /* 去除滚动条 */ scroll-view ::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; -webkit-appearance: none; background: transparent; } /* 圆圈中间一个原点 start */ .mo-item { width: 30rpx; height: 30rpx; border-radius: 100%; border: 2rpx solid #000000; box-sizing: border-box; } .active-item{ position: relative; display: flex; justify-content: center; align-items: center; border: 2rpx solid #FF0000; } .active-item::before{ content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 20rpx; height: 20rpx; border-radius: 100%; background-color: #FF0000; }