<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="relative px-15 text-center bg-white rounded-10 m-15 shadow-[0_0_10px_rgba(0,0,0,0.1)]"
    >
      <image
        class="w-full mx-auto"
        src="@/static/images/page-sub/official-community/image-1.jpg"
        mode="widthFix"
      />
      <a
        href="https://doudlj.org/joinchat/Jol7Vt58a2aCrjsXm9D_LA"
        class="absolute bottom-15 left-50% -translate-x-1/2"
      >
        点击进入
      </a>
    </view>
    <view
      class="relative px-15 text-center bg-white rounded-10 m-15 shadow-[0_0_10px_rgba(0,0,0,0.1)]"
    >
      <image
        class="w-full mx-auto"
        src="@/static/images/page-sub/official-community/image-2.jpg"
        mode="widthFix"
      />
      <a href="https://doudlj.org/NiPing95" class="absolute bottom-15 left-50% -translate-x-1/2">
        点击进入
      </a>
    </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>
