Skip to content
GitLab
Commit f9639790 authored by usgeek's avatar usgeek
Browse files

商品详情页中的加入购物车样式调整，添加客服功能

parent 70763a2e
Hide whitespace changes
Inline Side-by-side
litemall-wx/pages/goods/goods.js
View file @ f9639790
......@@ -42,7 +42,7 @@ Page({
// 这里检测一下
let _productPrice = res.data.productList[0].price;
let _goodsPrice = res.data.info.retailPrice;
if (_productPrice != _goodsPrice){
if (_productPrice != _goodsPrice) {
console.error('商品数量价格和货品不一致');
}
......@@ -206,21 +206,21 @@ Page({
}
let checkedProduct = checkedProductArray[0];
if (checkedProduct.number > 0){
if (checkedProduct.number > 0) {
this.setData({
checkedSpecPrice: checkedProduct.price,
soldout: false
});
}
else{
else {
this.setData({
checkedSpecPrice: this.data.goods.retailPrice,
soldout: true
});
});
}
}
else{
else {
this.setData({
checkedSpecText: '规格数量选择',
checkedSpecPrice: this.data.goods.retailPrice,
......@@ -276,28 +276,33 @@ Page({
});
}
},
closeAttrOrCollect: function () {
closeAttr: function () {
this.setData({
openAttr: false,
});
},
addCollectOrNot: function () {
let that = this;
if (this.data.openAttr) {
this.setData({
openAttr: false,
});
if (that.data.userHasCollect == 1) {
that.setData({
collectBackImage: that.data.hasCollectImage
});
} else {
that.setData({
collectBackImage: that.data.noCollectImage
});
}
} else {
// if (this.data.openAttr) {
// this.setData({
// openAttr: false,
// });
// if (that.data.userHasCollect == 1) {
// that.setData({
// collectBackImage: that.data.hasCollectImage
// });
// } else {
// that.setData({
// collectBackImage: that.data.noCollectImage
// });
// }
// } else {
//添加或是取消收藏
util.request(api.CollectAddOrDelete, { type: 0, valueId: this.data.id }, "POST")
.then(function (res) {
let _res = res;
if (_res.errno == 0) {
if ( _res.data.type == 'add') {
if (_res.data.type == 'add') {
that.setData({
collectBackImage: that.data.hasCollectImage
});
......@@ -316,7 +321,6 @@ Page({
}
});
}
},
openCartPage: function () {
......@@ -394,7 +398,7 @@ Page({
//打开规格选择窗口
this.setData({
openAttr: !this.data.openAttr,
collectBackImage: '/static/images/detail_back.png'
// collectBackImage: '/static/images/detail_back.png'
});
} else {
......
litemall-wx/pages/goods/goods.wxml
View file @ f9639790
<scroll-view class="container" scroll-y="true">
<view wx:if="{{!openAttr}}">
<swiper class="goodsimgs" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
<swiper-item wx:for="{{goods.gallery}}" wx:key="*this">
<image src="{{item}}" background-size="cover"></image>
</swiper-item>
</swiper>
<view class="service-policy">
<view class="item">30天无忧退货</view>
<view class="item">48小时快速退款</view>
<view class="item">满88元免邮费</view>
</view>
<view class="goods-info">
<view class="c">
<text class="name">{{goods.name}}</text>
<text class="desc">{{goods.goodsBrief}}</text>
<text class="price">￥{{checkedSpecPrice}}</text>
<view class="brand" wx:if="{{brand.name}}">
<navigator url="/pages/brandDetail/brandDetail?id={{brand.id}}">
<text>{{brand.name}}</text>
</navigator>
</view>
<view class="container">
<swiper class="goodsimgs" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
<swiper-item wx:for="{{goods.gallery}}" wx:key="*this">
<image src="{{item}}" background-size="cover"></image>
</swiper-item>
</swiper>
<view class="service-policy">
<view class="item">30天无忧退货</view>
<view class="item">48小时快速退款</view>
<view class="item">满88元免邮费</view>
</view>
<view class="goods-info">
<view class="c">
<text class="name">{{goods.name}}</text>
<text class="desc">{{goods.goodsBrief}}</text>
<text class="price">￥{{checkedSpecPrice}}</text>
<view class="brand" wx:if="{{brand.name}}">
<navigator url="../brandDetail/brandDetail?id={{brand.id}}">
<text>{{brand.name}}</text>
</navigator>
</view>
</view>
<view class="section-nav section-attr" bindtap="switchAttrPop">
<view class="t">{{checkedSpecText}}</view>
<image class="i" src="/static/images/address_right.png" background-size="cover"></image>
</view>
<view class="section-nav section-attr" bindtap="switchAttrPop">
<view class="t">{{checkedSpecText}}</view>
<image class="i" src="/static/images/address_right.png" background-size="cover"></image>
</view>
<view class="comments" wx:if="{{comment.count > 0}}">
<view class="h">
<navigator url="/pages/comment/comment?valueId={{goods.id}}&type=0">
<text class="t">评价({{comment.count > 999 ? '999+' : comment.count}})</text>
<text class="i">查看全部</text>
</navigator>
</view>
<view class="comments" wx:if="{{comment.count > 0}}">
<view class="h">
<navigator url="/pages/comment/comment?valueId={{goods.id}}&type=0">
<text class="t">评价({{comment.count > 999 ? '999+' : comment.count}})</text>
<text class="i">查看全部</text>
</navigator>
</view>
<view class="b">
<view class="item" wx:for="{{comment.data}}" wx:key="id">
<view class="info">
<view class="user">
<image src="{{item.avatar}}"></image>
<text>{{item.nickname}}</text>
</view>
<view class="time">{{item.addTime}}</view>
</view>
<view class="content">
{{item.content}}
</view>
<view class="imgs" wx:if="{{item.picList.length > 0}}">
<image class="img" wx:for="{{item.picList}}" wx:key="*this" wx:for-item="iitem" src="{{iitem}}"></image>
<view class="b">
<view class="item" wx:for="{{comment.data}}" wx:key="id">
<view class="info">
<view class="user">
<image src="{{item.avatar}}"></image>
<text>{{item.nickname}}</text>
</view>
<view class="time">{{item.addTime}}</view>
</view>
<view class="content">
{{item.content}}
</view>
<view class="imgs" wx:if="{{item.picList.length > 0}}">
<image class="img" wx:for="{{item.picList}}" wx:key="*this" wx:for-item="iitem" src="{{iitem}} "></image>
</view>
<!-- <view class="spec">白色 2件</view> -->
</view>
</view>
<view class="goods-attr">
<view class="t">商品参数</view>
<view class="l">
<view class="item" wx:for="{{attribute}}" wx:key="item">
<text class="left">{{item.attribute}}</text>
<text class="right">{{item.value}}</text>
</view>
</view>
<view class="goods-attr">
<view class="t">商品参数</view>
<view class="l">
<view class="item" wx:for="{{attribute}}" wx:key="name">
<text class="left">{{item.attribute}}</text>
<text class="right">{{item.value}}</text>
</view>
</view>
</view>
<view class="detail">
<import src="/lib/wxParse/wxParse.wxml" />
<template is="wxParse" data="{{wxParseData:goodsDetail.nodes}}" />
</view>
<view class="detail">
<import src="/lib/wxParse/wxParse.wxml" />
<template is="wxParse" data="{{wxParseData:goodsDetail.nodes}}" />
</view>
<view class="common-problem">
<view class="h">
<view class="line"></view>
<text class="title">常见问题</text>
</view>
<view class="b">
<view class="item" wx:for="{{issueList}}" wx:key="id">
<view class="question-box">
<text class="spot"></text>
<text class="question">{{item.question}}</text>
</view>
<view class="answer">
{{item.answer}}
</view>
<view class="common-problem">
<view class="h">
<view class="line"></view>
<text class="title">常见问题</text>
</view>
<view class="b">
<view class="item" wx:for="{{issueList}}" wx:key="id">
<view class="question-box">
<text class="spot"></text>
<text class="question">{{item.question}}</text>
</view>
<view class="answer">
{{item.answer}}
</view>
</view>
</view>
</view>
<view class="related-goods" wx:if="{{relatedGoods.length > 0}}">
<view class="h">
<view class="line"></view>
<text class="title">大家都在看</text>
</view>
<view class="b">
<view class="item" wx:for="{{relatedGoods}}" wx:key="id">
<navigator url="/pages/goods/goods?id={{item.id}}">
<image class="img" src="{{item.picUrl}}" background-size="cover"></image>
<text class="name">{{item.name}}</text>
<text class="price">￥{{item.retailPrice}}</text>
</navigator>
</view>
<view class="related-goods" wx:if="{{relatedGoods.length > 0}}">
<view class="h">
<view class="line"></view>
<text class="title">大家都在看</text>
</view>
<view class="b">
<view class="item" wx:for="{{relatedGoods}}" wx:key="id">
<navigator url="/pages/goods/goods?id={{item.id}}">
<image class="img" src="{{item.picUrl}}" background-size="cover"></image>
<text class="name">{{item.name}}</text>
<text class="price">￥{{item.retailPrice}}</text>
</navigator>
</view>
</view>
</view>
<view wx:if="{{openAttr}}" class="attr-pop">
</view>
<view class="attr-pop-box" hidden="{{!openAttr}}">
<view class="attr-pop">
<view class="close" bindtap="closeAttr">
<image class="icon" src="/static/images/icon_close.png"></image>
</view>
<view class="img-info">
<image class="img" src="{{goods.picUrl}}"></image>
<view class="info">
<view class="c">
<view class="p">价格：￥{{checkedSpecPrice}}</view>
<view class="a">{{tmpSpecText}}</view>
<view class="a" wx:if="{{productList.length>0}}">已选择：{{checkedSpecText}}</view>
</view>
</view>
</view>
......@@ -114,9 +119,7 @@
<view class="spec-item" wx:for="{{specificationList}}" wx:key="name">
<view class="name">{{item.name}}</view>
<view class="values">
<view class="value {{vitem.checked ? 'selected' : ''}}" bindtap="clickSkuValue" wx:for="{{item.valueList}}" wx:for-item="vitem" wx:key="id" data-value-id="{{vitem.id}}" data-name="{{vitem.specification}}">
{{vitem.value}}
</view>
<view class="value {{vitem.checked ? 'selected' : ''}}" bindtap="clickSkuValue" wx:for="{{item.valueList}}" wx:for-item="vitem" wx:key="{{vitem.id}}" data-value-id="{{vitem.id}}" data-name-id="{{vitem.specification}}">{{vitem.value}}</view>
</view>
</view>
......@@ -130,9 +133,13 @@
</view>
</view>
</view>
</scroll-view>
</view>
<view class="contact">
<contact-button style="opacity:0;position:absolute;" type="default-dark" session-from="weapp" size="27">
</contact-button>
</view>
<view class="bottom-btn">
<view class="l l-collect {{ openAttr ? 'back' : ''}}" bindtap="closeAttrOrCollect">
<view class="l l-collect" bindtap="addCollectOrNot">
<image class="icon" src="{{ collectBackImage }}"></image>
</view>
<view class="l l-cart">
......
litemall-wx/pages/goods/goods.wxss
View file @ f9639790
.container{
margin-bottom: 100rpx;
.container {
margin-bottom: 100rpx;
}
.goodsimgs{
.goodsimgs {
width: 750rpx;
height: 750rpx;
}
.goodsimgs image{
.goodsimgs image {
width: 750rpx;
height: 750rpx;
}
.service-policy{
width: 750rpx;
height: 73rpx;
background: #f4f4f4;
padding: 0 31.25rpx;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
}
.service-policy .item{
background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png) 0 center no-repeat;
background-size: 10rpx;
padding-left: 15rpx;
display: flex;
align-items: center;
font-size: 25rpx;
color: #666;
.service-policy {
width: 750rpx;
height: 73rpx;
background: #f4f4f4;
padding: 0 31.25rpx;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
}
.service-policy .item {
background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png) 0 center no-repeat;
background-size: 10rpx;
padding-left: 15rpx;
display: flex;
align-items: center;
font-size: 25rpx;
color: #666;
}
.goods-info {
width: 750rpx;
height: 306rpx;
overflow: hidden;
background: #fff;
}
.goods-info{
width: 750rpx;
height: 306rpx;
overflow: hidden;
background: #fff;
.goods-info .c {
display: block;
width: 718.75rpx;
height: 100%;
margin-left: 31.25rpx;
padding: 38rpx 31.25rpx 38rpx 0;
border-bottom: 1px solid #f4f4f4;
}
.goods-info .c{
display: block;
width: 718.75rpx;
height: 100%;
margin-left: 31.25rpx;
padding: 38rpx 31.25rpx 38rpx 0;
border-bottom: 1px solid #f4f4f4;
.goods-info .c text {
display: block;
width: 687.5rpx;
text-align: center;
}
.goods-info .c text{
display: block;
width: 687.5rpx;
text-align: center;
.goods-info .name {
height: 41rpx;
margin-bottom: 5.208rpx;
font-size: 41rpx;
line-height: 41rpx;
}
.goods-info .name{
height: 41rpx;
margin-bottom: 5.208rpx;
font-size: 41rpx;
line-height: 41rpx;
.goods-info .desc {
height: 43rpx;
margin-bottom: 41rpx;
font-size: 24rpx;
line-height: 36rpx;
color: #999;
}
.goods-info .desc{
height: 43rpx;
margin-bottom: 41rpx;
font-size: 24rpx;
line-height: 36rpx;
color: #999;
.goods-info .price {
height: 35rpx;
font-size: 35rpx;
line-height: 35rpx;
color: #b4282d;
}
.goods-info .price{
height: 35rpx;
font-size: 35rpx;
line-height: 35rpx;
color: #b4282d;
.goods-info .brand {
margin-top: 23rpx;
min-height: 40rpx;
text-align: center;
}
.goods-info .brand{
margin-top: 23rpx;
min-height: 40rpx;
text-align: center;
.goods-info .brand text {
display: inline-block;
width: auto;
padding: 2px 30rpx 2px 10.5rpx;
line-height: 35.5rpx;
border: 1px solid #f48f18;
font-size: 25rpx;
color: #f48f18;
border-radius: 4px;
background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/detailTagArrow-18bee52dab.png) 95% center no-repeat;
background-size: 10.75rpx 18.75rpx;
}
.goods-info .brand text{
display: inline-block;
width: auto;
padding: 2px 30rpx 2px 10.5rpx;
line-height: 35.5rpx;
border: 1px solid #f48f18;
font-size: 25rpx;
color: #f48f18;
border-radius: 4px;
background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/detailTagArrow-18bee52dab.png) 95% center no-repeat;
background-size: 10.75rpx 18.75rpx;
.section-nav {
width: 750rpx;
height: 108rpx;
background: #fff;
margin-bottom: 20rpx;
}
.section-nav{
width: 750rpx;
height: 108rpx;
background: #fff;
margin-bottom: 20rpx;
.section-nav .t {
float: left;
width: 600rpx;
height: 108rpx;
line-height: 108rpx;
font-size: 29rpx;
color: #333;
margin-left: 31.25rpx;
}
.section-nav .t{
float: left;
width: 600rpx;
height: 108rpx;
line-height: 108rpx;
font-size: 29rpx;
color: #333;
margin-left: 31.25rpx;
.section-nav .i {
float: right;
width: 52rpx;
height: 52rpx;
margin-right: 16rpx;
margin-top: 28rpx;
}
.section-nav .i{
float: right;
width: 52rpx;
height: 52rpx;
margin-right: 16rpx;
margin-top: 28rpx;
.section-act .t {
float: left;
display: flex;
align-items: center;
width: 600rpx;
height: 108rpx;
overflow: hidden;
line-height: 108rpx;
font-size: 29rpx;
color: #999;
margin-left: 31.25rpx;
}
.section-act .t{
float: left;
display: flex;
align-items: center;
width: 600rpx;
height: 108rpx;
overflow: hidden;
line-height: 108rpx;
font-size: 29rpx;
color: #999;
margin-left: 31.25rpx;
.section-act .label {
color: #999;
}
.section-act .label{
color: #999;
.section-act .tag {
display: flex;
align-items: center;
padding: 0 10rpx;
border-radius: 3px;
height: 37rpx;
width: auto;
color: #f48f18;
overflow: hidden;
border: 1px solid #f48f18;
font-size: 25rpx;
margin: 0 10rpx;
}
.section-act .tag{
display: flex;
align-items: center;
padding:0 10rpx;
border-radius: 3px;
height: 37rpx;
width: auto;
color: #f48f18;
overflow: hidden;
border: 1px solid #f48f18;
font-size: 25rpx;
margin:0 10rpx;
}
.section-act .text{
display: flex;
align-items: center;
height: 37rpx;
width: auto;
overflow: hidden;
color: #f48f18;
font-size: 29rpx;
.section-act .text {
display: flex;
align-items: center;
height: 37rpx;
width: auto;
overflow: hidden;
color: #f48f18;
font-size: 29rpx;
}
.comments{
width: 100%;
height: auto;
padding-left:30rpx;
background: #fff;
margin: 20rpx 0;
.comments {
width: 100%;
height: auto;
padding-left: 30rpx;
background: #fff;
margin: 20rpx 0;
}
.comments .h{
height: 102.5rpx;
line-height: 100.5rpx;
width: 718.75rpx;
padding-right: 16rpx;
border-bottom: 1px solid #d9d9d9;
.comments .h {
height: 102.5rpx;
line-height: 100.5rpx;
width: 718.75rpx;
padding-right: 16rpx;
border-bottom: 1px solid #d9d9d9;
}
.comments .h .t{
display: block;
float: left;
width: 50%;
font-size: 38.5rpx;
color: #333;
.comments .h .t {
display: block;
float: left;
width: 50%;
font-size: 38.5rpx;
color: #333;
}
.comments .h .i{
display: block;
float: right;
width: 164rpx;
height: 100.5rpx;
line-height: 100.5rpx;
background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/address-right-990628faa7.png) right center no-repeat;
background-size: 52rpx;
.comments .h .i {
display: block;
float: right;
width: 164rpx;
height: 100.5rpx;
line-height: 100.5rpx;
background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/address-right-990628faa7.png) right center no-repeat;
background-size: 52rpx;
}
.comments .b{
height: auto;
width: 720rpx;
.comments .b {
height: auto;
width: 720rpx;
}
.comments .item{
height: auto;
width: 720rpx;
overflow: hidden;
.comments .item {
height: auto;
width: 720rpx;
overflow: hidden;
}
.comments .info{
height: 127rpx;
width: 100%;
padding: 33rpx 0 27rpx 0;
.comments .info {
height: 127rpx;
width: 100%;
padding: 33rpx 0 27rpx 0;
}
.comments .user{
float: left;
width: auto;
height: 67rpx;
line-height: 67rpx;
font-size: 0;
}
.comments .user image{
float: left;
width: 67rpx;
height: 67rpx;
margin-right: 17rpx;
border-radius: 50%;
.comments .user {
float: left;
width: auto;
height: 67rpx;
line-height: 67rpx;
font-size: 0;
}
.comments .user text{
display: inline-block;
width: auto;
height: 66rpx;
overflow: hidden;
font-size: 29rpx;
line-height: 66rpx;
.comments .user image {
float: left;
width: 67rpx;
height: 67rpx;
margin-right: 17rpx;
border-radius: 50%;
}
.comments .time{
display: block;
float: right;
width: auto;
height: 67rpx;
line-height: 67rpx;
color: #7f7f7f;
font-size: 25rpx;
margin-right: 30rpx;
.comments .user text {
display: inline-block;
width: auto;
height: 66rpx;
overflow: hidden;
font-size: 29rpx;
line-height: 66rpx;
}
.comments .content{
width: 720rpx;
padding-right: 30rpx;
line-height: 45.8rpx;
font-size: 29rpx;
margin-bottom: 24rpx;
.comments .time {
display: block;
float: right;
width: auto;
height: 67rpx;
line-height: 67rpx;
color: #7f7f7f;
font-size: 25rpx;
margin-right: 30rpx;
}
.comments .imgs{
width: 720rpx;
height: auto;
margin-bottom: 25rpx;
.comments .content {
width: 720rpx;
padding-right: 30rpx;
line-height: 45.8rpx;
font-size: 29rpx;
margin-bottom: 24rpx;
}
.comments .imgs .img{
height: 150rpx;
width: 150rpx;
margin-right: 28rpx;
.comments .imgs {
width: 720rpx;
height: auto;
margin-bottom: 25rpx;
}
.comments .spec{
width: 720rpx;
padding-right: 30rpx;
line-height: 30rpx;
font-size: 24rpx;
color: #999;
margin-bottom: 30rpx;
.comments .imgs .img {
height: 150rpx;
width: 150rpx;
margin-right: 28rpx;
}
.goods-attr{
width: 750rpx;
height: auto;
overflow: hidden;
padding: 0 31.25rpx 25rpx 31.25rpx;
background: #fff;
.comments .spec {
width: 720rpx;
padding-right: 30rpx;
line-height: 30rpx;
font-size: 24rpx;
color: #999;
margin-bottom: 30rpx;
}
.goods-attr .t{
width: 687.5rpx;
height: 104rpx;
line-height: 104rpx;
font-size: 38.5rpx;
.goods-attr {
width: 750rpx;
height: auto;
overflow: hidden;
padding: 0 31.25rpx 25rpx 31.25rpx;
background: #fff;
}
.goods-attr .item{
width: 687.5rpx;
height: 68rpx;
padding: 11rpx 20rpx;
margin-bottom: 11rpx;
background: #f7f7f7;
font-size: 38.5rpx;
.goods-attr .t {
width: 687.5rpx;
height: 104rpx;
line-height: 104rpx;
font-size: 38.5rpx;
}
.goods-attr .left{
float: left;
font-size: 25rpx;
width: 134rpx;
height: 45rpx;
line-height: 45rpx;
overflow: hidden;
color: #999;
.goods-attr .item {
width: 687.5rpx;
height: 68rpx;
padding: 11rpx 20rpx;
margin-bottom: 11rpx;
background: #f7f7f7;
font-size: 38.5rpx;
}
.goods-attr .right{
float: left;
font-size: 36.5rpx;
margin-left: 20rpx;
width: 480rpx;
height: 45rpx;
line-height: 45rpx;
overflow: hidden;
color: #333;
.goods-attr .left {
float: left;
font-size: 25rpx;
width: 134rpx;
height: 45rpx;
line-height: 45rpx;
overflow: hidden;
color: #999;
}
.detail{
width: 750rpx;
height: auto;
overflow: hidden;
.goods-attr .right {
float: left;
font-size: 36.5rpx;
margin-left: 20rpx;
width: 480rpx;
height: 45rpx;
line-height: 45rpx;
overflow: hidden;
color: #333;
}
.detail image{
width: 750rpx;
display: block;
.detail {
width: 750rpx;
height: auto;
overflow: hidden;
}
.common-problem{
width: 750rpx;
height: auto;
overflow: hidden;
.detail image {
width: 750rpx;
display: block;
}
.common-problem .h{
position: relative;
height: 145.5rpx;
width: 750rpx;
padding: 56.25rpx 0;
background: #fff;
text-align: center;
.common-problem {
width: 750rpx;
height: auto;
overflow: hidden;
}
.common-problem .h .line{
display: inline-block;
position: absolute;
top: 72rpx;
left: 0;
z-index: 2;
height: 1px;
margin-left: 225rpx;
width: 300rpx;
background: #ccc;
.common-problem .h {
position: relative;
height: 145.5rpx;
width: 750rpx;
padding: 56.25rpx 0;
background: #fff;
text-align: center;
}
.common-problem .h .title{
display: inline-block;
position: absolute;
top: 56.125rpx;
left: 0;
z-index: 3;
height: 33rpx;
margin-left: 285rpx;
width: 180rpx;
background: #fff;
.common-problem .h .line {
display: inline-block;
position: absolute;
top: 72rpx;
left: 0;
z-index: 2;
height: 1px;
margin-left: 225rpx;
width: 300rpx;
background: #ccc;
}
.common-problem .h .title {
display: inline-block;
position: absolute;
top: 56.125rpx;
left: 0;
z-index: 3;
height: 33rpx;
margin-left: 285rpx;
width: 180rpx;
background: #fff;
}
.common-problem .b{
.common-problem .b {
width: 750rpx;
height: auto;
overflow: hidden;
padding: 0rpx 30rpx;
background: #fff;
}
.common-problem .item{
.common-problem .item {
height: auto;
overflow: hidden;
padding-bottom: 25rpx;
}
.common-problem .question-box .spot{
.common-problem .question-box .spot {
float: left;
display: block;
height: 8rpx;
......@@ -401,7 +397,7 @@
margin-top: 11rpx;
}
.common-problem .question-box .question{
.common-problem .question-box .question {
float: left;
line-height: 30rpx;
padding-left: 8rpx;
......@@ -411,61 +407,60 @@
color: #303030;
}
.common-problem .answer{
.common-problem .answer {
line-height: 36rpx;
padding-left: 16rpx;
font-size: 26rpx;
color: #787878;
}
.related-goods {
width: 750rpx;
height: auto;
overflow: hidden;
}
.related-goods .h {
position: relative;
height: 145.5rpx;
width: 750rpx;
padding: 56.25rpx 0;
background: #fff;
text-align: center;
border-bottom: 1px solid #f4f4f4;
}
.related-goods{
width: 750rpx;
height: auto;
overflow: hidden;
.related-goods .h .line {
display: inline-block;
position: absolute;
top: 72rpx;
left: 0;
z-index: 2;
height: 1px;
margin-left: 225rpx;
width: 300rpx;
background: #ccc;
}
.related-goods .h .title {
display: inline-block;
position: absolute;
top: 56.125rpx;
left: 0;
z-index: 3;
height: 33rpx;
margin-left: 285rpx;
width: 180rpx;
background: #fff;
}
.related-goods .h{
position: relative;
height: 145.5rpx;
width: 750rpx;
padding: 56.25rpx 0;
background: #fff;
text-align: center;
border-bottom: 1px solid #f4f4f4;
}
.related-goods .h .line{
display: inline-block;
position: absolute;
top: 72rpx;
left: 0;
z-index: 2;
height: 1px;
margin-left: 225rpx;
width: 300rpx;
background: #ccc;
}
.related-goods .h .title{
display: inline-block;
position: absolute;
top: 56.125rpx;
left: 0;
z-index: 3;
height: 33rpx;
margin-left: 285rpx;
width: 180rpx;
background: #fff;
}
.related-goods .b{
.related-goods .b {
width: 750rpx;
height: auto;
overflow: hidden;
}
.related-goods .b .item{
.related-goods .b .item {
float: left;
background: #fff;
width: 375rpx;
......@@ -477,12 +472,12 @@
border-bottom: 1px solid #f4f4f4;
}
.related-goods .item .img{
.related-goods .item .img {
width: 311.45rpx;
height: 311.45rpx;
}
.related-goods .item .name{
.related-goods .item .name {
display: block;
width: 311.45rpx;
height: 35rpx;
......@@ -493,7 +488,7 @@
color: #333;
}
.related-goods .item .price{
.related-goods .item .price {
display: block;
width: 311.45rpx;
height: 30rpx;
......@@ -502,82 +497,103 @@
color: #b4282d;
}
.bottom-btn{
position: fixed;
left:0;
bottom:0;
z-index: 10;
width: 750rpx;
height: 100rpx;
display: flex;
background: #fff;
.bottom-btn {
position: fixed;
left: 0;
bottom: 0;
z-index: 10;
width: 750rpx;
height: 100rpx;
display: flex;
background: #fff;
}
.bottom-btn .l{
float: left;
height: 100rpx;
width: 162rpx;
border: 1px solid #f4f4f4;
display: flex;
align-items: center;
justify-content: center;
.bottom-btn .l {
float: left;
height: 100rpx;
width: 162rpx;
border: 1px solid #f4f4f4;
display: flex;
align-items: center;
justify-content: center;
}
.bottom-btn .l.l-collect{
border-right: none;
border-left: none;
text-align: center;
.bottom-btn .l.l-collect {
border-right: none;
border-left: none;
text-align: center;
width: 90rpx;
}
.bottom-btn .l.l-cart .box{
position: relative;
height: 60rpx;
width: 60rpx;
.bottom-btn .l.l-kefu {
position: relative;
height:54rpx;
width: 63rpx;
}
.bottom-btn .l.l-cart .cart-count{
height: 28rpx;
width: 28rpx;
z-index: 10;
position: absolute;
top: 0;
right:0;
background: #b4282d;
text-align: center;
font-size: 18rpx;
color: #fff;
line-height: 28rpx;
border-radius: 50%;
.bottom-btn .l.l-cart .box {
position: relative;
height: 60rpx;
width: 60rpx;
}
.bottom-btn .l.l-cart .icon{
position: absolute;
top: 10rpx;
left:0;
.bottom-btn .l.l-cart .cart-count {
height: 28rpx;
width: 28rpx;
z-index: 10;
position: absolute;
top: 0;
right: 0;
background: #b4282d;
text-align: center;
font-size: 18rpx;
color: #fff;
line-height: 28rpx;
border-radius: 50%;
}
.bottom-btn .l.l-cart .icon {
position: absolute;
top: 10rpx;
left: 0;
}
.bottom-btn .l .icon{
display: block;
height: 44rpx;
width: 44rpx;
.bottom-btn .l.l-kefu .kefu-count {
height: 28rpx;
width: 28rpx;
z-index: 10;
position: absolute;
top: 0;
right: 0;
/* background: #b4282d; */
text-align: center;
font-size: 18rpx;
color: #fff;
line-height: 28rpx;
border-radius: 50%;
}
.bottom-btn .l.l-kefu .icon{
position: absolute;
top: 10rpx;
left: 0;
}
.bottom-btn .l .icon {
display: block;
height: 44rpx;
width: 44rpx;
}
.bottom-btn .c{
float: left;
background: #f48f18;
height: 100rpx;
line-height: 96rpx;
flex: 1;
text-align: center;
color: #333;
border-top: 1px solid #f4f4f4;
border-bottom: 1px solid #f4f4f4;
color: #fff;
/* border-top: 2px solid #f4f4f4; */
/* border-bottom: 2px solid #f4f4f4; */
}
.bottom-btn .r{
......@@ -591,133 +607,195 @@
color: #fff;
}
.bottom-btn .n{
border:1px solid #f4f4f4;
background: #f4f4f4;
float: left;
height: 100rpx;
line-height: 96rpx;
flex: 1;
text-align: center;
@import "../../lib/wxParse/wxParse.wxss";
.attr-pop-box {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0, 0, 0, .5);
z-index: 8;
bottom: 0;
/* display: none; */
}
@import "../../lib/wxParse/wxParse.wxss";
.attr-pop {
width: 100%;
height: auto;
max-height: 780rpx;
padding: 31.25rpx;
background: #fff;
position: fixed;
z-index: 9;
bottom: 100rpx;
}
.attr-pop{
width: 100%;
height: 100%;
padding: 31.25rpx;
background: #fff;
.attr-pop .close {
position: absolute;
width: 48rpx;
height: 48rpx;
right: 31.25rpx;
overflow: hidden;
top: 31.25rpx;
}
.attr-pop .img-info{
width: 687.5rpx;
height: 177rpx;
overflow: hidden;
margin-bottom: 41.5rpx;
.attr-pop .close .icon {
width: 48rpx;
height: 48rpx;
}
.attr-pop .img{
float: left;
height: 177rpx;
width: 177rpx;
background: #f4f4f4;
margin-right: 31.25rpx;
.attr-pop .img-info {
width: 687.5rpx;
height: 177rpx;
overflow: hidden;
margin-bottom: 41.5rpx;
}
.attr-pop .info{
float: left;
height: 177rpx;
display: flex;
align-items: center;
.attr-pop .img {
float: left;
height: 177rpx;
width: 177rpx;
background: #f4f4f4;
margin-right: 31.25rpx;
}
.attr-pop .p{
font-size: 33rpx;
color: #333;
height: 33rpx;
line-height: 33rpx;
margin-bottom: 10rpx;
.attr-pop .info {
float: left;
height: 177rpx;
display: flex;
align-items: center;
}
.attr-pop .a{
font-size: 29rpx;
color: #333;
height: 40rpx;
line-height: 40rpx;
.attr-pop .p {
font-size: 33rpx;
color: #333;
height: 33rpx;
line-height: 33rpx;
margin-bottom: 10rpx;
}
.spec-con{
width: 100%;
height: auto;
overflow: hidden;
.attr-pop .a {
font-size: 29rpx;
color: #333;
height: 40rpx;
line-height: 40rpx;
}
.spec-con .name{
height: 32rpx;
margin-bottom: 22rpx;
font-size: 29rpx;
color: #333;
.spec-con {
width: 100%;
height: auto;
overflow: hidden;
}
.spec-con .values{
height: auto;
margin-bottom: 31.25rpx;
font-size: 0;
.spec-con .name {
height: 32rpx;
margin-bottom: 22rpx;
font-size: 29rpx;
color: #333;
}
.spec-con .value{
display: inline-block;
height: 62rpx;
padding: 0 35rpx;
line-height: 56rpx;
text-align: center;
margin-right: 25rpx;
margin-bottom: 16.5rpx;
border: 1px solid #333;
font-size: 25rpx;
color: #333;
.spec-con .values {
height: auto;
margin-bottom: 31.25rpx;
font-size: 0;
}
.spec-con .value.disable{
border: 1px solid #ccc;
color: #ccc;
.spec-con .value {
display: inline-block;
height: 62rpx;
padding: 0 35rpx;
line-height: 56rpx;
text-align: center;
margin-right: 25rpx;
margin-bottom: 16.5rpx;
border: 1px solid #333;
font-size: 25rpx;
color: #333;
}
.spec-con .value.selected{
border: 1px solid #b4282d;
color: #b4282d;
.spec-con .value.disable {
border: 1px solid #ccc;
color: #ccc;
}
.number-item .selnum{
width: 322rpx;
height: 71rpx;
border: 1px solid #ccc;
display: flex;
.spec-con .value.selected {
border: 1px solid #b4282d;
color: #b4282d;
}
.number-item .cut{
width: 93.75rpx;
height: 100%;
text-align: center;
line-height: 65rpx;
.number-item .selnum {
width: 322rpx;
height: 71rpx;
border: 1px solid #ccc;
display: flex;
}
.number-item .number{
flex: 1;
height: 100%;
text-align: center;
line-height: 68.75rpx;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
float: left;
.number-item .cut {
width: 93.75rpx;
height: 100%;
text-align: center;
line-height: 65rpx;
}
.number-item .add{
width: 93.75rpx;
height: 100%;
text-align: center;
line-height: 65rpx;
.number-item .number {
flex: 1;
height: 100%;
text-align: center;
line-height: 68.75rpx;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
float: left;
}
.number-item .add {
width: 93.75rpx;
height: 100%;
text-align: center;
line-height: 65rpx;
}
.contact{
height: 100rpx;
width: 100rpx;
background-color: #008000;
border-radius: 100%;
position: fixed;
bottom: 150rpx;
right: 20rpx;
display: flex;
align-items: center;
justify-content: center;
z-index: 9;
flex-direction: column;
/*line-height: 100rpx;
text-align: center;
padding-top: 26rpx;*/
font-size: 20rpx;
color: #008000;
box-sizing: border-box;
background: url("https://litemall.oss-cn-shenzhen.aliyuncs.com/kefu.png") no-repeat center 21rpx;
background-size: 55rpx auto;
}
.contact .name{
font-size: 32rpx;
max-width: 80rpx;
color: #fff;
text-align: center;
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment