设计好登录界面
This commit is contained in:
parent
44438cec22
commit
d51aae8b50
4 changed files with 68 additions and 162 deletions
43
src/App.vue
43
src/App.vue
|
|
@ -1,31 +1,22 @@
|
|||
<template>
|
||||
<div class="vh-100 d-flex flex-column">
|
||||
<div class="flex-fill overflow-auto pt-3 px-3">
|
||||
<div class="d-flex my-2">
|
||||
<b-avatar variant="primary" text="ZZ" class="my-2 mr-2"> </b-avatar>
|
||||
<div class="d-flex flex-column">
|
||||
<p class="my-1">Zhao Zuohong</p>
|
||||
<b-button variant="primary" class="mb-2 mr-5 text-left"
|
||||
>Earth is the third planet from the Sun and the only astronomical
|
||||
object known to harbor life.</b-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-row-reverse my-2">
|
||||
<b-avatar variant="success" text="ZZ" class="my-2 ml-2"> </b-avatar>
|
||||
<div class="d-flex flex-column">
|
||||
<p class="my-1 text-right">Zhao Zuohong</p>
|
||||
<b-button variant="success" class="mb-2 ml-5 text-left"
|
||||
>It is the densest planet in the Solar System and the largest and
|
||||
most massive of the four rocky planets.</b-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<b-form class="d-flex m-3">
|
||||
<b-form-input class="flex-fill mr-2"> </b-form-input>
|
||||
<b-button pill variant="success">Button</b-button>
|
||||
<div class="d-flex align-items-center vh-100">
|
||||
<b-container fluid>
|
||||
<b-row class="justify-content-center">
|
||||
<b-col class="col-8 col-sm-6 col-md-4 text-center">
|
||||
<b-avatar
|
||||
button
|
||||
variant="primary"
|
||||
text=""
|
||||
size="4em"
|
||||
class="my-3"
|
||||
></b-avatar>
|
||||
<b-form>
|
||||
<b-form-input class="my-3"> </b-form-input>
|
||||
<b-button class="my-3" variant="success">Button</b-button>
|
||||
</b-form>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -34,20 +34,20 @@ async function createWindow() {
|
|||
}
|
||||
}
|
||||
|
||||
// Quit when all windows are closed.
|
||||
app.on("window-all-closed", () => {
|
||||
// On macOS it is common for applications and their menu bar
|
||||
// to stay active until the user quits explicitly with Cmd + Q
|
||||
if (process.platform !== "darwin") {
|
||||
app.quit();
|
||||
}
|
||||
});
|
||||
// // Quit when all windows are closed.
|
||||
// app.on("window-all-closed", () => {
|
||||
// // On macOS it is common for applications and their menu bar
|
||||
// // to stay active until the user quits explicitly with Cmd + Q
|
||||
// if (process.platform !== "darwin") {
|
||||
// app.quit();
|
||||
// }
|
||||
// });
|
||||
|
||||
app.on("activate", () => {
|
||||
// On macOS it's common to re-create a window in the app when the
|
||||
// dock icon is clicked and there are no other windows open.
|
||||
if (BrowserWindow.getAllWindows().length === 0) createWindow();
|
||||
});
|
||||
// app.on("activate", () => {
|
||||
// // On macOS it's common to re-create a window in the app when the
|
||||
// // dock icon is clicked and there are no other windows open.
|
||||
// if (BrowserWindow.getAllWindows().length === 0) createWindow();
|
||||
// });
|
||||
|
||||
// This method will be called when Electron has finished
|
||||
// initialization and is ready to create browser windows.
|
||||
|
|
|
|||
37
src/components/Chat.vue
Normal file
37
src/components/Chat.vue
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<div class="vh-100 d-flex flex-column">
|
||||
<div class="flex-fill overflow-auto pt-3 px-3">
|
||||
<div class="d-flex my-2">
|
||||
<b-avatar variant="primary" text="ZZ" class="my-2 mr-2"> </b-avatar>
|
||||
<div class="d-flex flex-column">
|
||||
<p class="my-1">Zhao Zuohong</p>
|
||||
<b-button variant="primary" class="mb-2 mr-5 text-left"
|
||||
>Earth is the third planet from the Sun and the only astronomical
|
||||
object known to harbor life.</b-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-row-reverse my-2">
|
||||
<b-avatar variant="success" text="ZZ" class="my-2 ml-2"> </b-avatar>
|
||||
<div class="d-flex flex-column">
|
||||
<p class="my-1 text-right">Zhao Zuohong</p>
|
||||
<b-button variant="success" class="mb-2 ml-5 text-left"
|
||||
>It is the densest planet in the Solar System and the largest and
|
||||
most massive of the four rocky planets.</b-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<b-form class="d-flex m-3">
|
||||
<b-form-input class="flex-fill mr-2"> </b-form-input>
|
||||
<b-button pill variant="success">Button</b-button>
|
||||
</b-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
|
||||
@Component
|
||||
export default class Chat extends Vue {}
|
||||
</script>
|
||||
|
|
@ -1,122 +0,0 @@
|
|||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br />
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
|
||||
>vue-cli documentation</a
|
||||
>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>babel</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>typescript</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>eslint</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
|
||||
>Forum</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
|
||||
>Community Chat</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
|
||||
>Twitter</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
|
||||
>vue-router</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-devtools#vue-devtools"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>vue-devtools</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
|
||||
>vue-loader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/awesome-vue"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>awesome-vue</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
|
||||
@Component
|
||||
export default class HelloWorld extends Vue {
|
||||
@Prop() private msg!: string;
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue