<template>
    <view class="box">
        <view class="index" style="margin-left:30upx;margin-right:82upx;">
            <image src="../../static/img/index.png">

            </image>
            <view>首页</view>
        </view>
        <view class="index" style="margin-right:44upx;"><image src="../../static/img/server.png">

            </image>
            <view>客服</view></view>
        <view class="alone" style="margin-right:7upx;" @click="dandubuy">
            <view>￥{{dan}}</view>
            <view>单独购买</view>
        </view>
        <view class="group" @click="group">
             <view>￥{{pin}}</view>
            <view>拼团购卖</view>
        </view>
    </view>
</template>
<style lang="scss" scoped>
.box{
    width: 750upx;
    height: 106upx;
    background-color: #fff;
    display: flex;
    align-items: center;
    .index{
        display: flex;
        flex-direction: column;
        align-items: center;
        >image{
            width: 38upx;
            height: 35upx;
            margin-bottom: 8upx;
        }
        >view{
            font-size: 20upx;
            color: #666666;
        }
    }
    .alone{
        width: 197upx;
        height: 79upx;
        border:1px solid rgba(222,53,72,1);
        border-radius: 5upx;
        display: flex;
        font-size: 26upx;
        color: #DE3548;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    .group{
        width: 287upx;
        height: 83upx;
        background:rgba(222,53,72,1);
        border-radius: 5upx;

        display: flex;
        font-size: 26upx;
        color: #FFFFFF;
        justify-content: center;
        flex-direction: column;
        align-items: center;

    }
}
</style>
<script>
export default {
    name:"pintuandetail-bottom",
    props:['dan','pin'],
    methods:{
        dandubuy(){
            this.$emit("dandu",true)
        },
         group(){
             console.log("pplkio")
            this.$emit("group",true)
        }
    }
}
</script>