<template>
  <div>
    <div class="center">
      <svg
        id="图形"
        style="width:60px;height:60px;"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px"
        y="0px"
        width="1024px"
        height="1024px"
        viewBox="0 0 1024 1024"
        enable-background="new 0 0 1024 1024"
        xml:space="preserve"
      ><path
        class="svgpath"
        data-index="path_0"
        fill="#35495e"
        d="M512 816.64 51.2 985.6l460.8-947.2 460.8 947.2L512 816.64 512 816.64zM509.44 207.36 189.44 862.72l317.44-117.76L506.88 207.36 509.44 207.36zM509.44 207.36"
      /></svg>

      <h1
        class="vux-title"
        style="display:none;"
      >
        <span
          slot="icon"
          class="demo-icon"
          style="font-size:60px;color:#35495e;display: block;"
        >&#xe637;</span>
      </h1>
      <p class="vux-notice">
        v{{ version }}
      </p>
    </div>
    <group>
      <cell
        title="Demo"
        link="/demo"
        value="演示"
      >
        <span
          slot="icon"
          class="demo-icon"
          style="color:#F70968"
        >&#xe633;</span>
      </cell>
    </group>
    <group>
      <cell
        title="project description"
        link="project/donate"
      >
        <span
          slot="icon"
          class="demo-icon"
          style="color:red;"
        >&#xe630;</span>
        <div
          slot="value"
          class="badge-value vux-center-v"
        >
          <badge text="项目说明" />
        </div>
      </cell>
      <cell
        title="Github"
        link="https://github.com/cheanjia/cvux"
        value="Star me"
      >
        <span
          slot="icon"
          class="demo-icon"
          style="color:#35495e;"
        >&#xe62f;</span>
      </cell>
    </group>
  </div>
</template>

<script>
import { Cell, Group, Badge } from './components/_index'
const version = require('../package.json').version
export default {
  components: {
    Cell,
    Group,
    Badge
  },
  data () {
    return {
      version: version
    }
  }
}
</script>

<style lang="less">
@import './demos/style';
.center {
  margin-top: 15px;
  text-align: center;
}
.vux-notice {
  color: #666;
  line-height: 40px;
}
.vux-title {
  vertical-align: middle;
  text-align: center;
  color: #04BE02;
  display: inline-block;
  width: 75px;
  height: 75px;
  line-height: 75px;
  border-radius: 50%;
}
body {
  font-family: Helvetica, sans-serif;
  background-color: #fbf9fe;
}
</style>
