nsgk_mobile/src/views/lawEnforcement/index_new.vue

<template>
  <div class="app-container">
    <div class="header">
      <img src="../../../static/images/lawEnforcement/new/index_icon_01.png" width="30" height="30"/>
      <p style="">埇桥区农业综合行政执法大队</p>
    </div>

    <div class="search">
      <img src="../../../static/images/lawEnforcement/new/index_icon_03.png">
      <input type="text" placeholder="请输入搜索内容" />
      <img src="../../../static/images/lawEnforcement/new/index_icon_04.png">
    </div>

    <van-notice-bar left-icon="../../../static/images/lawEnforcement/new/index_icon_02.png" :scrollable="false" background="rgba(135,174,241,0.3)" color="#2574E9">
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :show-indicators="false"
      >
        <van-swipe-item>冬季种子市场摸底调查活动，截止日期10.5日！1</van-swipe-item>
        <van-swipe-item>冬季种子市场摸底调查活动，截止日期10.5日！2</van-swipe-item>
        <van-swipe-item>冬季种子市场摸底调查活动，截止日期10.5日！3</van-swipe-item>
      </van-swipe>
    </van-notice-bar>

    <div class="main1">
      <p class="tit">日常执法</p>
      <p class="content">农业农村管理方面法律及法规规定的行政处罚</p>
      <van-grid :column-num="3" :border="false">
        <van-grid-item :to="{name:'lawEnforcementCaseAllocation'}">
          <img src="../../../static/images/lawEnforcement/new/index_icon_05.png"/>
          <p>案件分配</p>
        </van-grid-item>
        <van-grid-item :to="{name:'lawEnforcementTask'}">
          <img src="../../../static/images/lawEnforcement/new/index_icon_06.png"/>
          <p>任务查看</p>
        </van-grid-item>
        <van-grid-item>
          <img src="../../../static/images/lawEnforcement/new/index_icon_07.png"/>
          <p>巡查登记</p>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="main2">
      <p class="tit">文书制作</p>
      <div class="content">
        <div class="images">
          <img src="../../../static/images/lawEnforcement/new/index_icon_08.png" @click="$router.push({name:'lawEnforcementRecord',query:{type:'1'}})">
          <img src="../../../static/images/lawEnforcement/new/index_icon_09.png" @click="$router.push({name:'lawEnforcementRecord',query:{type:'2'}})">
          <img src="../../../static/images/lawEnforcement/new/index_icon_10.png" @click="$router.push({name:'lawEnforcementRecord',query:{type:'3'}})">
          <img src="../../../static/images/lawEnforcement/new/index_icon_11.png" @click="$router.push({name:'lawEnforcementRecord',query:{type:'4'}})">
        </div>
        <img src="../../../static/images/lawEnforcement/new/index_icon_12.png" @click="$router.push({name:'lawEnforcementRecordDocument'})">
      </div>
    </div>

    <div class="main3">
      <p class="tit">案件分析</p>
      <van-grid :column-num="3" :border="false">
        <van-grid-item :to="{name:'lawEnforcementCaseQuery'}">
          <img src="../../../static/images/lawEnforcement/new/index_icon_13.png"/>
          <p>案件查询</p>
        </van-grid-item>
        <van-grid-item :to="{name:'lawEnforcementCaseStatistics'}">
          <img src="../../../static/images/lawEnforcement/new/index_icon_14.png"/>
          <p>案件统计</p>
        </van-grid-item>
        <van-grid-item :to="{name:'lawEnforcementCaseDistributionMap'}">
          <img src="../../../static/images/lawEnforcement/new/index_icon_15.png"/>
          <p>案件分布</p>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="main4">
      <p class="tit">监管对象</p>
      <div class="images">
        <img src="../../../static/images/lawEnforcement/new/index_icon_16.png" @click="$router.push({name:'lawEnforcementIndividual'})">
        <img src="../../../static/images/lawEnforcement/new/index_icon_17.png" @click="$router.push({name:'lawEnforcementEnterprise'})">
      </div>
    </div>

    <div class="main5">
      <p class="tit">执法依据</p>
      <div class="images">
        <img src="../../../static/images/lawEnforcement/new/index_icon_20.png" @click="$router.push({name:'lawEnforcementBasis'})">
      </div>
    </div>

    <div style="height: 20PX"></div>
    <lawNew></lawNew>
  </div>
