css布局实现移动端手机端资讯类个人中心我的页面效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现移动端手机端资讯类个人中心我的页面效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">

	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta content="telephone=no" name="format-detection" />
<style>

html, body {
	color: #333;
	margin: 0;
	height: 100%;
	font-family: "Myriad Set Pro", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: normal;
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
a {
	text-decoration: none;
	color: #000;
}
a, label, button, input, select {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
img {
	width: 100%;
	height: auto;
	display: block;
	border: 0;
}
body {
	background: #fff;
	color: #666;
}
html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td {
	margin: 0;
	padding: 0;
}
a {
	text-decoration: none;
	color: #08acee;
}
button {
	outline: 0;
}
img {
	border: 0;
}
button, input, optgroup, select, textarea {
	margin: 0;
	font: inherit;
	color: inherit;
	outline: none;
}
li {
	list-style: none;
}
a {
	color: #666;
}
.clearfix::after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}
.clearfix {
}
.divHeight {
	width: 100%;
	height: 10px;
	background: #f5f5f5;
	position: relative;
	overflow: hidden;
}
.r-line {
	position: relative;
}
.r-line:after {
	content: '';
	position: absolute;
	z-index: 0;
	top: 0;
	right: 0;
	height: 100%;
	border-right: 1px solid #D9D9D9;
	-webkit-transform: scaleX(0.5);
	transform: scaleX(0.5);
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
}
.b-line {
	position: relative;
}
.b-line:after {
	content: '';
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	border-bottom: 1px solid #e2e2e2;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}
.jui-flex {
	background-color: #f7f7f7;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	padding: 15px;
	position: relative;
	border-top: 1px solid #E8E8E8;
}
.jui-flex-box {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	min-width: 0;
	font-size: 14px;
	color: #333;
}
/* 必要布局样式css */

.jui-flexView {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}
.jui-scrollView {
	width: 100%;
	height: 100%;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	position: relative;
}
.jui-navBar {
	height: 44px;
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	z-index: 102;
	background: #fff;
}
.jui-navBar-item {
	height: 44px;
	min-width: 25%;
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 25%;
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	padding: 0 0.9rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	font-size: 0.7rem;
	white-space: nowrap;
	overflow: hidden;
	color: #808080;
	position: relative;
}
.jui-navBar-item:first-child {
	-webkit-box-ordinal-group: 2;
	-webkit-order: 1;
	-ms-flex-order: 1;
	order: 1;
	margin-right: -25%;
	font-size: 0.9rem;
	font-weight: bold;
}
.jui-navBar-item:last-child {
	-webkit-box-ordinal-group: 4;
	-webkit-order: 3;
	-ms-flex-order: 3;
	order: 3;
	-webkit-box-pack: end;
	-webkit-justify-content: flex-end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}
.jui-center {
	-webkit-box-ordinal-group: 3;
	-webkit-order: 2;
	-ms-flex-order: 2;
	order: 2;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	height: 44px;
	width: 50%;
	margin-left: 25%;
}
.jui-center-title {
	text-align: center;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	display: block;
	text-overflow: ellipsis;
	font-size: 0.95rem;
	color: #333;
}
.icon {
	width: 20px;
	height: 20px;
	display: block;
	border: none;
	float: left;
	background-size: 20px;
	background-repeat: no-repeat;
}
.icon-return {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAIAAABKGoy8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkUwQTc3ODM3QUMwMTFFOUE5MTBCNTFGQTA0NTIxQ0IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkUwQTc3ODQ3QUMwMTFFOUE5MTBCNTFGQTA0NTIxQ0IiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2RTBBNzc4MTdBQzAxMUU5QTkxMEI1MUZBMDQ1MjFDQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2RTBBNzc4MjdBQzAxMUU5QTkxMEI1MUZBMDQ1MjFDQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvrQISYAAAe2SURBVHja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');
}
.icon-share {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAIAAABKGoy8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkUwQTc3ODc3QUMwMTFFOUE5MTBCNTFGQTA0NTIxQ0IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkUwQTc3ODg3QUMwMTFFOUE5MTBCNTFGQTA0NTIxQ0IiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2RTBBNzc4NTdBQzAxMUU5QTkxMEI1MUZBMDQ1MjFDQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2RTBBNzc4NjdBQzAxMUU5QTkxMEI1MUZBMDQ1MjFDQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhXkxyMAAAWOSURBVHja7FldKKRfGDdjagZpV6EtbhZbQovRbj5WYXOzF5SEIlESRbFXaycXErnApYvlhlaS2vVZdsNcsNjNV9Yu7TAjrY/YtWLN/H3O/9ecf8fb+8573nc+tn9tnovTMe95zvM7z3k+D4XVavVwnMClUChcX8MmpXNsDKn0tC4icx6cc7j/f3BupFtwfzk452KKmKuyF9TV1T158mRtbY3NruR6GXtrfLVYLP8wyWojMZQk8mE8Ozvb3d0tKChYXV1lePoNILGYqdfrh4eHP3369OPHj/Pzc7ZiNBpNX19fRESE2IbkR+xTUVExMTFx586d169fh4eH2xXN0pbBYHjx4sXi4qJS+Z+C1Wo1G5yvr293d3dISIhktLu4uAC+sbGxu3fvUnwEzA0vuYjr62veZGpq6uHDhxCTkJDw6tUrk8mE7awyiO4g+eny8rK0tBQiYmNjV1ZWhIweQmaM0Fl0dDTYnj9/bjabrY7QtY3EzsxDgPstKyuDoJiYmC9fvtgHx+PJyckJDQ2trq6mcCW14jQdHBxAHPBptVqYEPeTHZubnJwsKioKDAyEwXp5ebm91sAJ5+bmZmZmFhYWoK1fv37RbWHTX79+pStVQuaRkRGMhYWFQmSu5HWINxqNcBf4/uHhISDCz/AjAPn7+29vb2MO5XFZVMIt5ufnMUlLS3NjrP/27VtLS8v4+Di5qPv37z99+jQuLg4+BwfPz88HOCDr6Ojgo+FRZGQkDO709NQ5G7q6uuL+eXx8rNPpwsLCACgqKqq2thaBl9ouHLakpAQGl5qaCnWyvJVQiI2cM3+eAwEHpGI3hLH6+nqYF2/9y5cv8fXRo0ebm5sSoYQQ1IZTuu6G/f39SBWQnZmZub6+Lgw3bW1t+IqLgmfwTiWtOeeICOjp6cEhsU9NTQ0yqTAeAToW4LrfvXsnFrDsBGEXwYHevHnz4MEDCO7s7LQLfXp6GhcNKXSBXRPyEOaWUBs5HW9nZ2eBDILb29t5UqmG8vLyYDmNjY3srZy/Vrtp4+fPn/Hx8Thbc3MzgxeZoKurS/L8LtmcEB8yHngRt0hAYYuXBOdSmU6zBZl8/PhxYGAAeaWpqYlEf24BS+tQ+WlQ6cbSvLW1FWN5eXlQUBBFzEXAxSonDboBHBGztLSEdO7n51dcXMwTTEtIrrZoNc+odt2mud7eXoy5ubne3t5iVYxQiwob/RFw9NAw//fv32OSlZUl9mLCa3xQCnz+/JlrkcL9Va4go1aF/HN0dEQCJPeTcEKx4vaR6ZeXl1UqlZjylAx9yO9kUcJgRI6368V2zf/379/nNhL6jX3NUSPgd0EifkD1kZKSMjQ0hMQg87mOF2XESCXseKmRSoYi7jLSq8p8SMQcEZjtDTfXyrUJUs/IDEVEhqQNcNdwr4XNpRT6lKenp3yfoP22nJNwLUGOZSuF/D4+PhB5cnIi88FGvgNRy0HosVgs8FONRiM3zpHd7927h3FjY0OmDhguafdyMZpMJrCj+yS3JHYqpZA5KSkJq0lQdejtV/KRis5R/eLPxMREoUWKdl+khkGWRCxFp4Re/E90+QjXaApRWX348EFuyUSvKTo6Oj093Ww2V1ZW0iDp0AshYzF6waqqKrRhiTaSZhbS/v5+cnIyDpednf39+3e36A87kAdDbPv48eOdnR1JFgXP16ieDAYD2l0gU6vVGRkZ0GVwcDC6c5lqo2EWczjm1taWXq9/+/YtLgQOh/YCHaF0kGcIg/IbGhoGBwdJze3i+w3JB8+ePdPpdAEBAbK8m/fsyh3J70ajcXR0FIXk3t4eErycnEjjM1mJwh3a0mq1QEbKFrnpUShJmKEdevlisDi6m5IdwOwGWMk0yi5q5J9TYXXHvx9u/710C+4vAfevAAMAUPioAi7KqzQAAAAASUVORK5CYII=');
}
.m-slider {
	overflow-x: hidden;
	width: 100%;
	position: relative;
}
.slider-wrapper {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	height: 100%;
	-webkit-transform: translate3d(0px, 0px, 0px);
	transform: translate3d(0px, 0px, 0px);
	position: relative;
	z-index: 1;
	-webkit-transition-property: -webkit-transform;
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
}
.slider-item {
	width: 100%;
	height: 100%;
	-webkit-flex-shrink: 0;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	background: #f6f6f6;
}
.slider-item img {
	width: 100%;
	height: auto;
	display: block;
	border: none;
}
.slider-pagination {
	text-align: right;
	position: absolute;
	width: 100%;
	z-index: 2;
	right: 0;
	bottom: 10px;
	pointer-events: none;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	-webkit-align-items: flex-end;
	-ms-flex-align: end;
	align-items: flex-end;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.slider-pagination > .slider-pagination-item {
	margin: 0 .25rem;
	width: 8px;
	height: 8px;
	display: inline-block;
	border-radius: 100%;
	background-color: rgba(255,255,255,0.4);
}
.slider-pagination > .slider-pagination-item.slider-pagination-item-active {
	background-color: #fff;
	border-radius: 100%;
}
.jui-palace {
	padding: 0.5rem 0;
	position: relative;
	overflow: hidden;
}
.jui-palace-grid {
	position: relative;
	float: left;
	padding: 1px;
	width: 20%;
	box-sizing: border-box;
	margin: 5px 0;
}
.jui-palace-grid-icon {
	width: 30px;
	height: 30px;
	margin: 0 auto;
}
.jui-palace-grid-icon img {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
}
.jui-palace-grid-text {
	display: block;
	text-align: center;
	color: #333;
	font-size: 0.85rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	padding-top: 0.2rem;
}
.jui-palace-grid-text h2 {
	font-size: 0.8rem;
	font-weight: normal;
	color: #666666;
}
.m-actionsheet {
	text-align: center;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background-color: #EFEFF4;
	-webkit-transform: translate(0, 100%);
	transform: translate(0, 100%);
	-webkit-transition: -webkit-transform .3s;
	transition: -webkit-transform .3s;
	transition: transform .3s;
	transition: transform .3s, -webkit-transform .3s;
}
.mask-black {
	background-color: rgba(0, 0, 0, 0.4);
	position: fixed;
	z-index: 500;
	bottom: 0;
	right: 0;
	left: 0;
	top: 0;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	z-index: 998;
}
.actionsheet-action {
	display: block;
	margin-top: .15rem;
	font-size: 0.28rem;
	color: #555;
	height: 1rem;
	line-height: 1rem;
	background-color: #FFF;
}
.m-actionsheet {
	text-align: center;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 10005;
	background-color: #ffffff;
	-webkit-transform: translate(0, 100%);
	transform: translate(0, 100%);
	-webkit-transition: -webkit-transform .3s;
	transition: -webkit-transform .3s;
	transition: transform .3s;
	transition: transform .3s, -webkit-transform .3s;
}
.actionsheet-toggle {
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}
.actionsheet-item {
	display: block;
	position: relative;
	font-size: 0.85rem;
	color: #555;
	height: 2rem;
	line-height: 2rem;
	background-color: #FFF;
}
.actionsheet-item {
	display: block;
	position: relative;
	font-size: 0.85rem;
	color: #555;
	height: 2rem;
	line-height: 2rem;
	background-color: #FFF;
}
.jui-coll-cancel a {
	height: 45px;
	line-height: 45px;
	font-size: 12px;
	background: #f9f9f9;
	display: block;
	text-align: center;
	width: 100%;
}
.jui-coll-share-img {
	width: 38px;
	height: 38px;
	margin: 0 auto;
}
.jui-coll-share-img img {
	width: 100%;
	height: auto;
	display: block;
	border: none;
}
.jui-coll-share-box {
	position: relative;
	overflow: hidden;
	padding: 10px 0;
}
.jui-coll-cancel a {
	height: 45px;
	line-height: 45px;
	font-size: 12px;
	background: #f9f9f9;
	display: block;
	text-align: center;
	width: 100%;
}
.jui-coll-share-item {
	position: relative;
	float: left;
	padding: 8px 10px;
	width: 33.333%;
	box-sizing: border-box;
	font-size: 12px;
	height: 85px;
}
.jui-rule {
	position: absolute;
	right: 0;
	top: 1rem;
	background: #54ca9a;
	border-radius: 50px 0 0 50px;
	font-size: 0.8rem;
	padding: 0.2rem 0.6rem;
	color: #fff;
}
.icon-pic {
	background-size: 15px;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjEzOEUwNDA2QTc4QTExRTk5QTUyQkU3MDFCQUM3NjFDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjEzOEUwNDA3QTc4QTExRTk5QTUyQkU3MDFCQUM3NjFDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTM4RTA0MDRBNzhBMTFFOTlBNTJCRTcwMUJBQzc2MUMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTM4RTA0MDVBNzhBMTFFOTlBNTJCRTcwMUJBQzc2MUMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4J1T+ZAAAAwFBMVEWFhYX+/v6NjY34+Pjz8/P5+fmhoaH29vanp6fQ0ND19fW1tbWLi4uWlpaIiIji4uLc3Nzr6+uMjIzn5+e9vb2bm5uBgYGOjo6Hh4fw8PDW1tbDw8PIyMjX19eCgoKAgIDv7++Tk5Pb29uvr6+3t7eKioqysrKqqqrh4eGSkpLFxcWGhobBwcHs7OyZmZnZ2dnl5eXNzc3Y2NiJiYnt7e3o6OjExMT7+/v8/Pzk5OSQkJDp6emRkZGYmJjx8fH///970+sVAAAAQHRSTlP///////////////////////////////////////////////////////////////////////////////////8AwnuxRAAAAKxJREFUeNp00NUOAjEQBdDKujtruDuLe///r+gDIdMFJmnTnDSZmYvYj0LgvUktcqljqrLMflABl22V39tAQKOHBpgxC+IZ4UPR0v0uxL5uVk15nOwBZvcnMRxaCd1t3w5jV/Eg5pqnuHG4gsNjJM/pziASRLOMFseoNOGaUqBa1JERhqhNdN5Dy4VArvxL4U/FlBr8nIadL7yhdS1Ph83e0wAkyehf8p96CTAAlRhPcSp+9Z8AAAAASUVORK5CYII=');
}
.jui-pus-user {
	width: 62px;
	height: 62px;
	display: block;
	border: none;
	margin-right: 0.5rem;
	border-radius: 100%;
	overflow: hidden;
}
.jui-flex-box h2 {
	color: #333333;
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}
.jui-flex-box p {
	color: #9b9b9b;
	font-size: 0.85rem;
	font-weight: normal;
}
.jui-arrow {
	margin-right: -15px;
}
.jui-arrow button {
	background: #f1f2f6;
	border-radius: 22px 0 0 22px;
	border: none;
	padding: 0.3rem 1rem 0.3rem 0.8rem;
	font-size: 0.8rem;
	color: #232323;
}
.jui-palace-one .jui-palace-grid {
	width: 33.333%;
}
.jui-palace-one .jui-palace-grid h2 {
	color: #9b9b9b;
	font-size: 0.8rem;
}
.jui-palace-one .jui-palace-grid h2 em {
	color: #171717;
	font-style: normal;
	font-size: 0.9rem;
	margin-right: 0.2rem;
	font-weight: bold;
}
.jui-flex-box h3 {
	font-size: 0.9rem;
	font-weight: normal;
	position: relative;
}
.jui-flex-box h3:after {
	content: '';
	position: absolute;
	z-index: 0;
	bottom: -9px;
	left: 0;
	width: 16%;
	height: 2px;
	background: #3092ff;
	border-radius: 100px;
}
.jui-flex-box h4 {
	color: #464646;
	font-size: 0.98rem;
	font-weight: normal;
	position: relative;
	margin-bottom: 0.5rem;
}
.jui-flex-box span {
	color: #ababab;
	font-size: 0.8rem;
	font-weight: normal;
	position: relative;
	margin-top: 0.6rem;
	display: block;
}
.jui-footer {
	width: 100%;
	position: relative;
	z-index: 100;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 7px 5px 7px 5px;
	background: #f8f8f8;
}
.jui-footer:after {
	content: '';
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	border-bottom: 1px solid #D9D9D9;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}
.jui-tabBar-item {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	color: #979797;
}
.jui-tabBar-item-text {
	display: inline-block;
	font-size: 0.65rem;
	color: #818085;
	padding-top: 2px;
}
.jui-tabBar-item-active .jui-tabBar-item-text {
	color: #000000;
}
.icon-loan {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAIAAABKGoy8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkFGQTc2NzU3QUMwMTFFOUE5MTBCNTFGQTA0NTIxQ0IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkFGQTc2NzY3QUMwMTFFOUE5MTBCNTFGQTA0NTIxQ0IiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGQUZBNzY3MzdBQzAxMUU5QTkxMEI1MUZBMDQ1MjFDQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGQUZBNzY3NDdBQzAxMUU5QTkxMEI1MUZBMDQ1MjFDQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pu0+3SgAAAdiSURBVHja7JnbT1RJEMaXcfCCIAqi4gVRLgqJoMYg6gMxQfybCXh5EYkxxEiMykUFFEEF5CKCKOwvfGttbXfPMItZYzaeh5NzznRXV39V9VVVT9HKysofv+qV+a8XKCoq+lWU29jYCNTyX36GcrZejIr/omE/GzlbL4lKoM3PRs6W5I4qwfIbm9cPqqUr+yOTl5eXFxYWpqamPn78uLS0ZDplMpmSkpIDBw5UV1eXl5fzvM1gyk8lALO+vi5LeZCYNTk5OTIy8unTJ9TKhW7p5lVfX3/06NFdu3ahdAyn4N+OcoLBR8Dnz5+Hh4efP3/Og33UAI3k/vXrV3vVmD179pw5c6ahoWH37t3xznPpV1QgCUsEag0ODmJNOVY2mz148ODx48fLyspYfseOHSzGHeVWV1fn5ubevHkzOztrujLm3LlzqBhgZvoFuG6tnMBgsYcPH46OjkoE2pw8efLUqVM4FgoZSN4NNHdxcfHFixcvX77E+gz79u0bVr506dLOnTs93QQTC1WOCUDV09OD7wswDHThwgVJN4W8fgaA4bG2tvbo0aOnT5+CK6/79+/v7OwEyGA/gX23Vo4BaDY/P48IQu/y5ctHjhzJw7RCmsE8owpQ2a/T09P3799nkwxAVFdXF1Hi9Qssu4VyuAuazczMMBn3un79urabDJfgNUaCV5a7e/fuhw8feK2srLx58yYbiJmhIBLu7+9HEEIPHz5848YNr1lgQe/X9hr4kGICOVVVVbwiGSDt19jnMnmSD+7/6tUrHnD/jo6O4uLiQnKlDJqHwIhxLIBMfkU+4ZJrZCbwGxtHeA4MDAiMa9euGT/lsloMmMdVz/aKq129elVfWIVwiWH7SznQ9itJxNDQEPox5+zZs7JCsirxDhcYKPgidzTTHzp0CMl8hMyhdNtPGjm/M9RiAq+4yPnz54PKLK47Yt/SYLjt2bNn8PaXL19MM/sVyTIIYzQgIOGsRZkH4/Xr12yIBwgTPrM4D0LSFguIgIQ7Pj7+9u1bwhyOVBi2trYGGCO5rq7u8ePHhDDjWSvAO.........完整代码请登录后点击上方下载按钮下载查看