样式调整

src/views/page-config/ConfigEidt.vue

@@ -0,0 +1,309 @@
+<template>
+  <el-card :bordered="false" class="proCard" style="position: relative">
+    <div style="position: relative"
+      ><div style="display: flex; position: relative">
+        <img src="~@/assets/icons/back.png" alt="" @click="backPage" class="back-btn" />
+        <el-select
+          v-model="companySelet"
+          class="m-2"
+          placeholder="请选择相关公司"
+          style="width: 216px"
+        >
+          <el-option
+            v-for="item in companyList"
+            :key="item.id"
+            :label="item.value"
+            :value="item.value"
+          />
+        </el-select>
+        <div v-if="companySelet" style="display: flex; margin-top: 8px">
+          <div style="font-size: 20px; margin-left: 29px; margin-right: 4px">选择标签</div>
+          <div>
+            <el-radio-group v-model="label" size="10px" :border="true" style="display: flex">
+              <el-radio-button
+                v-for="item in labelList"
+                :key="item.id"
+                :label="item.id!"
+                class="label-select"
+                >{{ item.value }}</el-radio-button
+              >
+            </el-radio-group></div
+          >
+        </div>
+        <el-upload
+          ref="upload"
+          class="upload-demo"
+          :limit="1"
+          :show-file-list="false"
+          :on-exceed="handleExceed"
+          :on-change="onSelectfile"
+          :auto-upload="false"
+          :before-upload="beforeAvatarUpload"
+        >
+          <template #trigger>
+            <el-button :icon="Refresh" plain class="btn-top-refresh">替换照片</el-button>
+          </template>
+        </el-upload>
+        <!-- <el-button type="info" :icon="Refresh" plain class="btn-top-refresh" @click="replacePic"
+          >替换照片</el-button
+        > -->
+        <el-button type="info" plain class="btn-top-save" @click="saveConfig">保存为主页</el-button>
+        <!-- <div>按钮</div> -->
+      </div>
+      <div style="display: flex">
+        <div class="workshop-content">
+          <div class="workshop-title">车间列表</div>
+          <el-input
+            v-model="searchWorkshop"
+            class="w-50 m-2"
+            placeholder="搜索功能"
+            :prefix-icon="Search"
+            style="width: 255px; margin-top: 11px"
+          />
+          <ul
+            ><li
+              v-for="item in workshopList"
+              :key="item.id"
+              class="workshop-list"
+              :class="{ 'active-workshop': activeId === item.id }"
+              @click="configWorkshop(item)"
+              >{{ item.value }}</li
+            ></ul
+          >
+        </div>
+        <div>
+          <div class="upload" :class="{ 'avatar-show': imageUrl }">
+            <el-upload
+              class="avatar-uploader"
+              list-type="picture-card"
+              :auto-upload="false"
+              :on-change="onSelectfile"
+              :before-upload="beforeAvatarUpload"
+            >
+              <div>
+                <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
+                <div class="uploader-text">上传照片</div>
+              </div>
+              <!-- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> -->
+            </el-upload>
+            <div class="upload-tip">只支持.jpg格式</div></div
+          >
+
+          <img v-if="imageUrl" :src="imageUrl" class="preview-image" />
+          <!-- <div>222</div> -->
+        </div></div
+      >
+      <ConfigDrawer
+        ref="configDrawer"
+        :title="configTitle"
+        @on-close="visibleDrawer = false"
+        class="drawer-position"
+      />
+    </div>
+  </el-card>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Refresh, Search, Delete, Plus } from '@element-plus/icons-vue';
+  import ConfigDrawer from './component/ConfigDrawer.vue';
+  //   import { picList } from '../constant';
+  import { labelList, companyList, workshopList } from './constant';
+  import { ElMessage, genFileId } from 'element-plus';
+  import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
+  // import upload, { UploadRawFile, genFileId } from 'element-plus/es/components/upload';
+  import { useRouter } from 'vue-router';
+  const router = useRouter();
+
+  const props = defineProps<{
+    pageShow: boolean;
+    // workshopTemplateList: WorkshopModuleType[];
+  }>();
+
+  //   const emit = defineEmits<{
+  //     // (e: 'update:modelValue'): unknown;
+  //     (e: 'onClose'): unknown;
+  //   }>();
+
+  const label = ref('');
+
+  const companySelet = ref('');
+
+  const searchWorkshop = ref('');
+
+  // const replacePic = () => {};
+  const saveConfig = () => {
+    // router.push('/page-config/config');
+  };
+
+  const imageUrl = ref('');
+  const configDrawer = ref();
+
+  const backPage = () => {
+    router.push('/page-config/layout');
+  };
+
+  const beforeAvatarUpload = (rawFile) => {
+    if (rawFile.type !== 'image/jpeg') {
+      ElMessage.error('Avatar picture must be JPG format!');
+      return false;
+    }
+    // else if (rawFile.size / 1024 / 1024 > 2) {
+    //   ElMessage.error('Avatar picture size can not exceed 2MB!');
+    //   return false;
+    // }
+    return true;
+  };
+
+  const onSelectfile = (uploadFile) => {
+    imageUrl.value = URL.createObjectURL(uploadFile.raw!);
+  };
+
+  const upload = ref<UploadInstance>();
+  const handleExceed: UploadProps['onExceed'] = (files) => {
+    upload.value!.clearFiles();
+    const file = files[0] as UploadRawFile;
+    file.uid = genFileId();
+    upload.value!.handleStart(file);
+  };
+
+  const activeId = ref();
+  const configTitle = ref();
+  const visibleDrawer = ref();
+  //编辑车间
+  const configWorkshop = (item) => {
+    configDrawer.value.openDialog();
+    visibleDrawer.value = true;
+    configTitle.value = item.value;
+    activeId.value = item.id;
+  };
+
+  // const label = ref('');
+</script>
+
+<style lang="scss" scoped>
+  .back-btn {
+    width: 32px;
+    height: 32px;
+    margin-top: 7px;
+    margin-right: 20px;
+  }
+
+  .btn-top-refresh {
+    position: absolute;
+    margin-top: 19px;
+    right: 130px;
+    // left: 1437px;
+  }
+
+  .btn-top-save {
+    position: absolute;
+    margin-top: 8px;
+    right: 46px;
+  }
+
+  .workshop-content {
+    margin-top: 34px;
+    margin-left: 10px;
+    margin-right: 10px;
+    width: 271px;
+    height: 780px;
+    border: 1px solid #b3b3b3;
+  }
+
+  .workshop-title {
+    font-size: 20px;
+    margin-top: 15px;
+    margin-left: 13px;
+    font-weight: 900;
+    color: #3d3d3d;
+    opacity: 0.4;
+  }
+
+  .workshop-list {
+    font-size: 20px;
+    width: 211px;
+    margin-top: 15px;
+    margin-left: 13px;
+    font-weight: 350;
+    color: #3d3d3d;
+    opacity: 0.4;
+    cursor: pointer;
+  }
+  .active-workshop {
+    background: rgba(24, 144, 255, 0.502);
+  }
+
+  .avatar-uploader .el-upload {
+    border: 1px dashed var(--el-border-color);
+    border-radius: 6px;
+    width: 260px;
+    height: 280px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    color: #8c939d;
+    transition: var(--el-transition-duration-fast);
+  }
+
+  .avatar-uploader .el-upload:hover {
+    border-color: var(--el-color-primary);
+  }
+
+  .el-icon.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    text-align: center;
+    margin-top: -60px;
+  }
+
+  .upload {
+    position: absolute;
+    left: 635px;
+    top: 201px;
+  }
+
+  .upload-tip {
+    margin-top: 5px;
+    font-size: 22px;
+    font-weight: 350;
+    color: #3d3d3d;
+    opacity: 0.4;
+    text-align: center;
+  }
+
+  .uploader-text {
+    margin-top: -60px;
+    margin-left: 50px;
+    font-size: 22px;
+    font-weight: 350;
+    color: #3d3d3d;
+    opacity: 0.4;
+  }
+
+  // .preview-container {
+  //   width: 178px;
+  //   height: 178px;
+  //   position: relative;
+  // }
+
+  .preview-image {
+    min-width: 100%;
+    min-height: 100%;
+    object-fit: contain;
+  }
+
+  .avatar-show {
+    display: none;
+  }
+
+  .drawer-position {
+    position: absolute;
+    left: 1150px;
+    top: 80px;
+    z-index: 99;
+    opacity: 1;
+    background: #ffffff;
+  }
+</style>

src/views/page-config/PageConfig.vue

@@ -1,14 +1,14 @@
 <template>
   <el-card :bordered="false" class="proCard" style="position: relative">
-    <PageMain :pageShow="pageShow" @on-close="pageShow = false" />
-    <ConfigEidt :pageShow="pageShow" />
+    <PageMain />
+    <!-- <ConfigEidt :pageShow="pageShow" /> -->
   </el-card>
 </template>
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  // import { ref } from 'vue';
   import PageMain from './component/PageMain.vue';
-  import ConfigEidt from './component/ConfigEidt.vue';
-  const pageShow = ref<boolean>(true);
+  // import ConfigEidt from './component/ConfigEidt.vue';
+  // const pageShow = ref<boolean>(true);
 </script>
 
 <style lang="scss" sctep></style>

src/views/page-config/component/ConfigDrawer.vue

@@ -0,0 +1,180 @@
+<template>
+  <el-dialog v-model="dialogTableVisible" :title="props.title" class="drawer-box">
+    <!-- <div class="header">
+      <div class="header-title">{{ props.title }}</div>
+      <el-icon class="header-icon" size="20px" @click="closeDrawer"><Close /></el-icon>
+    </div> -->
+    <div class="config-content">
+      <div>
+        <el-upload
+          class="pic-uploader"
+          list-type="picture-card"
+          :auto-upload="false"
+          :show-file-list="false"
+          :on-change="onSelectfile"
+          :before-upload="beforeAvatarUpload"
+        >
+          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+          <!-- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> -->
+          <div v-else>
+            <el-icon class="avatar-upload-icon"><Plus /></el-icon>
+            <div class="uploader-config-text">上传照片</div>
+          </div>
+        </el-upload>
+        <div class="upload-config-tip">只支持.jpg格式</div>
+        <div class="upload-notice">上传缩略图</div>
+        <div class="upload-tips">备注：车间内部情况的视频流截图</div>
+      </div>
+    </div>
+  </el-dialog>
+
+  <!-- <div v-show="props.visible" class="drawer-box">
+    <div class="header">
+      <div class="header-title">{{ props.title }}</div>
+      <el-icon class="header-icon" size="20px" @click="closeDrawer"><Close /></el-icon>
+    </div>
+    <div class="config-content">
+      <div>
+        <el-upload
+          class="pic-uploader"
+          list-type="picture-card"
+          :auto-upload="false"
+          :show-file-list="false"
+          :on-change="onSelectfile"
+          :before-upload="beforeAvatarUpload"
+        >
+          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+          <div v-else>
+            <el-icon class="avatar-upload-icon"><Plus /></el-icon>
+            <div class="uploader-config-text">上传照片</div>
+          </div>
+        </el-upload>
+        <div class="upload-config-tip">只支持.jpg格式</div>
+        <div class="upload-notice">上传缩略图</div>
+        <div class="upload-tips">备注：车间内部情况的视频流截图</div>
+      </div>
+    </div>
+  </div> -->
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Close, Plus } from '@element-plus/icons-vue';
+  import { ElMessage } from 'element-plus';
+
+  const props = defineProps<{
+    // visible: boolean;
+    title: string;
+    // workshopTemplateList: WorkshopModuleType[];
+  }>();
+
+  const emit = defineEmits<{
+    // (e: 'update:modelValue'): unknown;
+    (e: 'onClose'): unknown;
+  }>();
+
+  const closeDrawer = () => {
+    emit('onClose');
+  };
+  const dialogTableVisible = ref(false);
+  const imageUrl = ref('');
+
+  const onSelectfile = (uploadFile) => {
+    imageUrl.value = URL.createObjectURL(uploadFile.raw!);
+  };
+  const handleAvatarSuccess = () => {};
+
+  const beforeAvatarUpload = (rawFile) => {
+    if (rawFile.type !== 'image/jpeg') {
+      ElMessage.error('Avatar picture must be JPG format!');
+      return false;
+    }
+    // else if (rawFile.size / 1024 / 1024 > 2) {
+    //   ElMessage.error('Avatar picture size can not exceed 2MB!');
+    //   return false;
+    // }
+    return true;
+  };
+
+  const openDialog = () => {
+    dialogTableVisible.value = !dialogTableVisible.value;
+  };
+
+  defineExpose({ openDialog });
+</script>
+
+<style lang="scss" scoped>
+  .drawer-box {
+    width: 251px;
+    height: 711px;
+  }
+
+  .header {
+    position: relative;
+    // display: flex;
+    // font-size: 20px;
+  }
+  .header-title {
+    font-size: 20px;
+    margin-left: 26px;
+    margin-top: 19px;
+  }
+
+  .header-icon {
+    position: absolute;
+    top: 5px;
+    right: 10px;
+  }
+
+  .pic-uploader .el-upload {
+    border: 1px dashed var(--el-border-color);
+    border-radius: 6px;
+    width: 112px;
+    height: 120px;
+    cursor: pointer;
+    margin-top: 24px;
+    margin-left: 70px;
+    position: relative;
+    overflow: hidden;
+    transition: var(--el-transition-duration-fast);
+    // text-align: center;
+  }
+
+  //   .avatar-uploader .el-upload:hover {
+  //     border-color: var(--el-color-primary);
+  //   }
+
+  .el-icon.avatar-upload-icon {
+    font-size: 18px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    text-align: center;
+    margin-top: -60px;
+  }
+
+  .uploader-config-text {
+    margin-top: -60px;
+    margin-left: 50px;
+    font-size: 18px;
+    font-weight: 350;
+    color: #3d3d3d;
+    opacity: 0.4;
+  }
+  .upload-config-tip {
+    text-align: center;
+    font-size: 18px;
+    font-weight: 350;
+    color: #3d3d3d;
+    opacity: 0.4;
+  }
+
+  .upload-notice {
+    font-size: 20px;
+    text-align: center;
+    margin-top: 10px;
+  }
+  .upload-tips {
+    font-size: 16px;
+    text-align: center;
+  }
+</style>

src/views/page-config/component/ConfigEidt.vue

@@ -34,13 +34,14 @@
         ref="upload"
         class="upload-demo"
         :limit="1"
+        :show-file-list="false"
         :on-exceed="handleExceed"
+        :on-change="onSelectfile"
         :auto-upload="false"
+        :before-upload="beforeAvatarUpload"
       >
         <template #trigger>
-          <el-button :icon="Refresh" plain class="btn-top-refresh" @click="replacePic"
-            >替换照片</el-button
-          >
+          <el-button :icon="Refresh" plain class="btn-top-refresh">替换照片</el-button>
         </template>
       </el-upload>
       <!-- <el-button type="info" :icon="Refresh" plain class="btn-top-refresh" @click="replacePic"
@@ -60,11 +61,18 @@
           style="width: 255px; margin-top: 11px"
         />
         <ul
-          ><li v-for="item in workshopList" class="workshop-list">{{ item.value }}</li></ul
+          ><li
+            v-for="item in workshopList"
+            :key="item.id"
+            class="workshop-list"
+            :class="{ 'active-workshop': activeId === item.id }"
+            @click="configWorkshop(item)"
+            >{{ item.value }}</li
+          ></ul
         >
       </div>
       <div>
-        <div class="upload" :class="{ 'avatar-show': imageUrl ? true : false }">
+        <div class="upload" :class="{ 'avatar-show': imageUrl }">
           <el-upload
             class="avatar-uploader"
             list-type="picture-card"
@@ -88,11 +96,13 @@
         <!-- <div>222</div> -->
       </div></div
     >
+    <ConfigDrawer :visible="visibleDrawer" :title="configTitle" class="drawer-position" />
   </div>
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue';
   import { Refresh, Search, Delete, Plus } from '@element-plus/icons-vue';
+  import ConfigDrawer from './ConfigDrawer.vue';
   import { picList } from '../constant';
   import { labelList, companyList, workshopList } from '../constant';
   import { ElMessage, genFileId } from 'element-plus';
@@ -115,7 +125,7 @@
 
   const searchWorkshop = ref('');
 
-  const replacePic = () => {};
+  // const replacePic = () => {};
   const saveConfig = () => {};
 
   const imageUrl = ref('');
@@ -147,13 +157,23 @@
     upload.value!.handleStart(file);
   };
 
+  const activeId = ref();
+  const configTitle = ref();
+  const visibleDrawer = ref();
+  //编辑车间
+  const configWorkshop = (item) => {
+    visibleDrawer.value = true;
+    configTitle.value = item.value;
+    activeId.value = item.id;
+  };
+
   // const label = ref('');
 </script>
 
-<style lang="scss" sctep>
+<style lang="scss" scoped>
   .btn-top-refresh {
     position: absolute;
-    margin-top: 8px;
+    margin-top: 19px;
     right: 130px;
     // left: 1437px;
   }
