shop4.3.57/pages/goods/contrast.vue

<template>
    <app-layout>  
		<view class="player" v-if="show_catList">
			<view class="player-content">
				<view class="player-title">请选择品牌</view>
				<view class="player-search">
					<view class="input"><input type="text" placeholder="请输入商品名称" v-model="player_search"/></view>
					<view class="btn" @click="getShop()">搜索</view>
				</view>
				<view class="player-list">
					<view class="player-item" v-for="(item,index) of cat_list" 
						@click="getShop(item.id)"
						:key="index">
						{{item.name}} 
					</view>
				</view> 
				<view class="player-close" @click="hidden_catList">关闭</view>
			</view> 
		</view>
		<view class="player player-one" v-if="show_cat">
			<view class="player-content">
				<view class="player-title">请选择分类商品</view>
				<view class="player-search">
					<view class="input"><input type="text" placeholder="请输入商品名称" v-model="player_search"/></view>
					<view class="btn" @click="getShop()">搜索</view>
				</view>
				<view class="player-list">
					<view class="player-item" v-for="(item,index) of cat_list_one" 
						@click="addContrast(item.goods_id)"
						:key="index">
						<view class="player-left"><img :src="item.cover_pic" /></view>
						<view class="player-right">
							<view class="player-name">{{item.name}}</view>
							<view class="player-price">￥{{item.price}}</view>
						</view>
					</view>
				</view> 
				<view class="player-close" @click="hidden_cat">关闭</view>
			</view> 
		</view>
        <template v-if="goods">  
			<view style="width:100%;overflow-x:scroll;"> 
				<view class="contrast" style="width:772px;">  
					<view class="title">隐藏相同属性</view>
					<view class="colmun" v-if="contrastList">
						<view class="list" v-if="contrastList.info">
							<view class="contrast_item">
								<view class="contrast_key">商品信息</view>
								<view class="contrast_key" :class="'contrast_key'+(index+2)" v-for="(item,index) of contrastList.info" :key="index">
									<view class="pic"><img alt="手机图片" :src="item.cover_pic" /></view>
									<view class="name">{{item.name}}</view>
									<view class="price">￥{{item.price}}</view>
									<view class="buy" @click="goBuy(item.id,item.type)">立即购买</view>
									<view class="cancel" 
										:class="{unable:index==0}"
										@click="cancel(item.id,index)">移除</view> 
								</view>
								<view class="contrast_key" :class="'contrast_key'+(index+2)" v-for="(item,index) of (4 - contrastList.info.length)" :key="index"> 
									<view class="buy" @click="getShopList()">添加商品</view> 
								</view>
							</view>
						</view>
						<view class="list" v-for="(item,index) of contrastList.list" :key="index" v-if="contrastList.list" style="width:772px;float:left;">
							<view class="contrast_title" v-if="item.length>0">{{item[0].title}}</view>  
							<view class="contrast_item" v-for="(value,key) of item" :key="key">
								<view class="contrast_key" :class="'contrast_key'+(ind+1)" v-for="(ite,ind) of value.text" :key="ind">
									{{ite}}
								</view>
								<view class="contrast_key" :class="'contrast_key'+(ind+1)" v-for="(ite,ind) of (5 - value.text.length)" :key="ind">
								</view>
							</view>
						</view>  
					</view>
				</view>
			</view> 
			<u-attr
			    v-if="is_negotiable === 0 && exchangeStatus ==null"
			    v-model="attrShow"
			    :goods="goods"
			    :themeObject="themeObject"
			    :checked="checked"
			    @check="check"
			>
			</u-attr>
        </template> 
    </app-layout>
</template>

