123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 |
- <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>
|