@@ -167,6 +187,7 @@
   .workshop-content {
     margin-top: 34px;
     margin-left: 10px;
+    margin-right: 10px;
     width: 271px;
     height: 660px;
     border: 1px solid #b3b3b3;
@@ -183,11 +204,16 @@
 
   .workshop-list {
     font-size: 20px;
+    width: 211px;
     margin-top: 15px;
     margin-left: 13px;
     font-weight: 350;
     color: #3d3d3d;
     opacity: 0.4;
+    cursor: pointer;
+  }
+  .active-workshop {
+    background: rgba(24, 144, 255, 0.502);
   }
 
   .avatar-uploader .el-upload {
@@ -246,12 +272,18 @@
   // }
 
   .preview-image {
-    width: 100%;
-    height: 100%;
+    min-width: 100%;
+    min-height: 100%;
     object-fit: contain;
   }
 
   .avatar-show {
     display: none;
   }
+
+  .drawer-position {
+    position: absolute;
+    left: 1603px;
+    top: 178px;
+  }
 </style>

src/views/page-config/component/PageMain.vue

@@ -1,74 +1,60 @@
 <template>
-  <div v-if="props.pageShow"
+  <div
     ><div style="display: flex">
       <el-input
         v-model="searchCom"
-        class="w-50 m-2"
+        class="search-btn w-50 m-2"
         placeholder="搜索公司主页"
-        :prefix-icon="Search"
-        style="width: 274px"
+        :suffix-icon="Search"
       />
-      <!-- <div style="display: flex">
-          <div>选择标签</div>
-          <div>
-            <el-radio-group
-              v-model="label"
-              size="10px"
-              :border="true"
-              style="display: flex; justify-content: space-between"
-            >
-              <el-radio-button
-                v-for="item in labelList"
-                :key="item.id"
-                :label="item.id!"
-                class="label-select"
-                >{{ item.value }}</el-radio-button
-              >
-            </el-radio-group></div
-          >
-        </div> -->
     </div>
     <div class="add-page-box">
-      <div class="add-box" @click="handleAddPage"
-        ><div
-          ><el-icon class="add-icon" size="44px"><Plus /></el-icon></div
-        ><div class="add-content">新建主页</div></div
+      <div class="add-config">
+        <div class="add-box" @click="handleAddPage"
+          ><div
+            ><el-icon class="add-icon" size="24px"><Plus /></el-icon></div
+          ><div class="add-content">新建主页</div></div
+        ></div
       >
+
       <div
         v-for="item in picList"
+        :key="item.id"
         class="content-show"
         @mouseover="showDeleteIcon(item)"
         @mouseleave="hideDeleteIcon(item)"
-        ><img src="" alt="图片" class="content-pic" />
-        <div style="position: relative"
-          ><div class="pic-name">{{ item.name }}</div>
-          <el-icon v-show="item.id === IconId" @click="deleteItem(item)" class="del-icon"
+      >
+        <div class="pic-box"><img src="" alt="图片" class="content-pic" /></div>
+
+        <div class="pic-word">
+          <img src="~@/assets/icons/file.png" alt="" />
+          <div class="pic-name">{{ item.name }}</div>
+          <img
+            v-show="item.id === IconId"
+            src="~@/assets/icons/del.png"
+            alt=""
+            @click="deleteItem(item)"
+            class="del-icon"
+          />
+          <!-- <el-icon v-show="item.id === IconId" @click="deleteItem(item)" class="del-icon"
             ><Delete
-          /></el-icon>
-        </div> </div></div
-  ></div>
+          /></el-icon> -->
+        </div>
+      </div>
+    </div></div
+  >
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue';
   import { Search, Plus, Delete } from '@element-plus/icons-vue';
   import { picList } from '../constant';
-  // import { labelList } from './';
-
-  const props = defineProps<{
-    pageShow: boolean;
-    // workshopTemplateList: WorkshopModuleType[];
-  }>();
-
-  const emit = defineEmits<{
-    // (e: 'update:modelValue'): unknown;
-    (e: 'onClose'): unknown;
-  }>();
+  import { useRouter } from 'vue-router';
+  const router = useRouter();
 
   const searchCom = ref('');
   // const pageAdd = ref<boolean>(true);
   const handleAddPage = () => {
-    // pageAdd.value = false;
-    emit('onClose');
+    router.push('/page-config/config');
   };
 
   const IconId = ref('');
@@ -89,27 +75,47 @@
 </script>
 
 <style lang="scss" sctep>
+  .search-btn {
+    width: 340px;
+    height: 32px;
+    background: #f0f2f5;
+    border-radius: 6px;
+  }
+
   .add-page-box {
-    padding-top: 62px;
-    padding-left: 32px;
+    padding-top: 2px;
+    padding-left: 8px;
     display: flex;
-    height: 700px;
+    height: 770px;
+    flex-wrap: wrap;
+    margin-bottom: 24px;
+    align-content: flex-start;
+  }
+
+  .add-config {
+    width: 216px;
+    height: 191px;
+    margin-right: 26px;
   }
 
   .add-box {
-    width: 217px;
-    height: 255px;
-    opacity: 1;
-    background: #f2f2f2;
+    width: 104px;
+    height: 104px;
+    background: rgba(255, 255, 255, 0.04);
+    border-radius: 5px;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    // text-align: center;
+    margin-left: 56px;
+    margin-top: 43px;
   }
 
   .add-icon {
-    margin-left: 91px;
-    margin-top: 80px;
+    margin-left: 40px;
+    margin-top: 24px;
   }
 
   .add-content {
-    font-size: 20px;
+    font-size: 14px;
     margin-top: 10px;
     text-align: center;
   }
@@ -126,24 +132,43 @@
 
   .content-show {
     // display: flex;
-    width: 331px;
-    height: 261px;
-    margin-left: 16px;
+    width: 216px;
+    height: 191px;
+    margin-left: 26px;
+    border: 1px solid #e8ecf2;
+    margin-bottom: 24px;
+  }
+
+  .pic-box {
+    height: 146px;
+    width: 216px;
+    background: #e8ecf2;
+    padding-left: 17px;
+    padding-top: 17px;
   }
 
   .content-pic {
-    width: 326px;
-    height: 224px;
+    // margin-left: 17px;
+    // margin-top: 17px;
+    width: 182px;
+    height: 114px;
   }
 
+  .pic-word {
+    position: relative;
+    display: flex;
+    padding-left: 16px;
+    padding-top: 13px;
+  }
   .pic-name {
-    font-size: 20px;
-    text-align: center;
+    margin-left: 8px;
+    margin-top: 2px;
+    font-size: 12px;
   }
 
   .del-icon {
     position: absolute;
-    right: 23px;
-    bottom: 5px;
+    right: 17px;
+    bottom: 3px;
   }
 </style>

src/views/page-config/constant.ts

@@ -7,6 +7,14 @@ export const labelList = [
 export const picList = [
   { id: '1', url: '11', name: '222' },
   { id: '2', url: '11', name: '333' },
+  { id: '3', url: '11', name: '222' },
+  { id: '4', url: '11', name: '333' },
+  { id: '5', url: '11', name: '222' },
+  { id: '6', url: '11', name: '333' },
+  { id: '7', url: '11', name: '222' },
+  { id: '8', url: '11', name: '333' },
+  { id: '9', url: '11', name: '222' },
+  { id: '10', url: '11', name: '333' },
 ];
 
 export const companyList = [