wx-miniapp/src/pages/HuiShengHuo/ActivityList/ActivityDetail/index.vue

<template>
  <view class="page HuoDongXiangQing flex-v">

    <view class="flex-item">
      <view>

        <!-- 活动主要信息 -->
        <view class="MainInfo">
          <text>活动名称</text>
          <view class="SubInfo flex-h">
            <view class="flex-item">
              <text class="iconfont iconxianshi"></text>
              <text>1245</text>
            </view>
            <view class="Time">
              <text class="iconfont iconshijian"></text>
              <text>2020-08-07</text>
            </view>
          </view>
          <view class="Line flex-h">
            <text>活动时间：</text>
            <text class="flex-item">2020-08-07 至 2020-08-08</text>
          </view>
          <view class="Line flex-h">
            <text>活动地址：</text>
            <text class="flex-item">南京市江宁区丽园荟广场</text>
          </view>
          <view class="Line flex-h">
            <text>报名截止：</text>
            <text class="flex-item">2020-08-06 18:30</text>
          </view>
        </view>

        <!-- 活动详情 -->
        <view class="DetailContainer">
          <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/huodongxiangqing.png"></image>
          <view class="Text"></view>
        </view>

        <!-- 投票 -->
        <view class="VoteContainer">
          <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/toupiao.png"></image>
          <view class="List">
            <view v-for="(item, index) in VoteList" :key="index">
              <text>{{index + 1}}.{{item.Question}}</text>
              <view class="flex-h" v-for="(subItem, subIndex) in item.Answer" :key="subIndex">
                <text class="iconfont iconweigouxuan" v-if="!subItem.active"></text>
                <text class="iconfont icongouxuan" v-else></text>
                <view class="flex-item">
                  <text>{{subItem.name}}</text>
                </view>
              </view>
            </view>
          </view>
          <text>提交</text>
        </view>

      </view>
    </view>

    <!-- 底部栏 -->
    <view class="Bottom flex-h">
      <view class="flex-item">
        <image class="centerLabel" mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/huishenghuo.png"></image>
      </view>
      <view class="flex-item">
        <image class="centerLabel" mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/fenxiang.png"></image>
      </view>
      <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/lijibaomingbtn.png"></image>
    </view>

  </view>
</template>

<script>

export default {
  name: 'HuoDongXiangQing',
  data () {
    return {
      DataLock: false,
      VoteList: [
        {
          Question: '问题1',
          Answer: [{ name: '答案1', active: false, id: '1' }, { name: '答案2', active: false, id: '2' }, { name: '答案3', active: false, id: '3' }]
        }, {
          Question: '问题2',
          Answer: [{ name: '答案1', active: false, id: '1' }, { name: '答案2', active: false, id: '2' }, { name: '答案3', active: false, id: '3' }]
        }, {
          Question: '问题3',
          Answer: [{ name: '答案1', active: false, id: '1' }, { name: '答案2', active: false, id: '2' }, { name: '答案3', active: false, id: '3' }]
        }, {
          Question: '问题4',
          Answer: [{ name: '答案1', active: false, id: '1' }, { name: '答案2', active: false, id: '2' }, { name: '答案3', active: false, id: '3' }]
        }, {
          Question: '问题5',
          Answer: [{ name: '答案1', active: false, id: '1' }, { name: '答案2', active: false, id: '2' }, { name: '答案3', active: false, id: '3' }]
        }
      ]
    }
  },
  components: {
  },
  created () {
    this.Init()
  },
  methods: {
    Init () {
    }
  }
}
</script>

<style lang="scss">
@import "page.scss";
</style>