diantou/src_product/iam/audit/auditsource/km/knowledge-home/km-knowledge-home.vue

<template>
  <div>
    <div :class="$style.banner">
      <div :class="$style.headers">
        <div :class="$style.logo">
          <img src="../../../src_custom/images/logo.png" alt="" />
          <span :class="$style.logotitle">知识管理系统</span>
        </div>
        <div :class="$style.info">
          <a href="#" disabled="true">共有 {{ knowledgeInfoCountData.knowledgeCount }} 个知识</a>
          <a-divider type="vertical" />
          <a href="#" disabled="true">本月新增 {{ knowledgeInfoCountData.newKnowledge }} 份知识</a>
          <a-divider type="vertical" />
          <a href="#" disabled="true">本月预览 {{ knowledgeInfoCountData.newPreview }}</a>
          <a-divider type="vertical" />
          <a href="#" disabled="true">本月下载 {{ knowledgeInfoCountData.newDownload }}</a>
          <a-divider type="vertical" />
          <a href="#" disabled="true">本月评论 {{ knowledgeInfoCountData.newComment }}</a>
        </div>
        <div :class="$style.userInfo">
          <a-dropdown>
            <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
              <a-avatar
                :class="$style.userinfo"
                icon="user"
                size="small"
                :src="`api/mobile/v1/user-manager/userAvatar/${userInfo.account}` | sdResource"
                alt="avatar"
              />{{ userInfo.name }}<a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a
                  href="javascript:;"
                  @click="
                    $router.replace({
                      path: 'sd-frame/km-my-knowledge',
                    })
                  "
                  >个人中心</a
                >
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="logout">退出登录</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>

          <a :class="$style.goWork" href="javascript:;" @click="$router.push('/sd-frame')"
            >进入工作台</a
          >
        </div>
      </div>
      <div :class="$style.search">
        <a-input-search :class="$style.searchInput" placeholder="全文检索" @search="onSearch" />
        <div :class="$style.hotLabel">
          热门搜索：
          <span v-for="(item, index) in hotwordsofday" :key="index" @click="goMoreSearch(item)">{{
            item
          }}</span>
        </div>
      </div>
    </div>
    <div :class="$style.content">
      <a-layout-content :class="$style.div">
        <a-row :gutter="24">
          <a-col :span="6">
            <div :class="$style.leftContent">
              <!-- 知识分类 -->
              <div :class="[$style.divContent, $style.type]">
                <h3 :class="$style.tt">
                  <i :class="$style.icons"></i>
                  知识分类
                  <a href="javascript:;" @click="click(item)">更多 <a-icon type="right"/></a>
                </h3>
                <div :class="$style.hd">
                  <a-empty v-if="noTypeData" />
                  <a-skeleton active :paragraph="{ rows: 5 }" :loading="loading" />
                  <ul>
                    <li v-for="(item, index) in knowledgeCategoryData" :key="index">
                      <p :title="item.knowledgeCategoryName">{{ item.knowledgeCategoryName }}</p>
                      <span>{{ item.knowledgeCount }}</span>
                    </li>
                  </ul>
                </div>
              </div>
              <!-- 个人榜 -->
              <div :class="[$style.divContent, $style.listTabs]">
                <div :class="$style.tab">
                  <div :class="$style.tabshd">
                    <span :class="[num === 0 ? $style.active : '']" @click="num = 0">个人榜</span>
                    <span :class="[num === 1 ? $style.active : '']" @click="num = 1">投稿榜</span>
                  </div>
                  <div :class="$style.tabbd">
                    <div v-show="num === 0">
                      <a-skeleton active :loading="loading" />
                      <a-empty v-if="noPointData" />
                      <ul>
                        <li v-for="(item, index) in pointData" :key="index">
                          <span
                            :class="[
                              $style.ranking,
                              index === 0
                                ? $style.rankingone
                                : index === 1
                                ? $style.rankingtwo
                                : index === 2
                                ? $style.rankingthree
                                : '',
                            ]"
                            >{{ index + 1 }}</span
                          >
                          <span>{{ item.userName }}</span>
                          <span :class="$style.num">{{ item.value }} 分</span>
                        </li>
                      </ul>
                    </div>
                    <div v-show="num === 1">
                      <a-empty v-if="noContributionData" />
                      <a-skeleton active :loading="loading" />
                      <ul>
                        <li v-for="(item, index) in contributionData" :key="index">
                          <span
                            :class="[
                              $style.ranking,
                              index === 0
                                ? $style.rankingone
                                : index === 1
                                ? $style.rankingtwo
                                : index === 2
                                ? $style.rankingthree
                                : '',
                            ]"
                            >{{ index + 1 }}</span
                          >
                          <span>{{ item.userName }}</span>
                          <span :class="$style.num">{{ item.value }} </span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 热搜标签 -->
              <div :class="[$style.divContent, $style.hot]">
                <h3 :class="$style.tt">
                  <i :class="$style.icons"></i>
                  热搜标签
                  <a href="javascript:;" @click="moreHotTag">更多 <a-icon type="right"/></a>
                </h3>

                <div :class="$style.hotbd">
                  <a-empty v-if="noTagData" />
                  <a-skeleton active :loading="loading" />
                  <div id="main" :class="$style.main"></div>
                </div>
              </div>
              <!-- 年度分享达人 -->
              <div :class="[$style.divContent, $style.share]">
                <h3 :class="$style.tt">
                  <i :class="$style.icons"></i>
                  年度分享达人
                </h3>
                <div :class="$style.sharebd">
                  <a-empty v-if="noShareData" />
                  <a-skeleton active :paragraph="{ rows: 1 }" :loading="loading" />
                  <ul :class="$style.ullist">
                    <li v-for="item in topSharerData" :key="item.value">
                      <i :class="$style.useri"></i>
                      <a-avatar
                        :class="$style.userinfo"
                        icon="user"
                        :size="43"
                        :src="
                          `api/mobile/v1/user-manager/userAvatar/${item.userAccount}` | sdResource
                        "
                        alt="avatar"
                      />
                      <p>{{ item.userName }}</p>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </a-col>
          <a-col :span="13">
            <div :class="$style.centerContent">
              <!-- 最新知识 -->
              <div :class="[$style.divContent, $style.newKnow]">
                <h3 :class="$style.tt">
                  <i :class="$style.icons"></i>
                  最新知识
                  <!-- <a href="#">更多 <a-icon type="right"/></a> -->
                </h3>
                <div :class="$style.newKonwbd">
                  <a-empty v-if="noNewData" />
                  <a-skeleton active :loading="loading" />
                  <div
                    v-for="item in latestKnowledgeData.slice(0, 1)"
                    :key="item.id"
                    :class="$style.fristNews"
                    @click="toLook(item)"
                  >
                    <p :class="$style.title">{{ item.title }}</p>
                    <span>{{ item.abstractMessage }}</span>
                  </div>
                  <ul :class="$style.ullist">
                    <li v-for="item in latestKnowledgeData.slice(1)" :key="item.id">
                      <span @click="toLook(item)">{{ item.title }}</span>
                      <i>{{ item.creationTime | sdDateFormat('YYYY-MM-DD') }}</i>
                    </li>
                  </ul>
                </div>
              </div>
              <!-- 阅读排行 -->
              <div :class="[$style.divContent, $style.newKnow, $style.readList]">
                <h3 :class="$style.tt">
                  <i :class="$style.icons"></i>
                  阅读排行
                  <!-- <a href="#">更多 <a-icon type="right"/></a> -->
                </h3>
                <div :class="$style.newKonwbd">
                  <a-empty v-if="noreadData" />
                  <a-skeleton active :loading="loading" />
                  <div
                    v-for="item in topReadData.slice(0, 1)"
                    :key="item.id"
                    :class="$style.fristNews"
                    @click="toLook(item)"
                  >
                    <p :class="$style.title">{{ item.title }}</p>
                    <span>{{ item.abstractMessage }}</span>
                  </div>
                  <ul :class="$style.ullist">
                    <li v-for="item in topReadData.slice(1)" :key="item.id">
                      <span @click="toLook(item)">{{ item.title }}</span>
                      <i>{{ item.creationTime | sdDateFormat('YYYY-MM-DD') }}</i>
                    </li>
                  </ul>
                </div>
              </div>
              <!-- 推荐排行 -->
              <div :class="[$style.divContent, $style.recommend]">
                <h3 :class="$style.tt">
                  <i :class="$style.icons"></i>
                  推荐排行
                  <!-- <a href="#">更多 <a-icon type="right"/></a> -->
                </h3>
                <a-empty v-if="noRecommendData" />
                <a-skeleton active :loading="loading" />
                <ul :class="$style.ullist">
                  <li v-for="(item, index) in recommendData" :key="item.knowledgeId">
                    <i>{{ index + 1 }}.</i>
                    <span @click="toLook(item)">{{ item.title }}</span>
                  </li>
                </ul>
              </div>
            </div>
          </a-col>
          <a-col :span="5">
            <div :class="$style.rightContent">
              <!-- 登录 -->
              <div :class="[$style.divContent, $style.loginInfo]">
                <div :class="$style.guide">
                  <h1><i></i>我的积分</h1>
                </div>
                <p :class="$style.num">
                  <span v-for="(item, index) in strI" :key="index" :class="$style.filesNum">{{
                    item
                  }}</span>
                  我已贡献<i>{{
                    myPointData.contribution === null ? 0 : myPointData.contribution
                  }}</i
                  >份知识
                </p>
                <a-button type="primary" block @click="goKnowLedge">
                  上传知识
                </a-button>
                <ul>
                  <li @click="$router.replace({ path: '/sd-frame/km-mytodolist' })"
                    ><a-icon type="clock-circle" />待我审的({{
                      myPointData.todo === null ? 0 : myPointData.todo
                    }})</li
                  >
                  <li @click="$router.replace({ path: '/sd-frame/km-my-knowledge' })"
                    ><a-icon type="sd-hat" />我的知识({{
                      myPointData.contribution === null ? 0 : myPointData.contribution
                    }})</li
                  >
                  <li @click="$router.replace({ path: '/sd-frame/km-my-favorites' })"
                    ><a-icon type="star" />收藏知识({{
                      myPointData.favorite === null ? 0 : myPointData.favorite
                    }})</li
                  >
                  <li @click="$router.replace({ path: '/sd-frame/km-my-recommend' })"
                    ><a-icon type="like" />推荐知识({{
                      myPointData.recommend === null ? 0 : myPointData.recommend
                    }})</li
                  >
                  <li @click="$router.replace({ path: '/sd-frame/km-my-commend' })"
                    ><a-icon type="edit" />点评知识({{
                      myPointData.comment === null ? 0 : myPointData.comment
                    }})</li
                  >
                  <li @click="$router.replace({ path: '/sd-frame/km-my-borrow' })"
                    ><a-icon type="sd-swap2" />借阅知识({{
                      myPointData.borrow === null ? 0 : myPointData.borrow
                    }})</li
                  >
                </ul>
              </div>
              <!-- 知识地图 -->
              <div :class="[$style.divContent, $style.map]">
                <h3 :class="$style.tt">
                  <i :class="$style.icons"></i>
                  知识地图
                  <a href="javascript:;" @click="mapMore">更多 <a-icon type="right"/></a>
                </h3>
                <a-empty v-if="noData" />
                <a-skeleton active :loading="loading" />
                <ul>
                  <li
                    v-for="item in latestKnowledgeMapData"
                    :key="item.kmapCategoryId"
                    @click="goMap(item)"
                  >
                    <div :class="$style.mapImg">
                      <img
                        v-if="item.cover !== null"
                        :src="
                          (`api/flow-mobile/v1/task-form-process/download-attachments/` +
                            item.cover)
                            | sdResource
                        "
                      />
                      <a-empty v-else :class="$style.noImg" :description="'暂无图片'" />
                    </div>
                    <div :class="$style.mapInfo">
                      <p :class="$style.title">{{ item.kmapName }}</p>
                      <p :title="item.abstractMessage" :class="$style.message">{{
                        item.abstractMessage
                      }}</p>
                      <p
                        ><a-icon type="sd-eye" />
                        {{ item.readTimes === null ? '0' : item.readTimes }}</p
                      >
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-layout-content>
    </div>
    <div :class="$style.footer">
      <p>Copyright 2020 DCI.GOA All Rights Reserved</p>
      <p>建议使用Firefox49-52 或 IE11浏览器，1920X1080分辨率访问本系统.</p>
    </div>
  </div>
