<template>
	<view class="flex-col justify-start relative page" :style="{ backgroundImage: 'url(' + bkgPubilcPath + ')' }">
	  <view class="section"></view>
	  <text class="text pos">公众号动态</text>
	  <view class="flex-col pos_2">
	    <view class="flex-row items-center mt-12 list-item" v-for="(item, index) in articleList" :key="index" @click="goToActicle(item)">
	      <view class="flex-col flex-1">
	        <text class="self-stretch font">{{ item.title }}</text>
	        <text class="self-start font_2 mt-13">{{ item.publishTime }}</text>
	      </view>
	      <image
	        class="shrink-0 image ml-17" mode="aspectFill"
	        :src="publicPath + item.image"
	      />
	    </view>
	  </view>
	</view>
</template>

<script setup>
	import {onMounted, ref} from 'vue'
	import { homeUrl } from '../../../common/globalImagesUrl';
	import { baseUrl } from '../../../api/request';
	import { publicPath,bkgPubilcPath } from '../../../common/globalImagesUrl';
	import { getFZXZFont,getFonts } from '../../../common/globalFont';
	import { onLoad } from "@dcloudio/uni-app";
	const bkgUrl =  ref(homeUrl + '/bkg.png')
	const articleList = ref([])
	const cookie = wx.getStorageSync('cookie')
	
	onLoad(() => {
		getFZXZFont()
		getFonts()
	})
	
	onMounted(() => {
		getArticle()
	})
	
	const getArticle = async () => {
		const res = await uni.request({
			url: baseUrl + '/article/query',
			method: 'GET',
			header: {
				cookie
			}
		})
		articleList.value = res.data.data
	}
	
	const goToActicle = (item) => {
		uni.navigateTo({
			url: '../activityHome/activityHome?url=' + item.url
		})
	}
	
	
</script>

<style scoped lang="scss">
.mt-13 {
  margin-top: 24.38rpx;
}
.ml-17 {
  margin-left: 31.88rpx;
}
.page {
  background-color: #ffffff;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
}
// .section {
//   background-image: url('https://ide.code.fun/api/image?token=67d8b4914ae84d001229d9b4&name=0b6e7fe8316ba6563829f8a04827cf17.png');
//   background-size: 100% 100%;
//   background-repeat: no-repeat;
//   width: 750rpx;
//   height: 1490.63rpx;
// }
.text {
  color: #9d2624;
  font-size: 37.5rpx;
  font-family: FangZhengFonts;
  line-height: 35.89rpx;
}
.pos {
  position: absolute;
  left: 21.81rpx;
  top: 49.28rpx;
}
.pos_2 {
  position: absolute;
  left: 20.63rpx;
  right: 16.88rpx;
  top: 123.75rpx;
  padding-bottom: 40rpx;
}
.list-item {
  padding: 22.5rpx 26.25rpx;
  background-color: #ffffff;
  border-radius: 18.75rpx;
}
.list-item:first-child {
  margin-top: 0;
}
.font {
  font-size: 30rpx;
  font-family: FangZhengFonts;
  line-height: 35.63rpx;
  color: #323232;
}
.font_2 {
  font-size: 28.13rpx;
  font-family: FangZhengFonts;
  line-height: 27.47rpx;
  color: #929292;
}
.image {
  border-radius: 9.38rpx;
  width: 151.88rpx;
  height: 114.38rpx;
}
@import url(../../../common/css/global.css);
</style>
