10 changed files with 152 additions and 86 deletions
@ -1,81 +1,29 @@ |
|||||
:root { |
body, html, ul, ol { |
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif; |
margin: 0; |
||||
font-size: 16px; |
padding: 0; |
||||
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 { |
body { |
||||
margin: 0; |
width: 100%; |
||||
display: flex; |
height: 100%; |
||||
place-items: center; |
|
||||
min-width: 320px; |
|
||||
min-height: 100vh; |
|
||||
} |
} |
||||
|
|
||||
h1 { |
ul, ol { |
||||
font-size: 3.2em; |
list-style: none; |
||||
line-height: 1.1; |
|
||||
} |
} |
||||
|
|
||||
button { |
a { |
||||
border-radius: 8px; |
text-decoration: none; |
||||
border: 1px solid transparent; |
color: #666; |
||||
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; |
|
||||
} |
} |
||||
|
|
||||
#app { |
a, |
||||
max-width: 1280px; |
img { |
||||
margin: 0 auto; |
border: 0; |
||||
padding: 2rem; |
|
||||
text-align: center; |
|
||||
} |
} |
||||
|
|
||||
@media (prefers-color-scheme: light) { |
input { |
||||
:root { |
border: none; |
||||
color: #213547; |
background: transparent; |
||||
background-color: #ffffff; |
outline: none; |
||||
} |
|
||||
a:hover { |
|
||||
color: #747bff; |
|
||||
} |
|
||||
button { |
|
||||
background-color: #f9f9f9; |
|
||||
} |
|
||||
} |
} |
||||
@ -1,13 +1,43 @@ |
|||||
<template> |
<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> |
</template> |
||||
|
|
||||
<script> |
<script lang="ts"> |
||||
|
import Curd from '@views/page/Curd.vue'; |
||||
|
import VideoCenter from '@views/page/VideoCenter.vue'; |
||||
|
|
||||
export default { |
export default { |
||||
name: "index" |
components: {VideoCenter, Curd}, |
||||
|
data() { |
||||
|
return { |
||||
|
pageName: "curd", //默认选中 curd 页面 |
||||
|
}; |
||||
|
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped> |
<style scoped> |
||||
|
|
||||
</style> |
</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