完善zp麻烦的静态页面部分

package.json

@@ -25,6 +25,7 @@
   "devDependencies": {
     "@babel/core": "^7.22.9",
     "@babel/eslint-parser": "^7.22.9",
+    "@iconify-json/ep": "^1.1.12",
     "@typescript-eslint/eslint-plugin": "^6.1.0",
     "@typescript-eslint/parser": "^6.1.0",
     "@vitejs/plugin-vue": "^4.2.3",
@@ -36,6 +37,7 @@
     "terser": "^5.19.2",
     "typescript": "^5.0.2",
     "unplugin-auto-import": "^0.16.6",
+    "unplugin-icons": "^0.16.5",
     "unplugin-vue-components": "^0.25.1",
     "vite": "^4.4.5",
     "vite-plugin-eslint": "^1.8.1",

pnpm-lock.yaml

@@ -614,8 +614,8 @@ packages:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
     dev: true
 
-  /@iconify/utils@2.1.7:
-    resolution: {integrity: sha512-P8S3z/L1LcV4Qem9AoCfVAaTFGySEMzFEY4CHZLkfRj0Fv9LiR+AwjDgrDrzyI93U2L2mg9JHsbTJ52mF8suNw==}
+  /@iconify/utils@2.1.9:
+    resolution: {integrity: sha512-mo+A4n3MwLlWlg1SoSO+Dt6pOPWKElk9sSJ6ZpuzbB9OcjxN8RUWxU3ulPwB1nglErWKRam2x4BAohbYF7FiFA==}
     dependencies:
       '@antfu/install-pkg': 0.1.1
       '@antfu/utils': 0.7.5
@@ -2823,7 +2823,7 @@ packages:
     dependencies:
       '@antfu/install-pkg': 0.1.1
       '@antfu/utils': 0.7.5
-      '@iconify/utils': 2.1.7
+      '@iconify/utils': 2.1.9
       debug: 4.3.4
       kolorist: 1.8.0
       local-pkg: 0.4.3

src/App.vue

-<script setup lang="ts"></script>
-
 <template>
-  <router-view></router-view>
+  <el-config-provider :locale="zhCn">
+    <router-view></router-view>
+  </el-config-provider>
 </template>
 
-<style scoped>
-body {
-  height: 100%;
-  color: #333;
-  font:
-    1em/1.4 'Microsoft Yahei',
-    'PingFang SC',
-    'Avenir',
-    'Segoe UI',
-    'Hiragino Sans GB',
-    'STHeiti',
-    'Microsoft Sans Serif',
-    'WenQuanYi Micro Hei',
-    sans-serif;
-}
-</style>
+<script setup lang="ts">
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+</script>
+
+<style scoped></style>

src/Layout/footer.vue

 <template>
   <div class="footer-container">
-    <h1>Footer</h1>
+    <div class="footer-top">
+      <dl>
+        <dt>企业服务</dt>
+        <dd>职位搜索</dd>
+        <dd>人才搜索</dd>
+      </dl>
+      <dl>
+        <dt>使用与帮助</dt>
+        <dd>用户协议</dd>
+        <dd>使用帮助</dd>
+      </dl>
+      <dl>
+        <dt>关于我们</dt>
+        <dd>深圳市西部人力资源发展有限公司</dd>
+        <dd>深圳市南山区桃园西路287号南山人才大厦四楼</dd>
+        <dd>联系电话：0755-86218514</dd>
+      </dl>
+      <div class="qrcode">
+        <img height="110" width="110" src="@/assets/XBRLPX.png" />
+        <p>手机版</p>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <p>本网之所有招聘信息及作品，末经南山就业帮同意不得转载</p>
+      <p>
+        <span
+          ><a href="https://beian.miit.gov.cn" target="_blank"
+            >Copyright©2022 南山就业帮 粤ICP20018364号</a
+          ></span
+        >
+        <span>电子营业执照</span>
+        <span>粤公网安备11010502032801</span>
+      </p>
+      <p>
+        <span>人力资源服务许可证</span>
+        <span>网上有害信息举报专区</span>
+      </p>
+    </div>
   </div>
 </template>
 
@@ -8,6 +45,74 @@
 
 <style lang="scss" scoped>
 .footer-container {
-  margin: auto;
+  width: 1200px;
+  height: 100%;
+  margin: 0 auto;
+  box-sizing: border-box;
+
+  .footer-top {
+    position: relative;
+    padding: 35px 0 20px 0;
+    border-bottom: 1px solid #f2f2f2;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    dl {
+      margin-right: 170px;
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 18px;
+      font-family: Source Han Sans CN;
+      color: #333;
+
+      dt {
+        margin-bottom: 40px;
+      }
+
+      dd {
+        margin: 0 0 20px;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 14px;
+        font-family: Source Han Sans CN;
+        color: #999;
+        cursor: pointer;
+      }
+    }
+    .qrcode {
+      position: absolute;
+      top: 35px;
+      right: 0;
+      p {
+        text-align: center;
+        margin-top: 0;
+      }
+    }
+  }
+
+  .footer-bottom {
+    padding: 42px 0 50px 0;
+    box-sizing: border-box;
+    p {
+      margin-bottom: 14px;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 14px;
+      font-family: Source Han Sans CN;
+      color: #999;
+
+      span {
+        margin-right: 48px;
+
+        a {
+          color: rgb(153, 153, 153);
+          text-decoration: none;
+        }
+      }
+    }
+  }
 }
 </style>

