technique_web3/src/views/main/seven.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <el-col :span="24" class="one">
          <el-image class="image" :src="news" fit="fill" />
        </el-col>
        <el-col :span="24" class="two">
          <div class="w_1200">
            <el-col :span="24" class="two_1">
              <el-row class="two_1_1">
                <el-col :span="2" class="left">服务分类：</el-col>
                <el-col :span="22" class="right">
                  <a-checkbox-group v-model:value="value" style="width: 100%">
                    <a-row>
                      <a-col :span="8" v-for="(item, index) in typeList" :key="index">
                        <a-checkbox class="custom-checkbox" :value="item.value">{{
                          item.label
                        }}</a-checkbox>
                      </a-col>
                    </a-row>
                  </a-checkbox-group>
                </el-col>
              </el-row>
              <el-row class="two_1_1">
                <el-col :span="2" class="left">机构名称：</el-col>
                <el-col :span="22" class="right">
                  <el-input
                    size="large"
                    class="input"
                    v-model:value="value"
                    placeholder="请输入机构名称"
                  />
                  <el-button size="large" class="button" type="primary">检索</el-button>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="24" class="two_2">
              <a-table :columns="columns" :data-source="data" bordered>
                <template #bodyCell="{ column, text, record }">
                  <template v-if="column.dataIndex === 'operation'">
                    <a @click="toView(record.key)">查看</a>
                  </template>
                </template>
              </a-table>
            </el-col>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
// 图片引入
import news from '/images/news.png'
// 路由
const router = useRouter()
// 加载中
const loading = ref(false)
const typeList = ref([
  { label: '科技信息', value: '0' },
  { label: '中介咨询', value: '1' },
  { label: '科技金融', value: '2' },
  { label: '仪器设备', value: '3' },
  { label: '创新创业', value: '4' },
  { label: '法律服务', value: '5' },
  { label: '技术转移与推广', value: '6' },
  { label: '知识产权', value: '7' },
  { label: '人才培训', value: '8' },
  { label: '产品研发', value: '9' },
  { label: '财税服务', value: '10' },
  { label: '信息化服务', value: '11' }
])
const columns = [
  {
    title: '序号',
    dataIndex: 'key'
  },
  {
    title: '公司名称',
    dataIndex: 'name'
  },
  {
    title: '服务领域',
    dataIndex: 'field'
  },
  {
    title: '登记时间',
    dataIndex: 'time'
  },
  {
    title: '操作',
    dataIndex: 'operation'
  }
]

const data = [
  {
    key: '1',
    name: '长春市XXX有限公司',
    field: '科技金融',
    time: '2020-07-01'
  },
  {
    key: '2',
    name: '长春市XXX有限公司',
    field: '科技金融',
    time: '2021-02-09'
  },
  {
    key: '3',
    name: '长春市XXX有限公司',
    field: '科技金融',
    time: '2023-11-11'
  },
  {
    key: '4',
    name: '长春市XXX有限公司',
    field: '科技金融',
    time: '2021-04-21'
  },
  {
    key: '5',
    name: '长春市XXX有限公司',
    field: '科技金融',
    time: '2022-09-11'
  },
  {
    key: '6',
    name: '长春市XXX有限公司',
    field: '科技金融',
    time: '2023-07-51'
  }
]
// 请求
onMounted(async () => {
  loading.value = true
  await search()
  loading.value = false
})
const search = async () => {}
// 查看
const toView = (item) => {
  router.push({ path: '/server/detail', query: { id: item.id || item._id } })
}
</script>
<style scoped lang="scss">
.main {
  .one {
    .image {
      width: 100%;
      height: 200px;
    }
  }

  .two {
    .two_1 {
      background: #ffffff;
      border-radius: 10px;
      padding: 15px;
      margin: 10px 0 0 0;

      .two_1_1 {
        display: flex;
        align-items: center;
        padding: 10px 0;
        .left {
          font-size: $global-font-size-18;
        }
        .right {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .button {
            margin: 0 0 0 5px;
          }
        }
      }
    }
  }
}
</style>