2023-04-13 16:34:13 +08:00
|
|
|
<template>
|
2023-04-13 17:13:14 +08:00
|
|
|
<Topbar />
|
|
|
|
|
<div class="playground">
|
|
|
|
|
<CodeEditor :code="code" />
|
|
|
|
|
<Preview />
|
|
|
|
|
</div>
|
2023-04-13 16:34:13 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import CodeEditor from '@/components/code-editor.vue'
|
2023-04-13 17:13:14 +08:00
|
|
|
import Topbar from './views/topbar.vue'
|
|
|
|
|
import Preview from './views/preview.vue'
|
2023-04-13 16:34:13 +08:00
|
|
|
|
|
|
|
|
export default {
|
2023-04-13 17:13:14 +08:00
|
|
|
components: { Topbar, CodeEditor, Preview },
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
code: `<!doctype html>
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
|
|
|
|
<title>{{title}}</title>
|
|
|
|
|
<meta name="keywords" content="{{keywords}}">
|
|
|
|
|
<meta name="description" content="{{description}}">
|
|
|
|
|
<link rel="stylesheet" href="//jscdn.ink/@bytedo/wcui/1.0.12/css/reset-basic.css">
|
|
|
|
|
<script async src="//jscdn.ink/es-module-shims/1.6.3/es-module-shims.wasm.js"><\/script>
|
|
|
|
|
<script type="importmap">{{importmap}}<\/script>
|
|
|
|
|
<\/head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="app noselect"></div>
|
|
|
|
|
<script src="main.js"><\/script>
|
|
|
|
|
<\/body>
|
|
|
|
|
<\/html>
|
|
|
|
|
`
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-04-13 16:34:13 +08:00
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
2023-04-13 17:13:14 +08:00
|
|
|
<style lang="scss">
|
|
|
|
|
.app {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
color: var(--color-dark-1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.playground {
|
|
|
|
|
display: flex;
|
|
|
|
|
height: calc(100vh - 48px);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
