提交

src/components/playBtn.vue

@@ -0,0 +1,82 @@
+<!-- https://cxzx.smcic.net/topic/qinshufa/assets/logp.png -->
+<template>
+  <svg
+    class="imgbtn"
+    @click="play"
+    :style="{
+      'animation-play-state': play_stats ? 'running' : 'paused',
+    }"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="899"
+    width="32"
+    height="32"
+  >
+    <path
+      d="M512 17.066667c273.339733 0 494.933333 221.5936 494.933333 494.933333S785.339733 1006.933333 512 1006.933333 17.066667 785.339733 17.066667 512 238.660267 17.066667 512 17.066667z"
+      opacity=".502"
+      p-id="900"
+    ></path>
+    <path
+      d="M512 1024C229.2224 1024 0 794.7776 0 512 0 229.2224 229.2224 0 512 0c282.7776 0 512 229.2224 512 512 0 282.7776-229.2224 512-512 512z m0-972.8C257.501867 51.2 51.2 257.501867 51.2 512s206.301867 460.8 460.8 460.8 460.8-206.301867 460.8-460.8S766.498133 51.2 512 51.2z"
+      fill="#FFFFFF"
+      p-id="901"
+    ></path>
+    <path
+      d="M530.568533 170.666667c4.8128 34.1504 5.495467 77.2096 41.2672 120.2688 27.4944 32.802133 58.453333 62.173867 79.7696 88.832C679.799467 414.6176 699.733333 458.359467 699.733333 502.784c0 71.0656-34.372267 141.431467-57.770666 180.394667h-10.990934c16.503467-36.898133 49.5104-97.723733 46.7456-162.628267-1.365333-36.232533-15.121067-75.178667-38.485333-103.867733-26.146133-33.501867-70.161067-60.142933-108.663467-62.8736v387.447466c0 30.754133-18.568533 58.7776-45.380266 79.274667C459.0592 841.028267 424.669867 853.333333 394.410667 853.333333c-19.2512 0-37.137067-6.144-49.5104-16.401066-13.073067-10.257067-20.6336-25.275733-20.6336-43.042134 0-28.023467 19.2512-56.046933 45.380266-76.544 26.146133-21.179733 59.136-34.850133 86.647467-34.850133 24.081067 0 44.6976 3.413333 57.088 15.035733V170.666667h17.186133z"
+      fill="#FFFFFF"
+      p-id="902"
+    ></path>
+  </svg>
+</template>
+<script setup>
+// import { reactive } from "vue";
+/**
+ * window.$originData.orginParames.title 页面标题
+ * window.$originData.orginParames.parameters 固定参数值
+ * window.$originData.urlParames url参数
+ */
+</script>
+<style scoped>
+/* 按钮动画 */
+@-webkit-keyframes rotating {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@-moz-keyframes rotating {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@-o-keyframes rotating {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@keyframes rotating {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(1turn);
+  }
+}
+</style>

src/config/index.js

@@ -9,7 +9,8 @@ const base = {
 };
 
 if (process.env.VUE_APP_ENV === 'Dev') {
-//   base.ws = 'ws://10.30.162.36:7860/queue/join'
+  // 开发环境下的配置
+  // base.ws = 'ws://10.30.162.36:7860/queue/join'
 }
 
 export default {

src/view/AEROSPACE2023/index.js

@@ -15,20 +15,8 @@ window.weixin_Share_Init(
   'https://cxzx.smcic.net/topic/tool/img/jrhwm2023.jpg',
   'https://cxzx.smcic.net/topic/activity/AEROSPACE2023.html?' + Date.now(),
   wx => {
-    wx.checkJsApi({
-      jsApiList: [ 'openLocation'],
-      success: () => {
-        //打开指定位置
-        wx.openLocation({
-          latitude: 34.140384, // 纬度，浮点数，范围为90 ~ -90
-          longitude: 108.98944, // 经度，浮点数，范围为180 ~ -180。
-          name: '航天基地京东大道和少陵路十字西北角西安航天国际会议中心东方红会议厅', // 位置名
-          address: '', // 地址详情说明
-          scale: 18, // 地图缩放级别,整型值,范围从1~28。默认为最大
-          infoUrl: '', // 在查看位置界面底部显示的超链接,可点击跳转
-        });
-      },
-    });
+    window.wx = wx;
+    console.log(window.wx);
   }
 );
 

src/view/AEROSPACE2023/index.vue

@@ -1,20 +1,182 @@
 <template>
-  <div class="AEROSPACE2023"></div>
+  <div class="AEROSPACE2023" @touchmove="touchmove">
+    <div ref="main" class="page" @touchstart="touchstart" @touchend="touchend">
+      <page0
+        :class="{
+          animate__animated: page === 0,
+          animate__fadeInUp: isUp && page === 0,
+          animate__fadeInDown: !isUp && page === 0,
+        }"
+        v-if="page === 0"
+      />
+      <page1
+        :class="{
+          animate__animated: page === 1,
+          animate__fadeInUp: isUp && page === 1,
+          animate__fadeInDown: !isUp && page === 1,
+        }"
+        v-if="page === 1"
+      />
+      <page2
+        :class="{
+          animate__animated: page === 2,
+          animate__fadeInUp: isUp && page === 2,
+          animate__fadeInDown: !isUp && page === 2,
+        }"
+        v-if="page === 2"
+      />
+      <page3
+        :class="{
+          animate__animated: page === 3,
+          animate__fadeInUp: isUp && page === 3,
+          animate__fadeInDown: !isUp && page === 3,
+        }"
+        v-if="page === 3"
+      />
+      <page4
+        :class="{
+          animate__animated: page === 4,
+          animate__fadeInUp: isUp && page === 4,
+          animate__fadeInDown: !isUp && page === 4,
+        }"
+        v-if="page === 4"
+      />
+    </div>
+  </div>
 </template>
 <script setup>
