设计好登录界面
This commit is contained in:
parent
44438cec22
commit
d51aae8b50
4 changed files with 68 additions and 162 deletions
45
src/App.vue
45
src/App.vue
|
|
@ -1,31 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="vh-100 d-flex flex-column">
|
<div class="d-flex align-items-center vh-100">
|
||||||
<div class="flex-fill overflow-auto pt-3 px-3">
|
<b-container fluid>
|
||||||
<div class="d-flex my-2">
|
<b-row class="justify-content-center">
|
||||||
<b-avatar variant="primary" text="ZZ" class="my-2 mr-2"> </b-avatar>
|
<b-col class="col-8 col-sm-6 col-md-4 text-center">
|
||||||
<div class="d-flex flex-column">
|
<b-avatar
|
||||||
<p class="my-1">Zhao Zuohong</p>
|
button
|
||||||
<b-button variant="primary" class="mb-2 mr-5 text-left"
|
variant="primary"
|
||||||
>Earth is the third planet from the Sun and the only astronomical
|
text=""
|
||||||
object known to harbor life.</b-button
|
size="4em"
|
||||||
>
|
class="my-3"
|
||||||
</div>
|
></b-avatar>
|
||||||
</div>
|
<b-form>
|
||||||
<div class="d-flex flex-row-reverse my-2">
|
<b-form-input class="my-3"> </b-form-input>
|
||||||
<b-avatar variant="success" text="ZZ" class="my-2 ml-2"> </b-avatar>
|
<b-button class="my-3" variant="success">Button</b-button>
|
||||||
<div class="d-flex flex-column">
|
</b-form>
|
||||||
<p class="my-1 text-right">Zhao Zuohong</p>
|
</b-col>
|
||||||
<b-button variant="success" class="mb-2 ml-5 text-left"
|
</b-row>
|
||||||
>It is the densest planet in the Solar System and the largest and
|
</b-container>
|
||||||
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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -34,20 +34,20 @@ async function createWindow() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Quit when all windows are closed.
|
// // Quit when all windows are closed.
|
||||||
app.on("window-all-closed", () => {
|
// app.on("window-all-closed", () => {
|
||||||
// On macOS it is common for applications and their menu bar
|
// // On macOS it is common for applications and their menu bar
|
||||||
// to stay active until the user quits explicitly with Cmd + Q
|
// // to stay active until the user quits explicitly with Cmd + Q
|
||||||
if (process.platform !== "darwin") {
|
// if (process.platform !== "darwin") {
|
||||||
app.quit();
|
// app.quit();
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
|
|
||||||
app.on("activate", () => {
|
// app.on("activate", () => {
|
||||||
// On macOS it's common to re-create a window in the app when the
|
// // 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.
|
// // dock icon is clicked and there are no other windows open.
|
||||||
if (BrowserWindow.getAllWindows().length === 0) createWindow();
|
// if (BrowserWindow.getAllWindows().length === 0) createWindow();
|
||||||
});
|
// });
|
||||||
|
|
||||||
// This method will be called when Electron has finished
|
// This method will be called when Electron has finished
|
||||||
// initialization and is ready to create browser windows.
|
// 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