<script setup lang="ts">
import NavBar from '@/components/NavBar.vue'
import VueQrcode from '@chenfengyuan/vue-qrcode'
</script>

<route lang="json5">
{
  style: {
    navigationBarTitleText: '官方社群',
    navigationBarBackgroundColor: '#fff',
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="official-community-page">
    <NavBar />
    <view class="p-15 text-center bg-white rounded-10 m-15 shadow-[0_0_10px_rgba(0,0,0,0.1)]">
      <view class="text-16 font-bold text-#333">扫码进入</view>
      <wd-icon name="arrow-down" color="#333" size="18px"></wd-icon>
      <view class="btn-gradient rounded-full w-fit mx-auto text-16 text-white py-10 px-15">
        微聊总群：50101011
      </view>
      <VueQrcode class="!w-270 !h-270 mx-auto" :value="'qrcodeValue'" :options="{ size: 600 }" />
    </view>
    <view class="p-15 text-center bg-white rounded-10 m-15 shadow-[0_0_10px_rgba(0,0,0,0.1)]">
      <view class="text-16 font-bold text-#333">扫码进入</view>
      <wd-icon name="arrow-down" color="#333" size="18px"></wd-icon>
      <view class="btn-gradient rounded-full w-fit mx-auto text-16 text-white py-10 px-15">
        QQ群2群：1011101011
      </view>
      <VueQrcode class="!w-270 !h-270 mx-auto" :value="'qrcodeValue'" :options="{ size: 600 }" />
    </view>
  </view>
</template>

<style scoped>
.official-community-page {
  min-height: 100vh;
  padding-bottom: 100rpx;
  background-image: url('@/static/images/bg.png');
  background-position: top;
  background-size: cover;
}
</style>
