学员端 课程列表

package.json

@@ -11,6 +11,7 @@
     "lint": "eslint --ext .js,.vue src"
   },
   "dependencies": {
+    "awe-dnd": "^0.3.4",
     "axios": "^0.21.1",
     "core-js": "^3.10.1",
     "element-ui": "^2.15.1",
@@ -20,7 +21,8 @@
     "vue": "^2.6.12",
     "vue-i18n": "^8.24.0",
     "vue-router": "^3.5.1",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "wmjh-ui": "file:../wmjh-ui-0.1.0.tgz"
   },
   "devDependencies": {
     "@babel/core": "^7.13.15",

src/api/course.js

@@ -166,3 +166,33 @@ export function GetTreeNodeInfo_BookChapterStruct(data) {
     data
   });
 }
+
+/**
+ * 审核课程学员
+ * @param {Object} data { course_student_id 课程学员绑定ID is_audited 审核 }
+ */
+export function AuditCourseStudent(data) {
+  let params = getRequestParams('teaching-course_manager-AuditCourseStudent');
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_LearnWebSI,
+    params,
+    data
+  });
+}
+
+/**
+ * 得到互动课件内容（展示内容）
+ * @param {Object} data { id 互动课件ID }
+ */
+export function GetCoursewareContent_View(data) {
+  let params = getRequestParams('book-courseware_manager-GetCoursewareContent_View');
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_BookWebSI,
+    params,
+    data
+  });
+}

src/api/list.js

@@ -64,7 +64,7 @@ export function PageQueryOrgTeacherUserList(data) {
  * @param {Object} data
  */
 export function PageQueryCourseStudentList(data) {
-  let params = getRequestParams('teaching-course_manager-PageQueryCourseStudentList');
+  let params = getRequestParams('page_query-PageQueryCourseStudentList');
 
   return request({
     method: 'post',

src/api/select.js

@@ -69,3 +69,29 @@ export function GetFinishStatusList_Course() {
     params
   });
 }
+
+/**
+ * 得到学员课程状态列表
+ */
+export function GetStudentCourseStatusList() {
+  let params = getRequestParams('dict_manager-GetStudentCourseStatusList');
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_FileServer,
+    params
+  });
+}
+
+/**
+ * 得到我的授课教师列表（学员查询自己加入课程的所有授课教师）
+ */
+export function GetMyJoinCourseTeacherList_Student() {
+  let params = getRequestParams('cominfo_query-course_query-GetMyJoinCourseTeacherList_Student');
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_LearnWebSI,
+    params
+  });
+}

src/api/table.js

@@ -34,7 +34,7 @@ export function getCSItemInfoBox(data) {
  * 分页查询我的课程列表
  * @param {Object} data finish_status 完成状态 page_capacity 每页容量 cur_page 当前页码
  */
-export function pageQueryMyCourseList(data) {
+export function PageQueryMyCourseList(data) {
   let params = getRequestParams('teaching-course_manager-PageQueryMyCourseList');
   return request({
     method: 'post',
@@ -43,3 +43,19 @@ export function pageQueryMyCourseList(data) {
     data
   });
 }
+
+/**
+ * 分页查询我加入的课程列表（学员查询自己加入的课程）
+ * @param { Object } data
+ * @returns
+ */
+export function PageQueryMyJoinCourseList_Student(data) {
+  let params = getRequestParams('page_query-PageQueryMyJoinCourseList_Student');
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_LearnWebSI,
+    params,
+    data
+  });
+}

src/components/select/SelectCourse.vue

@@ -2,13 +2,13 @@
   <el-dialog
     class="select-course"
     :visible="dialogVisible"
-    width="900px"
+    width="1000px"
     title="添加课件"
     @close="dialogClose"
   >
     <div>
-      <el-dropdown trigger="click" @command="selectBook">
-        <span class="el-dropdown-link">{{ curBook.book_name }}</span>
+      <el-dropdown trigger="click" placement="top" @command="selectBook">
+        <span class="el-dropdown-link">{{ curBook.book_name }}s</span>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item v-for="item in book_list" :key="item.book_id" :command="item">
             {{ item.book_name }}
@@ -26,7 +26,9 @@
           @curCourse="curCourse"
         />
       </div>
-      <div class="content-container"></div>
+      <div class="content-container">
+        <question :context="context" />
+      </div>
     </div>
 
     <div slot="footer" class="dialog-footer">
@@ -38,7 +40,7 @@
 
 <script>
 import { GetCourseBookListByCSItemID } from '@/api/select';
-import { GetBookChapterStruct } from '@/api/course';
+import { GetBookChapterStruct, GetCoursewareContent_View } from '@/api/course';
 import TreeMenus from './treeMenus.vue';
 
 export default {
@@ -59,7 +61,8 @@ export default {
       curBook: {},
       currentCourse: '',
       book_list: [],
-      nodes: []
+      nodes: [],
+      context: null
     };
   },
   watch: {
@@ -84,8 +87,9 @@ export default {
         this.curBook = book_list[0];
       });
     },
