You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

77 lines
1.4 KiB
Vue

<template>
<view class="content">
<image class="logo" src="@/static/logo.png"></image>
<view class="demo">
<hello-world :msg="model.count"></hello-world>
<u-button type="primary" :loading="$wait.is('*/incr')" @click="model.incr(1)"> Click </u-button>
<u-button type="warning" @click="switchLanguage()">
{{ $i18n.locale === 'en' ? '/EN' : 'EN/' }}
</u-button>
</view>
</view>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue';
import model from './model';
@Component({
components: {
HelloWorld,
},
})
export default class Home extends Vue {
/**
* 页面Module
*/
model = model;
title = 'Hello';
/**
* 切换语言
*/
switchLanguage(): void {
this.$i18n.locale = this.$i18n.locale === 'en' ? 'cn' : 'en';
}
onLoad(): void {
console.log('Page onLoad()...');
}
}
</script>
<style lang="scss" scoped>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.logo {
height: 200rpx;
width: 200rpx;
margin: 200rpx auto 50rpx auto;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.demo {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 300rpx;
}
}
</style>