test/vue-demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

TODO: make the main of content perfectful

Browse Source
This commit is contained in:
eson 2021-03-02 17:34:55 +08:00
parent de5ab4fac4
commit afc677b530
5 changed files with 106 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/AppBar.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<v-app-bar app color="white" flat>
<v-container class="py-0 fill-height">
<v-avatar class="mr-10" color="grey darken-1" size="32"></v-avatar>
<v-btn v-for="link in links" :key="link" text>{{ link }}</v-btn>
<v-spacer></v-spacer>
<v-responsive max-width="260">
<v-text-field dense flat hide-details rounded solo-inverted></v-text-field>
</v-responsive>
</v-container>
</v-app-bar>
</template>
<script>
export default {
name: "AppBar"
};
</script>
<style>
</style>

17
src/components/Carousel.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<v-carousel cycle height="200" hide-delimiter-background show-arrows-on-hover>
<v-carousel-item v-for="(slide, i) in slides" :key="i">
<v-sheet :color="colors[i]" height="100%">
<v-row class="fill-height" align="center" justify="center">
<div class="display-3">{{ slide }} Slide</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</template>
<script>
export default {
name: "Carousel",
};
</script>

40
src/components/Main.vue
View File

@ -1,40 +0,0 @@
<template>
<!-- App.vue -->
<v-app>
<v-app-bar app height="150px">
<!-- -->
</v-app-bar>
<!-- <v-navigation-drawer app> -->
<!-- -->
<!-- </v-navigation-drawer> -->
<!-- Sizes your content based upon application components -->
<v-main>
<!-- Provides the application the proper gutter -->
<v-container fluid>
<!-- <div id="nav"> -->
<!-- <router-link to="/">Home</router-link> | -->
<!-- <router-link to="/about">About</router-link> -->
<!-- </div> -->
<!-- If using vue-router -->
<!-- <router-view></router-view> -->
</v-container>
</v-main>
<v-footer app>
<!-- 页脚 -->
</v-footer>
</v-app>
</template>
<script>
export default {
name: 'Main',
}
</script>

2
src/router/index.js
View File

@ -7,7 +7,7 @@ Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
name: 'Index',
component: Home
},
{

72
src/views/Home.vue
View File

@ -1,18 +1,70 @@
<template>
<!-- App.vue -->
<Main></Main>
<!-- App.vue -->
<v-app id="inspire">
<AppBar></AppBar>
<v-main class="grey lighten-3">
<v-container>
<v-row>
<v-col cols="2">
<v-sheet rounded="lg">
<v-list color="transparent">
<v-list-item v-for="n in 5" :key="n" link>
<v-list-item-content>
<v-list-item-title>List Item {{ n }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<!-- 分割线 -->
<v-divider class="my-2"></v-divider>
<v-list-item link color="grey lighten-4">
<v-list-item-content>
<v-list-item-title>Refresh</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-sheet>
</v-col>
<v-col>
<v-sheet min-height="80vh" rounded="lg">
<v-col>
<Carousel></Carousel>
</v-col>
<v-col>
<v-row>
<v-card width="200" height="200" class="d-flex flex-wrap " >
<v-img src="http://i.serengeseba.com/uploads/i_0_3792700707x1517265037_26.jpg"></v-img>
</v-card>
<v-card width="200" height="200" class="d-flex flex-wrap " >
<v-img src="http://i.serengeseba.com/uploads/i_0_3792700707x1517265037_26.jpg"></v-img>
</v-card>
</v-row>
</v-col>
</v-sheet>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</template>
<script>
// @ is an alias to /src
// import Main from '@/components/HelloWorld.vue'
import Main from '../components/Main.vue'
import Carousel from "../components/Carousel.vue";
import AppBar from "../components/AppBar";
export default {
name: 'Home',
name: "Home",
data: () => ({
links: ["Dashboard", "Messages", "Profile", "Updates"],
}),
components: {
Main,
}
}
Carousel,
AppBar,
},
};
</script>