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 :: datetimepicker-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>
<style type='text/css'>
.rightarea {
@ -23,25 +23,48 @@
overflow-x: hidden;
overflow-y: auto;
}
.col-sm-6 {
width: 70%;
}
.drawNamePic{
text-align:center;
.drawNamePic {
text-align: center;
position: absolute;
top: 100px;
font-size: 37px;
left: 0px;
color:#F00;
color: #F00;
width: 100%;
}
.drawDescribePic{
text-align:center;
.drawDescribePic {
text-align: center;
position: absolute;
top: 150px;
font-size: 20px;
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%;
}
@ -199,11 +222,14 @@
<label class="col-sm-4 control-label is-required">背景图片：</label>
<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>
<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>
<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>
@ -238,7 +264,7 @@
<div class="form-group">
<label class="col-sm-4 control-label is-required">自定义按钮2：</label>
<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)">
</div>
</div>
@ -264,6 +290,12 @@
<img id="imgPic" src="../../img/1.jpg" width="380" height="500">
<span class="drawNamePic" id="drawnamePic">活动标题</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>
@ -393,7 +425,7 @@
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-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">
var prefix = ctx + "activity/info"
@ -620,14 +652,15 @@
});
</script>
<script th:inline="javascript">
function updatePic(val){
function updatePic(val) {
var id = val.id;
var value = val.value;
$("#"+id+"Pic").text(value);
$("#" + id + "Pic").text(value);
}
$("#pic").change(function (){
$("#pic").change(function () {
previewURL(this);
if($(this).val()!='') {
if ($(this).val() != '') {
// var formData = new FormData();
// formData.append('file', $(this)[0].files[0]);
// $.ajax({
@ -644,7 +677,7 @@
// contentType: false,
// processData: false
// });
$("#imgPic").attr("src",$(this).val());
$("#imgPic").attr("src", $(this).val());
}
});
@ -655,7 +688,7 @@
reader.onload = function (e) {
//$('#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");
}