scss的使用案例【tab底部栏的切换】

最新推荐文章于 2024-06-07 22:38:34 发布

原创最新推荐文章于 2024-06-07 22:38:34 发布 · 286 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

web前端专栏收录该内容

419 篇文章

订阅专栏

本文介绍如何在Vue项目中引入并使用SCSS，通过安装必要的依赖包sass-loader和node-sass，实现了一个包含固定底部导航栏的页面布局。底部导航栏包括两个链接：新闻列表和个人中心，采用响应式设计，适用于不同屏幕尺寸。

1.要用scss,先引用scss

npm install --save-dev sass-loader
npm install --save-dev node-sass

2.代码

<template>
  <div>
    <router-view></router-view>
    <ul class="footer">
      <li class="icons">
        <router-link :to="{name: 'list'}">新闻列表</router-link>
      </li>
      <li class="icons">
        <router-link :to="{name: 'user'}">个人中心</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "home",
  components: {
    HelloWorld,
  },
};
</script>

<style scoped lang='scss'>
li{
  list-style: none;
}
.footer{
  position: fixed;
  width: 100%;
  height: 60px;
  line-height: 60px;
  left: 0;
  bottom: 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
}
.icons{
  font-size: 16px;
  flex:1;
  text-align: center;
  border-top: 1px solid #42b983;
  a{
    color:#42b983;
    display: block;
    text-decoration: none;
    &.active{
      color: #fff;
      background: #42b983;
    }
  }
}
</style>