公寓端首页人才房屋查询工作台开发

4 months ago · 8b6da09d86
10 changed files with 1179 additions and 61 deletions
--- a/.env.development
+++ b/.env.development
@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 人力发展集团管理系统
+VUE_APP_TITLE =  青岛免租金住房服务平台

 # 开发环境配置
 ENV = 'development'
--- a/.env.production
+++ b/.env.production
@ -1,5 +1,6 @@
 # 页面标题
-VUE_APP_TITLE = 人力发展集团管理系统
+VUE_APP_TITLE = 青岛免租金住房服务平台
+

 # 生产环境配置
 ENV = 'production'
--- a/.gitignore
+++ b/.gitignore
@ -18,6 +18,7 @@ selenium-debug.log
 *.njsproj
 *.sln
 *.local
+.history

 package-lock.json
 yarn.lock
--- a/package.json
+++ b/package.json
@ -48,6 +48,7 @@
    "js-beautify": "1.13.0",
    "js-cookie": "3.0.1",
    "jsencrypt": "3.0.0-rc.1",
+    "normalize.css": "^8.0.1",
    "nprogress": "0.2.0",
    "quill": "1.3.7",
    "screenfull": "5.0.2",
--- a/src/assets/images/antFill-phone.png
+++ b/src/assets/images/antFill-phone.png
--- a/src/assets/styles/common.scss
+++ b/src/assets/styles/common.scss
@ -0,0 +1,996 @@
+.text-overflow {
+  flex-grow: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+// 自定义全局颜色
+.el-primary {
+  color: '';
+}
+
+.el-success {
+  color: '';
+}
+
+.el-warning {
+  color: '';
+}
+
+.el-danger {
+  color: '';
+}
+
+// main盒子间距
+.app-container {
+  padding: 16px;
+}
+
+.el-padding8 {
+  padding: 8px;
+}
+
+.el-padding16 {
+  padding: 16px;
+}
+
+.el-padding24 {
+  padding: 24px;
+}
+
+.el-whiteBg {
+  background-color: #fff;
+}
+
+.el-overflow-hidden {
+  overflow: hidden;
+}
+
+.el-overflow-auto {
+  overflow: auto;
+}
+
+.el-text-center {
+  text-align: center;
+}
+
+.el-no-padding {
+  padding: 0;
+}
+
+.fill-height {
+  height: 100%;
+}
+
+.el-pointer {
+  cursor: pointer;
+}
+
+.el-fr {
+  float: right;
+}
+
+.el-fl {
+  float: left;
+}
+
+// 统一设置页面标题样式
+.el-title {
+  font-size: 14px;
+  font-weight: 550;
+  color: #000;
+}
+
+.el-block {
+  display: block;
+}
+
+.el-flex {
+  display: flex;
+}
+
+.el-flex-grow {
+  flex-grow: 1;
+}
+
+.el-flex-row {
+  flex-direction: row;
+}
+
+.el-flex-column {
+  flex-direction: column;
+}
+
+.vh .el-flex-shark {
+  flex-shrink: 0;
+}
+
+.el-flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.el-flex-column-reverse {
+  flex-direction: column-reverse;
+}
+
+.el-flex-end {
+  justify-content: flex-end;
+}
+
+.el-flex-center {
+  justify-content: center;
+}
+
+.el-flex-y-center {
+  align-items: center;
+}
+
+.el-flex-space-between {
+  justify-content: space-between;
+}
+
+.el-flex-space-around {
+  justify-content: space-around;
+}
+
+// 间距公共样式
+// 用于微调类
+.el-ma-0 {
+  margin: 0;
+}
+
+.el-ma-1 {
+  margin: 4px;
+}
+
+.el-ma-2 {
+  margin: 8px;
+}
+
+.el-ma-3 {
+  margin: 12px;
+}
+
+.el-ma-4 {
+  margin: 16px;
+}
+
+.el-ma-5 {
+  margin: 20px;
+}
+
+.el-ma-6 {
+  margin: 24px;
+}
+
+.el-ma-7 {
+  margin: 28px;
+}
+
+.el-ma-8 {
+  margin: 32px;
+}
+
+.el-ma-9 {
+  margin: 36px;
+}
+
+.el-ma-10 {
+  margin: 40px;
+}
+
+.el-ma-11 {
+  margin: 44px;
+}
+
+.el-ma-12 {
+  margin: 48px;
+}
+
+.el-ma-auto {
+  margin: auto;
+}
+
+.el-mx-0 {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.el-mx-1 {
+  margin-right: 4px;
+  margin-left: 4px;
+}
+
+.el-mx-2 {
+  margin-right: 8px;
+  margin-left: 8px;
+}
+
+.el-mx-3 {
+  margin-right: 12px;
+  margin-left: 12px;
+}
+
+.el-mx-4 {
+  margin-right: 16px;
+  margin-left: 16px;
+}
+
+.el-mx-5 {
+  margin-right: 20px;
+  margin-left: 20px;
+}
+
+.el-mx-5-half {
+  margin-right: 10px;
+  margin-left: 10px;
+}
+
+.el-mx-6 {
+  margin-right: 24px;
+  margin-left: 24px;
+}
+
+.el-mx-7 {
+  margin-right: 28px;
+  margin-left: 28px;
+}
+
+.el-mx-8 {
+  margin-right: 32px;
+  margin-left: 32px;
+}
+
+.el-mx-9 {
+  margin-right: 36px;
+  margin-left: 36px;
+}
+
+.el-mx-10 {
+  margin-right: 40px;
+  margin-left: 40px;
+}
+
+.el-mx-11 {
+  margin-right: 44px;
+  margin-left: 44px;
+}
+
+.el-mx-12 {
+  margin-right: 48px;
+  margin-left: 48px;
+}
+
+.el-mx-auto {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.el-my-0 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.el-my-1 {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+.el-my-2 {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.el-my-3 {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+
+.el-my-4 {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+.el-my-5 {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.el-my-6 {
+  margin-top: 24px;
+  margin-bottom: 24px;
+}
+
+.el-my-7 {
+  margin-top: 28px;
+  margin-bottom: 28px;
+}
+
+.el-my-8 {
+  margin-top: 32px;
+  margin-bottom: 32px;
+}
+
+.el-my-9 {
+  margin-top: 36px;
+  margin-bottom: 36px;
+}
+
+.el-my-10 {
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.el-my-11 {
+  margin-top: 44px;
+  margin-bottom: 44px;
+}
+
+.el-my-12 {
+  margin-top: 48px;
+  margin-bottom: 48px;
+}
+
+.el-my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.el-mt-n1 {
+  margin-top: -4px;
+}
+
+.el-mt-0 {
+  margin-top: 0;
+}
+
+.el-mt-1-half {
+  margin-top: 2px;
+}
+
+.el-mt-1 {
+  margin-top: 4px;
+}
+
+.el-mt-2 {
+  margin-top: 8px;
+}
+
+.el-mt-3 {
+  margin-top: 12px;
+}
+
+.el-mt-4 {
+  margin-top: 16px;
+}
+
+.el-mt-5 {
+  margin-top: 20px;
+}
+
+.el-mt-6 {
+  margin-top: 24px;
+}
+
+.el-mt-7 {
+  margin-top: 28px;
+}
+
+.el-mt-8 {
+  margin-top: 32px;
+}
+
+.el-mt-9 {
+  margin-top: 36px;
+}
+
+.el-mt-10 {
+  margin-top: 40px;
+}
+
+.el-mt-11 {
+  margin-top: 44px;
+}
+
+.el-mt-12 {
+  margin-top: 48px;
+}
+
+.el-mt-auto {
+  margin-top: auto;
+}
+
+.el-mr-0 {
+  margin-right: 0;
+}
+
+.el-mr-1-half {
+  margin-right: 2px;
+}
+
+.el-mr-1 {
+  margin-right: 4px;
+}
+
+.el-mr-2 {
+  margin-right: 8px;
+}
+
+.el-mr-3 {
+  margin-right: 12px;
+}
+
+.el-mr-4 {
+  margin-right: 16px;
+}
+
+.el-mr-5-half {
+  margin-right: 10px;
+}
+
+.el-mr-5 {
+  margin-right: 20px;
+}
+
+.el-mr-6 {
+  margin-right: 24px;
+}
+
+.el-mr-7 {
+  margin-right: 28px;
+}
+
+.el-mr-8 {
+  margin-right: 32px;
+}
+
+.el-mr-9 {
+  margin-right: 36px;
+}
+
+.el-mr-10 {
+  margin-right: 40px;
+}
+
+.el-mr-11 {
+  margin-right: 44px;
+}
+
+.el-mr-12 {
+  margin-right: 48px;
+}
+
+.el-mr-auto {
+  margin-right: auto;
+}
+
+.el-mb-0 {
+  margin-bottom: 0;
+}
+
+.el-mb-1 {
+  margin-bottom: 4px;
+}
+
+.el-mb-2 {
+  margin-bottom: 8px;
+}
+
+.el-mb-3 {
+  margin-bottom: 12px;
+}
+
+.el-mb-4 {
+  margin-bottom: 16px;
+}
+
+.el-mb-5 {
+  margin-bottom: 20px;
+}
+
+.el-mb-6 {
+  margin-bottom: 24px;
+}
+
+.el-mb-7 {
+  margin-bottom: 28px;
+}
+
+.el-mb-8 {
+  margin-bottom: 32px;
+}
+
+.el-mb-9 {
+  margin-bottom: 36px;
+}
+
+.el-mb-10 {
+  margin-bottom: 40px;
+}
+
+.el-mb-11 {
+  margin-bottom: 44px;
+}
+
+.el-mb-12 {
+  margin-bottom: 48px;
+}
+
+.el-mb-auto {
+  margin-bottom: auto;
+}
+
+.el-ml-0 {
+  margin-left: 0;
+}
+
+.el-ml-1-half {
+  margin-left: 2px;
+}
+
+.el-ml-1 {
+  margin-left: 4px;
+}
+
+.el-ml-2-half {
+  margin-left: 6px;
+}
+
+.el-ml-2 {
+  margin-left: 8px;
+}
+
+.el-ml-3 {
+  margin-left: 12px;
+}
+
+.el-ml-4 {
+  margin-left: 16px;
+}
+
+.el-ml-5 {
+  margin-left: 20px;
+}
+
+.el-ml-6 {
+  margin-left: 24px;
+}
+
+.el-ml-7 {
+  margin-left: 28px;
+}
+
+.el-ml-8 {
+  margin-left: 32px;
+}
+
+.el-ml-9 {
+  margin-left: 36px;
+}
+
+.el-ml-10 {
+  margin-left: 40px;
+}
+
+.el-ml-11 {
+  margin-left: 44px;
+}
+
+.el-ml-12 {
+  margin-left: 48px;
+}
+
+.el-ml-auto {
+  margin-left: auto;
+}
+
+.el-pa-0 {
+  padding: 0;
+}
+
+.el-pa-1 {
+  padding: 4px;
+}
+
+.el-pa-2 {
+  padding: 8px;
+}
+
+.el-pa-3 {
+  padding: 12px;
+}
+
+.el-pa-4 {
+  padding: 16px;
+}
+
+.el-pa-5 {
+  padding: 20px;
+}
+
+.el-pa-6 {
+  padding: 24px;
+}
+
+.el-pa-7 {
+  padding: 28px;
+}
+
+.el-pa-8 {
+  padding: 32px;
+}
+
+.el-pa-9 {
+  padding: 36px;
+}
+
+.el-pa-10 {
+  padding: 40px;
+}
+
+.el-pa-11 {
+  padding: 44px;
+}
+
+.el-pa-12 {
+  padding: 48px;
+}
+
+.el-px-0 {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.el-px-1 {
+  padding-right: 4px;
+  padding-left: 4px;
+}
+
+.el-px-2 {
+  padding-right: 8px;
+  padding-left: 8px;
+}
+
+.el-px-3 {
+  padding-right: 12px;
+  padding-left: 12px;
+}
+
+.el-px-4 {
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+.el-px-5 {
+  padding-right: 20px;
+  padding-left: 20px;
+}
+
+.el-px-6 {
+  padding-right: 24px;
+  padding-left: 24px;
+}
+
+.el-px-7 {
+  padding-right: 28px;
+  padding-left: 28px;
+}
+
+.el-px-8 {
+  padding-right: 32px;
+  padding-left: 32px;
+}
+
+.el-px-9 {
+  padding-right: 36px;
+  padding-left: 36px;
+}
+
+.el-px-10 {
+  padding-right: 40px;
+  padding-left: 40px;
+}
+
+.el-px-11 {
+  padding-right: 44px;
+  padding-left: 44px;
+}
+
+.el-px-12 {
+  padding-right: 48px;
+  padding-left: 48px;
+}
+
+.el-py-0 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.el-py-1 {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.el-py-2 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.el-py-3 {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.el-py-4 {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+.el-py-5 {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.el-py-6 {
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+
+.el-py-7 {
+  padding-top: 28px;
+  padding-bottom: 28px;
+}
+
+.el-py-8 {
+  padding-top: 32px;
+  padding-bottom: 32px;
+}
+
+.el-py-9 {
+  padding-top: 36px;
+  padding-bottom: 36px;
+}
+
+.el-py-10 {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+
+.el-py-11 {
+  padding-top: 44px;
+  padding-bottom: 44px;
+}
+
+.el-py-12 {
+  padding-top: 48px;
+  padding-bottom: 48px;
+}
+
+.el-pt-0 {
+  padding-top: 0;
+}
+
+.el-pt-1 {
+  padding-top: 4px;
+}
+
+.el-pt-2 {
+  padding-top: 8px;
+}
+
+.el-pt-3 {
+  padding-top: 12px;
+}
+
+.el-pt-4 {
+  padding-top: 16px;
+}
+
+.el-pt-5 {
+  padding-top: 20px;
+}
+
+.el-pt-6 {
+  padding-top: 24px;
+}
+
+.el-pt-7 {
+  padding-top: 28px;
+}
+
+.el-pt-8 {
+  padding-top: 32px;
+}
+
+.el-pt-9 {
+  padding-top: 36px;
+}
+
+.el-pt-10 {
+  padding-top: 40px;
+}
+
+.el-pt-11 {
+  padding-top: 44px;
+}
+
+.el-pt-12 {
+  padding-top: 48px;
+}
+
+.el-pr-0 {
+  padding-right: 0;
+}
+
+.el-pr-1-half {
+  padding-right: 2px;
+}
+
+.el-pr-1 {
+  padding-right: 4px;
+}
+
+.el-pr-2 {
+  padding-right: 8px;
+}
+
+.el-pr-3 {
+  padding-right: 12px;
+}
+
+.el-pr-4 {
+  padding-right: 16px;
+}
+
+.el-pr-5 {
+  padding-right: 20px;
+}
+
+.el-pr-6 {
+  padding-right: 24px;
+}
+
+.el-pr-7 {
+  padding-right: 28px;
+}
+
+.el-pr-8 {
+  padding-right: 32px;
+}
+
+.el-pr-9 {
+  padding-right: 36px;
+}
+
+.el-pr-10 {
+  padding-right: 40px;
+}
+
+.el-pr-11 {
+  padding-right: 44px;
+}
+
+.el-pr-12 {
+  padding-right: 48px;
+}
+
+.el-pb-0 {
+  padding-bottom: 0;
+}
+
+.el-pb-1 {
+  padding-bottom: 4px;
+}
+
+.el-pb-2 {
+  padding-bottom: 8px;
+}
+
+.el-pb-3 {
+  padding-bottom: 12px;
+}
+
+.el-pb-4 {
+  padding-bottom: 16px;
+}
+
+.el-pb-5 {
+  padding-bottom: 20px;
+}
+
+.el-pb-6 {
+  padding-bottom: 24px;
+}
+
+.el-pb-7 {
+  padding-bottom: 28px;
+}
+
+.el-pb-8 {
+  padding-bottom: 32px;
+}
+
+.el-pb-9 {
+  padding-bottom: 36px;
+}
+
+.el-pb-10 {
+  padding-bottom: 40px;
+}
+
+.el-pb-11 {
+  padding-bottom: 44px;
+}
+
+.el-pb-12 {
+  padding-bottom: 48px;
+}
+
+.el-pl-0 {
+  padding-left: 0;
+}
+
+.el-pl-1-half {
+  padding-left: 2px;
+}
+
+.el-pl-1 {
+  padding-left: 4px;
+}
+
+.el-pl-2 {
+  padding-left: 8px;
+}
+
+.el-pl-3 {
+  padding-left: 12px;
+}
+
+.el-pl-4 {
+  padding-left: 16px;
+}
+
+.el-pl-5 {
+  padding-left: 20px;
+}
+
+.el-pl-6 {
+  padding-left: 24px;
+}
+
+.el-pl-7 {
+  padding-left: 28px;
+}
+
+.el-pl-8 {
+  padding-left: 32px;
+}
+
+.el-pl-9 {
+  padding-left: 36px;
+}
+
+.el-pl-10 {
+  padding-left: 40px;
+}
+
+.el-pl-11 {
+  padding-left: 44px;
+}
+
+.el-pl-12 {
+  padding-left: 48px;
+}
+
+.custom-popover-select {
+  display: none;
+}
+
+.el-select-dropdown__item {
+  width: 100%;
+}
+
+.el-font-size-13 {
+  font-size: 13px;
+}
--- a/src/main.js
+++ b/src/main.js
@ -7,6 +7,8 @@ import './assets/styles/element-variables.scss'

 import '@/assets/styles/index.scss' // global css
 import '@/assets/styles/ruoyi.scss' // ruoyi css
+import "normalize.css";
+import '@/assets/styles/common.scss' // 公共样式
 import App from './App'
 import store from './store'
 import router from './router'
--- a/src/views/components/CommonTitle.vue
+++ b/src/views/components/CommonTitle.vue
@ -0,0 +1,30 @@
+<template>
+  <div class="tit">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CommonTitle',
+};
+</script>
+
+<style scoped lang="scss">
+.tit {
+  position: relative;
+  padding-left: 15px;
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 6px;
+    height: 16px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(71,139,255,1);
+  }
+}
+</style>
--- a/src/views/index.vue
+++ b/src/views/index.vue
@ -1,92 +1,179 @@
 <template>
  <div class="app-container home">
    <el-row :gutter="20">
-      <el-col :sm="24" :lg="12" style="padding-left: 20px">
-        <h2>人力发展集团后台管理</h2>
+      <!-- 左侧 -->
+      <el-col :span="16"
+        ><div class="grid-content-l el-mb-5">
+          <div class="el-flex el-mb-4">
+            <div
+              class="el-flex el-flex-center el-flex-y-center bt-l"
+              :class="{ active: activeTab === 'talent' }"
+              @click="setActive('talent')"
+            >
+              查人才
+            </div>
+            <div
+              class="el-flex el-flex-center el-flex-y-center el-ml-6 bt-r"
+              :class="{ active: activeTab === 'house' }"
+              @click="setActive('house')"
+            >
+              查房屋
+            </div>
+          </div>
+          <!-- 人才显示 -->
+          <div class="el-flex" v-if="activeTab === 'talent'">
+            <el-input
+              placeholder="  输入姓名/联系电话/证件号查询"
+              v-model="input2"
+            >
+            </el-input>
+            <el-button type="primary">查询</el-button>
+          </div>
+          <!-- 房屋显示 -->
+          <div class="el-flex" v-if="activeTab === 'house'">
+            <el-input
+              placeholder="   输入小区名称/楼栋/房间号查询"
+              v-model="input2"
+            >
+            </el-input>
+            <el-button type="primary">查询</el-button>
+          </div>
+        </div>
+        <!-- 工作台 -->
+        <div class="work-content">
+          <CommonTitle>工作台</CommonTitle>
+          <el-row gutter="10" class="el-mt-5">
+            <el-col
+              v-for="(item, index) in workbenchItems"
+              :key="index"
+              :span="4"
+              ><div
+                class="el-flex el-flex-center el-flex-y-center single"
+                :style="{ backgroundColor: item.color }"
+              >
+                <!-- <el-image  style="width:28px; height: 33px" :src="item.icon" ></el-image> -->
+                <img
+                  style="width: 28px; height: 33px"
+                  :src="item.icon"
+                  alt=""
+                />
+                {{ item.label }}
+              </div></el-col
+            >
+          </el-row>
+        </div>
      </el-col>
+
+      <!-- 右侧 -->
+      <el-col :span="8"><div class="grid-content-r">2</div></el-col>
    </el-row>
    <el-divider />
  </div>
 </template>

 <script>
+import { color } from "echarts";
+import CommonTitle from "./components/CommonTitle.vue";
 export default {
  name: "Index",
+  components: {
+    CommonTitle,
+  },
  data() {
    return {
-      // 版本号
-      version: "3.8.8"
+      // 记录当前激活的标签
+      activeTab: "talent",
+      // 工作台数据
+      workbenchItems: [
+        {
+          label: "入住办理",
+          icon: require("../assets/images/antFill-phone.png"),
+          color: "#fbd5d5",
+        },
+        {
+          label: "退房办理",
+          icon: require("../assets/images/antFill-phone.png"),
+          color: "#c2e2f9",
+        },
+        {
+          label: "入住预约",
+          icon: require("../assets/images/antFill-phone.png"),
+          color: "#fbedc8",
+        },
+        {
+          label: "看房预约",
+          icon: require("../assets/images/antFill-phone.png"),
+          color: "#eceeed",
+        },
+        {
+          label: "退房提醒",
+          icon:require("../assets/images/antFill-phone.png"),
+          color: "#fdddf1",
+        },
+        {
+          label: "报修提醒",
+          icon: require("../assets/images/antFill-phone.png"),
+          color: "#fbedc8",
+        },
+      ],
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
-    }
-  }
+    },
+    // 设置当前激活的标签
+    setActive(tab) {
+      console.log(tab);
+
+      this.activeTab = tab;
+    },
+  },
 };
 </script>

 <style scoped lang="scss">
 .home {
-  blockquote {
-    padding: 10px 20px;
-    margin: 0 0 20px;
-    font-size: 17.5px;
-    border-left: 5px solid #eee;
-  }
-  hr {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    border: 0;
-    border-top: 1px solid #eee;
-  }
-  .col-item {
-    margin-bottom: 20px;
-  }
-
-  ul {
-    padding: 0;
-    margin: 0;
+  background-color: #f7f7f7;
+  .grid-content-l {
+    background-color: #fff;
+    padding: 30px 20px;
  }
-
-  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  color: #676a6c;
-  overflow-x: hidden;
-
-  ul {
-    list-style-type: none;
+  .grid-content-r {
+    background-color: #fff;
+    // padding: 30px 20px;
  }
-
-  h4 {
-    margin-top: 0px;
+  .bt-l {
+    width: 104px;
+    height: 40px;
  }
-
-  h2 {
-    margin-top: 10px;
-    font-size: 26px;
-    font-weight: 100;
+  .bt-r {
+    width: 104px;
+    height: 40px;
+    // margin-left: 30px;
  }
-
-  p {
-    margin-top: 10px;
-
-    b {
-      font-weight: 700;
+  .active {
+    background-color: rgba(12, 94, 232, 1);
+    color: rgba(255, 255, 255, 1);
+    font-size: 16px;
+    position: relative;
+    &::after {
+      content: "";
+      position: absolute;
+      left: 50%;
+      bottom: -10px; // 调整下三角位置
+      transform: translateX(-50%);
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-top: 10px solid rgba(12, 94, 232, 1); // 下三角颜色
    }
  }
-
-  .update-log {
-    ol {
-      display: block;
-      list-style-type: decimal;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
-      margin-inline-start: 0;
-      margin-inline-end: 0;
-      padding-inline-start: 40px;
+  .work-content {
+    background-color: #fff;
+    padding-left: 14px ;
+    .single {
+      height: 52px;
    }
  }
 }
 </style>
-
--- a/vue.config.js
+++ b/vue.config.js
@ -7,7 +7,7 @@ function resolve(dir) {

 const CompressionPlugin = require('compression-webpack-plugin')

-const name = process.env.VUE_APP_TITLE || '人力发展集团管理系统' // 网页标题
+const name = process.env.VUE_APP_TITLE || "青岛免租金住房服务平台"; // 网页标题

 const port = process.env.port || process.env.npm_config_port || 80 // 端口