105 lines
2.0 KiB
Vue
105 lines
2.0 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="index=>value = index">
|
|
<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 >
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
title: 'Hello UNI',
|
|
value: 0,
|
|
list: [{
|
|
name: '关注',
|
|
}, {
|
|
name: '推荐',
|
|
}, {
|
|
name: '电影'
|
|
}, {
|
|
name: '科技'
|
|
}, {
|
|
name: '音乐'
|
|
}, {
|
|
name: '美食'
|
|
}, {
|
|
name: '文化'
|
|
}, {
|
|
name: '财经'
|
|
}, {
|
|
name: '手工'
|
|
}]
|
|
}
|
|
},
|
|
|
|
|
|
|
|
onLoad() {
|
|
console.log(uni.$uv.os())
|
|
},
|
|
methods: {
|
|
click(item) {
|
|
console.log('item', item);
|
|
},
|
|
open() {
|
|
this.$refs.calendar.open();
|
|
},
|
|
confirm(e) {
|
|
console.log('日历选择：',e)
|
|
}
|
|
}
|
|
}
|
|
</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>
|