bd
/
official
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

优化plyaground样式

master
yutent 2023-04-27 17:23:46 +08:00
parent 8c3427395c
commit 22887683d1
3 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/code-editor.vue
View File

@ -71,15 +71,33 @@ export default {
} }
</script> </script>
<style> <style scoped>
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
flex-shrink: 0; flex-shrink: 0;
}
.cm-editor { :deep(.cm-editor) {
width: 100%; width: 100%;
height: 100%; height: 100%;
outline: none !important; outline: none !important;
}
:deep(.cm-scroller) {
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
}
&:hover {
&::-webkit-scrollbar {
background: var(--color-plain-2);
}
&::-webkit-scrollbar-thumb {
background: var(--color-blue-1);
}
}
}
} }
</style> </style>

1
src/pages/playground/main.js
View File

@ -6,6 +6,7 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import '//jscdn.ink/@bd/ui/latest/tabs/index.js' import '//jscdn.ink/@bd/ui/latest/tabs/index.js'
// import '//127.0.0.1:8090/dist/tabs/index.js'
import App from './app.vue' import App from './app.vue'

16
src/pages/playground/views/preview.vue
View File

@ -17,6 +17,7 @@ const template = `<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <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"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" href="//jscdn.ink/@bd/ui/latest/css/reset-basic.css"> <link rel="stylesheet" href="//jscdn.ink/@bd/ui/latest/css/reset-basic.css">
<style>body {line-height:1.5;font-size:14px;word-wrap: break-word;}</style>
<style name="css"></style> <style name="css"></style>
<script async src="//jscdn.ink/es-module-shims/1.6.3/es-module-shims.wasm.js"><\/script> <script async src="//jscdn.ink/es-module-shims/1.6.3/es-module-shims.wasm.js"><\/script>
<script type="importmap">${JSON.stringify({ <script type="importmap">${JSON.stringify({
@ -117,6 +118,7 @@ export default {
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
width: 50%; width: 50%;
padding: 8px;
border-left: 1px solid var(--color-plain-2); border-left: 1px solid var(--color-plain-2);
} }
.web { .web {
@ -124,6 +126,7 @@ export default {
height: 100%; height: 100%;
border: 0; border: 0;
} }
.loading { .loading {
position: absolute; position: absolute;
top: 0; top: 0;
@ -137,19 +140,6 @@ export default {
height: 1px; height: 1px;
background: var(--color-blue-1); background: var(--color-blue-1);
box-shadow: 0 0 5px var(--color-blue-1); box-shadow: 0 0 5px var(--color-blue-1);
&.loading {
animation: loading 3s linear;
}
}
}
@keyframes loading {
from {
width: 0%;
}
to {
width: 100%;
} }
} }
</style> </style>