10 changed files with 152 additions and 86 deletions
@ -1,81 +1,29 @@ |
|||
:root { |
|||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif; |
|||
font-size: 16px; |
|||
line-height: 24px; |
|||
font-weight: 400; |
|||
|
|||
color-scheme: light dark; |
|||
color: rgba(255, 255, 255, 0.87); |
|||
background-color: #242424; |
|||
|
|||
font-synthesis: none; |
|||
text-rendering: optimizeLegibility; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-text-size-adjust: 100%; |
|||
} |
|||
|
|||
a { |
|||
font-weight: 500; |
|||
color: #646cff; |
|||
text-decoration: inherit; |
|||
} |
|||
a:hover { |
|||
color: #535bf2; |
|||
body, html, ul, ol { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
body { |
|||
margin: 0; |
|||
display: flex; |
|||
place-items: center; |
|||
min-width: 320px; |
|||
min-height: 100vh; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
h1 { |
|||
font-size: 3.2em; |
|||
line-height: 1.1; |
|||
ul, ol { |
|||
list-style: none; |
|||
} |
|||
|
|||
button { |
|||
border-radius: 8px; |
|||
border: 1px solid transparent; |
|||
padding: 0.6em 1.2em; |
|||
font-size: 1em; |
|||
font-weight: 500; |
|||
font-family: inherit; |
|||
background-color: #1a1a1a; |
|||
cursor: pointer; |
|||
transition: border-color 0.25s; |
|||
} |
|||
button:hover { |
|||
border-color: #646cff; |
|||
} |
|||
button:focus, |
|||
button:focus-visible { |
|||
outline: 4px auto -webkit-focus-ring-color; |
|||
} |
|||
|
|||
.card { |
|||
padding: 2em; |
|||
a { |
|||
text-decoration: none; |
|||
color: #666; |
|||
} |
|||
|
|||
#app { |
|||
max-width: 1280px; |
|||
margin: 0 auto; |
|||
padding: 2rem; |
|||
text-align: center; |
|||
a, |
|||
img { |
|||
border: 0; |
|||
} |
|||
|
|||
@media (prefers-color-scheme: light) { |
|||
:root { |
|||
color: #213547; |
|||
background-color: #ffffff; |
|||
} |
|||
a:hover { |
|||
color: #747bff; |
|||
} |
|||
button { |
|||
background-color: #f9f9f9; |
|||
} |
|||
} |
|||
input { |
|||
border: none; |
|||
background: transparent; |
|||
outline: none; |
|||
} |
|||
@ -1,13 +1,43 @@ |
|||
<template> |
|||
<h1>hello, world.</h1> |
|||
<a-layout style="height: 100vh;"> |
|||
|
|||
<a-layout-header class="header" style="padding: 0;"> |
|||
<div style="float: left; padding: 0 20px 0 20px;"><img src="@assets/vue.svg" alt=""/></div> |
|||
<a-menu |
|||
theme="dark" |
|||
mode="horizontal" |
|||
style="line-height: 64px;" |
|||
> |
|||
<a-menu-item key="curd" @click="pageName='curd'">Curd</a-menu-item> |
|||
<a-menu-item key="videoCenter" @click="pageName='videoCenter'">VideoCenter</a-menu-item> |
|||
</a-menu> |
|||
</a-layout-header> |
|||
|
|||
<a-layout class="page-wrapper"> |
|||
<div class="page-tab" v-if="pageName==='curd'"> |
|||
<Curd/> |
|||
</div> |
|||
<div class="page-tab" v-else-if="pageName==='videoCenter'"> |
|||
<VideoCenter/> |
|||
</div> |
|||
</a-layout> |
|||
|
|||
</a-layout> |
|||
</template> |
|||
|
|||
<script> |
|||
<script lang="ts"> |
|||
import Curd from '@views/page/Curd.vue'; |
|||
import VideoCenter from '@views/page/VideoCenter.vue'; |
|||
|
|||
export default { |
|||
name: "index" |
|||
components: {VideoCenter, Curd}, |
|||
data() { |
|||
return { |
|||
pageName: "curd", //默认选中 curd 页面 |
|||
}; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,61 @@ |
|||
<template> |
|||
<a-layout style="position: fixed; height: 100%; width: 100%;"> |
|||
|
|||
<a-layout-sider width="200" style="background: #fff"> |
|||
<a-menu |
|||
mode="inline" |
|||
:style="{ height: '100%', borderRight: 0 }" |
|||
> |
|||
<a-sub-menu key="CameraBase"> |
|||
<template #title> |
|||
<span> |
|||
CameraBase |
|||
</span> |
|||
</template> |
|||
<a-menu-item key="cbCamera">Camera</a-menu-item> |
|||
</a-sub-menu> |
|||
<a-sub-menu key="CameraMark"> |
|||
<template #title> |
|||
<span> |
|||
CameraMark |
|||
</span> |
|||
</template> |
|||
<a-menu-item key="cmMarkGroup">MarkGroup</a-menu-item> |
|||
<a-menu-item key="cmMarkLabel">MarkLabel</a-menu-item> |
|||
</a-sub-menu> |
|||
<a-sub-menu key="System"> |
|||
<template #title> |
|||
<span> |
|||
System |
|||
</span> |
|||
</template> |
|||
<a-menu-item key="SysDict">Dict</a-menu-item> |
|||
</a-sub-menu> |
|||
</a-menu> |
|||
</a-layout-sider> |
|||
|
|||
<a-layout style="padding: 0 16px 16px;"> |
|||
<a-breadcrumb style="margin: 16px 0;"> |
|||
<a-breadcrumb-item>Home</a-breadcrumb-item> |
|||
<a-breadcrumb-item>List</a-breadcrumb-item> |
|||
<a-breadcrumb-item>App</a-breadcrumb-item> |
|||
</a-breadcrumb> |
|||
<a-layout-content |
|||
:style="{ background: '#fff', padding: '16px', margin: 0, minHeight: '280px' }" |
|||
> |
|||
Content |
|||
</a-layout-content> |
|||
</a-layout> |
|||
|
|||
</a-layout> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "Curd" |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,17 @@ |
|||
<template> |
|||
<a-layout style="position: fixed; height: 100%; width: 100%;"> |
|||
<div> |
|||
<h1>This is video center page.</h1> |
|||
</div> |
|||
</a-layout> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "VideoCenter" |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue