check-work/src/views/NewPlatform/Children/Service.vue

<template>
  <div>
    <rotation />
    <h-nav />
    <div class="flow-path">
      <div class="flow-title">服务流程</div>
      <div class="flow-content">
        您 <span class="login-color">注册、登录</span> 后通过直接申请或加入购物车进行申请服务， 直接申请后在个人中心查看， 加入
        <span class="login-color">购物车</span> 后可通过顶部菜单栏的购物车查看。
      </div>
    </div>
    <div class="inner d-flex flex-wrap">
      <div v-for="(item, index) in list" :key="index" class="item-box" :class="(index + 1) % 4 === 0 ? 'margin-0' : ''">
        <img :src="item.imgUrl" style="height: 220px; width: 100%; border: 1px solid #ccc" />
        <p class="font-24 my-4">{{ item.name }}</p>
        <p class="font-16 baseColor" style="text-align: right; cursor: pointer" @click="jump(item.id)">了解更多→</p>
      </div>
    </div>
    <div class="inner">
      <a-pagination
        :current="current"
        :total="total"
        :page-size="pageSize"
        @change="onShowSizeChange"
        class="pagination"
        show-less-items
        show-quick-jumper
      />
    </div>
  </div>
</template>

<script>
import Rotation from 'components/Rotation/Rotation.vue';
import HNav from './../components/HNav.vue';
export default {
  name: 'Service',
  components: { HNav, Rotation },
  data() {
    return {
      str: '这是服务界面',
      list: [],
      current: 1,
      pageSize: 8,
      total: 0,
    };
  },
  methods: {
    // 改变单当前页数
    onShowSizeChange(current, size) {
      this.current = current;
    },
    // 查看 服务 详情
    jump(id) {
      console.log(id);
      this.$router.push({
        path: '/NewPlatform/ServiceDet',
        name: 'ServiceDet',
        params: { id },
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.pagination {
  margin: 40px 0;
  text-align: right;
}

.item-box {
  width: 20.5%;
  margin-right: 6%;
  border-radius: 4px;
  box-shadow: 6px 6px 6px #eee;
}

.margin-0 {
  margin-right: 0 !important;
}
</style>