Merge branch 'master' of http://git.cc-lotus.info/count/webnew-count

src/router/index.js

@@ -52,6 +52,12 @@ const routes = [
     name: '党建学苑',
     component: () => import('../views/partisan/index.vue'),
   },
+  // 个人中心
+  {
+    path: '/pcenter/index',
+    name: '个人中心',
+    component: () => import('../views/pcenter/index.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/views/pcenter/index.vue

@@ -0,0 +1,212 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <top></top>
+        </el-col>
+        <el-col :span="24" class="main">
+          <div class="w_1200">
+            <el-col :span="5" class="left">
+              <el-col :span="24" class="top">
+                <i class="el-icon-s-unfold"></i>
+                <span>个人中心</span>
+              </el-col>
+              <el-col :span="24" class="menus">
+                <!-- <el-col class="menuList" :span="24" v-for="(item, index) in menuList" :key="index">
+                  <p @click="changeMenu(item.name, index)" :style="`color:${menuIndex == index ? menuColor : ''}`">
+                    {{ item.name }}
+                  </p>
+                </el-col> -->
+                <el-menu :default-active="num" @select="selectMenu" text-color="black" active-text-color="#044b79">
+                  <el-menu-item index="1">
+                    <template slot="title">
+                      <span>基本信息</span>
+                    </template>
+                  </el-menu-item>
+                  <el-menu-item index="2">
+                    <template slot="title">
+                      <span>需求管理</span>
+                    </template>
+                  </el-menu-item>
+                  <el-menu-item index="3">
+                    <template slot="title">
+                      <span>信息管理</span>
+                    </template>
+                  </el-menu-item>
+                  <el-menu-item index="4">
+                    <template slot="title">
+                      <span>人员管理</span>
+                    </template>
+                  </el-menu-item>
+                  <el-menu-item index="5">
+                    <template slot="title">
+                      <span>部门管理</span>
+                    </template>
+                  </el-menu-item>
+                  <el-menu-item index="6">
+                    <template slot="title">
+                      <span>职务管理</span>
+                    </template>
+                  </el-menu-item>
+                  <el-menu-item index="7">
+                    <template slot="title">
+                      <span>修改密码</span>
+                    </template>
+                  </el-menu-item>
+                  <el-menu-item index="8">
+                    <template slot="title">
+                      <span>退出登录</span>
+                    </template>
+                  </el-menu-item>
+                </el-menu>
+              </el-col>
+            </el-col>
+            <el-col :span="18" class="right">
+              <span v-if="columnName == '基本信息'">
+                基本信息
+              </span>
+              <span v-else-if="columnName == '需求管理'">
+                需求管理
+              </span>
+              <span v-else-if="columnName == '信息管理'">
+                信息管理
+              </span>
+              <span v-else-if="columnName == '人员管理'">
+                人员管理
+              </span>
+              <span v-else-if="columnName == '部门管理'">
+                部门管理
+              </span>
+              <span v-else-if="columnName == '职务管理'">
+                职务管理
+              </span>
+              <span v-else-if="columnName == '修改密码'">
+                修改密码
+              </span>
+              <span v-else-if="columnName == '退出登录'">
+                退出登录
+              </span>
+            </el-col>
+          </div>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <div class="w_1200">
+            <foot></foot>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '@/layout/common/top.vue';
+import foot from '@/layout/common/foot.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'detail',
+  props: {},
+  components: {
+    top,
+    foot,
+  },
+  data: function() {
+    return {
+      columnName: '基本信息',
+      num: '1',
+    };
+  },
+  created() {
+    this.selectMenu();
+  },
+  methods: {
+    // 选择栏目
+    selectMenu(key) {
+      if (key == 1) {
+        this.columnName = '基本信息';
+        console.log(this.columnName);
+      } else if (key == 2) {
+        this.columnName = '需求管理';
+      } else if (key == 3) {
+        this.columnName = '信息管理';
+      } else if (key == 4) {
+        this.columnName = '人员管理';
+      } else if (key == 5) {
+        this.columnName = '部门管理';
+      } else if (key == 6) {
+        this.columnName = '职务管理';
+      } else if (key == 7) {
+        this.columnName = '修改密码';
+      } else if (key == 8) {
+        this.columnName = '退出登录';
+      }
+    },
+    // 点击选择菜单
+    changeMenu(name, index) {
+      this.menuIndex = index;
+      this.columnName = name;
+      this.menuColor = 'rgb(5,73,130)';
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.style {
+  .menu {
+    height: 70px;
+    margin: 0 0 10px 0;
+  }
+  .main {
+    min-height: 600px;
+    margin: 0 0 10px 0;
+    .left {
+      min-height: 600px;
+      background: #fff;
+      margin: 0 10px 0 0;
+      .top {
+        height: 60px;
+        line-height: 60px;
+        background-color: #054982;
+        color: #fff;
+        font-size: 25px;
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-align: center;
+      }
+      /deep/.el-menu-item {
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        border-bottom: 1px solid #ccc;
+        span {
+          font-size: 20px;
+          font-weight: bold;
+        }
+      }
+    }
+    .right {
+      width: 78%;
+      min-height: 600px;
+      background: #fff;
+    }
+  }
+  .foot {
+    height: 135px;
+  }
+}
+</style>

src/views/service/detail.vue

@@ -27,28 +27,28 @@
             </el-col>
             <el-col :span="18" class="right">
               <span v-if="columnName == '资源介绍'">
-                资源介绍
+                <resources :columnName="columnName"></resources>
               </span>
               <span v-else-if="columnName == '账号申请'">
-                账号申请
+                <apply :columnName="columnName"></apply>
               </span>
               <span v-else-if="columnName == '计算登录'">
-                计算登录
+                <sign :columnName="columnName"></sign>
               </span>
               <span v-else-if="columnName == '应用领域'">
-                应用领域
+                <application :columnName="columnName"></application>
               </span>
               <span v-else-if="columnName == '应用案例'">
-                应用案例
+                <cases :columnName="columnName"></cases>
               </span>
               <span v-else-if="columnName == '运行动态'">
-                运行动态
+                <funct :columnName="columnName"></funct>
               </span>
               <span v-else-if="columnName == '超算讲堂'">
-                超算讲堂
+                <forum :columnName="columnName"></forum>
               </span>
               <span v-else-if="columnName == 'AI社区'">
-                AI社区
+                <community :columnName="columnName"></community>
               </span>
             </el-col>
           </div>
@@ -67,6 +67,15 @@
 import top from '@/layout/common/top.vue';
 import menus from '@/layout/common/menus.vue';
 import foot from '@/layout/common/foot.vue';
+import resources from './parts/resources.vue';
+import apply from './parts/apply.vue';
+import sign from './parts/sign.vue';
+import application from './parts/application.vue';
+import cases from './parts/cases.vue';
+import funct from './parts/funct.vue';
+import forum from './parts/forum.vue';
+import community from './parts/community.vue';
+
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'detail',
@@ -75,6 +84,14 @@ export default {
     top,
     menus,
     foot,
+    resources, //资源介绍
+    apply, //账号申请
+    sign, //计算登录
+    application, //应用领域
+    cases, //应用案例
+    funct, //运行动态
+    forum, //超算讲堂
+    community, //AI社区
   },
   data: function() {
     return {

src/views/service/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="index">
+  <div id="detail">
     <el-row>
       <el-col :span="24" class="style">
         <el-col :span="24" class="top">
@@ -12,7 +12,45 @@
         </el-col>
         <el-col :span="24" class="main">
           <div class="w_1200">
-            <serviceList></serviceList>
+            <el-col :span="5" class="left">
+              <el-col :span="24" class="top">
+                <i class="el-icon-s-unfold"></i>
+                <span>计算服务</span>
+              </el-col>
+              <el-col :span="24" class="menus">
+                <el-col class="menuList" :span="24" v-for="(item, index) in menuList" :key="index">
+                  <p @click="changeMenu(item.name, index)" :style="`color:${menuIndex == index ? menuColor : ''}`">
+                    {{ item.name }}
+                  </p>
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="18" class="right">
+              <span v-if="columnName == '资源介绍'">
+                资源介绍
+              </span>
+              <span v-else-if="columnName == '账号申请'">
+                账号申请
+              </span>
+              <span v-else-if="columnName == '计算登录'">
+                计算登录
+              </span>
+              <span v-else-if="columnName == '应用领域'">
+                应用领域
+              </span>
+              <span v-else-if="columnName == '应用案例'">
+                应用案例
+              </span>
+              <span v-else-if="columnName == '运行动态'">
+                运行动态
+              </span>
+              <span v-else-if="columnName == '超算讲堂'">
+                超算讲堂
+              </span>
+              <span v-else-if="columnName == 'AI社区'">
+                AI社区
+              </span>
+            </el-col>
           </div>
         </el-col>
         <el-col :span="24" class="foot">
@@ -29,24 +67,84 @@
 import top from '@/layout/common/top.vue';
 import menus from '@/layout/common/menus.vue';
 import foot from '@/layout/common/foot.vue';
-import serviceList from '@/layout/service/serviceList.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
-  name: 'index',
+  name: 'detail',
   props: {},
   components: {
     top,
     menus,
     foot,
-    serviceList, //服务列表
   },
   data: function() {
-    return {};
+    return {
+      menuList: [
+        { name: '资源介绍' },
+        { name: '账号申请' },
+        { name: '计算登录' },
+        { name: '应用领域' },
+        { name: '应用案例' },
+        { name: '运行动态' },
+        { name: '超算讲堂' },
+        { name: 'AI社区' },
+      ],
+      menuColor: 'rgb(5,73,130)',
+      menuIndex: '0',
+      columnName: '',
+    };
+  },
+  created() {
+    this.changeColumn();
+  },
+  methods: {
+    // 选择栏目
+    changeColumn() {
+      if (this.col_name == '资源介绍') {
+        this.menuIndex = 0;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(5,73,130)';
+      } else if (this.col_name == '账号申请') {
+        this.menuIndex = 1;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(5,73,130)';
+      } else if (this.col_name == '计算登录') {
+        this.menuIndex = 2;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(5,73,130)';
+      } else if (this.col_name == '应用领域') {
+        this.menuIndex = 3;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(5,73,130)';
+      } else if (this.col_name == '应用案例') {
+        this.menuIndex = 4;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(5,73,130)';
+      } else if (this.col_name == '运行动态') {
+        this.menuIndex = 5;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(5,73,130)';
+      } else if (this.col_name == '超算讲堂') {
+        this.menuIndex = 6;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(5,73,130)';
+      } else if (this.col_name == 'AI社区') {
+        this.menuIndex = 7;
+        this.columnName = this.col_name;
+        this.menuColor = 'rgb(5,73,130)';
+      }
+    },
+    // 点击选择菜单
+    changeMenu(name, index) {
+      this.menuIndex = index;
+      this.columnName = name;
+      this.menuColor = 'rgb(5,73,130)';
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
+    col_name() {
+      return this.$route.query.title;
+    },
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
@@ -68,8 +166,38 @@ export default {
     margin: 0 0 10px 0;
   }
   .main {
-    // min-height: 600px;
+    min-height: 600px;
     margin: 0 0 10px 0;
+    .left {
+      min-height: 600px;
+      background: #fff;
+      margin: 0 10px 0 0;
+      .top {
+        height: 60px;
+        line-height: 60px;
+        background-color: #054982;
+        color: #fff;
+        font-size: 25px;
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-align: center;
+      }
+      .menuList {
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        border-bottom: 1px solid #ccc;
+        p {
+          font-size: 20px;
+          font-weight: bold;
+        }
+      }
+    }
+    .right {
+      width: 78%;
+      min-height: 600px;
+      background: #fff;
+    }
   }
   .foot {
     height: 135px;

src/views/service/parts/application.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="application">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <span></span>
+          <span>{{ columnName }}</span>
+        </el-col>
+        <el-col :span="24" class="info">
+          详情
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'application',
+  props: {
+    columnName: null,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  padding: 0 20px;
+  .top {
+    height: 35px;
+    margin: 20px 0;
+    border-bottom: 1px dashed #ccc;
+    span:first-child {
+      display: inline-block;
+      width: 4px;
+      height: 20px;
+      background: #005293;
+      margin: 0 10px -3px 0;
+    }
+    span:nth-child(2) {
+      font-size: 20px;
+      color: #005293;
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/service/parts/apply.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="apply">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <span></span>
+          <span>{{ columnName }}</span>
+        </el-col>
+        <el-col :span="24" class="info">
+          详情
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'apply',
+  props: {
+    columnName: null,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  padding: 0 20px;
+  .top {
+    height: 35px;
+    margin: 20px 0;
+    border-bottom: 1px dashed #ccc;
+    span:first-child {
+      display: inline-block;
+      width: 4px;
+      height: 20px;
+      background: #005293;
+      margin: 0 10px -3px 0;
+    }
+    span:nth-child(2) {
+      font-size: 20px;
+      color: #005293;
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/service/parts/cases.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="cases">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <span></span>
+          <span>{{ columnName }}</span>
+        </el-col>
+        <el-col :span="24" class="info">
+          详情
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'cases',
+  props: {
+    columnName: null,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  padding: 0 20px;
+  .top {
+    height: 35px;
+    margin: 20px 0;
+    border-bottom: 1px dashed #ccc;
+    span:first-child {
+      display: inline-block;
+      width: 4px;
+      height: 20px;
+      background: #005293;
+      margin: 0 10px -3px 0;
+    }
+    span:nth-child(2) {
+      font-size: 20px;
+      color: #005293;
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/service/parts/community.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="community">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <span></span>
+          <span>{{ columnName }}</span>
+        </el-col>
+        <el-col :span="24" class="info">
+          详情
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'community',
+  props: {
+    columnName: null,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  padding: 0 20px;
+  .top {
+    height: 35px;
+    margin: 20px 0;
+    border-bottom: 1px dashed #ccc;
+    span:first-child {
+      display: inline-block;
+      width: 4px;
+      height: 20px;
+      background: #005293;
+      margin: 0 10px -3px 0;
+    }
+    span:nth-child(2) {
+      font-size: 20px;
+      color: #005293;
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/service/parts/forum.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="forum">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <span></span>
+          <span>{{ columnName }}</span>
+        </el-col>
+        <el-col :span="24" class="info">
+          详情
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'forum',
+  props: {
+    columnName: null,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  padding: 0 20px;
+  .top {
+    height: 35px;
+    margin: 20px 0;
+    border-bottom: 1px dashed #ccc;
+    span:first-child {
+      display: inline-block;
+      width: 4px;
+      height: 20px;
+      background: #005293;
+      margin: 0 10px -3px 0;
+    }
+    span:nth-child(2) {
+      font-size: 20px;
+      color: #005293;
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/service/parts/funct.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="funct">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <span></span>
+          <span>{{ columnName }}</span>
+        </el-col>
+        <el-col :span="24" class="info">
+          详情
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'funct',
+  props: {
+    columnName: null,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  padding: 0 20px;
+  .top {
+    height: 35px;
+    margin: 20px 0;
+    border-bottom: 1px dashed #ccc;
+    span:first-child {
+      display: inline-block;
+      width: 4px;
+      height: 20px;
+      background: #005293;
+      margin: 0 10px -3px 0;
+    }
+    span:nth-child(2) {
+      font-size: 20px;
+      color: #005293;
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/service/parts/resources.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="resources">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <span></span>
+          <span>{{ columnName }}</span>
+        </el-col>
+        <el-col :span="24" class="info">
+          详情
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'resources',
+  props: {
+    columnName: null,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  padding: 0 20px;
+  .top {
+    height: 35px;
+    margin: 20px 0;
+    border-bottom: 1px dashed #ccc;
+    span:first-child {
+      display: inline-block;
+      width: 4px;
+      height: 20px;
+      background: #005293;
+      margin: 0 10px -3px 0;
+    }
+    span:nth-child(2) {
+      font-size: 20px;
+      color: #005293;
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/service/parts/sign.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="sign">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <span></span>
+          <span>{{ columnName }}</span>
+        </el-col>
+        <el-col :span="24" class="info">
+          详情
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'sign',
+  props: {
+    columnName: null,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  padding: 0 20px;
+  .top {
+    height: 35px;
+    margin: 20px 0;
+    border-bottom: 1px dashed #ccc;
+    span:first-child {
+      display: inline-block;
+      width: 4px;
+      height: 20px;
+      background: #005293;
+      margin: 0 10px -3px 0;
+    }
+    span:nth-child(2) {
+      font-size: 20px;
+      color: #005293;
+      font-weight: bold;
+    }
+  }
+}
+</style>