fx66/src/components/Server.vue

<template>
    <div class="server-block">
      <div class="wrap">
      <div class="title">
        <hr/>
        <h3>全方位 一站式服务</h3>
        <hr/>
      </div>
        <h4>All-around one-stop service</h4>
        <ul class="server-list">
          <li v-for="(item ,index) in items">
            <div class="item">
              <i :class="'iconfont'+' '+item.fontClass"></i>
            </div>
            <div class="text">{{item.textOne}}<br>{{item.textTwo}}</div>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
export default {
  name: 'Server',
  data(){
    return{
      items:[
        {
          fontClass:'icon-shandian',
          textOne:'FX66具备一键交易功能，',
          textTwo:'闪电交易，专业快捷!'
        },
        {
          fontClass:'icon-shouji1',
          textOne:'手机客户端，',
          textTwo:'随时随地，紧跟市场!'
        },
        {
          fontClass:'icon-jiazhipinggu-',
          textOne:'专业分析指导，',
          textTwo:'价值评估市场!'
        },
        {
          fontClass:'icon-kefu1',
          textOne:'新手帮帮帮，',
          textTwo:'一小时教您炒币入门'
        }
      ]
    }
  }
}
</script>

<style scoped>
  .server-block{
    height: 600px;
    width: 1200px;
    margin: 0 auto;
    padding-top: 68px;
  h4{
    font-size: 20px;
    color: #999;
    margin-top: 12px;
  }
  }

  .server-list{
    margin-top: 80px;
    display: flex;
    justify-content: center;
    li{
      border: 1px solid #dcdcdc;
      width: 176px;
      height: 176px;
      transform: rotate(45deg);
      margin-right: 72px;
      background-color: #fff;

&:hover{
  background-color:#1a6fa6

     }
    &:hover .item{
       display:none;
     }
&:hover .text{
   display: flex;
 }
      .item{
        width: 100%;
        height: 100%;
        line-height: 176px;
        transform: rotate(-45deg);

i{
          font-size: 60px;
          color: #2580bb;

        }
      }
.text{
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  transform: rotate(-45deg);
  color: #fff;
  font-size: 15px;
  display:none;

}
    }
  }
</style>