[Day 19] 实作-美化首页上传Git

美化热门活动排行榜

好的接下来换热门活动排行

增加 Title 跟一条分隔线

在本来排行榜的上方多加一个 v-col 宽度设为12格，

里面加一个标签的Title 跟 v-divider 组件

HomePage.vue

<template>
...
	<v-col sm="12">
	     <h2 class="text-left">热门活动排行</h2>
	     <v-divider class="divider"></v-divider>
	</v-col>
...
</template>

然後帮分隔线加一下样式

<style scoped>
.divider{
  border-width: initial;
  border-color: #02c5c5;
}
</style>

目前成果

没错没错~ 这就是我要的分隔线

调整v-card样式

这边要调的就是把v-card的边框拿掉，把标题修改一下

<template>
...
	<v-card
	    max-width="500"
	    class="mx-auto"
	    flat  <!-- 使用flat属性 -->
	>
	    <v-card-title class="pa-1">  <!-- 加上 class pa-1，可以把padding调整为 4px -->
	    {{ typeItems.title }}  <!-- 只渲染 "付费"/"免费"文字 -->
	    </v-card-title>
	    <v-list>
	    <v-list-item
	        v-for="item in typeItems.eventList"
	        :key="item.title"
	        :href="item.link"
	        target="_blank"
	    >
	        <v-list-item-icon>
	        <v-avatar color="grey" rounded size="36"> <!-- 更改icon的颜色 -->
	            <span class="white--text text">{{ item.rank }}</span>
	        </v-avatar>
	        </v-list-item-icon>
	
	        <v-list-item-content>
	        <v-list-item-title>{{ item.type }} - {{ item.title }}</v-list-item-title>
	        </v-list-item-content>
	    </v-list-item>
	    </v-list>
	</v-card>
...
</template>