大轮播图

 

  <div class="BannerMain" >
        <!-- 主页大轮播图 -->
        <el-carousel height="451px" id="mycarousel">
            <el-carousel-item v-for="(item, index) in (ResearchTrendsta?ResearchTrendsta.slice(0,4):ResearchTrendsta)">
                <div class="Banner-box">

                    <div class="main"  @click="deill(item)" style="cursor: pointer">
                        <div class="shadow" style="width: 735px;">
                            <h2 style="color: #fff;text-align: center;
    position: absolute;
    left: 50px;
    bottom: 40px;
">
                                {{item.tilte}}
                            </h2>


                        </div>

                    </div>
                    <img :src="item.coverImage" style="position: absolute;width: 100%;height: 100%;cursor: pointer">

                </div>

            </el-carousel-item>
        </el-carousel>
    </div>

　　css

 .BannerMain{

        width: 1110px;
        height: 451px;
        margin: 0 auto;
        margin-top: 50px;
        padding: 0px;
        .Banner-box{
            height: 451px;
        }

        .main{
            position: absolute;
            width: 100%;
            height: 100%;
            /*background: rgba(0, 0, 0, 0.55);*/
            background: linear-gradient(180deg, rgba(34, 84, 180, 0.00) 66.74%, #091242 100%), rgba(9, 18, 66, 0.20);
            z-index: 99;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            .btn{
                cursor: pointer;
                display: flex;
                width: 190px;
                height: 54px;

                justify-content: center;
                align-items: center;
                color: #fff;
                border-radius: 6px;
                background: var(--bt, linear-gradient(90deg, #0B72FC 0%, #2FBAF9 100%));
                /* Shadow_button */
                box-shadow: 0px 12px 30px 0px rgba(24, 92, 255, 0.18);
            }
        }
        border-bottom: 1px solid #F4F4F4;


    }

    .el-carousel__item h3 {
        color: #475669;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
        text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
    }
    .el-carousel ::v-deep ul {
       /*display: none;*/
        bottom: 30px;
        right: 20px;
        left:unset;
        transform: translateX(-50%);
        li{
            button{
                width: 8px;
                height: 8px;
                border-radius: 50%;
            }
        }
    }