70 lines
2.1 KiB
Vue
Executable File
70 lines
2.1 KiB
Vue
Executable File
<template>
|
|
<div class="mx-auto bg-blue-600 max-w-86 relative">
|
|
<header class="p-4 pt-12">
|
|
<div class="flex flex-row">
|
|
<div class="flex-1">
|
|
<span class="font-sans text-xs text-gray-300">DemoDemo {{ activeArticle.id }}</span>
|
|
<h1 class="font-bold text-white">Demo Demo</h1>
|
|
</div>
|
|
<div class="bg-white rounded-full flex bg-opacity-15 h-9 w-9 items-center justify-center">
|
|
<div class="border-light-200 border-1 h-3 w-3 relative">
|
|
<div class="rounded-full bg-yellow-400 h-2 -top-1 -right-1 w-2 absolute"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6">
|
|
<ul class="bg-white rounded-xl flex bg-opacity-20 mx-10 text-white text-xs justify-around overflow-hidden">
|
|
<li
|
|
v-for="item in navbar.list"
|
|
:key="item" class="rounded-md cursor-pointer bg-opacity-30 py-2 px-4"
|
|
:class="{'bg-white': item===navbar.active }"
|
|
@click="navbar.setPage(item)"
|
|
>
|
|
{{ item }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
|
|
<PageHome v-if="navbar.active === '主页'" v-model:id=activeArticle.id />
|
|
<PageQiye v-if="navbar.active === '企业'"/>
|
|
<PageFile v-if="navbar.active === '文件'"/>
|
|
<PageWeibo v-if="navbar.active === '微博'"/>
|
|
<PageArticle v-if="activeArticle.id !== 0" class="top-0 right-0 bottom-0 left-0 absolute"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {reactive} from "vue"
|
|
import PageHome from "./components/PageHome.vue"
|
|
import PageFile from "./components/PageFile.vue"
|
|
import PageWeibo from "./components/PageWeibo.vue"
|
|
import PageQiye from "./components/PageQiye.vue"
|
|
import PageArticle from "./components/PageArticle.vue"
|
|
|
|
const activeArticle = reactive({
|
|
id: 0
|
|
})
|
|
|
|
const navbar = reactive({
|
|
list: ['主页', '企业', '文件', '微博'],
|
|
active: '主页',
|
|
setPage: name => {
|
|
console.log("active:", name)
|
|
navbar.active = name
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<style>
|
|
#app {
|
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
color: #2c3e50;
|
|
background: #fafafa;
|
|
padding: 2rem;
|
|
}
|
|
</style>
|