dreamland/lib/GraceUI5/css/graceUI.css

/* #ifdef MP-BAIDU */
@import "iconsforbaidu.css";
/* #endif */

/* 规划 H5 端字体 */
/* #ifdef H5 */
body{font-family:-apple-system,Helvetica,sans-serif,Arial;}
/* #endif */

/* 图标加载 */
/* #ifndef APP-NVUE */
	/* #ifndef MP-BAIDU */
	@font-face{
		font-family : "gui-iconfont";
		font-weight : normal;
		font-style  : normal; 
		src         : url('@/static/grace.ttf') format('truetype');
	}
	/* #endif */
.gui-icons{font-family:"gui-iconfont"; font-style:normal;}
/* #endif */

/* 页面主体结构 */
.gui-body{width:750rpx;}

/* 去除图片空白 */
.gui-img-in{font-size:0;}

/* #ifndef APP-NVUE */
.gui-flex{display:flex;}
.gui-border-box{box-sizing:border-box;}
.gui-body{width:750rpx; box-sizing:border-box;}
/* #endif */


/* flex 布局 */
.gui-rows{flex-direction:row;}
.gui-row{flex-direction:row;}
.gui-columns{flex-direction:column;}
.gui-column{flex-direction:column;}
.gui-wrap{flex-direction:row; flex-wrap:wrap;}
.gui-nowrap{flex-direction:row; flex-wrap:nowrap;}
.gui-space-around{justify-content:space-around;}
.gui-space-between{justify-content:space-between;}
.gui-justify-content-start{justify-content:flex-start;}
.gui-justify-content-center{justify-content:center;}
.gui-justify-content-end{justify-content:flex-end;}
.gui-align-items-start{align-items:flex-start;}
.gui-align-items-center{align-items:center;}
.gui-align-items-end{align-items:flex-end;}
.gui-flex1{flex:1;}

/* 文本对齐 */
.gui-text-left{text-align:left;}
.gui-text-center{text-align:center;}
.gui-text-right{text-align:right;}
.gui-ellipsis{overflow:hidden;}
/* #ifndef APP-NVUE */
.gui-ellipsis{white-space:nowrap; text-overflow:ellipsis;}
.gui-block-text{display:block;}
/* #endif */

/* 文本修饰 */
.gui-bold{font-weight:bold;}
.gui-line-through{text-decoration:line-through;}
.gui-underline{text-decoration:underline;}
.gui-italic{font-style:italic;}

/* 定位 */
.gui-relative{position:relative;}
.gui-absolute-lt{position:absolute; z-index:2; left:0; top:0;}
.gui-absolute-rt{position:absolute; z-index:2; right:0; top:0;}
.gui-absolute-lb{position:absolute; z-index:2; left:0; bottom:0;}
.gui-absolute-rb{position:absolute; z-index:2; right:0; bottom:0;}
.gui-fixed-lt{position:fixed; z-index:2; left:0; top:0;}
.gui-fixed-rt{position:fixed; z-index:2; right:0; top:0;}
.gui-fixed-lb{position:fixed; z-index:2; left:0; bottom:0;}
.gui-fixed-rb{position:fixed; z-index:2; right:0; bottom:0;}

