问题咨询

src/assets/images/my-skill-bg.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1200px" height="88px" viewBox="0 0 1200 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 6</title>
+    <defs>
+        <linearGradient x1="1.72034316%" y1="32.1486669%" x2="100%" y2="32.1486669%" id="linearGradient-1">
+            <stop stop-color="#FEA460" offset="0%"></stop>
+            <stop stop-color="#FB6C59" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-2" x="0" y="0" width="1200" height="88"></rect>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="技能培训" transform="translate(-360.000000, -536.000000)">
+            <g id="编组-6" transform="translate(360.000000, 536.000000)">
+                <mask id="mask-3" fill="white">
+                    <use xlink:href="#path-2"></use>
+                </mask>
+                <use id="矩形备份-19" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+                <ellipse id="椭圆形" fill="#FF5B1C" opacity="0.100000001" mask="url(#mask-3)" cx="157.6" cy="82.3312883" rx="208.8" ry="70.4539877"></ellipse>
+                <ellipse id="椭圆形备份" fill="#FF5B1C" opacity="0.100000001" mask="url(#mask-3)" cx="317.6" cy="-21.8650307" rx="208.8" ry="70.4539877"></ellipse>
+                <ellipse id="椭圆形备份-3" fill="#FF9368" opacity="0.400000006" mask="url(#mask-3)" cx="969.6" cy="141.447853" rx="361.6" ry="122.01227"></ellipse>
+                <path d="M1158.4,107.97546 C1158.4,40.5899441 996.506166,-14.0368098 796.8,-14.0368098 C597.093834,-14.0368098 435.2,40.5899441 435.2,107.97546 C435.2,175.360976 1158.4,175.360976 1158.4,107.97546 Z" id="椭圆形备份-4" fill="#FF9368" opacity="0.400000006" mask="url(#mask-3)"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/images/question-consult-icon.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>形状结合</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="技能培训" transform="translate(-1826.000000, -1453.000000)" fill="#FFFFFF">
+            <g id="编组-4" transform="translate(1810.000000, 1453.712000)">
+                <path d="M59.2880002,0 C61.4971392,-4.33003142e-15 63.2880002,1.790861 63.2880002,4 L63.2880002,42.5760003 C63.2880002,44.7851393 61.4971392,46.5760003 59.2880002,46.5760003 L20.7119998,46.5760003 C18.5028608,46.5760003 16.7119998,44.7851393 16.7119998,42.5760003 L16.7119998,4 C16.7119998,1.790861 18.5028608,4.05812251e-16 20.7119998,0 L59.2880002,0 Z M39.72,31.8080002 C38.84,31.8080002 38.12,32.0880002 37.52,32.6480002 C36.92,33.2080002 36.64,33.9280002 36.64,34.8080002 C36.64,35.6880002 36.92,36.4080002 37.52,36.9680002 C38.12,37.5280002 38.84,37.8480002 39.72,37.8480002 C40.6,37.8480002 41.32,37.5680002 41.92,37.0080002 C42.52,36.4480002 42.84,35.6880002 42.84,34.8080002 C42.84,33.9280002 42.52,33.2080002 41.96,32.6480002 C41.36,32.0880002 40.6,31.8080002 39.72,31.8080002 Z M40.44,8.72800017 C37.48,8.72800017 35.16,9.56800017 33.44,11.2480002 C31.68,12.9280002 30.84,15.2480002 30.84,18.2080002 L35.4,18.2080002 C35.4,16.5280002 35.72,15.2080002 36.4,14.2880002 C37.16,13.1680002 38.4,12.6480002 40.16,12.6480002 C41.52,12.6480002 42.6,13.0080002 43.36,13.7680002 C44.08,14.5280002 44.48,15.5680002 44.48,16.8880002 C44.48,17.8880002 44.12,18.8480002 43.4,19.7280002 L42.92,20.2880002 C40.32,22.6080002 38.76,24.2880002 38.24,25.3680002 C37.68,26.4480002 37.44,27.7680002 37.44,29.2880002 L37.44,29.8480002 L42.04,29.8480002 L42.04,29.2880002 C42.04,28.3280002 42.24,27.4880002 42.64,26.6880002 C43,25.9680002 43.52,25.2880002 44.24,24.6880002 C46.16,23.0080002 47.32,21.9280002 47.68,21.5280002 C48.64,20.2480002 49.16,18.6080002 49.16,16.6080002 C49.16,14.1680002 48.36,12.2480002 46.76,10.8480002 C45.16,9.40800017 43.04,8.72800017 40.44,8.72800017 Z" id="形状结合"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/SkillTraining/SkillTrainingIndex.vue

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-11 17:53:41
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-29 16:55:15
+ * @LastEditTime: 2022-12-20 17:48:08
  * @FilePath: \veterans_client_web\src\views\SkillTraining\SkillTrainingIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
