企业详情/个人中心

package.json

@@ -3,11 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --mode dev",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "serve:dev": "vue-cli-service serve --mode dev",
-    "serve:prod": "vue-cli-service serve --mode prod",
     "build:dev": "vue-cli-service build --mode dev",
     "build:prod": "vue-cli-service build --mode prod"
   },

src/api/AdaptiveTraining/index.js

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-12 17:34:57
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-12 17:36:01
+ * @LastEditTime: 2022-08-15 09:39:06
  * @FilePath: \veterans_client_web\src\api\AdaptiveTraining\index.js
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
  */
@@ -23,3 +23,32 @@ export function getTrainingList(params) {
     params
   })
 }
+
+/**
+ * 获取适应性培训统计
+ * @param {*} params
+ * @returns
+ */
+export function getTrainingTotal(params) {
+  return request({
+    url: '/app/adaptTrainOnline/queryStatus',
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 获取适应性培训线下列表
+ * @param {*} params
+ * @returns
+ */
+export function getOfflineTrainingList(params) {
+  return request({
+    url: '/app/adaptTrainOffline/queryList',
+    method: 'get',
+    headers: {
+      noLoginFlag: true
+    },
+    params
+  })
+}

src/api/CooperativeEnterprise/index.js

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-11 16:31:06
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-11 16:31:06
+ * @LastEditTime: 2022-08-15 17:43:35
  * @FilePath: \veterans_client_web\src\api\CooperativeEnterprise\index.js
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
  */
@@ -23,3 +23,35 @@ export function getCompanyList(params) {
     params
   })
 }
+
+/**
+ * 获取企业详情
+ * @param {*} params
+ * @returns
+ */
+export function getCompanyDetails(params) {
+  return request({
+    url: '/app/company/getDetail/' + params.companyId,
+    method: 'get',
+    headers: {
+      noLoginFlag: true
+    },
+    params
+  })
+}
+
+/**
+ * 获取企业招聘职位
+ * @param {*} params
+ * @returns
+ */
+export function getCompanyPositon(params) {
+  return request({
+    url: '/app/companypost/list/' + params.companyId,
+    method: 'get',
+    headers: {
+      noLoginFlag: true
+    },
+    params
+  })
+}

src/api/Home/index.js

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-10 14:10:36
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-10 17:36:05
+ * @LastEditTime: 2022-08-15 11:02:11
  * @FilePath: \veterans_client_web\src\api\Home\index.js
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
  */
@@ -45,3 +45,4 @@ export function getNoticeList(params) {
   })
 }
 
+

src/api/PersonalCenter/index.js

