列表样式

<template>
  <div id="nav">
    <h2 class="h2-title">商品分类</h2>
    <ul>
      <li><a href="#">图书1</a><a href="#">服装2</a></li>
      <li><a href="#">电器1</a><a href="#">礼品2</a></li>
      <li><a href="#">电脑1</a><a href="#">视频2</a></li>
      <li><a href="#">家电1</a><a href="#">影视2</a></li>
      <li><a href="#">彩票1</a><a href="#">饮料2</a></li>
    </ul>
  </div>
</template>

<style scoped>

#nav {
  width: 300px;
  height: 100%;
  background-color: #ccc;
  float: left;
}

.h2-title {
  font-size: 28px;
  font-weight: bolder;
  text-indent: 1em;
  line-height: 35px;
  background-color: red;
}
ul li {
  height: 30px;
  list-style: none;
  text-indent: 1em;
  background-color: gray;
}

a {
  text-decoration: none;
  font-size: 24px;
  color: #000;
}
a:hover {
  color: orange;
  text-decoration: underline;
}
</style>

渐变