145 行
4.5 KiB
HTML
可执行文件
145 行
4.5 KiB
HTML
可执行文件
<!--[1.1.96]-->
|
|
<link rel="stylesheet" href="__PUBLIC__/css/css-comment.css">
|
|
<link rel="stylesheet" type="text/css" href="__PUBLIC__/layui/css/layui.css"/>
|
|
<style>
|
|
.template {
|
|
border: 1px solid #f1f1f1;
|
|
box-sizing: border-box;
|
|
margin: 30px;
|
|
|
|
}
|
|
|
|
.templateTitle {
|
|
background: #F5F5F5;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
box-sizing: border-box;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.templateWrap {
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.template-item {
|
|
margin: 0 30px;
|
|
text-align: center;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.label_radio {
|
|
height: 18px;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
line-height: 19px;
|
|
color: #313131;
|
|
}
|
|
|
|
.label_radio > input {
|
|
width: 16px;
|
|
height: 16px;
|
|
opacity: 0;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.label_radio > span {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
border: 2px solid #ccc;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.label_radio > input:checked + span:after {
|
|
background-color: #009688 !important;
|
|
}
|
|
|
|
.label_radio > input:checked + span {
|
|
border-color: #009688 !important;
|
|
}
|
|
|
|
.label_radio > span::after {
|
|
position: absolute;
|
|
content: "";
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: #ddd;
|
|
top: 4px;
|
|
left: 4px;
|
|
transition: .5s;
|
|
}
|
|
.save {
|
|
width: 100px;
|
|
height: 36px;
|
|
color: white;
|
|
background-color: #009688;
|
|
margin: 20px auto;
|
|
text-align: center;
|
|
line-height: 36px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.save:hover {
|
|
background-color: #409688;
|
|
}
|
|
</style>
|
|
<div id="app">
|
|
<div class="template">
|
|
<p class="templateTitle">模板选择</p>
|
|
<div class="templateWrap">
|
|
<div class="template-item">
|
|
<img class="templateInput" src="__PUBLIC__/images/tempalte1.png">
|
|
<label class="label_radio" for="model1">
|
|
<input id='model1' type="radio" name="status" <if condition="$status eq 1">checked</if> value="1">模板一(默认)
|
|
<span></span>
|
|
</label>
|
|
</div>
|
|
<div class="template-item">
|
|
<img class="templateInput" src="__PUBLIC__/images/tempalte3.png">
|
|
<label class="label_radio" for="model2">
|
|
<input id='model2' type="radio" name="status" <if condition="$status eq 2">checked</if> value="2">模板二
|
|
<span></span>
|
|
</label>
|
|
</div>
|
|
<div class="template-item">
|
|
<img class="templateInput" style="width: 158px;margin-bottom: 7px;" src="__PUBLIC__/images/tempalte2.png">
|
|
<label class="label_radio" for="model3">
|
|
<input id='model3' type="radio" name="status" <if condition="$status eq 3">checked</if> value="3">模板三
|
|
<span></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<if condition="$authArr['setVipModel'] eq true">
|
|
<div class="save">保存</div>
|
|
</if>
|
|
</div>
|
|
<script>
|
|
layui.use(['layer'], function () {
|
|
$('.save').click(function () {
|
|
if(!$("input[name='status']:checked").val()){
|
|
layer.msg('请选择模板',{time:1000});
|
|
return;
|
|
}
|
|
$.post("{:U('setVipModel')}",{
|
|
status:$("input[name='status']:checked").val()
|
|
},function (res) {
|
|
layer.msg(res.msg,{time:1000});
|
|
})
|
|
})
|
|
})
|
|
</script> |