ruoyi
/
RuoYi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

按钮同步效果图

This commit is contained in:
dy 2021-04-06 14:39:12 +08:00
parent 5122c416a2
commit 1096001bdb
1 changed files with 51 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
sino-activity/src/main/resources/templates/activity/info/add.html
View File

@ -4,7 +4,7 @@
<th:block th:include="include :: header('创建活动')"/> <th:block th:include="include :: header('创建活动')"/>
<th:block th:include="include :: datetimepicker-css"/> <th:block th:include="include :: datetimepicker-css"/>
<th:block th:include="include :: jquery-smartwizard-css"/> <th:block th:include="include :: jquery-smartwizard-css"/>
<th:block th:include="include :: jasny-bootstrap-css" /> <th:block th:include="include :: jasny-bootstrap-css"/>
</head> </head>
<style type='text/css'> <style type='text/css'>
.rightarea { .rightarea {
@ -23,25 +23,48 @@
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }
.col-sm-6 { .col-sm-6 {
width: 70%; width: 70%;
} }
.drawNamePic{
text-align:center; .drawNamePic {
text-align: center;
position: absolute; position: absolute;
top: 100px; top: 100px;
font-size: 37px; font-size: 37px;
left: 0px; left: 0px;
color:#F00; color: #F00;
width: 100%; width: 100%;
} }
.drawDescribePic{
text-align:center; .drawDescribePic {
text-align: center;
position: absolute; position: absolute;
top: 150px; top: 150px;
font-size: 20px; font-size: 20px;
left: 0px; left: 0px;
color:#F00; color: #F00;
width: 100%;
}
.drawbtnPic {
text-align: center;
position: absolute;
top: 70%;
font-size: 20px;
color: #F00;
left: 0px;
width: 100%;
}
.drawbtnPic2 {
text-align: center;
position: absolute;
top: 78%;
font-size: 20px;
color: #F00;
left: 0px;
width: 100%; width: 100%;
} }
@ -199,11 +222,14 @@
<label class="col-sm-4 control-label is-required">背景图片：</label> <label class="col-sm-4 control-label is-required">背景图片：</label>
<div class="fileinput fileinput-new" data-provides="fileinput"> <div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div> <div class="fileinput-preview thumbnail" data-trigger="fileinput"
style="width: 200px; height: 150px;"></div>
<div> <div>
<span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span> <span class="btn btn-white btn-file"><span
class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span>
<input type="file" id="pic"></span> <input type="file" id="pic"></span>
<a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a> <a href="#" class="btn btn-white fileinput-exists"
data-dismiss="fileinput">清除</a>
</div> </div>
</div> </div>
@ -238,7 +264,7 @@
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label is-required">自定义按钮2：</label> <label class="col-sm-4 control-label is-required">自定义按钮2：</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input name="btn2" placeholder="自定义按钮2" class="form-control" type="text" <input id="btn2" name="btn2" placeholder="自定义按钮2" class="form-control" type="text"
maxlength="30" onkeyup="updatePic(this)"> maxlength="30" onkeyup="updatePic(this)">
</div> </div>
</div> </div>
@ -264,6 +290,12 @@
<img id="imgPic" src="../../img/1.jpg" width="380" height="500"> <img id="imgPic" src="../../img/1.jpg" width="380" height="500">
<span class="drawNamePic" id="drawnamePic">活动标题</span> <span class="drawNamePic" id="drawnamePic">活动标题</span>
<span class="drawDescribePic" id="drawDescribePic">活动描述</span> <span class="drawDescribePic" id="drawDescribePic">活动描述</span>
<span class="drawbtnPic">
<a id="btn1Pic" class="btn btn-success btn-xs ">自定义按钮1</a>
</span>
<span class="drawbtnPic2">
<a id="btn2Pic" class="btn btn-success btn-xs ">自定义按钮2</a>
</span>
</div> </div>
</div> </div>
@ -393,7 +425,7 @@
<th:block th:include="include :: footer"/> <th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/> <th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: jquery-smartwizard-js"/> <th:block th:include="include :: jquery-smartwizard-js"/>
<th:block th:include="include :: jasny-bootstrap-js" /> <th:block th:include="include :: jasny-bootstrap-js"/>
<script th:inline="javascript"> <script th:inline="javascript">
var prefix = ctx + "activity/info" var prefix = ctx + "activity/info"
@ -620,14 +652,15 @@
}); });
</script> </script>
<script th:inline="javascript"> <script th:inline="javascript">
function updatePic(val){ function updatePic(val) {
var id = val.id; var id = val.id;
var value = val.value; var value = val.value;
$("#"+id+"Pic").text(value); $("#" + id + "Pic").text(value);
} }
$("#pic").change(function (){
$("#pic").change(function () {
previewURL(this); previewURL(this);
if($(this).val()!='') { if ($(this).val() != '') {
// var formData = new FormData(); // var formData = new FormData();
// formData.append('file', $(this)[0].files[0]); // formData.append('file', $(this)[0].files[0]);
// $.ajax({ // $.ajax({
@ -644,7 +677,7 @@
// contentType: false, // contentType: false,
// processData: false // processData: false
// }); // });
$("#imgPic").attr("src",$(this).val()); $("#imgPic").attr("src", $(this).val());
} }
}); });
@ -655,7 +688,7 @@
reader.onload = function (e) { reader.onload = function (e) {
//$('#prevImg').attr('src', e.target.result); //$('#prevImg').attr('src', e.target.result);
$("#imgPic").attr("src",e.target.result); $("#imgPic").attr("src", e.target.result);
//$('#preview').css("background", "url(" + e.target.result +")" + " right top no-repeat"); //$('#preview').css("background", "url(" + e.target.result +")" + " right top no-repeat");
} }