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

调整样式

Browse Source
This commit is contained in:
eson 2021-03-03 16:41:18 +08:00
parent 4a5c147b91
commit dd255bf308
4 changed files with 116 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/AppBar.vue
View File

@ -7,9 +7,10 @@
<v-spacer></v-spacer>
<v-responsive max-width="260">
<v-responsive min-width="20vw" max-width="35vw">
<v-text-field dense flat hide-details rounded solo-inverted></v-text-field>
</v-responsive>
</v-container>
</v-app-bar>
</template>

44
src/components/Carousel.vue
View File

@ -1,5 +1,5 @@
<template>
<v-carousel cycle height="200" hide-delimiter-background show-arrows-on-hover>
<!-- <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">
@ -7,11 +7,51 @@
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>-->
<v-carousel cycle height="240px" hide-delimiter-background show-arrows-on-hover>
<v-carousel-item
v-for="(item,i) in items"
:key="i"
>
<v-sheet height="100%" >
<v-img
:src="item.src"
height="100%"
contain
cover="true"
>
</v-img>
</v-sheet>
</v-carousel-item>
</v-carousel>
</template>
<style>
</style>
<script>
export default {
name: "Carousel",
data() {
return {
items: [
{
src: "https://loremflickr.com/240/180",
},
{
src: "https://loremflickr.com/240/180",
},
{
src: "https://loremflickr.com/240/180",
},
{
src: "https://loremflickr.com/240/180",
},
],
};
},
};
</script>
</script>

33
src/components/MenuContentList.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<v-list color="transparent">
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-spacer></v-spacer>
<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>
</template>
<script>
export default {
name: "MenuContentList",
};
</script>
<style>
</style>

72
src/views/Home.vue
View File

@ -1,50 +1,45 @@
<template>
<!-- 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-row class="flex-nowrap" justify="center">
<v-sheet rounded="lg" class="left-menu-sheet ma-1">
<!-- 左菜单列表 -->
<MenuContentList></MenuContentList>
</v-sheet>
<!-- 分割线 -->
<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 cols="2">
<v-sheet class="ma-1" min-height="100vh" min-width="60vw" rounded="lg">
<v-col>
<!-- 轮播 -->
<Carousel></Carousel>
</v-col>
<v-col>
</v-col>
<v-col>
<!-- 显示商品内容列表 -->
<v-row justify="start">
<v-card width="200" height="200" class="ma-1">
<v-img src="http://i.serengeseba.com/uploads/i_0_3792700707x1517265037_26.jpg"></v-img>
<v-card width="100" height="100" class="ma-1">
<v-img class="ma-1" src="http://i.serengeseba.com/uploads/i_0_3792700707x1517265037_26.jpg"></v-img>
<v-card-text>
猫
</v-card-text>
</v-card>
<v-card width="200" height="200" class="ma-1">
<v-img src="http://i.serengeseba.com/uploads/i_0_3792700707x1517265037_26.jpg"></v-img>
<v-card width="100" height="100" class="ma-1">
<v-img class="ma-1" src="http://i.serengeseba.com/uploads/i_0_3792700707x1517265037_26.jpg"></v-img>
</v-card>
</v-row>
</v-col>
</v-sheet>
</v-col>
</v-col>
</v-sheet>
<v-sheet rounded="lg" class="left-menu-sheet ma-1" >
<!-- 左菜单列表 -->
<MenuContentList></MenuContentList>
</v-sheet>
</v-row>
</v-container>
</v-main>
@ -54,6 +49,7 @@
<script>
import Carousel from "../components/Carousel.vue";
import AppBar from "../components/AppBar";
import MenuContentList from "../components/MenuContentList";
export default {
name: "Home",
@ -63,6 +59,16 @@ export default {
components: {
Carousel,
AppBar,
MenuContentList,
},
};
</script>
<style>
.left-menu-sheet {
width: 15%;
}
</style>