【04】MUI 仿拼多多 商品詳情
阿新 • • 發佈：2018-12-14
<!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/