添加等级介绍

assets/css/developer/index.scss

@@ -8,7 +8,7 @@
 .block {
   padding: 24px;
   background: #fff;
-   border-radius: 6px;
+  border-radius: 6px;
   margin-bottom: 20px;
 }
 .title {
@@ -161,7 +161,6 @@
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
-
 }
 
 @for $i from 1 through 5 {
@@ -265,6 +264,11 @@
 
 .developer-workbench-user {
   display: flex;
+  
+  overflow: hidden;
+  // &-logined{
+  //   cursor: pointer;
+  // }
 }
 .developer-user-avatar {
   width: 48px;
@@ -286,16 +290,19 @@
   justify-content: space-around;
 }
 .developer-user-name {
-  font-size: 16px;
+  font-size: 12px;
   font-weight: 500;
   color: #0b121a;
-  line-height: 22px;
+  // line-height: 22px;
 }
 .developer-user-level {
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 400;
   color: #828c99;
-  line-height: 20px;
+  // margin-top: 5px;
+  line-height: 1;
+  // line-height: 20px;
+  cursor: pointer;
 }
 
 .user-title {
@@ -695,7 +702,8 @@
 }
 
 .dynamic-link-content {
-  a,span {
+  a,
+  span {
     font-size: 14px;
 
     font-weight: 400;
@@ -745,27 +753,173 @@
   background-image: url("~@/assets/img/developer/ic_ community_praise_s@2x.png");
 }
 
-.arrow_icon{
-  display: inline-block;
-  height:18px;
-  width:18px;
+.arrow_icon {
   position: relative;
-  top: 1px;
-  &::after{
-    content:"";
+  &::after {
+    content: "";
     position: absolute;
-    left:50%;
-    top:50%;
-
-    width:7px;
-    height:7px;
-    border-right: 1px solid #828C99;
-    border-bottom: 1px solid #828C99;
-    transform: rotate(-45deg) translate(-50%,-50%);
+    right: -12px;
+    top: 50%;
+    width: 8px;
+    height: 8px;
+    margin-top: -4px;
+    border-right: 1px solid #828c99;
+    border-bottom: 1px solid #828c99;
+    transform: rotate(-45deg);
   }
 }
 
-.nologin{
+.nologin {
   cursor: pointer;
 }
 
+// 经验等级介绍
+.ma-level-dialog {
+  background: #ffffff;
+  border-radius: 8px !important;
+}
+
+.dev-level-container {
+  display: flex;
+  justify-content: space-between;
+}
+.dev-level-highline {
+  color: #308eff;
+}
+.dev-level-detail {
+  width: 328px;
+  margin-left: 59px;
+}
+.dev-level-introduce {
+  width: 360px;
+  margin-right: 46px;
+  background: #f7f8fa;
+  border-radius: 8px;
+}
+
+.dev-level-info {
+  width: 108px;
+  height: 98px;
+  margin: 0 auto;
+  background: url('"~@/assets/img/developer/level_bg.png') no-repeat 50% 50%;
+  background-size: 100% auto;
+  position: relative;
+}
+.dev-level-info-tips {
+  position: absolute;
+  top: 35px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 16px;
+  font-family: Arial-BoldMT, Arial;
+  font-weight: normal;
+  color: #308eff;
+  line-height: 18px;
+}
+
+.dev-level-line-container {
+  margin-top: 17px;
+  overflow: hidden;
+
+  p {
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #666666;
+    line-height: 22px;
+    margin-top: 6px;
+  }
+}
+
+.dev-level-line {
+  height: 6px;
+  background: #d8d8d8;
+  border-radius: 3px;
+  overflow: hidden;
+  position: relative;
+  span {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    transform: translateX(-100%);
+    transition: all 0.8s;
+    transition-delay: 0.5s;
+    background: #308eff;
+    border-radius: 3px;
+  }
+}
+
+.dev-level-line-left {
+  float: left;
+}
+.dev-level-line-right {
+  float: right;
+}
+
+.dev-level-details-list {
+  margin-top: 31px;
+}
+
+.dev-level-details-item {
+  display: flex;
+  margin-bottom: 12px;
+}
+.dev-level-details-tit {
+  flex: 1;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #000000;
+  line-height: 20px;
+  .label {
+    color: #999999;
+    font-size: 12px;
+    margin-left: 12px;
+  }
+}
+
+.dev-level-introduce-section {
+  margin-left: 20px;
+  margin-right: 20px;
+  padding-top: 40px;
+  &:nth-child(1) {
+    padding-top: 50px;
+  }
+
+  h3 {
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #308eff;
+    line-height: 20px;
+  }
+  p {
+    margin-top: 8px;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #000000;
+    line-height: 22px;
+  }
+}
+.dev-level-table-container {
+  margin-left: 20px;
+  margin-right: 20px;
+  margin-top: 30px;
+}
+.dev-level-table {
+  border-collapse: collapse;
+  width: 100%;
+  background:#fff;
+  th,td{
+    border: 1px solid #ccc;
+    background:#fff;
+    color: #000;
+    height:29px;
+    vertical-align: middle;
+    text-align:left;
+    text-indent: 5px;
+  }
+}

pages/frontend/developer/component/level-introduce.vue

@@ -0,0 +1,212 @@
+<template>
+<div class="dev-level-container">
+    <!-- 等级明细 -->
+    <div class="dev-level-detail">
+        <div class="dev-level-info">
+            <span class="dev-level-info-tips">Lv.{{level}}</span>
+        </div>
+        <div class="dev-level-line-container">
+            <div class="dev-level-line">
+                <span :style="{
+                    'transform': 'translateX(-'+(100-lineW)+'%)'  }"></span>
+            </div>
+            <p class="dev-level-line-left">
+                <span class="dev-level-highline">Lv.{{level}}</span>经验值{{experience}}
+            </p>
+            <p class="dev-level-line-right">
+                升级还需<span class="dev-level-highline">{{experienceDiff}}</span>经验值
+            </p>
+        </div>
+
+        <ul class="dev-level-details-list">
+            <li class="dev-level-details-item">
+                <div class="dev-level-details-tit">
+                    <span>每日打开APP</span>
+                </div>
+                <div class="dev-level-tips">+1</div>
+            </li>
+            <li class="dev-level-details-item">
+                <div class="dev-level-details-tit">
+                    <span>每日发布动态</span>
+                </div>
+                <div class="dev-level-tips">+1</div>
+            </li>
+            <li class="dev-level-details-item">
+                <div class="dev-level-details-tit">
+                    <span>每日发布评论</span>
+                </div>
+                <div class="dev-level-tips">+1</div>
+            </li>
+            <li class="dev-level-details-item">
+                <div class="dev-level-details-tit">
+                    <span>推荐动态</span>
+                </div>
+                <div class="dev-level-tips">+5</div>
+            </li>
+            <li class="dev-level-details-item">
+                <div class="dev-level-details-tit">
+                    <span>实名认证</span>
+                </div>
+                <div class="dev-level-tips">+50</div>
+            </li>
+            <li class="dev-level-details-item">
+                <div class="dev-level-details-tit">
+                    <span>签约开发者</span>
+                </div>
+                <div class="dev-level-tips">+50</div>
+            </li>
+            <li class="dev-level-details-item">
+                <div class="dev-level-details-tit">
+                    <span>技术等级认证</span>
+                </div>
+                <div class="dev-level-tips">+50</div>
+            </li>
+            <li class="dev-level-details-item">
+                <div class="dev-level-details-tit">
+                    <span>发布作品</span>
+                    <span class="label">通过审核+10，删除-10</span>
+                </div>
+                <div class="dev-level-tips">+10</div>
+            </li>
+            <li class="dev-level-details-item">
+                <div class="dev-level-details-tit">
+                    <span>发布课程</span>
+                    <span class="label">通过审核+10，删除-10</span>
+                </div>
+                <div class="dev-level-tips">+10</div>
+            </li>
+            <li class="dev-level-details-item">
+                <div class="dev-level-details-tit">
+                    <span>发布技能</span>
+                    <span class="label">通过审核+10，删除-10</span>
+                </div>
+                <div class="dev-level-tips">+10</div>
+            </li>
+            <li class="dev-level-details-item">
+                <div class="dev-level-details-tit">
+                    <span>发布咨询</span>
+                    <span class="label">通过审核+10，删除-10</span>
+                </div>
+                <div class="dev-level-tips">+10</div>
+            </li>
+            <li class="dev-level-details-item">
+                <div class="dev-level-details-tit">
+                    <span>接单好评</span>
+                </div>
+                <div class="dev-level-tips">+50</div>
+            </li>
+            <li class="dev-level-details-item">
+                <div class="dev-level-details-tit">
+                    <span>接单好评</span>
+                </div>
+                <div class="dev-level-tips">+50</div>
+            </li>
+            <li class="dev-level-details-item">
+                <div class="dev-level-details-tit">
+                    <span>开通会员</span>
+                </div>
+                <div class="dev-level-tips">+50</div>
+            </li>
+        </ul>
+    </div>
+
+    <!-- 等级介绍 -->
+    <div class="dev-level-introduce">
+        <div class="dev-level-introduce-section">
+            <h3>1.什么事经验值</h3>
+            <p>
+                经验值是程序员客栈推出的一种虚拟经验，用户可以使用经验值提升账户等级。
+            </p>
+        </div>
+        <div class="dev-level-introduce-section">
+            <h3>2.如何获取经验值？</h3>
+            <p>
+                你可以通过【每日打开APP】【发布动态】等途径获取奖励，更多经验任务将持续上线，敬请期待。
+            </p>
+        </div>
+        <div class="dev-level-introduce-section">
+            <h3>3.我们会进行反作弊</h3>
+            <p>
+                为保证所有用户的正当权益，我们会严厉打击违法行为。对于恶意盗刷经验的行为，我们将对作弊者进行经验消零。对行为恶劣者，将封禁账户。
+            </p>
+        </div>
+        <div class="dev-level-table-container">
+            <table class="dev-level-table">
+                <tr>
+                    <th>等级</th>
+                    <th>经验值</th>
+                </tr>
+                <tr>
+                    <td>1</td>
+                    <td>50</td>
+                </tr>
+                <tr>
+                    <td>2</td>
+                    <td>100</td>
+                </tr>
+                <tr>
+                    <td>3</td>
+                    <td>300</td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td></td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+    props: {
+        show: {
+            type: Boolean,
+            default: false
+        },
+        level: {
+            type: Number,
+            default: 0
+        },
+        experience: {
+            type: Number,
+            default: 0
+        },
+        experienceDiff: {
+            type: Number,
+            default: 0
+        }
+    },
+
+    watch: {
+        'show': function (val) {
+            if (val) {
+                this.$nextTick(() => {
+                    let total = this.experience + this.experienceDiff
+                    let result = (this.experience / total) * 100
+                    this.lineW = parseInt(result, 10)
+                })
+            } else {
+                this.lineW = 0
+            }
+        }
+    },
+    created() {
+        if (this.show) {
+            this.$nextTick(() => {
+                let total = this.experience + this.experienceDiff
+                let result = (this.experience / total) * 100
+                this.lineW = parseInt(result, 10)
+            })
+        } else {
+            this.lineW = 0
+        }
+    },
+    data() {
+        return {
+            lineW: 0
+        };
+    }
+};
+</script>