nsgk_mobile/src/views/lawEnforcement/retrospect/retrospect.vue

<template>
    <div class="home_wrapper">
        <div class="header_main">
          电子追溯
<!--          <div class="return_btn" @click="onClickLeft"></div>-->
        </div>
      <div class="jg"></div>

      <div class="main_box">
        <van-grid :column-num="3" :border="false" square clickable>
          <van-grid-item icon="../../../static/images/lawEnforcement/new/retrospect_icon_01.png" text="农药扫码" :to="{name:'lawEnforcementRetrospectDetail'}" />
          <van-grid-item icon="../../../static/images/lawEnforcement/new/retrospect_icon_02.png" text="种子扫码" />
          <van-grid-item icon="../../../static/images/lawEnforcement/new/retrospect_icon_03.png" text="肥料扫码" />
          <van-grid-item icon="../../../static/images/lawEnforcement/new/retrospect_icon_01.png" text="兽药扫码" />
          <van-grid-item icon="../../../static/images/lawEnforcement/new/retrospect_icon_02.png" text="饲料扫码" />
        </van-grid>
      </div>

      <div class="main_box">
        <van-grid :column-num="3" :border="false" square clickable>
          <van-grid-item>
            <van-image src="../../../static/images/lawEnforcement/new/retrospect_icon_04.png" />
            <p>查农药</p>
          </van-grid-item>
          <van-grid-item>
            <van-image src="../../../static/images/lawEnforcement/new/retrospect_icon_05.png" />
            <p>查种子</p>
          </van-grid-item>
          <van-grid-item>
            <van-image src="../../../static/images/lawEnforcement/new/retrospect_icon_06.png" />
            <p>查肥料</p>
          </van-grid-item>
          <van-grid-item>
            <van-image src="../../../static/images/lawEnforcement/new/retrospect_icon_07.png" />
            <p>查兽药</p>
          </van-grid-item>
          <van-grid-item>
            <van-image src="../../../static/images/lawEnforcement/new/retrospect_icon_08.png" />
            <p>查饲料</p>
          </van-grid-item>
          <van-grid-item>
            <van-image src="../../../static/images/lawEnforcement/new/retrospect_icon_09.png" />
            <p>查农产品</p>
          </van-grid-item>
        </van-grid>
      </div>

      <div style="height: 20PX"></div>
      <lawNew></lawNew>
    </div>
</template>

<script>
  import lawNew from "@/components/common/lawNew_footer";
  export default {
    name: "caseAllocation",
    components: {
      lawNew
    },
    data() {
      return {

      };
    },
    created() {

    },
    methods: {

    },
  }
</script>

<style scoped lang="scss">
  .jg{
    height: 116px;
  }
.home_wrapper{
    background: #e9e9e9;
    min-height: 100vh;
    width: 100vw;
    padding: 0 3% 0.2rem;
    .header_main{
        height: 116px;
        background: url('../../../../static/images/lawEnforcement/new/list_head.png') no-repeat;
        background-size: 100% 100%;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        font-size: 36px;
        line-height: 116px;
        text-align: center;
        color: #fff;
        z-index: 999;
        .return_btn{
            width: 24px;
            height: 43.2px;
            background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
            background-size: 20px 36px;
            position: absolute;
            left: 38px;
            top: 36px;
        }
        .add_btn{
            width: 56.4px;
            height: 40.8px;
            background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
            background-size: 47px 34px;
            position: absolute;
            right: 38px;
            top: 36px;
        }
    }
}
.main_box{
  width: 100%;
  margin: 0 auto;
  border-radius: 10PX;
  box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
  overflow: hidden;
  background-color: #FFF;
  margin-top: 10PX;
  p,/deep/ .van-grid-item__text{
    font-size: .35rem;
    color: #646566;
  }
}
</style>