提交

src/config/page.json

@@ -34,5 +34,8 @@
     },
     "chatGptChat":{
         "title": "chatgpt"
+    },
+    "CalligraphyAndPaintingCompetition":{
+        "title": "2023“我心中的黄帝陵”青少年书画大赛"
     }
 }

src/view/CalligraphyAndPaintingCompetition/index.js

@@ -0,0 +1,19 @@
+import App from './index.vue';
+import '@/assets/js/common';
+import { createApp } from 'vue';
+import { getPageParameters, environment } from '../../config/pageConfig';
+// 判断环境
+environment();
+window.$originData = getPageParameters();
+document.title = window.$originData.orginParames.title || '';
+
+// 微信分享
+window.weixin_Share_Init(
+  window.$originData.orginParames.title,
+  '这是世界杯',
+  'https://cxzx.smcic.net/topic/highSpeed/img/logo3.png',
+  'https://cxzx.smcic.net/topic/activity/CalligraphyAndPaintingCompetition.html?' +
+    Date.now()
+);
+
+createApp(App).mount('#app');

src/view/CalligraphyAndPaintingCompetition/index.vue

@@ -0,0 +1,149 @@
+<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 :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
+        >
+        <van-icon
+          name="close"
+          class="closeBtn"
+          size="25"
+          @click="toShanshipin = false"
+          color="#ffffff"
+        />
+      </div>
+    </van-overlay>
+
+    <van-dialog theme="round-button" confirm-button-color="linear-gradient(90deg, #0038ad, #004fd9)" v-model:show="toDetail" title="活动详情"> 活动详情 </van-dialog>
+  </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);
+
+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)
+    document.querySelector('.weixin').setAttribute('style', 'display:block');
+  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/hb.jpg');
+  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 0 1em;
+    width: 90%;
+    margin: 0 auto;
+    border-radius: 15px;
+    background-color: #ffffff;
+
+    .closeBtn {
+      left: 50%;
+      bottom: -4em;
+      transform: translateX(-50%);
+    }
+
+    .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;
+    }
+  }
+}
+</style>