<template>
  <div class="main">
    <div class="main-intro">
      <div class="main-intro-info">
        <h1 class="main-intro-info-libname">{{libName}}</h1>
        <h3 class="main-intro-info-desc">{{desc}}</h3>
        <a class="main-intro-info-button" href="/入门/快速上手.html">快速开始</a>
        <div class="main-intro-info-user">
          <p class="title">这些项目正在使用</p>
          <ul class="users">
            <li class="user-item" v-for="(user,index) in users" :key="index">{{user}}</li>
          </ul>
        </div>
        <div class="main-intro-info-contributor">
          <p class="title">贡献人员</p>
          <p class="contributor">{{contributor.join('、')}}</p>
        </div>
      </div>
      <div class="main-intro-show" :style="'background: url(' + background + ')'">
        <img v-for="(pic,index) in gifs" :src="pic" :key="index" />
      </div>
    </div>
    <div class="main-highlights">
      <div class="main-highlights-highlight" v-for="(item,index) in highlights" :key="index">
        <h1 class="main-highlights-highlight-order">{{item.order}}</h1>
        <div class="main-highlights-highlight-info">
          <h3 class="main-highlights-highlight-title">{{item.title}}</h3>
          <p class="main-highlights-highlight-desc">{{item.desc}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dotplot from '../public/img/index/dotplot.gif'
import histogram from '../public/img/index/histogram.gif'
import linechart from '../public/img/index/linechart.gif'
import piechart from '../public/img/index/piechart.gif'
import ringdiagram from '../public/img/index/ringdiagram.gif'
import background from '../public/img/index/pic_bg.png'
export default {
  name: 'Index',
  data() {
    return {
      libName: 'Octopus-Pro ',
      desc: '2345中后台前端解决方案',
      highlights: [
        {
          order: '01',
          title: '快速搭建后台界面',
          desc: '能够在五分钟内，快速搭建出统一的UI后台界面'
        },{
          order: '02',
          title: '统一的开发模式',
          desc: '统一前端开发方案，降低跨项目维护成本'
        },{
          order: '03',
          title: '持续更新',
          desc: '以issues接受问题建议不断更新'
        }
      ],
      users: ['中台权限中心', '移动推送平台', '元数据平台', '报表分析平台', '画像中心', '网关系统', '预警管理系统', '云图任务中心', '云图数据中心', '智能推荐平台'],
      contributor: ['杨明', '刘欣', '孙鹏', '许诚', '夏婷婷', '戈正丽'],
      gifs: [dotplot, histogram, linechart, piechart, ringdiagram],
      background
    }
  }
}
</script>

<style lang="stylus">
  .main
    margin 0 auto
    width 1220px
    .main-intro
      margin-top 20px
      display flex
      justify-content space-between
      .main-intro-info
        .main-intro-info-libname
          margin-top 60px
          font-size 60px
          color #3
        .main-intro-info-desc
          margin-top 8px
          font-size 36px
          color #6
          font-weight 400
        .main-intro-info-button
          display block
          width 170px
          height 50px
          line-height 50px
          text-align center
          color #f
          font-size 16px
          background linear-gradient(157deg,  #73adff 0%,  #3699ff 98%)
          box-shadow: 0px 9px 22px 0px rgba(95, 155, 241, 0.5)
          border-radius 25px
          &:hover
            background linear-gradient(157deg,  #3F8AF9 0%,  #3F8AF9 98%)
        .main-intro-info-user
          margin-top 60px
          .title
            font-size 18px
            margin-bottom 0px
          ul
            padding 0
            font-size 14px
            width 540px
            list-style none
            display flex
            flex-flow wrap
            li
              width 180px
        .main-intro-info-contributor
          margin-top 30px
          .title
            font-size 18px
            margin-bottom 0
          p
            font-size 14px
      .main-intro-show
        position relative
        margin-top 80px
        width 640px
        height 420px
        img
          position absolute
          &:nth-child(1)
            top 102px
            left 109px
          &:nth-child(2)
            top 170px
            left 529px
          &:nth-child(3)
            top 268px
            left 343px
          &:nth-child(4)
            top 217px
            left 31px
          &:nth-child(5)
            top 60px
            left 300px
    .main-highlights
      margin-top 85px
      display flex
      justify-content space-between
      .main-highlights-highlight
        width 333px
        height 60px
        display flex
        .main-highlights-highlight-order
          margin 0
          width 60px
          height 60px
          font-size 48px
          color #ecf5ff
          line-height 60px
          text-align center
        .main-highlights-highlight-info
          margin-left 9px
          height 60px
          .main-highlights-highlight-title
            margin 6px 0 0
            height 30px
            font-size 22px
            color #6
          .main-highlights-highlight-desc
            margin 0
            height 18px
            font-size 12px
            color #9
</style>
