54 lines
1.1 KiB
Vue
54 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<view style="display: flex;">
|
||
|
|
<view>
|
||
|
|
<image src="../../static/images/sign/return.png" />
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<u-tabs :lineWidth="25" :lineHeight="2" itemStyle="padding:11px;" lineColor="#3477fc" :list="list1"
|
||
|
|
@change="tabChange"></u-tabs>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
<view v-if="NewIndex === 1">
|
||
|
|
<view style="position: fixed; top: 0;bottom: 1122rpx; left: 0; right: 0;background: linear-gradient(0deg, #ffffff, #c9f6f5); z-index: -1;"></view>
|
||
|
|
<messagenotificationVue></messagenotificationVue>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view v-if="NewIndex === 0">
|
||
|
|
<addressbookVue></addressbookVue>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import {
|
||
|
|
reactive,
|
||
|
|
ref
|
||
|
|
} from "vue";
|
||
|
|
|
||
|
|
import messagenotificationVue from "./messagenotification.vue";
|
||
|
|
import addressbookVue from "./addressbook.vue";
|
||
|
|
const list1 = reactive([{
|
||
|
|
name: '通讯录'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '消息'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
|
||
|
|
|
||
|
|
const NewIndex = ref(0);
|
||
|
|
|
||
|
|
function tabChange(index) {
|
||
|
|
console.log('当前选中的选项卡索引：', index);
|
||
|
|
NewIndex.value = index.index;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
image {
|
||
|
|
width: 31rpx;
|
||
|
|
height: 44rpx;
|
||
|
|
}
|
||
|
|
</style>
|