activity/src/view/CalligraphyAndPaintingCompetition/index.vue

<template>
  <div class="CalligraphyAndPaintingCompetition">
    <div class="bottom">
      <div class="bottom_item">
        <div class="btn" @click="toDetail = true">活动详情</div>
      </div>
      <div class="bottom_item" style="flex: 3">
        <div class="btn" @click="toShanshipin = true">我要投稿</div>
      </div>
      <div class="bottom_item">
        <div class="btn" @click="toShanshipin = true">我的作品</div>
      </div>
    </div>

    <van-overlay :custom-style="{'background-color': 'rgba(0, 0, 0, .4)'}" :show="toShanshipin">
      <div class="dialogBody">
        <van-image width="100" height="100" :src="logoImage" round />
        <div class="title">请打开闪视频投稿或查看我的作品</div>
        <br />
        <van-button
          round
          type="default"
          color="linear-gradient(90deg, #0038ad, #004fd9)"
          block
          @click="toShanshipinFunc"
          >打开闪视频</van-button
        >
        <div class="closeBtn" @click="toShanshipin = false">
          <img
            style="width: 20px; height: 20px"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAWhJREFUOBG1lL1OwzAUheuEIUJMDAwwMLEhRQkTG7xKaYFXgkIfhyk/ikQmBl6ADcYo4Zxgu0lrOxYCD7Xje87Xe28cz2YYWZbtl2V5xvVvRlVV53VdH9IrCBNCvHddd4T5MU3Te8ydDxgeURTFA+YlPF9RFJ0GYRieEEYA5lsIniicAlIjtUvpPWia5jhIkuSNmSkAhPMp6AA2Vz4wVnEcvwbckGWuVdAFtcDWYNzRr0tzCBeqpz4aDSTdZWBctmJYJjPTf0jNCMgNG1TGnDBqdoDSqN6gBnBfDbRgJzMdU4vt2ZQpNS4Y4/1b5uKvxv+XbCqVZbICxHRPbaXvDUu1wXg0qMOx0VDC5bP52LhgyKa/LHw0fQ99hKqSKW1fcp7nKxgm+0Mos8VYmMpH+IYH+LJt2xeKOWzN/olufk2Z4iq8DgD4UD2C/Hn729wgxit6pFbfUkjss1fx+memY4v/E/xXaNsFHd9CLmBlRyZwLQAAAABJRU5ErkJggg=="
          />
        </div>
      </div>
    </van-overlay>

    <van-dialog
      theme="round-button"
      confirm-button-text="关 闭"
      confirm-button-color="linear-gradient(90deg, #0038ad, #004fd9)"
      v-model:show="toDetail"
      title="详情"
    >
      <div class="DetailMain">
        <p class="DetailLine">活动说明</p>
        <p class="DetailLine">1.活动名称：2023“我心中的黄帝陵”青少年书画活动</p>
        <p class="DetailLine">
          2.主办单位：陕西省委网信办、共青团陕西省委、陕西省祭陵办
        </p>
        <p class="DetailLine">
          3.参与对象：全省各单位青年、高校学生、中小学学生
        </p>
        <p class="DetailLine">
          4.征集主题：以书法、绘画作品的形式表现自己对“黄帝”文化的理解、对“黄帝”形象的领悟。
        </p>
        <p class="DetailLine">5.征稿时间：2023年4月</p>
        <p class="DetailLine">
          6.评选方式：评选阶段分为初评和终评。通过初评的作品在“闪视频”、“西部网教育”微信公众号展示。通过初评的选手将参加现场创作活动，由专家评审团现场评审选出优秀作品，评审结果将在“西部网教育”微信公众号发布。
        </p>

        <p class="DetailLine">活动规则</p>
        <p class="DetailLine">
          1.全省各单位青年、高校学生、中小学学生均可投稿；投稿作品需符合主题要求，内容应健康、积极向上，具有艺术感、想象力和创造性，拒绝模版化作品。
        </p>
        <p class="DetailLine">
          2.投稿者应保证其为所投作品的作者，并对该作品的整体及局部均拥有独立、完整、明确、无争议的著作权；作者还应保证其所投送的作品不侵犯第三人的包括著作权、肖像权、名誉权、隐私权等在内的合法权益。
        </p>
        <p class="DetailLine">
          3.主办方有权免费使用本次书画活动的作品，包括出版画册、举办展览和相关宣传推广等。
        </p>
      </div>
    </van-dialog>

    <img v-if="showWixin" src="../../assets/img/weixin.jpg" class="Down">
  </div>