src/Layout/headers.vue

@@ -15,7 +15,8 @@
           :key="index"
           class="item"
           :underline="false"
-          href=""
+          :href="item.link"
+          :type="route.fullPath == item.link ? 'primary' : ''"
           target=""
           >{{ item.name }}</el-link
         >
@@ -28,8 +29,10 @@
 </template>
 
 <script lang="ts" setup>
+const route = useRoute()
+
 const tabsList = [
-  { name: '首页', link: '' },
+  { name: '首页', link: '/home' },
   { name: '专题招聘', link: '' },
   { name: '灵活就业', link: '' },
   { name: '在线培训', link: '' },
@@ -56,7 +59,6 @@ const tabsList = [
     text-align: end;
 
     .content {
-      // width: 1200px;
       min-width: 1200px;
       line-height: 30px;
       .slash {

src/Layout/index.vue

@@ -5,18 +5,19 @@
         <Headers />
       </el-header>
       <el-main>
-        <Main />
+        <keep-alive>
+          <router-view></router-view>
+        </keep-alive>
       </el-main>
-      <el-footer>
+      <div class="footer">
         <Footer />
-      </el-footer>
+      </div>
     </el-container>
   </div>
 </template>
 
 <script setup lang="ts">
 import Headers from './headers.vue'
-import Main from './main.vue'
 import Footer from './footer.vue'
 </script>
 
@@ -24,8 +25,9 @@ import Footer from './footer.vue'
 .layout-container {
   background-image: url(https://img2.baidu.com/it/u=622993978,1977535812&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800);
   background-size: cover;
-  background-repeat: no-repeat;
-  height: 100vh;
+  background-color: #f4f6f9;
+  position: relative;
+  width: 100%;
   min-width: 1200px;
 
   .el-header {
@@ -34,9 +36,12 @@ import Footer from './footer.vue'
   }
   .el-main {
     padding: 0;
+    overflow: hidden;
   }
-  .el-footer {
+  .footer {
     padding: 0;
+    width: 100%;
+    background-color: #fff;
   }
 }
 </style>

src/Layout/main.vue

@@ -152,7 +152,6 @@ const mouseout = (row?: any) => {
     }
   }
   .banner-group {
-    // width: 1200px;
     height: 424px;
     display: flex;
     .job-menu {

src/components/search.vue

+<template>
+  <div class="search-group">
+    <el-input v-model="searchValue" placeholder="请输入搜索关键字" class="input-with-select">
+      <template #prepend>
+        <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>
+    </el-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+const searchValue = ref()
+const selectValue = ref()
+</script>
+
+<style lang="scss" scoped>
+.search-group {
+  width: 920px;
+  border-radius: 20px;
+  margin: 40px 0;
+  .el-input {
+    height: 100%;
+    :deep(.el-input__wrapper) {
+      height: 60px;
+    }
+  }
+  .el-input__wrapper :deep(.el-input__inner) {
+    width: 650px;
+    height: 100%;
+    border: none;
+    font-size: 15px;
+  }
+  :deep(.input-with-select .el-input-group__prepend) {
+    width: 70px;
+    height: 100%;
+    padding-left: 40px;
+    border: none;
+    border-bottom-left-radius: 29px;
+    border-top-left-radius: 29px;
+    background-color: #fff;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 60px;
+    font-family: Source Han Sans CN;
+    color: #666;
+    .el-input__wrapper {
+      box-shadow: none;
+
+      &.is-focus {
+        box-shadow: none !important;
+      }
+
+      &:hover {
+        box-shadow: none !important;
+      }
+    }
+    .el-select {
+      border: 0;
+    }
+  }
+  :deep(.input-with-select > .el-input__wrapper) {
+    height: 59px;
+  }
+
+  :deep(.el-input__wrapper) {
+    box-shadow: none;
+    padding: 0 11px;
+    margin-top: 1px;
+
+    &.is-focus {
+      box-shadow: none !important;
+    }
+
+    &:hover {
+      box-shadow: none !important;
+    }
+  }
+  :deep(.el-input-group__append) {
+    padding-right: 45px;
+    border: none;
+    border-bottom-right-radius: 29px;
+    border-top-right-radius: 29px;
+    background-color: #fff;
+  }
+}
+</style>

src/components/verificationCode.vue

+<template>
+  <div>
+    <el-form ref="ruleFormRef" :model="ruleForm" :rules="state.rules">
+      <el-form-item prop="phone">
+        <el-input v-model="ruleForm.phone" placeholder="请输入手机号" :prefix-icon="Iphone">
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="code">
+        <el-row :gutter="20">
+          <el-col :span="16">
+            <el-input v-model="ruleForm.code" placeholder="请输入验证码" :prefix-icon="Tickets">
+            </el-input>
+          </el-col>
+          <el-col :span="6">
+            <el-button :disabled="state.disabled" @click="sendCode">{{ state.btnText }}</el-button>
+          </el-col>
+        </el-row>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" style="width: 100%" @click="phoneLogin">登录</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Iphone, Tickets } from '@element-plus/icons-vue'
+
+const props = defineProps({
+  countDown: {
+    type: Number,
+    default: 60
+  }
+})
+
+const emits = defineEmits(['submit', 'errHandle', 'send'])
+
+let checkPhone = (rule: any, value: any, callback: Function) => {
+  if (!value) {
+    return callback(new Error('手机号不能为空'))
+  } else {
+    let reg = /^1[3|4|5|7|8][0-9]\d{8}$/
+    if (reg.test(value)) {
+      callback()
+    } else {
+      return callback(new Error('请输入正确的手机号'))
+    }
+  }
+}
+const ruleFormRef = ref()
+const ruleForm = ref({
+  phone: '15616168888',
+  code: '1233'
+})
+const state = reactive({
+  rules: {
+    phone: [{ validator: checkPhone, trigger: 'change' }],
+    code: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
+  },
+  disabled: false,
+  btnText: '发送验证码',
+  time: 60
+})
+const phoneLogin = () => {
+  ruleFormRef.value.validate((valid: boolean) => {
+    if (valid) {
+      emits('submit')
+    } else {
+      emits('errHandle')
+    }
+  })
+}
+const sendCode = () => {
+  ruleFormRef.value.validateField('phone', (errorMessage: string) => {
+    if (errorMessage) {
+      ElMessage.error(errorMessage)
+    } else {
+      // 1.时间开始倒数
+      // 2.按钮进入禁用状态
+      // 3.如果倒计时结束 按钮恢复可用状态 按钮文字变为重新发送, 时间重置
+      // 4.倒计时的过程中 按钮文字为 多少s后重新发送
+      let timer = setInterval(() => {
+        state.time--
+        state.btnText = `${state.time}s后重新发送`
+        state.disabled = true
+        if (state.time === 0) {
+          state.disabled = false
+          state.btnText = '重新发送'
+          state.time = props.countDown
+          clearInterval(timer)
+        }
+      }, 1000)
+      emits('send')
+    }
+  })
+}
+//  <verification-code @send="send" @submit="submit" @errHandle="errHandle" />
+// const submit = () => {
+//   ElMessage.success('提交成功')
+// }
+// const errHandle = () => {
+//   ElMessage.error('表单填写有误，请检查')
+// }
+// const send = () => {
+//   ElMessage.info('发送验证码成功')
+// }
+</script>

src/main.ts

@@ -3,6 +3,7 @@ import App from './App.vue'
 
 import router from './routers'
 import store from './stores'
+import '@/styles/reset.scss'
 
 const app = createApp(App)
 

src/mock/job.ts

+const randomJobList = () => {
+  let list = [
+    {
+      id: '@guid',
+      key: '地标',
+      list: [
+        { name: '全深圳', show: true },
+        { name: '南山区', show: false },
+        { name: '罗湖区', show: false },
+        { name: '福田区', show: false },
+        { name: '坪山区', show: false },
+        { name: '盐田区', show: false },
+        { name: '宝安区', show: false },
+        { name: '龙岗区', show: false },
+        { name: '龙华区', show: false },
+        { name: '光明区', show: false },
+        { name: '大鹏新区', show: false },
+        { name: '深汕合作区', show: false }
+      ],
+      isShow: false,
+      show: false
+    }
+  ] as any
+
+  for (let index = 0; index < 6; index++) {
+    if (!index) {
+      list.push({
+        id: '@guid',
+        key: '@ctitle(3,4)',
+        'list|55': [{ name: '@ctitle', show: false }],
+        isShow: true,
+        show: false
+      })
+    } else {
+      list.push({
+        id: '@guid',
+        key: '@ctitle(3,4)',
+        'list|3-8': [{ name: '@ctitle', show: false }],
+        isShow: false,
+        show: false
+      })
+    }
+  }
+  return list
+}
+
+export default [
+  {
+    url: '/api/jobList',
+    methods: 'get',
+    response: () => {
+      return {
+        code: 200,
+        message: 'ok',
+        data: randomJobList()
+      }
+    }
+  }
+]

src/routers/index.ts

 import { createRouter, createWebHistory } from 'vue-router'
+import Layout from '@/Layout/index.vue'
 
 const routes = [
   {
     path: '/',
-    name: 'layout',
-    //使用import可以路由懒加载，如果不使用，太多组件一起加载会造成白屏
-    component: () => import('@/Layout/index.vue')
+    component: Layout,
+    redirect: '/home',
+    children: [
+      {
+        path: '/home',
+        component: () => import('@/views/home/index.vue')
+      },
+      {
+        path: '/job',
+        component: () => import('@/views/job/index.vue')
+      }
+    ]
   }
   //{
   //配置404页面

src/services/api/home.ts

@@ -3,3 +3,7 @@ import request from '@/services'
 export const getUsers = () => {
   return request.get('/getUsers')
 }
+
+export const getJobList = () => {
+  return request.get('/jobList')
+}

src/styles/reset.scss

+/* Reset style sheet */
+
+/* 因为使用富文本编辑器才注释掉，如果你项目没有使用富文本编辑器，可以取消注释 */
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+  border: 0;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  padding: 0;
+  margin: 0;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+  content: '';
+  content: none;
+}
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+/* 解决 h1 标签在 webkit 内核浏览器中文字大小失效问题 */
+:-webkit-any(article, aside, nav, section) h1 {
+  font-size: 2em;
+}

src/views/home/index.vue

 <template>
-  <div class="home-container">home {{ num }}</div>
-  <el-button @click="num++">点击加1</el-button>
+  <div class="main-container">
+    <search />
+    <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="banner-main">
+        <el-carousel height="410px">
+          <el-carousel-item v-for="item in 4" :key="item">
+            <el-image
+              style="width: 100%; height: 100%"
+              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+            />
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+      <div class="home-login">
+        <div class="login">
+          <el-avatar
+            :size="60"
+            :icon="UserFilled"
+            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+          />
+          <text>Hi！欢迎登录！</text>
+          <div class="login-btn">
+            <el-button type="primary">登录</el-button>
+            <el-button>注册</el-button>
+          </div>
+        </div>
+        <div class="headlines">
+          <div class="news-group">
+            <h2>政策公告</h2>
+            <text>更多&nbsp;>></text>
+          </div>
+          <el-scrollbar height="152px">
+            <el-link
+              v-for="item in 10"
+              :key="item"
+              title="关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知"
+              >关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知</el-link
+            >
+          </el-scrollbar>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts" name="index">
-import { getUsers } from '@/services/api/home'
+<script setup lang="ts">
+import { UserFilled } from '@element-plus/icons-vue'
+import search from '@/components/search.vue'
 
-const init = async () => {
-  const res = await getUsers()
-  console.log(res, 'kkk')
+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: '医疗 | 制药 | 环保'
+  }
+]
+
+// 鼠标移开
+const mouseover = (row?: any) => {
+  const jobMenuJob: any = document.querySelector('.job-menu-sub')
+  jobMenuJob.style.display = 'block'
+}
+
+// 鼠标离开
+const mouseout = (row?: any) => {
+  const jobMenuJob: any = document.querySelector('.job-menu-sub')
+  jobMenuJob.style.display = 'none'
 }
-init()
-const num = ref(0)
 </script>
 
 <style lang="scss" scoped>
-.home-container {
-  font-size: 40px;
+.main-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  // overflow: hidden;
+  .banner-group {
+    // width: 1200px;
+    height: 424px;
+    display: flex;
+    .job-menu {
+      width: 238px;
+      height: 410px;
+      position: relative;
+      padding: 16px 0;
+      background-color: #ffffff;
+      border-top-left-radius: 6px;
+      border-bottom-left-radius: 6px;
+      box-sizing: border-box;
+      // background: rgba(79, 90, 102, 0.6);
+      .el-menu {
+        border-right: 0;
+        // background: transparent;
+        .menu-item-title {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .el-menu-item {
+          // color: #ffffff !important;
+          height: 42px;
+        }
+      }
+
+      .job-menu-sub {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 238px;
+        z-index: 10;
+        width: 700px;
+        height: 410px;
+
+        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;
+        }
+      }
+    }
+    .banner-main {
+      width: 700px;
+      height: 410px;
+    }
+    .home-login {
+      width: 262px;
+      height: 410px;
+      display: flex;
+      flex-direction: column;
+
+      .login {
+        width: 100%;
+        height: 184px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: #ffffff;
+        padding: 20px;
+        box-sizing: border-box;
+        margin-bottom: 5px;
+        border-top-right-radius: 6px;
+        text {
+          margin-top: 15px;
+          font-weight: 500;
+        }
+        .login-btn {
+          margin-top: 15px;
+        }
+      }
+      .headlines {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        background-color: #ffffff;
+        border-bottom-right-radius: 6px;
+        // overflow-y: scroll;
+        .news-group {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 12px;
+          h2 {
+            margin: 0;
+            font-weight: 500;
+            font-size: 18px;
+            line-height: 18px;
+            font-family: Source Han Sans CN;
+            color: #333;
+          }
+          text {
+            font-size: 13px;
+            color: #1787fb;
+            cursor: pointer;
+          }
+        }
+        .el-link {
+          height: 22px;
+          margin-bottom: 5px;
+        }
+        :deep(.el-link__inner) {
+          font-family: Source Han Sans CN;
+          display: inline-block;
+          width: 200px; /* 设置宽度 */
+          overflow: hidden; /* 隐藏超出部分 */
+          text-overflow: ellipsis; /* 显示省略号 */
+          white-space: nowrap; /* 阻止文本换行 */
+        }
+      }
+    }
+  }
 }
 </style>

src/views/job/index.vue

+<template>
+  <div class="job-container">
+    <search />
+    <el-card class="screen-group" shadow="never">
+      <div v-for="item in jobList" :key="item.id" class="screen-list">
+        <div class="screen-type">{{ item.key }}：</div>
+        <div class="screen-item" :class="item.show ? 'isShow' : ''">
+          <el-button
+            v-for="(col, i) in item.list"
+            :key="i"
+            :type="col.show ? 'primary' : ''"
+            text
+            @click="change(item, i)"
+            >{{ col.name }}</el-button
+          >
+        </div>
+        <div v-show="item.isShow" class="stretch" @click="collapse(item)">
+          {{ item.show ? '收起' : '更多' }}
+        </div>
+      </div>
+      <div v-show="tagList.length">
+        <el-divider />
+        <div class="tag-list">
+          <div class="tag-left">
+            <div class="tag-type">已选条件：</div>
+            <div class="tag-item">
+              <el-tag
+                v-for="(item, index) in tagList"
+                :key="index"
+                closable
+                @close="close(index)"
+                >{{ item.key + '：' + item.name }}</el-tag
+              >
+            </div>
+          </div>
+          <el-button type="danger" round plain size="small" :icon="Delete" @click="clear"
+            >清空</el-button
+          >
+        </div>
+      </div>
+    </el-card>
+    <el-card shadow="never" style="width: 1200px; margin: 20px 0; border-radius: 8px">
+      <el-link type="primary" :underline="false">综合排序</el-link>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Search, Delete } from '@element-plus/icons-vue'
+import { getJobList } from '@/services/api/home'
+import search from '@/components/search.vue'
+
+const jobList = ref()
+const tagList = ref([] as any)
+
+const collapse = (item: any) => {
+  item.show = !item.show
+}
+const change = (row: any, i: number) => {
+  row.list.map((item: any, index: number) => {
+    if (index === i) {
+      const tag: any = tagList.value.filter((tag: any) => tag.id === row.id)
+      if (index) {
+        if (tag.length) {
+          tagList.value.map((tag: any) => {
+            if (tag.id == row.id) {
+              tag.name = item.name
+            }
+          })
+        } else {
+          tagList.value.push({ id: row.id, key: row.key, name: item.name, type: '' })
+        }
+      } else {
+        if (tag.length) {
+          let Index = 0
+          tagList.value.map((tag: any, tagIndex: number) => {
+            if (tag.id == row.id) {
+              Index = tagIndex
+            }
+          })
+          tagList.value.splice(Index, 1)
+        }
+      }
+      item.show = true
+    } else {
+      item.show = false
+    }
+  })
+}
+
+const clear = () => (tagList.value = [])
+
+const close = (index: number) => {
+  tagList.value.splice(index, 1)
+}
+
+const init = async () => {
+  const res: any = await getJobList()
+  if (res.code === 200) {
+    res.data.map((item: any) => {
+      item.list[0].show = true
+    })
+    jobList.value = res.data
+  }
+}
+
+init()
+</script>
+
+<style lang="scss" scoped>
+.job-container {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-direction: column;
+  align-items: center;
+
+  .screen-group {
+    width: 1200px;
+    border-radius: 8px;
+
+    .screen-list {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      margin-top: 18px;
+      .screen-type {
+        display: inline-block;
+        width: 80px;
+        font-size: 14px;
+        margin-top: 7px;
+      }
+      .screen-item {
+        flex: 1;
+        height: 28px;
+        overflow: hidden;
+        .el-button {
+          margin-left: 0px;
+          margin-right: 8px;
+        }
+      }
+      .isShow {
+        height: auto !important;
+      }
+      .stretch {
+        width: 60px;
+        height: 20px;
+        background-color: #ebe7e7;
+        text-align: center;
+        line-height: 20px;
+        cursor: pointer;
+        border-radius: 2px;
+        color: #888585;
+        margin-top: 7px;
+        font-size: 14px;
+        user-select: none; // 文字不可被选中
+      }
+    }
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    .tag-list {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .tag-left {
+        display: flex;
+        align-items: center;
+        .tag-type {
+          display: inline-block;
+          font-size: 14px;
+          width: 80px;
+        }
+        .tag-item {
+          .el-tag {
+            margin-right: 8px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

types/auto-imports.d.ts

@@ -6,6 +6,8 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
+  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']

types/components.d.ts

@@ -7,13 +7,20 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    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']
+    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']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
     ElFooter: typeof import('element-plus/es')['ElFooter']
+    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']
@@ -24,6 +31,7 @@ declare module 'vue' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
@@ -32,8 +40,11 @@ declare module 'vue' {
     IEpArrowRightBold: typeof import('~icons/ep/arrow-right-bold')['default']
     IEpDocument: typeof import('~icons/ep/document')['default']
     IEpMenu: typeof import('~icons/ep/menu')['default']
+    IEpSearch: typeof import('~icons/ep/search')['default']
     IEpSetting: typeof import('~icons/ep/setting')['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']
   }
 }

vite.config.ts

@@ -17,7 +17,6 @@ import VueSetupExtend from 'vite-plugin-vue-setup-extend'
 import { viteMockServe } from 'vite-plugin-mock'
 import eslintPlugin from 'vite-plugin-eslint'
 
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),