角色权限分配模态框样式初步调整

src/main/webapp/resources/view/vendor/modal/edit_user_role.html

@@ -159,7 +159,7 @@
         margin: 0;
     }
     .user-role-manage .ng-table-pager .ng-table-pagination a{
-        height: 26px;
+        height: 29px;
         line-height: 13px;
     }
     .pagination li.active a span{

src/main/webapp/resources/view/vendor/modal/role_detail.html

@@ -253,21 +253,26 @@
 	}
 
 	.choose-inline>.item .caret {
-		float: right;
-		margin-top: 14px;
+		float: left;
+		margin-top: 9px;
 		margin-right: 8px;
-		border-left: 3px solid;
+		border-left: 5px solid #c7c7c6;
 		border-right: none;
-		border-top: 3px solid transparent;
-		border-bottom: 3px solid transparent;
+		border-top: 5px solid transparent;
+		border-bottom: 5px solid transparent;
 	}
 
 	.role-resources input[type="checkbox"] {
 		margin-right: 5px;
 		height: 16px;
 		vertical-align: text-bottom;
-		margin-top:	0;
+		margin-top: 8px;
 		cursor: pointer;
+		float: right;
+	}
+	.role-resources >p {
+		font-size: 14px;
+		color: #666;
 	}
 	.roleForm .modal-body .form-group >label {
 		font-weight: bold;
@@ -277,6 +282,36 @@
 		text-align: center;
 		border: none;
 	}
+	.role-check-box {
+		float: right;
+		margin-right: 5px;
+		margin-top: 7px;
+		background: url(static/img/icon/check-rule.png) no-repeat;
+		background-position-x: -47px;
+		background-position-y: 1px;
+		width: 13px;
+		height: 13px;
+	}
+	.role-check-box.active {
+		background-position-x: -31px;
+	}
+	.role-check-box input {
+		display: none;
+	}
+	.mall-default-btn {
+		padding: 7px 17px;
+		font-size: 14px;
+	}
+	.mall-btn-cancel {
+		background: #d0cfcf;
+		color: #666;
+	}
+	.mall-btn-delete {
+
+	}
+	.mall-btn-submit {
+
+	}
 </style>
 
 <div class="modal-header">
@@ -288,18 +323,18 @@
 	<div class="modal-body">
 		<div class="form-group">
 			<label>角色名称</label> <input type="text" name="desc"
-				ng-model="role.desc" class="form-control" placeholder="输入3-8个中文字描述"
+				ng-model="role.desc" class="form-control" placeholder="请输入1-10个字的角色名称"
 				required autofocus ng-readonly="role.isdefault">
 			<div class="tooltip in left control-tooltip"
 				ng-show="roleForm.desc.$dirty && roleForm.desc.$invalid">
 				<div class="tooltip-arrow"></div>
-				<span class="tooltip-inner">请输入3-8个中文字描述一下自定义角色</span>
+				<span class="tooltip-inner">请输入1-10个字的角色名称</span>
 			</div>
 		</div>
 		<div class="form-group">
 			<label>职责范围</label>
 			<textarea class="form-control" name="duty" ng-model="role.duty"
-				placeholder="角色的具体职责(50个中文字以内)" required
+				placeholder="请输入角色的具体职责" required
 				ng-readonly="role.isdefault"></textarea>
 			<div class="tooltip in left control-tooltip"
 				ng-show="roleForm.duty.$dirty && roleForm.duty.$invalid">
@@ -316,16 +351,26 @@
 						<ul class="list-unstyled">
 							<li ng-repeat="resource in resources"
 								ng-class="{active: resource.$active}"
-								ng-click="onItemClick(resource)"><input id="check_{{resource.id}}" type="checkbox"
-								ng-model="resource.$checked"
-								ng-change="onResourceChange(resource)"/><a>{{::resource.name}}<span
-									class="caret"></span></a></li>
+								ng-click="onItemClick(resource)">
+								<label class="role-check-box" ng-class="{active:resource.$checked}">
+									<input id="check_{{resource.id}}" type="checkbox"
+										   ng-model="resource.$checked"
+										   ng-change="onResourceChange(resource)"/>
+								</label>
+								<a>{{::resource.name}}
+									<span class="caret"></span>
+								</a>
+							</li>
 						</ul>
 					</div>
 					<div class="item">
 						<ul class="list-unstyled">
-							<li ng-repeat="item in resourceItems"><input type="checkbox"
-								ng-model="item.$checked" ng-change="onItemChange()" />{{::item.name}}</li>
+							<li ng-repeat="item in resourceItems">
+								<label class="role-check-box"  ng-class="{active: item.$checked}">
+									<input type="checkbox" ng-model="item.$checked" ng-change="onItemChange()" />
+								</label>
+								{{::item.name}}
+							</li>
 						</ul>
 					</div>
 				</div>
@@ -333,11 +378,11 @@
 		</div>
 	</div>
 	<div class="modal-footer" ng-if="role.issys != 1">
-		<button class="btn btn-primary" type="submit"
+		<button class="mall-default-btn mall-btn-submit" type="submit"
 			ng-disabled="roleForm.$invalid || !isChanged(role)">确认</button>
-		<button class="btn btn-default" type="button"
+		<button class="mall-default-btn mall-btn-delete" type="button"
 			ng-show="role.id && role.isdefault == 0" ng-click="del()">删除角色</button>
-		<button class="btn btn-default" ng-click="cancel()" type="button">取消</button>
+		<button class="mall-default-btn mall-btn-cancel" ng-click="cancel()" type="button">取消</button>
 	</div>
 	<div class="modal-footer" ng-if="role.issys == 1">
 		<button class="btn btn-default" ng-click="cancel()" type="button">关闭</button>