<script setup>
|
// import { useCounterStore } from '@/stores/counter'
|
const dataInfo = reactive({
|
id: 1,
|
name: 'test',
|
});
|
|
const counterStore = useCounterStore();
|
|
const { width, height } = useWindowSize();
|
|
const { userName, userInfo } = useUserInfo();
|
</script>
|
<template>
|
<div class="about uitl-test flex flex-col">
|
<h1 class="bg-deep-blue">This is an about page</h1>
|
|
<h3>{{ dataInfo.name }}</h3>
|
|
<div class="py-2 text-center">
|
userName: {{ userName }}
|
<p>{{ userInfo }}</p>
|
</div>
|
|
<div class="py-2 text-center">window size: {{ width }} / {{ height }}</div>
|
<div class="w-full p-1 flex flex-col items-center">
|
<div>
|
{{ counterStore.count }}
|
//
|
{{ counterStore.doubleCount }}
|
</div>
|
|
<div class="flex flex-row gap-x-2">
|
<el-button icon="plus" @click="counterStore.increment()"></el-button>
|
<el-button icon="minus" @click="counterStore.decrement()"></el-button>
|
</div>
|
</div>
|
|
<ul class="flex flex-col">
|
<li class="p-2 bg-conic-300 from-[red] to-[blue]">第一个</li>
|
<li class="p-2 text-green-300 border-2" v-for="item in 10" :key="item">测试{{ item }}</li>
|
</ul>
|
</div>
|
</template>
|
|
<style>
|
@media (min-width: 1024px) {
|
.about {
|
min-height: 100vh;
|
display: flex;
|
align-items: center;
|
}
|
}
|
</style>
|