+import { ref } from 'vue';
+import page0 from './page0.vue';
+import page1 from './page1.vue';
+import page2 from './page2.vue';
+import page3 from './page3.vue';
+import page4 from './page4.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);
+// console.log(window.$originData);
+// const play_stats = ref(false);
+const main = ref(null);
+const page = ref(4);
+const isUp = ref(true);
+let startStats = 0;
+let time = Date.now();
+let startY = 0;
+const isChangePage = cha => {
+  let out = false; // false 不能翻页  true 能翻页
+  let sondiv = getinnerele();
+  // 视口高度 main.value.offsetHeight
+  // 内容高度 sondiv.offsetHeight
+
+  // 视口基本大于内容  则可以翻页
+  /**
+   * 初始化y值或结束y值不在翻页区间，则不能翻页
+   * 翻页区间是scrolltop 10 以内 和 底部剩余空间10 以内
+   */
+  let h = main.value.offsetHeight + main.value.scrollTop;
+  //   if (Math.pow(cha, 2) < 6400) out = true;
+  let timeRange = Date.now() - time > 50;
+  if (cha < -80 && startStats < 10 && timeRange) {
+    // 下滑
+    /**
+     * 下滑初始滚动小于10 -翻页
+     */
+    out = true;
+  } else {
+    // 上滑
+    /**
+     * 下滑剩余小于10 -翻页
+     */
+    if (sondiv.offsetHeight - h < 10 && cha > 80 && timeRange) out = true;
+  }
+  return out;
+};
+const touchstart = e => {
+  time = Date.now();
+  startStats = main.value.scrollTop;
+  startY = e.changedTouches[0].clientY;
+};
+
+const touchend = e => {
+  const cha = startY - e.changedTouches[0].clientY;
+  if (!isChangePage(cha)) return;
+  //  cha > 0    向上滑动手指
+  //  cha < 0    向下滑动手指
+  //  初始位置滚动为0的，则判断距离25即可
+  // 距离足够则滑动到下一页；
+  let n = cha > 0 ? 1 : -1;
+  let dn = n + page.value;
+  let len = 4;
+  //   if (dn < 0) dn = len;
+  //   if (dn > len) dn = 0;
+  if (dn < 0) return;
+  if (dn > len) return;
+  isUp.value = n === 1;
+  page.value = dn;
+  main.value.scrollTop = 0;
+};
 
+const touchmove = e => {
+  const cha = startY - e.changedTouches[0].clientY;
+  if (main.value.scrollTop <= 1 && cha < 0) e.preventDefault();
+  const ele = getinnerele()
+  if (cha > 0 && main.value.offsetHeight + main.value.scrollTop >= ele.offsetHeight ) e.preventDefault();
+};
+
+const getinnerele = () => {
+  let nodes = main.value.childNodes || [];
+  return nodes[page.value];
+};
 </script>
-<style>
+<style lang="scss">
+// 动画库
+@import url(./sass/animation.scss);
+// 字体库
+@import url(./sass/base.scss);
+// @import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css);
+
 .AEROSPACE2023 {
   width: 100vw;
   height: 100vh;
+  overflow: hidden;
+  background-image: url(./img/background.jpg);
+  background-size: 100% 100%;
+  max-width: 750px;
+  min-width: 330px;
+  margin: 0 auto;
+  display: block;
+
+  .imgbtn {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    z-index: 10;
+  }
+
+  .page {
+    width: 100%;
+    height: 100vh;
+    margin: 0 auto;
+    overflow-y: auto;
+
+    & > div {
+      width: 100%;
+    }
+  }
+
+  .excess-enter-active,
+  .excess-leave-active {
+    transition: opacity 0.1s ease;
+  }
+
+  .excess-enter-from,
+  .excess-leave-to {
+    opacity: 0;
+  }
 }
 </style>

