up
This commit is contained in:
		
							
								
								
									
										64
									
								
								App.vue
									
									
									
									
									
								
							
							
						
						
									
										64
									
								
								App.vue
									
									
									
									
									
								
							| @@ -18,14 +18,14 @@ | ||||
| </script> | ||||
|  | ||||
| <style lang="scss"> | ||||
| 	/*每个页面公共css */ | ||||
| 	/* 每个页面公共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; | ||||
| @@ -37,15 +37,15 @@ | ||||
| 	} | ||||
| 	.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;} | ||||
| @@ -57,17 +57,17 @@ | ||||
| 	.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 | ||||
| 	/* paddind */ | ||||
| 	.padd_rigth5{padding-right: 5px;} | ||||
| 	.padd_bot6{padding-bottom: 6px;} | ||||
| 	.padd_top12{padding-top:12px;} | ||||
| @@ -75,12 +75,12 @@ | ||||
| 	.padd_bot12{padding-bottom: 12px;} | ||||
| 	.padd_left12{padding-left:12px;} | ||||
| 	.padd12{padding: 12px;} | ||||
| 	//margin | ||||
| 	/* 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{ | ||||
| @@ -132,11 +132,11 @@ | ||||
| 	.flexBox .detail_list:first-child{ | ||||
| 		margin-top: 2px; | ||||
| 	} | ||||
| 	// 检索固定 | ||||
| 	/* 检索固定 */ | ||||
| 	.headerViewFixed{ | ||||
| 		background: $uni-bg-color-default; | ||||
| 	} | ||||
| 	//页面固定按钮 | ||||
| 	/* 页面固定按钮 */ | ||||
| 	.bottom_but{ | ||||
| 		width: 100%; | ||||
| 		position: fixed; | ||||
| @@ -147,7 +147,7 @@ | ||||
| 		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;} | ||||
| @@ -160,7 +160,7 @@ | ||||
| 		font-size: 14px; | ||||
| 	} | ||||
| 	 | ||||
| 	// 圆形进度条 | ||||
| 	/* 圆形进度条 */ | ||||
| 	.progressBg{ | ||||
| 		position: absolute; | ||||
| 		left: 2px; | ||||
| @@ -207,7 +207,7 @@ | ||||
| 	  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; | ||||
| 	} | ||||
| @@ -215,11 +215,41 @@ | ||||
| 		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> | ||||
|   | ||||
| @@ -5,14 +5,14 @@ | ||||
| 				<view class="data_name">头像</view> | ||||
| 				<view class=""> | ||||
| 					<button class="person_button" open-type="chooseAvatar" @chooseavatar='onChooseAvatar'> | ||||
| 					  <image class="person_logo" :src="avatarUrl"></image> | ||||
| 					  <image class="person_logo" :src="avatarUrl" mode="aspectFill"></image> | ||||
| 					</button> | ||||
| 				</view> | ||||
| 			</view> | ||||
| 			<view class="content_box"> | ||||
| 				<view class="data_name">真实姓名</view> | ||||
| 				<view class=""> | ||||
| 					> | ||||
| 					<text class="iconfont icon-gengduo"></text> | ||||
| 				</view> | ||||
| 			</view> | ||||
| 			<view class="content_box noborbot"> | ||||
| @@ -58,7 +58,7 @@ | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| 	const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'; | ||||
| 	const defaultAvatarUrl = 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/avatar.png'; | ||||
| 	 | ||||
| 	export default { | ||||
| 		data() { | ||||
|   | ||||
| @@ -1,39 +1,31 @@ | ||||
| <template> | ||||
| 	<view class="page_padding"> | ||||
| 		<!-- <checkbox-group @change="checkboxChange"> | ||||
| 			<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value"> | ||||
| 				<view> | ||||
| 					<checkbox :value="item.value" :checked="item.checked" /> | ||||
| 				</view> | ||||
| 				<view>{{item.name}}</view> | ||||
| 			</label> | ||||
| 		</checkbox-group> --> | ||||
| 	<view class="page_padding checkbox-container"> | ||||
| 		<view class="contentboxsty" v-for="(item, index) in list" :key="index.id"> | ||||
| 			<view class="list_name"> | ||||
| 				<checkbox-group @change="changeCheckbox"> | ||||
| 					<checkbox value="cb" class="checkbox-backgroun-yellow" :value="item.id" :checked="item.checked" style="transform:scale(0.7)" /> | ||||
| 			<view class="list_name listItem"> | ||||
| 				<checkbox-group @change="changeCheckbox"> | ||||
| 					<label> | ||||
| 						<checkbox class="checkbox-custom" :class="{ 'checkbox_indeterminate': item.indeterminate }" :value="item.id" :checked="item.checked" style="transform:scale(0.6)" /> | ||||
| 						<text class="font14">{{item.name}}</text> | ||||
| 					</label> | ||||
| 				</checkbox-group> | ||||
| 				<!-- <checkbox-group @change="selectPath(e,item)"> | ||||
| 					<checkbox value="cb" class="checkbox-backgroun-yellow" :value="item.id" :checked="item.checked" style="transform:scale(0.7)" /> | ||||
| 				</checkbox-group> --> | ||||
| 				<!-- <text class="t-icon t-icon-xuanzhong padd_rigth12" @click="selectPath($event.target,item)"></text> --> | ||||
| 				 {{item.name}}{{item.checked}} | ||||
| 			</view> | ||||
| 			<view class="list_content" v-for="(i, ind) in item.child" :key="ind"> | ||||
| 			<view class="list_content listItem padd_bot12" v-for="(i, ind) in item.child" :key="ind"> | ||||
| 				<view class="content_name"> | ||||
| 					<checkbox-group @change="selectPath(e,i)"> | ||||
| 						<checkbox value="cb" class="checkbox-backgroun-yellow" :value="i.id" :checked="i.checked" style="transform:scale(0.7)" /> | ||||
| 					<checkbox-group @change="selectPath(item,i)"> | ||||
| 						<label> | ||||
| 							<checkbox class="checkbox-custom" :class="{ 'checkbox_indeterminate': i.indeterminate }" :value="i.id" :checked="i.checked" style="transform:scale(0.6)" /> | ||||
| 							<text class="font14">{{i.name}}</text> | ||||
| 						</label> | ||||
| 					</checkbox-group> | ||||
| 					<!-- <text class="t-icon t-icon-xuanzhong padd_rigth5"></text> --> | ||||
| 					<text class="">{{i.name}}</text> | ||||
| 				</view> | ||||
| 				<view class="content_item"> | ||||
| 					<view class="content_data" v-for="(btn, inx) in i.child" :key="inx"> | ||||
| 						<checkbox-group @change="selectPath(e,i)"> | ||||
| 							<checkbox value="cb" class="checkbox-backgroun-yellow" :value="btn.id" :checked="btn.checked" style="transform:scale(0.7)" /> | ||||
| 						<checkbox-group @change="selectPath(item,i,inx)"> | ||||
| 							<label> | ||||
| 								<checkbox class="checkbox-custom" :class="{ 'checkbox_indeterminate': btn.indeterminate }" :value="btn.id" :checked="btn.checked" style="transform:scale(0.6)" /> | ||||
| 								<text class="font14">{{btn.name}}</text> | ||||
| 							</label> | ||||
| 						</checkbox-group> | ||||
| 						<!-- <text class="t-icon t-icon-xuanzhong padd_rigth5"></text> --> | ||||
| 						<text class="">{{btn.name}}</text> | ||||
| 					</view> | ||||
| 				</view> | ||||
| 			</view> | ||||
| @@ -45,60 +37,61 @@ | ||||
| 	export default { | ||||
| 		data() { | ||||
| 			return { | ||||
| 				items: [{ | ||||
| 						value: 'USA', | ||||
| 						name: '美国' | ||||
| 					}, | ||||
| 					{ | ||||
| 						value: 'CHN', | ||||
| 						name: '中国', | ||||
| 						checked: 'true' | ||||
| 					}, | ||||
| 					{ | ||||
| 						value: 'BRA', | ||||
| 						name: '巴西' | ||||
| 					}, | ||||
| 					{ | ||||
| 						value: 'JPN', | ||||
| 						name: '日本' | ||||
| 					}, | ||||
| 					{ | ||||
| 						value: 'ENG', | ||||
| 						name: '英国' | ||||
| 					}, | ||||
| 					{ | ||||
| 						value: 'FRA', | ||||
| 						name: '法国' | ||||
| 					} | ||||
| 				], | ||||
| 			list:[ | ||||
| 					{name:'首页',checked:true,id:1,child:[{ | ||||
| 							id: 2, | ||||
| 							name:'控制台', | ||||
| 							checked:true, | ||||
| 							child:[ | ||||
| 								{id:121,name:'设备信息',}, | ||||
| 								{id:122,name:'生产加工信息',}, | ||||
| 								{id:123,name:'生产加工信息',}, | ||||
| 								{id:124,name:'账号信息',}, | ||||
| 								{id:125,name:'通知设置',}, | ||||
| 								{id:126,name:'升级角色'},], | ||||
| 							}, | ||||
| 				list:[ | ||||
| 					{ | ||||
| 						id:1,name:'首页',checked:true,indeterminate:true, | ||||
| 						child:[ | ||||
| 							{ | ||||
| 								id: 2,name:'控制台',checked:true,indeterminate:true, | ||||
| 								child:[ | ||||
| 									{id:121,name:'设备信息',checked:true,}, | ||||
| 									{id:122,name:'生产加工信息',checked:true,}, | ||||
| 									{id:123,name:'设备能耗信息',}, | ||||
| 								], | ||||
| 							}, | ||||
| 							{ | ||||
| 								id:124,name:'账号信息', | ||||
| 								child:[ | ||||
| 									{id:125,name:'通知设置',}, | ||||
| 									{id:126,name:'升级角色'}, | ||||
| 								] | ||||
| 							} | ||||
| 						], | ||||
| 					}, | ||||
| 					// {name:'生产工单',id:11,child:[{ | ||||
| 					// 		id: 3, | ||||
| 					// 		name:'待生产工单', | ||||
| 					// 		child:[{name:'添加工单'}, | ||||
| 					// 			{name:'审核工单'}, | ||||
| 					// 			{name:'删除工单'}, | ||||
| 					// 			], | ||||
| 					// 		}, | ||||
| 					// 		{name:'已排产工单', | ||||
| 					// 		child:[], | ||||
| 					// 		}, | ||||
| 					// 	], | ||||
| 					// } | ||||
| 					{ | ||||
| 						id:11,name:'生产工单', | ||||
| 						child:[ | ||||
| 							{ | ||||
| 								id: 3,name:'待生产工单', | ||||
| 								child:[ | ||||
| 									{name:'添加工单',id:31}, | ||||
| 									{name:'审核工单',id:32}, | ||||
| 									{name:'删除工单',id:33}, | ||||
| 									{name:'撤回工单',id:34}, | ||||
| 								], | ||||
| 							}, | ||||
| 							{ | ||||
| 								id:4,name:'已排产工单', | ||||
| 								child:[], | ||||
| 							}, | ||||
| 						], | ||||
| 					}, | ||||
| 					{ | ||||
| 						id:12,name:'生产排程', | ||||
| 						child:[ | ||||
| 							{ | ||||
| 								id: 4,name:'工单排程表', | ||||
| 								child:[ | ||||
| 									{name:'创建生产计划',id:41}, | ||||
| 									{name:'修改生产计划',id:42}, | ||||
| 									{name:'拆分生产计划',id:43}, | ||||
| 									{name:'删除生产计划',id:44}, | ||||
| 									{name:'创建计划依赖',id:45}, | ||||
| 									{name:'删除计划依赖',id:46}, | ||||
| 								], | ||||
| 							}, | ||||
| 						] | ||||
| 					} | ||||
| 				], | ||||
| 				arr:[] | ||||
| 			} | ||||
| @@ -115,44 +108,26 @@ | ||||
| 						this.$set(item,'checked',false) | ||||
| 					} | ||||
| 				} | ||||
| 				console.log(items) | ||||
| 			}, | ||||
| 			changeCheckbox(e){ | ||||
| 				console.log(e) | ||||
| 				// var items = this.list, | ||||
| 				// 	values = e.detail.value; | ||||
| 				// for (var i = 0, lenI = items.length; i < lenI; ++i) { | ||||
| 				// 	const item = items[i] | ||||
| 				// 	if(values.includes(item.value)){ | ||||
| 				// 		this.$set(item,'checked',true) | ||||
| 				// 	}else{ | ||||
| 				// 		this.$set(item,'checked',false) | ||||
| 				// 	} | ||||
| 				// } | ||||
| 				// console.log(items) | ||||
| 			}, | ||||
| 			changeCheckbox(e){ | ||||
| 				// console.log(e) | ||||
| 			}, | ||||
| 			selectPath(e,item){ | ||||
| 				console.log(e,item,222) | ||||
| 				// console.log(e,item,222) | ||||
| 			}, | ||||
| 		} | ||||
| 	} | ||||
| </script> | ||||
|  | ||||
| <style> | ||||
| .contentboxsty{padding: 14px 12px;margin-bottom: 12px;} | ||||
| .list_name{display: flex;align-items: center;padding-bottom: 7px;border-bottom: 1px solid #2D3A6F;} | ||||
| <style scoped lang="scss"> | ||||
| .contentboxsty{padding: 14px 12px;margin-bottom: 12px;} | ||||
| .contentboxsty .listItem:last-child{padding-bottom: 0;} | ||||
| .list_name{display: flex;align-items: center;padding-bottom: 7px;border-bottom: 1px solid $uni-border-color-primary;} | ||||
| .content_name{padding:8px 0 ;display: flex;align-items: center;} | ||||
| .content_item{display: flex;align-items: center;flex-wrap: wrap;} | ||||
| .content_data{padding: 4px 15px 4px 0;display: flex;align-items: center;} | ||||
|  | ||||
| /* 复选框-背景颜色 */ | ||||
| checkbox.checkbox-backgroun-yellow[checked] .wx-checkbox-input, | ||||
| checkbox.checkbox-backgroun-yellow.checked .uni-checkbox-input{ | ||||
| 	background-color: #009688 !important; | ||||
| 	border-color: #009688 !important; | ||||
| 	color: #ffffff !important; | ||||
| } | ||||
| 	 | ||||
| </style> | ||||
|  | ||||
|  | ||||
|   | ||||
		Reference in New Issue
	
	Block a user