<template>
<view class="box" @touchmove.stop.prevent="moveHandle" v-if="ifservice" @click="turnoff">
     <view class="servicelist">
        <view class="top">
            <text>服务</text>
            <view class="close" @click="turnoff"> 
                <img src="../../static/img/off.png" alt="" class="off">
            </view>
        </view>
        
        <view class="mid">
             <scroll-view  :scroll-y="true" class="scroll-Y"
                @scroll="scroll">
            <view class="item">
                <view class="item-1">
                    <img src="../../static/img/serviceicon.png" alt="" class="icon">
                    <text>全正品</text>
                    <view class="desc">各大厂商 直接供货</view>
                </view>
                  <view class="item-1">
                    <img src="../../static/img/serviceicon.png" alt="" class="icon">
                    <text>全正品</text>
                    <view class="desc">各大厂商 直接供货</view>
                </view>
                   <view class="item-1">
                    <img src="../../static/img/serviceicon.png" alt="" class="icon">
                    <text>全正品</text>
                    <view class="desc">各大厂商 直接供货</view>
                </view>
                 <view class="item-1">
                    <img src="../../static/img/serviceicon.png" alt="" class="icon">
                    <text>全正品</text>
                    <view class="desc">各大厂商 直接供货</view>
                </view>
                 <view class="item-1">
                    <img src="../../static/img/serviceicon.png" alt="" class="icon">
                    <text>全正品</text>
                    <view class="desc">各大厂商 直接供货</view>
                </view>
                 <view class="item-1">
                    <img src="../../static/img/serviceicon.png" alt="" class="icon">
                    <text>全正品</text>
                    <view class="desc">各大厂商 直接供货</view>
                </view>
                                 <view class="item-1">
                    <img src="../../static/img/serviceicon.png" alt="" class="icon">
                    <text>全正品</text>
                    <view class="desc">各大厂商 直接供货</view>
                </view>
                
                                 <view class="item-1">
                    <img src="../../static/img/serviceicon.png" alt="" class="icon">
                    <text>全正品</text>
                    <view class="desc">各大厂商 直接供货</view>
                </view>
                
                                 <view class="item-1">
                    <img src="../../static/img/serviceicon.png" alt="" class="icon">
                    <text>全正品aaaa</text>
                    <view class="desc">各大厂商 直接供货aaaa</view>
                </view>

            </view>
                  </scroll-view>
        </view>
  
    </view>
</view>
   
</template>

<script>
export default {
    name:"servicelist",
    props:{
        ifservice:{
            type:Boolean
        }
    },
    methods:{
        moveHandle(){

        },
        scroll(){},
        turnoff(){
            this.$emit("turnoff",false)
        }
    }
}
</script>

<style lang="scss">
.box{
    width: 100%;
    height: 100vh;
    background-color: rgba(127, 127, 127, 0.5);

}
.servicelist{
    background-color: white;
    height: 949upx;
    .top{
        height: 97upx;
        color: #333333;
        font-size: 30upx;
        line-height: 97upx;
        text-align: center;
        border-bottom: 2upx solid #D9D9D9;
        margin-bottom: 35upx;
        .close{
            width: 26upx;
            height: 26upx;
            float: right;
            margin: auto 0;
            margin-right: 33upx;
            .off{
                width: 100%;
                height: 100%;
            }
        }
    }
    .mid{
        .item{
            color: #333333;
            font-size: 26upx;
            .item-1{
                margin-bottom: 60upx;
            }
            .icon{
                width: 24upx;
                height: 24upx;
                margin-left:30upx;
                margin-right: 20upx;
            }
            .desc{
                color: #999999;
                font-size: 22upx;
                margin-top: 16upx;
                margin-left: 73upx;
            }
        }
    }
    .scroll-Y{
         height: 790upx;
    }
}
</style>