mes_mobile/App.vue

<script>
	export default {
		onLaunch: function() {
			console.warn('当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！')
			console.log('App Launch')
			// #ifndef MP-WEIXIN
				uni.hideTabBar();
			// #endif
			
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/* 每个页面公共css */
	@import '@/uni_modules/uni-scss/index.scss';
	/* #ifndef APP-NVUE */
		@import '@/static/customicons.css';
		@import 'uni.scss';
	/* #endif */
	
	/* 设置整个项目的背景色 */
	page {
		background-color: $uni-bg-color-default !important;
		color: $uni-text-color-inverse;
	}
	.example-info {
		font-size: 14px;
		color: $uni-text-color;
		padding: 10px;
	}
	.page_padding{padding: 14px;}
	.page_content{padding: 0 12px 10px;}
	/* 内容框 */
	.contentboxsty{border-radius: 8px;background: $uni-bg-color-primary;}
	/* 没有底部边框 */
	.noborbot{border-bottom:none !important}
	
	.t-icon{background-repeat: no-repeat;}
	.icon22{width: 22px;height: 22px;}
	
	/* 字体大小 */
	.font12{font-size: 12px;}
	.font13{font-size: 13px;}
	.font14{font-size: 14px;}
	.font15{font-size: 15px;}
	.font18{font-size: 18px;}
	.font20{font-size: 20px;}
	.font22{font-size: 22px;}
	.font24{font-size: 24px;}
	.font35{font-size: 35px;}
	.font_bold{font-weight: bold;}
	
	/* 文字颜色 */
	.text_color_black{color: $uni-text-color-default;}
	.theme_color{color: $uni-text-color-primary } //主题绿
	/* 按钮颜色 */
	.but_color{background: $uni-color-primary !important;}
	
	/* 布局 */
	.flex_layout{display: flex;}
	.flex1{flex: 1;}
	.comView{flex: 1;overflow: hidden;}
	/* paddind */
	.padd_rigth5{padding-right: 5px;}
	.padd_bot6{padding-bottom: 6px;}
	.padd_top12{padding-top:12px;}
	.padd_rigth12{padding-right: 12px;}
	.padd_bot12{padding-bottom: 12px;}
	.padd_left12{padding-left:12px;}
	.padd12{padding: 12px;}
	/* margin */
	.mar_top12{margin-top: 12px;}
	.mar_bot12{margin-bottom: 12px;}
	.page_list{margin-bottom: 12px;padding:0 12px;}
	
	/* 有详情的列表 */
	.detail_list{
		margin-bottom: 12px;
		.list_top{
			display: flex;
			padding:12px;
			font-size: 14px;
			border-radius: 8px 8px 0px 0px;
			background: linear-gradient(90deg, rgba(61, 84, 176, 0.70) 5.83%, rgba(58, 77, 158, 0.00) 73.76%);
			.top_left{flex: 1;display: flex;align-items: center; font-weight: bold;}
			.top_right{display: flex;align-items: center;font-weight: bold;}
			.top_right .arrow{margin-left: 5px;font-weight: normal;}
		}
		.list_content{padding:12px;position: relative;}
		.list_content .card_right{position: absolute;top: 12px;right: 12px;}
	}
	
	.page_list .card_right, .detail_list .card_right{
		display: flex;
		flex-direction: column;
		.status{
			background: $uni-bg-color-success-dark;
			color: $uni-text-color-success;
			padding: 3px 10px;
			border-radius: 4px;
			font-size: 12px;
		}
		.success{
			background: $uni-bg-color-success-dark;
			color: $uni-text-color-success;
			padding: 3px 10px;
			border-radius: 4px;
			font-size: 12px;
		}
		.warning{
			background: $uni-bg-color-warning-dark;
			color: $uni-text-color-warning;
			padding: 3px 10px;
			border-radius: 4px;
			font-size: 12px;
		}
		.error{
			background: $uni-bg-color-error-dark;
			color: $uni-text-color-danger;
			padding: 3px 10px;
			border-radius: 4px;
			font-size: 12px;
		}
	}
	.flexBox .detail_list:first-child{
		margin-top: 2px;
	}
	/* 检索固定 */
	.headerViewFixed{
		background: $uni-bg-color-default;
	}
	/* 页面固定按钮 */
	.bottom_but{
		width: 100%;
		position: fixed;
		bottom: 0px;
		z-index: 90;
		background-color: #060B26;
		border-top: 1px solid #2E3249;
		height: 80px;
		view{width: 50%;text-align: center;margin: 0 20px;border-radius: 19px;background: #DDD;line-height: 38px;height: 38px;margin-top: 6px;}
	}
	/* 底部固定添加按钮 */
	.page_bottom_button{
		width: 100%;position: fixed;bottom: 0px;background-color: #060B26;border-top: 1px solid #2E3249;height: 80px;
		.page_add{display:flex;justify-content:center;align-items: center;margin: 7px 20px;border-radius: 17.5px;background: #1C2755;height: 38px;}
		.page_add .icon{margin-right: 4px;}
	}
	.bot_padding{padding-bottom: 100px;}
	
	.placeholderStyle{
		color: $uni-text-color-placeholder;
		font-size: 14px;
	}
	
	/* 圆形进度条 */
	.progressBg{
		position: absolute;
		left: 2px;
		top: 2px;
		z-index: 20;
		background: $uni-bg-color-primary;
		width: 98px;
		height: 98px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		border-radius: 50%;
	}
	.progressBox{
		background: $uni-bg-color-default-dark;
		width: 90px;
		height: 90px;
		border-radius: 50%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.circle-progress {
	  width: 102px;
	  height: 102px;
	  position: relative;
	  overflow: hidden;
	  border-radius: 50%;
	  background: $uni-bg-color-primary;
	}
	
	.circle-progress__bar {
	  position: absolute;
	  z-index: 10;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  width: 100%;
	  height: 100%;
	  border-radius: 50%;
	  background-image: conic-gradient($uni-color-primary 0%, $uni-color-primary var(--progress), transparent 0);
	}
	
	/* 选择日期时间颜色的配置 */
	.input_date .uni-date-x .uni-date__x-input{
		color: $uni-text-color-tip;
	}
	.haveTime .uni-date-x .uni-date__x-input{
		color: $uni-text-color-inverse;
	}
	
	/* 修改 日期时间选择组件 */
	.input_date ::v-deep .uni-date-changed .uni-datetime-picker--btn{
		background: $uni-color-primary !important;
	}
	.input_date ::v-deep .uni-calendar-item--checked{
		background: $uni-color-primary !important;
	}
	
	/* 自定义 复选框-背景颜色 */
	checkbox.checkbox-custom[checked] .wx-checkbox-input , checkbox.checkbox-custom.checked .uni-checkbox-input{
		background-color: $uni-color-primary;
		border-color: $uni-color-primary;
		color: $uni-text-color-inverse;
	}
	::v-deep .checkbox_indeterminate::before{
		content: '';
		position: absolute;
		top: 50%;
		left: calc(50% - 2px);
		z-index: 80;
		transform: translate(-50%,-50%);
		width: 12px;
		height: 2px;
		border-radius: 4px;
		background: $uni-bg-color-whith;
	}
	::v-deep .checkbox_indeterminate::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		width: calc(100% - 5px);
		height: 100%;
		border-radius: 3px;
		background-color: $uni-color-primary;
	}
</style>