291 行
9.5 KiB
HTML
可执行文件
291 行
9.5 KiB
HTML
可执行文件
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport"
|
||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<title>添加插件</title>
|
||
<style>
|
||
html, body {
|
||
background-color: rgb(246, 248, 249);
|
||
font-size: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.file_label {
|
||
position: relative;
|
||
cursor: pointer;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.file_label:before {
|
||
display: block;
|
||
content: '+';
|
||
font-size: 80px;
|
||
font-weight: 100;
|
||
color: #bbb;
|
||
border: 1px solid #bbb;
|
||
width: 200px;
|
||
height: 80px;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
line-height: 65px;
|
||
border: 1px solid silver;
|
||
}
|
||
|
||
.file_label > input {
|
||
width: 100px;
|
||
opacity: 0;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.file_label > img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: white;
|
||
border-radius: 10px;
|
||
display: none;
|
||
}
|
||
|
||
.box {
|
||
border: 1px solid #bbb;
|
||
border-radius: 5px;
|
||
background-color: white;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.list {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.title {
|
||
background-color: #f5f5f5;
|
||
color: black;
|
||
font-size: 18px;
|
||
border-bottom: 1px solid #e6e6e6;
|
||
line-height: 60px;
|
||
border-radius: 5px 5px 0 0;
|
||
text-indent: 15px;
|
||
}
|
||
|
||
.left_name {
|
||
width: 100px;
|
||
text-align: right;
|
||
font-size: 14px;
|
||
line-height: 56px;
|
||
color: #666;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.list > input {
|
||
margin: 10px 0;
|
||
width: 300px;
|
||
border: 1px solid #ccc;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.list > select {
|
||
width: 322px;
|
||
margin: 10px 0;
|
||
padding: 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.list > textarea {
|
||
resize: none;
|
||
width: 300px;
|
||
height: 100px;
|
||
padding: 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.save {
|
||
font-size: 16px;
|
||
width: 50px;
|
||
background-color: #009688;
|
||
color: white;
|
||
text-align: center;
|
||
padding: 8px 10px;
|
||
border-radius: 5px;
|
||
margin: 50px 200px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.save:hover {
|
||
background-color: #099688;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body style="padding: 50px">
|
||
<form id="form">
|
||
<div class="box">
|
||
<div class="title">logo管理</div>
|
||
<input type="hidden" name="id" value="{$info['id']}">
|
||
<div class="list">
|
||
<sapn class="left_name">规格1：</sapn>
|
||
<label class="file_label">
|
||
<input type="file" id="android_icon" name="android_icon" placeholder="选择图标" accept="image/png,image/jpeg" value=""/>
|
||
<if condition="$info['android_icon'] neq ''">
|
||
<img id="android_img" src="{$info['android_icon']}" style="display: block;">
|
||
<else/>
|
||
<img id="android_img">
|
||
</if>
|
||
</label>
|
||
</div>
|
||
<p style="margin-left: 120px;font-size: 12px;color: #999;">建议400px*100px</p>
|
||
<div class="list">
|
||
<sapn class="left_name">规格2：</sapn>
|
||
<label class="file_label">
|
||
<input type="file" id="pc_icon" name="pc_icon" placeholder="选择图标" accept="image/png,image/jpeg" value=""/>
|
||
<if condition="$info['pc_icon'] neq ''">
|
||
<img id="pc_img" src="{$info['pc_icon']}" style="display: block;">
|
||
<else/>
|
||
<img id="pc_img">
|
||
|
||
</if>
|
||
</label>
|
||
</div>
|
||
<p style="margin-left: 120px;font-size: 12px;color: #999;">建议200px*63px</p>
|
||
<div class="list">
|
||
<sapn class="left_name">规格3：</sapn>
|
||
<label class="file_label">
|
||
<input type="file" id="cashier_icon" name="cashier_icon" placeholder="选择图标" accept="image/png,image/jpeg" value=""/>
|
||
<if condition="$info['cashier_icon'] neq ''">
|
||
<img id="cashier_img" src="{$info['cashier_icon']}" style="display: block">
|
||
<else/>
|
||
<img id="cashier_img">
|
||
</if>
|
||
</label>
|
||
</div>
|
||
<p style="margin-left: 120px;font-size: 12px;color: #999;">建议160px*50px</p>
|
||
<div class="save">创建</div>
|
||
</div>
|
||
</form>
|
||
</body>
|
||
<script src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
|
||
<script type="text/javascript" src="__PUBLIC__/layui/layui.js"></script>
|
||
<script>
|
||
layui.use(['table','form','layer'], function() {
|
||
var table = layui.table, form = layui.form, layer = layui.layer;
|
||
$('#android_icon').on('change', function () {
|
||
if (this.files.length) {
|
||
var imgObj = this.files[0];
|
||
var imgType = ['image/jpeg', 'image/jpg', 'image/png'];
|
||
if (jQuery.inArray(imgObj.type, imgType) != -1) {
|
||
//是图片
|
||
var reader = new FileReader();
|
||
reader.readAsDataURL(imgObj);
|
||
reader.onload = function () {
|
||
$('#android_img').attr('src', this.result);
|
||
$('#android_img').show();
|
||
}
|
||
}
|
||
}
|
||
})
|
||
$('#pc_icon').on('change', function () {
|
||
if (this.files.length) {
|
||
var imgObj = this.files[0];
|
||
var imgType = ['image/jpeg', 'image/jpg', 'image/png'];
|
||
if (jQuery.inArray(imgObj.type, imgType) != -1) {
|
||
//是图片
|
||
var reader = new FileReader();
|
||
reader.readAsDataURL(imgObj);
|
||
reader.onload = function () {
|
||
$('#pc_img').attr('src', this.result);
|
||
$('#pc_img').show();
|
||
}
|
||
}
|
||
}
|
||
})
|
||
$('#cashier_icon').on('change', function () {
|
||
if (this.files.length) {
|
||
var imgObj = this.files[0];
|
||
var imgType = ['image/jpeg', 'image/jpg', 'image/png'];
|
||
if (jQuery.inArray(imgObj.type, imgType) != -1) {
|
||
//是图片
|
||
var reader = new FileReader();
|
||
reader.readAsDataURL(imgObj);
|
||
reader.onload = function () {
|
||
$('#cashier_img').attr('src', this.result);
|
||
$('#cashier_img').show();
|
||
}
|
||
}
|
||
}
|
||
})
|
||
$('.save').click(function () {
|
||
var fd = new FormData(document.getElementById('form'));
|
||
$.ajax({
|
||
url: "{:U('addIcon')}",
|
||
type: "POST",
|
||
data: fd,
|
||
processData: false, // jQuery不要去处理发送的数据
|
||
contentType: false, // jQuery不要去设置Content-Type请求头
|
||
success: function (res) {
|
||
if (res.status == 1) {
|
||
top.layer.msg(res.msg,{time:2000})
|
||
window.location.reload()
|
||
} else {
|
||
layer.msg(res.msg);
|
||
}
|
||
}
|
||
})
|
||
})
|
||
})
|
||
</script>
|
||
</html> |