</template>
<script setup>
import { ref } from 'vue';
// import { onMounted, reactive } from "vue";
import {
  isIpad,
  isIpod,
  isIphone,
  isAndroid,
  isWechat,
} from '../../utils/isTerminal';
/**
 * window.$originData.orginParames.title 页面标题
 * window.$originData.orginParames.parameters 固定参数值
 * window.$originData.urlParames url参数
 */
import logoImage from '@/assets/img/logp.png';
const toShanshipin = ref(false);
const toDetail = ref(false);
const showWixin = ref(false);

function getDownloadUrl() {
  let url = 'https://ssp.sxtvs.com.cn';
  if (isIpad || isIpod || isIphone)
    url =
      'https://apps.apple.com/cn/app/%E9%97%AA%E8%A7%86%E9%A2%91/id1498056575';
  if (isAndroid) url = 'tideapp://scheme';
  return url;
}

function toShanshipinFunc() {
  if (isIpad || isIpod || isIphone) return (location.href = getDownloadUrl());
  if (isWechat) showWixin.value = true;
  else location.href = getDownloadUrl();
  if (!isWechat && isAndroid)
    window.setTimeout(function () {
      window.location.href =
        'https://ssp.sxtvs.com.cn'; /***打开app的协议，有安卓同事提供***/
    }, 2000);
}
</script>
<style lang="scss">
.CalligraphyAndPaintingCompetition {
  width: 100vw;
  height: 100vh;
  background-image: url('../../assets/img/hdl.png');
  background-size: 100% 100%;
  position: relative;

  .bottom {
    position: absolute;
    bottom: 0;
    width: 100vw;
    display: flex;
    padding: 1em 0;

    .bottom_item {
      flex: 2;
      text-align: center;
      padding: 0 0.5em;
    }
  }

  .btn {
    display: inline-block;
    font-weight: 500;
    font-size: 16px;
    background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(#0038ad),
      to(#004fd9)
    );
    background: linear-gradient(90deg, #0038ad, #004fd9);
    width: 100%;
    height: 2.5em;
    line-height: 2.5em;
    border-radius: 2.5em;
    text-align: center;
    color: #fff;
    vertical-align: middle;
  }

  .dialogBody {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1em 1em 1em 1em;
    width: 90%;
    margin: 0 auto;
    border-radius: 15px;
    background-color: #ffffff;

    .closeBtn {
      width: 40px;
      height: 40px;
      padding-top: 10px;
      border-radius: 50%;
      left: 50%;
      bottom: -4em;
      transform: translateX(-50%);
      position: absolute;
      background-color:rgba(0, 0, 0, .4);
      text-align: center;
    }

    .van-image {
      margin: 0 auto;
      display: block;
    }

    .title {
      transition: opacity 0.5s;
      color: #666;
      border-radius: 0.5rem;
      padding: 0.45rem 0.6rem 0 0.6rem;
      text-align: center;
    }
  }

  .DetailMain {
    padding: 0 26px;
    max-height: 250px;
    overflow: auto;

    .DetailLine {
      padding-bottom: 1em;
      color: #666;
      line-height: 1.5em;
    }
  }

  .Down{
    position: fixed;
    z-index: 100000;
    width: 100vw;
    height: 100vh;
  }
}
</style>