更新代码

.eslintrc.cjs

@@ -38,6 +38,7 @@ module.exports = {
     '@typescript-eslint/no-unused-vars': 'off',
     'no-undef': 'off',
     'no-console': 'off',
-    'vue/no-mutating-props': 'off'
+    'vue/no-mutating-props': 'off',
+    'vue/attribute-hyphenation': 'off'
   }
 }

package.json

@@ -13,6 +13,8 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
     "@types/node": "^20.4.4",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "^1.4.0",
     "element-plus": "^2.3.8",
     "mockjs": "^1.1.0",

src/Layout/headers.vue

@@ -4,7 +4,7 @@
       <div class="content">
         <div style="display: flex; align-items: center; margin-right: 32px; cursor: pointer">
           <img src="@/assets/img/icon-shou.png" />
-          网页首页
+          网站首页
         </div>
         <div style="display: flex; align-items: center; cursor: pointer">
           <img src="@/assets/img/icon-yi.png" />

src/components/RichTextEditor.vue

+<template>
+  <div style="border: 1px solid #ccc; width: 600px">
+    <Toolbar
+      :editor="editorRef"
+      :default-config="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :default-config="editorConfig"
+      :mode="mode"
+      style="height: 400px; overflow-y: hidden"
+      @on-created="handleCreated"
+      @mouseout="mouseout"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import '@wangeditor/editor/dist/css/style.css'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+
+const emits = defineEmits(['change'])
+
+const valueHtml = ref('')
+const mode = 'default'
+const editorRef = shallowRef()
+const flag = ref(true)
+const imgList = ref([] as string[])
+const videoList = ref([] as string[])
+
+const toolbarConfig = {
+  // 去除不需要的工具
+  excludeKeys: ['fullScreen']
+}
+
+const editorConfig = {
+  placeholder: '请输入内容...',
+  MENU_CONF: {
+    uploadImage: {
+      fieldName: 'File',
+      server:
+        '/K3Cloud/LQKJ.K3.NSJYBSystem.WebApi.WebApiEditService.UpdateFile,LQKJ.K3.NSJYBSystem.WebApi.common.kdsvc',
+      meta: {
+        Type: 0
+      },
+      // 上传之前触发
+      onBeforeUpload(file: File) {
+        console.log(file)
+        return file
+      },
+      // 上传进度的回调函数
+      onProgress(progress: number) {
+        console.log('progress', progress)
+      },
+      // 单个文件上传成功之后
+      onSuccess(file: File, res: any) {
+        if (res.errno === 0) {
+          const parts = res.data.url.split('/')
+          if (parts.length) {
+            const filename = parts[parts.length - 1].split('.')[0]
+            if (filename) imgList.value.push(filename)
+            console.log(`${file.name} 上传成功`, res, imgList.value)
+          }
+        }
+      },
+      // 单个文件上传失败
+      onFailed(file: File, res: any) {
+        console.log(`${file.name} 上传失败`, res)
+      },
+      // 上传错误，或者触发 timeout 超时
+      onError(file: File, err: any, res: any) {
+        console.log(`${file.name} 上传出错`, err, res)
+      }
+    },
+    uploadVideo: {
+      fieldName: 'File',
+      server:
+        '/K3Cloud/LQKJ.K3.NSJYBSystem.WebApi.WebApiEditService.UpdateFile,LQKJ.K3.NSJYBSystem.WebApi.common.kdsvc',
+      meta: {
+        Type: 1
+      },
+      // 上传之前触发
+      onBeforeUpload(file: File) {
+        return file
+      },
+      // 上传进度的回调函数
+      // onProgress(progress: number) {
+      //   console.log('progress', progress)
+      // },
+      // 单个文件上传成功之后
+      onSuccess(file: File, res: any) {
+        if (res.errno === 0) {
+          const parts = res.data.url.split('/')
+          if (parts.length) {
+            const filename = parts[parts.length - 1].split('.')[0]
+            if (filename) videoList.value.push(filename)
+            console.log(`${file.name} 上传成功`, res, videoList.value)
+          }
+        }
+      },
+      // 单个文件上传失败
+      onFailed(file: File, res: any) {
+        console.log(`${file.name} 上传失败`, res)
+      },
+      // 上传错误，或者触发 timeout 超时
+      onError(file: File, err: any, res: any) {
+        console.log(`${file.name} 上传出错`, err, res)
+      }
+    }
+  }
+}
+
+// 组件销毁时，也及时销毁编辑器，重要！
+onBeforeUnmount(() => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.destroy()
+})
+
+// 编辑器回调函数
+const handleCreated = (editor: any) => {
+  editorRef.value = editor
+}
+
+const mouseout = () => {
+  if (!flag.value || valueHtml.value === '<p><br></p>') return
+  // console.log('change', valueHtml.value)
+  // 存储当前的文件名数组
+  let newList = [] as string[]
+  // 要删除的文件名数组
+  let delList = [] as string[]
+  editorRef.value.getElemsByType('image').map((item: any) => {
+    const parts = item.src.split('/')
+    if (parts.length) {
+      const filename = parts[parts.length - 1].split('.')[0]
+      if (filename) newList.push(filename)
+    }
+  })
+  editorRef.value.getElemsByType('video').map((item: any) => {
+    const parts = item.src.split('/')
+    if (parts.length) {
+      const filename = parts[parts.length - 1].split('.')[0]
+      if (filename) newList.push(filename)
+    }
+  })
+  // 记录的文件名数组
+  let list = [...imgList.value, ...videoList.value]
+  list.map((item: any) => {
+    if (!newList.includes(item)) delList.push(item)
+  })
+  flag.value = false
+  emits('change', valueHtml.value, delList)
+}
+
+const init = (html: string) => {
+  valueHtml.value = html
+  editorRef.value.getElemsByType('image').map((item: any) => {
+    const parts = item.src.split('/')
+    if (parts.length) {
+      const filename = parts[parts.length - 1].split('.')[0]
+      imgList.value.push(filename)
+    }
+  })
+  editorRef.value.getElemsByType('video').map((item: any) => {
+    const parts = item.src.split('/')
+    if (parts.length) {
+      const filename = parts[parts.length - 1].split('.')[0]
+      videoList.value.push(filename)
+    }
+  })
+}
+
+defineExpose({
+  flag,
+  init
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(video) {
+  width: 100%;
+}
+</style>

src/components/contentBlock.vue

@@ -6,7 +6,7 @@
     </div>
   </div>
 </template>
-<!-- @/assets/img/Frame690(2).png -->
+
 <script setup lang="ts">
 defineProps({
   list: {

src/components/interface/index.ts

+import { SlateElement } from '@wangeditor/editor'
+
+type ImageElement = SlateElement & {
+  src: string
+  alt: string
+  url: string
+  href: string
+}
+
+type VideoElement = SlateElement & {
+  src: string
+  poster?: string
+}

src/components/policy.vue

 <template>
-  <div class="policy flx-direction-between">
+  <div class="policy flx-column-center-between">
     <div class="policy-top">{{ title }}</div>
     <div class="policy-content card">
       <div v-for="(item, index) in list" :key="index" class="policy-item">
@@ -10,15 +10,13 @@
         <img v-show="index < 3" src="@/assets/img/icon-new.png" width="28" height="15" alt="" />
       </div>
       <div v-show="isMore" class="policy-footer">
-        查看更多<el-icon><DArrowRight /></el-icon>
+        查看更多<el-icon><i-ep-DArrowRight /></el-icon>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { DArrowRight } from '@element-plus/icons-vue'
-
 defineProps({
   title: {
     type: String,

src/components/search.vue

 <template>
   <div class="search-group">
-    <el-input v-model="searchValue" placeholder="请输入搜索关键字" class="input-with-select">
-      <template #prepend>
+    <el-input
+      v-model="searchValue"
+      placeholder="请输入搜索关键字"
+      class="input-with-select"
+      @change="handleSearch"
+    >
+      <template #prefix>
         <el-select v-model="selectValue" placeholder="">
           <el-option label="找工作" value="1" />
           <el-option label="找企业" value="2" />
           <el-option label="找人才" value="3" />
         </el-select>
       </template>
-      <template #append>
-        <el-icon size="25"><i-ep-Search /></el-icon>
+      <template #suffix>
+        <el-icon size="25" style="cursor: pointer" @click="handleSearch"><i-ep-Search /></el-icon>
       </template>
     </el-input>
   </div>
@@ -17,28 +22,31 @@
 
 <script setup lang="ts">
 const searchValue = ref()
-const selectValue = ref()
+const selectValue = ref('1')
+
+const handleSearch = () => {
+  console.log(searchValue.value)
+}
 </script>
 
 <style lang="scss" scoped>
 .search-group {
   width: 920px;
-  border-radius: 20px;
-  margin: 40px 0;
-
+  height: 62px;
   .el-input {
     height: 100%;
 
     :deep(.el-input__wrapper) {
-      height: 60px;
+      border-radius: 29px;
+      padding: 0 46px 0 35px;
     }
   }
-
-  .el-input__wrapper :deep(.el-input__inner) {
-    width: 650px;
-    height: 100%;
-    border: none;
-    font-size: 15px;
+  .el-select {
+    width: 86px;
+    :deep(.el-input__wrapper) {
+      border-radius: 0;
+      padding: 0;
+    }
   }
 
   :deep(.input-with-select .el-input-group__prepend) {

src/routers/index.ts

-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import Layout from '@/Layout/index.vue'
 
 const routes = [
@@ -76,6 +76,10 @@ const routes = [
         component: () => import('@/views/counterpartAssistance/index.vue')
       }
     ]
+  },
+  {
+    path: '/RichTextEditor',
+    component: () => import('@/views/editor/index.vue')
   }
   //{
   //配置404页面
@@ -86,10 +90,6 @@ const routes = [
 ]
 
 // {
-//   path: '/home1',
-//   component: () => import('@/views/home/index1.vue')
-// },
-// {
 //   path: '/job',
 //   component: () => import('@/views/job/index.vue')
 // },
@@ -99,7 +99,7 @@ const routes = [
 // }
 // 路由
 const router = createRouter({
-  history: createWebHistory(),
+  history: createWebHashHistory(),
   routes
 })
 // 导出

src/services/api/editor.ts

+import request from '@/services'
+
+/**
+ * 查询富文本
+ * @param FormId
+ * @param FID
+ * @returns
+ */
+export const getRichText = (data: any) => {
+  return request.post(
+    '/K3Cloud/LQKJ.K3.NSJYBSystem.WebApi.WebApiEditService.SelectRichText,LQKJ.K3.NSJYBSystem.WebApi.common.kdsvc',
+    data
+  )
+}
+
+/**
+ * 更新富文本
+ * @param UserId
+ * @param RichTextstr 内容
+ * @returns
+ */
+export const uploadRichText = (data: any) => {
+  return request.post(
+    '/K3Cloud/LQKJ.K3.NSJYBSystem.WebApi.WebApiEditService.UpRichText,LQKJ.K3.NSJYBSystem.WebApi.common.kdsvc',
+    data,
+    { IsError: true }
+  )
+}

src/services/index.ts

@@ -10,6 +10,12 @@ import { useGlobalStore } from '@/stores'
 import { LOGIN_URL } from '@/utils'
 import router from '@/routers'
 
+export interface CustomAxiosRequestConfig extends InternalAxiosRequestConfig {
+  loading?: boolean
+  Authorization?: boolean
+  IsError?: boolean
+}
+
 // 数据返回的接口
 // 定义请求响应参数，不含data
 interface Result {
@@ -31,6 +37,8 @@ enum RequestEnums {
   SUCCESS = 200 // 请求成功
 }
 
+let IsError = false
+
 const config = {
   // 默认地址
   baseURL: URL as string,
@@ -55,14 +63,12 @@ class RequestHttp {
      * token校验(JWT) : 接受服务器返回的token,存储到本地储存当中
      */
     this.service.interceptors.request.use(
-      (config: InternalAxiosRequestConfig) => {
+      (config: CustomAxiosRequestConfig) => {
         const globalStore = useGlobalStore()
-        // * 如果当前请求不需要显示 loading,在 api 服务中通过指定的第三个参数: { headers: { noLoading: true } }来控制不显示loading，参见getMenuList()
-        // config.headers!.noLoading || showFullScreenLoading();
-
-        // const token = globalStore.token
-        // if (config.headers && typeof config.headers?.set === 'function')
-        //   config.headers.set('x-access-token', globalStore.token)
+        if (config.headers && config?.Authorization) {
+          config.headers.set('Authorization', globalStore.token)
+        }
+        if (config?.IsError) IsError = true
         return config
       },
 
@@ -79,6 +85,7 @@ class RequestHttp {
         (response: AxiosResponse) => {
           const { data, config } = response // 解构
           const globalStore = useGlobalStore()
+          if (IsError) return data
           // 未携带token或token失效
           if (data.code === RequestEnums.OVERDUE) {
             // 登录信息失效，应跳转到登录页面，并清空本地的token

src/styles/common.scss

-.title {
+.n-title {
   font-size: 32px;
   font-weight: 500;
   color: #222222;
@@ -27,13 +27,20 @@
   flex-direction: column;
 }
 
-.flx-direction-between {
+.flx-column-center-between {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
 }
 
+.flx-column-start-between {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: space-between;
+}
+
 .card {
   box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
   border-radius: 8px;
@@ -54,3 +61,48 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.n-more {
+  display: inline-block;
+  width: 200px;
+  height: 52px;
+  line-height: 52px;
+  background: linear-gradient(90deg, #177cfa 0%, #177cfa 100%);
+  border-radius: 8px;
+  font-size: 20px;
+  font-weight: 500;
+  color: #ffffff;
+  cursor: pointer;
+}
+
+.company-label {
+  height: 12px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #999999;
+  line-height: 12px;
+}
+.salary {
+  display: inline-block;
+  height: 18px;
+  font-size: 18px;
+  font-weight: 400;
+  color: #ff3333;
+  line-height: 18px;
+  margin-right: 2px;
+}
+.monthly-pay {
+  display: inline-block;
+  height: 18px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #222222;
+  line-height: 14px;
+}
+.position-label {
+  height: 16px;
+  font-size: 16px;
+  font-weight: 400;
+  color: #666666;
+  line-height: 16px;
+}

src/styles/reset.scss

@@ -35,7 +35,6 @@ s,
 samp,
 small,
 strike,
-strong,
 sub,
 sup,
 tt,
@@ -80,8 +79,7 @@ section,
 summary,
 time,
 mark,
-audio,
-video {
+audio {
   padding: 0;
   margin: 0;
   font: inherit;

src/utils/debounce_throttle.ts

+export function throttle(fn: () => void, time = 2000) {
+  let canRun: boolean = true
+  return function () {
+    if (!canRun) return
+    canRun = false
+    setTimeout(() => {
+      fn()
+      canRun = true
+    }, time)
+  }
+}
+
+export const debounce = (func: Function, wait: number) => {
+  let timeout: ReturnType<typeof setTimeout> | null
+  return function (this: any, ...args: any[]) {
+    const context = this
+    if (timeout) clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      func.apply(context, args)
+    }, wait)
+  }
+}

src/views/collegeStudents/index.scss

+.student-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  .container {
+    width: 1316px;
+    text-align: center;
+    img {
+      width: 100%;
+      margin: 17px 0 26px;
+      border-radius: 12px;
+    }
+    .student {
+      width: 1316px;
+      text-align: center;
+      margin-bottom: 64px;
+
+      .student-tabs {
+        margin-top: 24px;
+
+        :deep(.el-tabs__content) {
+          text-align: start;
+          .student-list {
+            display: flex;
+            flex-wrap: wrap;
+            .student-item {
+              width: calc((100% - 32px) / 3);
+              flex: 0 0 calc((100% - 32px) / 3);
+              margin: 0 16px 24px 0;
+              box-sizing: border-box;
+              background: #ffffff;
+              border-radius: 12px;
+              padding: 26px 20px 21px;
+
+              &:nth-child(3n) {
+                margin-right: 0;
+              }
+              .student-title {
+                width: 50%;
+                height: 18px;
+                font-size: 18px;
+                font-weight: 500;
+                color: #222222;
+                line-height: 18px;
+              }
+
+              .company {
+                height: 14px;
+                font-size: 14px;
+                font-weight: 500;
+                color: #666666;
+                margin-bottom: 14px;
+              }
+            }
+          }
+          .student-tab-item {
+            width: 100%;
+            height: 288px;
+            background: #ffffff;
+            border-radius: 12px;
+            font-size: 32px;
+            font-weight: 400;
+            color: #000000;
+          }
+          .live-broadcast {
+            display: flex;
+            flex-wrap: wrap;
+            .live-broadcast-item {
+              flex: 0 0 calc((100% - 32px) / 3);
+              margin: 0 16px 16px 0;
+              padding: 12px 12px 20px;
+              background: #ffffff;
+              border-radius: 12px;
+              box-sizing: border-box;
+
+              &:nth-child(3n) {
+                margin-right: 0;
+              }
+              img {
+                margin: 0;
+              }
+              p {
+                margin: 8px 0 16px;
+                font-size: 16px;
+                font-weight: 400;
+                color: #222222;
+                line-height: 24px;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+              .live-broadcast-info {
+                display: inline-block;
+                font-size: 14px;
+                font-weight: 400;
+                color: #666666;
+                margin-left: 6px;
+              }
+            }
+          }
+          .entrepreneurship-item {
+            display: flex;
+            height: 140px;
+            margin-bottom: 16px;
+            img {
+              width: 140px;
+              height: 100%;
+              margin-right: 16px;
+              border-radius: 12px;
+              margin: 0;
+              margin-right: 16px;
+            }
+            .entrepreneurship-item-rg {
+              flex: 1;
+              height: 100%;
+              background: #ffffff;
+              border-radius: 12px;
+              padding: 21px 18px;
+              box-sizing: border-box;
+              font-size: 14px;
+              font-weight: 400;
+              color: rgba(0, 0, 0, 0.6);
+              line-height: 16px;
+            }
+          }
+          .job-registration {
+            width: 720px;
+            height: 620px;
+            background: #ffffff;
+            border-radius: 24px;
+            padding: 124px 150px;
+            box-sizing: border-box;
+            text-align: center;
+
+            .el-form {
+              margin-top: 64px;
+            }
+
+            .agree-with {
+              display: flex;
+              align-items: center;
+              margin-top: 24px;
+              margin-bottom: 50px;
+            }
+          }
+        }
+      }
+    }
+  }
+  :deep(.el-input__wrapper) {
+    height: 48px;
+    img {
+      margin: 0;
+    }
+  }
+}

src/views/collegeStudents/index.vue

 <template>
-  <div>高校学生</div>
+  <div class="student-container">
+    <div class="container">
+      <img :src="imgUrl" height="560" />
+      <div class="student">
+        <el-tabs v-model="activeName" class="student-tabs" stretch @tab-change="tabChange">
+          <el-tab-pane
+            v-for="(item, index) in tabsList"
+            :key="index"
+            :label="item.label"
+            :name="item.name"
+            class="student-tab-pane"
+          >
+            <div v-if="!index" class="student-list">
+              <div v-for="col in 12" :key="col" class="student-item">
+                <div class="flx-justify-between" style="margin-bottom: 20px">
+                  <div class="student-title nowrap-ellipsis">
+                    销售经理销售经理销售经理销售经理销售经理销售经理
+                  </div>
+                  <div>
+                    <span class="salary">6000-8000</span>
+                    <span class="monthly-pay">元/月</span>
+                  </div>
+                </div>
+                <div class="position-label">
+                  <span>大专</span>
+                  <el-divider direction="vertical" />
+                  <span>1-3年</span>
+                  <el-divider direction="vertical" />
+                  <span>招聘2人</span>
+                </div>
+                <el-divider style="margin: 14px 0" />
+                <div class="company">深圳市世杰创益酒店酒店管理限公司</div>
+                <div class="company-label">
+                  <span>大专</span>
+                  <el-divider direction="vertical" />
+                  <span>1-3年</span>
+                  <el-divider direction="vertical" />
+                  <span>招聘2人</span>
+                </div>
+              </div>
+            </div>
+            <div v-else-if="index === 5" class="live-broadcast">
+              <div v-for="col in 6" :key="col" class="live-broadcast-item">
+                <img src="@/assets/img/Frame690(3).png" height="214" />
+                <p>
+                  有时候,上天没有给你想要的,不是因为你不配,而是你值得更好的
+                  有时候,上天没有给你想要的,不是因为你不配,而是你值得更好的
+                </p>
+                <div class="flx-justify-between">
+                  <div class="flx-align-center">
+                    <img src="@/assets/img/icon-chuang.png" style="width: 20px; height: 20px" />
+                    <span class="live-broadcast-info">陈大大</span>
+                    <span class="live-broadcast-info">2021-9-10</span>
+                  </div>
+                  <div class="flx-align-center">
+                    <el-icon size="14"><i-ep-View /></el-icon>
+                    <span class="live-broadcast-info">1538</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div v-else-if="index === 6" class="flx-direction-column">
+              <div v-for="col in 5" :key="col" class="entrepreneurship-item">
+                <img src="@/assets/img/Frame690(3).png" />
+                <div class="entrepreneurship-item-rg">
+                  Lorem ipsum dolor sit amet, consectetur adipiscingelit. Aenean euismod bibendum
+                  laoreet. Proin gravidadolor sit amet lacus accumsan et viverra justocommodo. Proin
+                  sodales pulvinar sic tempor. Sociisnatoque penatibus et magnis dis parturient
+                  montesnascetur ridiculus mus. Nam
+                </div>
+              </div>
+            </div>
+            <div v-else-if="index === 7" class="flx-center">
+              <div class="job-registration">
+                <div class="n-title">求职登记</div>
+                <div class="login-dialog">
+                  <el-form
+                    ref="formRef"
+                    :model="state.loginForm"
+                    :rules="state.loginRules"
+                    label-width="0"
+                    class="demo-dynamic"
+                  >
+                    <el-form-item label="" prop="Phone">
+                      <el-input
+                        v-model="state.loginForm.Phone"
+                        size="large"
+                        placeholder="请输入手机号"
+                      >
+                        <template #prefix>
+                          <img src="../../assets/img/Phone.png" alt="" />
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="" prop="Code">
+                      <el-input
+                        v-model="state.loginForm.Code"
+                        size="large"
+                        placeholder="请输入验证码"
+                      >
+                        <template #prefix>
+                          <img src="../../assets/img/pwd.png" alt="" />
+                        </template>
+                        <template #suffix>
+                          <el-button type="primary" link :disabled="state.disabled"
+                            >获取验证码</el-button
+                          >
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                  </el-form>
+                  <el-button type="primary" style="width: 100%; margin-top: 46px" @click="onConfirm"
+                    >登录/注册</el-button
+                  >
+                </div>
+                <div class="agree-with">
+                  <el-checkbox v-model="state.agreeWith" label="" size="large" text-color="#ffffff">
+                    <template #default>
+                      <div style="color: #999999">
+                        同意南山就业帮
+                        <span style="color: #409eff" @click.prevent="open"
+                          >《南山就业帮用户服务协议》</span
+                        >
+                        及
+                        <span style="color: #409eff" @click.prevent="open"
+                          >《个人信息保护政策》</span
+                        >
+                      </div>
+                    </template>
+                  </el-checkbox>
+                </div>
+              </div>
+            </div>
+            <div v-else class="student-tab-item flx-center">{{ item.label }}</div>
+          </el-tab-pane>
+        </el-tabs>
+        <span v-show="activeName === 0 || activeName === 6" class="n-more" style="margin-top: 24px"
+          >查看更多</span
+        >
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { imgUrl } from '@/assets/imgUrl'
 
-<style scoped></style>
+const activeName = ref(7)
+const formRef = ref()
+const tabsList = [
+  { label: '岗位速递', name: 0 },
+  { label: '就业引导', name: 1 },
+  { label: '就业政策', name: 2 },
+  { label: '就业见习', name: 3 },
+  { label: '职业指导', name: 4 },
+  { label: '直播带岗', name: 5 },
+  { label: '创业展示', name: 6 },
+  { label: '求职登记', name: 7 }
+]
+
+const state = reactive({
+  loginForm: {
+    Phone: '',
+    Code: ''
+  },
+  loginRules: {
+    Phone: [
+      { required: true, message: '请输入手机号', trigger: 'blur' },
+      {
+        pattern: /^1[3|4|5|6|7|8][0-9]\d{8}$/,
+        message: '手机号码格式不正确',
+        trigger: 'blur'
+      }
+    ],
+    Code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
+  },
+  disabled: false,
+  agreeWith: false
+})
+
+const tabChange = (name: number) => {}
+const open = () => {
+  console.log('open')
+}
+const onConfirm = () => {
+  formRef.value?.validate((valid: boolean, fields: any) => {
+    if (valid) {
+      console.log(state.loginForm)
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+@import url(./index.scss);
+</style>

src/views/editor/index.vue

+<template>
+  <RichTextEditor ref="editorRef" v-loading="loading" @change="handleChange" />
+</template>
+
+<script setup lang="ts">
+import { getRichText, uploadRichText } from '@/services/api/editor'
+import RichTextEditor from '@/components/RichTextEditor.vue'
+
+const route = useRoute()
+let params = {
+  FID: '',
+  FormId: '',
+  UserId: ''
+}
+const editorRef = ref()
+const loading = ref(true)
+
+const handleChange = async (html: string, list: any) => {
+  if (!html) return
+  let data = {
+    UserId: params.UserId,
+    RichTextstr: html,
+    Files: list || []
+  }
+  let res: any = await uploadRichText(data)
+  if (res.code === 200) {
+    setTimeout(() => {
+      editorRef.value.flag = true
+    }, 1000)
+  } else {
+    editorRef.value.flag = true
+  }
+}
+
+// 初始化数据
+const init = async () => {
+  const res: any = await getRichText(params)
+  if (res.code === 200) {
+    editorRef.value.init(res.data?.RichText)
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  if (JSON.stringify(route.query) !== '{}') {
+    const { FormId, FID, UserID }: any = route.query
+    params.FID = FID
+    params.FormId = FormId
+    params.UserId = UserID
+    init()
+  } else loading.value = false
+})
+</script>
+
+<style lang="scss" scoped></style>

src/views/flexibleEmploym/components/flexible.vue

+<template>
+  <div class="flexible flx-column-center-between">
+    <div class="flexible-top">{{ title }}</div>
+    <div class="flexible-content card">
+      <div v-for="(item, index) in list" :key="index" class="flexible-item">
+        <span class="poliy-item-order" :class="index > 2 ? 'poliy-item-postorder' : ''">{{
+          index + 1
+        }}</span>
+        <el-link>{{ item.detail }}</el-link>
+        <img v-show="index < 3" src="@/assets/img/icon-new.png" width="28" height="15" alt="" />
+      </div>
+      <div v-show="isMore" class="flexible-footer">
+        查看更多<el-icon><i-ep-DArrowRight /></el-icon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  list: {
+    type: Array,
+    default: () => []
+  } as any,
+  isMore: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.flexible {
+  position: relative;
+  flex: 0 0 calc((100% - 50px) / 3);
+  margin: 0 25px 50px 0;
+  padding-top: 16px;
+  background: #ffffff;
+  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
+  border-radius: 8px;
+  box-sizing: border-box;
+  .flexible-top {
+    position: absolute;
+    top: -21px;
+    height: 42px;
+    width: 200px;
+    line-height: 42px;
+    background: #1887fb;
+    border-radius: 8px;
+    font-size: 24px;
+    color: #ffffff;
+  }
+  .flexible-content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    padding: 0 20px;
+    box-sizing: border-box;
+    padding-bottom: 16px;
+
+    .flexible-item {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      font-weight: 400;
+      color: #222222;
+      margin-top: 16px;
+      .poliy-item-order {
+        display: inline-block;
+        width: 14px;
+        height: 14px;
+        line-height: 14px;
+        background: linear-gradient(90deg, #177cfa 0%, #177cfa 100%);
+        border-radius: 2px 2px 2px 2px;
+        font-size: 12px;
+        font-family: Roboto, Roboto;
+        font-weight: 400;
+        color: #ffffff;
+        margin-right: 4px;
+      }
+
+      .poliy-item-postorder {
+        background: #f8f8f8;
+        color: #999999;
+      }
+
+      :deep(.el-link__inner) {
+        display: inline-block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 321px;
+      }
+      img {
+        margin-left: 4px;
+      }
+    }
+
+    .flexible-footer {
+      width: 100%;
+      margin-top: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      font-size: 14px;
+      font-weight: 400;
+      color: #05a8ff;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/views/flexibleEmploym/index.scss

+.flexible-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  .container {
+    width: 1316px;
+    text-align: center;
+    img {
+      width: 100%;
+      margin: 17px 0 26px;
+      border-radius: 12px;
+    }
+    .flexible-list {
+      display: flex;
+      flex-wrap: wrap;
+
+      .flexible:nth-child(3) {
+        margin-right: 0;
+      }
+    }
+    .el-input {
+      width: 869px;
+      height: 62px;
+      margin-bottom: 24px;
+      :deep(.el-input__wrapper) {
+        border-radius: 29px;
+        padding: 0 45px;
+      }
+    }
+    .hot-position {
+      width: 1316px;
+      text-align: center;
+      margin-bottom: 64px;
+
+      .hot-position-tabs {
+        :deep(.el-tabs__content) {
+          text-align: start;
+          .position-list {
+            display: flex;
+            flex-wrap: wrap;
+            .position-item {
+              cursor: pointer;
+              width: calc((100% - 32px) / 3);
+              flex: 0 0 calc((100% - 32px) / 3);
+              margin: 0 16px 24px 0;
+              box-sizing: border-box;
+              background: #ffffff;
+              border-radius: 12px;
+              padding: 26px 20px 21px;
+
+              &:nth-child(3n) {
+                margin-right: 0;
+              }
+              .position-title {
+                width: 50%;
+                height: 18px;
+                font-size: 18px;
+                font-weight: 500;
+                color: #222222;
+                line-height: 18px;
+              }
+
+              .company {
+                height: 14px;
+                font-size: 14px;
+                font-weight: 500;
+                color: #666666;
+                margin-bottom: 14px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/views/flexibleEmploym/index.vue

 <template>
-  <div>灵活就业</div>
+  <div class="flexible-container">
+    <div class="container">
+      <img :src="imgUrl" height="560" />
+      <div class="flexible-list">
+        <flexible
+          v-for="(item, index) in flexibleNameList"
+          :key="index"
+          :title="item.name"
+          :list="flexibleList"
+          is-more
+        />
+      </div>
+      <el-input v-model="searchValue" placeholder="搜索关键词" @change="search">
+        <template #suffix>
+          <el-icon size="24" style="cursor: pointer" @click="search"><i-ep-Search /></el-icon>
+        </template>
+      </el-input>
+      <div class="hot-position">
+        <el-tabs v-model="activeName" class="hot-position-tabs" stretch @tab-change="handleChange">
+          <el-tab-pane
+            v-for="(item, index) in tabsList"
+            :key="index"
+            v-loading="loading"
+            :label="item.label"
+            :name="item.name"
+            class="hot-position-tab-pane"
+          >
+            <div v-if="positionList.length" class="position-list">
+              <div v-for="col in positionList" :key="col.id" class="position-item">
+                <div class="flx-justify-between" style="margin-bottom: 20px">
+                  <div class="position-title nowrap-ellipsis">
+                    {{ col.postName }}
+                  </div>
+                  <div>
+                    <span class="salary">{{
+                      col.salaryRange?.substring(0, col.salaryRange.indexOf('元'))
+                        ? col.salaryRange?.substring(0, col.salaryRange.indexOf('元'))
+                        : col.salaryRange
+                    }}</span>
+                    <span
+                      v-show="col.salaryRange?.substring(0, col.salaryRange.indexOf('元'))"
+                      class="monthly-pay"
+                      >元/月</span
+                    >
+                  </div>
+                </div>
+                <div class="position-label">
+                  <span>{{ col.academicRequirement }}</span>
+                  <el-divider v-show="col.academicRequirement" direction="vertical" />
+                  <span>{{ col.workingLife }}</span>
+                  <el-divider
+                    v-show="col.workingLife && col.recruitingNumbers"
+                    direction="vertical"
+                  />
+                  <span v-show="col.recruitingNumbers">招聘{{ col.recruitingNumbers }}人</span>
+                </div>
+                <el-divider style="margin: 14px 0" />
+                <div class="company">{{ col.customerName }}</div>
+                <div class="company-label">
+                  <span>{{ col.recruitingType }}</span>
+                  <el-divider v-show="col.recruitingType" direction="vertical" />
+                  <span v-show="col.ageRequirement">招聘{{ col.ageRequirement }}人</span>
+                  <el-divider v-show="col.ageRequirement" direction="vertical" />
+                  <span>餐饮</span>
+                </div>
+              </div>
+            </div>
+            <el-empty v-else description="数据为空" />
+          </el-tab-pane>
+        </el-tabs>
+        <span class="n-more">查看更多</span>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { imgUrl } from '@/assets/imgUrl'
+import { getPositionList } from '@/services/api/home'
+import flexible from '@/views/flexibleEmploym/components/flexible.vue'
 
-<style scoped></style>
+const tabsList = [
+  { label: '安保', name: 0 },
+  { label: '技术', name: 1 },
+  { label: '餐饮', name: 2 },
+  { label: '供应链', name: 3 },
+  { label: '保洁', name: 4 },
+  { label: '快递', name: 5 },
+  { label: '促销员', name: 6 },
+  { label: '店名', name: 7 },
+  { label: '服务', name: 8 }
+]
+const listQuery = reactive({
+  obj: {
+    postName: tabsList[0].label
+  },
+  currentPage: 1,
+  pageSize: 6
+})
+
+const positionList = ref([] as any)
+const loading = ref(false)
+const activeName = ref(0)
+const searchValue = ref('')
+
+const flexibleNameList = [{ name: '公告' }, { name: '政策' }, { name: '新闻' }]
+
+const flexibleList = [
+  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
+  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
+  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
+  { detail: '深圳市创业带动就业补贴办事指南' },
+  { detail: '深圳市创业带动就业补贴办事指南' },
+  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
+  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
+  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
+  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
+  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' }
+]
+
+const handleChange = (name: number) => {
+  listQuery.obj.postName = tabsList[name].label
+  init()
+}
+
+const search = () => {
+  init()
+  // console.log(searchValue.value)
+}
+
+const init = async () => {
+  loading.value = true
+  const res: any = await getPositionList(listQuery)
+  if (res.code === 200) {
+    loading.value = false
+    positionList.value = res.data.obj
+  }
+}
+init()
+</script>
+
+<style lang="scss" scoped>
+@import url(./index.scss);
+</style>

src/views/home/details.vue

@@ -28,16 +28,16 @@
     </div>
     <div class="details-content">
       <div class="content">
-        <div class="title">职位描述：</div>
+        <div class="n-title">职位描述：</div>
         <div class="text">
           {{ detailData?.positionDescribe }}
         </div>
-        <div class="title">工作地点</div>
+        <div class="n-title">工作地点</div>
         <div class="text">
           <img :src="locationIcon" class="address" />
           {{ detailData?.workingplaceAddress }}
         </div>
-        <div class="title">公司信息</div>
+        <div class="n-title">公司信息</div>
         <div class="text">
           <img :src="companyIcon" class="comp" />
           {{ detailData?.customerName }}

src/views/home/index.vue

@@ -11,14 +11,14 @@
     </div>
     <div class="container">
       <div class="home-tp flx-direction-column">
-        <div class="title">公共就业服务政策</div>
+        <div class="n-title">公共就业服务政策</div>
         <div class="flx-justify-between policy-bottom">
           <policy title="南山就业政策公告" :list="policyList" />
           <policy title="南山就业活动" :list="policyList" />
         </div>
       </div>
       <div class="home-tp">
-        <div class="title">街道办招聘</div>
+        <div class="n-title">街道办招聘</div>
         <div class="recruit">
           <div v-for="(item, index) in imgList" :key="index" class="recruit-item">
             <img :src="item.url" width="318" height="130" />
@@ -29,7 +29,7 @@
 
       <div class="flx-justify-between policy-bottom">
         <div class="employment-training">
-          <div class="title">灵活就业</div>
+          <div class="n-title">灵活就业</div>
           <div class="employment">
             <div v-for="(item, index) in employmentList" :key="index" class="employment-item">
               <div class="flx-align-center">
@@ -41,7 +41,7 @@
           </div>
         </div>
         <div class="employment-training">
-          <div class="title">技能培训</div>
+          <div class="n-title">技能培训</div>
           <div class="train">
             <div style="position: relative; height: 100px">
               <img src="@/assets/img/pic-an.png" width="645" height="100" />
@@ -69,7 +69,7 @@
     <div class="guarantee">
       <img src="@/assets/img/BG.png" height="560" />
       <div class="img-ct guarantee-content">
-        <div class="title">劳动权益保障</div>
+        <div class="n-title">劳动权益保障</div>
         <div class="guarantee-detail">
           <p>劳动权益保障是指劳动者在就业过程中所享有的各种权利和利益，包括但不限于以下几个方面:</p>
           <p>1、平等就业的职业选择权:劳动者有权选择适合自己的职业，并获得平等的就业机会。</p>
@@ -88,7 +88,7 @@
     </div>
 
     <div class="container" style="margin: 64px 60px">
-      <div class="title" style="text-align: center">重点就业情景</div>
+      <div class="n-title" style="text-align: center">重点就业情景</div>
       <div class="scene">
         <div v-for="(item, index) in sceneList" :key="index" class="scene-item">
           <img :src="item.url" width="24" height="24" style="margin-left: 4px" />

src/views/login/index.vue

@@ -11,13 +11,7 @@
         <div class="info">个人用户</div>
         <div class="switch-info">切换为企业用户>></div>
       </div>
-      <el-form
-        ref="formRef"
-        :model="state.loginForm"
-        :rules="state.loginRules"
-        label-width="0"
-        class="demo-dynamic"
-      >
+      <el-form ref="formRef" :model="state.loginForm" :rules="state.loginRules" label-width="0">
         <el-form-item label="" prop="Phone">
           <el-input v-model="state.loginForm.Phone" size="large" placeholder="请输入手机号">
             <template #prefix>

src/views/policy/index.scss

+.policy-container {
+  width: 100%;
+  .container {
+    width: 1316px;
+    text-align: center;
+
+    img {
+      border-radius: 12px;
+      margin: 17px 0 19px;
+    }
+
+    .el-input {
+      width: 869px;
+      height: 62px;
+      margin-bottom: 24px;
+      :deep(.el-input__wrapper) {
+        border-radius: 29px;
+        padding: 0 45px;
+      }
+    }
+  }
+}

src/views/policy/index.vue

@@ -4,7 +4,7 @@
       <img :src="imgUrl" height="560" style="width: 100%" />
       <el-input v-model="searchValue" placeholder="搜索关键词" @change="search">
         <template #suffix>
-          <el-icon size="24" style="cursor: pointer" @click="search"><Search /></el-icon>
+          <el-icon size="24" style="cursor: pointer" @click="search"><i-ep-Search /></el-icon>
         </template>
       </el-input>
       <div class="flx-justify-between" style="margin-bottom: 64px">
@@ -17,7 +17,6 @@
 
 <script setup lang="ts">
 import { imgUrl } from '@/assets/imgUrl'
-import { Search } from '@element-plus/icons-vue'
 import policy from '@/components/policy.vue'
 
 const policyList = [
@@ -40,26 +39,5 @@ const search = () => {
 </script>
 
 <style lang="scss" scoped>
-.policy-container {
-  width: 100%;
-  .container {
-    width: 1316px;
-    text-align: center;
-
-    img {
-      border-radius: 12px;
-      margin: 17px 0 19px;
-    }
-
-    .el-input {
-      width: 869px;
-      height: 62px;
-      margin-bottom: 24px;
-      :deep(.el-input__wrapper) {
-        border-radius: 29px;
-        padding: 0 45px;
-      }
-    }
-  }
-}
+@import url(./index.scss);
 </style>

src/views/recruitmentManagement/index.scss

+.main-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .banner-group {
+    width: 1316px;
+    height: 424px;
+    display: flex;
+    margin-bottom: 64px;
+
+    .job-menu {
+      width: 428px;
+      height: 418px;
+      position: relative;
+      padding: 9px 0;
+      background-color: #ffffff;
+      border-radius: 12px;
+      box-sizing: border-box;
+      .el-menu {
+        border-right: 0;
+        .menu-item-title {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .el-menu-item {
+          height: 40px;
+        }
+      }
+
+      .job-menu-sub {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 418px;
+        z-index: 10;
+        width: 904px;
+        height: 418px;
+        border-radius: 12px;
+        box-sizing: border-box;
+
+        background: #fff;
+        .el-scrollbar {
+          padding: 16px 23px 0 24px;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+        }
+        :deep(.el-descriptions__label) {
+          margin-right: 0;
+        }
+      }
+    }
+    .street-list {
+      width: 888px;
+      height: 418px;
+      margin-left: 16px;
+      display: flex;
+      flex-wrap: wrap;
+      img {
+        max-width: 100%;
+        height: auto;
+      }
+    }
+  }
+
+  .hot-position {
+    width: 1316px;
+    text-align: center;
+    margin-bottom: 64px;
+
+    .hot-position-tabs {
+      margin-top: 24px;
+
+      :deep(.el-tabs__content) {
+        text-align: start;
+        .position-list {
+          display: flex;
+          flex-wrap: wrap;
+          .position-item {
+            width: calc((100% - 32px) / 3);
+            flex: 0 0 calc((100% - 32px) / 3);
+            margin: 0 16px 24px 0;
+            box-sizing: border-box;
+            background: #ffffff;
+            border-radius: 12px;
+            padding: 26px 20px 21px;
+
+            &:nth-child(3n) {
+              margin-right: 0;
+            }
+            .position-title {
+              width: 50%;
+              height: 18px;
+              font-size: 18px;
+              font-weight: 500;
+              color: #222222;
+              line-height: 18px;
+            }
+
+            .company {
+              height: 14px;
+              font-size: 14px;
+              font-weight: 500;
+              color: #666666;
+              margin-bottom: 14px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .hot-company {
+    width: 1316px;
+    text-align: center;
+    margin-bottom: 64px;
+    .company-list {
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 24px;
+      .company-item {
+        width: calc((100% - 32px) / 3);
+        flex: 0 0 calc((100% - 32px) / 3);
+        margin: 0 16px 16px 0;
+        background: #ffffff;
+        border-radius: 12px;
+        box-sizing: border-box;
+
+        &:nth-child(3n) {
+          margin-right: 0;
+        }
+
+        .company-tp {
+          background: linear-gradient(90deg, #e3f0ff 0%, rgba(227, 240, 255, 0.15) 100%);
+          border-radius: 12px 12px 0px 0px;
+          padding: 26px 21px;
+          display: flex;
+          .company-tp-rg {
+            margin-left: 21px;
+            height: 50px;
+          }
+        }
+        .company-bt {
+          padding: 26px 20px;
+          .company-position-list {
+            .company-position-item {
+              margin-bottom: 24px;
+              cursor: pointer;
+              .hot-position-item-ft {
+                margin-top: 16px;
+                display: flex;
+                span {
+                  padding: 6px 12px;
+                  background: #f8f8f8;
+                  border-radius: 4px;
+                  line-height: 24px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #666666;
+                  margin-right: 8px;
+                }
+              }
+            }
+          }
+          .company-bt-btn {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            cursor: pointer;
+            span {
+              display: block;
+              width: 136px;
+              height: 38px;
+              line-height: 38px;
+              text-align: center;
+              border-radius: 8px;
+              border: 1px solid #177cfa;
+              color: #177cfa;
+              font-size: 16px;
+              font-weight: 400;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/views/recruitmentManagement/index.vue

 <template>
-  <div>招聘管理</div>
+  <div class="main-container">
+    <search style="margin: 25px 0" />
+    <div class="banner-group">
+      <div class="job-menu">
+        <el-menu class="el-menu-vertical-demo">
+          <el-menu-item
+            v-for="item in menuList"
+            :key="item.index"
+            @mouseover="mouseover(item)"
+            @mouseout="mouseout(item)"
+          >
+            <template #title>
+              <div class="menu-item-title">
+                <span>{{ item.name }}</span>
+                <el-icon><i-ep-ArrowRight /></el-icon>
+              </div>
+            </template>
+          </el-menu-item>
+        </el-menu>
+        <div class="job-menu-sub" @mouseover="mouseover" @mouseout="mouseout">
+          <el-scrollbar height="400px">
+            <el-descriptions v-for="item in 10" :key="item" :column="4">
+              <template #title>
+                <div style="font-size: 14px; font-weight: 400">销售</div>
+              </template>
+              <el-descriptions-item v-for="item1 in 4" :key="item1">
+                <template #default>
+                  <el-link :underline="false" href="/job">销售业务</el-link>
+                </template>
+              </el-descriptions-item>
+            </el-descriptions>
+          </el-scrollbar>
+        </div>
+      </div>
+      <div class="street-list">
+        <img v-for="(item, index) in streetImgList" :key="index" :src="item" />
+      </div>
+      <!-- <div style="width: 16px; height: 100%" @mouseover="mouseover" @mouseout="mouseout" /> -->
+    </div>
+
+    <div class="hot-position">
+      <div class="n-title">热招职位</div>
+      <el-tabs v-model="activeName" class="hot-position-tabs" stretch @tab-click="handleClick">
+        <el-tab-pane
+          v-for="(item, index) in tabsList"
+          :key="index"
+          :label="item.label"
+          :name="item.name"
+          class="hot-position-tab-pane"
+        >
+          <div class="position-list">
+            <div v-for="col in 6" :key="col" class="position-item">
+              <div class="flx-justify-between" style="margin-bottom: 20px">
+                <div class="position-title nowrap-ellipsis">
+                  销售经理销售经理销售经理销售经理销售经理销售经理
+                </div>
+                <div>
+                  <span class="salary">6000-8000</span>
+                  <span class="monthly-pay">元/月</span>
+                </div>
+              </div>
+              <div class="position-label">
+                <span>大专</span>
+                <el-divider direction="vertical" />
+                <span>1-3年</span>
+                <el-divider direction="vertical" />
+                <span>招聘2人</span>
+              </div>
+              <el-divider style="margin: 14px 0" />
+              <div class="company">深圳市世杰创益酒店酒店管理限公司</div>
+              <div class="company-label">
+                <span>大专</span>
+                <el-divider direction="vertical" />
+                <span>1-3年</span>
+                <el-divider direction="vertical" />
+                <span>招聘2人</span>
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+      <span class="n-more">查看更多</span>
+    </div>
+
+    <!-- 热门企业 -->
+    <div class="hot-company">
+      <div class="n-title">热门企业</div>
+      <div class="company-list">
+        <div v-for="item in 6" :key="item" class="company-item">
+          <div class="company-tp">
+            <img src="@/assets/img/icon-zhao.png" width="50" height="50" />
+            <div class="company-tp-rg flx-column-start-between">
+              <span>博彦科技</span>
+              <div class="company-label">
+                <span>大专</span>
+                <el-divider direction="vertical" />
+                <span>1-3年</span>
+                <el-divider direction="vertical" />
+                <span>招聘2人</span>
+              </div>
+            </div>
+          </div>
+          <div class="company-bt">
+            <div class="company-position-list flx-direction-column">
+              <div v-for="col in 3" :key="col" class="company-position-item">
+                <div class="flx-justify-between" style="margin-bottom: 22px">
+                  <div
+                    class="nowrap-ellipsis"
+                    style="width: 207px"
+                    title="软件测试 (学信网可查,学信网可查)"
+                  >
+                    软件测试 (学信网可查,学信网可查)
+                  </div>
+                  <div>
+                    <span class="salary">6000-8000</span>
+                    <span class="monthly-pay">元/月</span>
+                  </div>
+                </div>
+                <div class="hot-position-item-ft">
+                  <span>深圳 福田区 新洲</span>
+                  <span>经验不限 </span>
+                  <span>学历不限</span>
+                </div>
+              </div>
+            </div>
+            <div class="company-bt-btn">
+              <span>查看更多职位</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span class="n-more" style="margin-top: 8px">查看更多</span>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import search from '@/components/search.vue'
+import Frame376 from '@/assets/img/Frame376.png'
+import Frame377 from '@/assets/img/Frame377.png'
+import Frame378 from '@/assets/img/Frame378.png'
+import Frame379 from '@/assets/img/Frame379.png'
+import Frame380 from '@/assets/img/Frame380.png'
+import Frame515 from '@/assets/img/Frame515.png'
+import Frame381 from '@/assets/img/Frame381.png'
+import Frame382 from '@/assets/img/Frame382.png'
+
+const menuList = [
+  {
+    index: 0,
+    name: '销售|客服|采购|淘宝'
+  },
+  {
+    index: 1,
+    name: '人力|行政|管理'
+  },
+  {
+    index: 2,
+    name: '网络|通信|电子|电气'
+  },
+  {
+    index: 3,
+    name: '市场|媒介|广告|设计'
+  },
+  {
+    index: 4,
+    name: '建筑|物业|农林牧渔|其他'
+  },
+  {
+    index: 5,
+    name: '生活| 服务业|超市|百货'
+  },
+  {
+    index: 6,
+    name: '法律|教育|翻译|出版'
+  },
+  {
+    index: 7,
+    name: '财会 | 金融 | 保险'
+  },
+  {
+    index: 8,
+    name: '医疗 | 制药 | 环保'
+  },
+  {
+    index: 9,
+    name: '珠宝/奢侈品/收藏品/工艺品'
+  }
+]
+
+const streetImgList = [
+  Frame376,
+  Frame377,
+  Frame378,
+  Frame379,
+  Frame380,
+  Frame515,
+  Frame382,
+  Frame381
+]
+
+const tabsList = [
+  { label: '市场', name: 0 },
+  { label: '运营', name: 1 },
+  { label: '销售', name: 2 },
+  { label: '技术', name: 3 },
+  { label: '服务业', name: 4 },
+  { label: '设计', name: 5 },
+  { label: '管理', name: 6 },
+  { label: '人力/财务/行政', name: 7 }
+]
+const activeName = ref(0)
+
+const handleClick = (tab: string) => {}
+
+// 鼠标移入
+const mouseover = (row?: any) => {
+  const jobMenuJob: any = document.querySelector('.job-menu-sub')
+  const jobMenu: any = document.querySelector('.job-menu')
+  jobMenuJob.style.display = 'block'
+  jobMenu.style.borderRadius = '12px 0 0 12px'
+  jobMenuJob.style.borderRadius = '0 12px 12px 0'
+}
+
+// 鼠标离开
+const mouseout = (row?: any) => {
+  const jobMenuJob: any = document.querySelector('.job-menu-sub')
+  const jobMenu: any = document.querySelector('.job-menu')
+  jobMenuJob.style.display = 'none'
+  jobMenu.style.borderRadius = '12px'
+  jobMenuJob.style.borderRadius = '12px'
+}
+</script>
 
-<style scoped></style>
+<style lang="scss" scoped>
+@import url(./index.scss);
+</style>

src/views/specialRecruitment/index.scss

+.special-container {
+  display: flex;
+  justify-content: center;
+  .special-list {
+    width: 1316px;
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 24px;
+    .special-item {
+      position: relative;
+      flex: 0 0 calc((100% - 50px) / 3);
+      margin: 0 25px 25px 0;
+      padding: 12px 12px 24px;
+      box-sizing: border-box;
+      background: #ffffff;
+      border-radius: 12px;
+      border: 1px solid #cccccc;
+
+      &:nth-child(3n) {
+        margin-right: 0;
+      }
+
+      .piece {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: block;
+        width: 56px;
+        height: 34px;
+        line-height: 34px;
+        text-align: center;
+        background: #ff3333;
+        border-radius: 0px 12px 0px 12px;
+        font-size: 16px;
+        font-weight: 400;
+        color: #ffffff;
+      }
+
+      img {
+        border-radius: 12px;
+        display: block;
+        max-width: 100%;
+        margin: auto;
+        margin-bottom: 12px;
+      }
+
+      .special-title {
+        height: 18px;
+        font-size: 18px;
+        font-weight: 400;
+        color: #222222;
+        line-height: 18px;
+        margin-bottom: 12px;
+      }
+
+      .special-detail {
+        font-size: 14px;
+        font-weight: 400;
+        color: #666666;
+        line-height: 14px;
+        margin-bottom: 20px;
+      }
+
+      .special-tag {
+        width: 88px;
+        height: 28px;
+        line-height: 28px;
+        text-align: center;
+        background: #dcecff;
+        border-radius: 4px;
+        background-color: #dcecff;
+        color: #177cfa;
+        font-size: 14px;
+        font-weight: 500;
+      }
+
+      .special-date {
+        font-size: 16px;
+        font-weight: 400;
+        color: #999999;
+      }
+    }
+  }
+}

src/views/specialRecruitment/index.vue

 <template>
-  <div>专题招聘</div>
+  <div class="special-container">
+    <div class="special-list">
+      <div v-for="(item, index) in 9" :key="index" class="special-item">
+        <img src="@/assets/img/Frame690(7).png" width="398" height="280" />
+        <div class="special-title">招商街道海上世界&南海意库“三新”专场</div>
+        <div class="special-detail">劳务对接，携手并肩</div>
+        <div class="flx-justify-between">
+          <span class="special-tag">进入专题</span>
+          <span class="special-date">2024.06.07</span>
+        </div>
+        <span class="piece">招聘</span>
+      </div>
+      <div style="display: flex; justify-content: center; width: 100%; margin-bottom: 12px">
+        <span class="n-more" style="text-align: center">查看更多</span>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts"></script>
 
-<style scoped></style>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

src/views/streetOfficeSpecialTopic/index.scss

@@ -138,18 +138,6 @@
           }
         }
       }
-      .more {
-        display: inline-block;
-        width: 200px;
-        height: 52px;
-        line-height: 52px;
-        background: linear-gradient(90deg, #177cfa 0%, #177cfa 100%);
-        border-radius: 8px;
-        font-size: 20px;
-        font-weight: 500;
-        color: #ffffff;
-        cursor: pointer;
-      }
     }
   }
 }

src/views/streetOfficeSpecialTopic/index.vue

@@ -12,13 +12,13 @@
             南山区位于广东省深圳市中西部，地域由陆地与内伶仃岛、大铲岛、孖洲岛、大矾石岛、小矾石岛组成，地理坐标北纬22°24′～22°39′、东经113°47′～114°01′。行政区域东起车公庙与福田区毗邻，西至南头安乐村、赤尾村与宝安区相连，北靠羊台山与宝安区、龙华区接壤，南临蛇口港、大铲岛和内伶仃岛，东南隔深圳湾与香港元朗比邻，西南隔珠江口与澳门、珠海相望。地形为南北长、东西窄。辖区土地面积185.30平方千米，海岸线长43.7千米。东南距香港元朗5.5千米(直线距离，下同)，东北距惠州61.6千米，西北距东莞61.3千米，西距广州102.4千米，西南距澳门59.1千米。
           </p>
           <div class="content-footer">
-            查看更多<el-icon><DArrowRight /></el-icon>
+            查看更多<el-icon><i-ep-DArrowRight /></el-icon>
           </div>
         </div>
       </div>
 
       <div class="hot-position">
-        <div class="title">热招职位</div>
+        <div class="n-title">热招职位</div>
         <div class="hot-position-list">
           <div v-for="item in 6" :key="item" class="hot-position-item">
             <div class="flx-justify-between">
@@ -34,11 +34,11 @@
             </div>
           </div>
         </div>
-        <span class="more">查看更多</span>
+        <span class="n-more">查看更多</span>
       </div>
 
       <div class="hot-position">
-        <div class="title">辖区企业</div>
+        <div class="n-title">辖区企业</div>
         <div class="hot-position-list">
           <div v-for="item in 6" :key="item" class="hot-position-item enterprise">
             <div class="enterprise-tp">
@@ -66,15 +66,13 @@
             </div>
           </div>
         </div>
-        <span class="more">查看更多</span>
+        <span class="n-more">查看更多</span>
       </div>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
-import { DArrowRight } from '@element-plus/icons-vue'
-</script>
+<script setup lang="ts"></script>
 
 <style lang="scss" scoped>
 @import './index.scss';

src/views/veterans/index.vue

@@ -2,6 +2,9 @@
   <div>退役军人</div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const route = useRoute()
+console.log(route)
+</script>
 
 <style scoped></style>

types/components.d.ts

@@ -8,42 +8,41 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ContentBlock: typeof import('./../src/components/contentBlock.vue')['default']
-    ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCard: typeof import('element-plus/es')['ElCard']
-    ElCarousel: typeof import('element-plus/es')['ElCarousel']
-    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElLink: typeof import('element-plus/es')['ElLink']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
-    ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElTag: typeof import('element-plus/es')['ElTag']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     IEpArrowRight: typeof import('~icons/ep/arrow-right')['default']
+    IEpDArrowRight: typeof import('~icons/ep/d-arrow-right')['default']
     IEpSearch: typeof import('~icons/ep/search')['default']
+    IEpView: typeof import('~icons/ep/view')['default']
     Policy: typeof import('./../src/components/policy.vue')['default']
+    RichTextEditor: typeof import('./../src/components/RichTextEditor.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Search: typeof import('./../src/components/search.vue')['default']
     VerificationCode: typeof import('./../src/components/verificationCode.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

vite.config.ts

@@ -83,13 +83,13 @@ export default defineConfig({
         changeOrigin: true,
         rewrite: path => path.replace(/^\/api2/, '')
       },
-      // '/api': {
-      //   target: 'http://sit.rms.jrit.top',
-      //   changeOrigin: true
-      // },
       '/api': {
         target: 'https://rms.junrunrenli.com',
         changeOrigin: true
+      },
+      '/K3Cloud': {
+        target: 'http://192.168.1.168',
+        changeOrigin: true
       }
     }
   },