考核评级页面开发

src/views/assessmentRating/index.vue

 <template>
-  <div>
+  <div id="topAnchor">
     <nav-list :list="navList" :current-menu="'/assessmentRating/index'"/>
     <HomeSearch />
-    <div class="learningPlatform-content">
-      考核评级
+    <div class="assessmentRating-content">
+      <div class="assessmentRating-content-first">
+        <div>
+          <div class="suggestionCard" @click="handleToSuggestion">
+            <img class="suggestionImg" :src="suggestion">
+          </div>
+          <div class="codeImg" @click="gotoTop">
+            <img class="backTopImg" :src="backTop">
+          </div>
+        </div>
+      </div>
+      <!-- 第一部分-考核评级简介 -->
+      <div class="assessmentRating">
+        <div class="assessmentRating_title">考核评级简介</div>
+        <div class="assessmentRating_titleDivider"> <el-divider/></div>
+        <div class="assessmentRating_content-first">
+          <img class="el-image" :src="require('@/assets/image/kaoheJieshao.png')">
+        </div>
+      </div>
+      <!-- 第二部分 -->
+      <div class="assessmentRating">
+        <div class="assessmentRating_content-second">
+          <div class="image-content">
+            <div class="image-content-content">
+              <div class="image_span">5000+</div>
+              <div class="image-item">
+                <img class="el-image" :src="require('@/assets/image/kaoheKaopin.png')">
+              </div>
+              <div class="content-span">
+                支撑 5000+ 人次考评
+              </div>
+            </div>
+            <div class="image-content-content">
+              <div class="image_span">85%</div>
+              <div class="image-item">
+                <img :src="require('@/assets/image/kaoheKaopin.png')">
+              </div>
+              <div class="content-span">
+                85%以上获证比例显著高于普通学习者
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 第三部分 -->
+      <div class="assessmentRating">
+        <div class="assessmentRating_content-three">
+          <div class="el-span-content">在线考试系统</div>
+          <div class="el-btn">
+            <el-button class="el-btn-entrance" icon="el-icon-my-message" >评级入口</el-button>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -19,7 +70,8 @@ export default {
   },
   data() {
     return {
-
+      backTop: require('@/assets/image/top.png'),
+      suggestion: require('@/assets/image/suggestion.png')
     }
   },
   computed: {
@@ -31,16 +83,172 @@ export default {
         { menuName: '考核评级', path: '/assessmentRating/index', query: { }},
         { menuName: '合作案例', path: '/collaborationCases/index', query: { }},
         { menuName: '关于我们', path: '/aboutUs/index', query: { }},
-        { menuName: '学习中心', path: '/learningCenter/index', query: { }},
+        { menuName: '学习中心', path: '/learningCenter/index', query: { }}
       ]
       return navArray
     }
+  },
+  methods: {
+    /** 回到顶部*/
+    gotoTop() {
+      document.getElementById('topAnchor').scrollIntoView() // 跳转到顶部
+    },
+    /** 跳转意见反馈页面*/
+    handleToSuggestion() {
+      this.$router.push({
+        path: '/Feedback/index'
+      })
+    }
   }
 }
 </script>
 
 <style scoped lang="scss">
-.learningPlatform-content{
-  height: 400px;
+.assessmentRating-content{
+  //height: 400px;
+  .codeImg{
+    position: fixed;
+    bottom: 300px;
+    right: 50px;
+    z-index: 2;
+    cursor: pointer;
+    width: 50px;
+    height: 50px;
+    .backTopImg{
+      width: 50px;
+      height: 50px;
+    }
+  }
+  .suggestionCard{
+    position: fixed;
+    bottom: 374px;
+    right: 50px;
+    z-index: 2;
+    cursor: pointer;
+    width: 50px;
+    height: 50px;
+    .suggestionImg{
+      width: 50px;
+      height: 50px;
+    }
+  }
+  .assessmentRating {
+    .assessmentRating_title {
+      background: #ffffff;
+      padding-top: 88px;
+      font-size: 40px;
+      font-family: Microsoft YaHei, Microsoft YaHei-700;
+      font-weight: 700;
+      color: #292929;
+      text-align: center;
+    }
+
+    .assessmentRating_titleDivider {
+      background: #ffffff;
+      display: flex;
+      justify-content: center;
+
+      .el-divider--horizontal {
+        width: 70px;
+        height: 4px;
+        background: linear-gradient(90deg, #398cfc, #5ae3fc 100%);
+        border-radius: 4px;
+        margin: 24px 0 64px;
+      }
+    }
+
+    .assessmentRating_content-first {
+      width: 1920px;
+      height: 600px;
+      background-color: #FFFFFF;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .el-image {
+        width: 1200px;
+        height: 525px;
+      }
+    }
+    .assessmentRating_content-second {
+      width: 1920px;
+      height: 700px;
+      background-color: #FFFFFF;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .image-content {
+        padding: 120px;
+        width: 1200px;
+        height: 525px;
+        background-image: url("../../assets/image/Subtract.png");
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        justify-content: space-around;
+        .image-content-content {
+          height: 275px;
+          width: 410px;
+          .image_span {
+            text-align: center;
+            font-size: 48px;
+            font-weight: 900;
+            margin-bottom: 24px;
+          }
+          .image-item {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .el-image {
+              height: 144px;
+              width: 144px;
+            }
+          }
+          .content-span {
+            margin-top: 24px;
+            text-align: center;
+            font-size: 24px;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+    .assessmentRating_content-three {
+      width: 1920px;
+      height: 276px;
+      background-image: url("../../assets/image/kaohexitongbg.png");
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      .el-span-content {
+        font-weight: 500;
+        font-size: 48px;
+        color: #FFFFFF;
+        margin-bottom: 32px;
+      }
+      .el-btn {
+        .el-btn-entrance {
+          width: 200px;
+          height: 60px;
+          color: #3396FF;
+          font-size: 24px;
+          font-weight: 700;
+          border-radius: 8px;
+        }
+      }
+    }
+  }
+}
+/** 自定义按钮icon */
+::v-deep .el-icon-my-message {
+  background: url('../../assets/image/kaoheRukou.png') center no-repeat;
+  width: 24px;
+  height: 24px;
+  float: right;
+  margin-right: 15px;
 }
+::v-deep .el-icon-my-message:before {
+  content: "\e611";
+}
+
 </style>