student-h5/src/views/ballotpage/BallotPage.vue

<template>
  <div class="ballotpage">
    <!-- <TitleHead text="【投票】管理者进阶腾飞班 - 授课方式"></TitleHead> -->

    <div class="notice">
      <div class="noticebox">
        <div class="mani">
          <div class="joininfo" style="margin-left: -8px">
            【投票】管理者进阶腾飞班 - 授课方式
          </div>
          <div class="contenttitle">
            <img class="timeimg" src="../../assets/image/ballotpage/time.png" />
            <div class="timee">2022-07-20 20:00-21:00</div>
          </div>
          <div class="timebox">
            <div class="samez" style="margin-left: 18px">00</div>
            <div class="samey">时</div>
            <div class="samez">00</div>
            <div class="samey">分</div>
            <div class="samez">00</div>
            <div class="samey">秒</div>
          </div>
        </div>
      </div>
    </div>

    <div class="notice">
      <div class="noticebox">
        <div class="mani">
          <div class="joininfo">参与情况</div>
          <div class="line"></div>
          <div class="contentone">
            <div class="same ba">
              <div class="samenum" style="color: #089dff">123</div>
              <div class="samego">参与数</div>
            </div>
            <div class="same bt">
              <div class="samenum" style="color: #387df7">123</div>
              <div class="samego">总票数</div>
            </div>
            <div class="same bh">
              <div class="samenum" style="color: #00c1fc">123</div>
              <div class="samego">浏览数</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="notice">
      <div class="noticebox">
        <div class="mani">
          <div class="joininfo">投票说明</div>
          <div class="line"></div>
          <div class="contentone">
            <div class="ballotdetail">
              为提高核心项目讲解体验，现向广大学员征集较为接受的授课方式
              ，每位学员可投票2个选项，我们将选取最高选项的两个做后续讲解。
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="notice">
      <div class="noticebox">
        <div class="mani">
          <div class="joininfo">参加投票</div>
          <div class="line"></div>
          <div class="contentone">
            <div class="ballotjoincontainer">
              <div class="ballotjoin">
                <div
                  class="ballotitem"
                  v-for="(item, index) in ballot"
                  :key="item.id"
                >
                  <div class="upitem">
                    <div class="left">
                      <img
                        class="leftimg"
                        src="../../assets/image/ballotpage/left.png"
                      />
                      <div class="leftcontent">{{ item.content }}</div>
                    </div>
                    <button class="btn" @click="getId(item.id)">投票</button>
                  </div>
                  <div
                    :class="index === ballot.length - 1 ? null : 'thinline'"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
// import TitleHead from "@/components/TitleHead.vue";
export default {
  name: "BallotPage",
  components: {
    // TitleHead,
  },
  setup() {
    const state = reactive({
      ballot: [
        {
          id: 1,
          content: "录播课",
        },
        {
          id: 2,
          content: "PPT+配音",
        },
        {
          id: 3,
          content: "HTML5",
        },
        {
          id: 4,
          content: "OTHER",
        },
      ],
    });
    const getId = (id) => {
      console.log(id);
    };
    return {
      ...toRefs(state),
      getId,
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}
.ballotpage {
  width: 100%;

  .notice {
    width: 100%;
    display: flex;
    justify-content: center;
    // margin-top: -17.5px;
    margin-top: 20px;
    .noticebox {
      width: 100%;
      background: #fff;
      // border-radius: 4px;
      position: relative;
      display: flex;
      justify-content: center;
      .line {
        width: 100%;
        height: 0;
        border-top: 1px solid #f1f2f3;
        margin-top: 17px;
        position: absolute;
        left: 0;
      }
      .mani {
        width: 90%;
        margin-top: 20px;
        // position:relative;
        .joininfo {
          color: #0d233a;
          font-size: 16px;
          font-weight: bold;
        }

        .samenum {
          margin-top: 18.5px;
          position: absolute;
          font-size: 18px;
          font-weight: bold;
          left: 50%;
          transform: translate(-50%, 0);
        }
        .samego {
          margin-top: 45px;
          position: absolute;
          font-size: 13px;
          left: 50%;
          transform: translate(-50%, 0);
        }
        .contenttitle {
          width: 100%;
          // height:10px;
          margin-top: 15px;
          // background-color: #bfa;
          display: flex;
          .timeimg {
            width: 12.8px;
            height: 13px;
          }
          .timee {
            color: #6e7b84;
            font-size: 14px;
            line-height: 13px;
            margin-left: 6px;
          }
        }
        .timebox {
          display: flex;
          width: 100%;
          height: 49px;
          background-color: #f2f5f7;
          margin-top: 17.5px;
          margin-bottom: 27.5px;
          border-radius: 10px;
          .samez {
            color: #0060ff;
            font-size: 18px;
            line-height: 49px;
            margin-left: 13px;
          }
          .samey {
            color: #6e7b84;
            font-size: 14px;
            line-height: 49px;

            margin-left: 13px;
          }
        }
        .contentone {
          margin-top: 43px;
          display: flex;
          justify-content: space-between;
          width: 100%;
          margin-bottom: 20px;
          // height: 200px;
          .same {
            position: relative;
            width: 108px;
            height: 75px;
            // background-color: red;
          }
          .ba {
            background-image: url(../../assets/image/ballotpage/baccone.png);
          }
          .bt {
            background-image: url(../../assets/image/ballotpage/bacctwo.png);
          }
          .bh {
            background-image: url(../../assets/image/ballotpage/baccthr.png);
          }
          .ballotdetail {
            color: #6e7b84;
            line-height: 30px;
            font-size: 13px;
          }
          .ballotjoincontainer {
            display: flex;
            width: 100%;
            justify-content: center;
            .ballotjoin {
              width: 85%;
              // height:100px;
              // background-color: #bfa;
              .ballotitem {
                .upitem {
                  display: flex;
                  justify-content: space-between;
                  .left {
                    display: flex;
                    .leftimg {
                      width: 4.5px;
                      height: 14.5px;
                      margin-top: 1px;
                    }
                    .leftcontent {
                      margin-left: 9px;
                      color: #6e7b84;
                      font-size: 13px;
                      line-height: 30px;
                      margin-top: -5px;
                    }
                  }
                  .btn {
                    background-color: #2478ff;
                    color: #fff;
                    width: 64px;
                    height: 21px;
                    border-radius: 10px;
                    border: 0;
                    font-size: 12px;
                    line-height: 19px;
                    margin-top: -1px;
                  }
                }
                .thinline {
                  width: 100%;
                  border-top: 1px solid #f1f2f3;
                  margin-top: 17px;
                  margin-bottom: 17px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>