127 lines
2.2 KiB
Vue
127 lines
2.2 KiB
Vue
<template>
|
|
<div id="app">
|
|
<el-row class="home">
|
|
<chat class="fill" :config="setting" @setting="showSettings=!showSettings"/>
|
|
<settings class="mar-l16" v-show="showSettings" v-model="setting"/>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Chat from "./components/chat";
|
|
import Settings from "./components/settings";
|
|
import {ChatGLM} from "./utils/models";
|
|
|
|
export default {
|
|
name: 'App',
|
|
components: {Settings, Chat},
|
|
data() {
|
|
return {
|
|
showSettings: false,
|
|
setting: {
|
|
model: new ChatGLM(),
|
|
stream: true
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
handleResize() {
|
|
this.showSettings = window.innerWidth > 1150;
|
|
}
|
|
},
|
|
created() {
|
|
window.addEventListener('resize', this.handleResize)
|
|
this.handleResize()
|
|
},
|
|
unmounted() {
|
|
window.removeEventListener('resize', this.handleResize)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@each $v in (333, 666, 888, 999, '26f', 'f46') {
|
|
.color-#{$v} {
|
|
color: \##{$v};
|
|
}
|
|
}
|
|
|
|
@each $v in (8, 10, 12, 14, 16, 20, 24, 32, 48, 56, 64, 80) {
|
|
//gap
|
|
.gap-#{$v} {
|
|
gap: #{$v}px
|
|
}
|
|
.font-#{$v} {
|
|
font-size: #{$v}px;
|
|
}
|
|
@each $padMar, $pm in (mar:margin, pad:padding) {
|
|
.#{$padMar}-#{$v} {
|
|
#{$pm}: #{$v}px
|
|
}
|
|
//纵向
|
|
.#{$padMar}-v#{$v} {
|
|
#{$pm}-top: #{$v}px;
|
|
#{$pm}-bottom: #{$v}px;
|
|
}
|
|
//横向
|
|
.#{$padMar}-h#{$v} {
|
|
#{$pm}-left: #{$v}px;
|
|
#{$pm}-right: #{$v}px;
|
|
}
|
|
@each $pos, $p in (l:left, r:right, t:top, b:bottom) {
|
|
.#{$padMar}-#{$pos+$v} {
|
|
#{$pm}-#{$p}: #{$v}px
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $where in (sticky, fixed) {
|
|
@each $pos, $p in (l:left, r:right, t:top, b:bottom) {
|
|
.#{$where}-#{$pos} {
|
|
position: fixed;
|
|
#{$p}: 0;
|
|
z-index: 202301031019;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.w100 {
|
|
width: 100%;
|
|
}
|
|
|
|
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
#app {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-size: cover;
|
|
position: absolute;
|
|
}
|
|
|
|
.home {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
padding: 16px;
|
|
background-color: #272A37;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.fill {
|
|
flex: 1;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.flexWrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
</style>
|