src/view/AEROSPACE2023/page0.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="page-1">
+    <div class="t1 animate__animated animate__backInUp">
+      聚力空天
+      <br />
+      共赢未来
+    </div>
+    <van-image class="t2 animate__animated animate__backInUp" :src="yqh" />
+    <div class="t3 animate__animated animate__backInUp">
+      西安空天产业高质量发展<br />
+      暨区域资源推介会
+    </div>
+
+    <div class="t4 animate__animated animate__backInUp">
+      <span>中国·西安</span>
+      |
+      <span> 2023.08.22 </span>
+    </div>
+  </div>
+</template>
+<script setup>
+import { Image as VanImage } from 'vant';
+
+import yqh from './img/yqh.png';
+</script>
+<style lang="scss">
+// 动画库
+@import url(./sass/animation.scss);
+@import url(./sass/base.scss);
+.page-1 {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  overflow: auto;
+  color: #fff;
+
+  & > div {
+    position: absolute;
+  }
+
+  .t1 {
+    width: 100vw;
+    max-width: 380px;
+    top: 14.5vh;
+    font-size: 52px;
+    line-height: 1.5em;
+    font-family: puhui95;
+
+    display: block;
+    -ms-word-wrap: break-word;
+    word-wrap: break-word;
+    text-align: center;
+  }
+
+  .t2 {
+    top: 68vh;
+    left: 36vw;
+    width: 28vw;
+    height: 7.3vh;
+  }
+
+  .t3 {
+    font-family: PingFangSC-Regular, PingFang SC;
+    text-align: center;
+    left: 4.8vw;
+    top: 40vh;
+    background: #0007461a;
+    line-height: 1.5em;
+    width: 90.4vw;
+    padding: 15px 0;
+    border-radius: 6px;
+    border: 1px solid;
+    border-image: linear-gradient(
+        225deg,
+        rgba(50, 197, 255, 1),
+        rgba(25, 52, 178, 1)
+      )
+      1 1;
+  }
+
+  .t4 {
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    bottom: 4.9vh;
+    width: 100vw;
+    text-align: center;
+  }
+}
+</style>

src/view/AEROSPACE2023/page1.vue

@@ -0,0 +1,24 @@
+<template>
+  <skeleton title="会议内容" titleLine="">
+    <div class="bg animate__animated animate__backInUp">
+      <p class="duanluo">
+        聚力空天一体，共绘发展蓝图。为进一步推动西安空天产业高质量发展，充分展示区域空天产业资源优势。大力提升“世界一流航空新城”、“世界一流航天新城”的影响力和美誉度。
+      </p>
+      <p class="duanluo">
+        8月22日，“聚力空天
+        共赢未来”西安空天产业高质量发展暨区域资源推介会将于西安举行。
+      </p>
+      <p class="duanluo">
+        本次活动将邀请航空、航天全产业链上的优质企业200余家，并邀请行业商会、协会共同参与。作为中国唯一、世界最大的航空全产业链聚集区，国内唯一拥有航天系统完整产业链的城市；西安也将以优质的空天产业资源和丰富的产业空间承载与您一起共同描绘西安空天产业的美好未来。
+      </p>
+    </div>
+  </skeleton>
+</template>
+<script setup>
+import skeleton from './skeleton.vue';
+</script>
+<style lang="scss">
+// 动画库
+@import url(./sass/animation.scss);
+@import url(./sass/base.scss);
+</style>

src/view/AEROSPACE2023/page2.vue

@@ -0,0 +1,33 @@
+<template>
+  <skeleton title="诚挚邀请" titleLine="">
+    <div class="bg bg5 animate__animated animate__backInUp">
+      <p class="duanluo shouh">尊敬的&nbsp;&nbsp;先生/女士：</p>
+      <p class="duanluo">
+        鉴于您在行业的卓越成就和广泛影响力，特此诚邀您出席2023年8月22日（星期二）15:00在西安航天国际会议中心举办的“聚力空天
+        共赢未来”西安空天产业高质量发展暨区域资源推介会，共商空天产业发展新图景，共谋投资合作新机遇。
+      </p>
+      <p class="duanluo">
+        期待您的拨冗莅临！
+      </p>
+    </div>
+  </skeleton>
+</template>
+<script setup>
+import skeleton from './skeleton.vue';
+</script>
+<style lang="scss">
+// 动画库
+@import url(./sass/animation.scss);
+@import url(./sass/base.scss);
+h2 {
+  margin-bottom: 10px;
+}
+
+.bg5 {
+  margin-top: 11.7vh;
+
+  .shouh {
+    text-indent: 0 !important;
+  }
+}
+</style>