/* 背景色 */
.gui-bg-red{background-color:#EE0A25 !important;}
.gui-bg-green{background-color:#07C160 !important;}
.gui-bg-blue{background-color:#008AFF !important;}
.gui-bg-orange{background-color:#ED6A0C !important;}
.gui-bg-yellow{background-color:#FBDE4E !important;}
.gui-bg-purple{background-color:#8A3FD4 !important;}
.gui-bg-white{background-color:#FFFFFF !important;}
.gui-bg-black{background-color:#2B2E3D !important;}
.gui-bg-black{background-color:#2B2E3D !important;}
.gui-bg-black2{background-color:#656565 !important;}
.gui-bg-black3{background-color:#969799 !important;}
.gui-bg-black4{background-color:#C8C9CC !important;}
.gui-bg-black-opacity7{background-color:rgba(0,0,0,0.7);}
.gui-bg-black-opacity5{background-color:rgba(0,0,0,0.5);}
.gui-bg-black-opacity3{background-color:rgba(0,0,0,0.3);}
.gui-gtbg-red{background-image:linear-gradient(45deg, #FF0066 , #D50000) !important;}
.gui-gtbg-blue{background-image:linear-gradient(45deg, #5887DF , #008AFF) !important;}
.gui-gtbg-green{background-image:linear-gradient(45deg, #39B55A , #8DC63E) !important;}
.gui-bg-gray{background-color:#F7F8FA !important;}
.gui-bg-white{background-color:#FFFFFF !important;}


/* 内置颜色 */
.gui-color-black{color:#2B2E3D !important;}
.gui-color-white{color:#FFFFFF !important;}
.gui-color-gray{color:rgba(69, 90, 100, 0.6) !important;}
.gui-color-gray-light{color:rgba(69, 90, 100, 0.3) !important;}
.gui-color-blue{color:#008AFF !important;}
.gui-color-red{color:#EE0A25 !important;}
.gui-color-orange{color:#ED6A0C !important;}
.gui-color-purple{color:#8A3FD4 !important;}
.gui-color-green{color:#39B55A !important;}
.gui-color-yellow{color:#FBDE4E !important;}



/* 边框 */
/* #ifdef APP-NVUE */
.gui-border{border-style:solid; border-width:1rpx; border-color:#F1F2F3;}
.gui-border-l{border-left-style:solid; border-left-width:1rpx; border-left-color:#F1F2F3;}
.gui-border-r{border-right-style:solid; border-right-width:1rpx; border-right-color:#F1F2F3;}
.gui-border-t{border-top-style:solid; border-top-width:1rpx; border-top-color:#F1F2F3;}
.gui-border-b{border-bottom-style:solid; border-bottom-width:1rpx; border-bottom-color:#F1F2F3;}
.gui-noborder{border-right-width:0; border-top-width:0; border-left-width:0; border-bottom-width:0;}
/* #endif */
/* #ifndef APP-NVUE */
.gui-border{border:1rpx solid #F1F2F3;}
.gui-border-l{border-left:1rpx solid #F1F2F3;}
.gui-border-r{border-right:1rpx solid #F1F2F3;}
.gui-border-t{border-top:1rpx solid #F1F2F3;}
.gui-border-b{border-bottom:1rpx solid #F1F2F3;}
.gui-noborder{border:none !important;}
/* #endif */

/* 自定义头部导航相关 */
.gui-header-content{width:100rpx; flex:1; text-align:center; margin-left:10rpx; margin-right:168rpx;}
.gui-headr-back{width:148rpx; line-height:40px; font-size:32rpx;}


/* 宫格布局 */
.gui-grids{padding:0;}
.gui-grids-items{width:138rpx;}
/* #ifndef APP-NVUE */
.gui-grids-items{box-sizing:border-box;}
/* #endif */
.gui-grids-icon{height:80rpx; font-size:68rpx; line-height:80rpx; text-align:center;}
/* #ifndef APP-NVUE */
.gui-grids-icon{display:block; width:100%;}
/* #endif */
.gui-grids-icon-img{width:80rpx; height:80rpx; border-radius:6rpx;}
.gui-grids-text{line-height:50rpx; text-align:center; font-size:24rpx; margin-top:2px;}
/* #ifndef APP-NVUE */
.gui-grids-text{display:block; width:100%;}
/* #endif */


/* 列表样式 */
/* #ifndef APP-NVUE */
.gui-list-items, .gui-list-title{display:flex;}
.gui-list-icon, .gui-list-title-text, .gui-list-title-desc, .gui-list-body-desc, .gui-list-arrow-right{display:block;}
/* #endif */
.gui-list-items{flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center;}
.gui-list-icon{width:80rpx; height:80rpx; line-height:80rpx; text-align:center; font-size:44rpx;}
.gui-list-image{width:80rpx; height:80rpx; border-radius:80rpx; font-size:0;}
.gui-list-body{padding:25rpx 0; margin-left:25rpx; width:100rpx; flex:1;}
.gui-list-title{flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items:center;}
.gui-list-one-line{line-height:60rpx !important;}
.gui-list-title-text{font-size:26rpx; line-height:44rpx;}
.gui-list-title-desc{font-size:22rpx; line-height:30rpx;}
.gui-list-body-desc{font-size:22rpx; line-height:32rpx;}
.gui-list-arrow-right{width:50rpx; height:50rpx; line-height:50rpx; font-size:30rpx; text-align:right;}


/* 徽章 */
.gui-badge{border-radius:38rpx; height:38rpx; line-height:38rpx; padding:0 13rpx; font-size:22rpx;}
.gui-badge-absolute{position:absolute; right:0rpx; top:4rpx; z-index:1;}
.gui-badge-point{width:20rpx; height:20rpx; border-radius:12rpx; position:absolute; right:4rpx; top:4rpx; z-index:1; background-color:#FF0000;}
.gui-badge-gender{width:38rpx; height:38rpx; border-radius:30rpx; text-align:center; font-size:22rpx !important; line-height:38rpx; position:absolute; right:6rpx; top:4rpx; z-index:1;}


/* 滚动区域 */
/* #ifndef APP-NVUE */
.gui-scroll-x{display:flex; white-space:nowrap;}
.gui-scroll-x-item, .gui-scroll-x-items{display:inline-flex; vertical-align:top;}
/* #endif */
/* #ifdef MP-ALIPAY */
.gui-scroll-x{display:block; white-space:nowrap;}
/* #endif */
.gui-scroll-x{width:750rpx; flex-direction:row; overflow:hidden;}


/* 卡片列表 */
.gui-card-list{}
.gui-card-item{width:330rpx; margin-bottom:30rpx;}
.gui-card-img{width:330rpx; height:191rpx; overflow:hidden; position:relative;}
.gui-card-title{margin-top:3px;}
.gui-card-desc{margin-top:3px;}
.gui-card-tip{width:68rpx; height:40rpx; line-height:40rpx; text-align:center;}
.gui-card-mask-title{line-height:60rpx; height:60rpx; padding:0 10rpx; width:330rpx;}


/* 底部导航相关 */
.gui-footer-icon-buttons{width:80rpx; height:80rpx; margin:10rpx;}
.gui-footer-icon-buttons-icon{text-align:center; font-size:38rpx; line-height:50rpx;}
.gui-footer-icon-buttons-text{text-align:center; font-size:20rpx; line-height:30rpx;}
.gui-footer-large-buttons{margin-left:25rpx; margin-right:25rpx;}
.gui-footer-large-button{width:218rpx; height:80rpx;}
.gui-footer-large-button-text{line-height:80rpx !important;}

/* 通用标题布局 */
.gui-title-line{width:50rpx; height:1px; background-color:#E1E2E3; flex:1;}
.gui-title-text{line-height:60rpx;}
.gui-title-icon{width:50rpx; font-size:32rpx;}

/* 表单 */
.gui-form{overflow:hidden;}
.gui-form-item{flex-direction:row; flex-wrap:nowrap; align-items:center;}
.gui-form-label{width:130rpx; height:100rpx; font-size:28rpx; line-height:100rpx; overflow:hidden;}
.gui-form-icon{width:60rpx; height:60rpx; line-height:60rpx; font-size:28rpx;}
.gui-form-body{width:200rpx; margin-left:20rpx; overflow:hidden; flex:1;}
.gui-form-input{height:40rpx; line-height:40rpx; margin:20rpx 0; background-color:rgba(255,255,255,0); border-width:0px; font-size:28rpx;}
.gui-check-item{margin:10rpx 10rpx 0 0; padding:0 10rpx; font-size:28rpx; flex-direction:row; flex-wrap:nowrap; align-items:center;}
.gui-check-item-y{margin:10rpx 0; font-size:28rpx;}
.gui-textarea{height:120rpx; padding:15rpx; line-height:38rpx; background-color:rgba(255,255,255,0); border-width:0px; font-size:28rpx;}
@font-face{font-family:"gui-formicons"; src:url('data:application/ttf;charset=utf-8;base64,OLh6+EVGahJS0OU2yaKO26Kiu6Zv+fbC+9P6l/wm8ZwtrOU5zo2XwdDjj7ilb9szx6Pz8hzzU1DUMrbXMHC2NbU15WTlxOxUdK2llbX0DSSdFF0GClXLlRPIOJppGChZi5s6MnpKNvaqMLkwKoD8NsI9B7wqBANQgCNQhGDQgBAwhFKwhHGhBeDCDCOAI2YElRARjiAS2EBlMIQx4iGInC9nJQTHaVXQA5E8EE500AB910O4gBKhATdCAWWEFskIYcQBnigDbEBX2IBwYQHyQhIThBohj9KScAF0gKAuQMEpALsJAHSEG+/kuiIgA4aBqIoCiQhzQx6qgEABMoBTShNDCC5oAC1AQWUAuIQRYwhzaCM7QFGOgo6EHXQAn6DDbQJNjjczuo4gsok+FuApClC9pt9nPwK3ehR05loNUk');}

/* 底部导航 */
/* #ifndef APP-NVUE */
.gui-form-item{display:flex;}
.gui-form-label, .gui-form-icon{display:block;}
.gui-form-picker{display:flex;}
.gui-check-item{display:flexbox;}
.gui-check-item-y{display:block;}
.gui-textarea{box-sizing:border-box;}
/* #endif */

/* 评论列表 */
.gui-comments{}
.gui-comments-items{margin-top:35rpx;}
.gui-comments-face{width:80rpx; height:80rpx; border-radius:80rpx; margin-right:25rpx;}
.gui-comments-body{width:580rpx; overflow:hidden;}
.gui-comments-header-text{line-height:40rpx;}
.gui-comments-info{margin-top:2px;}
.gui-comments-info-text{font-size:22rpx; line-height:40rpx; margin-top:10rpx;}
.gui-comments-content{line-height:36rpx; font-size:26rpx; padding:8rpx 0;}
.gui-comments-replay{font-size:24rpx; color:#666666; border-radius:3px; margin:3px 0; padding:15rpx; line-height:36rpx;}
.gui-comments-replay-btn{font-size:20rpx; line-height:44rpx; padding:0rpx 20rpx; border-radius:44rpx;}
.gui-comments-imgs{margin:8rpx 0;}
.gui-comments-image{width:180rpx; height:128rpx; margin-right:10rpx; margin-bottom:10rpx; font-size:0; overflow:hidden;}

/* 底部导航相关 */
.gui-footer-input-body{padding:0 20rpx; height:70rpx; border-radius:66rpx; margin:0 30rpx;}
.gui-footer-input-icon{width:66rpx; text-align:center; line-height:66rpx; font-size:30rpx; margin-right:10rpx;}
.gui-footer-input{width:100rpx; flex:1; font-size:26rpx; height:32rpx; line-height:32rpx; padding:0; overflow:hidden;}

.gui-common-line{height:20rpx; background-color:#F7F8FA;}


/* css3 动画 不支持 nvue */
/* #ifndef APP-NVUE */
.gui-transition-all{transition:all 0.2s ease-in 0s;}
/* 使用记录 : gui-switch-navigation2 gui-popup */
@keyframes gui-fade-in{0%{opacity:0;} 100%{opacity:1;}}
.gui-fade-in{animation:gui-fade-in 350ms ease-in forwards;}
/* 使用记录 : gui-image gui-popup */
@keyframes gui-fade-out{0%{opacity:1;} 100%{opacity:0;}}
.gui-fade-out{animation:gui-fade-out 350ms ease-out forwards;}
/* 使用记录 : gui-popup */
@keyframes gui-top-in{0%{transform:translateY(-1000px);} 100%{transform:translateY(0px);}}
.gui-top-in{animation:gui-top-in 350ms linear forwards;}
/* 使用记录 : gui-popup */
@keyframes gui-top-out{0%{transform:translateY(0px);} 100%{transform:translateY(-1000px);}}
.gui-top-out{animation:gui-top-out 350ms linear forwards;}
/* 使用记录 : gui-popup */
@keyframes gui-bottom-in{0%{transform:translateY(600px);} 100%{transform:translateY(0px);}}
.gui-bottom-in{animation:gui-bottom-in 350ms linear forwards;}
/* 使用记录 : gui-popup */
@keyframes gui-bottom-out{0%{transform:translateY(0px);} 100%{transform:translateY(600px);}}
.gui-bottom-out{animation:gui-bottom-out 350ms linear forwards;}
/* 使用记录 : gui-popup */
@keyframes gui-left-in{0%{transform:translateX(-600px);} 100%{transform:translateX(0px);}}
.gui-left-in{animation:gui-left-in 350ms linear forwards;}
/* 使用记录 : gui-popup */
@keyframes gui-left-out{0%{transform:translateX(0px);} 100%{transform:translateX(-600px);}}
.gui-left-out{animation:gui-left-out 350ms linear forwards;}
/* 使用记录 : gui-popup */
@keyframes gui-right-in{0%{transform:translateX(600px);} 100%{transform:translateX(0px);}}
.gui-right-in{animation:gui-right-in 350ms linear forwards;}
/* 使用记录 : gui-popup */
@keyframes gui-right-out{0%{transform:translateX(0px);} 100%{transform:translateX(600px);}}
.gui-right-out{animation:gui-right-out 350ms linear forwards;}
/* 使用记录 : gui-popup */
@keyframes gui-scale-in{0%{transform:scale(0.3,0.3);} 100%{transform:scale(1,1);}}
.gui-scale-in{animation:gui-scale-in 350ms linear forwards;}
/* 使用记录 : gui-popup */
@keyframes gui-scale-out{0%{transform:scale(1,1);} 100%{transform:scale(0.3,0.3);}}
.gui-scale-out{animation:gui-scale-out 350ms linear forwards;}
/* 使用记录 : gui-page */
@keyframes gui-rotate360{0%{transform:rotate(0deg);} 50%{transform:rotate(180deg);} 100%{transform:rotate(360deg);}}
.gui-rotate360{animation:gui-rotate360 1200ms infinite linear;}
/* #endif */


/* 不支持 nvue 的常用样式 */
/* #ifndef APP-NVUE */
.gui-box-shadow{box-shadow:0px 0px 16rpx #323232;}
.gui-transition-all{transition:all 0.2s ease-in 0s;}
::-webkit-scrollbar {display: none;}
/* #endif */