BJ_web_developers / zxznweb

Blame view

src/views/product/components/selectTab1.vue 1.16 KB
Edit Raw Normal View History
3ed210e6   liuqimichale   面包导航 
1
 
  <template>
9ff37e5f   liuqimichale   分页效果 
2
 
    <div class="widthCommon" style="margin-bottom: 20px">
7180b137   liuqimichale   产品中心 
3
4
5
6
7
8
9
10
11
 
      <ul class="tabCon">
        <li v-for="i in 10" :key="i">
          <div class="tabListImg">
            <img src="../../../assets/images/product/tablist1.png" alt="">
          </div>
          <p class="tabListText">城市级智慧停车云平台</p>
        </li>
      </ul>
9ff37e5f   liuqimichale   分页效果 
12
13
14
 
      <v-page :total-row="100" align="center" :page-size-menu="false" :info="false" @page-change="pagePhotoChange">
      </v-page>
7180b137   liuqimichale   产品中心 
15
 
    </div>
3ed210e6   liuqimichale   面包导航 
16
17
18
 
  </template>
  
  <script>
7180b137   liuqimichale   产品中心 
19
3ed210e6   liuqimichale   面包导航 
20
 
  export default {
7180b137   liuqimichale   产品中心 
21
 
    name: 'selectTab1',
9ff37e5f   liuqimichale   分页效果 
22
23
24
25
26
 
    methods:{
      pagePhotoChange:function (pInfo) {
        console.log(pInfo)
      }
    }
7180b137   liuqimichale   产品中心 
27
3ed210e6   liuqimichale   面包导航 
28
29
30
31
 
  }
  </script>
  
  <style scoped lang="scss">
7180b137   liuqimichale   产品中心 
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
    .tabCon{
      overflow: hidden;
    }
    .tabCon li{
      width: 427px;
      height: 360px;
      margin: 0 30px 30px 0;
      float: left;
    }
    .tabCon li:nth-child(3n+0){
      margin-right: 0;
    }
    .tabListImg{
      width:427px;
      height:321px;
      padding: 10px 10px;
      background:rgba(255,255,255,1);
      border:2px solid rgba(203,203,203,1);
    }
    .tabListText{
      margin-top: 20px;
      font-size: 14px;
      color: #333;
      text-align: center;
    }
    .tabListImg img{
      width: 407px;
      height: 301px;
    }
3ed210e6   liuqimichale   面包导航 
61
 
  </style>