<template>
  <section class="AppVote">
    <AiGroup title="前置图文" noBorder description>
      <u-parse :html="detail.frontDisplay"/>
    </AiGroup>
    <div class="voteItem" flex @click="handleDetail(1)">
      <div class="fill">
        <b class="mar-b8" v-text="`月落乌啼霜满天`"/>
        <div class="color-999 line3" v-text="`微信公众号是开发者或商家在微信公众平台上申请的应用账号，该帐号与QQ账号互通，该帐号与账号互通…`"/>
      </div>
      <div class="thumb">
        <span v-text="`12345票`"/>
      </div>
    </div>
    <AiGroup title="结尾图文" noBorder description>
      <u-parse :html="detail.endDisplay"/>
    </AiGroup>
  </section>
</template>

<script>
export default {
  name: "AppVote",
  appName: "公众投票",
  data() {
    return {
      detail: {}
    }
  },
  methods: {
    getDetail() {
      this.$http.post("/app/vote/detail", null, {})
    },
    getList() {
      this.$http.post("/app/vote/list", null, {})
    },
    handleDetail(id) {
      uni.navigateTo({url: './voteDetail?id=' + id})
    }
  },
  created() {
    // this.getDetail()
    // this.getList()
  },


}
</script>

<style lang="scss" scoped>
.AppVote {
  min-height: 100vh;
  background: #fff;

  .voteItem {
    height: 240px;
    border: 1px solid #CCCCCC;
    border-radius: 16px;
    margin: 0 32px 24px;
    padding: 24px;
    box-sizing: border-box;
    font-family: PingFangSC;

    b {
      font-size: 34px;
      color: #333333;
      display: block;
      line-height: 48px;
    }

    .line3 {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }

    .thumb {
      position: relative;
      flex-shrink: 0;
      margin-left: 24px;
      width: 192px;
      height: 192px;
      border-radius: 8px;
      overflow: hidden;
      background-repeat: no-repeat;
      background-size: 100%;
      background-color: #eee;

      & > span {
        position: absolute;
        right: 0;
        top: 0;
        padding: 0 8px;
        line-height: 44px;
        background: #FF883C;
        color: #fff;
      }
    }
  }
}
</style>
