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

<template>
  <div id="support">
    <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="12" v-for="(item, index) in list" :key="index" @click="toView(item)">
            <el-col :span="24" class="title">{{ item.title }}</el-col>
            <el-col :span="24" class="other">
              <el-col :span="8" class="other_1 textOver">
                <span>发布时间：</span>
                <span>{{ item.date }}</span>
              </el-col>
              <el-col :span="8" class="other_1 textOver">
                <span>来源：</span>
                <span>{{ item.origin }}</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 { NoticeStore } from '@common/src/stores/studio/other/notice'; //
import type { IQueryResult } from '@/util/types.util';
const notice = NoticeStore();
let fields: Ref<any[]> = ref([
  { label: '标题', model: 'title', isSearch: true },
  { label: '来源', model: 'origin', isSearch: true },
]);
// 查询数据
let searchForm: Ref<{}> = ref({});
let list: Ref<any[]> = ref([]);
// 总数
let total: Ref<number> = ref(0);
let limit: 10;
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 notice.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: 'notices' });
};
</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: 49%;
      border: 3px solid #a2e1f7;
      padding: 10px;
      border-radius: 5px;
      margin: 0 20px 20px 0;
      .title {
        font-size: 20px;
        font-family: cursive;
        margin: 0 0 10px 0;
        font-weight: bold;
      }
      .other {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

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