导航条:每天一个效果(2)

 

代码 :

<template>
  <div class="center">
    <div class="container">
      <div class="progress-container">
        <div
          class="progress"
          id="progress"
          :style="{ width: width + '%' }"
          style="z-index: 10"
        ></div>
        <div
          v-for="(item, index) in list"
          :key="index"
          class="circle"
          :class="currentActive >= index ? 'active' : ''"
        >
          {{ item }}
        </div>
      </div>
      <div v-if="currentActive == 0">第一</div>
      <div v-if="currentActive == 1">第二</div>
      <div v-if="currentActive == 2">第三</div>
      <div v-if="currentActive == 3">第四</div>
      <button
        class="btn"
        id="prev"
        @click="Prev"
        :disabled="currentActive == 0"
      >
        上一步
      </button>
      <button
        @click="next"
        class="btn"
        id="next"
        :disabled="currentActive == list.length - 1"
      >
        下一步
      </button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  data() {
    return {
      currentActive: 0,
      width: 0,
      list: [1, 2, 3, 4],
    };
  },
  methods: {
    next() {
      this.currentActive++;
      if (this.currentActive > this.list.length - 1) {
        this.currentActive = this.list.length - 1;
        console.log(this.currentActive);
      }
      this.width = (this.currentActive / (this.list.length - 1)) * 100;
    },
    Prev() {
      this.currentActive--;
      if (this.currentActive < 0) {
        this.currentActive = 0;
      }
      this.width = (this.currentActive / (this.list.length - 1)) * 100;
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

.center {
  background-color: #f6f7fb;
  font-family: "Muli", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.container {
  text-align: center;
}

.progress-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 30px;
  max-width: 100%;
  width: 350px;
}

.progress-container::before {
  content: "";
  background-color: #e0e0e0;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 100%;
  z-index: -1;
}

.progress {
  background-color: #3498db;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 0%;
  z-index: -1;
  transition: 0.4s ease;
  width: 100px;
}

.circle {
  background-color: #fff;
  color: #999;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #e0e0e0;
  transition: 0.4s ease;
  z-index: 100;
}

.circle.active {
  border-color: #3498db;
}

.btn {
  background-color: #3498db;
  color: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  padding: 8px 30px;
  margin: 5px;
  font-size: 14px;
}

.btn:active {
  transform: scale(0.98);
}

.btn:focus {
  outline: 0;
}

.btn:disabled {
  background-color: #e0e0e0;
  cursor: not-allowed;
}
</style>