src/view/AEROSPACE2023/page3.vue

@@ -0,0 +1,101 @@
+<template>
+  <skeleton title="活动安排" titleLine="">
+    <div style="margin-top: 0;" class="bg bg4 animate__animated animate__backInUp">
+      <p class="duanluo">时间：8月22日 15:00-16:10</p>
+      <p class="duanluo">地点：西安航天国际会议中心东方红会议厅</p>
+      <p class="duanluo">规模：230人</p>
+    </div>
+    <div class="bg bg4 animate__animated animate__backInUp">
+      <p class="duanluo">会议议程</p>
+    </div>
+    <div class="link bg4 animate__animated animate__backInUp" v-for="(item, index) in list" :key="index">
+      <div class="link_icon"></div>
+      <p class="duanluo" v-text="item.key"></p>
+      <p class="duanluo" v-text="item.value"></p>
+    </div>
+  </skeleton>
+</template>
+<script setup>
+import skeleton from './skeleton.vue';
+const list = [
+    {
+        key: '15:00 - 15:05',
+        value: '阎良区（航空基地）领导致辞省商务厅领导致辞'
+    },
+    {
+        key: '15:05 - 15:20',
+        value: '领导致辞'
+    },
+    {
+        key: '15:20 - 15:30',
+        value: '阎良区（航空基地）投资环境推介'
+    },
+    {
+        key: '15:30 - 15:40',
+        value: '航天基地投资环境推介'
+    },
+    {
+        key: '15:40 - 16:00',
+        value: '阎良区（航空基地）、航天基地区域资源发布'
+    },
+    {
+        key: '16:00 - 16:05',
+        value: '专家解读西安空天产业发展机遇'
+    },
+    {
+        key: '16:05 - 16:10',
+        value: '集中签约'
+    }
+]
+</script>
+<style lang="scss">
+// 动画库
+@import url(./sass/animation.scss);
+@import url(./sass/base.scss);
+.bg4 {
+  margin-top: 9px;
+  margin-bottom: 9px;
+  padding-top: 7px!important;
+  padding-bottom: 7px!important;
+
+  .duanluo {
+    text-indent: 0 !important;
+    line-height: 1.5em;
+  }
+}
+
+.link {
+  padding-left: 20px;
+  font-size: 14px;
+
+  .link_icon {
+    width: 4.2px;
+    height: 4.2px;
+    background-color: #fff;
+    float: left;
+    transform: rotate(45deg);
+    margin-left: -10px;
+    margin-top: 0.5em;
+    position: relative;
+
+    &::after,
+    &::before {
+      content: ' ';
+      display: block;
+      width: 4.2px;
+      height: 4.2px;
+      position: absolute;
+      background-color: rgba($color: #ffffff, $alpha: 0.5);
+      top: 8px;
+      left: 8px;
+    }
+
+    
+    &::before {
+      background-color: rgba($color: #ffffff, $alpha: 0.2);
+      top: 16px;
+      left: 16px;
+    }
+  }
+}
+</style>

src/view/AEROSPACE2023/page4.vue

@@ -0,0 +1,75 @@
+<template>
+  <skeleton title="活动安排" titleLine="">
+    <div class="location animate__animated animate__backInUp">
+      <img src="./img/location.jpg" />
+    </div>
+
+    <div class="bg bg4 animate__animated animate__backInUp">
+      <p class="duanluo">嘉宾入场时间：8月22日 14:30</p>
+      <p class="duanluo">
+        地址：航天基地京东大道和少陵路十字西北角西安航天国际会议中心东方红会议厅
+      </p>
+    </div>
+
+    <van-button style="margin-top: 7.9vh;" type="primary" block color="#61BFE9" @click="toDaohang">
+      一键导航
+    </van-button>
+  </skeleton>
+</template>
+<script setup>
+import skeleton from './skeleton.vue';
+
+function toDaohang() {
+    console.log(window.wx);
+  if (!window.wx) return;
+  window.wx.checkJsApi({
+    jsApiList: ['openLocation'],
+    success: () => {
+      //打开指定位置
+      window.wx.openLocation({
+        latitude: 34.140384, // 纬度，浮点数，范围为90 ~ -90
+        longitude: 108.98944, // 经度，浮点数，范围为180 ~ -180。
+        name: '航天基地京东大道和少陵路十字西北角西安航天国际会议中心东方红会议厅', // 位置名
+        address: '', // 地址详情说明
+        scale: 18, // 地图缩放级别,整型值,范围从1~28。默认为最大
+        infoUrl: '', // 在查看位置界面底部显示的超链接,可点击跳转
+      });
+    },
+  });
+}
+</script>
+<style lang="scss">
+// 动画库
+@import url(./sass/animation.scss);
+@import url(./sass/base.scss);
+
+.location {
+  font-family: PingFangSC-Regular, PingFang SC;
+  text-align: center;
+  background: #0007461a;
+  line-height: 1.5em;
+  width: 72vw;
+  height: 72vw;
+  padding: 10px;
+  margin: 0 auto;
+  border-radius: 6px;
+  border: 1px solid;
+  border-image: linear-gradient(
+      225deg,
+      rgba(50, 197, 255, 1),
+      rgba(25, 52, 178, 1)
+    )
+    1 1;
+
+  img {
+    width: 100%;
+    border-radius: 6px;
+  }
+}
+
+.bg4 {
+  .duanluo {
+    text-indent: 0 !important;
+  }
+}
+</style>

src/view/AEROSPACE2023/sass/base.scss

@@ -0,0 +1,14 @@
+@font-face {
+    font-family: 'puhui95';
+    src: url('http://assets.grasslandstarrysky.top/alipuhui/alipuhui2.0.95.woff') format('woff'),
+        url('http://assets.grasslandstarrysky.top/alipuhui/alipuhui2.0.95.woff2') format('woff2');
+}
+
+.p6 {
+    width: 100%;
+    line-height: 2em;
+}
+
+.nowrap {
+    white-space: nowrap;
+}

src/view/AEROSPACE2023/skeleton.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="page-skeleton">
+    <div class="center">
+      <div v-if="title" class="title_text nowrap">
+        {{ title }}
+      </div>
+      <div class="centent">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { defineProps } from 'vue';
+import 'animate.css';
+defineProps({
+  title: {
+    type: String, //参数类型
+    default: String, //默认值
+    required: true, //是否必须传递
+  },
+  titleLine: {
+    type: String, //参数类型
+    default: String, //默认值
+    required: true, //是否必须传递
+  },
+});
+</script>
+<style lang="scss">
+// 动画库
+@import url(./sass/animation.scss);
+@import url(./sass/base.scss);
+#app {
+  width: 100%;
+  height: 100%;
+}
+.page-skeleton {
+  background-image: url(./img/background.jpg);
+  background-size: 100% 100%;
+  min-height: 100vh;
+  padding-top: 12.3vh;
+  position: relative;
+  overflow: auto;
+  margin: 0 auto;
+  font-family: 'Microsoft YaHei', Tahoma, Helvetica, Arial, 宋体, sans-serif;
+  font-weight: 400;
+
+  .i1 {
+    position: absolute;
+    z-index: 8;
+    top: 0;
+    width: 100%;
+    height: 10vh;
+    transform: rotateZ(0deg);
+    display: block;
+  }
+
+  .center {
+    text-align: center;
+    line-height: 2em;
+    font-size: 14px;
+    color: #fff;
+    overflow-y: auto;
+
+    .title_text {
+      width: 52vw;
+      text-align: center;
+      margin: 0 auto 3.1vh auto;
+      text-overflow: ellipsis;
+      font-size: 20px;
+      line-height: 1.8em;
+      height: 1.8em;
+      letter-spacing: 6px;
+      font-family: puhui95;
+      font-weight: 600;
+      background: linear-gradient(225deg, #35b1bb, #1932b2);
+
+      &::after {
+        content: ' ';
+        display: block;
+        background-color: #08145d;
+        height: 6px;
+        transform: rotate(3deg);
+        position: relative;
+        z-index: -1;
+        top: -5px;
+      }
+    }
+
+    .centent {
+      width: 93vw;
+      margin: 0 auto;
+      line-height: 1.5em;
+      text-align: left;
+      overflow-y: scroll;
+      letter-spacing: 0.08em;
+      overflow: auto;
+
+      > h2 {
+        margin-bottom: 10px;
+      }
+
+      .bg {
+        background-color: rgba(0, 7, 70, 0.15);
+        padding: 17px 10px 14px 11px;
+        border-radius: 6px;
+
+        .duanluo {
+          text-indent: 2em;
+          line-height: 2em;
+          font-size: 15px;
+        }
+      }
+    }
+  }
+}
+</style>