fhrons-mobile-next 2.0.0 → 2.0.2

package/assets/css/global.less

@@ -0,0 +1,1637 @@
+// out ./global.css
+@colors: #eeeeee, #ffffff, #272835, #196699, #5b89fe, #de9500, #521902, #973600, #fffbdf, #c47771, #ff6600, #3a5ba6, #fff7d1, #f3c486, #272832, #575757, #fff3e0, #158cff, #0a85ff, #969799, #ca6c2f, #c59e72, #b84e07, #ff6329, #ca913b, #fdb54a, #ad612c, #ffe9ad, #7a4405, #ba3f0e, #9b5b34, #a3573b, #39cc52, #23242e, #555661, #1a1819, #888994, #c8c9cc, #bebfc0, #ff5c5c, #2da641, #ff850a, #979797, #6c4013, #ffffff, #ebf5ff, #7f808a, #63401a, #795a3a, #fd723f, #e8e8e8, #7a3f0a, #315682, #f1f1f1, #fff5eb, #7a5a36, #e0d9bc, #ff5b60, #858b9c, #41485d, #111a34, #fee4b8, #2e9aff, #005eb7, #d8d8d8, #b30c00, #c8c8cc, #ffefad, #333333, #232323, #666666, #999999, #cacaca, #8d8d8d, #656565, #fe9533, #ffae90, #6e4e2e, #ff4747, #ff4500, #007ffa, #4790dd, #61351c, #6e3117, #f9c6aa, #7f4b1b, #21262d, #81440b, #fffcf7, #000000, #9c6a58, #e2cb99, #714420, #646566, #323233, #21d6bc, #323446, #4cb498, #cc6018,
+	#b26023, #ffd1a3, #6d460b, #fff5e5, #793a22, #fef9f4, #00aa5b, #1a95ff, #168cff, #331f00, #e3ecff, #e7f4ff, #ffece5, #fff7f3, #ffe4c3, #f7f8fa, #fff6f0, #ffebd6, #fff1e0, #f5f5f9, #fffaf5, #e0fffa, #d6ebff, #ffebeb, #e7f3ff, #42a1ff, #e4f1ff, #ffe4ad, #fef7e6, #7abdff, #e2e2e7, #f8f9fa, #f4f5f6, #cc9e6a, #f0f2f9, #f9fafb, #dfdfdf, #f5f5f5, #ffebcc, #fff2df, #ffefe9, #ebf9ed, #fde04c, #fbad01, #fff8e9, #fff5e1, #f8e7d3, #845713, #f8eede, #f62d31, #f1642d, #ec8824, #f6f7f9, #f7f7fa, #fff2e6, #f6f8fb, #ebedf0, #ec534d, #644e24, #ffecd7, #ffd7d7, #e2e2e2, #8b3600, #a17745, #edebf0, #fe9900,#04194d,#945a1c,#ff5c1a,#c9a36f,#f3f3f3;
+html {
+	font-size: 100%;
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	margin: 0;
+	padding: 0;
+	-webkit-text-size-adjust: none;
+	height: 100vh;
+	overflow-x: hidden;
+	overflow-y: scroll;
+}
+
+
+
+em,
+i {
+	font-style: normal;
+}
+
+label,
+input,
+select,
+img,
+button {
+	vertical-align: middle;
+}
+
+img,
+input,
+button,
+textarea {
+	border: 0;
+}
+
+button {
+	cursor: pointer;
+}
+
+input,
+button,
+textarea,
+select {
+	background: transparent;
+	-webkit-appearance: none;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	outline: 0;
+}
+
+a,
+li,
+input,
+button,
+section,
+span,
+div {
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+	color: #ffffff;
+	opacity: 0.64;
+	font-size: 0.375rem;
+}
+
+a {
+	text-decoration: none;
+}
+
+
+
+:focus {
+	outline: 0;
+}
+
+.fix:before,
+.fix:after {
+	display: block;
+	content: "clear";
+	height: 0;
+	clear: both;
+	overflow: hidden;
+	visibility: hidden;
+}
+
+.c-trans {
+	color: transparent;
+}
+
+.c-gray {
+	color: #ffffff;
+	opacity: 0.64;
+}
+
+.c-990 {
+	color: rgba(0, 0, 0, 0.6);
+}
+
+.c-0032 {
+	color: rgba(0, 0, 0, 0.32);
+}
+
+/* 透明背景色 */
+.bgc-trans {
+	background-color: transparent;
+}
+
+.bgc-none {
+	background-color: transparent;
+}
+
+.black-cover {
+	background-color: rgba(0, 0, 0, 0.4);
+}
+
+.white-cover {
+	background-color: rgba(255, 255, 255, 0.7);
+}
+
+.bgc-blue020 {
+	background-color: rgba(21, 140, 255, 0.02);
+}
+
+.bgc-blue100 {
+	background-color: rgba(21, 140, 255, 0.1);
+}
+
+.bgc-008 {
+	background: rgba(255, 99, 41, 0.08);
+}
+
+.bgc-9fe-8 {
+	background: rgba(91, 137, 254, 0.08);
+}
+
+/* 渐变色 */
+.bgl-5f9 {
+	background-image: linear-gradient(180deg, #f5f5f9 0%, #ffffff 100%);
+}
+
+.bgl-ffffff-5f9 {
+	background: linear-gradient(360deg, #f5f5f9 0%, #ffffff 100%);
+}
+
+.bgl-9ad {
+	background-image: linear-gradient(270deg, #ffd9ad 0%, #ffecd6 100%);
+}
+
+.bgl-d7a {
+	background: linear-gradient(270deg, #ffbd7a 0%, #ffd9b3 100%);
+}
+
+.bgl-e7f {
+	background: linear-gradient(180deg, #f5be7f 0%, #b8835f 100%);
+}
+
+.bgl-bd0 {
+	background-image: linear-gradient(270deg, #0b9bd0 0%, #4fc1e9 100%);
+}
+
+.bgl-5c3 {
+	background-image: linear-gradient(270deg, #7455c3 0%, #ac92ec 100%);
+}
+
+.bgl-bff {
+	background-image: linear-gradient(180deg, #d6ebff 0%, #fefffe 60%);
+}
+
+.bgl-bd6 {
+	background-image: linear-gradient(180deg, #ffebd6 0%, #ffffff 50%);
+}
+
+.bgl-3FF {
+	background-image: linear-gradient(135deg, #2193ff 0%, #2064ff 100%);
+}
+
+.bgl-255 {
+	border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;
+}
+
+.bgl-5ff {
+	background: linear-gradient(270deg, #ffffff 0%, #ebf5ff 100%);
+}
+
+.bgl-5ff-180 {
+	background: linear-gradient(180deg, #ebf5ff 0%, #ffffff 31%, #ffffff 100%);
+}
+
+.bgl-444 {
+	background: linear-gradient(270deg, #444444 0%, #202022 100%);
+}
+
+.bgl-e3a {
+	background: linear-gradient(180deg, #fff3bf 0%, #fede3a 100%);
+}
+
+.bgl-4ff {
+	background: linear-gradient(127deg, #8fd4ff 0%, #3da8ff 100%);
+}
+
+.bgl-89f {
+	background: linear-gradient(127deg, #fe989f 0%, #fe7075 100%);
+}
+
+.bgl-399 {
+	background: linear-gradient(133deg, #ffd399 0%, #ffb433 100%);
+}
+
+.bgl-cac {
+	background: linear-gradient(90deg, #feacac 0%, #ff4747 100%);
+}
+
+.bgl-9b3 {
+	background: linear-gradient(90deg, #ffd9b3 0%, #ffbd7a 100%);
+}
+
+.bgl-5bb-47c {
+	background: linear-gradient(270deg, #18c5bb 0%, #93f47c 100%);
+}
+
+.bgl-329-f00 {
+	background: linear-gradient(270deg, #ff6329 0%, #ff8f00 100%);
+}
+
+.bgl-9bc-6d3 {
+	background: linear-gradient(270deg, #3e59bc 0%, #6786d3 100%);
+}
+
+.bgl-3d1-6d7 {
+	background: linear-gradient(270deg, #98b3d1 0%, #a2b6d7 100%);
+}
+
+.bgl-f0e-f59 {
+	background: linear-gradient(180deg, #fff0eb 0%, #f5f5f9 100%);
+}
+
+.bgl-f7-ff {
+	background: linear-gradient(180deg, #fff7f4 0%, #ffffff 76%, #ffffff 100%);
+}
+
+.bgl-ffffff-5f9-270 {
+	background: linear-gradient(270deg, #ffffff 0%, #f5f5f9 100%);
+}
+
+.bgl-1d6-Cf5 {
+	background: linear-gradient(180deg, #fff1d6 0%, #fffcf5 100%);
+}
+
+.bgl-9cc {
+	background-color: #c8c9cc;
+}
+
+/*reset*/
+.vertical-ali {
+	vertical-align: middle !important;
+}
+
+.vertical-normal {
+	vertical-align: initial;
+}
+
+.vertical-bot {
+	vertical-align: bottom;
+}
+
+.underline {
+	text-decoration: underline;
+}
+.line-through{
+    text-decoration: line-through;
+}
+
+.pt140 {
+	padding-top: 140px;
+}
+
+.pt150 {
+	padding-top: 150px;
+}
+
+.pb106 {
+	padding-bottom: 106px;
+}
+
+.pb125 {
+	padding-bottom: 125px;
+}
+
+.pb200 {
+	padding-bottom: 200px;
+}
+
+.pb120 {
+	padding-bottom: 120px;
+}
+
+.pb150 {
+	padding-bottom: 150px;
+}
+
+.pb170 {
+	padding-bottom: 170px;
+}
+
+.pb230 {
+	padding-bottom: 230px;
+}
+
+.pl140 {
+	padding-left: 140px;
+}
+
+.pr14imp {
+	padding-right: 14px !important;
+}
+
+.ptb17-5 {
+	padding-top: 17.5px;
+	padding-bottom: 17.5px;
+}
+
+.plr17-5 {
+	padding-left: 17.5px;
+	padding-right: 17.5px;
+}
+
+.plr148 {
+	padding-left: 148px;
+	padding-right: 148px;
+}
+
+/* 图片大小 */
+
+/**  margin  */
+.mt-125 {
+	margin-top: -125px;
+}
+
+.mt38-5 {
+	margin-top: 38.5px;
+}
+
+.mt120 {
+	margin-top: 120px;
+}
+
+.mt190 {
+	margin-top: 210px;
+}
+
+.ml-auto {
+	margin-left: auto;
+}
+
+.mb140 {
+	margin-bottom: 140px;
+}
+
+.mt144 {
+	margin-top: 144px;
+}
+
+.mt200 {
+	margin-top: 200px;
+}
+
+.m0a {
+	margin: 0 auto;
+}
+
+.fw-bold {
+	font-weight: 700;
+}
+
+/* 文字间距 */
+.ls0 {
+	letter-spacing: 0.5px;
+}
+
+.ls1 {
+	letter-spacing: 1px;
+}
+
+.ls2 {
+	letter-spacing: 2px;
+}
+
+.ls4 {
+	letter-spacing: 4px;
+}
+
+/**  hover显示手  */
+.pointer {
+	cursor: pointer;
+}
+
+.table-cell {
+	display: table-cell;
+}
+
+.flex {
+	display: flex;
+}
+
+.flex-nowrap {
+	flex-wrap: nowrap;
+}
+
+.flex-none {
+	flex: none;
+}
+
+.flex1 {
+	flex: 1;
+}
+
+.flex2 {
+	flex: 2;
+}
+
+.flex1-5 {
+	flex: 1.5;
+}
+
+.flex1-3 {
+	flex: 1.3;
+}
+
+.flex1-2 {
+	flex: 1.2;
+}
+
+.shrink-0 {
+	flex-shrink: 0;
+}
+
+.flex-between {
+	display: flex;
+	justify-content: space-between;
+}
+
+.flex-between-center {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.flex-around {
+	display: flex;
+	justify-content: space-around;
+}
+
+.flex-stretch {
+	display: flex;
+	align-items: stretch;
+}
+
+.flex-start {
+	display: flex;
+	justify-content: flex-start;
+}
+
+.flex-end {
+	display: flex;
+	justify-content: flex-end;
+}
+
+.flex-wrap {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.flex-no-wrap {
+	display: flex;
+	flex-wrap: nowrap;
+}
+
+.flex-start-wrap {
+	display: flex;
+	justify-content: flex-start;
+	flex-wrap: wrap;
+}
+
+.flex-start-center {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+}
+
+.flex-start-start {
+	display: flex;
+	justify-content: flex-start;
+	align-items: flex-start;
+}
+
+.flex-between-wrap {
+	display: flex;
+	justify-content: space-between;
+	flex-wrap: wrap;
+}
+
+.flex-between-end {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-end;
+}
+
+.flex-between-start {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+}
+
+/* flex - center */
+
+.flex-center {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.flex-center-center {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.flex-center-baseline {
+	display: flex;
+	align-items: baseline;
+	justify-content: center;
+}
+
+.flex-center-start {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+}
+
+.flex-center-end {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+}
+
+.flex-center-vertical {
+	display: flex;
+	align-items: center;
+}
+
+.flex-start-vertical {
+	display: flex;
+	align-items: flex-start;
+}
+
+.flex-center-horizontal {
+	display: flex;
+	justify-content: center;
+}
+
+.flex-center-around {
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+}
+
+.flex-baseline-between {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+}
+
+.flex-center-between {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.flex-top-vertical {
+	display: flex;
+	align-items: top;
+	justify-content: flex-start;
+}
+
+.flex-center-center {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+/* flex - column */
+.flex-column {
+	display: flex;
+	flex-direction: column;
+}
+
+.flex-row {
+	display: flex;
+	flex-direction: row;
+}
+
+.flex-row-reverse {
+	display: flex;
+	flex-direction: row-reverse;
+}
+
+.flex-column-reverse {
+	display: flex;
+	flex-direction: column-reverse;
+}
+
+.flex-column-center {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.flex-column-center-center {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.flex-column-center-unset {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: unset;
+}
+
+.flex-column-center-start {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: flex-start;
+}
+
+.flex-column-center-around {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-around;
+}
+
+.flex-column-center-between {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.flex-column-around {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around;
+}
+
+.flex-column-between {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.flex-column-start {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+.flex-column-start-center {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	justify-content: center;
+}
+
+.flex-column-start-around {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	justify-content: space-around;
+}
+
+.flex-column-start-between {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	justify-content: space-between;
+}
+
+.flex-column-end-between {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	justify-content: space-between;
+}
+
+.flex-justify-content-end {
+	display: flex;
+	justify-content: end;
+}
+
+.flex-align-content-center {
+	display: flex;
+	flex-wrap: wrap;
+	align-content: center;
+}
+
+.flex-start-around {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-around;
+}
+
+/* flex 基准线对齐*/
+.flex-baseline {
+	align-items: baseline;
+}
+
+.flex-align-center {
+	align-items: center;
+}
+
+/**  visible  */
+.visible-hidden {
+	visibility: hidden;
+}
+
+.visible {
+	visibility: visible;
+}
+
+/**  线条  */
+.border {
+    border-width: 1px;
+    border-style: solid;
+    // border-style: #ebedf0;
+}
+.border-top {
+    border-top-width: 1px;
+    border-top-style: solid;
+    // border-top-style: #ebedf0;
+}
+.border-right {
+    border-right-width: 1px;
+    border-right-style: solid;
+    // border-right-style: #ebedf0;
+}
+.border-bottom {
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    // border-bottom-style: #ebedf0;
+}
+.border-left {
+    border-left-width: 1px;
+    border-left-style: solid;
+    // border-left-style: #ebedf0;
+}
+
+.border-thin {
+    border-width: .5px;
+    border-style: solid;
+}
+.border-thin-top {
+    border-top-width: .5px;
+    border-top-style: solid;
+}
+.border-thin-right {
+    border-right-width: .5px;
+    border-right-style: solid;
+}
+.border-thin-bottom {
+    border-bottom-width: .5px;
+    border-bottom-style: solid;
+}
+.border-thin-left {
+	border-left-width: .5px;
+    border-left-style: solid;
+}
+
+.border-normal {
+	border: 0.5px solid;
+}
+
+.border-none {
+	border: none;
+}
+
+.border-blue024 {
+	border: 0.5px solid rgba(21, 140, 255, 0.24);
+}
+
+.border-right-none {
+	border-right: 0 !important;
+}
+
+.border-w2 {
+	border-width: 2;
+}
+.bdc-transparent{
+    border-color: transparent;
+}
+// ---------------------------------------------------
+
+// 兼容IOS圆角问题
+.radiu-ios {
+	-webkit-transform: rotate(0deg);
+}
+
+.br4-rightbottom {
+	border-radius: 0px 0px 8px 0px;
+}
+
+.br8-top {
+	border-radius: 8px 8px 0px 0px;
+}
+
+.br8-bottom {
+	border-radius: 0px 0px 8px 8px;
+}
+
+.br6-bottom {
+	border-radius: 0px 0px 6px 6px;
+}
+
+.circle {
+	border-radius: 50%;
+}
+
+/**  圆 */
+/**  块元素  */
+.inline-block {
+	display: inline-block;
+}
+
+.block {
+	display: block;
+}
+
+.inline-flex {
+	display: inline-flex;
+}
+
+/**  不展示  */
+.display-none {
+	display: none;
+}
+
+.inline-grid {
+	display: inline-grid;
+}
+
+/**  左右float布局  */
+.left {
+	float: left;
+}
+
+.transform00 {
+	transform-origin: left top;
+}
+
+.right {
+	float: right;
+}
+
+.fix {
+	*zoom: 1;
+}
+
+.fix:before,
+.fix:after {
+	display: block;
+	content: "clear";
+	height: 0;
+	clear: both;
+	overflow: hidden;
+	visibility: hidden;
+}
+
+:focus {
+	outline: 0;
+}
+
+.min-height100 {
+	min-height: 100vh;
+}
+
+/* 行高 */
+.line-height-normal {
+	line-height: normal;
+}
+
+/* text-align */
+.ta-l {
+	text-align: left;
+}
+
+.ta-c {
+	text-align: center;
+}
+
+.ta-r {
+	text-align: right;
+}
+
+.ta-j {
+	text-align: justify;
+}
+
+/* 相对布局 */
+.ps-r {
+	position: relative;
+}
+
+.ps-a {
+	position: absolute;
+}
+
+/* 吸顶 */
+.ps-s {
+	position: sticky;
+	position: -webkit-sticky;
+	top: 0;
+	z-index: 3;
+}
+
+.ps-f {
+	position: fixed;
+}
+
+.fix-horizontal-center {
+	position: fixed;
+	left: 0;
+	right: 0;
+}
+
+/* 宽高铺满 */
+.full-height {
+	height: 100%;
+}
+
+.content-width {
+	width: max-content;
+}
+.content-height {
+	height: max-content;
+}
+
+.max-h-66 {
+	max-height: 66px;
+}
+
+.max-h-480 {
+	max-height: 480px;
+}
+
+.unset-width {
+	width: unset !important;
+}
+
+.full-width {
+	width: 100%;
+}
+
+.full-width120 {
+	width: 120%;
+}
+
+.width-375 {
+	width: 375px;
+}
+
+.half-height {
+	height: 200px !important;
+}
+
+.full-content {
+	width: 100%;
+	height: 100%;
+}
+
+.full-box {
+	width: 100vw;
+	height: 100vh;
+}
+
+.wh-content-16 {
+	width: 16px;
+	height: 16px;
+}
+
+.fill-width {
+	width: -webkit-fill-available;
+}
+
+.r-13 {
+	right: -13px !important;
+}
+
+.filter0 {
+	opacity: 0;
+}
+
+.border-box {
+	box-sizing: border-box;
+}
+
+.border-content {
+	box-sizing: content-box;
+}
+
+/* css转换 */
+.scale-06 {
+	transform: scale(0.6);
+}
+
+.scale-08 {
+	transform: scale(0.8);
+}
+
+/* 字体间距 */
+.letter-spacing1 {
+	letter-spacing: 1px;
+}
+
+.over-auto {
+	overflow: auto;
+}
+
+.over-x-auto {
+	overflow-x: auto;
+}
+
+.over-hidden {
+	overflow: hidden !important;
+}
+
+.over-scroll {
+	overflow: scroll;
+	-webkit-overflow-scrolling: touch;
+	overflow-scrolling: touch;
+}
+
+.over-scroll-x {
+	overflow-x: scroll;
+	overflow-y: hidden;
+	-webkit-overflow-scrolling: touch;
+	overflow-scrolling: touch;
+}
+
+.nowrap {
+	white-space: nowrap;
+}
+
+.ws-normal {
+	white-space: normal;
+}
+
+.prewrap {
+	white-space: pre-wrap;
+}
+
+/* 字体图标 */
+.icon-custom {
+	display: inline-block;
+	width: 14px;
+	height: 14px;
+}
+
+/* 超出省略号 */
+.text-ellipsis {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.position-center {
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.position-center-x {
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+/* 多行省略号 */
+.multi-text-ellipsis {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	line-height: initial;
+	white-space: pre-wrap;
+}
+
+.vertical {
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.vertical-bottom {
+	vertical-align: bottom;
+}
+
+.middle-button {
+	height: 40px;
+	font-size: 16px;
+	font-weight: 500;
+}
+
+.big-button {
+	height: 48px;
+	font-size: 18px;
+	font-weight: 500;
+}
+
+/* 块阴影 */
+.box-shadow {
+	box-shadow: #dddddd 0px 0px 0.16rem 0px;
+}
+
+.card-shadow {
+	box-shadow: 0px 0px 32px 0px rgba(35, 13, 0, 0.06);
+}
+
+.btn {
+	border: 1px solid #eeeeee;
+	padding: 3px 8px;
+	border-radius: 5px;
+	margin-right: 10px;
+	margin-bottom: 10px;
+	font-size: 12px;
+}
+
+.align-middle {
+	vertical-align: middle;
+}
+
+.risk_bg {
+	background: url("https://dop-pro-1251973116.file.myqcloud.com/upload/img/funzg/my-bg-riskTest.svg") no-repeat;
+	background-size: contain;
+}
+
+.clue_bg {
+	background: url("https://dop-pro-1251973116.file.myqcloud.com/upload/img/funzg/my-bg-clueVIP.svg") no-repeat;
+	background-size: contain;
+}
+
+.news_bg {
+	background: url("https://dop-pro-1251973116.file.myqcloud.com/upload/img/funzg/my-bg_qianmian.svg") no-repeat;
+	background-size: contain;
+}
+
+.bg-cover {
+	background-size: cover;
+}
+
+.bg-fit-cover {
+	object-fit: cover;
+}
+
+// 单行隐藏
+.over-flow,
+.one-line {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+// 两行隐藏
+.over-flow-two {
+	text-overflow: -o-ellipsis-lastline;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+	-webkit-box-orient: vertical;
+}
+
+// 三行隐藏
+.over-flow-three {
+	text-overflow: -o-ellipsis-lastline;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	line-clamp: 3;
+	-webkit-box-orient: vertical;
+}
+
+// 三行隐藏
+.over-flow-four {
+	text-overflow: -o-ellipsis-lastline;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 4;
+	line-clamp: 4;
+	-webkit-box-orient: vertical;
+}
+
+.over-flow-five {
+	text-overflow: -o-ellipsis-lastline;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 5;
+	line-clamp: 5;
+	-webkit-box-orient: vertical;
+}
+
+// 阻止点击事件
+.no-click {
+	pointer-events: none;
+}
+
+// 首行缩进
+.indent-2 {
+	text-indent: 2em;
+}
+
+// 必填项的红点
+.red-dot {
+	display: inline-block;
+	transform: translate(1px, 3px);
+}
+
+// filter
+.bf2 {
+	backdrop-filter: blur(2px);
+}
+
+/*media*/
+@media screen and (max-width: 1024px) {
+}
+
+@media screen and (max-width: 480px) {
+}
+
+@media screen and (max-width: 380px) {
+}
+
+@media screen and (max-width: 320px) {
+}
+
+@keyframes slideInLeft {
+	from {
+		transform: translate3d(100%, 0, 0);
+		opacity: 1;
+	}
+
+	to {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+
+@keyframes slideInRight {
+	from {
+		transform: translate3d(-100%, 0, 0);
+		opacity: 1;
+	}
+
+	to {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+
+@keyframes slideLeftOut {
+	from {
+		transform: translate3d(0, 0, 0);
+		opacity: 0;
+	}
+
+	to {
+		transform: translate3d(100%, 0, 0);
+		opacity: 0;
+	}
+}
+
+@keyframes slideRightOut {
+	from {
+		transform: translate3d(0, 0, 0);
+		opacity: 0;
+	}
+
+	to {
+		transform: translate3d(-100%, 0, 0);
+		opacity: 0;
+	}
+}
+
+.slide-left-enter-active {
+	animation: slideInLeft 0.3s forwards;
+	z-index: 1;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+}
+
+.slide-left-leave-active {
+	animation: slideLeftOut 0.3s forwards;
+	z-index: 1;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+}
+
+.slide-right-enter-active {
+	animation: slideInRight 0.3s forwards;
+	z-index: 1;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+}
+
+.slide-right-leave-active {
+	animation: slideRightOut 0.3s forwards;
+	z-index: 1;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+}
+
+/* 骨架占位块 */
+@keyframes skeleton-blink {
+	50% {
+		background-color: #f1f1f1;
+	}
+}
+
+.custom-skeleton {
+	background-color: #e8e8e8;
+	border-radius: 5px;
+	overflow: hidden;
+	animation: skeleton-blink 1.2s ease-in-out infinite;
+}
+
+.over-y {
+	overflow-y: scroll;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+	/* padding: 0; */
+	transition: all 0.5s;
+}
+
+.fade-enter,
+.fade-leave-to
+
+/* .fade-leave-active below version 2.1.8 */ {
+	opacity: 0;
+	position: absolute;
+}
+
+body::-webkit-scrollbar {
+	display: none;
+	width: 0;
+	height: 0;
+}
+
+body::-webkit-scrollbar:horizontal {
+	width: 0;
+	height: 0;
+	display: none;
+}
+
+.img-103 {
+	width: 103px;
+}
+
+.img-109 {
+	width: 109px;
+}
+
+.img-110 {
+	width: 110px;
+}
+
+.img-157 {
+	width: 157px;
+}
+
+.img-158 {
+	width: 158px;
+}
+
+.op {
+	opacity: 0.72;
+}
+
+.height-109 {
+	height: 109px;
+}
+
+.height-122 {
+	height: 122px;
+}
+
+.height-157 {
+	height: 157px;
+}
+
+.height-163 {
+	height: 163px;
+}
+
+.height-165 {
+	height: 165px;
+}
+
+.my-page-background {
+	background: linear-gradient(360deg, #f5f5f9 0%, #ff6329 100%);
+}
+
+.w-max-content {
+	width: max-content;
+}
+
+.sty-329 {
+	border-radius: 2px;
+	border: 0.5px solid #ff6329;
+	font-weight: 400;
+	color: #ff6329;
+}
+
+.h16-sty {
+	display: inline-block;
+	line-height: 16px;
+	font-size: 11px;
+	margin-right: 6px;
+	padding: 0px 4px;
+	text-align: center;
+	box-sizing: border-box;
+}
+
+.sty-08a {
+	border-radius: 2px;
+	border: 0.5px solid #7f808a;
+	font-weight: 400;
+	line-height: 16px;
+
+	color: #7f808a;
+}
+
+.sty-500 {
+	border-radius: 2px;
+	border: 0.5px solid #de9500;
+	font-weight: 400;
+	font-size: 11px;
+	line-height: 16px;
+	color: #de9500;
+}
+
+.z-index-1{
+    z-index:-1
+}
+
+// 循环生成颜色类
+.loop-colors(@index: 1) when (@index <=length(@colors)) {
+	// 提取颜色值
+	@colorValue: extract(@colors, @index);
+
+	// 提取色值后三位，去除 # 号
+	@colorCode: replace(@colorValue, "#", "");
+
+	.c-@{colorCode} {
+		color: @colorValue;
+	}
+
+	.bgc-@{colorCode} {
+		background-color: @colorValue;
+	}
+
+	.bdc-@{colorCode} {
+		border-color: @colorValue;
+	}
+
+	// 递归调用循环
+	.loop-colors(@index + 1);
+}
+// 启动循环
+.loop-colors();
+/**  字体粗细  */
+.generate-fw(@i) when (@i >=0) {
+    @num: @i * 100;
+	.fw-@{num} {
+		font-weight: ~"@{num}";
+	}
+
+	.generate-fw(@i - 1);
+}
+
+.generate-fw(9);
+
+/**  生成0-60的行高 z-index 和字体大小 */
+.generate-line-height(@i) when (@i >=0) {
+    .br@{i}{
+        border-radius: ~"@{i}px"
+    }
+	.generate-line-height(@i - 1);
+}
+
+.generate-line-height(60);
+
+// 生成-200到200的margin和padding
+.generate-margin-padding(@i) when (@i >=-100) {
+	.mg@{i} {
+		margin: ~"@{i}px";
+	}
+
+	.mt@{i} {
+		margin-top: ~"@{i}px";
+	}
+
+	.mr@{i} {
+		margin-right: ~"@{i}px";
+	}
+
+	.mb@{i} {
+		margin-bottom: ~"@{i}px";
+	}
+
+	.ml@{i} {
+		margin-left: ~"@{i}px";
+	}
+
+	.mtb@{i} {
+		margin-top: ~"@{i}px";
+		margin-bottom: ~"@{i}px";
+	}
+
+	.mlr@{i} {
+		margin-left: ~"@{i}px";
+		margin-right: ~"@{i}px";
+	}
+
+	.pd@{i} {
+		padding: ~"@{i}px";
+	}
+
+	.pt@{i} {
+		padding-top: ~"@{i}px";
+	}
+
+	.pr@{i} {
+		padding-right: ~"@{i}px";
+	}
+
+	.pb@{i} {
+		padding-bottom: ~"@{i}px";
+	}
+
+	.pl@{i} {
+		padding-left: ~"@{i}px";
+	}
+
+	.ptb@{i} {
+		padding-top: ~"@{i}px";
+		padding-bottom: ~"@{i}px";
+	}
+
+	.plr@{i} {
+		padding-left: ~"@{i}px";
+		padding-right: ~"@{i}px";
+	}
+
+	.top@{i} {
+		top: ~"@{i}px";
+	}
+
+	.right@{i} {
+		right: ~"@{i}px";
+	}
+
+	.bottom@{i} {
+		bottom: ~"@{i}px";
+	}
+
+	.left@{i} {
+		left: ~"@{i}px";
+	}
+
+	// 仅在 @i > 0 时生成 width 和 height 和 opacity
+	.width-@{i} when (@i > 0) {
+		width: ~"@{i}px";
+	}
+
+	.height-@{i} when (@i > 0) {
+		height: ~"@{i}px";
+	}
+    .h-@{i} when (@i > 0){
+		height: ~"@{i}%";
+	}
+
+	.w-@{i} when (@i > 0){
+		width: ~"@{i}%";
+	}
+    .line-height@{i} when (@i > 0){
+		-webkit-appearance: none;
+		line-height: ~"@{i}px";
+	}
+	.opa-@{i} when (@i > 0){
+		opacity: ~"@{i}%";
+	}
+    .z-index@{i} when (@i > 0){
+		z-index: ~"@{i}";
+	}
+
+	.ft@{i} when (@i > 0){
+		font-size: ~"@{i}px";
+	}
+
+	.generate-margin-padding(@i - 1);
+}
+
+.generate-margin-padding(100);