首页样式

src/views/home/components/SwitchBtn.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class='button-box'>
+    <span v-for='(item, index) in btnArr' :key='index' style='display: inline-block;'>
+      <span class='split' v-if='index > 0' :class='{ "split-active": activeIndex === index || activeIndex === index - 1}'>|</span>
+      <span class='button-item' @click='chooseBtn(index)' :class='{ "item-active": activeIndex === index}'>{{item}}</span>
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  name: 'SwitchBtn',
+  data() {
+    return {
+      activeIndex: 1,
+      btnArr: ['本班次', '本日', '本周', '本月']
+    }
+  },
+  methods: {
+    chooseBtn(index) {
+      this.activeIndex = index
+      this.$emit('chooseBtn', index)
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+.button-box {
+  display: inline-block;
+  color: #000;
+  background: #F2F4F9;
+  border-radius: 40px;
+  cursor: pointer;
+  .button-item {
+    display: inline-block;
+    font-size: 16px;
+    height: 32px;
+    line-height: 32px;
+    padding: 0 12px;
+  }
+  .item-active {
+    color: #fff;
+    background: #0B58FF;
+    border-radius: 40px;
+  }
+  .split {
+    display: inline-block;
+    font-size: 14px;
+    height: 32px;
+    line-height: 32px;
+    vertical-align: top;
+    color: #686868;
+  }
+  .split-active {
+    color: #F2F4F9;
+  }
+}
+</style>