561_jiexin/src/views/twoCart/compliance.vue

<template>
    <div class="all">
        <!-- <img class="showBg" src="../../assets/vehicle/showBg.jpg" alt=""> -->
        <img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt="">
        <div class="content">
            <img class="imgWord1" src="../../assets/vehicle/complianceWord1.png" alt="">
            <div class="contPic">
                <img class="bigImg" src="../../assets/vehicle/complianceContImg.png" alt="">
                <img @click="showMaskfn()" class="imgLeft" src="../../assets/vehicle/complianceClick1.png" alt="">
                <img @click="showMaskfn()" class="imgRight" src="../../assets/vehicle/complianceClick2.png" alt="">
                <img class="click1" src="../../assets/pageRedDot.png" alt="">
                <img class="click2" src="../../assets/pageRedDot.png" alt="">
            </div>
            <img class="imgWord4" src="../../assets/vehicle/complianceWord2.png" alt="">
        </div>
        <img class="arrow" src="../../assets/pageArrow.png" alt="">

        <!-- 弹框 -->
        <div class="maskAll" v-if="showMask">
            <img class="mask1_1" src="../../assets/vehicle/maskCompliance.jpg" alt="">
            <img @click="showMask=false" class="dele" src="../../assets/vehicle/dele.png" alt="">
        </div>
        <Sidebar class="slide"></Sidebar>
    </div>
</template>

<script>
  import Sidebar from "../../components/sidebar";
  export default{
    name:"highshop",
    components:{Sidebar},
    data(){
      return{
        showMask:false,//弹框显示
        showMaskNum:null,
      }
    },
    methods:{
      showMaskfn(e){
        this.showMask = true;
      }
    }
  }
</script>

<style scoped="scoped">
    .arrow{
        width: 0.37rem;
        height: 0.33rem;
        position: absolute;
        bottom: 0.3rem;
        left: 50%;
        transform: translateX(-50%);
        animation: ani 1s linear infinite;
    }
    @keyframes ani {
        0%{bottom:0.3rem}
        50%{bottom:0.1rem}
        100%{bottom:0.3rem}
    }
    .slide{
        position: fixed;
        top: 0.3rem;
        left: 0.3rem;
    }
    *{
        padding: 0;
        margin: 0;
    }
    .all{
        width: 100%;
        height: 100%;
    }
    .showBg,.imgBg,.maskAll{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);

    }
    .content{
        width: 100%;
        height: 12.06rem;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        color: #c4c4c3;
        text-align: left;
    }
    .imgWord1{
        width: 1.98rem;
        height: 0.48rem;
        margin-left: 3.05rem;
        margin-top: 0.05rem;
    }
    .imgWord2{
        width: 4.46rem;
        height: 0.51rem;
        margin-left: 0.6rem;
        margin-top: 0.7rem;
    }

    .imgWord3{
        width: 6.07rem;
        height: 0.73rem;
        margin-left: 0.6rem;
        margin-top: 0.3rem;
    }
    .imgWord4{
        width: 6.43rem;
        height: 1.81rem;
        margin-left: 0.6rem;
        margin-top: 9.7rem;
    }
    .contPic{
        position: relative;
    }
    .bigImg{
        width: 8.15rem;
        height: 8.93rem;
        position: absolute;
        top: 0.48rem;
        left:50%;
        transform: translateX(-50%);
    }
    .imgLeft{
        width: 1.57rem;
        height: 1.09rem;
        position: absolute;
        top: 3.7rem;
        left: 0.9rem;
    }
    .imgRight{
        width: 1.51rem;
        height: 0.32rem;
        position: absolute;
        top: 7.15rem;
        left: 0.8rem;
    }
    .click1{
        width: 0.29rem;
        height: 0.29rem;
        position: absolute;
        top: 3.45rem;
        left: 1.6rem;
        animation: dotTwinkle 3s linear infinite;
    }
    .click2{
        width: 0.29rem;
        height: 0.29rem;
        position: absolute;
        top: 7.35rem;
        left: 1.6rem;
        animation: dotTwinkle 3s linear infinite;
    }
    @keyframes dotTwinkle {
        0%{opacity: 0.2}
        50%{opacity:1}
        100%{opacity:0.2}
    }
    .mask1_1{
        width: 100%;
        height: 15.06rem;
        position: absolute;
        top: 50%;
        left:0rem;
        transform: translateY(-50%);
    }
    .dele{
        width: 0.8rem;
        height: 0.8rem;
        position: absolute;
        bottom: 1.5rem;
        left:50%;
        transform: translateX(-50%);
    }
    .line{
        width: 1.43rem;
        height: 1.49rem;
        position: absolute;
        top: 5.2rem;
        right: 0.7rem;
        z-index: 9;
    }
</style>