跳转

pages/newEnglish/components/pinPage.vue

@@ -0,0 +1,48 @@
+<template>
+	<div>
+		<!-- 单词区 -->
+		<selectWordsVue :active-words="activeWords" :activeWord="activeWord"></selectWordsVue>
+		<!-- 显示区 -->
+		<selectTypesVue activeSelect="2"></selectTypesVue>
+		<!-- 拼读区 -->
+		<view>
+			<view v-for="item in data.list">
+				<view></view>
+			</view>
+		</view>
+		<!-- 解释区 -->
+		<view>
+			{{activeWord.jianyi.join(';')}}
+		</view>
+		<!-- 音标区 -->
+		
+		<!-- 图片区 -->
+		
+		<!-- 选择区 -->
+	</div>
+</template>
+
+<script setup>
+	import selectWordsVue from './selectWords.vue';
+	import selectTypesVue from './selectTypes.vue';
+	import { reactive } from 'vue';
+	const props = defineProps({
+		activeWord: {
+			type: Object,
+		},
+		activeWords: {
+			type: Array
+		},
+	})
+	
+	const data = reactive({
+		list: [],
+		selectList: [],
+	})
+	setTimeout(() => {
+		console.log('activeWord',props.activeWord)
+	})
+</script>
+
+<style>
+</style>

pages/newEnglish/components/selectTypes.vue

@@ -0,0 +1,32 @@
+<template>
+	<view class="select-types">
+		<view :class="{active: activeSelect == 1}">学</view>
+		<view :class="{active: activeSelect == 2}">></view>
+		<view :class="{active: activeSelect == 2}">拼</view>
+		<view :class="{active: activeSelect == 3}">></view>
+		<view :class="{active: activeSelect == 3}">读</view>
+		<view :class="{active: activeSelect == 4}">></view>
+		<view :class="{active: activeSelect == 4}">选</view>
+		<view :class="{active: activeSelect == 5}">></view>
+		<view :class="{active: activeSelect == 5}">背</view>
+	</view>
+</template>
+
+<script setup>
+	defineProps({
+		activeSelect: {
+			type: String,
+			required: true
+		}
+	})
+</script>
+
+<style lang="scss" scoped>
+	.select-types {
+		display: flex;
+		justify-content: space-between;
+	}
+	.active {
+		color: red;
+	}
+</style>

pages/newEnglish/components/selectWords.vue

@@ -0,0 +1,26 @@
+<template>
+	<view class="select-words">
+		<span v-for="item in activeWords" :class="{active: activeWord.id == item.id}">{{item.name}}</span>
+	</view>
+</template>
+
+<script setup>
+	const props = defineProps({
+		activeWord: {
+			type: Object,
+		},
+		activeWords: {
+			type: Array
+		},
+	})
+</script>
+
+<style lang="scss" scoped>
+	.select-words {
+		display: flex;
+		justify-content: space-between;
+	}
+	.active {
+		color: red;
+	}
+</style>