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

<template>
  <div class="prodb_specialtylist1" v-loading="loading">
    <head-component :headinfo=headinfo></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_rows"
                 :class="[item.selected?'item-result-box-active':'item-result-box']"
                 @click="toSpecialty2(item)">
              <div v-html="item.name"></div>
            </div>
          </div>
        </div>
        <div class="pagination">
<!--          <pagination v-show="total > 0" size="large" :total="total" v-model:page="queryParams.pageNum"-->
<!--                      v-model:limit="queryParams.pageSize" @pagination="list1"/>-->
<!--          <el-pagination-->
<!--              size="small"-->
<!--              background-->
<!--              layout="prev, pager, next"-->
<!--              :total="total"-->
<!--              v-model:page="queryParams.pageNum"-->
<!--              v-model:limit="queryParams.pageSize"-->
<!--              @pagination="list1"-->
<!--              class="mt-4"-->
<!--          />-->
        </div>
      </div>
    </div>
    <drag_component></drag_component>
  </div>


</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 {specialtyList1} from '@/api/xjc-integratedmachine/environment/specialty.js'

const router = useRouter()
const route = useRoute()
const total = ref(0)
const param = route.query
const data_rows = ref([])
const headinfo = ref({})
const loading= ref(false)
function setHeadinfo() {
  headinfo.value = {
    title: '专业类',
    user: {
      avatar: '头像路径',
      nickName: '张三'
    },
    backUrl: '/xjc-integratedmachine/environment/index',
    homeUrl: '/xjc-integratedmachine/environment/index',
    contrast:true,
  }
}
onMounted(() => {
  setHeadinfo()
})
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  oldid: param.oldid
})

function list1() {
  loading.value = true;
  specialtyList1(queryParams.value).then(resp => {
    data_rows.value = resp.data.rows
    total.value = resp.data.total
    loading.value = false;
  })
}

function toSpecialty2(item) {
  router.push({
    path: '/xjc-integratedmachine/environment/prodb_specialtylist2',
    query: {
      oldid: item.oldid
    }
  })
}

list1()

</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;
      .pagination{
          //border: 1px solid;
          display: flex;
          justify-content: center;
          margin-top: 30px;
          font-size: 32px;
      }
    }
    .result-box {
      width: 100%;
      height: 830px;
      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>