<template>
  <div class="Topic">
    <div class="Topic-item" v-for="(item, index) in 10" :key="index">
      <h2>#闲置物品交易</h2>
      <span>去看看</span>
    </div>
    <AiLogin ref="login"/>
  </div>
</template>
<script>
  import { mapActions, mapState } from 'vuex'

  export default {
    name: 'Topic',
    appName: '更多话题',

    data () {
      return {
      }
    },

    computed: {
      ...mapState(['user', 'token'])
    },

    onLoad() {
    },

    methods: {
      ...mapActions(['autoLogin', 'authCheck'])
    }
  }
</script>

<style scoped lang="scss">
  .Topic {
    min-height: 100vh;
    background: #fff;
    padding-bottom: 40px;
    border-top: 24px solid #f4f6fa;
    box-sizing: border-box;

    div {
      box-sizing: border-box;
    }

    .Topic-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 40px 32px;

      h2 {
        font-size: 30px;
        color: #333333;
      }

      span {
        width: 126px;
        height: 52px;
        line-height: 52px;
        text-align: center;
        border-radius: 26px;
        border: 2px solid #2d7dffff;
        font-size: 24px;
        color: #2D7DFF;
      }
    }
  }
</style>