</template>
<script>
import request from "@/utils/request";
import { getTopDeptId , news , scheme , communicate } from "@/api/lawEnforcement/index";
import lawNew from "@/components/common/lawNew_footer";
export default {
  name: "index",
  components: {
    lawNew
  },
  data() {
    return {
      //是否显示加载
      loading: false,
      //是否滚动到底部
      finished: false,
      //查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        deptId:100,
        number:2
      },
    };
  },
  created() {

  },
  watch: {

  },
  methods: {

  },
};
</script>

<style scoped lang="scss">
.app-container {
  padding: 0 ;
}
::-webkit-input-placeholder { color:#C9C9C9;}
:-moz-placeholder {color:#C9C9C9;}
::-moz-placeholder { color:#C9C9C9;}
:-ms-input-placeholder { color:#C9C9C9;}
.header{
  display: flex;
  background: #ffffff;
  padding: 4% 5%;
  box-shadow: 0 3Px 6Px rgba(22,70,141,0.15);
  p{
    line-height: 30Px;
    margin-left: 6Px;
    font-size: 16Px;
    color: #666666;
    font-family: SourceHanSansCNBold;
  }
}
.search{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 88%;
  margin: 15PX auto;
  border: 1px solid #1D6FE9;
  padding: 1PX 1PX 1PX 12PX ;
  border-radius: 50PX;
  input{
    flex: 1;
    background: transparent;
    border-left: 1px solid #C9C9C9;
    padding-left: 12PX;
    margin-left: 12PX;
  }
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
/deep/ .van-icon__image{
  width: 22PX;
  height: 22PX;
}
/deep/ .van-notice-bar{
  width: 94%;
  margin: 0 auto;
  border-radius: 5PX;
}
.tit{
  font-weight: bold;
  font-size: 16PX;
  padding: 0 2%;
  background: url("../../../static/images/lawEnforcement/new/index_icon_18.png") no-repeat left center;
  line-height: 1;
}
.main1{
  width: 92%;
  padding: 0 3%;
  margin: 25PX auto 0;
  .content{
    color: #878787;
    padding-left: 2%;
    margin-top: 10PX;
  }
  /deep/ .van-grid-item__content{
    background: transparent;
    p{
      color: #333333;
      font-size: 14PX;
    }
  }
}
.main2{
  width: 92%;
  padding: 15PX 3% 3%;
  margin: 0 auto 25PX;
  box-shadow: 0px 3PX 6PX rgba(0,0,0,0.16);
  background: #ffffff;
  border-radius: 5PX;
  .content{
    display: flex;
    justify-content: space-between;
    margin-top: 15PX;
  }
  .images{
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
    flex: 1;
    margin-right: 10PX;
  }
}
.main3{
  width: 92%;
  padding: 0 3%;
  margin: 25PX auto 0;
  /deep/ .van-grid{
    justify-content: space-between;
    margin-top: 15PX;
  }
  /deep/ .van-grid-item{
    flex-basis: 31%!important;
    box-shadow: 0px 3PX 6PX rgba(0,0,0,0.16);
    border-radius: 5PX;
    overflow: hidden;
    &:nth-child(2){
      margin: 0 10PX;
    }
  }
  /deep/ .van-grid-item__content{
    p{
      color: #333333;
      font-size: 14PX;
      margin-top: 10PX;
    }
  }
}
.main4{
  width: 92%;
  margin: 25PX auto 0;
  .tit{
    margin-left: 3%;
  }
  .images{
    display: flex;
    justify-content: space-between;
    margin-top: 10PX;
    img{
      display: block;
      width: 50%;
    }
  }
}
.main5{
  width: 92%;
  margin: 10PX auto 0;
  .tit{
    margin-left: 3%;
  }
  .images{
    display: flex;
    justify-content: space-between;
    margin-top: 15PX;
    img{
      display: block;
      width: 100%;
    }
  }
}
</style>