proginn-frontend/components/account_change/accountChangePanel.vue

<template>
    <div class="account-change-panel-container">
        <div class="account-change-title">选择您的角色</div>
        <div class="account-change-main">
            <div class="account-change-item">
                <div class="account-change-img">
                    <img src="https://iph.href.lu/100x100?fg=666666&bg=cccccc" />
                </div>
                <div class="account-change-tips">
                    我是需求方
                </div>
                <div class="account-change-cur"></div>
            </div>

            <div class="account-change-item">
                <div class="account-change-img">
                    <img src="https://iph.href.lu/100x100?fg=666666&bg=cccccc" />
                </div>
                <div class="account-change-tips">
                    我是开发者
                </div>
                <div class="account-change-cur"></div>
            </div>
        </div>
        <div @click="submit" class="account-change-submit">确认3选择</div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            accountType:"",

        }
    },
    computed:{
        myInfo() {
            return this.$store.state.userinfo;
        },
    },
    mounted() {

    },
    methods: {
        submit(){
            alert(234)
            let userinfo = this.$store.state.userinfo
            console.log(userinfo)
        }
    },
}
</script>


<style lang="scss">
.account-change-panel-container{
    width: 880px;
    height: 600px;
    background: #FFFFFF;
    border-radius: 8px;
}
.account-change-title{
    margin-top: 40px;
    margin-bottom: 50px;
    text-align: center;
    font-size: 28px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #0B121A;
    line-height: 40px
}
.account-change-main{
    margin-left:58px;
    margin-right: 58px;
    overflow: hidden;
    display: flex;
    justify-content:space-between;
}

.account-change-item{
    width: 360px;
    height: 300px;
    background: #FFFFFF;
    border-radius: 16px;
    border: 2px dotted #CED3D9;
}

.account-change-img{
    margin:60px auto 0;
    width:90px;
    height:90px;
    border-radius:100%;
    overflow: hidden;
    img{
        width:90px;
        height:90px;
        border-radius:100%;
    }
}

.account-change-tips{
    margin-top: 24px;
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #0B121A;
    line-height: 33px
    text-align: center
}

.account-change-submit{
    margin:58px auto 0 ;
    width: 140px;
    height: 48px;
    border-radius: 24px;
    border: 1px solid #4A5D74;
    line-height: 48px;
    text-align: center;

    font-size: 18px;
    font-weight: 500;
    color: #4B5D73
}
</style>