按钮同步效果图

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

View File

@ -23,9 +23,11 @@
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }
.col-sm-6 { .col-sm-6 {
width: 70%; width: 70%;
} }
.drawNamePic { .drawNamePic {
text-align: center; text-align: center;
position: absolute; position: absolute;
@ -35,6 +37,7 @@
color: #F00; color: #F00;
width: 100%; width: 100%;
} }
.drawDescribePic { .drawDescribePic {
text-align: center; text-align: center;
position: absolute; position: absolute;
@ -45,6 +48,26 @@
width: 100%; 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%;
}
</style> </style>
<body class="white-bg"> <body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content"> <div class="wrapper wrapper-content animated fadeInRight ibox-content">
@ -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>
@ -625,6 +657,7 @@
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() != '') {