|
@@ -0,0 +1,615 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="container" :style="{height:showSpecifications?'100%':'auto',overflow:showSpecifications?'hidden':''}">
|
|
|
|
|
+
|
|
|
|
|
+ <swiper indicator-dots autoplay circular class="swiper">
|
|
|
|
|
+ <block v-for="(item,index) in bannerList" :key="index">
|
|
|
|
|
+ <swiper-item>
|
|
|
|
|
+ <image mode="aspectFill" :src="item.image"></image>
|
|
|
|
|
+ </swiper-item>
|
|
|
|
|
+ </block>
|
|
|
|
|
+ </swiper>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="pay">
|
|
|
|
|
+ <div class="kefu">
|
|
|
|
|
+
|
|
|
|
|
+ <button open-type="contact"> 客服</button>
|
|
|
|
|
+
|
|
|
|
|
+ <img src="/static/images/xiangqing_icon_kefu.png" alt="">
|
|
|
|
|
+ <div class="text">在线咨询</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="btnList">
|
|
|
|
|
+ <div>加入购物车</div>
|
|
|
|
|
+ <div>立即下单</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="productInfo">
|
|
|
|
|
+ <div class="title">{{productInfo.title}}</div>
|
|
|
|
|
+ <div class="sub">{{productInfo.serviceDetail}}</div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="money">
|
|
|
|
|
+ <div class="price">{{productInfo.price}}</div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="down" v-if="productInfo.downPayment">
|
|
|
|
|
+ <span>可先支付定金:</span>
|
|
|
|
|
+ <span class="downPrice">{{productInfo.downPayment}}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="sale">
|
|
|
|
|
+ <span>已售 {{productInfo.salesVolume}}</span>
|
|
|
|
|
+ <span>好评 {{productInfo.praise}}%</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="chooseSpecifications" @click="chooseSpecifications">
|
|
|
|
|
+ <span class="name">选择规格</span>
|
|
|
|
|
+ <span class="val">请选择</span>
|
|
|
|
|
+ <img src="/static/images/icon_inter.png" alt="">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class='main'>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="tabList">
|
|
|
|
|
+ <div class="tabItem" :class="{select:nowSelectTab==0}" @click="chooseTab(0)">
|
|
|
|
|
+ 客片展示
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="tabItem" :class="{select:nowSelectTab==1}" @click="chooseTab(1)">
|
|
|
|
|
+ 产品详情
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="tabItem" :class="{select:nowSelectTab==2}" @click="chooseTab(2)">
|
|
|
|
|
+ 评价(256)
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="line" :style="{left:(100*nowSelectTab+77.5)+'px'}"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="mainDetail">
|
|
|
|
|
+
|
|
|
|
|
+ <div class="imgList" v-if="nowSelectTab==0">
|
|
|
|
|
+ <image mode="widthFix" :src="item.image" v-for="(item,index) in detailList" :key="index" alt=""></image>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="productDetail" v-if="nowSelectTab==1">
|
|
|
|
|
+ <div class="detail-item" v-for="(item,index) in productParameters" :key="index">
|
|
|
|
|
+ <div class="name">{{item.parameterKey}}</div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="val" v-for="(k,kIndex) in item.parameterValue" :key="kIndex">{{k}}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="productComment" v-if="nowSelectTab==2">
|
|
|
|
|
+
|
|
|
|
|
+ <div class="totalComment">
|
|
|
|
|
+ <div class="startList">
|
|
|
|
|
+ <img :src="item" v-for="(item,index) in starList" :key="index" alt="">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="startName">好评度{{productInfo.praise}}%</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <productComment v-for="(item,index) in productComments" :key="index" :info='item'></productComment>
|
|
|
|
|
+
|
|
|
|
|
+ <div v-if="commentFinish">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <view class="weui-loadmore" v-else-if="loadingFinish">
|
|
|
|
|
+ <view class="weui-loading"></view>
|
|
|
|
|
+ <view class="weui-loadmore__tips">加载中</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div v-if="loadingFinish">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <view class="weui-loadmore" v-else-if="loading">
|
|
|
|
|
+ <view class="weui-loading"></view>
|
|
|
|
|
+ <view class="weui-loadmore__tips">加载中</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="weui-loadmore" v-else>
|
|
|
|
|
+ <!-- <view class="weui-loading"></view> -->
|
|
|
|
|
+ <view class="weui-loadmore__tips">上划加载更多</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <specificationsContent :visible='showSpecifications' :productInfo='productInfo' @close='showSpecifications=false' :totalMoney='totalMoney' :chooseType='chooseType' :chooseNum='chooseNum' @changeType='changeType' @changeNum='changeNum' @changeChoose='hasChoose=true'></specificationsContent>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+import specificationsContent from '../../components/SpecificationsContent';
|
|
|
|
|
+import productComment from '../../components/ProductComment';
|
|
|
|
|
+import calc from '../../calc';
|
|
|
|
|
+export default {
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ productId: 0,
|
|
|
|
|
+ productInfo: {},
|
|
|
|
|
+ bannerList: [],
|
|
|
|
|
+ showSpecifications: false,
|
|
|
|
|
+ chooseType: 'all',
|
|
|
|
|
+ chooseNum: 1,
|
|
|
|
|
+ hasChoose: false,
|
|
|
|
|
+ nowSelectTab: 0,
|
|
|
|
|
+ loading: false,
|
|
|
|
|
+ loadingFinish: false,
|
|
|
|
|
+ detailList: [],
|
|
|
|
|
+ productParameters: [],
|
|
|
|
|
+ currentPage: 1,
|
|
|
|
|
+ productComments: [],
|
|
|
|
|
+ commentFlag: false,
|
|
|
|
|
+ commentFinish: false,
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ computed: {
|
|
|
|
|
+ totalMoney() {
|
|
|
|
|
+ var money = 0;
|
|
|
|
|
+ if (this.chooseType == 'all') {
|
|
|
|
|
+ money = calc.Mul(this.chooseNum, this.productInfo.price);
|
|
|
|
|
+ } else if (this.productInfo.downPayment) {
|
|
|
|
|
+ money = calc.Mul(this.chooseNum, this.productInfo.downPayment);
|
|
|
|
|
+ }
|
|
|
|
|
+ return money;
|
|
|
|
|
+ },
|
|
|
|
|
+ starList() {
|
|
|
|
|
+ var list = [
|
|
|
|
|
+ require('../../../static/images/icon_pingjia.png'),
|
|
|
|
|
+ require('../../../static/images/icon_pingjia_yiban.png'),
|
|
|
|
|
+ require('../../../static/images/icon_pingjia_pre.png'),
|
|
|
|
|
+ ];
|
|
|
|
|
+ var img = [list[0], list[0], list[0], list[0], list[0]];
|
|
|
|
|
+ if (this.productInfo.praise) {
|
|
|
|
|
+ var starLevel = Number(this.productInfo.praise) / 20;
|
|
|
|
|
+ img = [];
|
|
|
|
|
+ for (var i = 0; i < 5; i++) {
|
|
|
|
|
+ if (
|
|
|
|
|
+ Math.floor(starLevel) == i &&
|
|
|
|
|
+ Math.ceil(starLevel) > i
|
|
|
|
|
+ ) {
|
|
|
|
|
+ img.push(list[1]);
|
|
|
|
|
+ } else if (starLevel <= i) {
|
|
|
|
|
+ img.push(list[0]);
|
|
|
|
|
+ } else if (starLevel > i) {
|
|
|
|
|
+ img.push(list[2]);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ return img;
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ onLoad(options) {
|
|
|
|
|
+ console.log(options);
|
|
|
|
|
+ this.productId = options.id;
|
|
|
|
|
+ this.$http
|
|
|
|
|
+ .get('/productInfo/getOne', { id: this.productId })
|
|
|
|
|
+ .then(res => {
|
|
|
|
|
+ if (res.success) {
|
|
|
|
|
+ this.productInfo = res.data;
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ .catch(e => {
|
|
|
|
|
+ console.log(e);
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ this.getImage(0).then(list => {
|
|
|
|
|
+ console.log(list);
|
|
|
|
|
+ this.bannerList = list;
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ onReachBottom() {
|
|
|
|
|
+ if (!this.isLoading) {
|
|
|
|
|
+ this.chooseTab(this.nowSelectTab);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (this.nowSelectTab == 2 && this.commentFlag) {
|
|
|
|
|
+ this.getProductComment().then(list => {
|
|
|
|
|
+ this.productComments = this.productComments.concat(list);
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ getImage(type) {
|
|
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
|
|
+ this.$http
|
|
|
|
|
+ .get('/productImage/all', {
|
|
|
|
|
+ productId: this.productId,
|
|
|
|
|
+ typeFlag: type,
|
|
|
|
|
+ })
|
|
|
|
|
+ .then(res => {
|
|
|
|
|
+ if (res.success) {
|
|
|
|
|
+ resolve(res.data);
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ .catch(e => {
|
|
|
|
|
+ console.log(e);
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ chooseSpecifications() {
|
|
|
|
|
+ this.showSpecifications = true;
|
|
|
|
|
+ },
|
|
|
|
|
+ changeType(type) {
|
|
|
|
|
+ this.chooseType = type;
|
|
|
|
|
+ },
|
|
|
|
|
+ changeNum(num) {
|
|
|
|
|
+ this.chooseNum = num;
|
|
|
|
|
+ },
|
|
|
|
|
+ getProductParameters() {
|
|
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
|
|
+ this.$http
|
|
|
|
|
+ .get('/productParameter/all', {
|
|
|
|
|
+ productId: this.productId,
|
|
|
|
|
+ currentPage: this.currentPage,
|
|
|
|
|
+ })
|
|
|
|
|
+ .then(res => {
|
|
|
|
|
+ if (res.success) {
|
|
|
|
|
+ resolve(res.data);
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ .catch(e => {
|
|
|
|
|
+ console.log(e);
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ getProductComment() {
|
|
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
|
|
+ this.commentFlag = false;
|
|
|
|
|
+ this.$http
|
|
|
|
|
+ .get('/productComment/page', {
|
|
|
|
|
+ productId: this.productId,
|
|
|
|
|
+ })
|
|
|
|
|
+ .then(res => {
|
|
|
|
|
+ if (res.success) {
|
|
|
|
|
+ resolve(res.data.pp);
|
|
|
|
|
+
|
|
|
|
|
+ if (
|
|
|
|
|
+ res.data.page.currentPage <
|
|
|
|
|
+ res.data.page.totalPage
|
|
|
|
|
+ ) {
|
|
|
|
|
+ // console.log('aaaaaa')
|
|
|
|
|
+ this.commentFlag = true;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.commentFinish = true;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ .catch(e => {
|
|
|
|
|
+ console.log(e);
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ chooseTab(tab) {
|
|
|
|
|
+ this.loadingFinish = false;
|
|
|
|
|
+ this.isLoading = true;
|
|
|
|
|
+ if (tab == 0) {
|
|
|
|
|
+ this.getImage(1).then(list => {
|
|
|
|
|
+ this.detailList = list;
|
|
|
|
|
+ this.loadingFinish = true;
|
|
|
|
|
+ });
|
|
|
|
|
+ } else if (tab == 1) {
|
|
|
|
|
+ this.getProductParameters().then(list => {
|
|
|
|
|
+ list.forEach(item => {
|
|
|
|
|
+ item.parameterValue = item.parameterValue.split(',');
|
|
|
|
|
+ });
|
|
|
|
|
+ this.productParameters = list;
|
|
|
|
|
+ this.loadingFinish = true;
|
|
|
|
|
+ });
|
|
|
|
|
+ } else if (tab == 2) {
|
|
|
|
|
+ this.currentPage = 1;
|
|
|
|
|
+ this.getProductComment().then(list => {
|
|
|
|
|
+ this.productComments = list;
|
|
|
|
|
+ this.loadingFinish = true;
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ this.nowSelectTab = tab;
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ components: {
|
|
|
|
|
+ specificationsContent,
|
|
|
|
|
+ productComment,
|
|
|
|
|
+ },
|
|
|
|
|
+};
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style lang='less' scoped>
|
|
|
|
|
+.container {
|
|
|
|
|
+ // overflow: hidden;
|
|
|
|
|
+ min-height: 100%;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+}
|
|
|
|
|
+.swiper {
|
|
|
|
|
+ height: 375px;
|
|
|
|
|
+
|
|
|
|
|
+ image {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 375px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .wx-swiper-dot {
|
|
|
|
|
+ width: 8rpx;
|
|
|
|
|
+ height: 8rpx;
|
|
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
|
|
+ border-radius: 4rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .wx-swiper-dot-active {
|
|
|
|
|
+ width: 22rpx;
|
|
|
|
|
+ background-color: #00c5f2;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.productInfo {
|
|
|
|
|
+ padding: 25px 15px 20px;
|
|
|
|
|
+
|
|
|
|
|
+ .title {
|
|
|
|
|
+ font-size: 18px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
|
|
+ line-height: 25px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .sub {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
|
|
+ line-height: 17px;
|
|
|
|
|
+ margin-top: 8px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .money {
|
|
|
|
|
+ color: #ff3b30;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
|
+
|
|
|
|
|
+ .price {
|
|
|
|
|
+ font-size: 22px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ line-height: 30px;
|
|
|
|
|
+
|
|
|
|
|
+ &::before {
|
|
|
|
|
+ content: '¥';
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .down {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ line-height: 20px;
|
|
|
|
|
+ margin-left: 15px;
|
|
|
|
|
+
|
|
|
|
|
+ .downPrice {
|
|
|
|
|
+ &::before {
|
|
|
|
|
+ content: '¥';
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .sale {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
|
|
+ line-height: 15px;
|
|
|
|
|
+ span {
|
|
|
|
|
+ margin-right: 42px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .chooseSpecifications {
|
|
|
|
|
+ height: 60px;
|
|
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
|
|
+ box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 0 15px;
|
|
|
|
|
+ margin-top: 30px;
|
|
|
|
|
+
|
|
|
|
|
+ .name {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
|
|
+ line-height: 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .val {
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
|
|
+ line-height: 18px;
|
|
|
|
|
+ flex-grow: 1;
|
|
|
|
|
+ text-align: right;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 24px;
|
|
|
|
|
+ height: 24px;
|
|
|
|
|
+ margin-left: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.main {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.tabList {
|
|
|
|
|
+ position: sticky;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ z-index: 20;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ padding: 16px 0;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ .tabItem {
|
|
|
|
|
+ width: 100px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
|
|
+ line-height: 21px;
|
|
|
|
|
+
|
|
|
|
|
+ &.select {
|
|
|
|
|
+ color: #00c5f2;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .line {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ bottom: 10px;
|
|
|
|
|
+ width: 20px;
|
|
|
|
|
+ height: 4px;
|
|
|
|
|
+ background: rgba(0, 197, 242, 1);
|
|
|
|
|
+ border-radius: 2px;
|
|
|
|
|
+ left: 40px;
|
|
|
|
|
+ transition: left ease-in-out 0.3s;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.imgList {
|
|
|
|
|
+ image {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.mainDetail {
|
|
|
|
|
+ background-color: #f2f4f5;
|
|
|
|
|
+
|
|
|
|
|
+ padding: 0 0 66px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+
|
|
|
|
|
+ .productDetail {
|
|
|
|
|
+ margin: 15px;
|
|
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ padding: 0 15px;
|
|
|
|
|
+
|
|
|
|
|
+ .detail-item {
|
|
|
|
|
+ padding: 0 0 12px;
|
|
|
|
|
+ .name {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
|
|
+ line-height: 20px;
|
|
|
|
|
+ padding: 15px 0 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .val {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
|
|
+ line-height: 24px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &:not(:last-child) {
|
|
|
|
|
+ border-bottom: 1px solid #f2f4f5;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.productComment {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ border-top: 1px solid #f2f4f5;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.totalComment {
|
|
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ padding: 15px 15px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ height: 68px;
|
|
|
|
|
+ // position: sticky;
|
|
|
|
|
+ // top: 63px;
|
|
|
|
|
+ // opacity: 20;
|
|
|
|
|
+ margin: 15px;
|
|
|
|
|
+
|
|
|
|
|
+ .startList {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 22px;
|
|
|
|
|
+ height: 22px;
|
|
|
|
|
+ margin-right: 8px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .startName {
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
|
|
+ line-height: 18px;
|
|
|
|
|
+ flex-grow: 1;
|
|
|
|
|
+ text-align: right;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.pay {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ height: 56px;
|
|
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
|
|
+ box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.08);
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ z-index: 50;
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ .kefu {
|
|
|
|
|
+ width: 100px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+
|
|
|
|
|
+ button {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ opacity: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 24px;
|
|
|
|
|
+ height: 24px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .text {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
|
|
+ line-height: 17px;
|
|
|
|
|
+ margin-top: 2px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btnList {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ div {
|
|
|
|
|
+ width: 130px;
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ background: rgba(17, 221, 253, 1);
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
|
|
+ line-height: 40px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ &:first-child {
|
|
|
|
|
+ border-radius: 22px 0px 0px 22px;
|
|
|
|
|
+ &:active {
|
|
|
|
|
+ background-color: darken(#11ddfd, 10);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &:last-child {
|
|
|
|
|
+ background-color: #00c5f2;
|
|
|
|
|
+ border-radius: 0px 22px 22px 0px;
|
|
|
|
|
+
|
|
|
|
|
+ &:active {
|
|
|
|
|
+ background-color: darken(#00c5f2, 10);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|