activity/src/view/WorldCup/index.vue

<template>
  <div class="WorldCup" :style="'font-size: ' + fontSize + 'px'">
    <div class="up">
      <img class="upbg" :src="require('../../assets/img/upbg.jpg')" />
      <img class="topad" :src="require('../../assets/img/worldCup.png')" />
      <video class="video" src=""></video>
      <img class="activityTitle" :src="require('../../assets/img/T.png')" />
      <div class="activity"></div>
      <div class="btns">
        <img
          class="userInput"
          :src="require('../../assets/img/userInput.png')"
        />
        <img class="userInput my" :src="require('../../assets/img/my.png')" />
      </div>
    </div>
    <div class="down">
      <div class="videobg">
        <div class="title">模块标题</div>
        <van-row gutter="18">
          <van-col span="12">
            <video class="video" src=""></video>
          </van-col>
          <van-col span="12">
            <video class="video" src=""></video>
          </van-col>
        </van-row>
        <van-row gutter="18">
          <van-col span="12">
            <video class="video" src=""></video>
          </van-col>
          <van-col span="12">
            <video class="video" src=""></video>
          </van-col>
        </van-row>
      </div>
      <div class="vote">
        <img
          class="activityTitle"
          :src="require('../../assets/img/vote.png')"
        />
        <div class="subTitle">123</div>
        <div class="topThree">
          <div class="topUser">
            <div class="userImg">
                <img :src="require('../../assets/img/hg.png')" alt="" class="hg">
            </div>
            <div class="userName">这是一个姓名</div>
            <div class="userP">29403</div>
          </div>
          <div class="topUser">
            <div class="userImg">
                <img :src="require('../../assets/img/hg.png')" alt="" class="hg">
            </div>
            <div class="userName">这是一个姓名</div>
            <div class="userP">29403</div>
          </div>
          <div class="topUser">
            <div class="userImg">
                <img :src="require('../../assets/img/hg.png')" alt="" class="hg">
            </div>
            <div class="userName">这是一个姓名</div>
            <div class="userP">29403</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
// import { onMounted, reactive } from "vue";
// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
/**
 * window.$originData.orginParames.title 页面标题
 * window.$originData.orginParames.parameters 固定参数值
 * window.$originData.urlParames url参数
 */
console.log(window.$originData);
const availWidth =
  window.$originData.orginParames.availWidth > 1440
    ? 1440
    : window.$originData.orginParames.availWidth;
const fontSize = ref(availWidth / 10);
</script>
<style lang="scss">
.WorldCup {
  $fontSize: calc(100% / 10);
  width: 100%;
  max-width: 1440px;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background-image: url(../../assets/img/bg.jpg);
  background-size: 100% 100%;
  .video {
    background: #000;
    width: 100%;
  }
  .activityTitle {
    width: 51.1%;
    display: block;
    margin: 0 auto;
  }
  .up {
    padding-top: 25px;
    position: relative;
    .upbg {
      position: absolute;
      top: 0;
      z-index: 0;
      width: 100%;
    }
    .topad {
      position: relative;
      z-index: 1;
      width: 83vw;
      display: block;
      margin: 0 auto 22px auto;
    }
    .video {
      position: relative;
      z-index: 1;
      width: calc(100% - 26px);
      margin: 13px;
    }
    .activity {
      background-image: url(../../assets/img/kuang.png);
      background-size: 100% 100%;
      margin: 17px 10px 19px 10px;
      min-height: 315px;
    }
    .btns {
      display: flex;
      justify-content: space-between;
      padding: 0 10px 32px 10px;
      .userInput {
        display: inline-block;
        width: 211px;
        height: 64px;
      }
      .my {
        width: 133px;
        margin-left: 11px;
      }
    }
  }
  .down {
    .videobg {
      background-image: url(../../assets/img/videobg.jpg);
      background-size: 100% 100%;
      padding: 28px 13px;
      .title {
        height: 25px;
        font-size: 28px;
        font-family: Baiwuchangtidecard;
        color: #ffffff;
        line-height: 42px;
        -webkit-text-stroke: 1px #0b37ab;
        text-stroke: 1px #0b37ab;
        text-align: center;
        margin-bottom: 25px;
      }
    }
    .vote {
      .activityTitle {
        padding-top: 34px;
        padding-bottom: 21px;
      }
      .subTitle {
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 17px;
        margin: 0 21px;
      }
    }
    .topThree {
      background-image: url(../../assets/img/topThree.png);
      background-size: 100% 100%;
      margin: 0 16px;
      height: 206px;
      display: flex;
      .topUser {
        flex: 1;
        text-align: center;
        flex-direction: row-reverse;
        .userImg {

          width: 70px;
          height: 70px;
          border-radius: 50%;
          margin: 0 auto;
          background-color: #000;
          position: relative;
          .hg {
            width: 35px;
            height: 25px;
            position: absolute;
            top: -15px;
            right: 0;
          }
        }
        .userName {
          font-size: 12px;
          padding: 10px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }
        .userP {
          color: #ffc834;
          font-size: 19px;
          font-family: PingFang SC;
          font-weight: 600;
          color: #ffc834;
        }
      }
    }
  }
}
</style>