xjc-vue/src/views/xjc-integratedmachine/environment/occdb_list.vue

<template>
  <div class="prodb_specialtylist1">
    <head-component :headinfo=headinfo ref="headinfoRef"></head-component>
    <div class="page-content">
      <div class="content">
        <div class="result-box">
          <div class="two-page-result">
            <div v-for="(item,index) in data_list.rows"
                 :class="[item.selected?'item-result-box-active':'item-result-box']"
                 @click="toDetail(item)">
              <div>{{item.name}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <drag_component></drag_component>
  </div>

  <!--  <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"-->
  <!--              v-model:limit="queryParams.pageSize" @pagination="list1"/>-->
</template>

<script setup>
import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
import {occupationList} from '@/api/xjc-integratedmachine/environment/occupation.js'
import {ref} from "vue";

const router = useRouter()
const route = useRoute()
const total = ref(0)
const param = route.query
const data_rows = ref([])
const headinfo = ref({})
const headinfoRef = ref(null);

function setHeadinfo() {
  headinfo.value = {
    title: '职业分类列表',
    user: {
      avatar: '头像路径',
      nickName: '张三'
    },
    backUrl: '/xjc-integratedmachine/environment/index',
    homeUrl: '/xjc-integratedmachine/environment/index',
    contrast:true,
    contrastType:3
  }
}
onMounted(() => {
  setHeadinfo()
  setTimeout(() => {
    if (headinfoRef.value) {
      headinfoRef.value.getCompareSizeData(3); // 调用子组件的 sayHello 函数
    }
  }, 800)
})


const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  industryparent : param.industryparent
})

const data_list = ref({})

function list() {
  occupationList(queryParams.value).then(resp =>{
    data_list.value = resp.data_list
    total.value = resp.data_list.total
  })
}
function toDetail(item){
  router.push({
    path : '/xjc-integratedmachine/environment/occ_details_video',
    query :{
      id :  item.id
    }
  })
}

list()
list()
</script>

<style scoped lang="scss">
div,p{
  margin: 0;
  padding: 0;
}
.prodb_specialtylist1 {
  background: url('@/assets/images/login/login-home-background.png') no-repeat;
  background-size: 1920px 1080px;
  z-index: 10;
  width: 100%;
  height: 1080px;
  .page-content {
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 0;
    display: flex;
    justify-content: center;
    .content{
      width: 1832px;
      height: 922px;
      background: #FFFFFF;
      border-radius: 35px 35px 35px 35px;
      margin-top:13px;
    }
    .result-box {
      width: 100%;
      height: 750px;
      overflow: auto;

      .two-page-result {
        display: flex;
        flex-wrap: wrap;
        //justify-content: space-between;
        align-items: center;

        .item-result-box-active {
          min-width: 320px;
          height: 92px;
          background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
          box-shadow: inset 0px -2px 7px 0px #1E410E;
          border-radius: 5px 5px 5px 5px;
          border: 1px solid #A2F57F;
          font-weight: 400;
          font-size: 30px;
          color: #0DE6A1;
          line-height: 90px;
          text-align: center;
          margin-left: 50px;
          margin-right: 50px;
          margin-top: 32px;
          padding-left: 20px;
          padding-right: 20px;
        }

        .item-result-box {
          min-width: 320px;
          height: 92px;
          background: #E0EEF4;
          border-radius: 5px 5px 5px 5px;
          font-weight: 400;
          font-size: 30px;
          color: #000000;
          line-height: 90px;
          text-align: center;
          margin-left: 50px;
          margin-right: 50px;
          margin-top: 32px;
          padding-left: 20px;
          padding-right: 20px;
        }

        .item-result-box:hover {
          min-width: 320px;
          height: 92px;
          background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
          box-shadow: inset 0px -2px 7px 0px #1E410E;
          border-radius: 5px 5px 5px 5px;
          border: 1px solid #A2F57F;
          font-weight: 400;
          font-size: 30px;
          color: #000000;
          line-height: 90px;
          text-align: center;
          margin-left: 50px;
          margin-top: 32px;
          padding-left: 20px;
          padding-right: 20px;
        }
      }
    }
  }

}
</style>