VUE之彩虹点击

<template>
  <view class="content">
      <view class="view71" hover-class="view7" :hover-start-time="3000" :hover-stay-time="800">
        <view class="view61" hover-class="view6" :hover-start-time="2500" :hover-stay-time="9000">
          <view class="view51" hover-class="view5" :hover-start-time="2000" :hover-stay-time="10000">
            <view class="view41" hover-class="view4" :hover-start-time="1500" :hover-stay-time="11000">
              <view class="view31" hover-class="view3" :hover-start-time="1000" :hover-stay-time="12000">
                <view class="view21" hover-class="view2" :hover-start-time="500" :hover-stay-time="13000">
                  <view class="view11" hover-class="view1" :hover-start-time="0" :hover-stay-time="14000">  
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {        
      }
    },
    onLoad() {
 
    },
    methods: {      
    },
  }
</script>
 
<style>
  view{
    width: 100%;
    background-color: #FFFFFF;
    border: #000000;
  }
  .view1{
    
    background-color:#6257A3 ;
  }
  .view2{
    
    background-color:#3667B3 ;
  }
  .view3{
    
    background-color:#42C6ED ;
  }
  .view4{
    
    background-color:#70C051 ;
  }
  .view5{
    
    background-color:#F2ED48 ;
  }
  .view6{
  
    background-color:#F48926 ;
  }
  .view7{
    
    background-color:#F02E2E ;
  }
  .view11{
    height: 100rpx;
    
  }
  .view21{
    height: 200rpx;
    
  }
  .view31{
    height: 300rpx;
    
  }
  .view41{
    height: 400rpx;
    
  }
  .view51{
    height: 500rpx;
    
  }
  .view61{
    height: 600rpx;
    
  }
  .view71{
    height: 700rpx;
    
  }
  .content {
    height: 700rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
</style>