<template>
  <div class="bootPage">
    <div class="view-windows">
      <div class="view-window" :style="Style">
        <div class="imgbox url1"></div>
        <div class="imgbox url2"></div>
        <div class="imgbox url3"></div>
      </div>
    </div>
    <!-- url3 -->
    <ul class="list">
      <li :class="{ check: index === 1 }"></li>
      <li :class="{ check: index === 2 }"></li>
      <li :class="{ check: index === 3 }"></li>
    </ul>
    <div class="content" v-if="index === 1">
      <h1>存证溯源</h1>
      <p>把信息储存到区块链浏览器里，追溯根源安全可靠。</p>
    </div>
    <div class="content" v-if="index === 2">
      <h1>增量更新</h1>
      <p>多环节操作上链，多次上链，上传便捷。</p>
    </div>
    <div class="content" v-if="index === 3">
      <h1>更多功能即将上线</h1>
      <p>存证交接成员管理即将上线，敬请期待~</p>
    </div>
    <div class="btnbox" v-if="index === 3">
      <div class="btn" @click="determine">确定</div>
    </div>
    <div class="btnbox" v-else>
      <div class="btn" @click="next">下一步</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      index: 1,
      containerWidth: 0,
      reference: 420,
    };
  },
  computed: {
    // 图片的左右移动
    Style() {
      const style = {
        transform: "translateX(" + -1 * this.containerWidth + "px)",
      };
      return style;
    },
  },
  methods: {
    determine() {
      localStorage.setItem("bootPage", "show2");
      this.$emit("close");
    },
    next() {
      let t = setInterval(() => {
        this.containerWidth += 10;
        if (this.containerWidth == this.reference) {
          this.reference = this.reference + 420;
          this.index++;
          clearInterval(t);
        }
      }, 1);
    },
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.bootPage {
  width: 422px;
  height: 490px;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  padding: 26px;
  .view-windows {
    width: 420px;
    overflow: hidden;
    height: 195px;
  }
  .view-window {
    width: 1000%;
    height: 195px;
  }
  .imgbox {
    width: 420px;
    float: left;
    height: 195px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .url1 {
    background-image: url("../assets/images/bootPage/9@2x.png");
  }
  .url2 {
    background-image: url("../assets/images/bootPage/13@2x.png");
  }
  .url3 {
    background-image: url("../assets/images/bootPage/1@2x.png");
  }
  .list {
    list-style: none;
    margin: 22px;
    overflow: hidden;
    margin-left: 194px;
    li {
      border-radius: 6px;
      width: 6px;
      cursor: pointer;
      background: #b2bcc6;
      height: 6px;
      float: left;
      &:nth-child(2) {
        margin-right: 8px;
        margin-left: 8px;
      }
    }
    .check {
      background: #353535 !important;
    }
  }
  .content {
    h1 {
      font-size: 22px;
      text-align: center;
      font-weight: 400;
      color: rgba(53, 53, 53, 1);
      line-height: 1;
    }
    p {
      text-align: center;
      font-size: 16px;
      line-height: 1;
      font-weight: 400;
      padding-top: 20px;
      color: rgba(53, 53, 53, 1);
    }
  }
  .btnbox {
    margin-top: 126px;
    .btn {
      margin: 0 auto;
      width: 120px;
      height: 40px;
      cursor: pointer;
      text-align: center;
      line-height: 40px;
      color: white;
      background: rgba(63, 121, 254, 1);
      border-radius: 4px;
    }
  }
}
</style>