告白小创意

<template>
  <div class="include">
    <div class="top"></div>
    <div class="middle">
      <div class="left"></div>
      <div class="text">
        <div class="wab" style="padding-bottom:10px">
        <h3>{{ name }}</h3>
          <video v-if="comzhi" autoplay muted loop style="width: 100%">
            <source src="../../assets/new.mp4" />
          </video>
        </div>
        <div style="border: 1px solid black">
          <el-button type="danger" plain @click="shifang">惊喜</el-button>
          <el-calendar v-if="!comzhi" style="height:600px;width:800px;" v-model="value"> </el-calendar>
          <div style="margin-top:10px" v-if="comzhi">有些東西一旦打開就再也關不上了</div>
        </div>
      </div>
      <div class="right"></div>
    </div>
    <div class="down"></div>
  </div>
</template>

{{ name }}

<script>
export default {
  data() {
    return {
      val: "这是父组件传递过来的参数",
      comzhi: false,
      value: new Date(),
      name:'日历_记录你的回忆'
    };
  },
  methods: {
    shifang() {
      this.comzhi = !this.comzhi;
      this.name = '札皿'
    },
  },
};
</script>

<style lang="less" scoped>
@dis: {
  display: flex;
};
@cen: {
  margin: 0 auto;
};
@top_down: {
  width: 1200;
  height: 30px;
  background: blue;
};
@left_right: {
  height: 740px;
  width: 30px;
  background: yellow;
};
.include {
  width: 1200px;
  height: 800px;
  background: black;
  @cen();
  @dis();
  flex-direction: column;
  border: 10px solid black;
  border-radius: 20px;
}
.middle {
  @dis();
  justify-content: space-around;
}
.top {
  @top_down();
  justify-content: space-between;
  width: 1200px;
}
.down {
  &:extend(.top);
}
.left {
  @left_right();
}
.right {
  &:extend(.left);
}
.text {
  height: 740px;
  width: 800px;
  background: white;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.wab {
  height: 450px;
}
</style>