@@ -0,0 +1,49 @@
+/**
+ * @Description: 个人中心
+ * @Author: 空白格
+ * @Date: 2022-08-15 14:26:14
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-15 14:34:16
+ * @FilePath: \veterans_client_web\src\api\PersonalCenter\index.js
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+ */
+import request from '@/utils/request'
+
+/**
+ * 获取个人信息
+ * @param {*} params
+ * @returns
+ */
+export function getPersonInfoData(params) {
+  return request({
+    url: '/app/memberinfo',
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 获取个人积分
+ * @param {*} params
+ * @returns
+ */
+export function getPersonIntegralData(params) {
+  return request({
+    url: '/app/integral/total',
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 获取个人统计
+ * @param {*} params
+ * @returns
+ */
+export function getPersonStaticisData(params) {
+  return request({
+    url: '/app/memberinfo/getCountResult',
+    method: 'get',
+    params
+  })
+}

src/assets/styles/common.scss

@@ -9,3 +9,189 @@
     }
   }
 }
+.hexagon {
+  background-color: rgba($color: #fff, $alpha: 0.3);
+  -webkit-clip-path: polygon(
+    45% 1.33975%,
+    46.5798% 0.60307%,
+    48.26352% 0.15192%,
+    50% 0%,
+    51.73648% 0.15192%,
+    53.4202% 0.60307%,
+    55% 1.33975%,
+    89.64102% 21.33975%,
+    91.06889% 22.33956%,
+    92.30146% 23.57212%,
+    93.30127% 25%,
+    94.03794% 26.5798%,
+    94.48909% 28.26352%,
+    94.64102% 30%,
+    94.64102% 70%,
+    94.48909% 71.73648%,
+    94.03794% 73.4202%,
+    93.30127% 75%,
+    92.30146% 76.42788%,
+    91.06889% 77.66044%,
+    89.64102% 78.66025%,
+    55% 98.66025%,
+    53.4202% 99.39693%,
+    51.73648% 99.84808%,
+    50% 100%,
+    48.26352% 99.84808%,
+    46.5798% 99.39693%,
+    45% 98.66025%,
+    10.35898% 78.66025%,
+    8.93111% 77.66044%,
+    7.69854% 76.42788%,
+    6.69873% 75%,
+    5.96206% 73.4202%,
+    5.51091% 71.73648%,
+    5.35898% 70%,
+    5.35898% 30%,
+    5.51091% 28.26352%,
+    5.96206% 26.5798%,
+    6.69873% 25%,
+    7.69854% 23.57212%,
+    8.93111% 22.33956%,
+    10.35898% 21.33975%
+  );
+  clip-path: polygon(
+    45% 1.33975%,
+    46.5798% 0.60307%,
+    48.26352% 0.15192%,
+    50% 0%,
+    51.73648% 0.15192%,
+    53.4202% 0.60307%,
+    55% 1.33975%,
+    89.64102% 21.33975%,
+    91.06889% 22.33956%,
+    92.30146% 23.57212%,
+    93.30127% 25%,
+    94.03794% 26.5798%,
+    94.48909% 28.26352%,
+    94.64102% 30%,
+    94.64102% 70%,
+    94.48909% 71.73648%,
+    94.03794% 73.4202%,
+    93.30127% 75%,
+    92.30146% 76.42788%,
+    91.06889% 77.66044%,
+    89.64102% 78.66025%,
+    55% 98.66025%,
+    53.4202% 99.39693%,
+    51.73648% 99.84808%,
+    50% 100%,
+    48.26352% 99.84808%,
+    46.5798% 99.39693%,
+    45% 98.66025%,
+    10.35898% 78.66025%,
+    8.93111% 77.66044%,
+    7.69854% 76.42788%,
+    6.69873% 75%,
+    5.96206% 73.4202%,
+    5.51091% 71.73648%,
+    5.35898% 70%,
+    5.35898% 30%,
+    5.51091% 28.26352%,
+    5.96206% 26.5798%,
+    6.69873% 25%,
+    7.69854% 23.57212%,
+    8.93111% 22.33956%,
+    10.35898% 21.33975%
+  );
+  &-box {
+    width: 100%;
+    height: 100%;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    -webkit-clip-path: polygon(
+      45% 1.33975%,
+      46.5798% 0.60307%,
+      48.26352% 0.15192%,
+      50% 0%,
+      51.73648% 0.15192%,
+      53.4202% 0.60307%,
+      55% 1.33975%,
+      89.64102% 21.33975%,
+      91.06889% 22.33956%,
+      92.30146% 23.57212%,
+      93.30127% 25%,
+      94.03794% 26.5798%,
+      94.48909% 28.26352%,
+      94.64102% 30%,
+      94.64102% 70%,
+      94.48909% 71.73648%,
+      94.03794% 73.4202%,
+      93.30127% 75%,
+      92.30146% 76.42788%,
+      91.06889% 77.66044%,
+      89.64102% 78.66025%,
+      55% 98.66025%,
+      53.4202% 99.39693%,
+      51.73648% 99.84808%,
+      50% 100%,
+      48.26352% 99.84808%,
+      46.5798% 99.39693%,
+      45% 98.66025%,
+      10.35898% 78.66025%,
+      8.93111% 77.66044%,
+      7.69854% 76.42788%,
+      6.69873% 75%,
+      5.96206% 73.4202%,
+      5.51091% 71.73648%,
+      5.35898% 70%,
+      5.35898% 30%,
+      5.51091% 28.26352%,
+      5.96206% 26.5798%,
+      6.69873% 25%,
+      7.69854% 23.57212%,
+      8.93111% 22.33956%,
+      10.35898% 21.33975%
+    );
+    clip-path: polygon(
+      45% 1.33975%,
+      46.5798% 0.60307%,
+      48.26352% 0.15192%,
+      50% 0%,
+      51.73648% 0.15192%,
+      53.4202% 0.60307%,
+      55% 1.33975%,
+      89.64102% 21.33975%,
+      91.06889% 22.33956%,
+      92.30146% 23.57212%,
+      93.30127% 25%,
+      94.03794% 26.5798%,
+      94.48909% 28.26352%,
+      94.64102% 30%,
+      94.64102% 70%,
+      94.48909% 71.73648%,
+      94.03794% 73.4202%,
+      93.30127% 75%,
+      92.30146% 76.42788%,
+      91.06889% 77.66044%,
+      89.64102% 78.66025%,
+      55% 98.66025%,
+      53.4202% 99.39693%,
+      51.73648% 99.84808%,
+      50% 100%,
+      48.26352% 99.84808%,
+      46.5798% 99.39693%,
+      45% 98.66025%,
+      10.35898% 78.66025%,
+      8.93111% 77.66044%,
+      7.69854% 76.42788%,
+      6.69873% 75%,
+      5.96206% 73.4202%,
+      5.51091% 71.73648%,
+      5.35898% 70%,
+      5.35898% 30%,
+      5.51091% 28.26352%,
+      5.96206% 26.5798%,
+      6.69873% 25%,
+      7.69854% 23.57212%,
+      8.93111% 22.33956%,
+      10.35898% 21.33975%
+    );
+  }
+}

src/layout/index.vue

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-10 11:30:36
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-11 17:52:08
+ * @LastEditTime: 2022-08-15 12:44:50
  * @FilePath: \veterans_client_web\src\layout\index.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
@@ -25,7 +25,9 @@
             </el-input>
           </div>
           <div class="header-box-right-user" v-if="isLogin">
-            下午好，{{ userInfo.userName }}
+            下午好，<router-link class="link" to="/personalcenter">{{
+              userInfo.userName
+            }}</router-link>
           </div>
           <div class="header-box-right-user" v-else>
             下午好，请<router-link class="link" to="/login">登录</router-link>
@@ -65,7 +67,7 @@ export default {
   computed: {
     ...mapState({
       userInfo: (state) => state.user.userInfo,
-      isLogin: (state) => state.user.isLogin
+      isLogin: (state) => state.user.isLogin,
     }),
   },
   created() {},
@@ -132,6 +134,7 @@ export default {
 .footer {
   background-color: #659789;
   opacity: 0.7;
+  width: 100%;
   height: 100px;
   text-align: center;
   color: #fff;

src/router/index.js

@@ -47,6 +47,17 @@ const routes = [
           title: '合作企业'
         }
       },
+      {
+        path: 'enterprisedetails',
+        name: 'EnterpriseDetailsIndex',
+        component: () =>
+          import(
+            '@/views/CooperativeEnterprise/EnterpriseDetails/EnterpriseDetailsIndex.vue'
+          ),
+        meta: {
+          title: '企业详情'
+        }
+      },
       {
         path: 'cooperativecolleges',
         name: 'CooperativeCollegesIndex',
@@ -89,6 +100,15 @@ const routes = [
         meta: {
           title: '适应性培训'
         }
+      },
+      {
+        path: 'personalcenter',
+        name: 'PersonalCenterIndex',
+        component: () =>
+          import('@/views/PersonalCenter/PersonalCenterIndex.vue'),
+        meta: {
+          title: '我的'
+        }
       }
     ]
   },

src/store/modules/user.js

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-10 13:40:53
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-10 15:19:32
+ * @LastEditTime: 2022-08-15 10:11:14
  * @FilePath: \veterans_client_web\src\store\modules\user.js
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
  */
@@ -12,7 +12,7 @@ import { loginAuthCode, getAuthCode } from "@/api/Login";
 const user = {
   state: {
     token: getToken(),
-    isLogin: false,
+    isLogin: true,
     userInfo: {
       userName: 'xxx'
     }

src/views/AdaptiveTraining/AdaptiveTrainingIndex.vue

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-12 15:23:44
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-12 18:00:48
+ * @LastEditTime: 2022-08-15 10:04:08
  * @FilePath: \veterans_client_web\src\views\AdaptiveTraining\AdaptiveTrainingIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
@@ -35,29 +35,56 @@
               {{ item.label }}
             </div>
           </div>
-          <div class="atsb-total">
-            <div class="atsb-total-item">
-              <p>已看课程</p>
-              <p><span>8</span>个</p>
+          <template v-if="tabCur === 1">
+            <div class="atsb-total">
+              <div class="atsb-total-item">
+                <p>已看课程</p>
+                <p>
+                  <span>{{ trainingTotal.play || 0 }}</span
+                  >个
+                </p>
+              </div>
+              <div class="atsb-total-item">
+                <p>还需观看</p>
+                <p>
+                  <span>{{ trainingTotal.playNot || 0 }}</span
+                  >个
+                </p>
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <div class="atsb-total" v-if="trainingTotal.status === 0">
+              <div class="atsb-total-item">
+                <p>未参加线下培训</p>
+                <p>（注：必须参加线下培训才能通过适应性培训）</p>
+              </div>
             </div>
-            <div class="atsb-total-item">
-              <p>还需观看</p>
-              <p><span>8</span>个</p>
+            <div class="atsb-total" v-else>
+              <div class="atsb-total-item">
+                <p>已参加线下培训</p>
+                <p>（注：必须参加线下培训才能通过适应性培训）</p>
+              </div>
             </div>
-          </div>
+          </template>
         </div>
       </div>
       <!-- 列表 -->
-      <div class="app-main-box-content adaptive-training-list" v-loading="loading" v-if="onlineClassList.length">
-        <el-row :gutter="16">
-          <el-col
-            :xs="24"
-            :sm="24"
-            :md="12"
-            :lg="12"
-            :xl="12"
-            v-for="(item, index) in onlineClassList"
-            :key="index"
+      <template v-if="tabCur === 1">
+        <div
+          class="app-main-box-content adaptive-training-list"
+          v-loading="onlineObj.loading"
+          v-if="onlineObj.list.length"
+        >
+          <el-row :gutter="16">
+            <el-col
+              :xs="24"
+              :sm="24"
+              :md="12"
+              :lg="12"
+              :xl="12"
+              v-for="(item, index) in onlineObj.list"
+              :key="index"
             >
               <div class="adaptive-training-list-item">
                 <div class="left">
@@ -69,30 +96,79 @@
                 </div>
                 <div class="right">
                   <div class="name">{{ item.adaptName }}</div>
-                  <div class="total">共{{ item.amount }}节课，已学完{{ item.finishCount }}节课，学习进度{{ item.finishPercent || 0 }}%</div>
+                  <div class="total">
+                    共{{ item.amount || 0 }}节课，已学完{{
+                      item.finishCount || 0
+                    }}节课，学习进度{{ item.finishPercent || 0 }}%
+                  </div>
                 </div>
               </div>
-            </el-col
-          >
-        </el-row>
-        <div class="pagination" v-if="total">
-          <el-pagination
-            background
-            layout="prev, pager, next"
-            :page-size="queryParams.pageSize"
-            :total="total"
-            @current-change="currentChange"
-          />
+            </el-col>
+          </el-row>
+          <div class="pagination" v-if="onlineObj.total">
+            <el-pagination
+              background
+              layout="prev, pager, next"
+              :page-size="onlineObj.queryParams.pageSize"
+              :total="onlineObj.total"
+              @current-change="onlineCurrentChange"
+            />
+          </div>
         </div>
-      </div>
-      <el-empty description="列表数据为空" v-else></el-empty>
+        <el-empty description="列表数据为空" v-else></el-empty>
+      </template>
+      <template v-else>
+        <div
+          class="app-main-box-content adaptive-training-list"
+          v-loading="offlineObj.loading"
+          v-if="offlineObj.list.length"
+        >
+          <el-row :gutter="16">
+            <el-col
+              :xs="24"
+              :sm="24"
+              :md="12"
+              :lg="12"
+              :xl="12"
+              v-for="(item, index) in offlineObj.list"
+              :key="index"
+            >
+              <div class="adaptive-training-list-item">
+                <div class="offline">
+                  <p class="name">{{ item.adaptName || "-" }}</p>
+                  <div class="bottom">
+                    <div>{{ item.adaptAddress || "-" }}</div>
+                    <div>{{ parseTime(item.createTime) || "-" }}</div>
+                  </div>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <div class="pagination" v-if="offlineObj.total">
+            <el-pagination
+              background
+              layout="prev, pager, next"
+              :page-size="offlineObj.queryParams.pageSize"
+              :total="offlineObj.total"
+              @current-change="offlineCurrentChange"
+            />
+          </div>
+        </div>
+        <el-empty description="列表数据为空" v-else></el-empty>
+      </template>
     </div>
   </div>
 </template>
 
 <script>
 import BannerBreadcrumb from "@/components/BannerBreadcrumb";
-import { getTrainingList } from "@/api/AdaptiveTraining";
+import {
+  getTrainingList,
+  getTrainingTotal,
+  getOfflineTrainingList,
+} from "@/api/AdaptiveTraining";
+import { mapState } from "vuex";
+import { parseTime } from "@/utils/utils";
 export default {
   name: "AdaptiveTrainingIndex",
   components: {
@@ -105,17 +181,45 @@ export default {
         { label: "适应性培训", value: 1 },
         { label: "线下培训", value: 2 },
       ],
-      queryParams: {
-        pageNum: 1,
-        pageSize: 8,
+      // 线上课程
+      onlineObj: {
+        queryParams: {
+          pageNum: 1,
+          pageSize: 8,
+        },
+        loading: false,
+        total: 0,
+        list: [],
+      },
+      // 线下课程
+      offlineObj: {
+        queryParams: {
+          pageNum: 1,
+          pageSize: 8,
+        },
+        loading: false,
+        total: 0,
+        list: [],
+      },
+      trainingTotal: {
+        play: 0,
+        playNot: 0,
+        status: 0,
       },
-      total: 0,
-      onlineClassList: [],
-      loading: false
+      parseTime: parseTime,
     };
   },
+  computed: {
+    ...mapState({
+      isLogin: (state) => state.user.isLogin,
+    }),
+  },
   created() {
     this.getOnlineList();
+    this.getOfflineList();
+    if (this.isLogin) {
+      this.getTrainingTotal();
+    }
   },
   methods: {
     tabClick(item) {
@@ -127,22 +231,57 @@ export default {
      * @returns {any}
      */
     getOnlineList() {
-      this.loading = true
-      getTrainingList(this.queryParams).then((res) => {
-        this.onlineClassList = res.rows;
-        this.total = Number(res.total);
-        this.loading = false
+      this.onlineObj.loading = true;
+      getTrainingList(this.onlineObj.queryParams).then((res) => {
+        this.onlineObj.list = res.rows;
+        this.onlineObj.total = Number(res.total);
+        this.onlineObj.loading = false;
       });
     },
     /**
-     * 分页触发
+     * 线上分页触发
      * @date 2022-08-12
      * @param {any} page
      * @returns {any}
      */
-    currentChange(page) {
-      this.queryParams.pageNum = page;
-      this.getOnlineList()
+    onlineCurrentChange(page) {
+      this.onlineObj.queryParams.pageNum = page;
+      this.getOnlineList();
+    },
+    /**
+     * 获取适应性培训统计
+     * @date 2022-08-15
+     * @returns {any}
+     */
+    getTrainingTotal() {
+      getTrainingTotal().then((res) => {
+        if (res.code === 200) {
+          this.trainingTotal = res.data;
+        }
+      });
+    },
+    /**
+     * 获取线下课程列表
+     * @date 2022-08-15
+     * @returns {any}
+     */
+    getOfflineList() {
+      this.offlineObj.loading = true;
+      getOfflineTrainingList(this.offlineObj.queryParams).then((res) => {
+        this.offlineObj.list = res.rows;
+        this.offlineObj.total = Number(res.total);
+        this.offlineObj.loading = false;
+      });
+    },
+    /**
+     * 线下分页触发
+     * @date 2022-08-15
+     * @param {any} page
+     * @returns {any}
+     */
+    offlineCurrentChange(page) {
+      this.offlineObj.queryParams.pageNum = page;
+      this.getOfflineList();
     },
   },
 };
@@ -275,6 +414,7 @@ export default {
       box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
       padding: 18px 15px;
       cursor: pointer;
+      margin-bottom: 20px;
       .left {
         width: 122px;
         height: 89px;
@@ -297,7 +437,25 @@ export default {
         }
         .total {
           font-size: 14px;
-          color: #6F6F6F;
+          color: #6f6f6f;
+          padding-left: 10px;
+        }
+      }
+      .offline {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        .name {
+          font-size: 20px;
+          color: #424242;
+          line-height: 30px;
+          flex: 1;
+        }
+        .bottom {
+          display: flex;
+          justify-content: space-between;
+          font-size: 14px;
+          color: #6f6f6f;
           padding-left: 10px;
         }
       }

src/views/CooperativeEnterprise/CooperativeEnterpriseIndex.vue

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-11 16:00:30
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-12 09:12:32
+ * @LastEditTime: 2022-08-15 15:23:01
  * @FilePath: \veterans_client_web\src\views\CooperativeEnterprise\CooperativeEnterpriseIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
@@ -30,7 +30,7 @@
                   v-for="(company, cIndex) in companyList"
                   :key="cIndex"
                 >
-                  <div class="company-list-item">
+                  <div class="company-list-item" @click="jumpPage(company)">
                     <div class="company-list-item-left">
                       <el-image
                         class="image"
@@ -164,6 +164,20 @@ export default {
       this.queryParams.pageNum = page;
       this.getList();
     },
+    /**
+     * 跳转至详情
+     * @date 2022-08-15
+     * @returns {any}
+     */
+    jumpPage(company) {
+      console.log(company);
+      this.$router.push({
+        path: '/enterprisedetails',
+        query: {
+          companyId: company.id
+        }
+      })
+    }
   },
   filters: {
     filtersDict(val, list) {

src/views/CooperativeEnterprise/EnterpriseDetails/EnterpriseDetailsIndex.vue

@@ -0,0 +1,567 @@
+<!--
+ * @Description: 企业详情
+ * @Author: 空白格
+ * @Date: 2022-08-15 14:54:50
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-15 18:04:03
+ * @FilePath: \veterans_client_web\src\views\CooperativeEnterprise\EnterpriseDetails\EnterpriseDetailsIndex.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+<template>
+  <div class="app-main enterprise-details">
+    <div class="enterprise-details-header">
+      <div class="enterprise-details-header-box app-main-box">
+        <div class="edhb-left">
+          <div class="edhb-left-logo">
+            <el-avatar
+              shape="square"
+              :size="73"
+              :src="details.logoUrl"
+              @error="errorHandler"
+            >
+              <el-avatar
+                shape="square"
+                :size="73"
+                :src="require('@/assets/images/default-company.png')"
+              ></el-avatar>
+            </el-avatar>
+          </div>
+          <div class="edhb-left-info">
+            <div class="edhb-left-info-name">
+              {{ details.nickName || "-" }}
+            </div>
+          </div>
+        </div>
+        <div class="edhb-right">
+          <div class="edhb-right-item">{{ details.companyName || "-" }}</div>
+          <div class="edhb-right-item">{{ details.scope | filtersDict(companyScopeList) }}</div>
+          <div class="edhb-right-item">{{ details.linkPhone || "-" }}</div>
+          <div class="edhb-right-item position">
+            {{ details.companyAddress || "-" }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="app-main-box enterprise-details-main">
+      <!-- 热招职位 -->
+      <div class="enterprise-details-main-hot">
+        <div class="edmh-header">
+          <h4>热招职位</h4>
+          <div class="edmh-header-view">查看全部职位></div>
+        </div>
+        <div class="edmh-list">
+          <el-row :gutter="26" v-if="hotPositionList.length">
+            <el-col
+              :xs="24"
+              :sm="24"
+              :md="8"
+              :lg="8"
+              :xl="8"
+              v-for="(item, index) in hotPositionList"
+              :key="index"
+            >
+              <div class="edmh-list-item">
+                <div class="edmh-list-item-left">
+                  <div class="elil-item">{{ item.postName }}</div>
+                  <div class="elil-item">
+                    {{ item.areaName || "-" }} | 工作{{
+                      item.workYear || "-"
+                    }}年 |
+                    {{ item.educationBg || "-" }}
+                  </div>
+                  <div class="elil-item">{{ item.companyName || "-" }}</div>
+                </div>
+                <div class="edmh-list-item-right">
+                  <div class="elir-item">
+                    {{ item.lowestSalary || "-" }}K-{{
+                      item.highestSalary || "-"
+                    }}K
+                  </div>
+                  <div class="elir-item">
+                    {{ parseTime(item.createTime, "{y}-{m}-{d}") }}
+                  </div>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <el-empty v-else description="无热招职位数据"></el-empty>
+        </div>
+      </div>
+      <!-- 公司信息 -->
+      <div class="app-main-box-content enterprise-details-main-info">
+        <!-- 公司介绍 -->
+        <div class="edmi-introduce">
+          <h4>公司介绍</h4>
+          <div class="edmi-introduce-content">
+            {{ details.detatil || "-" }}
+          </div>
+        </div>
+        <!-- 公司相册 -->
+        <div class="edmi-album">
+          <h4>公司相册</h4>
+          <div
+            class="edmi-album-list"
+            v-if="
+              details.environmentUrlList && details.environmentUrlList.length
+            "
+          >
+            <el-carousel
+              height="178px"
+              :autoplay="false"
+              arrow="never"
+              indicator-position="none"
+            >
+              <el-carousel-item
+                v-for="(item, Cindex) in details.environmentUrlList"
+                :key="Cindex"
+              >
+                <el-row :gutter="18">
+                  <el-col
+                    :xs="24"
+                    :sm="12"
+                    :md="12"
+                    :lg="6"
+                    :xl="6"
+                    v-for="(img, index) in item"
+                    :key="index"
+                  >
+                    <el-image
+                      :src="img"
+                      class="image"
+                      fit="contain"
+                      :preview-src-list="item"
+                    >
+                      <div slot="placeholder" class="image-slot">
+                        加载图片中<span class="dot">...</span>
+                      </div>
+                    </el-image>
+                  </el-col>
+                </el-row>
+              </el-carousel-item>
+            </el-carousel>
+          </div>
+          <el-empty v-else description="无公司相册数据"></el-empty>
+        </div>
+        <!-- 公司职位 -->
+        <div class="edmi-position">
+          <h4>公司职位</h4>
+          <div
+            class="edmi-position-list"
+            v-loading="positionObj.loading"
+            v-if="positionObj.list.length"
+          >
+            <el-row :gutter="12">
+              <el-col
+                :xs="24"
+                :sm="24"
+                :md="24"
+                :lg="12"
+                :xl="12"
+                v-for="(item, index) in positionObj.list"
+                :key="index"
+              >
+                <div class="edmi-position-list-item">
+                  <div class="logo">
+                    <el-image
+                      class="image"
+                      :src="
+                        item.companyLogoUrl ||
+                        require('@/assets/images/default-company.png')
+                      "
+                    >
+                      <div slot="placeholder" class="image-slot">
+                        加载中<span class="dot">...</span>
+                      </div>
+                      <div slot="error" class="image-slot">
+                        <el-image
+                          class="image"
+                          :src="require('@/assets/images/default-company.png')"
+                        ></el-image>
+                      </div>
+                    </el-image>
+                  </div>
+                  <div class="postinfo">
+                    <div class="postname">{{ item.postName || "-" }}</div>
+                    <div class="condition">
+                      {{
+                        `${item.areaName || "-"} | 工作${
+                          item.workYear || "-"
+                        }年 | ${getEducationLevel(item.educationBg)}`
+                      }}
+                    </div>
+                    <div>{{ item.companyName || "-" }}</div>
+                  </div>
+                  <div class="wages">
+                    <div class="wages-range">
+                      {{ `${item.lowestSalary}K - ${item.highestSalary}K` }}
+                    </div>
+                    <div>{{ parseTime(item.createTime, "{y}-{m}-{d}") }}</div>
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
+            <div class="pagination" v-if="positionObj.total">
+              <el-pagination
+                background
+                layout="prev, pager, next"
+                :page-size="positionObj.queryParams.pageSize"
+                :total="positionObj.total"
+                @current-change="currentChange"
+              >
+              </el-pagination>
+            </div>
+          </div>
+          <el-empty v-else description="无在招职业数据"></el-empty>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  getCompanyDetails,
+  getCompanyPositon,
+} from "@/api/CooperativeEnterprise";
+import { parseTime } from "@/utils/utils";
+import { getDictData } from "@/api/Dict";
+export default {
+  name: "EnterpriseDetailsIndex",
+  data() {
+    return {
+      details: {},
+      parseTime: parseTime,
+      hotPositionList: [],
+      educationList: [],
+      companyTradeList: [],
+      companyScopeList: [],
+      positionObj: {
+        queryParams: {
+          pageNum: 1,
+          pageSize: 8,
+          companyId: undefined,
+        },
+        loading: false,
+        list: [],
+        total: 0,
+      },
+    };
+  },
+  created() {
+    this.getDict();
+    const { companyId } = this.$route.query;
+    if (companyId) {
+      this.getCompanyDetails(companyId);
+      this.positionObj.queryParams.companyId = companyId;
+      this.getPositionList();
+    }
+  },
+  methods: {
+    /**
+     * 获取教育字典
+     * @date 2022-08-11
+     * @returns {any}
+     */
+    getDict() {
+      getDictData({ key: "degr_educ" }).then((res) => {
+        this.educationList = res.data;
+      });
+      getDictData({ key: "company_trade" }).then((res) => {
+        this.companyTradeList = res.data;
+      });
+      getDictData({ key: "company_scope" }).then((res) => {
+        this.companyScopeList = res.data;
+      });
+    },
+    /**
+     * 获取企业详情
+     * @date 2022-08-15
+     * @param {any} companyId
+     * @returns {any}
+     */
+    getCompanyDetails(companyId) {
+      getCompanyDetails({ companyId }).then((res) => {
+        this.details = res?.data;
+        let arr = [],
+          data = res?.data?.environmentUrlList;
+        for (let i = 0; i < data.length; i += 4) {
+          arr.push(data.slice(i, i + 4));
+        }
+        this.details.environmentUrlList = arr;
+        console.log(this.details);
+      });
+    },
+    /**
+     * 加载logo错误触发
+     * @date 2022-08-15
+     * @returns {any}
+     */
+    errorHandler() {
+      return true;
+    },
+    /**
+     * 获取企业职位列表
+     * @date 2022-08-15
+     * @returns {any}
+     */
+    getPositionList() {
+      this.positionObj.loading = true;
+      getCompanyPositon(this.positionObj.queryParams).then((res) => {
+        this.positionObj.list = res.rows;
+        this.positionObj.total = Number(res.total);
+        this.positionObj.loading = false;
+      });
+    },
+    /**
+     * 分页切换触发
+     * @date 2022-08-15
+     * @param {any} page
+     * @returns {any}
+     */
+    currentChange(page) {
+      this.positionObj.queryParams.pageNum = page;
+      this.getPositionList();
+    },
+    /**
+     * 获取教育等级名称
+     * @date 2022-08-11
+     * @param {any} val
+     * @returns {any}
+     */
+    getEducationLevel(val) {
+      let label = "-";
+      this.educationList.forEach((item) => {
+        if (Number(item.text) === Number(val)) {
+          label = item.label;
+        }
+      });
+      return label;
+    },
+  },
+  filters: {
+    filtersDict(val, list) {
+      let label = '-'
+      list.forEach(item => {
+        if (Number(val) === Number(item.text)) {
+          label = item.label
+        }
+      })
+      return label
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.enterprise-details {
+  &-header {
+    background-color: #43565f;
+    &-box {
+      margin: 0 auto;
+      padding: 36px 0;
+      display: flex;
+      justify-content: space-between;
+      .edhb-left {
+        display: flex;
+        &-logo {
+          margin-right: 13px;
+        }
+        &-info {
+          &-name {
+            font-size: 28px;
+            color: #fff;
+            font-family: SourceHanSansCN;
+          }
+        }
+      }
+      .edhb-right {
+        &-item {
+          color: rgba($color: #fff, $alpha: 0.7);
+          font-size: 14px;
+          text-align: right;
+          margin-bottom: 8px;
+        }
+        .position {
+          position: relative;
+          &::before {
+            content: "";
+            display: inline-block;
+            width: 13px;
+            height: 17px;
+            background: url("./../../../assets/images/dingwei.svg") no-repeat
+              center center;
+            background-size: cover;
+            vertical-align: bottom;
+            margin-right: 5px;
+          }
+        }
+      }
+    }
+  }
+  &-main {
+    &-hot {
+      margin-bottom: 20px;
+      .edmh-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        margin-bottom: 18px;
+
+        &-view {
+          color: #858585;
+          font-size: 14px;
+          cursor: pointer;
+        }
+      }
+      h4 {
+        color: #1a1a1a;
+        font-size: 20px;
+      }
+      .edmh-list {
+        &-item {
+          background-color: #fff;
+          padding: 18px 20px;
+          border-radius: 6px;
+          display: flex;
+          justify-content: space-between;
+          cursor: pointer;
+          &:hover {
+            opacity: 0.8;
+          }
+          &-left {
+            .elil-item {
+              color: #919191;
+              font-size: 14px;
+              margin-bottom: 10px;
+              &:first-child {
+                color: #1a1a1a;
+                font-size: 20px;
+              }
+              &:last-child {
+                font-size: 13px;
+              }
+            }
+          }
+          &-right {
+            text-align: right;
+            display: flex;
+            flex-direction: column;
+            .elir-item {
+              font-size: 13px;
+              color: #919191;
+              &:first-child {
+                flex: 1;
+                color: #ee5a0f;
+                font-size: 18px;
+              }
+            }
+          }
+        }
+      }
+    }
+    &-info {
+      padding-bottom: 100px;
+      .edmi-introduce {
+        margin-top: 10px;
+        margin-bottom: 24px;
+        h4 {
+          font-size: 20px;
+          color: #1a1a1a;
+          font-family: SourceHanSansCN;
+          margin-bottom: 10px;
+        }
+        &-content {
+          line-height: 30px;
+          font-size: 14px;
+          color: #6c6c6c;
+        }
+      }
+      .edmi-album {
+        margin-bottom: 24px;
+        h4 {
+          font-size: 20px;
+          color: #1a1a1a;
+          font-family: SourceHanSansCN;
+          margin-bottom: 24px;
+        }
+        &-list {
+          .image {
+            width: 100%;
+            height: 178px;
+          }
+        }
+      }
+      .edmi-position {
+        h4 {
+          font-size: 20px;
+          color: #1a1a1a;
+          font-family: SourceHanSansCN;
+          margin-bottom: 20px;
+        }
+        &-list {
+          &-item {
+            display: flex;
+            padding: 14px 16px;
+            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+            margin-bottom: 20px;
+            cursor: pointer;
+            .logo {
+              width: 61px;
+              height: 61px;
+              border: solid 1px #e2e2e2;
+              border-radius: 4px;
+              margin-right: 15px;
+              .image {
+                width: 100%;
+                height: 100%;
+                border-radius: 4px;
+                border: solid 1px #e2e2e2;
+              }
+            }
+            .postinfo {
+              flex: 1;
+              font-size: 13px;
+              color: #919191;
+              .postname {
+                color: #1a1a1a;
+                font-size: 20px;
+                font-family: SourceHanSansCN;
+                margin-bottom: 2px;
+              }
+              .condition {
+                font-size: 14px;
+                margin-bottom: 2px;
+              }
+            }
+            .wages {
+              display: flex;
+              flex-direction: column;
+              font-size: 13px;
+              color: #919191;
+              &-range {
+                flex: 1;
+                text-align: right;
+                font-family: SourceHanSansCN;
+                color: #ee5a0f;
+                font-size: 18px;
+              }
+            }
+          }
+        }
+        .pagination {
+          text-align: center;
+          margin-top: 20px;
+          :deep(.el-pager .active) {
+            background-color: #ff3939;
+          }
+          :deep(.el-pagination.is-background
+              .el-pager
+              li:not(.disabled).active) {
+            background-color: #ff3939;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/Home/HomeIndex.vue

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-10 11:26:40
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-12 15:25:22
+ * @LastEditTime: 2022-08-15 11:02:25
  * @FilePath: \veterans_client_web\src\views\Home\HomeIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->

src/views/PersonalCenter/PersonalCenterIndex.vue

@@ -0,0 +1,478 @@
+<!--
+ * @Description: 个人中心
+ * @Author: 空白格
+ * @Date: 2022-08-15 10:09:03
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-15 14:49:44
+ * @FilePath: \veterans_client_web\src\views\PersonalCenter\PersonalCenterIndex.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+<template>
+  <div class="app-main personal-center">
+    <div class="personal-center-header">
+      <div class="app-main-box personal-center-header-box">
+        <el-row>
+          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+            <div class="pchb-left">
+              <div class="pchb-left-avatar hexagon">
+                <div
+                  class="pchb-left-avatar-box hexagon-box"
+                  :style="{
+                    backgroundImage: `url('${
+                      userInfo.avatar
+                        ? userInfo.avatar
+                        : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
+                    }')`,
+                  }"
+                ></div>
+              </div>
+              <div class="pchb-left-user">
+                <div class="pchb-left-user-item">
+                  <div class="plui-username">{{ userInfo.name || "-" }}</div>
+                  <div class="plui-integral">
+                    <div class="plui-integral-item">进步<br />积分</div>
+                    <div class="plui-integral-item">
+                      {{ integralTotal || 0 }}
+                    </div>
+                    <div class="plui-integral-item">
+                      <span class="el-icon-arrow-right"></span>
+                    </div>
+                  </div>
+                </div>
+                <div class="pchb-left-user-item">
+                  <div class="plui-auth">
+                    <div class="plui-auth-item">退役军人</div>
+                    <div class="plui-auth-item">
+                      <template v-if="userInfo.auditStatus === 0"
+                        >认证中</template
+                      >
+                      <template v-else-if="userInfo.auditStatus === 2"
+                        >已认证</template
+                      >
+                      <template v-else>
+                        <router-link to="">未认证</router-link>
+                      </template>
+                    </div>
+                  </div>
+                  <div class="plui-train">
+                    <div class="plui-train-item">适应性培训</div>
+                    <div class="plui-train-item">
+                      <template v-if="userInfo.adaptTrainIsPass === 1"
+                        >已通过</template
+                      >
+                      <template v-else>未通过</template>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </el-col>
+          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+            <div class="pchb-right">
+              <div
+                class="pchb-right-item"
+                v-for="(item, index) in statisticsList"
+                :key="index"
+              >
+                <p>{{ item.label }}</p>
+                <p>{{ learnObj[item.key] || 0 }}{{ item.unit }}</p>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <div class="app-main-box personal-center-main">
+      <el-row :gutter="20">
+        <el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
+          <div class="personal-center-main-left">
+            <div
+              class="pcml-item"
+              v-for="(item, index) in menuList"
+              :key="index"
+            >
+              <div class="pcml-item-icon">
+                <el-image :src="item.icon"></el-image>
+              </div>
+              <div class="pcml-item-label">{{ item.label }}</div>
+              <div class="pcml-item-right">
+                <span class="el-icon-arrow-right"></span>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+          <div class="personal-center-main-right">
+            <!-- 附件管理 -->
+            <div class="pcmr-top">
+              <h4>附件管理</h4>
+              <div class="pcmr-top-btn upload-btn">上传简历</div>
+              <div class="pcmr-top-btn make-btn">制作简历</div>
+            </div>
+            <!-- 我的技能培训 -->
+            <div class="pcmr-bottom">
+              <h4>我的技能培训</h4>
+              <div class="pcmr-bottom-list">
+                <template v-if="skillTrainList.length">
+                  <div
+                    class="pcmr-bottom-list-item"
+                    v-for="(item, index) in skillTrainList"
+                    :key="index"
+                  >
+                    <div class="pbli-left">
+                      <el-image
+                        class="image"
+                        :src="
+                          item.img ||
+                          require('@/assets/images/default-news.jpg')
+                        "
+                        fit="fill"
+                      >
+                        <div slot="placeholder" class="image-slot">
+                          加载图片中<span class="dot">...</span>
+                        </div>
+                        <div slot="error" class="image-slot">
+                          <el-image
+                            class="image"
+                            :src="require('@/assets/images/default-news.jpg')"
+                            fit="fill"
+                          ></el-image>
+                        </div>
+                      </el-image>
+                    </div>
+                    <div class="pbli-right">
+                      <div class="pbli-right-item">{{ item.name }}</div>
+                      <div class="pbli-right-item">
+                        培训学校：{{ item.schoolName }}
+                      </div>
+                      <div class="pbli-right-item">
+                        <div>难度：</div>
+                        <div>
+                          <el-rate
+                            v-model="item.difficult"
+                            disabled
+                            text-color="#ff9900"
+                          />
+                        </div>
+                      </div>
+                      <div class="pbli-right-item">
+                        开始时间：{{ item.applyTime }}
+                      </div>
+                      <div class="pbli-right-item">
+                        培训周期：{{ item.cycle || 0 }}个月
+                      </div>
+                    </div>
+                  </div>
+                </template>
+                <template v-else>
+                  <el-empty description="列表数据为空"></el-empty>
+                </template>
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  getPersonInfoData,
+  getPersonIntegralData,
+  getPersonStaticisData,
+} from "@/api/PersonalCenter";
+export default {
+  name: "PersonalCenterIndex",
+  data() {
+    return {
+      userInfo: {},
+      integralTotal: 0,
+      statisticsList: [
+        { label: "技能培训", key: "learnTime", unit: "个" },
+        { label: "学习时长", key: "classCount", unit: "小时" },
+        { label: "获得面试", key: "interviewTimes", unit: "次" },
+      ],
+      learnObj: {},
+      menuList: [
+        {
+          icon: require("@/assets/images/personal-center-icon/jianlitongguo.svg"),
+          label: "我的简历",
+          path: "",
+        },
+        {
+          icon: require("@/assets/images/personal-center-icon/toudimoren.svg"),
+          label: "我的投递",
+          path: "",
+        },
+        {
+          icon: require("@/assets/images/personal-center-icon/mianshi-houxuanren.svg"),
+          label: "我的面试",
+          path: "",
+        },
+        {
+          icon: require("@/assets/images/personal-center-icon/pingjia.svg"),
+          label: "我的评价",
+          path: "",
+        },
+      ],
+      skillTrainList: [],
+    };
+  },
+  created() {
+    this.getPersonInfo();
+    this.getPersonIntegral();
+    this.getPersonStaticis();
+  },
+  methods: {
+    /**
+     * 获取个人信息
+     * @date 2022-08-15
+     * @returns {any}
+     */
+    getPersonInfo() {
+      getPersonInfoData().then((res) => {
+        this.userInfo = res?.data;
+      });
+    },
+    /**
+     * 获取个人积分
+     * @date 2022-08-15
+     * @returns {any}
+     */
+    getPersonIntegral() {
+      getPersonIntegralData().then((res) => {
+        this.integralTotal = res?.data;
+      });
+    },
+    /**
+     * 获取个人统计
+     * @date 2022-08-15
+     * @returns {any}
+     */
+    getPersonStaticis() {
+      getPersonStaticisData().then((res) => {
+        this.learnObj = res?.data;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.personal-center {
+  &-header {
+    width: 100%;
+    background-color: #181c1e;
+    &-box {
+      margin: 0 auto;
+      .pchb-left {
+        padding-top: 30px;
+        display: flex;
+        align-items: center;
+        &-avatar {
+          padding-top: 30px;
+          width: 138px;
+          height: 138px;
+          background-color: rgba($color: #fff, $alpha: 0.7);
+          padding: 7px;
+          margin-right: 20px;
+        }
+        &-user {
+          &-item {
+            display: flex;
+            .plui-username {
+              color: #fff;
+              font-size: 40px;
+              margin-right: 20px;
+              line-height: 40px;
+            }
+            .plui-integral {
+              height: 40px;
+              display: flex;
+              justify-content: space-between;
+              align-content: center;
+              border: solid 3px rgba($color: #fff, $alpha: 0.4);
+              padding: 0 14px;
+              background-image: linear-gradient(
+                270deg,
+                #ff6100 16%,
+                #fe7c02 100%
+              );
+              border-radius: 40px;
+              &-item {
+                color: #fff;
+                &:first-child {
+                  font-size: 11px;
+                  padding: 4px 0;
+                }
+                &:nth-child(2) {
+                  font-size: 30px;
+                  padding: 0 20px;
+                }
+                &:last-child {
+                  line-height: 40px;
+                }
+              }
+            }
+            .plui-auth,
+            .plui-train {
+              display: flex;
+              align-items: center;
+              margin-top: 20px;
+              &-item {
+                color: rgba($color: #fff, $alpha: 0.6);
+                font-size: 16px;
+                &:last-child {
+                  margin-left: 15px;
+                  background-color: rgba($color: #fff, $alpha: 0.4);
+                  padding: 5px 20px;
+                  font-size: 14px;
+                  border-radius: 14px;
+                }
+                a {
+                  text-decoration: none;
+                  color: rgba($color: #fff, $alpha: 0.6);
+                }
+              }
+            }
+            .plui-train {
+              margin-left: 30px;
+            }
+          }
+        }
+      }
+      .pchb-right {
+        height: 160px;
+        padding-bottom: 40px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: flex-end;
+        &-item {
+          text-align: center;
+          margin-left: 60px;
+          color: #fff;
+          font-size: 18px;
+          &:first-child {
+            margin-left: 0;
+          }
+          p {
+            font-family: PingFangSC-Regular;
+          }
+          p:first-child {
+            margin-bottom: 10px;
+            font-weight: 500;
+            font-family: PingFangSC-Medium;
+          }
+        }
+      }
+    }
+  }
+  &-main {
+    &-left {
+      background-color: #fff;
+      padding: 20px 20px 200px;
+      .pcml-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+        border-bottom: 1px solid #d5d5d5;
+        padding: 5px 0 15px;
+        cursor: pointer;
+        &:last-child {
+          border-bottom: none;
+        }
+        &-icon {
+          width: 34px;
+          height: 33px;
+          margin-right: 20px;
+          image {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        &-label {
+          flex: 1;
+          font-size: 24px;
+          color: #333333;
+        }
+      }
+    }
+    &-right {
+      .pcmr-top {
+        background-color: #fff;
+        padding: 20px;
+        margin-bottom: 20px;
+        h4 {
+          color: #1a1a1a;
+          font-size: 26px;
+          font-family: SourceHanSansCN;
+          margin-bottom: 20px;
+        }
+        &-btn {
+          width: 100%;
+          height: 52px;
+          line-height: 52px;
+          text-align: center;
+          font-size: 18px;
+          cursor: pointer;
+        }
+        .upload-btn {
+          background-color: #659789;
+          color: #fff;
+          margin-bottom: 10px;
+        }
+        .make-btn {
+          border: solid 1px #659789;
+          color: #659789;
+          margin-bottom: 30px;
+        }
+      }
+      .pcmr-bottom {
+        background: #fff;
+        padding: 20px 20px 100px;
+        h4 {
+          color: #1a1a1a;
+          font-size: 26px;
+          font-family: SourceHanSansCN;
+          margin-bottom: 20px;
+        }
+        &-list {
+          &-item {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #d5d5d5;
+            margin-bottom: 20px;
+            .pbli-left {
+              width: 110px;
+              height: 104px;
+              border: solid 1px #e0e0e0;
+              border-radius: 5px;
+              margin-right: 15px;
+              .image {
+                width: 98%;
+                height: 100%;
+              }
+            }
+            .pbli-right {
+              &-item {
+                color: #747474;
+                font-size: 14px;
+                display: flex;
+                margin-bottom: 5px;
+                &:first-child {
+                  font-size: 18px;
+                  color: #1a1a1a;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>