GY_ceshi_web/src/views/search/index1.vue

<template>
  <div id="MyDiv">
    <!-- <m-breadcrumb :data="breadData"></m-breadcrumb> -->
    <div class="cont">
      <div class="title-text">
        <span>详情页</span>
      </div>
      <div class="cont_container">
        <div class="block">
          <el-slider v-model="value" :step="10" show-stops :show-tooltip="false" :marks="marks" @input="funChang()"></el-slider>
        </div>
      </div>
    </div>
  </div>
</template>
  <script>
// import OtherComponent from '@/components/OtherComponent'
export default {
  name: 'passwordManagement',
  components: {
    // OtherComponent
  },
  directives: {},
  filters: {},
  extends: {},
  mixins: {},
  props: {},
  data() {
    return {
      breadData: [
        {
          path: '',
          text: '个人中心',
        },
        {
          path: '',
          text: '密码管理',
        },
      ],
      value: [0, 10],
      marks: {
        0: '2020/01/52',
        10: '2020/01/52',
        20: '2020/01/52',
        30: '2020/01/52',
        40: '2020/01/52',
        50: '2020/01/52',
        60: '2020/01/52',
        70: '2020/01/52',
        80: '2020/01/52',
        90: '2020/01/52',
        100: '2020/01/52',
      },
    };
  },
  computed: {},
  watch: {},
  beforeCreate() {
    // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
  },
  created() {
    // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
    // 初始化渲染页面
  },
  beforeMount() {
    // 生命周期钩子：模板编译/挂载之前
  },
  mounted() {
    this.funQuery();
    // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
  },
  beforeUpate() {
    // 生命周期钩子：组件更新之前
  },
  updated() {
    // 生命周期钩子：组件更新之后
  },
  activated() {
    // 生命周期钩子：keep-alive 组件激活时调用
  },
  deactivated() {
    // 生命周期钩子：keep-alive 组件停用时调用
  },
  beforeDestroy() {
    // 生命周期钩子：实例销毁前调用
  },
  destroyed() {
    // 生命周期钩子：实例销毁后调用
  },
  errorCaptured(err, vm, info) {
    // 生命周期钩子：当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。
    console.log(err, vm, info);
  },
  methods: {
    funQuery() {
      let entTime = new Date('2021-11-23 0:00:00');
      let sterTime = new Date('2021-11-22 0:00:00');
      let timeer = Date.parse(entTime) - Date.parse(sterTime);
      let timeerNum = timeer / 10;
    //   let newdata = new Date(Date.parse(sterTime) + timeerNum * 2).toLocaleString();
      let marks = [];
      for (let item = 1; item < 10; item++) {
        marks.push({
          time: new Date(Date.parse(sterTime) + timeerNum * item).toLocaleString(),
        });
      }
      //   for(let item in ){
      console.log(marks);
      this.marks = {
        0: '2021-11-22 0:00:00',
        10: marks[0].time,
        20: marks[1].time,
        30: marks[2].time,
        40: marks[3].time,
        50: marks[4].time,
        60: marks[5].time,
        70: marks[6].time,
        80: marks[7].time,
        90: marks[8].time,
        100: '2021-11-23 0:00:00',
      };
      console.log(this.marks);
    },
    funChang() {
      console.log(this.value);
      console.log(this.marks[this.value]);
    },
  },
};
</script>
  <style lang='scss' scoped>
#MyDiv {
  margin: 0;
  padding: 0;
}
.cont {
  width: 1200px;
  margin: 0 auto;
  min-height: 650px;
  background: #ffffff;
  margin-bottom: 21px;
  padding: 0 24px;
}
.title-text {
  font-size: 16px;
  color: #333333;
  padding: 25px 0 30px 0px;
  img {
    width: 17px;
    height: 14px;
    margin-right: 8px;
  }
}
.cont_container {
  margin-top: 60px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.block {
  width: 1000px;
}
</style>