页面适配手机,新增皮肤切换功能

This commit is contained in:
augushong
2020-03-19 14:48:57 +08:00
parent d26aec260f
commit 50d00ff77a
13 changed files with 440 additions and 116 deletions

View File

@@ -10,21 +10,21 @@ layui.config({
var html = "<link rel=\"stylesheet\" href=\"/static/lib/layui/lib/cropper/cropper.css\">\n" +
"<div class=\"layui-fluid showImgEdit\" style=\"display: none\">\n" +
" <div class=\"layui-form-item\">\n" +
" <div class=\"layui-input-inline layui-btn-container\" style=\"width: auto;\">\n" +
" <div class=\"layui-input-inline layui-btn-container\" style=\"width: auto;margin-left:0\">\n" +
" <label for=\"cropper_avatarImgUpload\" class=\"layui-btn layui-btn-primary\">\n" +
" <i class=\"layui-icon\">&#xe67c;</i>选择图片\n" +
" </label>\n" +
" <input class=\"layui-upload-file\" id=\"cropper_avatarImgUpload\" type=\"file\" value=\"选择图片\" name=\"file\">\n" +
" </div>\n" +
" <div class=\"layui-form-mid layui-word-aux\">头像的尺寸限定150x150px,大小在50kb以内</div>\n" +
" <div class=\"layui-form-mid layui-word-aux\" style=\"margin-left:0\">头像的尺寸限定150x150px,大小在50kb以内</div>\n" +
" </div>\n" +
" <div class=\"layui-row layui-col-space15\">\n" +
" <div class=\"layui-col-xs9\">\n" +
" <div class=\"layui-col-xs12 layui-col-md9 \">\n" +
" <div class=\"readyimg\" style=\"height:450px;background-color: rgb(247, 247, 247);\">\n" +
" <img src=\"\" >\n" +
" </div>\n" +
" </div>\n" +
" <div class=\"layui-col-xs3\">\n" +
" <div class=\"layui-col-xs12 layui-col-md3 \">\n" +
" <div class=\"img-preview\" style=\"width:200px;height:200px;overflow:hidden\">\n" +
" </div>\n" +
" </div>\n" +
@@ -63,6 +63,14 @@ layui.config({
data = e.data,
done = e.done;
if(area === true){
if(window.innerWidth > 900){
area = '900px'
}else{
area = ['100%','100%']
}
}
var content = $('.showImgEdit')
,image = $(".showImgEdit .readyimg img")
,preview = '.showImgEdit .img-preview'