<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport"
|
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<title>栏目详情</title>
|
<!--css-->
|
<link rel="stylesheet" type="text/css" href="css/DOUI.min.css" />
|
<!--js-->
|
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
|
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
|
<script src="js/DOUI.min.js" type="text/javascript" charset="utf-8"></script>
|
<style>
|
/*原样式*/
|
h1, h2, h3, h4, h5, h6, strong {
|
font-weight: normal
|
}
|
|
h1, h2, h3, h4, h5, h6, p, ul, ol {
|
margin: 0;
|
font-weight: normal
|
}
|
|
ul, ol {
|
list-style: none;
|
padding: 0
|
}
|
|
a {
|
text-decoration: none;
|
color: #777;
|
font-size: 12px
|
}
|
|
a:focus {
|
background: transparent
|
}
|
|
a:focus {
|
outline: 0
|
}
|
|
a:active {
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
|
}
|
|
body {
|
background: #efefef;
|
font-family: "微软雅黑";
|
margin: 0
|
}
|
|
.rich_media_title {
|
margin: 0 !important
|
}
|
|
.titlePic {
|
width: 100%;
|
overflow: hidden;
|
margin: 0;
|
background: #fff
|
}
|
|
.titlePic img {
|
width: 100%;
|
float: left
|
}
|
|
.title {
|
background: white;
|
padding-top: 40px;
|
padding-bottom: 4px
|
}
|
|
.line {
|
border-top: 1px solid #efefef;
|
height: 1px;
|
position: relative
|
}
|
|
.line h5 {
|
background: white;
|
display: inline-block;
|
width: 160px;
|
text-align: center;
|
font-size: 15px;
|
color: #888;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
margin-left: -80px;
|
margin-top: -11px
|
}
|
|
.cont-icon {
|
overflow: hidden;
|
box-sizing: border-box;
|
padding: 5px;
|
padding-top: 4px
|
}
|
|
.cont-icon li {
|
width: 20%;
|
padding: 5px;
|
float: left;
|
box-sizing: border-box
|
}
|
|
.cont-icon li a {
|
display: inline-block;
|
width: 100%;
|
height: 100%;
|
border-radius: 50%
|
}
|
|
.cont-icon li:first-of-type a {
|
background: url(../img/wx.png) no-repeat bottom;
|
background-size: 70% 70%
|
}
|
|
.cont-icon li:nth-of-type(2) a {
|
background: url(../img/qqq.png) no-repeat bottom;
|
background-size: 70% 70%
|
}
|
|
.cont-icon li:nth-of-type(3) a {
|
background: url(../img/pyq.png) no-repeat bottom;
|
background-size: 70% 70%
|
}
|
|
.cont-icon li:nth-of-type(4) a {
|
background: url(../img/kj.png) no-repeat bottom;
|
background-size: 70% 70%
|
}
|
|
.cont-icon li:nth-of-type(5) a {
|
background: url(../img/wb.png) no-repeat bottom;
|
background-size: 70% 70%
|
}
|
|
.goods {
|
background: white;
|
margin-top: 10px
|
}
|
|
.goods h5 {
|
line-height: 40px;
|
font-size: 15px;
|
color: #333;
|
text-align: center
|
}
|
|
.goods ul {
|
display: flex;
|
flex-wrap: wrap;
|
box-sizing: border-box;
|
border-top: 1px solid #efefef
|
}
|
|
.goods li {
|
width: 50%;
|
box-sizing: border-box;
|
padding: 5px;
|
border-bottom: 1px solid #efefef
|
}
|
|
.goods li a {
|
display: inline-block;
|
padding: 5px;
|
width: 100%;
|
color: #333;
|
font-size: 14px;
|
box-sizing: border-box
|
}
|
|
.goods li:nth-of-type(odd) {
|
border-right: 1px solid #efefef
|
}
|
|
.goods li img {
|
width: 100%;
|
border-radius: 10px
|
}
|
|
.goods li p:first-of-type {
|
line-height: 26px;
|
overflow: hidden;
|
font-size: 14px;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical
|
}
|
|
.icon {
|
display: inline-block;
|
background: #ff3083;
|
text-align: center;
|
padding: 0 6px;
|
font-size: 12px;
|
border-radius: 4px;
|
color: #fff;
|
line-height: 20px;
|
margin-right: 14px
|
}
|
|
.icon.tb {
|
background: #f40
|
}
|
|
.icon.tm {
|
background: #ff3083
|
}
|
|
.goods li p:nth-of-type(2) {
|
padding: 6px 0;
|
padding-bottom: 0;
|
font-size: 18px;
|
color: #ff3044;
|
font-weight: bold
|
}
|
|
.goods li p:nth-of-type(2) span {
|
font-size: 14px;
|
font-weight: normal
|
}
|
|
.goods li p:nth-of-type(3) {
|
font-size: 12px;
|
color: #ff3044;
|
line-height: 26px;
|
overflow: hidden
|
}
|
|
.goods li p:nth-of-type(3) span:first-of-type {
|
color: #999;
|
text-decoration: line-through;
|
float: left
|
}
|
|
.goods li p:nth-of-type(3) span:last-of-type {
|
float: right
|
}
|
|
.goods li p:last-of-type {
|
padding-top: 6px;
|
overflow: hidden;
|
font-size: 12px
|
}
|
|
.fl {
|
float: left;
|
color: #888;
|
font-size: 13px
|
}
|
|
.fr {
|
display: inline-block;
|
float: right;
|
background: #f8b551;
|
color: #fff;
|
border-radius: 4px;
|
padding: 1px 4px 2px 4px
|
}
|
|
.zdy {
|
background-color: white
|
}
|
|
.zdy img {
|
max-width: 88%;
|
height: auto;
|
margin: auto
|
}
|
|
/*我的样式*/
|
/*商品单框*/
|
.homespdan {
|
width: 49%;
|
margin-bottom: 2vw;
|
padding-bottom: 0.8rem;
|
position: relative;
|
background-color: white;
|
}
|
|
.homespcon {
|
width: 94%;
|
margin-left: 3%;
|
position: relative;
|
overflow: hidden;
|
}
|
/*商品图片*/
|
.homespimg {
|
width: 49vw;
|
height: 49vw;
|
}
|
|
.homespimg>img {
|
width: 100%;
|
height: 100%;
|
display: block;
|
}
|
/*商品标题*/
|
.homesptype {
|
width: 2rem;
|
height: 1rem;
|
position: absolute;
|
left: 0;
|
top: 0.4rem;
|
}
|
/*返利图标*/
|
.homespfanimg {
|
width: 1.4rem;
|
height: 1.1rem;
|
margin-right: 0.2rem;
|
display: block;
|
}
|
/*商品券*/
|
.homespquan {
|
padding: 0.3rem 1rem;
|
color: white;
|
background-image: url(img/index_quan.png);
|
background-size: 100% 100%;
|
}
|
</style>
|
</head>
|
|
<body class="displayNone">
|
<div id="allwai" class="allwai">
|
|
<!--好像是标题栏区域-->
|
<div id="test"></div>
|
|
<!--好像是文字内容区域-->
|
<div class="page">
|
<div class="titlePic">
|
<img src="./img/hcj_banner_default.png" />
|
</div>
|
<div class="zdy"></div>
|
<div class="title" style="display: none;">
|
<div class="line">
|
<h5>分享给朋友</h5>
|
</div>
|
<ul class="cont-icon">
|
<li><a href="#"></a></li>
|
<li><a href="#"></a></li>
|
<li><a href="#"></a></li>
|
<li><a href="#"></a></li>
|
<li><a href="#"></a></li>
|
</ul>
|
</div>
|
<div class="goods">
|
<h5>编辑推荐</h5>
|
<ul class="content"></ul>
|
</div>
|
</div>
|
|
<!--商品卡片区域-->
|
<div class="fboxWrap Xbetween" style="width: 100%;">
|
|
<!--Vue循环添加商品单框-->
|
<div v-for="item in splist.list" class="homespdan do-click"
|
v-on:click="click_spdan(item.auctionId,'',item.title)">
|
|
<!--商品图片-->
|
<div class="homespimg fboxRow Xcenter Ycenter">
|
<img v-bind:src="item.pictUrl" />
|
</div>
|
<!--商品标题-->
|
<div class="homespcon" style="margin-top: 0.5rem;">
|
<!--来源-->
|
<img v-if='item.shopType==1' class="homesptype"
|
src="img/index_type1.png" /> <img v-if='item.shopType==2'
|
class="homesptype" src="img/index_type2.png" />
|
<!--标题文字-->
|
<div class="font-ell2 font3" style="line-height: 1.5;"> {{item.title}}</div>
|
</div>
|
<!--商品返利和销量-->
|
<div class="homespcon fboxRow Ycenter" style="margin-top: 1rem;">
|
<!--返利-->
|
<div class="fboxRow Ycenter">
|
<img class="homespfanimg" src="img/index_fan.png" />
|
<div v-if="item.taoBaoHongBaoInfo.hongbao>0"
|
class="font-gray font1">￥{{item.taoBaoHongBaoInfo.hongbao}}</div>
|
<div v-if="item.taoBaoHongBaoInfo.hongbao<=0"
|
class="font-gray font1">{{item.taoBaoHongBaoInfo.rate}}</div>
|
</div>
|
<!--销量-->
|
<div class="flex1 fboxRow Xend Ycenter"
|
style="margin-left: 1rem; overflow: hidden;">
|
<div class="font-gray font-ell1 font1">月销量：{{item.biz30day}}</div>
|
</div>
|
</div>
|
<!--价格相关-->
|
<div v-if="item.taoBaoQuanInfo" class="homespcon"
|
style="margin-top: 1.2rem;">
|
<!--淘宝原划掉价格-->
|
<div v-if='item.shopType==1' class="font-gray font1">淘宝价：￥{{item.zkPrice}}</div>
|
<div v-if='item.shopType==2' class="font-gray font1">天猫价：￥{{item.zkPrice}}</div>
|
<!--目前支付价格-->
|
<div class="fboxRow Xbetween Ycenter" style="margin-top: 0.5rem;">
|
<!--价格-->
|
<div class="font6" style="color: #F12A23; font-weight: bold;">￥{{item.quanPrice}}</div>
|
<!--券-->
|
<div class="homespquan fboxRow Ycenter font1">券￥{{item.taoBaoQuanInfo.couponAmount}}</div>
|
</div>
|
</div>
|
<div v-if="!item.taoBaoQuanInfo" class="homespcon"
|
style="margin-top: 1.2rem;">
|
<!--淘宝原划掉价格-->
|
|
<div v-if='item.shopType==1' class="font-gray font1">淘宝价：￥{{item.reservePrice}}</div>
|
<div v-if='item.shopType==2' class="font-gray font1">天猫价：￥{{item.reservePrice}}</div>
|
|
<!--目前支付价格-->
|
<div class="fboxRow Xbetween Ycenter" style="margin-top: 0.5rem;">
|
<!--价格-->
|
<div class="font6" style="color: #F12A23; font-weight: bold;">￥{{item.zkPrice}}</div>
|
</div>
|
</div>
|
|
</div>
|
<!--Vue循环结束-->
|
|
</div>
|
<!--商品卡片区域结束-->
|
|
</div>
|
</body>
|
|
</html>
|
|
|
<script type="text/javascript" src="../js/base64.js"></script>
|
<script type="text/javascript"
|
src="//g.alicdn.com/mtb/lib-applink/0.3.4/??callApp.js,linksdk.js"></script>
|
<script type="text/javascript">
|
var falg = false;
|
|
$(function() {
|
|
var agent = navigator.userAgent;
|
// $("#test").text(agent);
|
var index1 = agent.indexOf("QQ");
|
var index2 = agent.indexOf("Windows");
|
var index3 = agent.indexOf("360");
|
var index4 = agent.indexOf("UCBrowser");
|
var index5 = agent.indexOf("MicroMessenger");
|
var index6 = agent.indexOf("Weibo");
|
var index7 = agent.indexOf("Firefox");
|
|
if (index1 >= 0 || index2 >= 0 || index3 >= 0 || index4 >= 0
|
|| index5 >= 0 || index6 >= 0 || index7 >= 0) {
|
falg = true;
|
$.getScript("../js/tbsdk.js");
|
}
|
|
var id = getArgsFromHref(location.href, "id");
|
|
$.post("../getRecommendSectionDetail", {
|
"id" : id
|
}, function(data) {
|
if (data.code == 0) {
|
setData(data.data);
|
}
|
}, 'json');
|
|
$.post("../getRecommendSectionGoodsList", {
|
"id" : id
|
}, function(data) {
|
if (data.code == 0) {
|
setGoodsData(data.data);
|
}
|
}, 'json');
|
|
});
|
|
function setGoodsData(data) {
|
var goodsList = data.goodsList;
|
allwai.splist.list = goodsList;
|
}
|
|
function setData(data) {
|
var picUrl = data.picUrl;
|
var html = data.html;
|
// $(".titlePic").attr("href",picUrl);
|
$(".titlePic img").attr("src", picUrl);
|
$(".zdy").append(html);
|
}
|
|
function getArgsFromHref(sHref, sArgName) {
|
|
var args = sHref.split("?");
|
var retval = "";
|
|
if (args[0] == sHref) /*参数为空*/{
|
return retval; /*无需做任何处理*/
|
}
|
|
var str = args[1];
|
args = str.split("&");
|
|
for (var i = 0; i < args.length; i++) {
|
str = args[i];
|
var arg = str.split("=");
|
if (arg.length <= 1)
|
continue;
|
if (arg[0] == sArgName)
|
retval = arg[1];
|
}
|
return retval;
|
}
|
|
// ================================================================= 页面数据
|
// vue 实例化
|
var allwai = new Vue({
|
el : "#allwai",
|
// 数据
|
data : {
|
// 商品列表
|
splist : {
|
yema : 1, // 当前页码
|
yemamax : 1, // 最大页码
|
pagesize : 20, // 每页数量
|
list : [], // 商品列表数据
|
},
|
},
|
});
|
|
function click_spdan(idC, url, title) {
|
var base64 = new Base64();
|
var entitle = base64.encode(title);
|
var clickHref = "yestv://getgoodsdetail#" + idC + "#" + url + "#"
|
+ entitle;
|
window.location.href = clickHref;
|
}
|
|
$("body").removeClass("displayNone");
|
</script>
|
|