</template>

<script>
import loginService from '@/login/login-service'
import 'echarts/theme/macarons.js'
import storeMixin from '@/common/store-mixin'
import KmKnowledageService from '../km-knowledage-service'

import components from './_import-components/km-knowledge-home-import'
const echarts = require('echarts/lib/echarts')
require('echarts-wordcloud')
export default {
  name: 'KmKnowledgeHome',
  metaInfo: {
    title: '知识门户',
  },
  components: {
    ...components,
  },
  mixins: [storeMixin],
  data() {
    return {
      // 热搜词组
      hotwordsofday: [],
      // 知识统计
      knowledgeInfoCountData: {},
      // 知识分类
      knowledgeCategoryData: [],
      // 个人榜
      pointData: [],
      // 投稿榜
      contributionData: [],
      // 热门标签
      hotTagData: [],
      // 分享达人
      topSharerData: [],
      // 最新知识
      latestKnowledgeData: [],
      // 阅读排行
      topReadData: [],
      // 推荐排行
      recommendData: [],
      // 知识地图
      latestKnowledgeMapData: [],
      // 我的积分
      myPointData: {},
      num: 0,
      allFiles: 68,
      strI: '',
      myChart: null,
      noData: false,
      noreadData: false,
      noRecommendData: false,
      noNewData: false,
      noShareData: false,
      noTypeData: false,
      noPointData: false,
      noContributionData: false,
      noTagData: false,
      loading: false,
    }
  },
  created() {},
  mounted() {
    this.loading = true
    // 获取热门词组
    this.queryHotWords()
    // 热搜词
    this.queryHotwordsofday()
    // 获取知识数量统计
    this.queryKnowledgeCount()
    // 知识分类列表
    this.queryKnowledgeCategory()
    // 获取个人榜和投稿榜
    this.queryPersonalList()
    // 获取热搜标签
    this.queryHotTag()
    // 获取年度分享达人
    this.queryTopSharer()
    // 获取最新知识
    this.queryLatestKnowledge()
    // 获取阅读排行
    this.queryTopRead()
    // 推荐排行
    this.queryRecommend()
    // 获取知识地图
    this.queryLatestKnowledgeMap()
    // 获取我的积分
    this.queryMyPoint()
  },
  methods: {
    logout() {
      loginService.doLogout()
    },
    goKnowLedge() {
      window.open('#/sd-frame/km-knowledage-base', '_blank')
    },
    queryHotwordsofday() {
      const params = {
        days: 7,
      }
      KmKnowledageService.getHotwordsofday(params).then((res) => {
        if (res.data.length > 0) {
          this.hotwordsofday = res.data
        } else {
          this.hotwordsofday = []
        }
      })
    },
    goMoreSearch(val) {
      window.open(`${this.$router.resolve('/km-knowledge-fullsearch').href}?searchVal=${val}`)
    },
    moreHotTag() {
      window.open(`${this.$router.resolve('/km-knowledge-fullsearch').href}`)
    },
    click(record) {
      const url = `#/sd-frame/km-knowledage-base`
      window.open(url)
    },
    queryHotWords() {
      KmKnowledageService.getHotWords().then((res) => {})
    },
    queryMyPoint() {
      KmKnowledageService.getMyPoint().then((res) => {
        this.myPointData = res.data
        this.strI = this.myPointData.point.toString().replace(/\B(?=(\d{3})+$)/g, ',')
      })
    },
    queryKnowledgeCount() {
      KmKnowledageService.getKnowledgeCount().then((res) => {
        this.knowledgeInfoCountData = res.data
      })
    },
    queryKnowledgeCategory() {
      this.loading = true
      KmKnowledageService.getKnowledgeCategory().then((res) => {
        this.loading = false
        if (res.data.length > 0) {
          this.knowledgeCategoryData = res.data
        } else {
          this.knowledgeCategoryData = []
          this.noTypeData = true
        }
      })
    },
    queryPersonalList() {
      this.loading = true
      KmKnowledageService.getPersonalList().then((res) => {
        this.loading = false
        if (res.data.point.length > 0) {
          this.pointData = res.data.point
        } else {
          this.pointData = []
          this.noPointData = true
        }
        if (res.data.contribution.length > 0) {
          this.contributionData = res.data.contribution
        } else {
          this.contributionData = []
          this.noContributionData = true
        }
      })
    },
    queryHotTag() {
      this.loading = true
      KmKnowledageService.getHotTag().then((res) => {
        this.loading = false
        const hotTagData = res.data
        if (hotTagData.length > 0) {
          hotTagData.forEach((e) => {
            const hotTagObj = {}
            hotTagObj.name = e.tagName
            hotTagObj.value = e.count
            hotTagObj.id = e.tagId
            this.hotTagData.push(hotTagObj)
            this.hotWord()
          })
        } else {
          this.noTagData = true
        }
      })
    },
    queryTopSharer() {
      this.loading = true
      KmKnowledageService.getTopSharer().then((res) => {
        this.loading = false
        if (res.data.length > 0) {
          this.topSharerData = res.data
        } else {
          this.topSharerData = []
          this.noShareData = true
        }
      })
    },
    queryLatestKnowledge() {
      this.loading = true
      KmKnowledageService.getLatestKnowledge({ size: 7 }).then((res) => {
        this.loading = false
        if (res.data.length > 0) {
          this.latestKnowledgeData = res.data
        } else {
          this.latestKnowledgeData = []
          this.noNewData = true
        }
      })
    },
    queryTopRead() {
      KmKnowledageService.getTopRead({ size: 6 }).then((res) => {
        if (res.data.length > 0) {
          this.topReadData = res.data
        } else {
          this.topReadData = []
          this.noreadData = true
        }
      })
    },
    queryRecommend() {
      KmKnowledageService.getRecommend({ size: 8 }).then((res) => {
        if (res.data.length > 0) {
          this.recommendData = res.data
        } else {
          this.recommendData = []
          this.noRecommendData = true
        }
      })
    },
    queryLatestKnowledgeMap() {
      this.loading = true
      KmKnowledageService.getLatestKnowledgeMap({ size: 4 }).then((res) => {
        this.loading = false
        if (res.data.length > 0) {
          this.latestKnowledgeMapData = res.data
        } else {
          this.latestKnowledgeMapData = []
          this.noData = true
        }
      })
    },

    // 全文检索
    onSearch(value) {
      window.open(`${this.$router.resolve('/km-knowledge-fullsearch').href}?searchVal=${value}`)
    },
    // 词云
    hotWord() {
      var myChart = echarts.init(document.getElementById('main'))
      myChart.setOption({
        backgroundColor: '#fff',
        tooltip: {
          show: false,
        },
        clickable: true,
        series: [
          {
            type: 'wordCloud',
            shape: 'circle',
            left: 'center',
            top: 'center',
            width: '100%',
            height: '100%',
            right: null,
            bottom: null,
            gridSize: this.hotTagData.length < 10 ? 14 : 12, // 字符之间的间距(int)
            sizeRange: [14, 22], // 字符的范围(array)
            rotationRange: [0, 0], // 字符倾斜的角度(array)
            autoSize: {
              enable: true,
              minSize: 6,
            },
            textPadding: 0,
            clickable: true,
            drawOutOfBound: false,
            textStyle: {
              normal: {
                color: function() {
                  return (
                    'rgb(' +
                    [
                      Math.round(Math.random() * 256),
                      Math.round(Math.random() * 256),
                      Math.round(Math.random() * 256),
                    ].join(',') +
                    ')'
                  )
                },
              },
            },
            data: this.hotTagData,
          },
        ],
      })
      // 防止重复触发点击事件
      if (myChart._$handlers.click) {
        myChart._$handlers.click.length = 0
      }
      myChart.on('click', function(params) {
        window.open(`#/km-knowledge-fullsearch?searchVal=${params.data.name}`)
      })
    },
    toLook(item) {
      window.open(`#/km-knowledage-view?id=${item.id}&title=${item.title}`, '_blank')
    },
    mapMore() {
      window.open(`#/sd-frame/km-knowledge-map`, '_blank')
    },
    goMap(item) {
      window.open(`#/km-kmap-pages/${item.id}`, '_blank')
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$font-color: #ededed;
$font-size: 14px;
$font-color: #333;
$font-more-color: #999;
$font-color-sm: #666;
$font-yahei: 'PingFangSC-Medium';
$ul-line-height: 43px;
$color-red: #e02121;
$color-blue: #5692f5;
$h-line-height: 56px;
$logotitle-size: 20px;
.banner {
  width: 100%;
  height: 328px;
  background: url(../images/home-banner.png) no-repeat;
  background-size: 100% 100%;
  .headers {
    max-width: 1200px;
    padding-top: 10px;
    margin: 0 auto;
    .logo {
      margin-right: 30px;
      .logotitle {
        position: relative;
        top: 2px;
        display: inline-block;
        margin-left: 30px;
        font-size: $logotitle-size;
        font-weight: 700;
        color: $white;
      }
    }
    .logo,
    .info {
      float: left;
    }
    .info {
      padding-top: 4px;
      a {
        font-size: $font-size-sm;
        color: $white;
      }
    }
    .user-info {
      float: right;
      padding-top: 5px;
      font-size: $font-size-sm;
      a {
        color: $white;
        .userinfo {
          width: 18px;
          height: 18px;
          margin-right: 4px;
          vertical-align: top;
          border-radius: 50%;
        }
      }
      .go-work {
        padding-left: 22px;
      }
    }
  }
  .search {
    width: 612px;
    margin: 120px auto 0;
    .search-input {
      width: 612px;

      input {
        height: 54px;
      }
    }
    .hot-label {
      margin-top: 16px;
      font-size: $font-size-sm;
      color: $white;
      span {
        padding-right: 13px;
        &:hover {
          color: $primary-color;
          cursor: pointer;
        }
      }
    }
  }
}
.content {
  ul {
    padding: 0;
    margin: 0;
    li {
      list-style: none;
    }
  }

  width: 100%;
  padding: 20px 0;
  background: #eff3fa;
  .div-content {
    padding: 14px;
    background: $white;
    border-radius: $border-radius-base;
    h3.tt {
      height: 36px;
      font-size: $btn-font-size-sm;
      color: $font-color;
      border-bottom: 1px solid #efe9e9;
      i.icons {
        display: inline-block;
        width: 26px;
        height: 26px;
        margin-right: 5px;
        vertical-align: bottom;
      }
      a {
        float: right;
        margin-top: 5px;
        font-size: $font-size-sm;
        color: $font-more-color;
      }
    }
  }

  .div {
    max-width: 1200px;
    margin: 0 auto 40px;
  }
  .left-content {
    float: left;
    width: 286px;

    .type {
      height: 365px;
      h3 {
        i.icons {
          background: url(../images/home-icon.png) no-repeat 0 0;
        }
      }
      .hd {
        ul {
          li {
            float: left;
            width: 50%;
            padding-right: 10px;
            padding-left: 20px;
            border-right: 1px solid #efe9e9;
            &:nth-of-type(2n) {
              border-right: 0;
            }
            p {
              height: 31px;
              padding-top: 10px;
              margin-bottom: 0;
              overflow: hidden;
              font-family: $font-yahei;
              font-size: $font-size;
              font-weight: 500;
              color: $font-color;
              text-overflow: ellipsis;
              letter-spacing: 2px;
              word-break: break-all;
              white-space: nowrap;
            }
            span {
              font-size: $font-size-sm;
              color: $font-color;
              opacity: 0.6;
            }
          }
        }
      }
    }
    .list-tabs {
      height: 445px;
      margin-top: 20px;
      .tabshd {
        height: 40px;
        margin-bottom: 20px;
        border-bottom: 1px solid #efe9e9;
        span {
          display: inline-block;
          width: 50%;
          text-align: center;
          cursor: pointer;
          &.active {
            font-weight: 500;
            color: $primary-color;
            &::after {
              display: block;
              width: 50px;
              height: 2px;
              margin: 14px auto 0;
              text-align: center;
              content: '';
              background: $primary-color;
            }
          }
        }
      }
      ul {
        li {
          padding-bottom: 12px;
          font-size: $font-size-base;
          font-weight: 500;
          color: $font-color;
          .ranking {
            display: inline-block;
            width: 23px;
            margin-right: 15px;
            text-align: center;
          }
          &:first-child {
            .rankingone {
              width: 23px;
              height: 13px;
              font-size: 0;
              vertical-align: middle;
              background: url(../images/home-icon.png) no-repeat 0 -26px;
            }
          }
          &:nth-of-type(2) {
            .rankingtwo {
              width: 23px;
              height: 13px;
              font-size: 0;
              vertical-align: middle;
              background: url(../images/home-icon.png) no-repeat -26px -26px;
            }
          }
          &:nth-of-type(3) {
            .rankingthree {
              width: 23px;
              height: 13px;
              font-size: 0;
              vertical-align: middle;
              background: url(../images/home-icon.png) no-repeat -52px -26px;
            }
          }
          .num {
            float: right;
            margin-right: 20px;
          }
        }
      }
    }
    .hot {
      height: 238px;
      margin-top: 20px;
      h3 {
        i.icons {
          background: url(../images/home-icon.png) no-repeat -130px 0;
        }
      }
      .hotbd {
        padding: 10px 0 0 10px;
        .main {
          width: 100%;
          height: 160px;
        }
        ul {
          overflow: hidden;
          li {
            float: left;
            padding: 2px 10px;
            margin-right: 15px;
            margin-bottom: 15px;
            font-size: $font-size;
            color: $primary-color;
            background: #f2faff;
            &:nth-of-type(2n) {
              // color: #587dde;
            }
          }
        }
      }
    }
    .share {
      height: 162px;
      margin-top: 20px;
      h3 {
        i.icons {
          background: url(../images/home-icon.png) no-repeat -182px 0;
        }
      }
      .sharebd {
        ul.ullist {
          padding-top: 20px;
          li {
            position: relative;
            float: left;
            width: 33%;
            height: 81px;
            text-align: center;
            i.useri {
              position: absolute;
              top: -12px;
              right: 12px;
              z-index: 9;
              display: inline-block;
              width: 24px;
              height: 28px;
            }

            .userinfo {
              width: 43px;
              height: 43px;
              border-radius: 50%;
            }
            &:first-child {
              i.useri {
                background: url(../images/home-icon.png) no-repeat 0 -39px;
              }
            }
            &:nth-of-type(2) {
              i.useri {
                background: url(../images/home-icon.png) no-repeat -26px -39px;
              }
            }
            &:nth-of-type(3) {
              i.useri {
                background: url(../images/home-icon.png) no-repeat -52px -39px;
              }
            }
          }
        }
      }
    }
  }
  .center-content {
    float: left;
    width: 622px;
    margin-left: 5px;
    .new-know {
      height: 442px;
      h3 {
        i.icons {
          background: url(../images/home-icon.png) no-repeat -26px 0;
        }
      }
      .new-konwbd {
        padding-top: 10px;
        .frist-news {
          padding: 0 10px 10px 20px;
          border-bottom: 1px solid #efe9e9;
          .title {
            margin-bottom: 10px;
            overflow: hidden;
            font-size: $btn-circle-size-sm;
            font-weight: bold;
            color: $font-color;
            text-overflow: ellipsis;
            white-space: nowrap;
            &:hover {
              color: $primary-color;
              cursor: pointer;
            }
          }
          span {
            display: inline-block;
            width: 90%;
            height: 18px;
            overflow: hidden;
            font-size: $font-size;
            color: $font-color-sm;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        ul.ullist {
          li {
            height: 43px;
            padding-left: 20px;
            line-height: $ul-line-height;
            &:hover {
              span {
                color: $primary-color;
                cursor: pointer;
              }
            }
            span {
              display: inline-block;
              width: 80%;
              overflow: hidden;
              font-size: $font-size;
              color: $font-color;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            span::before {
              display: inline-block;
              width: 5px;
              height: 5px;
              margin-right: 10px;
              vertical-align: middle;
              content: '';
              background: #0164f1;
              border-radius: 50%;
            }
            &:nth-of-type(2n) {
              background: #f9fafa;
            }
            i {
              float: right;
              padding-right: 20px;
              font-size: $tag-font-size;
              font-style: normal;
            }
          }
        }
      }
    }
    .read-list {
      height: 367px;
      margin-top: 20px;
      h3 {
        i.icons {
          background: url(../images/home-icon.png) no-repeat -78px 0;
        }
      }
    }
    .recommend {
      height: 417px;
      margin-top: 20px;
      h3 {
        i.icons {
          background: url(../images/home-icon.png) no-repeat -156px 0;
        }
      }
      ul.ullist {
        li {
          height: 43px;
          padding-left: 20px;
          line-height: $ul-line-height;
          &:hover {
            span {
              color: $primary-color;
              cursor: pointer;
            }
          }
          span {
            display: inline-block;
            width: 80%;
            overflow: hidden;
            font-size: $font-size;
            color: $font-color;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          &:nth-of-type(2n) {
            background: #f9fafa;
          }
          i {
            display: inline-block;
            width: 17px;
            height: 18px;
            margin-right: 10px;
            font-style: normal;
            text-align: center;
            vertical-align: top;
          }
          &:first-child {
            i {
              font-size: 0;
              vertical-align: super;
              background: url(../images/home-icon.png) no-repeat 0 -67px;
            }
          }
          &:nth-of-type(2) {
            i {
              font-size: 0;
              vertical-align: super;
              background: url(../images/home-icon.png) no-repeat -17px -67px;
            }
          }
          &:nth-of-type(3) {
            i {
              font-size: 0;
              vertical-align: super;
              background: url(../images/home-icon.png) no-repeat -34px -67px;
            }
          }
        }
      }
    }
  }
  .right-content {
    float: right;
    width: 243px;
    .login-info {
      height: 342px;
      .guide {
        margin: 10px 5px;
        background: url(../images/home-no-login.png) no-repeat top right;
        h1 {
          i {
            display: inline-block;
            width: 26px;
            height: 26px;
            margin-right: 10px;
            vertical-align: middle;
            background: url(../images/home-icon.png) no-repeat -52px 0;
          }

          font-size: $btn-font-size-sm;
          line-height: $h-line-height;
        }
      }
      .num {
        font-size: $font-size;
        color: $font-color-sm;
        .files-num {
          padding: 2px 5px;
          margin-right: 5px;
          font-size: $font-size-lg;
          font-weight: bold;
          color: $color-blue;
          background: #f0f7ff;
          border: 1px solid #e0ecfb;
        }
        i {
          margin: 0 5px;
          font-style: normal;
          color: $color-red;
        }
      }
      ul {
        overflow: hidden;
        li {
          float: left;
          width: 50%;
          padding: 15px 0;
          font-size: $font-size;
          color: $font-color;
          cursor: pointer;
          i {
            margin-right: 5px;
            color: $primary-color;
          }
        }
      }
    }
    .map {
      margin-top: 20px;
      h3 {
        i.icons {
          background: url(../images/home-icon.png) no-repeat -104px 0;
        }
      }
      ul {
        li {
          width: 200px;
          height: 195px;
          margin: 15px auto 0;
          cursor: pointer;
          border: 1px solid #e0ecfb;
          &:hover {
            border: 1px solid $primary-color;
            .title {
              color: $primary-color;
            }
          }
          .map-img {
            height: 102px;
            vertical-align: middle;
            border: 1px solid #e0ecfb;
            img {
              display: block;
              width: 100%;
              height: 100%;
              margin: auto;
            }
            .no-img {
              margin: 0;
              margin-top: 10px;
            }
          }

          .map-info {
            padding: 7px;
            border: 1px solid #efe9e9;
            border-top: 0;
            p {
              margin-bottom: 5px;
              font-size: $tag-font-size;
              color: $font-more-color;
              i {
                padding-right: 5px;
                font-size: $font-size;
                font-weight: 500;
              }
            }
            .title {
              font-size: $font-size;
              font-weight: 500;
              color: $font-color-sm;
            }
            .message {
              height: 24px;
              overflow: hidden;
              line-height: $btn-circle-size-sm;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
}
.footer {
  width: 100%;
  height: 80px;
  padding-top: 25px;
  font-size: $font-size-sm;
  color: $font-more-color;
  text-align: center;
  background: $white;
  p {
    margin-bottom: 0;
  }
}
</style>