@@ -11,6 +11,42 @@
   <div class="app-main skill-training">
     <BannerBreadcrumb title="技能培训" />
     <div class="app-main-box skill-training-content">
+      <div class="skill-training-content-banner">
+        <div class="left">
+          我的培训
+          <span>学习时长：{{ learnTime || 0 }}小时</span>
+        </div>
+        <div class="right" @click="jumpPage('/personalcenter/skilltraining')">
+          更多>
+        </div>
+      </div>
+      <!-- <div class="skill-training-content-slider">
+        <el-carousel height="200px" :autoplay="false" arrow="never">
+          <el-carousel-item
+            class="stcs-left-item"
+            v-for="(item, index) in classNoticeList"
+            :key="index"
+          >
+            <div class="stcs-left-item-left">
+              <el-image :src="item.img" class="image" fit="cover">
+                <div slot="placeholder" class="image-slot">
+                  加载中<span class="dot">...</span>
+                </div>
+              </el-image>
+            </div>
+            <div class="stcs-left-item-right">
+              <div class="class-name">{{ item.name }}</div>
+              <div class="school-name">{{ item.schoolName }}</div>
+              <div class="description" v-html="item.description"></div>
+              <div class="sign-up">
+                <el-button round class="sign-up-btn" @click="signUp(item.id)"
+                  >报名</el-button
+                >
+              </div>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </div> -->
       <!-- 技能包 -->
       <div
         class="app-main-box-content skill-training-content-package"
@@ -67,6 +103,16 @@
         </div>
       </div>
     </div>
+    <div class="skill-training-chat" @click="openChatPage">
+      <div class="skill-training-chat-icon">
+        <el-image
+          style="width: 33px; height: 33px"
+          :src="require('@/assets/images/question-consult-icon.svg')"
+          fit="fill"
+        />
+      </div>
+      <div class="skill-training-chat-font">问题咨询</div>
+    </div>
   </div>
 </template>
 
@@ -101,14 +147,17 @@ export default {
   computed: {
     ...mapState({
       isLogin: (state) => state.user.isLogin,
+      userInfo: (state) => state.user.userInfo,
     }),
   },
-  created() {
+  mounted() {
     this.getClassNotice();
     this.getPackageList();
-    if (this.isLogin) {
-      this.getDuration();
-    }
+    setTimeout(() => {
+      if (this.isLogin) {
+        this.getDuration();
+      }
+    }, 500);
   },
   methods: {
     /**
@@ -171,7 +220,7 @@ export default {
         ipAddress: "", //IP地址
         typeName: "技能培训关注度", //类型名称 例：学校关注度 、适应性考试等
         typeCode: "JNPXGZD", // 类型编码 例：类型名称首字母缩写(XXGZD)
-        categoryName: item.name, //类别名称 例：XX学校，SS考试
+        categoryName: item?.name, //类别名称 例：XX学校，SS考试
       };
       if (item) {
         jumpPageAuth(path, query, true, params, false);
@@ -192,6 +241,11 @@ export default {
       this.queryParams.pageNum = page;
       this.getPackageList();
     },
+    openChatPage() {
+      window.open(
+        `http://localhost:8080?userID=${this.userInfo.id}&permission=2`
+      );
+    },
   },
 };
 </script>
@@ -200,6 +254,31 @@ export default {
 .skill-training {
   &-content {
     padding-bottom: 30px;
+    &-banner {
+      width: calc(100% - 40px);
+      padding: 0 20px;
+      height: 66px;
+      line-height: 66px;
+      background-image: url("@/assets/images/my-skill-bg.svg");
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      color: #fff;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20px;
+      .left {
+        font-size: 20px;
+        span {
+          font-size: 14px;
+          margin-left: 20px;
+        }
+      }
+      .right {
+        font-size: 14px;
+        cursor: pointer;
+      }
+    }
     &-slider {
       margin-bottom: 20px;
       padding: 0;
@@ -362,5 +441,26 @@ export default {
       }
     }
   }
+  &-chat {
+    position: fixed;
+    bottom: 100px;
+    right: 0;
+    width: 90px;
+    height: 90px;
+    background: #659789;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    &-font {
+      font-size: 13px;
+      color: #fff;
+    }
+    &:hover {
+      opacity: 0.8;
+    }
+  }
 }
 </style>