-    curCourse(val) {
+    curCourse(val, is_courseware) {
       this.currentCourse = val;
+      if (is_courseware) this.getCoursewareContent_View();
     },
     GetBookChapterStruct() {
       GetBookChapterStruct({ book_id: this.curBook.book_id }).then(({ nodes }) => {
@@ -94,6 +98,20 @@ export default {
     },
     selectBook(book) {
       this.curBook = book;
+    },
+    getCoursewareContent_View() {
+      GetCoursewareContent_View({ id: this.currentCourse }).then(res => {
+        if (res.content) {
+          this.context = {
+            id: this.currentCourse,
+            ui_type: JSON.parse(res.content).question.ui_type,
+            sort_number: 1,
+            content: JSON.parse(res.content)
+          };
+        } else {
+          this.context = null;
+        }
+      });
     }
   }
 };
@@ -131,6 +149,8 @@ export default {
 
     &-container {
       flex: 7;
+      overflow: auto;
+      padding: 0 8px;
     }
   }
 }

src/components/select/treeMenus.vue

@@ -13,7 +13,7 @@
         <div
           class="tree-node-name"
           :style="{ 'font-weight': depth === 0 || item.nodes ? 700 : 400 }"
-          @click="handleTreeClick(item.is_leaf === 'true', i, item.id)"
+          @click="handleTreeClick(item.is_leaf === 'true', i, item.id, item.is_courseware)"
         >
           <span class="tree-node-name-leaf">
             <i
@@ -62,11 +62,17 @@ export default {
       scopes: []
     };
   },