<script>
	import {mapGetters, mapState} from "vuex";
    import appGoodsBanner from "../../components/page-component/goods/app-goods-banner.vue";
    import appGoodsRecommend from "../../components/page-component/app-goods-recommend/app-goods-recommend.vue";
    import appQuickNavigation from "../../components/page-component/app-quick-navigation/app-quick-navigation.vue";
    import appComposition from'../../components/basic-component/app-composition/app-composition.vue';
    import AppVipCard from '../../components/page-component/app-vip-card/app-vip-card';
    import uniSwiperDot from '../../components/basic-component/uni-swiper-dot/uni-swiper-dot';
    import appGoodsFlashSale from '../../components/page-component/goods/app-goods-flash-sale.vue';
    import uAttr from '../../components/page-component/goods/u-attr.vue';
	import appGoodsFullReduce from '../../components/page-component/goods/app-goods-full-reduce.vue';
	import bdInfo from '@/components/page-component/goods/bd-info';
    import bdCoupon from '@/components/page-component/goods/bd-coupon.vue';
    import bdXbc from '@/components/page-component/goods/bd-xbc.vue';
    import bdKb from '@/components/page-component/goods/bd-kb.vue';
    import bdHc from '@/components/page-component/goods/bd-hc.vue';
    import bdDetail from '@/components/page-component/goods/bd-detail.vue';
    import bdComments from '@/components/page-component/goods/bd-comments.vue';
    import appClose from '@/components/basic-component/app-close/app-close.vue';  
	
    export default {
        name: "goods",
        components: {
            appGoodsBanner,
            'app-goods-recommend': appGoodsRecommend,
            'app-quick-navigation': appQuickNavigation,
            'app-composition': appComposition,
            appClose,
            uniSwiperDot,
            AppVipCard,
			appGoodsFlashSale,
			appGoodsFullReduce,
            uAttr,
            bdInfo,
            bdCoupon,
            bdXbc,
            bdKb,
            bdHc,
            bdDetail,
            bdComments
        },
        data() {
            return { 
				contrastList:null, 				//对比参数列表
				contrastApi:this.$api.poster.goods_contrast,
				catListApi:this.$api.poster.cat_list,
				searchApi:this.$api.poster.search,
				catApi:this.$api.poster.cat,
				player_search:'',
				cat_id:null,					//购物车类型id-父级
				cat_list:null,					//购物车列表
				cat_list_one:null,				//商品列表
				show_catList:false,				//是否显示推荐商品类型列表
				show_cat:false,					//显示商品列表
				attrShow:false,		
				
                showClose: false,
                is_open: 0,
                goods: null,
                selectAttr: null,
                recommend_list: null,
                is_vip: false,
                is_vip_card_user: 0,
                current: 0,
                discount: null,
                attrShow: false,
                shareData: null,
				contact_tel:'',
				contact: '',
				contact_web:'',
                poster_config: this.$api.goods.poster,
                poster_generate: this.$api.poster.goods_new,
                // 限时抢购
				flash_sale: null,
                checked: null,
                // 商品服务
                services: null,
                // 商品详情
                detail: null,
                // 商品ID
                goodsId: null,
                // 套餐组合
                composition: null,
                autoplay: true,
                full_reduce: null,
                goods_marketing_award: null,
                express: null,
                goods_marketing: null,
                exchangeStatus: null,
                exchange: null,

                price: null,
                level_show: null,
                sales: null,
                unit: null,
                is_sales: null,
                extra_quick_share: null,
                price_max: null,
                price_min: null,
                price_member_max: null,
                price_member_min: null,
                original_price: null,
                subtitle: null,
                is_negotiable: null,
                name: null,
                app_share_pic: null,
                app_share_title: null,
                goodsType: null,
                favorite: null,
                goods_coupon_center: null,
                guarantee_title: null,
                guarantee_pic: null,
                param_content: null,
                param_name: null,
                attr_groups: null,
                goods_num: null,
                good_stock: null
            };
        },
        computed: {
            themeObject:function() {
                return {
                    back: this.getTheme + '-m-back ' + this.getTheme,
                    backP: this.getTheme + '-m-back-p ' + this.getTheme,
                    backO: this.getTheme + '-m-back-o ' + this.getTheme,
                    theme: this.getTheme,
                    color: this.getTheme + '-m-text ' + this.getTheme,
                    sBack: this.getTheme + '-s-back ' + this.getTheme,
                    border: this.getTheme + '-m-border ' + this.getTheme,
                }
            },
            ...mapState({
                mall: state => state.mallConfig.mall,
                gConfig: state => state.gConfig,
            }),
			...mapGetters('mallConfig', {
				getTheme: 'getTheme',
			}),
			good_negotiable: function() {
            	let good_negotiable = this.mall.setting.good_negotiable;
            	this.contact_tel = '';
				this.contact = '';
				this.contact_web = '';
            	let arr = [];
            	for (let i = 0; i < good_negotiable.length; i++) {
            		if (good_negotiable[i] === 'contact_tel') {
						this.contact_tel = 'contact_tel';
					}
					if (good_negotiable[i] === 'contact') {
						this.contact = 'contact';
					}
					if (good_negotiable[i] === 'contact_web') {
						this.contact_web = 'contact_web';
					}
				}
            	if (this.contact_tel) {
					arr.push(this.contact_tel);
				}
				if (this.contact) {
					arr.push(this.contact);
				}
				if (this.contact_web) {
					arr.push(this.contact_web);
				}
				return arr;
			},
            contactBtn: function() {
                const len = this.good_negotiable.length;
                const theme = this.getTheme;
                if (len === 3 && (theme === 'a' || theme === 'b' || theme === 'f')) {
                    return `${theme}-m-back ${theme}-s-text ${theme}`;
                } else if (len === 3 && !(theme === 'a' ||  theme === 'b' || theme === 'f')) {
                    return `${theme}-m-back ${theme}-s-text ${theme}`;
                } if (len === 2 && (theme === 'a' || theme === 'b' || theme === 'f') && !this.contact_tel) {
                    return `${theme}-s-back text ${theme}`;
                } else if (len === 2 && (theme === 'a' || theme === 'b' || theme === 'f') && this.contact_tel) {
                    return `${theme}-m-back ${theme}-s-text ${theme}`;
                } else if (len === 2 && !(theme === 'a' || theme === 'b' || theme === 'f') && !this.contact_tel) {
                    return `${theme}-s-back text ${theme}`;
                } else if (len === 2 && !(theme === 'a' || theme === 'b' || theme === 'f') && this.contact_tel) {
                    return `${theme}-m-back ${theme}-s-text ${theme}`;
                } else {
                    return `${theme}-m-back ${theme}-s-text ${theme}`;
                }
            }
        },
        onLoad(options) {
            // #ifdef MP-WEIXIN
            wx.showShareMenu({
                menus: ['shareAppMessage', 'shareTimeline']
            })
            // #endif
            if (this.isLogin) {
                this.$store.dispatch('user/info');
            } else {
            }
            if(options.exchange) {
                this.exchangeStatus = options.exchange;
                this.exchange = options;
            } 
            this.loadData(options.id);
			let lastId = wx.getStorageSync("current")
			if(lastId){
				if(lastId != options.id){
					wx.removeStorageSync("contrast")
					wx.setStorageSync("current",options.id)
				} 
			}else{
				wx.setStorageSync("current",options.id)	 
			} 
        },
        onShareAppMessage(object) {
            if (object.from === 'button' && this.shareData) {
                return this.$shareAppMessage(this.shareData);
            }
            return this.$shareAppMessage({
                title: this.app_share_title ? this.app_share_title : this.name,
                imageUrl: this.app_share_pic ? this.app_share_pic : '',
                path: '/pages/goods/goods',
                params: {
                    id: this.goodsId
                }
            });
        },
        // #ifdef MP-WEIXIN
        onShareTimeline() {
            // 分享朋友圈beta
            return this.$shareTimeline({
                title: this.app_share_title ? this.app_share_title : this.name,
                query: {
                    id: this.goodsId
                }
            });
        },
        // #endif
        methods: { 
			goBuy(id,data){
				//判断登陆 
				uni.navigateTo({
					url: `/pages/goods/goods?id=${id}`
				}); 
			},
			cancel(id,index){ 
				console.log(id,index)
				if(index){
					let contrast = wx.getStorageSync("contrast")  
					console.log(contrast)
					let len = contrast.indexOf(id) 
					console.log(len)
					if(len>=0){
						contrast.splice(len,1) 
						console.log(contrast)
						if(contrast.length==0){
							console.log(342)
							wx.removeStorageSync("contrast")
						}else{
							wx.setStorageSync("contrast",contrast)
						}
						this.getCurrentData()
					}
				}
			},
			addContrast(id){
				let current = wx.getStorageSync("current")
				let contrast = wx.getStorageSync("contrast")   
				if(current != id){
					if(!contrast){ 
						contrast = [] 
					} 
					contrast.push(id)
					wx.setStorageSync("contrast",contrast)  
					this.show_catList = false
					this.show_cat = false
					this.player_search = ''
					console.log(363)
					console.log(contrast)
					this.getCurrentData()
				} 
			},
			hidden_cat(){
				this.show_cat = false
				this.player_search = ''
			},
			getShop(id){ 
				let keyword = this.player_search
				let params 
				let url 
				
				if(id){
					url = this.catApi
					params = {
					    cat_id: id
					}
				}else{
					url = this.searchApi
					params = {
					    keyword: keyword
					}
				}  
				console.log(387)
				console.log(params)
				 let resUrl = this.catApi
				 this.$request({
				     url: url,
				     data: params
				 }).then(response => {
				     this.$hideLoading(); 
				     if (response.code === 0) {   
						this.cat_list_one = response.data.list
						this.show_cat = true
						this.show_catList = false
				 	}
				 }) 
			},
			hidden_catList(){
				this.show_catList = false
				this.player_search = ''
			},
			getShopList(){
				 let resUrl = this.catListApi
				 this.$request({
				     url: this.catListApi,
				     data: {
				         cat_id: this.cat_id
				     }
				 }).then(response => {
				     this.$hideLoading(); 
					 console.log(412)

					if (response.code === 0) {   
						this.cat_list = response.data.list 
						this.show_catList = true
				 	}
				 }) 
			},
			getCurrentData(){ 
				let query = this.goodsId
				let contrast = wx.getStorageSync("contrast")  
				console.log(427)
				console.log(contrast)
				if(contrast){ 
					console.log(430,this.goodsId)
					query = this.goodsId + ',' + contrast.join(',')  
				}  
				let resUrl =  this.contrastApi
				console.log(433)
				console.log('query:',query)
				this.$request({
				    url: this.contrastApi,
				    data: {
				        goods_id: query
				    }
				}).then(response => {
				    this.$hideLoading(); 
				    if (response.code === 0) { 
						//当前商品类型id
						if(response.data.length>=0&&response.data[0].cat_id){ 
							this.cat_id = response.data[0].cat_id 
						}   
						this.formatData(response.data)
					}
				}) 
			},
			formatData(data){ 
				let _this = this
				let list = []
				let info = [] 
				//商品信息
				data.forEach((items,indexs)=>{
					let obj = {}
					obj.cover_pic = items.goods.cover_pic
					obj.id = items.goods.id
					obj.name = items.goods.name
					obj.price = items.goods.price
					info.push(obj)
				}) 
				//参数信息
				data.forEach((items,indexs)=>{
					if(indexs==0){ 
						data[indexs].params.forEach((item,index)=>{
							let line = []
							data[indexs].params[index].params.forEach((ite,inde)=>{ 
								let text = [] 
								let title = ''
								
								text.push(data[indexs].params[index].params[inde].name)  
								text.push(data[indexs].params[index].params[inde].value)
								data.forEach((it,i)=>{
									if(i!=0){
										if(data[i].params.length>0)
											text.push(data[i].params[index].params[inde].value||'')
									}
								})
								title = data[indexs].params[index].name  
								line.push({
									title:title,
									text:text
								}) 
							})
							list.push(line)
						}) 
					} 
				}) 
				this.contrastList = {}
				this.contrastList.list = list
				this.contrastList.info = info 
			},
			
            getMall(e) {
                this.is_open = e.is_open;
            },
            toExchange() {
                let mch_list = [{
                    mch_id: 0,
                    goods_list: [{
                        id: this.exchange.id,
                        attr: this.exchange.attr,
                        num: this.exchange.goods_num,
                        cat_id: 0,
                        goods_attr_id: this.exchange.attr_id
                    }],
                    code: this.exchange.code,
                    token: this.exchange.token,
                }];
                let url = `/pages/order-submit/order-submit?mch_list=${JSON.stringify(mch_list)}`;
                url += `&preview_url=${encodeURIComponent(this.$api.exchange.exchange_preview)}&submit_url=${encodeURIComponent(this.$api.exchange.exchange_submit)}&plugin=exchange`;
                uni.navigateTo({
                    url: url
                })
            },
            // 规格选择
            check(obj) {
                this.checked = obj;
            },
            change(e) {
                if(e.detail.source === 'touch') {
                    this.current = e.detail.current;
                }
                if(e.detail.source === 'autoplay') {
                    this.current = e.detail.current;
                }
            },
            quickShare(info) {
                this.shareData = info;
            },
            toComposition(item) {
                let id = item.id > 0 ? item.id : this.composition.list[0].id
                uni.navigateTo({
                    url: this.composition.url + '?goods_id=' + this.goodsId + '&composition_id=' + id
                })
            },
            loadData(id) { 
                this.$showLoading();
                this.$request({
                    url: this.$api.goods.detail,
                    data: {
                        id: id
                    }
                }).then(response => {
                    this.$hideLoading();
                    if (response.code === 0) {
                        let { services,
                            detail, name,
                            vip_card_appoint, plugin_extra, id,
                            goods_activity, goods_marketing_award,
                            goods_marketing, express,
                            price, sales,
                            level_show, is_sales, unit, extra_quick_share,
                            price_max, price_min, price_member_max,
                            price_member_min, original_price, subtitle,
                            is_negotiable, app_share_title,
                            app_share_pic, type, favorite, goods_coupon_center,
                            guarantee_title, guarantee_pic, param_content,
                            param_name, attr_groups, goods_num, good_stock
                        } = response.data.goods;
                        uni.setNavigationBarTitle({
                            title: name
                        }); 
						
                        this.name = name;
                        this.app_share_pic = app_share_pic;
                        this.app_share_title = app_share_title;
                        this.goods = response.data.goods;
                        this.services = services;
                        this.detail = detail;
                        this.goodsId = id;
                        this.flash_sale = plugin_extra.flash_sale;
                        this.composition = plugin_extra.composition;
                        this.goods_marketing_award = goods_marketing_award;
                        this.goods_marketing = goods_marketing;
                        this.express = express;
                        this.price = price;
                        this.level_show = level_show;
                        this.sales = sales;
                        this.unit = unit;
                        this.is_sales = is_sales;
                        this.price_max = price_max;
                        this.price_min = price_min;
                        this.price_member_max = price_member_max;
                        this.price_member_min = price_member_min;
                        this.original_price = original_price;
                        this.subtitle = subtitle;
                        this.is_negotiable = is_negotiable;
                        this.extra_quick_share = extra_quick_share;
                        this.goodsType = type;
                        this.favorite = favorite;
                        this.goods_coupon_center = goods_coupon_center;
                        this.guarantee_title = guarantee_title;
                        this.param_content = param_content;
                        this.guarantee_pic = guarantee_pic;
                        this.attr_groups = attr_groups;
                        this.param_name = param_name;
                        this.goods_num = goods_num;
                        this.good_stock = good_stock;
                        if (goods_activity) {
                            this.full_reduce = goods_activity.full_reduce;
                        }
                        if(vip_card_appoint.discount || vip_card_appoint.discount === '0.00') {
                            this.is_vip = true;
                            this.discount = vip_card_appoint.discount
                        }
                        this.is_vip_card_user = vip_card_appoint.is_vip_card_user;
                        this.loadRecommend();
						
						//
						this.getCurrentData()
                    } else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none'
                        });
                    }
                }).catch(() => {
                    this.$hideLoading();
                });
            },
            onAttr(data) {
                this.selectAttr = data;
            },
            loadRecommend() {
                this.$request({
                    url: this.$api.goods.new_recommend,
                    data: {
                        goods_id: this.goodsId,
                        type: 'goods'
                    }
                }).then(response => {
                    if (response.code === 0) {
                        this.recommend_list = response.data.list;
                    }
                });
            },
            back() {
                uni.reLaunch({
                    url: '/pages/index/index'
                });
            },
            setFavorite() {
                let url = this.$api.user.favorite_add;
                let favorite = true;
                if (this.favorite) {
                    url = this.$api.user.favorite_remove;
                    favorite = false;
                }
                this.favorite = favorite;
                this.$request({
                    url: url,
                    data: {
                        goods_id: this.goodsId
                    }
                }).then(response => {
                    if (response.code === 0) {
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: response.msg,
                            showCancel: false
                        });
                    }
                });
            },
            clickAttr(data) {
                if (this.goods.type === 'ecard' && data === 0) {
                    uni.showToast({
                        title: '虚拟商品不允许加入购物车',
                        icon: 'none'
                    });
                    return;
                }
                this.attrShow = true;
            },
			setCoupon(index) {
				this.$set(this.goods_coupon_center[index], 'is_receive', 1);
			}
        },
        onShow() {
            this.autoplay = true;
            this.showClose = false;
            setTimeout(()=>{
                this.showClose = true;
            })
        },
        onHidden() {
            this.autoplay = false;
        }
    }
