FE_bankTeaching/src/pages/bank/list/index.vue

<template>
    <div class="wrap">
        <img class="sth bg" src="@/assets/img/index-bg.png" alt="">
        <div class="case">项目案例</div>
        
        <div class="sth integrated-counter">
            <img width="100%" src="@/assets/img/integrated-counter.png" alt="">
            <div class="name">综合柜台</div>
        </div>
        
        <img class="sth international" src="@/assets/img/international.png" alt="">
        <img class="sth manager" src="@/assets/img/manager.png" alt="">
        <img class="sth credit-dep" src="@/assets/img/credit-dep.png" alt="">
        <img class="sth company-finance" src="@/assets/img/company-finance.png" alt="">
        <img class="sth personal-finance" src="@/assets/img/personal-finance.png" alt="">

        <vCase></vCase>
    </div>
</template>

<script>
import vCase from '@/components/case'
export default {
    name: 'index',
    data() {
        return {
            caseVisible: true,
        }
    },
    components: {
        vCase
    },
    mounted() {
        
    },
    methods: {
        
    }
};
</script>

<style lang="scss" scoped>
    .wrap{
        .sth{
            position: absolute;
            &.cp{
                cursor: pointer;
            }
        }
        .bg{
            top: 0;
            left: 0;
            width: 100%;
        }
        .integrated-counter{
            top: 0;
            left: 20%;
            width: 35%;
            img{
                transition: all .5s;
                &:hover{
                    margin-top: -10px;
                }
            }
            
            .name{
                position: absolute;
                top: 43%;
                left: -23%;
                width: 280px;
                height: 100px;
                line-height: 94px;
                text-align: center;
                color: #fff;
                font-size: 28px;
                background: url(../../../assets/img/index-btn-bg.png) 0 0/cover no-repeat;
            }
        }
        .international{
            top: 0;
            left: 72%;
            width: 28%;
        }
        .manager{
            top: 57%;
            left: 65%;
            width: 34%;
            transition: all .5s;
            &:hover{
                top: calc(57% - 10px);
            }
        }
        .credit-dep{
            top: 38%;
            left: 0;
            width: 21%;
        }
        .company-finance{
            top: 62%;
            left: 10%;
            width: 30%;
        }
        .personal-finance{
            top: 80%;
            left: 31%;
            width: 30%;
        }
        .case{
            position: absolute;
            top: 80px;
            left: 40px;
            width: 250px;
            height: 106px;
            line-height: 106px;
            text-align: center;
            color: #fff;
            font-size: 26px;
            background: url(../../../assets/img/case.png) 0 0 /cover no-repeat;
            cursor: pointer;
        }
    }
</style>