sl-sfy-safety/src/views/page-config/PageConfig.vue

<template>
  <div class="flex flex-col page-config-content">
    <el-card shadow="never">
      <div style="display: flex; justify-content: space-between">
        <el-input v-model="searchCom" class="search-btn w-50" placeholder="搜索公司主页">
          <template #suffix>
            <el-icon @click="searchPageConfig" @keyup.enter="searchPageConfig"><Search /></el-icon>
          </template>
        </el-input>
        <el-button
          style="width: 102px; background-color: rgb(24, 144, 255); border: none"
          type="primary"
          @click="broadcast"
        >
          主页发布
        </el-button>
      </div>
    </el-card>
    <el-card shadow="never" class="flex-1" style="margin-top: 8px; overflow: auto">
      <PageMain ref="pageMain" />
    </el-card>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import { Search } from '@element-plus/icons-vue';
  import PageMain from './component/PageMain.vue';

  const searchCom = ref('');
  const pageMain = ref();

  const searchPageConfig = () => {
    pageMain.value.getList(searchCom.value);
  };

  const broadcast = () => {
    ElMessage({
      message: '发布已勾选的主页',
      type: 'success',
    });
  };
</script>

<style lang="scss" sctep>
  .page-config-content {
    width: 100%;
    height: calc(100vh - 64px - 12px);
  }
</style>