<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>私塾家</title>
	<script th:include="sys/common/metaCSS" th:remove="tag"></script>
	<script th:include="sys/common/metaJS" th:remove="tag"></script>
	<style>
		.magic-radio{
			position: absolute;
			display: none;
		}

		.magic-radio + label {
			position: relative;
			display: block;
			padding-left: 30px;
			cursor: pointer;
			vertical-align: middle;
			padding-left: 2.5rem !important;
			min-width: auto !important;
			margin:10px;
		}
		.magic-radio:checked + label:before {
			background: #3e97eb;
			border-color: #3e97eb;
		}
		.magic-radio + label:before {
			border-radius: 50%;
		}
		.magic-radio + label:before {
			position: absolute;
			top: 0;
			left: 0;
			display: inline-block;
			width: 25px;
			height: 25px;
			content: '';
			border: 1px solid #c0c0c0;

		}

		.magic-radio:checked + label:after{
			display: block;
		}
		.magic-radio + label:after {
			top: 5px;
			left: 10px;
			box-sizing: border-box;
			width: 8px;
			height: 15px;
			transform: rotate(45deg);
			border-width: 2px;
			border-style: solid;
			border-color: #fff;
			border-top: 0;
			border-left: 0;

		}
		.magic-radio + label:after{
			position: absolute;
			display: none;
			content: '';
		}
    </style>
</head>

<body>
<div class="place">
	<span>位置：</span>
	<ul class="placeul">
		<li><a href="#">图书馆管理</a></li>
		<li><a href="#">主题选择</a></li>
	</ul>
</div>
<div class="formbody" id="formbody">
	<div class="formtitle"><span>主题选择</span></div>
	<div class="opt"  th:each="sort:${list}" onclick="checkThis(this)">
		<input class="magic-radio" type="radio" name="radio" th:id="${sort.code}" th:value="${sort.code}" th:checked="${ activeCode eq sort.code }">
		<label th:for="${sort.code}" th:text="${sort.name}" style="font-size: 20px;margin-left: 10px">男</label>
	</div>
		<ul class="">

			<li>
				<label>&nbsp;</label>
				<label>&nbsp;</label>
				<button type="button" class="btn" onclick="roleFrom()">保存</button>
			</li>
		</ul>
</div>
</body>
<script type="text/javascript">
	var checkCode = "";
	function checkThis(obj) {
		var checkObj = $(obj);
		checkCode = checkObj.find('input[type=radio]').first().val();
	}
	function roleFrom(){

		$.each($("#formbody").find('input[type=radio]'),function(i, v){
			if($(v).attr("checked")){
				checkCode = $(v).val();
			}
		});
		if(checkCode==""){
			layer.msg("请选择一个主题",{icon:11});
			return;
		}
		var url="[[${sysUrl}]]/sys/dispatcher/saveTheme";
		$.ajax({
			url: url,
			type: "post",
			data:{
				'themeCode': checkCode
			},
			dataType: "json",
			success:function(data){
				if(data.code="999"){
					layer.msg("操作成功",{icon:1});
				}else{
					layer.msg(data.msg,{icon:11});
				}
			}
		});
	}
</script>
</html>