+  watch: {
+    list: function () {
+      this.scope();
+    }
+  },
   created() {
     this.scope();
   },
   methods: {
     scope() {
+      this.scopesDefault = [];
       this.list.forEach((item, i) => {
         this.scopesDefault[i] = false;
         if ('nodes' in item) {
@@ -76,12 +82,12 @@ export default {
         }
       });
     },
-    curCourse(val) {
-      this.$emit('curCourse', val);
+    curCourse(id, is_courseware) {
+      this.$emit('curCourse', id, is_courseware);
     },
-    handleTreeClick(is_leaf, i, id) {
+    handleTreeClick(is_leaf, i, id, is_courseware) {
       if (is_leaf) {
-        this.curCourse(id);
+        this.curCourse(id, is_courseware);
         return false;
       } else if (this.scopesDefault[i] === true) {
         this.$set(this.scopesDefault, i, false);

src/layouts/components/LayoutHeader.vue

@@ -3,7 +3,7 @@
     <div class="header-container">
       <div class="header-container-left">
         <span class="logo">LOGO</span>
-        <span class="home">主页</span>
+        <router-link to="/" class="home">主页</router-link>
         <span class="menu">
           <el-dropdown placement="top">
             <span class="el-dropdown-link">
@@ -38,9 +38,9 @@
             </el-dropdown-menu>
           </el-dropdown> -->
         <!-- <el-input prefix-icon="el-icon-search" placeholder="输入关键字搜索" /> -->
-        <el-avatar icon="el-icon-user" />
+        <el-avatar icon="el-icon-user" :src="$store.state.user.image_url" />
         <el-dropdown class="header-container-right-name" placement="bottom">
-          <span>NAME</span>
+          <span>{{ realName }} </span>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item @click.native="signOut">退出</el-dropdown-item>
           </el-dropdown-menu>
@@ -59,12 +59,6 @@ import { setI18nLang } from '@/utils/i18n';
 
 export default {
   name: 'LayoutHeader',
-  props: {
-    userType: {
-      type: String,
-      default: ''
-    }
-  },
   data() {
     return {
       curDropdown: '教学管理系统',
@@ -83,7 +77,7 @@ export default {
   computed: {
     realName() {
       let user = this.$store.state.user;
-      return user.user_real_name ? user.user_real_name : user.user_name;
+      return user.user_real_name ? user.user_real_name : 'NAME';
     }
   },
   mounted() {

src/layouts/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app">
-    <div class="app-top">
-      <layout-header :user-type="userType" />
+    <div class="app-header">
+      <layout-header />
       <bread-crumb />
     </div>
     <section class="app-main">
@@ -25,9 +25,6 @@ export default {
   computed: {
     key() {
       return this.$route.path;
-    },
-    userType() {
-      return this.$store.state.user.user_type === 'teacher' ? '教师' : '学员';
     }
   }
 };
@@ -38,7 +35,7 @@ export default {
   height: 100%;
   padding-top: $header-h;
 
-  &-top {
+  &-header {
     position: fixed;
     top: 0;
     left: 0;

src/main.js

@@ -5,6 +5,9 @@ import store from './store';
 
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
+import WmjhUI from 'wmjh-ui';
+import 'wmjh-ui/dist/wmjh-ui.css';
+import VueDND from 'awe-dnd';
 
 import '@/icons';
 
@@ -15,6 +18,8 @@ import i18n from '@/utils/i18n';
 import '@/permission'; // 权限控制
 
 Vue.use(ElementUI);
+Vue.use(WmjhUI);
+Vue.use(VueDND);
 
 Vue.config.productionTip = false;
 

src/store/modules/user.js

@@ -4,7 +4,7 @@ import { resetRouter } from '@/router';
 import { login, updateLanguageType, GetLoginInfoByAccessCode } from '@/api/user';
 
 const getDefaultSate = () => {
-  const { session_id, user_code, user_real_name, user_type, user_name } = getUserInfo();
+  const { session_id, user_code, user_real_name, user_type, user_name, image_url } = getUserInfo();
 
   return {
     session_id: session_id,
@@ -12,6 +12,7 @@ const getDefaultSate = () => {
     user_real_name: user_real_name,
     user_type: user_type,
     user_name: user_name,
+    image_url: image_url,
     language_type: localStorage.getItem('language_type') || 'ZH'
   };
 };
@@ -24,13 +25,14 @@ const mutations = {
   },
   [user.SET_USER_INFO]: (
     state,
-    { user_code, user_real_name, user_type, language_type, session_id }
+    { user_code, user_real_name, user_type, language_type, session_id, image_url }
   ) => {
     state.user_code = user_code;
     state.user_real_name = user_real_name;
     state.user_type = user_type;
     state.language_type = language_type;
     state.session_id = session_id;
+    state.image_url = image_url;
     localStorage.setItem('language_type', language_type);
   },
   [user.UPDATE_LANGUAGE_TYPE]: (state, language_type) => {

src/utils/auth.js

@@ -1,6 +1,13 @@
 import Cookies from 'js-cookie';
 
-const userInfoList = ['user_code', 'session_id', 'user_type', 'user_real_name', 'user_name'];
+const userInfoList = [
+  'user_code',
+  'session_id',
+  'user_type',
+  'user_real_name',
+  'user_name',
+  'image_url'
+];
 
 export function getUserInfo() {
   let userInfo = {};

src/views/teacher/main/CurriculaList.vue

@@ -1,27 +1,44 @@
 <template>
   <div class="curricula">
+    <!-- 查询条件 -->
     <div class="curricula-search">
       <div class="curricula-search-condition">
         <el-input v-model="search" prefix-icon="el-icon-search">
           <el-button slot="append" @click="queryMyCourseList">搜索</el-button>
         </el-input>
+      </div>
+      <div class="curricula-search-button">
+        <el-select v-if="userType === 'STUDENT'" v-model="teacher_id">
+          <el-option label="请选择" value="" />
+          <el-option
+            v-for="item in teacher_list"
+            :key="item.teacher_id"
+            :label="item.teacher_name"
+            :value="item.teacher_id"
+          />
+        </el-select>
         <el-select v-model="finish_status">
+          <el-option label="请选择" :value="-1" />
           <el-option
             v-for="item in finish_status_list"
-            :key="item.finish_status"
+            :key="userType === 'TEACHER' ? item.finish_status : item.status"
             :label="item.name"
-            :value="item.finish_status"
+            :value="userType === 'TEACHER' ? item.finish_status : item.status"
           ></el-option>
         </el-select>
-      </div>
-      <div class="curricula-search-button">
         <el-button type="primary" @click="queryMyCourseList">查询</el-button>
       </div>
     </div>
+    <!-- 课程列表 -->
     <div class="curricula-container">
       <div class="curricula-container-title">
-        <span>课程列表</span>
         <div>
+          <span class="title">课程列表</span>
+          <span v-if="userType === 'STUDENT'" class="tip">
+            你也可以去 学习中心 选择更多的课程。
+          </span>
+        </div>
+        <div v-if="userType === 'TEACHER'">
           <el-button class="create" @click="$router.push('/create_course')">
             <div><svg-icon icon-class="create" /><span>创建课程</span></div>
           </el-button>
@@ -29,22 +46,47 @@
       </div>
       <div class="curricula-container-list">
         <el-table :data="courseList">
-          <el-table-column prop="name" label="课程名称" width="240" />
-          <el-table-column prop="begin_date" label="课程周期" />
-          <el-table-column fixed="right" width="80">
-            <template slot-scope="scope">
+          <el-table-column
+            :prop="userType === 'TEACHER' ? 'name' : 'course_name'"
+            label="课程名称"
+            width="320"
+          />
+          <el-table-column
+            v-if="userType === 'STUDENT'"
+            label="教师"
+            prop="teacher_name_desc"
+            width="200"
+          />
+          <el-table-column label="课程周期">
+            <template slot-scope="{ row }">
+              <template v-if="userType === 'TEACHER'">
+                <i class="el-icon-date" /> {{ row.begin_date }} - {{ row.end_date }}
+              </template>
+              <template v-else>
+                <i class="el-icon-date" /> {{ row.date_space_view_text }}
+              </template>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="userType === 'TEACHER'" fixed="right" width="80">
+            <template slot-scope="{ row }">
               <el-dropdown trigger="click">
                 <span class="el-dropdown-link">
                   <svg-icon icon-class="more"></svg-icon>
                 </span>
                 <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item @click.native="studentList(scope.row.id)">
+                  <el-dropdown-item @click.native="studentList(row.id)">
                     <svg-icon icon-class="students" /> Students
                   </el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
             </template>
           </el-table-column>
+          <el-table-column v-if="userType === 'STUDENT'" label="状态">
+            <template slot-scope="{ row }">
+              <span class="status-name" :style="{ 'background-color': statusColor(row.status) }" />
+              <span :style="{ color: statusColor(row.status) }">{{ row.status_name }}</span>
+            </template>
+          </el-table-column>
         </el-table>
       </div>
     </div>
@@ -65,16 +107,23 @@
 
 <script>
 import { updateWordPack } from '@/utils/i18n';
-import { pageQueryMyCourseList } from '@/api/table';
-import { GetFinishStatusList_Course } from '@/api/select';
+import { PageQueryMyCourseList, PageQueryMyJoinCourseList_Student } from '@/api/table';
+import {
+  GetFinishStatusList_Course,
+  GetMyJoinCourseTeacherList_Student,
+  GetStudentCourseStatusList
+} from '@/api/select';
 
 export default {
   name: 'CurriculaList',
   data() {
     return {
+      userType: this.$store.state.user.user_type,
       search: '',
       finish_status_list: [],
-      finish_status: 50,
+      teacher_list: [],
+      teacher_id: '',
+      finish_status: -1,
       page_capacity: 10,
       cur_page: 1,
       total_count: 0,
@@ -84,14 +133,28 @@ export default {
   created() {
     this.queryMyCourseList();
     this.getFinishStatusList_Course();
+    if (this.userType === 'STUDENT') {
+      this.getMyJoinCourseTeacherList_Student();
+    }
     updateWordPack({
       word_key_list: ['Learn_New_Courses']
     });
   },
   methods: {
     getFinishStatusList_Course() {
-      GetFinishStatusList_Course().then(({ finish_status_list }) => {
-        this.finish_status_list = finish_status_list;
+      if (this.userType === 'TEACHER') {
+        GetFinishStatusList_Course().then(({ finish_status_list }) => {
+          this.finish_status_list = finish_status_list;
+        });
+      } else {
+        GetStudentCourseStatusList().then(({ status_list }) => {
+          this.finish_status_list = status_list;
+        });
+      }
+    },
+    getMyJoinCourseTeacherList_Student() {
+      GetMyJoinCourseTeacherList_Student().then(({ teacher_list }) => {
+        this.teacher_list = teacher_list;
       });
     },
     selectTab(status, i) {
@@ -108,16 +171,44 @@ export default {
       this.queryMyCourseList();
     },
     queryMyCourseList() {
-      const queryCriteria = {
-        finish_status: this.finish_status,
-        name: this.search,
-        page_capacity: this.page_capacity,
-        cur_page: this.cur_page
-      };
-      pageQueryMyCourseList(queryCriteria).then(({ course_list, total_count }) => {
-        this.courseList = course_list;
-        this.total_count = total_count;
-      });
+      if (this.userType === 'TEACHER') {
+        const queryCriteria = {
+          finish_status: this.finish_status,
+          name: this.search,
+          page_capacity: this.page_capacity,
+          cur_page: this.cur_page
+        };
+        PageQueryMyCourseList(queryCriteria).then(({ course_list, total_count }) => {
+          this.courseList = course_list;
+          this.total_count = total_count;
+        });
+      } else {
+        let data = {
+          teacher_id: this.teacher_id,
+          status_list: [this.finish_status],
+          course_name: this.search,
+          page_capacity: this.page_capacity,
+          cur_page: this.cur_page
+        };
+        PageQueryMyJoinCourseList_Student(data).then(({ course_list, total_count }) => {
+          this.courseList = course_list;
+          this.total_count = total_count;
+        });
+      }
+    },
+    statusColor(val) {
+      if (val === 0) {
+        return '#68CEFA';
+      }
+      if (val === 1) {
+        return '#2ECE5B';
+      }
+      if (val === 3) {
+        return '#f90';
+      }
+      if (val === 4) {
+        return '#4F8EEC';
+      }
     },
     studentList(id) {
       this.$router.push(`/student_list/index/${id}`);
@@ -139,11 +230,6 @@ export default {
     &-condition {
       > .el-input {
         width: 528px;
-        margin-right: 12px;
-      }
-
-      .el-select {
-        width: 225px;
       }
     }
 
@@ -151,6 +237,11 @@ export default {
       .el-button {
         width: 114px;
       }
+
+      .el-select {
+        width: 225px;
+        margin-right: 12px;
+      }
     }
   }
 
@@ -168,9 +259,14 @@ export default {
       justify-content: space-between;
       align-items: center;
 
-      > span {
+      .title {
         font-size: 20px;
         font-weight: 700;
+        margin-right: 36px;
+      }
+
+      .tip {
+        color: #aaa;
       }
 
       .create {
@@ -186,6 +282,8 @@ export default {
     &-list {
       @include list;
 
+      margin-top: 0;
+
       .el-dropdown {
         cursor: pointer;
 
@@ -193,6 +291,15 @@ export default {
           font-size: 19px;
         }
       }
+
+      .status-name {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        margin-right: 8px;
+        margin-bottom: 1px;
+      }
     }
   }
 }

src/views/teacher/main/TaskList.vue

@@ -5,7 +5,7 @@
       <div class="tasks-top-notification">
         <div class="tasks-top-notification-title">
           <div>
-            <svg-icon icon-class="tasks-notification" />
+            <svg-icon icon-class="task-notification" />
             <span class="title">任务通知</span>
           </div>
           <div></div>
@@ -168,6 +168,11 @@ export default {
 
       &-title {
         height: 56px;
+
+        & .title {
+          display: inline-block;
+          margin-left: 10px;
+        }
       }
     }
   }

src/views/teacher/student_list/index.vue

@@ -25,12 +25,32 @@
       </div>
       <div class="student-table">
         <el-table :data="student_list">
-          <el-table-column prop="student_name" width="240" />
-          <el-table-column prop="age" width="100">
+          <el-table-column width="360">
+            <template slot-scope="{ row }">
+              <el-avatar icon="el-icon-user" size="small" :src="row.image_url" />
+              <span class="student-name">{{ row.student_name }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="age" width="120">
             <template slot-scope="scope"> {{ scope.row.age }}岁 </template>
           </el-table-column>
-          <el-table-column prop="org_name" width="180" />
+          <el-table-column prop="org_name" width="280" />
           <el-table-column prop="country_name" />
+          <el-table-column fixed="right" width="120">
+            <template slot-scope="{ row }">
+              <template v-if="activeID === 'new'">
+                <span class="agree" @click="auditCourseStudent(row.course_student_id, 'true')">
+                  同意
+                </span>
+                <span
+                  class="refuse"
+                  @click="auditCourseStudent(scope.row.course_student_id, 'false')"
+                >
+                  拒绝
+                </span>
+              </template>
+            </template>
+          </el-table-column>
         </el-table>
       </div>
     </div>
@@ -51,6 +71,7 @@
 
 <script>
 import { PageQueryCourseStudentList } from '@/api/list';
+import { AuditCourseStudent } from '@/api/course';
 
 export default {
   data() {
@@ -86,15 +107,16 @@ export default {
         cur_page: this.cur_page
       };
 
-      // if (this.activeID === 'new') {
-      //   data['audit_status_list'] = [0];
-      // } else {
-      //   data['audit_status_list'] = [1];
-      // }
-      console.log(data);
-      PageQueryCourseStudentList(data).then(({ student_list, total_count }) => {
+      if (this.activeID === 'new') {
+        data['audit_status_list'] = [0];
+      } else {
+        data['audit_status_list'] = [1];
+      }
+
+      PageQueryCourseStudentList(data).then(({ student_list, total_count, cur_page }) => {
         this.student_list = student_list;
         this.total_count = total_count;
+        this.cur_page = cur_page;
       });
     },
     changeTab(id) {
@@ -108,6 +130,12 @@ export default {
     changePageSize(pageSize) {
       this.page_capacity = pageSize;
       this.queryCourseStudentList();
+    },
+    auditCourseStudent(course_student_id, is_audited) {
+      AuditCourseStudent({ course_student_id, is_audited }).then(() => {
+        this.$message.success('审核课程学员成功！');
+        this.queryCourseStudentList();
+      });
     }
   }
 };
@@ -120,7 +148,7 @@ export default {
   @include container;
   @include pagination;
 
-  & .search .el-input {
+  .search .el-input {
     width: 528px;
   }
 
@@ -133,7 +161,7 @@ export default {
     border-radius: 8px;
 
     // 标签
-    & .tabs {
+    .tabs {
       display: flex;
       border-bottom: 1px solid #d9d9d9;
 
@@ -158,7 +186,7 @@ export default {
     }
 
     // 学员列表
-    & .student-table {
+    .student-table {
       @include list;
 
       margin-top: 0;
@@ -167,6 +195,27 @@ export default {
       .el-table__header {
         display: none;
       }
+
+      .agree {
+        color: #2a99ff;
+        cursor: pointer;
+        margin-right: 32px;
+      }
+
+      .refuse {
+        color: #ff3c3c;
+        cursor: pointer;
+      }
+
+      .el-avatar {
+        vertical-align: sub;
+      }
+
+      .student-name {
+        margin-left: 16px;
+        display: inline-block;
+        vertical-align: super;
+      }
     }
   }
 }