jcyjdt_studio/src/components/common/web/list/studio.vue

<template>
  <div id="studio">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <component :is="partsSearch" :is_title="false" :is_search="true" :fields="fields" @search="partSearch"> </component>
        </el-col>
        <el-col :span="24" class="two">
          <el-col class="list" :span="6" v-for="(item, index) in list" :key="index" @click="toView(item)">
            <el-col :span="24" class="name">{{ item.name }}</el-col>
            <el-col :span="24" class="other">
              <el-col :span="24" class="other_1">
                <span>依托单位：</span>
                <span>{{ item.company_name }}</span>
              </el-col>
              <el-col :span="24" class="other_1">
                <span>入驻科学家：</span>
                <span>{{ item.scientist_name }}</span>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="thr">
          <component :is="CPage" :total="total" :limit="limit" @query="search"></component>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import CPage from '@/components/common/web/c-page.vue';
import partsSearch from '@/components/c-search.vue';
import type { Ref } from 'vue';
import { ref, onMounted } from 'vue';
import { StudioStore } from '@common/src/stores/studio/studios/studio'; //
import type { IQueryResult } from '@/util/types.util';
const studio = StudioStore();
let fields: Ref<any[]> = ref([
  { label: '工作室名称', model: 'name', isSearch: true },
  { label: '依托单位', model: 'company_name', isSearch: true },
  { label: '入驻科学家', model: 'scientist_name', isSearch: true },
]);
// 查询数据
let searchForm: Ref<{}> = ref({});
let list: Ref<any[]> = ref([]);
// 总数
let total: Ref<number> = ref(0);
let limit: 8;
let skip = 0;
onMounted(async () => {
  await search({ skip, limit });
});
// 查询
const search = async (e: { skip: number; limit: number }) => {
  const { skip, limit } = e;
  let info = { limit: limit, skip: skip, ...searchForm.value, status: '1' };
  if (info.limit == undefined) info.limit = 8;
  const res: IQueryResult = await studio.query(info);
  list.value = res.data as any[];
  total.value = res.total;
};
// 查询
const partSearch = (form: { [x: string]: any }) => {
  searchForm.value = form;
  search({ skip, limit });
};
const emit = defineEmits(['toView']);

const toView = (e: object) => {
  emit('toView', { data: e, component: 'studios' });
};
</script>

<style lang="scss" scoped>
.main {
  .one {
    box-shadow: 0 0 2px #858585;
    padding: 10px;
    margin: 0 0 10px 0;
  }
  .two {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    box-shadow: 0 0 5px #858585;
    padding: 10px;
    border-radius: 5px;
    margin: 0 0 10px 0;
    .list {
      max-width: 22%;
      min-height: 270px;
      overflow: hidden;
      border: 3px solid #a2e1f7;
      padding: 10px;
      border-radius: 5px;
      margin: 0 40px 10px 0;
      .name {
        text-align: center;
        font-size: 25px;
        font-family: cursive;
        margin: 0 0 5px 0;
        padding: 10px 0;
        font-weight: bold;
      }
      .other {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .other_1 {
          margin: 0 0 5px 0;
          span {
            font-size: 14px;
            color: #858585;
          }
          span:nth-child(2) {
            color: #000000;
          }
        }
      }
    }
    .list:hover {
      cursor: pointer;
      border: 3px solid #65cd94;
      .name {
        color: #ffffff;
      }
    }
    .list:nth-child(4n) {
      margin: 0 0 10px 0;
    }
  }
}
</style>