<!--
 * @Author: wenjie 1454560336@qq.com
 * @Date: 2024-03-18 11:08:29
 * @LastEditors: wenjie 1454560336@qq.com
 * @LastEditTime: 2024-03-18 11:32:01
 * @FilePath: \admin-manage\src\views\operationManage\shopManage\shopType.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div class="shopType app-container">
        <div class="type-box">
            <div class="item" @click="handleItem(1)">
                <div class="img"></div>
                <div class="info">
                    <div class="label">小微商户</div>
                    <div class="desc">商户拥有个人结算账户</div>
                </div>
            </div>
             <div class="item" @click="handleItem(2)">
                <div class="img"></div>
                <div class="info">
                    <div class="label">个体工商户</div>
                    <div class="desc">商户拥有个人结算帐户和营业执照</div>
                </div>
            </div>
             <div class="item" @click="handleItem(3)">
                <div class="img"></div>
                <div class="info">
                    <div class="label">企业商户</div>
                    <div class="desc">商户拥有个人结算帐户和营业执照</div>
                </div>
            </div>
             <div class="item" @click="handleItem(4)">
                <div class="img"></div>
                <div class="info">
                    <div class="label">机关事业单位或社会团体</div>
                    <div class="desc">商户拥有个人结算帐户和营业执照</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        methods: {
            handleItem(type) {
                this.$router.push({
                    path: "/operationManage/shopManage/shopAdd"+type,
                    query: {
                    id:this.$route.query.id,
                    accesseId:this.$route.query.accesseId,
                    mode:this.$route.query.mode
                    },
                });
            }
        },
    }
</script>

<style lang="scss" scoped>
.shopType{
    .type-box{
        display: flex;
        justify-content: center;
        .item{
            padding: 20px;
            border-radius: 8px;
            border: 1px solid #aaa;
            display: flex;
            align-items: center;
            margin: 40px 20px ;
            .img{
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background: #aaa;
            }
            .info{
                flex: 1;
                margin-left: 20px;
                .label{
                    font-size: 16px;
                    font-weight: bold;
                    color: #222;
                }
                .desc{
                    font-size: 14px;
                    color: #aaa;
                    margin-top: 10px;
                }
            }
        }
    }
}
</style>