turntableDetail.vue

<template>
  <div class="container">
    <div>
      <div class="topb">
        <!-- <img src="../../../public/img/zpbg.png" alt="" /> -->
      </div>
      <div class="title">
        <span class="bt">服装店幸运抽奖</span>
        <div class="tb">
          <img src="../../../public/img/zp.png" alt="" />
          大转盘抽奖
        </div>
      </div>
      <div class="wtitle">
        <img src="../../../public/img/water.png" alt="" />
        <span class="wan">玩法介绍</span>
      </div>
      <div class="content">
        <p>
          马几一民号传所把半米料己走专管每见严且具还京叫海公好速信调化眼务难心化二响住厂图电没速严义常象关更了低。由压反几风列线法再石究说布通总织第量回儿称从消片度音济学地通斯带老水亲东志报月者进放北传看术走形解林直动效提情影和复色米最只等。济交感去照象强手式性九己值正可心什体收并适部该置可山省十。
        </p>
        <p>
          马几一民号传所把半米料己走专管每见严且具还京叫海公好速信调化眼务难心化二响住厂图电没速严义常象关更了低。由压反几风列线法再石究说布通总织第量回儿称从消片度音济学地通斯带老水亲东志报月者进放北传看术走形解林直动效提情影和复色米最只等。济交感去照象强手式性九己值正可心什体收并适部该置可山省十。
        </p>
      </div>
    </div>

    <div class="creat" @click="createActive">创建同款活动</div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    createActive() {
      this.$router.push({
        name: "createBigWheelActive"
      });
    }
  }
};
</script>

<style></style>
<style scoped>
p {
  font-size: 12px;
  font-weight: 400;
  color: rgba(45, 71, 106, 0.8);
  margin-top: 14px;
}
.wan {
  position: absolute;
  left: 77px;
  top: 8px;
  font-size: 16px;
  font-weight: bold;
}
.wtitle {
  width: 200px;
  height: 24px;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 268px;
  z-index: 999;
}
.wtitle img {
  width: 100%;
}
.topb {
  width: 100%;
  height: 200px;
  background:url(../../../public/img/zpbg.png) no-repeat;
  background-size: cover;
}
.topb img {
  width: 100%;
}
.title {
  width: 100%;
  height: 50px;
  font-size: 18px;
  background-color: #fff;
  box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
  line-height: 50px;
  padding-left: 16px;
  position: relative;
}
.container {
  height: auto;
  background-color: rgba(248, 248, 248, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  min-height: 100%;
}
.bt {
  font-size: 16px;
  margin-left: 96px;
  font-weight: bold;
  color: rgba(45, 71, 106, 1);
}
.tb {
  position: absolute;
  height: 24px;
  line-height: 24px;
  left: 16px;
  top: 14px;
  border-radius: 2px;
  border: 1px solid rgba(45, 71, 106, 1);
  font-size: 10px;
  font-weight: 500;
  color: rgba(45, 71, 106, 1);
  width: 88px;
  text-align: center;
  align-items: center;
}
.tb img {
  width: 12px;
  height: 12px;
  vertical-align: middle;
}
.content {
  margin: 36px 16px 16px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
  position: relative;
  padding: 16px 16px 30px 16px;
}
.creat {
  width: 343px;
  height: 40px;
  line-height: 40px;
  background: rgba(117, 178, 253, 1);
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  margin-bottom: 16px;
}
</style>