2023-6-13

src/components/Reception/Footer.vue

@@ -29,8 +29,6 @@ export default {
   flex-direction: column;
   justify-content: center;
 
-
-
   &__copyright {
     font-size: 13px;
     line-height: 20px;

src/components/Reception/Search.vue

@@ -1,19 +1,45 @@
 <template>
   <div class="search">
-    <div class="search-bar">
-      <el-input placeholder="请输入内容" v-model="inputValue">
-        <template #prepend>
+    <div class="select-bar">
+      <el-dropdown trigger="click" placement="bottom" @command="e => selectValue = e">
+        <el-button type="primary" class="dropdown-button">
+          <div style="display: flex;align-items: center;">
+            <i class="el-icon-search el-icon--left"></i><p class="dropdown-button__text">{{selectValue}}</p><i class="el-icon-arrow-down el-icon--right"></i>
+          </div>
+        </el-button>
+        <template #dropdown>
+          <el-dropdown-menu style="width: 235px;" class="main-drop">
+            <el-dropdown-item command="部门工作职责">
+              <div style="text-align: center">部门工作职责</div>
+            </el-dropdown-item>
+            <el-dropdown-item command="制度文件">
+              <div style="text-align: center">制度文件</div>
+            </el-dropdown-item>
+            <el-dropdown-item command="工作流程">
+              <div style="text-align: center">工作流程</div>
+            </el-dropdown-item>
+            <el-dropdown-item command="岗位工作及标准">
+              <div style="text-align: center">岗位工作及标准</div>
+            </el-dropdown-item>
+            <el-dropdown-item command="表单中心">
+              <div style="text-align: center">表单中心</div>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+
+      <div class="select-bar__blank">
+      </div>
+    </div>
+    <div class="search__bottom">
+      <div class="top">
+        <div class="search__bottom--btn">
           <el-dropdown trigger="click" placement="bottom" @command="e => selectValue = e">
-            <el-button type="primary" class="dropdown-button">
-              <div style="display: flex;align-items: center;">
-                <i class="el-icon-search el-icon--left"></i><p class="dropdown-button__text">{{selectValue}}</p><i class="el-icon-arrow-down el-icon--right"></i>
-              </div>
+            <el-button type="primary" class="dropdown-search-button">
+              <span style="padding-right: 10px;">任意词</span><i class="el-icon-arrow-down el-icon--right"></i>
             </el-button>
             <template #dropdown>
-              <el-dropdown-menu style="width: 235px;">
-                <el-dropdown-item command="部门工作职责">
-                  <div style="text-align: center">部门工作职责</div>
-                </el-dropdown-item>
+              <el-dropdown-menu class="select-drop">
                 <el-dropdown-item command="制度文件">
                   <div style="text-align: center">制度文件</div>
                 </el-dropdown-item>
@@ -29,11 +55,28 @@
               </el-dropdown-menu>
             </template>
           </el-dropdown>
-        </template>
-      </el-input>
-    </div>
-    <div class="search__bottom">
+        </div>
 
+        <div class="search__bottom--input">
+          <el-input placeholder="请输入内容" size="" v-model="inputValue">
+            <template #append>
+              <el-button style="background: #247EC3;color: #fff;border: none;border-bottom-left-radius: 0;border-top-left-radius: 0;">搜 索</el-button>
+            </template>
+          </el-input>
+        </div>
+      </div>
+
+      <div class="bottom">
+        <div class="history__icon">
+          <el-image style="width: 30px;height: 31px" fit="cover" :src="require('@/assets/reception/history-icon.png')"></el-image>
+        </div>
+        <div class="history__word">
+          <div class="history__word--top">常用搜索</div>
+          <div class="history__word--bottom">
+            <span style="cursor: pointer;" v-for="(i, index) in ['奖学金', '集体户口', '助学金', '党建']">{{ i }}{{ index !== 3 ? '&nbsp|&nbsp' : '' }}</span>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -43,7 +86,7 @@ export default {
   data() {
     return {
       selectValue: '搜索内部资料',
-      inputValue: ''
+      inputValue: '',
     }
   },
   methods: {},
@@ -54,7 +97,6 @@ export default {
 <style scoped lang="scss">
 .search {
   width: 100%;
-  height: 295px;
 
   padding: 33px 18.75% 38px 18.75%;
   overflow: hidden;
@@ -73,15 +115,73 @@ export default {
     left: -10px;
   }
 
+  .select-bar {
+    height: 39px;
+    display: flex;
+
+    position: relative;
+    &__blank {
+      background: #fff;
+      flex: 1;
+      border-top-right-radius: 4px;
+    }
+  }
   &__bottom {
     width: 100%;
-    height: 179px;
-    background: url("../../assets/reception/search-bottom-bkg.png");
-    background-repeat: no-repeat;
     background-size: cover;
-    background-position: center;
+    background: url("../../assets/reception/search-bottom-bkg.png") no-repeat center;
+    border-radius: 0 0 4px 4px;
 
+    padding-bottom: 43px;
     position: relative;
+
+    & .top {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      padding: 24px 190px 0 190px;
+
+      .search__bottom--btn {
+
+        & .dropdown-search-button {
+          width: 103px;
+          height: 35px;
+          font-size: 13px;
+          color: #000;
+          background: #fff;
+          border-radius: 6px;
+          border: none;
+
+          margin-right: 13px;
+        }
+      }
+      .search__bottom--input {
+        flex: 1;
+        height: 35px;
+
+        & ::v-deep .el-input__inner {
+          height: 35px !important;
+        }
+        & ::v-deep .el-input-group__append {
+          border: none;
+        }
+      }
+    }
+
+    & .bottom {
+      display: flex;
+      align-items: center;
+
+      padding: 43px 31.58% 0 31.58%;
+
+      & .history__word {
+        font-size: 13px;
+        color: #fff;
+
+        padding-left: 13px;
+      }
+    }
   }
 }
 
@@ -90,10 +190,8 @@ export default {
   background: #376BA3!important;
   color: #fff!important;
   border: none!important;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  border-radius: 4px 0 0 0;
 
-  margin-left: -22px !important;
   padding-left: 29px !important;
   padding-right: 18px !important;
 
@@ -112,22 +210,34 @@ export default {
 
 </style>
 
-<style>
-.el-dropdown-menu[x-placement^=bottom] {
+<style lang="scss">
+.main-drop[x-placement^=bottom] {
   padding: 0!important;
   border: none;
-  transform: translateX(-1px);
+  border-radius: 0 0 4px 4px;
+  margin-top: 0 !important;
+
+  & > li {
+    height: 39px;
+  }
 }
 .el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
   background: #247EC3!important;
   color: #fff!important;
 }
-.el-dropdown-menu > li:nth-child(1):hover {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+.main-drop > li:nth-child(5) {
+  border-radius: 0 0 4px 4px;
+}
+.select-drop[x-placement^=bottom] {
+  padding: 0!important;
+  border: none;
+  border-radius:  6px;
+  margin-top: 10px !important;
+}
+.select-drop > li:nth-child(1) {
+  border-radius: 6px 6px 0 0;
 }
-.el-dropdown-menu > li:nth-child(5):hover {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
+.select-drop > li:nth-child(4) {
+  border-radius: 0 0 6px 6px;
 }
 </style>

src/router/index.js

@@ -63,6 +63,10 @@ export const constantRoutes = [
       {
         path: 'home',
         component: () => import('@/views/reception/home')
+      },
+      {
+        path: 'department',
+        component: () => import('@/views/reception/department')
       }
     ],
     hidden: true

src/views/reception/department/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="department">
+    <div class="container">
+      <div class="title">
+        <div class="title__text">所有部门</div>
+        <el-input placeholder="请输入内容" v-model="input" class="title__input">
+          <template #append>
+            <el-button class="title__input--btn" icon="el-icon-search"></el-button>
+          </template>
+        </el-input>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      input: ''
+    }
+  },
+  methods: {},
+  computed: {},
+}
+</script>
+
+<style scoped lang="scss">
+.department {
+  background: #f8f8f8;
+
+  padding: 31px 18.75%;
+}
+
+.container {
+  background: #fff;
+  border-radius: 2px;
+  box-shadow: 0 0 15px 0 rgba(130,127,126,0.1);
+
+  padding: 24px 23px 59px 22px;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &__text {
+
+      padding-left: 5px;
+    }
+    &__input {
+      width: 207px;
+
+      & ::v-deep .el-input__inner {
+        height: 35px;
+      }
+
+      &--btn {
+        width: 48px;
+        height: 35px;
+        background: #3788D6;
+        color: #fff;
+        border: none;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+}
+</style>

src/views/reception/home/index.vue

@@ -9,11 +9,26 @@
           </div>
 
           <ul class="news__list">
-            <li class="news__list--item">教育部关于公布《高等学校信息公开事项清单》的通知</li>
-            <li class="news__list--item">高等学校信息公开办法（教育部令第29号）</li>
-            <li class="news__list--item">苏州卫生职业技术学院信息公开实施办法（试行）</li>
-            <li class="news__list--item">苏州卫生职业技术学院信息公开实施办法（试行）</li>
-            <li class="news__list--item"> 苏州卫生职业技术学院信息公开实施办法（试行）</li>
+            <li class="news__list--item">
+              <div>教育部关于公布《高等学校信息公开事项清单》的通知</div>
+              <div>2023-05-21</div>
+            </li>
+            <li class="news__list--item">
+              <div>高等学校信息公开办法（教育部令第29号）</div>
+              <div>2023-05-21</div>
+            </li>
+            <li class="news__list--item">
+              <div>苏州卫生职业技术学院信息公开实施办法（试行）</div>
+              <div>2023-05-21</div>
+            </li>
+            <li class="news__list--item">
+              <div>苏州卫生职业技术学院信息公开实施办法（试行）</div>
+              <div>2023-05-21</div>
+            </li>
+            <li class="news__list--item">
+              <div> 苏州卫生职业技术学院信息公开实施办法（试行）</div>
+              <div>2023-05-21</div>
+            </li>
           </ul>
         </el-col>
 
@@ -24,21 +39,111 @@
           </div>
 
           <ul class="news__list">
-
+            <li class="news__list--item">
+              <div>教育部关于公布《高等学校信息公开事项清单》的通知</div>
+              <div>2023-05-21</div>
+            </li>
+            <li class="news__list--item">
+              <div>高等学校信息公开办法（教育部令第29号）</div>
+              <div>2023-05-21</div>
+            </li>
+            <li class="news__list--item">
+              <div>苏州卫生职业技术学院信息公开实施办法（试行）</div>
+              <div>2023-05-21</div>
+            </li>
+            <li class="news__list--item">
+              <div>苏州卫生职业技术学院信息公开实施办法（试行）</div>
+              <div>2023-05-21</div>
+            </li>
+            <li class="news__list--item">
+              <div> 苏州卫生职业技术学院信息公开实施办法（试行）</div>
+              <div>2023-05-21</div>
+            </li>
           </ul>
         </el-col>
       </el-row>
     </div>
+
+    <div class="department">
+      <div class="department__title">
+        <div class="department__title--linear"></div>
+        <div class="department__title--center">
+          <div>部门</div>
+          <div>Department</div>
+        </div>
+        <div class="department__title--linear"></div>
+      </div>
+
+      <div class="department__list">
+        <div v-for="item in 14" class="department__list--item">
+          <div>{{item}}</div>
+        </div>
+        <div class="department__list--item">
+          <div @click="$router.push('/index/department')">更多...</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="label">
+      <div class="label__first">
+        <el-image style="width: 49px;height: 49px;margin-bottom: 29px;"
+                  :src="require('@/assets/reception/icon-light.png')"></el-image>
+        <div>标签</div>
+      </div>
+
+      <div class="label-group"
+           v-for="(group, index) in labelGroup">
+        <div :class="index % 2 ? 'label-group__left--single' : 'label-group__left--complex'">
+          <div v-for="(item, index2) in group.left"
+               :style="{ 'background': labelColor(index2) }"
+               :class="index % 2 ? 'single-item label-item' : 'complex-item label-item'">
+            <p>{{ item }}</p>
+          </div>
+        </div>
+
+        <div class="label-group__right label-item"
+             :style="{ 'background': labelColor(index + 3) }"
+             v-if="group.right">
+          <p>{{ group.right }}</p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {}
+    return {
+      labels: ['学籍管理','人才','补助','培养方案','综合科技','党建工作创新奖','处置','党建工作创新奖','处置','党建工作创新奖','处置'],
+      labelGroup: []
+    }
+  },
+  methods: {
+    labelsHandler() {
+      let groups = Math.ceil(this.labels.length / 4)
+      for(let i = 0; i < groups; i++) {
+        let group = this.labels.slice(i * 4,i * 4 + 4)
+        this.labelGroup.push({
+          left: group.slice(0, 3),
+          right: group[3] ? group[3] : false
+        })
+      }
+      console.log(this.labelGroup)
+    }
+  },
+  computed: {
+    labelColor () {
+      let color = ["#85CBC8", "#67BCE6", "#5F97CA", "#7792C4"]
+
+      return function (index) {
+        return color[index % 4]
+      }
+    }
   },
-  methods: {},
-  computed: {},
+  created() {
+    this.labelsHandler()
+  }
 }
 </script>
 
@@ -95,5 +200,237 @@ export default {
       margin-left: 10px;
     }
   }
+
+
+  &__list {
+
+    padding: 34px 0 0 26px;
+
+    &--item {
+      list-style: none;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      cursor: pointer;
+      transition: all .2ms;
+
+      position: relative;
+
+      &:hover {
+        color: #3c7ac0;
+      }
+      & > div {
+        font-size: 13px;
+
+        &:nth-child(2) {
+          color: #999999;
+        }
+      }
+      &::before {
+        content: "";
+        width: 6px;
+        height: 6px;
+        border-radius: 6px;
+        background: #cad8e4;
+
+        position: absolute;
+        top: calc(50% - 3px);
+        left: -12px;
+      }
+
+      & + li {
+
+        margin-top: 20px;
+      }
+    }
+  }
+}
+
+.department {
+  background: url("../../../assets/reception/department-bkg.png")  no-repeat center;
+  background-size: cover;
+
+  margin-top: 37px;
+  padding: 32px 18.7% 19px 18.7%;
+
+  &__title {
+    display: flex;
+    align-items: center;
+
+
+    &--linear {
+      background: #fff;
+      height: 2px;
+      flex: 1;
+    }
+    &--center {
+      font-weight: 500;
+      font-size: 21px;
+      line-height: 21px;
+      color: #fff;
+      text-align: center;
+      width: 144px;
+
+      margin: 0 14px;
+      position: relative;
+      & > div:nth-child(1) {
+        padding: 2px 0 7px 0;
+      }
+      & > div:nth-child(2) {
+        font-size: 13px;
+        line-height: 13px;
+        color: #B6CEF0;
+
+      }
+
+      &::before {
+        content: "";
+        width: 20px;
+        height: 24px;
+        border-top: 3px solid #fff;
+        border-left: 3px solid #fff;
+
+        position: absolute;
+        top: -3px;
+        left: -3px;
+      }
+      &::after {
+        content: "";
+        width: 20px;
+        height: 24px;
+        border-bottom: 3px solid #fff;
+        border-right: 3px solid #fff;
+
+        position: absolute;
+        bottom: -3px;
+        right: -3px;
+      }
+    }
+  }
+
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+
+    margin-top: 41px;
+
+    &--item {
+      background: #fff;
+      width: 176px;
+      height: 80px;
+      color: #1A5CA3;
+      font-size: 16px;
+      line-height: 80px;
+      text-align: center;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all .2ms;
+
+      margin-bottom: 20px;
+
+      &:hover {
+        color: #fff;
+        background: url("../../../assets/reception/department-item1.png") no-repeat 0 0;
+        background-size: cover;
+      }
+    }
+  }
+}
+
+.label {
+  display: flex;
+  justify-content: space-between;
+
+  padding: 42px 18.7% 39px 18.7%;
+
+  & > div:nth-child(1) {
+    height: 161px;
+    width: 140px;
+    background: #F29D5B;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    & > div {
+      color: #fff;
+      font-size: 16px;
+      font-weight: 500;
+
+    }
+  }
+
+  &-group {
+    flex: 1;
+    display: flex;
+
+    .label-item {
+      flex: 1;
+      color: #fff;
+      font-size: 16px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    &__left--single {
+      flex: 2.2;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-content: space-between;
+
+      .single-item {
+        height: calc(50% - 6px);
+
+        margin-left: 12px;
+      }
+      & > div:only-child {
+        height: 100%;
+      }
+      & > div:nth-last-child(1) {
+        flex-basis: 100%;
+
+      }
+    }
+    &__left--complex {
+      flex: 2.2;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-content: space-between;
+
+      .complex-item {
+        height: calc(50% - 6px);
+
+        margin-left: 12px;
+      }
+      & > div:only-child {
+        height: 100%;
+      }
+      & > div:nth-child(1) {
+        flex-basis: 100%;
+
+      }
+    }
+
+
+    &__right {
+
+      margin-left: 12px;
+    }
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .label-item > p {
+    font-size: 12px;
+    width: 20px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
 }
 </style>

src/views/reception/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="body">
     <navbar></navbar>
 
     <search></search>
@@ -39,6 +39,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.body {
+  background: #fff;
+  min-height: 100vh;
+}
 .fade-in {
   animation: fade-in 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
 }
@@ -63,4 +67,10 @@ export default {
     opacity: 0;
   }
 }
+
+@media screen and (max-width: 900px) {
+  .body {
+    min-width: 900px;
+  }
+}
 </style>