交互优化

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

@@ -51,12 +51,12 @@ body{
 .header{
     position: relative;
     width: 100%;
-    height: 140px;
+    height: 100px;
     background: #222;
 }
 .header div.hr{
     position: absolute;
-    top: 70px;
+    top: 50px;
     left: 0;
     width: 100%;
     height: 1px;
@@ -66,18 +66,18 @@ body{
     margin: 0 auto;
     padding: 0;
     width: 1200px;
-    height: 140px;
+    height: 100px;
     text-align: center;
 }
 .header .container .top{
     width: 100%;
-    height: 70px;
-    line-height: 70px;
+    height: 50px;
+    line-height: 50px;
 }
 .header .container .bottom{
     width: 100%;
-    height: 70px;
-    line-height: 70px;
+    height: 50px;
+    line-height: 50px;
     text-align: left;
 }
 .header .container .bottom ul{
@@ -95,13 +95,13 @@ body{
     margin-right: 0;
 }
 .header .container .bottom ul li a{
-    font-size: 18px;
+    font-size: 16px;
     color: #fff;
 }
 .header .container .bottom ul li a:before{
     content: "";
     position: absolute;
-    bottom: 23px;
+    bottom: 15px;
     left: 50%;
     height: 1px;
     border-bottom: 2px solid #e41f2b;
@@ -157,6 +157,7 @@ body{
     width: 8px;
     height: 8px;
     background-color: #dfdfe1;
+    border: none;
 }
 .banner .carousel-indicators li.active{
     width: 24px;
@@ -217,7 +218,7 @@ body{
     height: 140px;
     width: 240px;
     text-align: center;
-    border-right: 1px solid #435e76;
+    border-right: 1px solid rgba(255,255,255,.16);
 }
 .adv .adv-list:hover{
     background: rgba(255,255,255,.1)
@@ -375,6 +376,7 @@ body{
     background-color: #e56971
 }
 .main-section .main .main-des .dynamic-scroll{
+    position: relative;
     width: 820px;
     height: 360px;
     overflow: hidden;
@@ -384,6 +386,12 @@ body{
     overflow: hidden;
     margin-bottom: 21px;
 }
+.main-section .main .main-des .scroll .store-hr{
+    position: absolute;
+    margin-top: -12px;
+    width: 100%;
+    border: 1px dashed #f0f0f0;
+}
 .main-section .main .main-des .scroll .item-list:hover a.btn{
     display: inline-block;
 }
@@ -485,11 +493,14 @@ body{
     float: left;
     box-sizing: border-box;
 }
-.buy_content .buy_item_list .buy_list:hover img{
-    transform: scale(1.06);
-    box-shadow: 0px 7px 8px 0px;
-rgba(79, 79, 79, 0.15);
+.buy_content .buy_item_list .buy_list:hover{
+    box-shadow: 0px 0px 12px -1px;
+    rgba(79, 79, 79, 0.15);
+    transform: scale(1.01);
 }
+/*.buy_content .buy_item_list .buy_list img:hover{*/
+    /*transform: scale(1.06);*/
+/*}*/
 .buy_content .buy_item_list .buy_list_medium{
     padding: 30px 0 0 36px;
     position: relative;
@@ -519,6 +530,8 @@ rgba(79, 79, 79, 0.15);
     left: 250px;
     width: 100px;
     height: 90px;
+    box-shadow: 0px 7px 8px 0px;
+rgba(79, 79, 79, 0.15);
 }
 .buy_content .buy_item_list .buy_list_small {
     padding-top: 30px;
@@ -533,6 +546,8 @@ rgba(79, 79, 79, 0.15);
     margin: 10px auto;
     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{
     margin-bottom: 8px;
@@ -596,7 +611,7 @@ rgba(79, 79, 79, 0.15);
 }
 .inquiry_item .inquiry_content table tbody tr{
     width: 850px;
-    height: 47px;
+    height: 42px;
     vertical-align: middle;
     background-color: #fff;
     border-bottom: dotted 1px #f0f0f0;
@@ -896,7 +911,6 @@ td.inquiry_btn a{
     margin-bottom: 35px;
 }
 .c_main .c_content .c_item_list ul li div{
-    position: relative;
     max-width: 160px;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -919,10 +933,11 @@ td.inquiry_btn a{
     margin-right: 120px;
 }
 .c_main .c_content .c_item_list ul li a{
+    position: relative;
     font-size: 14px;
     color: #333333;
     display: inline-block;
-    width: 120px;
+    /*width: 120px;*/
     margin-left: 13px;
 }
 .c_main .c_content .c_item_list ul li a.c_width{
@@ -1506,27 +1521,25 @@ td.inquiry_btn a{
     float: left;
 }
 .k_among .k_among_bottom .k_list_one div{
-    position: relative;
     float: left;
     height: 20px;
     width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: left;
 }
 .k_among .k_among_bottom .k_list_one a{
-    float: left;
-    display: inline-block;
+    position: relative;
     margin-left: 12px;
-    width: 180px;
     font-size: 14px;
     color: #333333;
     text-align: left;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
 }
 .k_among .k_among_bottom .k_list_one a:before{
     content: "";
     position: absolute;
-    bottom: -2px;
+    bottom: 0;
     left: 50%;
     height: 1px;
     border-bottom: 2px solid #e41f2b;
@@ -1584,11 +1597,37 @@ td.inquiry_btn a{
 }
 /*第一列上部*/
 .x_content_head {
+    position: relative;
     width: 100%;
     height: 250px;
     background: #fff;
     box-shadow: 2px 2px 10px #eee;
 }
+.x_content_head .cover{
+    position: absolute;
+    bottom: 0;
+    left: 2px;
+    width: 180px;
+    padding: 0;
+}
+.x_content_head .cover img{
+    width: 180px;
+    height: auto;
+}
+.x_content_head .cover>div{
+    position:absolute;
+    bottom: 8px;
+    left: 0;
+    width: 180px;
+    padding: 0;
+}
+.x_content_head .cover>div span{
+    font-size: 16px;
+    color: #fff;
+}
+.x_content_head .cover>div span:first-child {
+    margin-right: 10px;
+}
 .x_content_head img,.x_content_head div {
     display: inline-block;
 }
@@ -1626,6 +1665,13 @@ td.inquiry_btn a{
     -webkit-line-clamp: 2;
     overflow: hidden;
 }
+.x_content_head_text p.x_first.x_gray_overflow a{
+    color: #232423;
+    font-size: 16px;
+}
+.x_content_head_text p.x_first.x_gray_overflow:hover a{
+    color: #e41f2b;
+}
 .x_content_head_text p.x_gray_text a{
     font-size: 14px;
     color: #999;
@@ -1634,7 +1680,7 @@ td.inquiry_btn a{
     color: #e41f2b;
 }
 .x_content_head_text p.x_gray_text:hover a.detail{
-    color: #999;
+    color: #e41f2b;
 }
 .x_content_head_text p.x_gray_text.x_gray_overflow{
     width: 180px;

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

@@ -84,18 +84,16 @@ $(function () {
     // $('.k_item_list').on('click', function () {
     //     $(this).addClass('active').siblings().removeClass('active');
     // })
-    $(".k_item_list").mouseover(function(){
-        $(this).addClass("active");
-    }).mouseout(function(){
-        $(this).removeClass("active");
+    $(".k_item_list").hover(function(){
+        $(this).addClass("active")
+               .siblings().removeClass('active');
     });
-    $(".u_char").mouseover(function(){
-        $(this).addClass("active");
-    }).mouseout(function(){
-        $(this).removeClass("active");
+    $(".u_char").hover(function(){
+        $(this).addClass("active")
+               .siblings().removeClass('active');
     });
     // 资讯
-    $('.title_list_active').on('click', function () {
+    $('.title_list_active').hover(function () {
         var index = $(this).index();
         $(this).addClass('active').siblings().removeClass('active');
         $('.hot_info_list_active').eq(index).addClass('show').siblings().removeClass('show');

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

@@ -190,6 +190,7 @@
 					</div>
 					<a href="https://www.usoftmall.com/store/powerking" class="btn">进入店铺 &gt;</a>
 				</div>
+				<div class="store-hr"></div>
 				<div class="item-list">
 					<img src="https://dfs.ubtob.com/group1/M00/18/40/CgpkyFj3FaGAI6NTAABQ3KxKbgA705.jpg" alt="">
 					<div class="text">
@@ -203,6 +204,7 @@
 					</div>
 					<a href="https://www.usoftmall.com/store/well" class="btn">进入店铺 &gt;</a>
 				</div>
+				<div class="store-hr"></div>
 				<div class="item-list">
 					<img src="https://dfs.ubtob.com/group1/M00/18/40/CgpkyFj3FzSASfI_AABfTx_Dw4Q978.jpg" alt="">
 					<div class="text">
@@ -216,6 +218,7 @@
 					</div>
 					<a href="https://www.usoftmall.com/store/e-shine" class="btn">进入店铺 &gt;</a>
 				</div>
+				<div class="store-hr"></div>
 				<div class="item-list">
 					<img src="https://dfs.ubtob.com/group1/M00/18/93/CgpkyFkIHx2AeTdhAAANg8v9lyA793.jpg" alt="">
 					<div class="text">
@@ -229,6 +232,7 @@
 					</div>
 					<a href="https://www.usoftmall.com/store/compa" class="btn">进入店铺 &gt;</a>
 				</div>
+				<div class="store-hr"></div>
 			</div>
 		</div>
 	</div>
@@ -416,7 +420,7 @@
 							</#assign>
 							<#assign json=text?eval />
 							<#list json.data.list as item>
-								<li><div style="width:160px; float: left;position: relative;"><div class="c_cir"><a href="${item.url!}">${item.task_title!}</a></div></div><span class="c_price c-price">${item.cove_desc!}<b></b></span><span class="c_time"><img
+								<li><div style="width:160px; float: left;"><div class="c_cir"><a href="${item.url!}">${item.task_title!}</a></div></div><span class="c_price c-price">${item.cove_desc!}<b></b></span><span class="c_time"><img
 										src="${CTPATH}/assets/images/c_04.png" alt="">${item.start_time!}</span><span class="c_right"> &gt; </span></li>
 							</#list>
 						</@jp.apiData>
@@ -435,7 +439,7 @@
 								<li>
 									<div class="c_name"><span>${item.username!}</span></div>
 									<span class="c_got">${item.bid_status!}</span>
-									<div style="max-width: 200px; float: left;"><a href="${item.url!}" class="c_width">${item.task_title!}</a></div>
+									<div style="width: 110px; float: left;"><a href="${item.url!}" class="c_width">${item.task_title!}</a></div>
 									<span class="c_time c-time">${item.bid_time!}</span>
 									<span class="c_right"> &gt; </span>
 								</li>
@@ -655,10 +659,14 @@
 						<@jp.indexPage module="index_uk_coverman" pageSize="1">
 							<#list page.getList() as content>
 								<img src="${content.thumbnail!}" alt="${content.title!}">
+								<div class="cover">
+									<img src="${CTPATH}/assets/images/cover.png" alt="">
+									<div><span>封面人物</span><span>第二十期</span></div>
+								</div>
 								<div class="x_content_head_text">
-									<p class="x_first x_gray_overflow">${content.title!}</p>
+									<p class="x_first x_gray_overflow"><a href="${content.flag!}">${content.title!}</a></p>
 									<p class="x_gray_text x_gray_overflow">
-										<a href="${content.flag!}">${content.remarks!}</a>
+										<span>${content.remarks!}</span>
 										<a href="${content.flag!}" class="detail">[详情]</a>
 									</p>
 								</div>