83 lines
1.8 KiB
Vue
83 lines
1.8 KiB
Vue
<template>
|
|
<uv-tabs :list="list" @click="click"></uv-tabs>
|
|
<view class="content">
|
|
<view class="text-area">
|
|
<text class="title">{{ title }}</text>
|
|
</view>
|
|
<uv-icon name="photo" size="30" color="#909399"></uv-icon>
|
|
<button class="uv-reset-button">点击登录</button>
|
|
<button>点击登录</button>
|
|
<view>
|
|
<uv-calendar ref="calendar" mode="single" @confirm="confirm"></uv-calendar>
|
|
<button @click="open">打开</button>
|
|
</view>
|
|
</view>
|
|
<uv-tabbar :value="value" @change="val => value = val">
|
|
<uv-tabbar-item text="首页" icon="home" dot></uv-tabbar-item>
|
|
<uv-tabbar-item text="放映厅" icon="photo" badge="3"></uv-tabbar-item>
|
|
<uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
|
|
<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
|
|
</uv-tabbar>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
|
|
const title = ref('Hello UNI');
|
|
const value = ref(0);
|
|
const list = [
|
|
{ name: '关注' },
|
|
{ name: '推荐' },
|
|
{ name: '电影' },
|
|
{ name: '科技' },
|
|
|
|
];
|
|
|
|
const calendar = ref(null);
|
|
|
|
const click = (item) => {
|
|
console.log('item', item);
|
|
};
|
|
const open = () => {
|
|
if (calendar.value) calendar.value.open();
|
|
};
|
|
const confirm = (e) => {
|
|
console.log('日历选择：', e);
|
|
};
|
|
|
|
onMounted(() => {
|
|
if (uni && uni.$uv && uni.$uv.os) {
|
|
console.log(uni.$uv.os());
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.logo {
|
|
height: 200rpx;
|
|
width: 200rpx;
|
|
margin-top: 200rpx;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 50rpx;
|
|
}
|
|
.text-area {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.title {
|
|
font-size: 36rpx;
|
|
color: $uni-color-primary;
|
|
}
|
|
.icon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
</style> |