uniProject/pages/newEnglish/components/mainCard.vue

<template>
	<view>
		<swiper class="swiper" :indicator-dots="false" :autoplay="false" :circular="false">
			<swiper-item>
				<view class="swiper-item uni-bg-red">
					学 
					<hr />{{data.wordInfo}}
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-red">
					拼<hr />{{data.wordInfo}}
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">
					读<hr />{{data.wordInfo}}
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">
					选<hr />{{data.wordInfo}}
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">
					背<hr />{{data.wordInfo}}
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		reactive
	} from "vue";
	import * as httpApi from "@/api/word.js"
	import {
		onMounted
	} from 'vue';
	const props = defineProps({
		activeWord: {
			type: Object,
		},
		activeWords: {
			type: Array
		}
	})

	const data = reactive({
		wordInfo: null
	})

	function updateWordInfo() {
		httpApi.getWordInfo({
			wordId: props.activeWord.id
		}).then(res => {
			data.wordInfo = res.data;
		})
	}

	onMounted(() => {
		updateWordInfo();
	})
</script>

<style>
</style>