LNYD_Web/src/views/enterprise/index.vue

<script setup lang="ts">
import { ref } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddFill from "@iconify-icons/ri/add-circle-line";
import { useWindowSize } from "@vueuse/core";

defineOptions({
  name: "EnterpriseList"
});
const count = ref(3);
const { height } = useWindowSize();
const input = ref("");
const loading = ref(true);
setTimeout(() => {
  loading.value = !loading.value;
}, 800);

const add = () => {
  count.value++;
};
</script>

<template>
  <div class="main">
    <div class="w-full flex justify-between mb-4">
      <el-button :icon="useRenderIcon(AddFill)" @click="add">
        新建企业
      </el-button>
    </div>
    <div class="w-[37%] h-full float-left">
      <el-card
        class="box-card"
        :style="{ height: `calc(${height}px - 10vh - 50px)` }"
      >
        <template #header>
          <div class="card-header flex justify-between">
            <span class="w-[20%]">企业列表</span>
            <el-input
              v-model="input"
              placeholder="Please input"
              class="w-[70%]"
              clearable
            />
          </div>
        </template>
        <el-scrollbar max-height="1000px">
          <p v-for="item in count" :key="item" class="scrollbar-demo-item">
            {{ "电子有限公司" }}
          </p>
        </el-scrollbar>
      </el-card>
    </div>
    <div class="float-right w-[62%]">
      <el-card
        class="box-card"
        :style="{ height: `calc(${height}px - 10vh - 50px)` }"
      >
        <template #header>
          <div class="card-header flex justify-between">
            <span>企业详情</span>
            <el-button :icon="useRenderIcon(AddFill)" @click="add">
              编辑
            </el-button>
          </div>
        </template>
        <div class="flex flex-col">
          <el-skeleton animated :loading="loading">
            <span>企业全称：{{ "电子有限公司" }}</span>
            <span>ID：{{ "电子有限公司" }}</span>
          </el-skeleton>
          <el-skeleton :rows="5" animated :loading="loading">
            <span>企业全称：{{ "电子有限公司" }}</span>
            <span>ID：{{ "电子有限公司" }}</span>
          </el-skeleton>
        </div>
      </el-card>
    </div>
  </div>
</template>