版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_25027593/article/details/83010357
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<title>商品详情</title>
<link href="../../css/mui.min.css" rel="stylesheet">
<link href="../../css/useritem.css" rel="stylesheet" />
<style type="text/css">
.mui-content {
margin-bottom: 60px;
background: white;
}
#Topslider {
height: 340px;
}
.mui-bar a {
color: #E02D26;
}
.mui-slider-item img {
height: 100%;
}
.mui-slider-indicator .mui-indicator {
height: 0px;
width: 0px;
box-shadow: initial;
margin-right: 30px;
color: #ddd;
}
.footer {
z-index: 10;
border-top: 1px solid #DDDDDD;
width: 100%;
height: 60px;
margin: 0 auto;
background: white;
position: fixed;
bottom: 0px;
}
.footer-left {
width: 65%;
float: left;
height: 60px;
line-height: 60px;
}
.footer-right {
width: 35%;
float: left;
height: 60px;
text-align: center;
line-height: 60px;
color: white;
background: #E02D26;
}
.footer-left1 {
width: 65%;
float: left;
}
.footer-left2 {
text-align: center;
width: 35%;
float: left;
background: #F2BAC7;
}
.footer-left-font {
font-size: 12px;
line-height: 35px;
color: #858585;
}
.footer-left-font2 {
font-size: 13px;
line-height: 30px;
color: white;
}
.footer-left-icondiv {
float: left;
width: 33.33%;
text-align: center;
border-right: 1px solid #F5F5F5;
}
.footer-left-icon {
height: 30px;
line-height: 45px;
}
.mui-icon-home:before {
font-size: 22px;
color: #E02D26;
}
.icon-shoucang:before {
content: "\e612";
font-size: 18px;
color: #E02D26;
}
.icon-service:before {
content: "\e7bb";
font-size: 23px;
color: #E02D26;
}
.footer-left-money {
font-size: 17px;
color: white;
}
.footer-left-money:hover {
color: white;
}
.money {
height: 45px;
line-height: 45px;
background: white;
}
.top-money {
font-size: 15px;
margin-left: 10px;
color: #E02D26;
font-weight: bold;
}
.primaryMoney {
padding-left: 10px;
color: #858585;
font-size: 11px;
text-decoration: line-through;
}
.top-money-right {
color: #858585;
font-size: 11px;
padding-right: 10px;
}
.name {
max-height: 60px;
background: white;
}
.name span {
display: block;
width: 94%;
margin: 0px auto;
color: black;
font-size: 14px;
font-weight: bold;
}
#youhui {
background: #FAFAFA;
font-size: 14px;
}
.mui-table-view-cell {
padding: 8px 10px;
}
.mui-table-view-cell:after {
height: 0px;
}
.mui-table-view:after {
height: 0px;
}
.mui-table-view:before {
height: 0px;
}
.youhui-quan {
float: left;
width: 15px;
height: 15px;
background: #E02D26;
text-align: center;
line-height: 15px;
border-radius: 5px;
}
.youhui-details {
float: left;
width: 15px;
height: 15px;
border: 1px solid #E02D26;
text-align: center;
line-height: 15px;
border-radius: 50%;
}
.youhui-Items {
width: 200px;
padding: 10px;
font-size: 13px;
/*width: 15px;
height: 15px;
border: 1px solid #E02D26;
text-align: center;
line-height: 15px;
border-radius: 50%;*/
border: 1px solid red;
}
.yuohuiIcon {
/*float: left;*/
width: 15px;
height: 15px;
border: 1px solid #E02D26;
text-align: center;
line-height: 15px;
border-radius: 50%;
border: 1px solid red;
}
.youhui-Items div {
float: left;
border: 1px solid red;
}
.youhui-quan-desc {
float: left;
width: auto;
margin-left: 5px;
line-height: 17px;
margin-right: 10px;
}
.youhui-quan a {
font-size: 12px;
color: white;
}
.youhui-quan-desc a {
font-size: 11px;
color: #858585;
}
.youhui-box-desc {
float: left;
width: auto;
margin-left: 5px;
line-height: 17px;
margin-right: 10px;
}
.youhui-box-desc a {
font-size: 13px;
color: black;
}
.youhui-quan:hover {
color: white;
}
.mui-icon-checkmarkempty {
text-align: center;
margin-left: -3px;
margin-top: -3px;
font-size: 20px;
color: #E02D26;
}
.mui-icon-checkmarkempty:hover {
color: #E02D26;
}
.youhui-item {
font-size: 12px;
color: #858585;
margin-left: 3px;
margin-right: 3px;
}
.youhui-item:hover {
color: #858585;
}
.titleTop {
border-top: 8px solid #EFEFF4;
}
.pindan_num {
color: black;
font-size: 13px;
}
.pindan_num:hover {
color: black;
}
.seemore {
margin-right: 20px;
color: #858585;
font-size: 13px;
}
.seemore:hover {
color: #858585;
}
.seeall {
margin-right: 20px;
color: #858585;
font-size: 13px;
}
.seeall:hover {
color: #858585;
}
.cypdItem {
background: white;
width: 94%;
margin: 0px auto;
max-height: 112px;
overflow: hidden;
}
.cypddDiv {
height: 56px;
line-height: 56px;
border-top: 1px solid #EFEFF4;
}
.cypdBottomBorder {
border-bottom: 1px solid #EFEFF4;
}
.pjBottmBorder {
border-bottom: 1px solid #EFEFF4;
}
.cypdLeft {
width: 47%;
float: left;
}
.cypdLeftImg {
height: 50px;
width: 50px;
margin-top: 3px;
border-radius: 50%;
float: left;
}
.cypdLeftPhone {
float: left;
margin-left: 5px;
font-size: 13px;
}
.cypdCenter {
width: 35%;
float: left;
line-height: 28px;
}
.cypdCenterDiv {
font-size: 13px;
text-align: center;
margin-top: 8px;
}
.cypdCenterNum {
color: #E02D26;
}
.cypdCenterTime {
font-size: 13px;
text-align: center;
margin-top: -10px;
}
.cypdRight {
width: 18%;
float: left;
text-align: center;
}
.cypdRightBtn {
background: #E02D26;
font-size: 13px;
color: white;
height: 28px;
margin-top: 15px;
line-height: 28px;
border-radius: 5px;
}
.goshop {
border-top: 7px solid #EFEFF4;
background: white;
width: 100%;
float: left;
}
.goshopLeft {
width: 15%;
float: left;
}
.goshopLeftImg {
height: 40px;
width: 40px;
margin-top: 7px;
margin-left: 10px;
float: left;
}
.goshopCenter {
float: left;
line-height: 28px;
}
.goshopCenterDiv {
font-size: 13px;
text-align: left;
margin-top: 5px;
margin-left: 8px;
}
.goshopCenterNum {
color: #E02D26;
}
.goshopCenterTime {
margin-left: 8px;
font-size: 13px;
text-align: left;
margin-top: -10px;
color: #858585;
}
.goshopRight {
width: 90px;
float: right;
margin-right: 10px;
text-align: center;
}
.goshopRightBtn {
border: 1px solid #858585;
font-size: 12px;
color: #858585;
height: 28px;
margin-top: 12px;
line-height: 28px;
border-radius: 5px;
}
/*--*/
.pindanLeft {
width: 15%;
float: left;
}
.selectAllPindan {
margin-top: 50px;
}
.pingdanWindowItems {
float: left;
width: 100%;
border-bottom: 1px solid #F0F0F0;
margin-bottom: 5px;
}
.ShiRen {
height: 30px;
line-height: 30px;
font-size: 13px;
text-align: center;
border-bottom: 0px;
}
.pindanLeftImg {
height: 40px;
width: 40px;
margin-top: 5px;
margin-left: 10px;
border-radius: 50%;
float: left;
}
.pindanCenter {
width: 50%;
float: left;
line-height: 25px;
}
.pindanCenterDiv {
font-size: 12px;
text-align: left;
margin-top: 8px;
margin-left: 8px;
}
.pingdanItemsName {
font-weight: bold;
width: 80px;
display: inline-block;
float: left;
color: black;
}
.ChaRen {
margin-left: 10px;
display: inline-block;
float: left;
color: black;
}
.pindanCenterNum {
color: #E02D26;
}
.pindanCenterTime {
margin-left: 8px;
font-size: 12px;
text-align: left;
margin-top: -10px;
color: #858585;
float: left;
}
.pindanRight {
width: 60px;
float: right;
margin-right: 10px;
text-align: center;
}
.pindanRightBtn {
background: #E02D26;
font-size: 14px;
color: white;
height: 28px;
margin-top: 10px;
line-height: 28px;
border-radius: 5px;
}
/*--*/
.mui-icon-home:before {
color: #858585;
}
.detail {
float: left;
background: #fceae9;
margin: 10px 0px 0px 10px;
padding: 5px 10px 3px 10px;
border-radius: 5px;
overflow: hidden;
font-size: 12px;
color: #858585;
}
.pingjiaBtn {
float: left;
width: 100%;
}
.pingjiaItem {
float: left;
height: 25px;
line-height: 25px;
width: 100%;
margin-top: 10px;
}
.pingjiaImg {
width: 25px;
height: 25px;
border-radius: 50%;
float: left;
margin-left: 10px;
}
.pingjiaName {
border-radius: 50%;
float: left;
margin-left: 5px;
font-size: 13px;
}
.pingjiaTime {
font-size: 12px;
margin-right: 10px;
color: black;
}
.pingjiaContent {
font-size: 12px;
padding: 3px 10px;
float: left;
width: 100%;
height: auto;
}
.kuanshi {
font-size: 12px;
padding: 5px 10px;
float: left;
width: 100%;
height: auto;
color: #858585;
border-bottom: 1px solid #EFEFF4;
}
.shopDetails {
float: left;
width: 100%;
border-bottom: 1px solid #EFEFF4;
}
.shopDetailsContent {
float: left;
padding: 10px;
font-size: 12px;
width: 95%;
margin: 10px;
background: #fafafa;
}
.shopImgItems {
width: 100%;
}
.box {
border-top: 1px solid #EEEEEE;
height: 70px;
background: white;
}
.boxs {
padding-top: 10px;
height: 60px;
background: white;
}
.boxsTopBorder {
border-top: 1px solid #EEEEEE;
}
.youhuiBoxDiv {
margin-left: 10px;
}
.youhuiBoxItemDetails {
width: 100%;
float: left;
margin-left: 20px;
font-size: 11px;
color: #858585;
}
.price {
width: 25%;
height: 70px;
float: left;
text-align: center;
line-height: 70px;
}
.center {
width: 55%;
height: 70px;
float: left;
text-align: left;
padding: 15px 5px;
}
.select {
width: 20%;
height: 70px;
float: left;
text-align: center;
line-height: 70px;
}
.price_unit {
font-size: 15px;
color: #E02D26;
}
.price_unit:hover {
color: #E02D26;
}
.price_num {
font-size: 25px;
color: #E02D26;
font-weight: bold;
}
.price_num:hover {
color: #E02D26;
}
.priceAll {
font-size: 13px;
}
.time {
font-size: 11px;
color: #8f8f94;
}
.selectPrice {
font-size: 23px;
color: white;
background: #E02D26;
border-radius: 50%;
border: 0px;
}
.mui-icon-checkmarkemptys:before {
content: '\e472';
}
.mui-icon-checkmarkemptys {
font-size: 18px;
color: white;
border-radius: 50%;
border: 1px solid #CCCCCC;
}
.no {
font-size: 15px;
color: black;
}
.no:hover {
color: black;
}
.noBorder {
border-bottom: 1px solid #EEEEEE;
}
.ptyh {
font-size: 14px;
background: white;
height: 60px;
padding-left: 20px;
text-align: center;
line-height: 60px;
}
#closeYouhui {
line-height: 60px;
margin-right: 10px;
color: #797979;
font-size: 35px;
font-weight: bold;
}
#closeFuwu {
line-height: 60px;
margin-right: 10px;
color: #797979;
font-size: 35px;
font-weight: bold;
}
.lingqumanjian {
padding: 3px;
font-size: 11px;
border: 1px solid #E02D26;
width: 100%;
height: 30px;
margin-top: 15px;
color: #E02D26;
}
.mui-preview-image.mui-fullscreen {
position: fixed;
z-index: 20;
background-color: #000;
}
.mui-preview-header,
.mui-preview-footer {
position: absolute;
width: 100%;
left: 0;
z-index: 10;
}
.mui-preview-header {
height: 44px;
top: 0;
}
.mui-preview-footer {
height: 50px;
bottom: 0px;
}
.mui-preview-header .mui-preview-indicator {
display: block;
line-height: 25px;
color: #fff;
text-align: center;
margin: 15px auto 4;
width: 70px;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 12px;
font-size: 16px;
}
.mui-preview-image {
display: none;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.mui-preview-image.mui-preview-in {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
.mui-preview-image.mui-preview-out {
background: none;
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
.mui-preview-image.mui-preview-out .mui-preview-header,
.mui-preview-image.mui-preview-out .mui-preview-footer {
display: none;
}
.mui-zoom-scroller {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
-webkit-backface-visibility: hidden;
}
.mui-zoom {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.mui-slider .mui-slider-group .mui-slider-item img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
width: 100%;
}
.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
display: inline-table;
}
.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
display: table-cell;
vertical-align: middle;
}
.mui-preview-loading {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
}
.mui-preview-loading.mui-active {
display: block;
}
.mui-preview-loading .mui-spinner-white {
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
height: 50px;
width: 50px;
}
.mui-preview-image img.mui-transitioning {
-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
transition: transform 0.5s ease, opacity 0.5s ease;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
p img {
max-width: 100%;
height: auto;
}
/*.mui-popover.mui-active {
display: block;
opacity: 1;
left:100px;
height: 300px;
position: fixed;
top:50%
}*/
#div {
width: 0px;
height: 0px;
position: fixed;
top: 70%;
left: 50%;
}
.mui-popover .mui-popover-arrow:after {
width: 0px;
}
#middlePopover {
height: 350px;
}
.PingDanPopoverTitle {
text-align: center;
height: 50px;
border-bottom: 1px solid #D4D4D4;
line-height: 50px;
position: relative;
}
.PingDanPopoverTitle a {
color: black;
}
#PingdanAllClose {
font-size: 30px;
position: absolute;
top: 10px;
right: 10px;
}
#PingdanOneClose {
font-size: 30px;
position: absolute;
top: 10px;
right: 10px;
}
.OnePindanTop {
height: 50px;
line-height: 50px;
text-align: center;
font-size: 13px;
}
.OnePindanTopName {
color: #E02D26;
font-size: 14px;
font-weight: bold;
}
.OnePindanTopName:hover {
color: #E02D26;
}
.OnePindanTopTime {
color: black;
}
.OnePindanTopTime:hover {
color: black;
}
.OnePindanCenter {
text-align: center;
}
.OnePindanCenterLeft {
width: 50px;
height: 50px;
border-radius: 50%;
}
.OnePindanCenter:before {
content: "拼主";
position: absolute;
left: 85px;
top: 48px;
width: 38px;
height: 18px;
font-size: 11px;
line-height: 17px;
text-align: center;
background-color: #ffab33;
border: 1px solid #fff;
border-radius: 12px;
color: #9f7200;
}
.OnePindanCenterRight {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px dashed #DDDDDD;
}
.OnePindanGo {
width: 90%;
margin: 0px auto;
height: 40px;
line-height: 40px;
background: red;
color: white;
border-radius: 5px;
margin-top: 15px;
font-size: 15px;
}
#sheet3 {
background: white;
}
.goPingdanImg {
width: 100px;
height: 100px;
float: left;
margin-left: 10px;
border-radius: 5px;
margin-top: -30px;
border: 1px solid white;
}
.goPingdanDiv {
min-height: 70px;
float: left;
font-size: 13px;
margin-left: 10px;
margin-top: 10px;
}
.goPingdanMoney {
color: #E02D26;
font-size: 15px;
}
.goPingdanSelectKuanshi {
height: auto;
}
.goPingdanKuanshi {
border-top: 1px solid #f5f5f5;
width: 100%;
float: left;
background: white;
}
.goPingdanKuanshiItem {
float: left;
background: #f5f5f5;
color: black;
font-size: 11px;
padding: 3px;
margin: 5px 5px 0px 10px;
border-radius: 5px;
}
.goPingdanKuanshiItem-Active {
float: left;
background: #E02D26;
color: white;
font-size: 12px;
padding: 3px;
margin: 5px 5px 0px 10px;
border-radius: 5px;
}
.goPingdanNumDiv {
border-top: 1px solid #f5f5f5;
border-bottom: 1px solid #f5f5f5;
width: 100%;
float: left;
background: white;
height: 50px;
line-height: 50px;
}
.goPingdanNumFont {
font-size: 13px;
margin-left: 10px;
float: left;
}
.goPingdanNumFontOperation {
float: right;
margin-right: 10px;
}
.goPingdanNumDel {
float: left;
font-size: 13px;
width: 30px;
height: 20px;
text-align: center;
background: #f2f2f2;
line-height: 20px;
margin-top: 15px;
}
.goPingdanNumContent {
float: left;
font-size: 13px;
width: 50px;
height: 20px;
text-align: center;
background: #f2f2f2;
line-height: 20px;
margin-top: 15px;
}
.goPingdanNumAdd {
float: left;
font-size: 13px;
width: 30px;
height: 20px;
text-align: center;
background: #e0e0e0;
margin-top: 15px;
line-height: 20px;
}
.goPingdanBtnDiv {
height: 100px;
background: white;
float: left;
background: white;
width: 100%;
text-align: center;
}
.goPingdanBtn {
width: 95%;
font-size: 15px;
background: #E02D26;
color: white;
margin: 0px auto;
height: 40px;
line-height: 40px;
margin-top: 30px;
border-radius: 5px;
}
#goTop {
width: 40px;
height: 40px;
position: fixed;
bottom: 80px;
right: 5%;
border-radius: 50%;
border: 1px solid #EFEFF4;
text-align: center;
line-height: 40px;
box-shadow: 1px 1px 1px #888888;
background: white;
z-index: 20;
opacity: 0.8;
}
#goTop a {
color: #E02D26;
font-weight: bold;
}
.hide {
display: none;
}
</div>
</style>
</head>
<body>
<header id="header" class="mui-bar mui-bar-transparent">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title"></h1>
</header>
<div class="mui-content">
<!--轮播图片-->
<div id="Topslider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img style="height: 350px;width: 100%;" src="http://omsproductionimg.yangkeduo.com/images/2018-01-16/a37fe1a6722181d3bb3b6e9f61f6d719.jpeg@750w_1l_50Q">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img style="height: 350px;width: 100%;" src="http://omsproductionimg.yangkeduo.com/images/2018-01-16/e63a163d825a97d6e4fd9bf941c04159.jpeg@750w_1l_50Q" data-preview-src="" data-preview-group="1">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img style="height: 350px;width: 100%;" src="http://omsproductionimg.yangkeduo.com/images/2018-01-16/9bde42b04e6dbbbfca6416da3c2d22ab.jpeg@750w_1l_50Q" data-preview-src="" data-preview-group="1">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img style="height: 350px;width: 100%;" src="http://omsproductionimg.yangkeduo.com/images/2018-01-16/6d343878dcf121bd76d73b4ebc8f63da.jpeg@750w_1l_50Q" data-preview-src="" data-preview-group="1">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img style="height: 350px;width: 100%;" src="http://omsproductionimg.yangkeduo.com/images/2018-01-16/a37fe1a6722181d3bb3b6e9f61f6d719.jpeg@750w_1l_50Q" data-preview-src="" data-preview-group="1">
</a>
</div>
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img style="height: 350px;width: 100%;" src="http://omsproductionimg.yangkeduo.com/images/2018-01-16/e63a163d825a97d6e4fd9bf941c04159.jpeg@750w_1l_50Q">
</a>
</div>
</div>
<div class="mui-slider-indicator mui-text-right">
<div id="topSliderNum" class="mui-indicator">1/4</div>
</div>
</div>
<div class="money">
<span class="top-money">￥11.8<a class="primaryMoney">￥58</a></span>
<a class="mui-pull-right top-money-right">已拼35203件·2人拼单</a>
</div>
<div class="name">
<span>【买1送1】【满天星种子1000粒+土+肥+生根粉】 多款选择 满天星花种子</span>
</div>
<ul class="mui-table-view" id="youhui">
<li class="mui-table-view-cell" id="manjianLi">
<div class="mui-navigate-right youhui-quan">
<a>券</a>
</div>
<div class="youhui-quan-desc">
<a>满30减3</a>
</div>
<div class="youhui-quan">
<a>券</a>
</div>
<div class="youhui-quan-desc">
<a>满50减5</a>
</div>
</li>
<li class="mui-table-view-cell" id="youhuiLi">
<div class="mui-navigate-right youhui-details">
<a class="mui-icon mui-icon-checkmarkempty"></a>
</div>
<div class="youhui-quan-desc">
<a>全场包邮</a>
</div>
<div class="mui-navigate-right youhui-details">
<a class="mui-icon mui-icon-checkmarkempty"></a>
</div>
<div class="youhui-quan-desc">
<a>7天退换</a>
</div>
<div class="mui-navigate-right youhui-details">
<a class="mui-icon mui-icon-checkmarkempty"></a>
</div>
<div class="youhui-quan-desc">
<a>48小时发货</a>
</div>
<div class="mui-navigate-right youhui-details">
<a class="mui-icon mui-icon-checkmarkempty"></a>
</div>
<div class="youhui-quan-desc">
<a>假一赔十</a>
</div>
</li>
</ul>
<ul class="mui-table-view titleTop">
<li class="mui-table-view-cell">
<div class="mui-navigate-right" style="margin-top:3px">
<a class="pindan_num">53人正在拼单，可直接参与</a>
<!--<a class="mui-pull-right seemore" href="#middlePopover">查看更多</a>-->
<a class="mui-pull-right seemore">查看更多</a>
</div>
</li>
</ul>
<div id="cypdItem" class="cypdItem">
<div class="cypddDiv">
<div class="cypdLeft">
<img class="cypdLeftImg" src="http://avatar.yangkeduo.com/a/7c0ac971f37f5c21cc122dbd1afe55d8afefa6b2-1523088411?x-oss-process=image/resize,w_100">
<div class="cypdLeftPhone">182****8518</div>
</div>
<div class="cypdCenter">
<div class="cypdCenterDiv">
<span>还差
<a class="cypdCenterNum">1人</a>
拼成
</span>
</div>
<div class="cypdCenterTime">剩余23:54:15:0</div>
</div>
<div class="cypdRight">
<div class="cypdRightBtn">去拼单</div>
</div>
</div>
<div class="cypddDiv">
<div class="cypdLeft">
<img class="cypdLeftImg" src="http://avatar.yangkeduo.com/a/c2af00f5d113db5b36c052b7a93ef0bde1c8c056-1519827381?x-oss-process=image/resize,w_100">
<div class="cypdLeftPhone ">182****8518</div>
</div>
<div class="cypdCenter">
<div class="cypdCenterDiv">
<span>还差
<a class="cypdCenterNum">1人</a>
拼成
</span>
</div>
<div class="cypdCenterTime">剩余23:12:15:0</div>
</div>
<div class="cypdRight">
<div class="cypdRightBtn">去拼单</div>
</div>
</div>
<div class="cypddDiv">
<div class="cypdLeft">
<img class="cypdLeftImg" src="http://avatar.yangkeduo.com/a/c2af00f5d113db5b36c052b7a93ef0bde1c8c056-1519827381?x-oss-process=image/resize,w_100">
<div class="cypdLeftPhone ">111****1111</div>
</div>
<div class="cypdCenter">
<div class="cypdCenterDiv">
<span>还差
<a class="cypdCenterNum">1人</a>
拼成
</span>
</div>
<div class="cypdCenterTime">剩余23:00:15:0</div>
</div>
<div class="cypdRight">
<div class="cypdRightBtn">去拼单</div>
</div>
</div>
</div>
<ul class="mui-table-view titleTop pjBottmBorder">
<li class="mui-table-view-cell">
<div class="mui-navigate-right" style="margin-top:3px">
<a class="pindan_num">商品评价（16705）</a>
<a class="mui-pull-right seeall">查看全部</a>
</div>
</li>
</ul>
<div class="pingjiaBtn">
<div class="detail">便宜(10)</div>
<div class="detail">物流很快(99)</div>
<div class="detail">划算(77)</div>
<div class="detail">耐心(32)</div>
</div>
<div class="pingjiaAll">
<div class="pingjiaList">
<div class="pingjiaItem">
<img class="pingjiaImg" src="http://avatar.yangkeduo.com/a/427a36d24c609bcc0c788c9f1656bc0bfe61a6e1-1521586348?x-oss-process=image/resize,w_100">
<div class="pingjiaName">淋湿的诺言</div>
<a class="mui-pull-right pingjiaTime">2018.4.10</a>
</div>
<div class="pingjiaContent" style="">
非常满意已经种下了，静等发芽了期待
</div>
<div class="kuanshi" style="">款式：红锦1000粒+盆+土+肥+生根粉</div>
</div>
<div class="pingjiaList">
<div class="pingjiaItem">
<img class="pingjiaImg" src="http://avatar.yangkeduo.com/a/5661ca969e505515480a4288dbe963936653928f-1522674891?x-oss-process=image/resize,w_100">
<div class="pingjiaName">淋湿的诺言</div>
<a class="mui-pull-right pingjiaTime">2018.4.10</a>
</div>
<div class="pingjiaContent" style="">
除了包装盒有点压的难看点之外，其他的还可以，至于花得等长出来之后再追评。
</div>
<div class="kuanshi" style="">款式：混色满天星1000粒+肥+生根粉</div>
</div>
</div>
<div class="goshop">
<div class="goshopLeft">
<img class="goshopLeftImg" src="http://imsproductionimg.yangkeduo.com/9f29e42446c81f0cef0de27b5a34829d.jpg">
</div>
<div class="goshopCenter">
<div class="goshopCenterDiv">
<span>夏菊花卉专营店
</span>
</div>
<div class="goshopCenterTime">商品数量 27 已拼 46万 </div>
</div>
<div class="goshopRight">
<div class="goshopRightBtn" id="GoShopLook">
<a class="mui-icon mui-icon-home"></a>进店逛逛</div>
</div>
</div>
<ul class="mui-table-view titleTop shopDetails">
<li class="mui-table-view-cell">
<div style="margin-top:3px">
<a class="pindan_num">商品详情</a>
</div>
</li>
</ul>
<div class="shopDetailsContent">
【4.8元 满天星2000粒+复合肥2包+生根粉2包】【7.8元 满天星2000粒+花盆2个+营养土200克+复合肥2包+生根粉2包】多买多送，看好颜色套餐包含什么在购买，不要到时候问客服说怎么没有盆和土，收到货不会种植的朋友，请联系客服教您种植，满天星发芽必须晒阳光 保持土壤湿润，不要到时候长成豆芽菜了说我们的种子是油菜种子，不管什么种子不晒阳光，那都像豆芽菜，所以必须晒阳光，有什么不懂的地方可以直接联系客服说明，我们会手把手解决您任何问题的，快来和心爱的人一起播种吧~重要的事情说三遍 快递只发邮政 快递只发邮政 快递只发邮政
</div>
<div class="shopImg">
<img class="shopImgItems" src="http://omsproductionimg.yangkeduo.com/images/2018-01-16/7c68ba10b9399a8b03f94a9b0579dfb7.jpeg@750w_1l_50Q" data-preview-src="" data-preview-group="1" />
<img class="shopImgItems" src="http://omsproductionimg.yangkeduo.com/images/2018-01-16/07207c79cd92a115773f8b194987d63e.jpeg@750w_1l_50Q" data-preview-src="" data-preview-group="1" />
<img class="shopImgItems" src="http://omsproductionimg.yangkeduo.com/images/2018-01-16/6666ac92ec833146e11599655387d336.jpeg@750w_1l_50Q" data-preview-src="" data-preview-group="1" />
<img class="shopImgItems" src="http://omsproductionimg.yangkeduo.com/images/2018-01-16/11c788b951c485a80ffa5f211a9774e3.jpeg@750w_1l_50Q" data-preview-src="" data-preview-group="1" />
<img class="shopImgItems" src="http://omsproductionimg.yangkeduo.com/images/2018-01-16/1cea70c57de3b19873173dd8f246d9f2.jpeg@750w_1l_50Q" data-preview-src="" data-preview-group="1" />
<img class="shopImgItems" src="http://omsproductionimg.yangkeduo.com/images/2018-01-16/7da608f08be65165e13d54ada5a9e35b.jpeg@750w_1l_50Q" data-preview-src="" data-preview-group="1" />
<img class="shopImgItems" src="http://omsproductionimg.yangkeduo.com/images/2018-01-16/72ef142a2eacf814458bc7d8a1d700c0.jpeg@750w_1l_50Q" data-preview-src="" data-preview-group="1" />
<img class="shopImgItems" src="http://omsproductionimg.yangkeduo.com/images/2018-01-16/48ec107d7a7be30e14035a335b20a4de.jpeg@750w_1l_50Q" data-preview-src="" data-preview-group="1" />
</div>
<div id="middlePopover" class="mui-popover">
<div class="mui-popover-arrow"></div>
<div class="PingDanPopoverTitle">
<a>正在拼单</a>
<a id="PingdanAllClose" class="mui-icon mui-icon-closeempty "></a>
</div>
<div id="selectAllPindan" class="mui-scroll-wrapper" style="margin-top: 50px;">
<div class="mui-scroll">
<div class="pingdanWindowItems">
<img class="pindanLeftImg" src="http://imsproductionimg.yangkeduo.com/9f29e42446c81f0cef0de27b5a34829d.jpg">
<div class="pindanCenter">
<div class="pindanCenterDiv">
<a class="mui-ellipsis pingdanItemsName">木子李</a>
<a class="ChaRen">差1人</a>
</div>
<div class="pindanCenterTime">剩余23:00:15:0</div>
</div>
<div class="pindanRight">
<div class="pindanRightBtn">
去拼单</div>
</div>
</div>
<div class="pingdanWindowItems">
<img class="pindanLeftImg" src="http://imsproductionimg.yangkeduo.com/9f29e42446c81f0cef0de27b5a34829d.jpg">
<div class="pindanCenter">
<div class="pindanCenterDiv">
<a class="mui-ellipsis pingdanItemsName">冬天的薛</a>
<a class="ChaRen">差1人</a>
</div>
<div class="pindanCenterTime">剩余23:00:15:0</div>
</div>
<div class="pindanRight">
<div class="pindanRightBtn">
去拼单</div>
</div>
</div>
<div class="pingdanWindowItems">
<img class="pindanLeftImg" src="http://imsproductionimg.yangkeduo.com/9f29e42446c81f0cef0de27b5a34829d.jpg">
<div class="pindanCenter">
<div class="pindanCenterDiv">
<a class="mui-ellipsis pingdanItemsName">王立英</a>
<a class="ChaRen">差1人</a>
</div>
<div class="pindanCenterTime">剩余23:00:15:0</div>
</div>
<div class="pindanRight">
<div class="pindanRightBtn">
去拼单</div>
</div>
</div>
<div class="pingdanWindowItems">
<img class="pindanLeftImg" src="http://imsproductionimg.yangkeduo.com/9f29e42446c81f0cef0de27b5a34829d.jpg">
<div class="pindanCenter">
<div class="pindanCenterDiv">
<a class="mui-ellipsis pingdanItemsName">平平</a>
<a class="ChaRen">差1人</a>
</div>
<div class="pindanCenterTime">剩余23:00:15:0</div>
</div>
<div class="pindanRight">
<div class="pindanRightBtn">
去拼单</div>
</div>
</div>
<div class="pingdanWindowItems">
<img class="pindanLeftImg" src="http://imsproductionimg.yangkeduo.com/9f29e42446c81f0cef0de27b5a34829d.jpg">
<div class="pindanCenter">
<div class="pindanCenterDiv">
<a class="mui-ellipsis pingdanItemsName">夏日玫瑰</a>
<a class="ChaRen">差1人</a>
</div>
<div class="pindanCenterTime">剩余23:00:15:0</div>
</div>
<div class="pindanRight">
<div class="pindanRightBtn">
去拼单</div>
</div>
</div>
<div class="pingdanWindowItems">
<img class="pindanLeftImg" src="http://imsproductionimg.yangkeduo.com/9f29e42446c81f0cef0de27b5a34829d.jpg">
<div class="pindanCenter">
<div class="pindanCenterDiv">
<a class="mui-ellipsis pingdanItemsName">玉</a>
<a class="ChaRen">差1人</a>
</div>
<div class="pindanCenterTime">剩余23:00:15:0</div>
</div>
<div class="pindanRight">
<div class="pindanRightBtn">
去拼单</div>
</div>
</div>
<div class="pingdanWindowItems">
<img class="pindanLeftImg" src="http://imsproductionimg.yangkeduo.com/9f29e42446c81f0cef0de27b5a34829d.jpg">
<div class="pindanCenter">
<div class="pindanCenterDiv">
<a class="mui-ellipsis pingdanItemsName">玉111</a>
<a class="ChaRen">差1人</a>
</div>
<div class="pindanCenterTime">剩余23:00:15:0</div>
</div>
<div class="pindanRight">
<div class="pindanRightBtn">
去拼单</div>
</div>
</div>
<div class="pingdanWindowItems ShiRen">
仅显示10个正在拼单的人
</div>
</div>
</div>
</div>
</div>
<div id="PindanOnePopover" class="mui-popover" style="height: 250px;">
<div class="mui-popover-arrow"></div>
<div class="PingDanPopoverTitle">
<a>参与木子李的拼单</a>
<a id="PingdanOneClose" class="mui-icon mui-icon-closeempty"></a>
</div>
<div id="selectOnePindan" class="mui-scroll-wrapper" style="margin-top: 50px;">
<div class="mui-scroll">
<div class="OnePindanTop">仅剩
<a class="OnePindanTopName">1</a>个名额,
<a class="OnePindanTopTime">23:15:50.1后结束</a>
</div>
<div class="OnePindanCenter">
<img class="OnePindanCenterLeft" src="http://avatar.yangkeduo.com/a/96ee74d21e7ed7db3ea43cb4b2b083c58081a755-1523176593?x-oss-process=image/resize,w_100">
<img class="OnePindanCenterRight" src="../../img/pindanWenhao.png">
</div>
<div class="OnePindanCenter">
<div class="OnePindanGo">参与拼单</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer-left">
<div class="footer-left1 order-item mui-bar-tab">
<div class="footer-left-icondiv" id="btn_Tab_gotoHome">
<div class="footer-left-icon">
<a class="mui-icon mui-icon-home"></a>
</div>
<div class="footer-left-font">首页</div>
</div>
<div class="footer-left-icondiv" id="btn_Tab_Shoucang">
<div class="footer-left-icon">
<a class="mui-icon iconfont icon-shoucang"></a>
</div>
<div class="footer-left-font">收藏</div>
</div>
<div class="footer-left-icondiv" id="btn_Tab_Kefu">
<div class="footer-left-icon">
<a class="mui-icon iconfont icon-service"></a>
</div>
<div class="footer-left-font">客服</div>
</div>
</div>
<div class="footer-left2" id="btn_Tab_Dandu">
<div class="footer-left-icon">
<a class="footer-left-money">￥13.8</a>
</div>
<div class="footer-left-font2">单独购买</div>
</div>
</div>
<div id="btn_Tab_GoPingdan" class="footer-right">
<div class="footer-left-icon">
<a class="footer-left-money">￥11.8</a>
</div>
<div class="footer-left-font2">发起拼单</div>
</div>
</div>
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
<div class="ptyh">
夏菊花卉专营店
<a id="closeYouhui" class="mui-icon mui-icon-closeempty mui-pull-right"></a>
</div>
<div class="box" data-price="3">
<div class="price">
<a class="price_unit">￥</a>
<a class="price_num">3</a>
</div>
<div class="center">
<div class="priceAll">店铺内满30元可使用</div>
<div class="time">有效期2017.8.25-2020-8.13</div>
</div>
<div class="select">
<span class="lingqumanjian">领取</span>
</div>
</div>
<div class="box" data-price="5">
<div class="price">
<a class="price_unit">￥</a>
<a class="price_num">5</a>
</div>
<div class="center">
<div class="priceAll">店铺内满50元可使用</div>
<div class="time">有效期2017.8.25-2020-8.13</div>
</div>
<div class="select">
<span class="lingqumanjian">领取</span>
</div>
</div>
<div style="height:100px;background: white;">
</div>
</div>
<div id="sheet2" class="mui-popover mui-popover-bottom mui-popover-action ">
<div class="ptyh">
服务说明
<a id="closeFuwu" class="mui-icon mui-icon-closeempty mui-pull-right"></a>
</div>
<div class="boxs boxsTopBorder">
<div class="youhuiBoxDiv">
<div class="youhui-details">
<a class="mui-icon mui-icon-checkmarkempty"></a>
</div>
<div class="youhui-box-desc">
<a>全场包邮</a>
</div>
<div class="youhuiBoxItemDetails">所有商品无条件包邮</div>
</div>
</div>
<div class="boxs">
<div class="youhuiBoxDiv">
<div class="youhui-details">
<a class="mui-icon mui-icon-checkmarkempty"></a>
</div>
<div class="youhui-box-desc">
<a>7天退换</a>
</div>
<div class="youhuiBoxItemDetails">商家承诺7天无理由退换货</div>
</div>
</div>
<div class="boxs">
<div class="youhuiBoxDiv">
<div class="youhui-details">
<a class="mui-icon mui-icon-checkmarkempty"></a>
</div>
<div class="youhui-box-desc">
<a>48小时发货</a>
</div>
<div class="youhuiBoxItemDetails">若超时未发货，商家将补偿3元无门槛代金券</div>
</div>
</div>
<div class="boxs">
<div class="youhuiBoxDiv">
<div class="youhui-details">
<a class="mui-icon mui-icon-checkmarkempty"></a>
</div>
<div class="youhui-box-desc">
<a>假一赔十</a>
</div>
<div class="youhuiBoxItemDetails">若收到的商品是假冒品牌，可获得加倍赔偿</div>
</div>
</div>
<div style="height:100px;background: white;">
</div>
</div>
<div id="sheet3" class="mui-popover mui-popover-bottom mui-popover-action ">
<img class="goPingdanImg" src="http://omsproductionimg.yangkeduo.com/images/2018-01-16/53b5180be4c7b8ff276e7b42eb9e3250.jpeg" />
<div class="goPingdanDiv">
<div class="goPingdanMoney">￥10.9</div>
<div class="goPingdanSelectKuanshi">请选择 款式</div>
</div>
<div class="goPingdanKuanshi">
<div style="float: left;width: 100%;font-size: 14px;padding-top: 10px;padding-left: 10px;">款式</div>
<div class="goPingdanKuanshiItem">混色满天星1000粒+肥+生根粉</div>
<div class="goPingdanKuanshiItem">薄荷满天星1000粒+肥+生根粉</div>
<div class="goPingdanKuanshiItem">淡紫色满天星1000粒+肥+生根粉</div>
<div class="goPingdanKuanshiItem">粉色满天星1000粒+肥+生根粉</div>
<div class="goPingdanKuanshiItem">红锦满天星1000粒+肥+生根粉</div>
<div class="goPingdanKuanshiItem">黄色满天星1000粒+肥+生根粉</div>
<div class="goPingdanKuanshiItem">蓝利满天星1000粒+肥+生根粉</div>
<div class="goPingdanKuanshiItem">宿根满天星1000粒+肥+生根粉</div>
</div>
<div class="goPingdanNumDiv">
<div class="goPingdanNumFont">数量</div>
<div class="goPingdanNumFontOperation">
<div id="goPingdanNumDel" class="goPingdanNumDel">-</div>
<div id="goPingdanNumContent" class="goPingdanNumContent">1</div>
<div id="goPingdanNumAdd" class="goPingdanNumAdd">+</div>
</div>
</div>
<div class="goPingdanBtnDiv">
<div id="sure" class="goPingdanBtn">确定</div>
</div>
</div>
<!--以下div勿删 定位使用-->
<div id="div"></div>
<div id="goTop">
<a class="mui-icon mui-icon-arrowthinup"></a>
</div>
<script src="../../js/mui.min.js"></script>
<script type="text/javascript" src="../../js/mui.zoom.js"></script>
<script type="text/javascript" src="../../js/mui.previewimage.js"></script>
<script src="../../js/jquery-1.11.0.min.js"></script>
<script>
mui.init();
mui('#selectAllPindan').scroll({
bounce: true,
indicators: true,
deceleration: mui.os.ios ? 0.003 : 0.0009
});
$("#goTop").addClass("hide");
//设置购买是已选规格div长度
var width = document.documentElement.clientWidth || document.body.clientWidth;
$(".goPingdanDiv").css("width", width - 140 + "px")
//控制拼单列表滚动 3s一次
var oMarquee = document.getElementById("cypdItem"); //滚动对象
var iLineHeight = 56; //单行高度，像素
var iLineCount = 3; //实际行数
var iScrollAmount = 56; //每次滚动高度，像素
function run() {
oMarquee.scrollTop += iScrollAmount;
if(oMarquee.scrollTop == iLineCount * iLineHeight)
oMarquee.scrollTop = 0;
if(oMarquee.scrollTop % iLineHeight == 0) {
window.setTimeout("run()", 3000);
} else {
window.setTimeout("run()", 50);
}
}
oMarquee.innerHTML += oMarquee.innerHTML;
window.setTimeout("run()", 3000);
mui.previewImage();
//商品详情图片滑动改变右下角数字
document.querySelector('#Topslider').addEventListener('slide', function(event) {
var sliderImgCount = $(".mui-slider-item").length - 2;
$("#topSliderNum").html(parseInt(event.detail.slideNumber + 1) + "/" + sliderImgCount)
});
//查看满减详情
document.getElementById("manjianLi").addEventListener("tap", function() {
mui('#sheet1').popover('toggle');
});
//查看保证详情
document.getElementById("youhuiLi").addEventListener("tap", function() {
mui('#sheet2').popover('toggle');
});
//关闭满减闲情
document.getElementById("closeYouhui").addEventListener("tap", function() {
mui('#sheet1').popover('toggle');
})
//关闭保证详情
document.getElementById("closeFuwu").addEventListener("tap", function() {
mui('#sheet2').popover('toggle');
})
//领取优惠券
mui("#sheet1").on("tap", ".lingqumanjian", function() {
mui.alert("领取：" + $(this).parent().parent().attr("data-price") + "元优惠券")
})
//查看更多拼单
mui(".mui-table-view").on("tap", ".seemore", function() {
mui("#middlePopover").popover('toggle', document.getElementById("div"));
})
//关闭查看更多拼单
document.getElementById("PingdanAllClose").addEventListener("tap", function() {
mui("#middlePopover").popover('toggle', document.getElementById("div"));
})
//查看全部评价
mui(".mui-table-view").on("tap", ".seeall", function() {
mui.openWindow({
url: "CommentDetails.html",
id: "CommentDetails.html"
})
})
//进店逛逛
document.getElementById("GoShopLook").addEventListener("tap", function() {
mui.openWindow({
url: "GoToShop.html",
id: "GoToShop.html"
})
})
//点击评价分类
mui(".pingjiaBtn").on("tap", ".detail", function() {
mui.openWindow({
url: "CommentDetails.html",
id: "CommentDetails.html"
})
})
//点击评价内容
mui(".pingjiaAll").on("tap", ".pingjiaList", function() {
mui.openWindow({
url: "CommentDetails.html",
id: "CommentDetails.html"
})
})
//点击首页
document.getElementById("btn_Tab_gotoHome").addEventListener("tap", function() {
//首页目前ID为HBuilder 发布之后改为index.html
var self = plus.webview.getWebviewById("HBuilder");
plus.webview.currentWebview().close();
mui.openWindow({
id: self.id
})
})
//收藏
document.getElementById("btn_Tab_Shoucang").addEventListener("tap", function() {
mui.alert("收藏");
})
//客服
document.getElementById("btn_Tab_Kefu").addEventListener("tap", function() {
mui.alert("客服");
})
//页面点击参与拼单模态框
mui(".cypddDiv").on("tap", ".cypdRightBtn", function() {
mui("#PindanOnePopover").popover('toggle', document.getElementById("div"));
})
//页面点击去参与拼单
mui(".OnePindanCenter").on("tap", ".OnePindanGo", function() {
mui('#sheet3').popover('toggle');
})
//关闭页面参与拼单模态框
document.getElementById("PingdanOneClose").addEventListener("tap", function() {
mui("#PindanOnePopover").popover('toggle', document.getElementById("div"));
})
//查看更多拼单模态框里面去拼单按钮
mui(".pindanRight").on("tap", ".pindanRightBtn", function() {
mui("#PindanOnePopover").popover('toggle', document.getElementById("div"));
})
//单独购买
document.getElementById("btn_Tab_Dandu").addEventListener("tap", function() {
var pindanPrice = $(this).children().children()[0].innerHTML;
$(".goPingdanMoney").html(pindanPrice);
mui('#sheet3').popover('toggle');
})
//发起拼单
document.getElementById("btn_Tab_GoPingdan").addEventListener("tap", function() {
var pindanPrice = $(this).children().children()[0].innerHTML;
$(".goPingdanMoney").html(pindanPrice);
mui('#sheet3').popover('toggle');
})
//选择款式
mui(".goPingdanKuanshi").on("tap", ".goPingdanKuanshiItem", function() {
$(".goPingdanSelectKuanshi").html("已选：" + $(this).html())
mui(".goPingdanKuanshiItem").each(function(e) {
$(this).removeClass("goPingdanKuanshiItem-Active");
})
if(mui(this)[0].classList.contains("goPingdanKuanshiItem-Active"))
$(this).removeClass("goPingdanKuanshiItem-Active")
else
$(this).addClass("goPingdanKuanshiItem-Active")
})
if($("#goPingdanNumContent").html().trim() > 1) {
$("#goPingdanNumDel").css("background", "#e0e0e0");
}
//数量+1
document.getElementById("goPingdanNumAdd").addEventListener("tap", function() {
if(parseInt($("#goPingdanNumContent").html().trim()) + 1 == 2)
$("#goPingdanNumDel").css("background", "#e0e0e0");
$("#goPingdanNumContent").html(parseInt($("#goPingdanNumContent").html().trim()) + 1)
})
//数量-1
document.getElementById("goPingdanNumDel").addEventListener("tap", function() {
if($("#goPingdanNumContent").html().trim() == "1") {
mui.toast("已经不能再减少啦~")
return;
}
if(parseInt($("#goPingdanNumContent").html().trim()) - 1 == 1)
$("#goPingdanNumDel").css("background", "#f2f2f2");
$("#goPingdanNumContent").html(parseInt($("#goPingdanNumContent").html().trim()) - 1)
})
//确定
document.getElementById("sure").addEventListener("tap", function() {
mui.openWindow({
url: "PlaceOrder.html",
id: "PlaceOrder.html"
})
})
//回到顶部
document.getElementById("goTop").addEventListener("tap", function() {
mui.scrollTo(0, 100);
})
//返回顶部按钮在顶部不显示 一定距离后显示
var scrollToTopBox = document.getElementById('goTop');
window.addEventListener('scroll', function(e) {
if(window.pageYOffset >= window.innerHeight && scrollToTopBox.classList.contains('hide')) {
scrollToTopBox.classList.remove('hide');
} else if(window.pageYOffset < window.innerHeight && !scrollToTopBox.classList.contains('hide')) {
scrollToTopBox.classList.add('hide');
}
});
</script>
</body>
</html>