首页完成热卖产品动态数据绑定

jpress-web-template-mallcms/src/main/webapp/templates/mallcms/assets/css/index.css

@@ -469,7 +469,7 @@ body{
 .buy_content .buy_item_list .buy_list:hover img{
     transform: scale(1.06);
 }
-.buy_content .buy_item_list .buy_list_big{
+.buy_content .buy_item_list .buy_list_medium{
     padding: 30px 0 0 36px;
     position: relative;
     width: 390px;
@@ -478,25 +478,27 @@ body{
     background-color: #ffffff;
     border: solid 1px #dfdfdf;
 }
-.buy_content .buy_item_list .buy_list_big p{
+.buy_content .buy_item_list .buy_list_medium p{
     margin-bottom: 10px;
     font-size: 20px;
     color: #666;
 }
-.buy_content .buy_item_list .buy_list_big span {
+.buy_content .buy_item_list .buy_list_medium span {
     font-size: 16px;
     color: #999999;
 }
-.buy_content .buy_item_list .buy_list_big .price {
+.buy_content .buy_item_list .buy_list_medium .price {
     margin-top: 62px;
     font-size: 16px;
     color: #e41f2b;
 }
-.buy_content .buy_item_list .buy_list_big .mall_pic{
+.buy_content .buy_item_list .buy_list_medium .mall_image_medium{
     position: absolute;
     top: 98px;
     left: 250px;
-    box-shadow: 0px 7px 8px 0px
+    width: 100px;
+    height: 90px;
+    box-shadow: 0px 7px 8px 0px;
     rgba(79, 79, 79, 0.15);
 }
 .buy_content .buy_item_list .buy_list_small {
@@ -508,11 +510,13 @@ body{
     background-color: #ffffff;
     border: solid 1px #dfdfdf;
 }
-.buy_content .buy_item_list .buy_list_small .mall_img{
+.buy_content .buy_item_list .buy_list_small .mall_image_small{
     margin-bottom: 10px;
     width: 68px;
     height: 67px;
-    box-shadow: 0px 7px 8px 0px
+    width: 65px;
+    height: 65px;
+    box-shadow: 0px 7px 8px 0px;
     rgba(79, 79, 79, 0.15);
 }
 .buy_content .buy_item_list .buy_list_small p{

jpress-web-template-mallcms/src/main/webapp/templates/mallcms/index.html

@@ -70,8 +70,123 @@
 	</div>
 	<div class="main">
 		<div class="container">
-			<!--U询价-->
+			<!--U电商-->
 			<div class="section-toggle01 show">
+				<div class="main-des">
+					<div class="str-bus"><span class="tabs"></span>实力商家</div>
+					<div class="dynamic-scroll">
+						<div class="scroll">
+                            <!--<@jp.apiData id="mall_stores_hot">
+                                <#assign text >
+                                    ${data!}
+                                </#assign>
+                                <#assign json=text?eval />
+                                <#list json.content as item>
+
+                                    <div class="item-list">
+                                        <img src="${item.logoUrl!}" alt="">
+                                        <div class="text">
+                                            <a href="" class="comp">${item.storeName}</a>
+                                            <div class="store-des">
+                                                <span class="text-ellipsis">主营产品：<span>${item.description!'-'}</span></span>
+                                                <span class="text-ellipsis">经营范围：<span>${item.storeApplication!'-'}</span></span>
+                                                <span class="text-ellipsis">电话：<span>${item.enterprise.enTel!'-'}</span></span>
+                                                <span class="text-ellipsis">地址：<span>${item.enterprise.enAddress!'-'}</span></span>
+                                            </div>
+                                        </div>
+                                        <a href="" class="btn">进入店铺 &gt;</a>
+                                    </div>
+
+                                </#list>
+                            </@jp.apiData>-->
+							<div class="item-list">
+								<img src="${CTPATH}/assets/images/qr-tech.png" alt="">
+								<div class="text">
+									<a href="" class="comp">上海柏建电子科技有限公司</a>
+									<div class="store-des">
+										<span class="text-ellipsis">主营产品：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
+										<span class="text-ellipsis">经营范围：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
+										<span class="text-ellipsis">电话：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
+										<span class="text-ellipsis">地址：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
+									</div>
+								</div>
+								<a href="" class="btn">进入店铺 &gt;</a>
+							</div>
+							<div class="item-list">
+								<img src="${CTPATH}/assets/images/qr-tech.png" alt="">
+								<div class="text">
+									<a href="" class="comp">上海柏建电子科技有限公司</a>
+									<div class="store-des">
+										<span class="text-ellipsis">主营产品：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
+										<span class="text-ellipsis">经营范围：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
+										<span class="text-ellipsis">电话：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
+										<span class="text-ellipsis">地址：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
+									</div>
+								</div>
+								<a href="" class="btn">进入店铺 &gt;</a>
+							</div>
+							<div class="item-list">
+								<img src="${CTPATH}/assets/images/qr-tech.png" alt="">
+								<div class="text">
+									<a href="" class="comp">上海柏建电子科技有限公司</a>
+									<div class="store-des">
+										<span class="text-ellipsis">主营产品：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
+										<span class="text-ellipsis">经营范围：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
+										<span class="text-ellipsis">电话：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
+										<span class="text-ellipsis">地址：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
+									</div>
+								</div>
+								<a href="" class="btn">进入店铺 &gt;</a>
+							</div>
+							<div class="item-list">
+								<img src="${CTPATH}/assets/images/qr-tech.png" alt="">
+								<div class="text">
+									<a href="" class="comp">上海柏建电子科技有限公司</a>
+									<div class="store-des">
+										<span class="text-ellipsis">主营产品：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
+										<span class="text-ellipsis">经营范围：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
+										<span class="text-ellipsis">电话：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
+										<span class="text-ellipsis">地址：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
+									</div>
+								</div>
+								<a href="" class="btn">进入店铺 &gt;</a>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="main-img"><a href="https://www.usoftmall.com/eCommerce/home/origin"><img src="${CTPATH}/assets/images/goStore.png" alt=""></a></div>
+			</div>
+			<!--U现货-->
+			<div class="section-toggle01">
+				<div class="buy_content">
+					<a href="https://www.usoftmall.com/"><img src="${CTPATH}/assets/images/buy_now.jpg" alt="" class="buy_now"></a>
+					<div class="buy_item_list">
+                        <@jp.apiData id="mall_products_new">
+                            <#assign text >
+                                ${data!}
+                            </#assign>
+                            <#assign json=text?eval />
+                            <#list json.data as item>
+								<#if item_index !=  0>
+
+                                <div class="buy_list buy_list_${item.metadatas.contExp_spec}">
+                                    <p>${item.metadatas.contExp_abstract!}</p>
+                                    <span>
+										${item.metadatas.contExp_remark!}
+									</span>
+                                    <div class="price">${item.remark!}</div>
+                                    <img src="${item.pictureLink!}" alt="" class="mall_image_${item.metadatas.contExp_spec}">
+                                </div>
+
+								</#if>
+
+                            </#list>
+                        </@jp.apiData>
+					</div>
+				</div>
+			</div>
+			<!--U询价-->
+			<div class="section-toggle01">
 				<div class="buy_content">
 					<a class='link_img' href="https://www.usoftmall.com/applyPurchase"><img src="${CTPATH}/assets/images/mall_xunjia.jpg" alt="" class="buy_now"></a>
 					<div class="inquiry_item">
@@ -190,125 +305,6 @@
 					</div>
 				</div>
 			</div>
-			<!--U电商-->
-			<div class="section-toggle01">
-				<div class="main-des">
-					<div class="str-bus"><span class="tabs"></span>实力商家</div>
-					<div class="dynamic-scroll">
-						<div class="scroll">
-							<div class="item-list">
-								<img src="${CTPATH}/assets/images/qr-tech.png" alt="">
-								<div class="text">
-									<a href="" class="comp">上海柏建电子科技有限公司</a>
-									<div class="store-des">
-										<span class="text-ellipsis">主营产品：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
-										<span class="text-ellipsis">经营范围：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
-										<span class="text-ellipsis">电话：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
-										<span class="text-ellipsis">地址：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
-									</div>
-								</div>
-								<a href="" class="btn">进入店铺 &gt;</a>
-							</div>
-							<div class="item-list">
-								<img src="${CTPATH}/assets/images/qr-tech.png" alt="">
-								<div class="text">
-									<a href="" class="comp">上海柏建电子科技有限公司</a>
-									<div class="store-des">
-										<span class="text-ellipsis">主营产品：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
-										<span class="text-ellipsis">经营范围：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
-										<span class="text-ellipsis">电话：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
-										<span class="text-ellipsis">地址：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
-									</div>
-								</div>
-								<a href="" class="btn">进入店铺 &gt;</a>
-							</div>
-							<div class="item-list">
-								<img src="${CTPATH}/assets/images/qr-tech.png" alt="">
-								<div class="text">
-									<a href="" class="comp">上海柏建电子科技有限公司</a>
-									<div class="store-des">
-										<span class="text-ellipsis">主营产品：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
-										<span class="text-ellipsis">经营范围：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
-										<span class="text-ellipsis">电话：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
-										<span class="text-ellipsis">地址：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
-									</div>
-								</div>
-								<a href="" class="btn">进入店铺 &gt;</a>
-							</div>
-							<div class="item-list">
-								<img src="${CTPATH}/assets/images/qr-tech.png" alt="">
-								<div class="text">
-									<a href="" class="comp">上海柏建电子科技有限公司</a>
-									<div class="store-des">
-										<span class="text-ellipsis">主营产品：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
-										<span class="text-ellipsis">经营范围：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
-										<span class="text-ellipsis">电话：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
-										<span class="text-ellipsis">地址：<span>蓝牙、MCU、PMU、硅麦、EEPROM等</span></span>
-									</div>
-								</div>
-								<a href="" class="btn">进入店铺 &gt;</a>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="main-img"><a href="https://www.usoftmall.com/eCommerce/home/origin"><img src="${CTPATH}/assets/images/goStore.png" alt=""></a></div>
-			</div>
-			<!--U现货-->
-			<div class="section-toggle01">
-				<div class="buy_content">
-					<a href="https://www.usoftmall.com/"><img src="${CTPATH}/assets/images/buy_now.jpg" alt="" class="buy_now"></a>
-					<div class="buy_item_list">
-						<div class="buy_list buy_list_big">
-							<p>KAE16000V01R</p>
-							<span>KKST</span>
-							<br>
-							<span>晶振</span>
-							<div class="price">￥0.28</div>
-							<img src="${CTPATH}/assets/images/mall_01.jpg" alt="" class="mall_pic">
-						</div>
-						<div class="buy_list buy_list_small">
-							<img src="${CTPATH}/assets/images/mall_02.jpg" alt="" class="mall_img">
-							<p>KAE16000V01R</p>
-							<span>KKST</span>
-							<br>
-							<span>晶振</span>
-							<div class="price">￥0.28</div>
-						</div>
-						<div class="buy_list buy_list_small">
-							<img src="${CTPATH}/assets/images/mall_02.jpg" alt="" class="mall_img">
-							<p>KAE16000V01R</p>
-							<span>KKST</span>
-							<br>
-							<span>晶振</span>
-							<div class="price">￥0.28</div>
-						</div>
-						<div class="buy_list buy_list_big">
-							<p>KAE16000V01R</p>
-							<span>KKST</span>
-							<br>
-							<span>晶振</span>
-							<div class="price">￥0.28</div>
-							<img src="${CTPATH}/assets/images/mall_01.jpg" alt="" class="mall_pic">
-						</div>
-						<div class="buy_list buy_list_small">
-							<img src="${CTPATH}/assets/images/mall_02.jpg" alt="" class="mall_img">
-							<p>KAE16000V01R</p>
-							<span>KKST</span>
-							<br>
-							<span>晶振</span>
-							<div class="price">￥0.28</div>
-						</div>
-						<div class="buy_list buy_list_small">
-							<img src="${CTPATH}/assets/images/mall_02.jpg" alt="" class="mall_img">
-							<p>KAE16000V01R</p>
-							<span>KKST</span>
-							<br>
-							<span>晶振</span>
-							<div class="price">￥0.28</div>
-						</div>
-					</div>
-				</div>
-			</div>
 		</div>
 	</div>
 </div>