</script>

<style scoped lang="scss">  
	
	.player{
		background:rgba(0,0,0,0.4);position:fixed;left:0;top:0;width:100%;height:100%;
		text-align:center;z-index:100;
		.player-content{
			position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);
			width:80%;background: #fff;
			.player-title{
				width: 100%;
				height: 45px;
				border-bottom: 1px solid #dfdfdf;
				background: #fcfcfc;
				line-height: 44px;
				text-align: center;
				font-size: 16px; 
			}
			.player-search{
				width: 100%;line-height: 44px;text-align: center;
				font-size: 16px;height: 45px;border-bottom: 1px solid #dfdfdf;
				display:flex;justify-content: space-around;
				.input{
					width:72%;display:inline-block;  
					input{text-align:left;padding-left:10px;
						outline:none;border:none;background:none;width:100%;margin-top:7px;display:block;height:30px;border-radius:20px;border:1px solid #ccc;
					}
				}
				.btn{
					display:inline-block;line-height:44px;
					margin-right:4%;
				}
			}
			.player-list{
				max-height:320px;
				overflow:scroll;
				.player-item{
					margin:0px 10px; 
					height: 40px;
					line-height: 40px;
					border-bottom: 1px solid #e3e3e3;
					box-sizing: border-box;
					padding: 0px 10px;
					color: #45a1de;
					text-align:left;
					display:flex; 
					.player-left{
						min-width:60px;
						width:60px;
						max-width:60px;
						height:60px; 
						margin:10px 10px 10px 0;
						flex-shink:0;
						flex-grow:0;
						image{
							width:100%;
							height:100%;
						}
					}
					.player-right{ 
						margin:10px  0;
						flex-grow: 1;
						height:60px;
						.player-name{
							font-size:14px;font-weight:700;
							margin-bottom:4px;color:#333;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}
						.player-price{
							font-size:12px;
							line-height:14px;
							color:#f21c1c;
						}
					}
				}
			}
			
			.player-close{
				color: #45a1de; 
				padding:10px;
				cursor:pointer;
			}
		}
	}
	.player-one .player-content .player-list .player-item{height:80px;line-height:18px;}
    .contrast{position:relative;}
	.title{position:fixed;left:0;top:0;width:100%;background:#ececec;text-align:center;color:red;font-size:14px;line-height:36px;height:36px;}
	.colmun{
		width:772px;
		padding-bottom:40px;
		padding-top:36px;
		overflow:hidden;
		text-align:center;
		border:1px solid rgb(239, 242, 245); 
		.list{  
			.contrast_title {
				line-height:38px;height:40px;box-sizing:border-box;text-align:left;padding:0 8px;font-weight:600;
				font-size:12px;color:#f21c1c;background:rgb(239, 242, 245);border:1px solid rgb(239, 242, 245);
			}
			.contrast_item {
				display:flex;
				border:1px solid rgb(239, 242, 245);
				.contrast_key{
					font-size:12px;
					width:80px;
					height:auto;
					box-sizing:border-box;
					text-align:center;
					padding:10px 8px;
					line-height:20px;
					min-height:40px;
					border:1px solid rgb(239, 242, 245);  
					display:flex;
					text-align:center;
					align-items: center; 
					overflow:hidden;
					flex-wrap: wrap; 
					.pic{
						width:100%;height:100px;
						text-align:center;
						float:left;
						image{
							width:100px;
							height:100px;
						}
					}
					
					.name{
						margin-top:10px;
						width:100%;
						float:left; 
						font-size:12px;
						line-height: 14px;
						max-height: 28px;
						height:28px;
						overflow: hidden;
					}
					.price{
						width:100%;
						float:left;
						color:#f21c1c;
						font-size:12px;
					}
					.buy{
						display: block;
						width: 90px;
						height: 30px;
						text-align: center;
						line-height: 30px;
						border-radius: 3px;
						margin: 5px auto 8px;
						color:#fff;
						background:#f21c1c;
					}
					.cancel{
						width:100%;
						float:left;
						color: #3caaff;
					}
					.unable{
						color:#aaa;
					}
				}   
				.contrast_key2,.contrast_key3,.contrast_key4,.contrast_key5{justify-content: space-around;width:173px;text-align:center;} 
				
			} 
		}
	} 
</style>