<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
<title>热卖商品分析-xxx热卖单品 V1.0.1</title>
<link rel="stylesheet" href="../../css/bootstrap.css"/>
<link rel="stylesheet" href="../../css/bootstrapValidator.css"/>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/bootstrapValidator.js"></script>
<style type="text/css">
.modal-header{
padding: 0;
}
.div-main h3{
font-size: 14px;
height:42px;
line-height: 42px;
margin: 0;
padding: 0 80px 0 20px;
}
.div-main label{
margin-left: 0;
font-weight: 400;
}
.div-main {
}
.form-control{
width: 100px;
}
.modal-content{
max-height: 15000px;
height: auto;
}
.form-inline{
margin-left: 30px;
}
.container-item{
margin-left: 20px;
margin-right: 20px;
}
.list-inline{
margin-left: 30px;
}
.font-item{
font-size: 13px;
}
.img-item{
width: 203px;
}
.li-item{
cursor: pointer;
width: 222px;
height: 300px;
margin-left: 10px;
}
.card {
margin-left: 10px;
}
.div-img{
height: 100%;
width: 100%;
float: left;
margin-bottom: 10px;
}
.span-sale{
margin-left: 80px;
}
.p-desc {
border: 1px;
line-height: 30px;
height: 60px;
max-height: 60px;
overflow: hidden;/* 超出的文本隐藏 */
text-overflow: ellipsis; /* 溢出用省略号显示 */
display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical; /* 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数 */
-webkit-line-clamp: 2; /* 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */
}
</style>
</head>
<body>
<!--模态框-->
<div class="div-main">
<div class="modal-content">
<form id="formId" class="form-inline" role="form" action="/selenium/getskwsalebyclass" method="post">
<div class="modal-header">
<h3>商品分析-xxx热卖单品</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label class="sr-1" for="goodsClassId">品类：</label>
<select class="form-control" id="goodsClassId" name="goodsClass" onchange="selectOnChang(this)">
<option value="连衣裙">连衣裙</option>
<option value="衬衫">衬衫</option>
</select>
</div>
</div>
</form>
<div class="container-item" id="mainContentDiv">
<ul class="list-inline" id="mainContentUl">
<li class="li-item">
<div class="card">
<div class="div-img">
<img class="card-img-top img-item" src="https://img1.vvic/upload/1634153146192_501848.png?x-oss-process=image/resize,mfit,h_230,w_230" alt="加载中">
</div>
<div class="card-body">
<h5 class="card-title font-item">
<span>￥60</span>
<span class="span-sale">销量:129561</span>
</h5>
<p class="card-text font-item p-desc">实拍 刺绣两件套连衣裙</p>
</div>
</div>
</li>
<li class="li-item">
<div class="card">
<div class="div-img">
<img class="card-img-top img-item" src="https://img1.vvic/upload/1634153146192_501848.png?x-oss-process=image/resize,mfit,h_230,w_230" alt="加载中">
</div>
<div class="card-body">
<h5 class="card-title font-item">
<span>￥60</span>
<span class="span-sale">销量:129561</span>
</h5>
<p class="card-text font-item p-desc">实拍2021新款春夏季裙子碎花连衣裙女装复古法式显瘦a字小个子</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(
console.log("$.in")
);
function selectOnChang(obj) {
// 构造请求参数
var goodsClass = obj.options[obj.selectedIndex].value;
var dataValue = {};
dataValue.goodsClass = goodsClass;
var dataParam = {};
dataParam.data = dataValue;
dataParam.data = JSON.stringify(dataValue);
$.ajax({
url: "/selenium/getskwsalebyclass",
type: "POST",
contentType: "application/x-www-form-urlencoded",
data: dataParam,
success:function (message) {
var retJson = JSON.parse(message);
console.log(retJson);
var flag = retJson['flag'];
var total = retJson['total'];
var mainContentDiv = $("#mainContentUl");
mainContentDiv.empty();
if(flag && total > 0){
console.log("获取数据成功!");
var dataArray = retJson['data'];
for(var index in dataArray){
var subJson = dataArray[index];
var name = subJson['itemName'];
var url = subJson['itemPicUrl'];
var price = subJson['showPrice'];
var sale = subJson['itemSale'];
var liStr = " <li class=\"li-item\">\n" +
" <div class=\"card\">\n" +
" <div class=\"div-img\">\n" +
" <img class=\"card-img-top img-item\" src=\""+url+"\" alt=\"加载中\">\n" +
" </div>\n" +
" <div class=\"card-body\">\n" +
" <h5 class=\"card-title font-item\">\n" +
" <span>￥"+price+"</span>\n" +
" <span class=\"span-sale\">销量:"+sale+"</span>\n" +
" </h5>\n" +
" <p class=\"card-text font-item\">"+name+"</p>\n" +
" </div>\n" +
" </div>\n" +
" </li>";
mainContentDiv.append(liStr);
}
}else{
console.log("未获取到数据!");
mainContentDiv.append("未获取到数据!");
}
},
error:function (message) {
console.log("提交失败"+JSON.stringify(message));
}
});
}
</script>
</body>
</html>
更多推荐
bootstrap 卡片card图片布局
发布评论