@shijiu/jsview-vue-samples 2.2.426-test.0 → 2.3.0

package/SpringFestival/SpringFestivalScene/LanternAnim.js

@@ -0,0 +1,60 @@
+import { getKeyFramesGroup } from "jsview";
+
+export const LANTERN_LEFT_ANIM = "FestivalScene_left_shake"
+export const LANTERN_RIGHT_ANIM = "FestivalScene_right_shake"
+
+const cStyleShell = getKeyFramesGroup();
+
+/* 传值样例:
+    buildZRotate("Claw_moveLeftShake", 2000, "center top", [
+        { deg: 0, timeStamp: 0 },
+        { deg: 14, timeStamp: 300 },
+        { deg: 15, timeStamp: 1600 },
+        { deg: -7, timeStamp: 1800 },
+        { deg: 3, timeStamp: 1900 },
+        { deg: 0, timeStamp: 2000 },
+    ])
+    总时长2000为2s, center top:前为横向，后为纵向
+*/
+function buildZRotate(name, totalTime, origin, frameList) {
+  let frameDefines = [];
+  for (let i = 0; i < frameList.length; i++) {
+    let frameItem = frameList[i];
+    frameDefines.push(
+      `${Math.floor((frameItem.timeStamp / totalTime) * 10000) / 100
+      }%{transform:rotate3d(0,0,1,${frameItem.deg
+      }deg);transform-origin:${origin}}`
+    );
+  }
+  let finalStr = `@keyframes ${name} {`;
+  for (let i = 0; i < frameDefines.length; i++) {
+    finalStr += frameDefines[i];
+  }
+  console.log("buildShake=" + finalStr);
+  return finalStr;
+}
+
+export function initLanternAnim() {
+  cStyleShell.insertRule(
+    buildZRotate(LANTERN_LEFT_ANIM, 3400, "center top", [
+      { deg: 0, timeStamp: 0 },
+      { deg: 12, timeStamp: 1200 },
+      { deg: -5, timeStamp: 2900 },
+      { deg: 0, timeStamp: 3400 },
+    ])
+  );
+
+  cStyleShell.insertRule(
+    buildZRotate(LANTERN_RIGHT_ANIM, 3400, "center top", [
+      { deg: 0, timeStamp: 0 },
+      { deg: -12, timeStamp: 1200 },
+      { deg: 5, timeStamp: 2900 },
+      { deg: 0, timeStamp: 3400 },
+    ])
+  );
+}
+
+export function releaseLanternAnim() {
+  cStyleShell.removeRule(LANTERN_LEFT_ANIM);
+  cStyleShell.removeRule(LANTERN_RIGHT_ANIM);
+}

package/SpringFestival/SpringFestivalScene/Rain.vue

@@ -0,0 +1,137 @@
+<script setup>
+import { JsvSpray } from "jsview";
+import { ref, onBeforeUnmount, onMounted } from "vue";
+
+const props = defineProps({
+  urlList: {
+    type: Array,
+    required: true,
+  },
+  autoStart: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+//获取一个随机顺序
+function getRandomOrder(numbers) {
+  let currentIndex = numbers.length,
+    temporaryValue,
+    randomIndex;
+  // 从数组的最后一个元素开始，向前遍历
+  while (currentIndex !== 0) {
+    // 选取一个随机索引
+    randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex -= 1;
+
+    // 交换当前索引和随机索引处的元素
+    temporaryValue = numbers[currentIndex];
+    numbers[currentIndex] = numbers[randomIndex];
+    numbers[randomIndex] = temporaryValue;
+  }
+
+  return numbers;
+}
+
+//目前版本的粒子生成有问题, 会在一开始就集中出现, 所以要随机拉开几个JsvSpray的位置
+const positionRange = [-50, -100];
+const step = (positionRange[1] - positionRange[0]) / props.urlList.length;
+const urls = getRandomOrder(props.urlList);
+const sprayInfos = [];
+for (let i = 0; i < urls.length; ++i) {
+  sprayInfos.push({
+    url: urls[i],
+    pos: positionRange[0] + step * i,
+    config: {
+      type: 1,
+      particleNum: 2,
+      deltaAngle: 0,
+      deltaWidth: 100,
+      deltaHeight: 1,
+      pointSizeMin: 90,
+      pointSizeMax: 120,
+      speedMin: -5,
+      speedMax: -10,
+      lifeMin: 3500 + i * 200,
+      lifeMax: 4000 + i * 200,
+      accelerateX: 0,
+      accelerateY: 0,
+      addNumSpeed: 0.0001,
+      angularVelocityMin: 10,
+      angularVelocityMax: 15,
+      enableFade: false,
+      enableShrink: false,
+    },
+  });
+}
+
+//粒子数量少的时候, 添加有bug, 为了规避此处分成三拨开始
+let showSceond = ref(false);
+let showThird = ref(false);
+
+let list1 = sprayInfos.slice(0, 1);
+let list2 = sprayInfos.slice(1, 3);
+let list3 = sprayInfos.slice(3);
+
+let show = ref(false);
+let timeoutHandler = -1;
+function start() {
+  show.value = true;
+  timeoutHandler = setTimeout(() => {
+    showSceond.value = true;
+    timeoutHandler = setTimeout(() => {
+      showThird.value = true;
+    }, 700);
+  }, 700);
+}
+
+onMounted(() => {
+  if (props.autoStart) {
+    start();
+  }
+});
+
+onBeforeUnmount(() => {
+  clearTimeout(timeoutHandler);
+});
+
+defineExpose({
+  start,
+});
+</script>
+
+<template>
+  <div v-if="show">
+    <div
+      v-for="(item, index) in list1"
+      :key="`item_${index}`"
+      :style="{
+        top: item.pos,
+      }"
+    >
+      <jsv-spray :pointRes="`url(${item.url})`" :sprayStyle="item.config" />
+    </div>
+    <div v-if="showSceond">
+      <div
+        v-for="(item, index) in list2"
+        :key="`item_${index}`"
+        :style="{
+          top: item.pos,
+        }"
+      >
+        <jsv-spray :pointRes="`url(${item.url})`" :sprayStyle="item.config" />
+      </div>
+    </div>
+    <div v-if="showThird">
+      <div
+        v-for="(item, index) in list3"
+        :key="`item_${index}`"
+        :style="{
+          top: item.pos,
+        }"
+      >
+        <jsv-spray :pointRes="`url(${item.url})`" :sprayStyle="item.config" />
+      </div>
+    </div>
+  </div>
+</template>

package/SpringFestival/SpringFestivalScene/Scene.vue

@@ -0,0 +1,218 @@
+<script setup>
+import { sourceMap } from "./imageConfig";
+
+import ChunLian, {
+  initChunLianAnim,
+  releaseChunLianAnim,
+} from "./ChunLian.vue";
+import Rain from "./Rain.vue";
+import {
+  LANTERN_LEFT_ANIM,
+  LANTERN_RIGHT_ANIM,
+  initLanternAnim,
+  releaseLanternAnim,
+} from "./LanternAnim";
+import { buildBounce } from "./FreeMoveBuilder";
+
+import { ref, shallowRef, onMounted, onBeforeUnmount } from "vue";
+
+import { JsvPreload, buildPreloadInfo, JsvFreeMoveActor } from "jsview";
+
+const sprayImageList = [
+  sourceMap.particleCoin1,
+  sourceMap.particleCoin2,
+  sourceMap.particleCoin3,
+  sourceMap.particleRedBag1,
+  sourceMap.particleRedBag2,
+];
+
+const scrollImage = [sourceMap.scrollTop, sourceMap.scrollBottom];
+
+const chunLianLeftRef = shallowRef();
+const chunLianRightRef = shallowRef();
+const rain1 = shallowRef();
+const rain2 = shallowRef();
+
+//初始化动画
+initChunLianAnim();
+initLanternAnim();
+
+function chunLianOnAnimEnd() {
+  startSnakeAnim();
+}
+
+//preload 逻辑
+const keyPreloadInfo = [
+  buildPreloadInfo(sourceMap.background),
+  buildPreloadInfo(sourceMap.scrollTop),
+  buildPreloadInfo(sourceMap.scrollBottom),
+  buildPreloadInfo(sourceMap.textLeft),
+  buildPreloadInfo(sourceMap.textRight),
+];
+let keyResourceLoaded = ref(false);
+function onKeyPreloadDone() {
+  keyResourceLoaded.value = true;
+}
+
+const rainPreloadInfo = [];
+sprayImageList.forEach((item) => {
+  rainPreloadInfo.push(buildPreloadInfo(item));
+});
+let rainLoaded = ref(false);
+function onRainPreloadDone() {
+  rainLoaded.value = true;
+}
+
+const showSnake = ref(false);
+let rLeftSnakeRef = shallowRef(null);
+let rRightSnakeRef = shallowRef(null);
+let vLeftSnakeControl = null;
+let vRightSnakeControl = null;
+function startSnakeAnim() {
+  showSnake.value = true;
+  vLeftSnakeControl = rLeftSnakeRef.value.control;
+  vLeftSnakeControl.run((cmds) => [
+    ...buildBounce(cmds, 1, -400, -400, 7, 2.0, (state) => {}),
+  ]);
+  vRightSnakeControl = rRightSnakeRef.value.control;
+  vRightSnakeControl.run((cmds) => [
+    ...buildBounce(cmds, 1, 400, -400, 7, 2.0, (state) => {}),
+  ]);
+}
+onMounted(() => {});
+
+onBeforeUnmount(() => {
+  releaseChunLianAnim();
+  releaseLanternAnim();
+});
+</script>
+<template>
+  <jsv-preload
+    :preloadList="keyPreloadInfo"
+    :onPreloadDone="onKeyPreloadDone"
+  ></jsv-preload>
+  <jsv-preload
+    v-if="keyResourceLoaded"
+    :preloadList="rainPreloadInfo"
+    :onPreloadDone="onRainPreloadDone"
+  ></jsv-preload>
+
+  <div
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundImage: `url(${sourceMap.background})`,
+    }"
+  ></div>
+
+  <div v-if="rainLoaded">
+    <rain ref="rain1" :url-list="sprayImageList" />
+    <div
+      :style="{
+        left: 1740,
+      }"
+    >
+      <rain ref="rain2" :url-list="sprayImageList" />
+    </div>
+  </div>
+
+  <div v-if="keyResourceLoaded">
+    <div
+      :style="{
+        left: 180,
+        top: 50,
+      }"
+    >
+      <chun-lian
+        ref="chunLianLeftRef"
+        :is-left="true"
+        :content-image="`url(${sourceMap.textLeft})`"
+        :scroll-image="scrollImage"
+        :onAnimEnd="chunLianOnAnimEnd"
+      />
+      <img
+        :style="{
+          left: 150,
+          top: -30,
+        }"
+        :src="`url(${sourceMap.iconRedBag})`"
+      />
+    </div>
+    <div
+      :style="{
+        left: 1475,
+        top: 50,
+      }"
+    >
+      <chun-lian
+        ref="chunLianRightRef"
+        :is-left="false"
+        :content-image="`url(${sourceMap.textRight})`"
+        :scroll-image="scrollImage"
+      />
+      <img
+        :style="{
+          left: 25,
+          top: -10,
+        }"
+        :src="`url(${sourceMap.iconYuanBao})`"
+      />
+    </div>
+  </div>
+
+  <div v-if="keyResourceLoaded">
+    <img
+      :src="sourceMap.lanternLeft"
+      :style="{
+        top: 0,
+        left: 0,
+        width: 320,
+        height: 320,
+        animation: `${LANTERN_LEFT_ANIM} 12s infinite`,
+      }"
+    />
+    <img
+      :src="sourceMap.lanternRight"
+      :style="{
+        top: 0,
+        left: 1650,
+        width: 320,
+        height: 320,
+        animation: `${LANTERN_RIGHT_ANIM} 12s infinite`,
+      }"
+    />
+  </div>
+
+  <div v-show="showSnake">
+    <JsvFreeMoveActor
+      :top="690"
+      :left="145"
+      :width="320"
+      :height="320"
+      ref="rLeftSnakeRef"
+    >
+      <img
+        :src="sourceMap.snakeLeft"
+        :style="{
+          width: 320,
+          height: 320,
+        }"
+      />
+    </JsvFreeMoveActor>
+    <JsvFreeMoveActor
+      :top="690"
+      :left="1447"
+      :width="320"
+      :height="320"
+      ref="rRightSnakeRef"
+    >
+      <img
+        :src="sourceMap.snakeRight"
+        :style="{
+          width: 320,
+          height: 320,
+        }"
+      />
+    </JsvFreeMoveActor>
+  </div>
+</template>

package/SpringFestival/SpringFestivalScene/imageConfig.js

@@ -0,0 +1,87 @@
+// import background from "./assets/background.png";
+// import hongBao from "./assets/hong_bao.png";
+// import yuanBao from "./assets/yuan_bao.png";
+
+// import coin1 from "./assets/coin1.png";
+// import coin2 from "./assets/coin2.png";
+// import coin3 from "./assets/coin3.png";
+// import redBag1 from "./assets/redBag1.png";
+// import redBag2 from "./assets/redBag2.png";
+
+// import juanZhou1 from "./assets/juan_zhou_1.png";
+// import juanZhou2 from "./assets/juan_zhou_2.png";
+// import chunLianLeft from "./assets/chun_lian_left.png";
+// import chunLianRight from "./assets/chun_lian_right.png";
+
+// import iLeftLantern from "./assets/left_lantern.png";
+// import iRightLantern from "./assets/right_lantern.png";
+
+// import iLeftSnake from "./assets/snake_left.png";
+// import iRightSnake from "./assets/snake_right.png";
+
+//建议1920x1080
+let background = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/background.png?md5=68b77fa35ed6d287c724d875bc00b545";
+
+// 左右栏目的下落内容
+//建议50x50
+let coin1 = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/coin1.png?md5=14450466887cdf486a17e133501a70b3";
+let coin2 = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/coin2.png?md5=df6b542c577e07a574fe64a1761755a2";
+let coin3 = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/coin3.png?md5=4da163a113e51295f223e66e6f14d7a0";
+let redBag1 = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/redBag1.png?md5=6a9be61b6919dd4f1a791a67b24c9b9a";
+let redBag2 = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/redBag2.png?md5=38d4750b2dbbe6d1a5de173bd6481229";
+
+//建议265x55
+let juanZhou1 = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/juan_zhou_1.png?md5=5129c12099fb3703972cfe5a35057385";
+let juanZhou2 = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/juan_zhou_2.png?md5=4db0cd5ceadbfcbacfdf1a214a5e8a1e";
+
+//建议209x874
+let chunLianLeft = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/chun_lian_left.png?md5=10cf29941d3c66355f3e28133a641921";
+let chunLianRight = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/chun_lian_right.png?md5=b2e5f07c271d0dd3e6c57fa713dc814a";
+
+// 建议320x320
+let iLeftLantern = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/left_lantern.png?md5=10990059f7a98bfac1945407cf323c7d";
+let iRightLantern = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/right_lantern.png?md5=616378f545f0e1c93e3e0c226a4976a1";
+
+// 建议320x320
+let iLeftSnake = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/snake_left.png?md5=e0310d4ba1c74899899ca365a8b16385";
+let iRightSnake = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/snake_right.png?md5=70ca45f762bbc29b912abd010f02fb0c";
+
+// 春联顶栏的装饰
+//88x106
+let hongBao = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/hong_bao.png?md5=03a9ccf8f47af7d907b55be333a614f8";
+//99x71
+let yuanBao = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SpringFestival/SpringFestivalScene/imageConfig/yuan_bao.png?md5=33e38f8003113db016292345e4dbfcbe";
+
+//注意, 图片的尺寸要按注释的大小给
+export const sourceMap = {
+  //1920x1080
+  background: background,
+
+  //100x100
+  particleCoin1: coin1,
+  particleCoin2: coin2,
+  particleCoin3: coin3,
+  particleRedBag1: redBag1,
+  particleRedBag2: redBag2,
+
+  //265x55
+  scrollTop: juanZhou1,
+  scrollBottom: juanZhou2,
+
+  //209x874
+  textLeft: chunLianLeft,
+  textRight: chunLianRight,
+
+  //320x320
+  snakeLeft: iLeftSnake,
+  snakeRight: iRightSnake,
+
+  //320x320
+  lanternLeft: iLeftLantern,
+  lanternRight: iRightLantern,
+
+  //88x106
+  iconRedBag: hongBao,
+  //99x71
+  iconYuanBao: yuanBao
+}

package/SpringFestival/SpringFestivalScene/index.js

@@ -0,0 +1 @@
+export { default as SprFestivalScene } from "./Scene.vue"

package/Swiper/App.vue

@@ -7,6 +7,7 @@
 <script setup>
 import { JsvSwiper, useFocusHub, EdgeDirection } from "jsview";
 import { onMounted } from "vue";
+import Item from "./Item.vue"
 
 const focusHub = useFocusHub();
 
@@ -16,13 +17,19 @@ function randomColor() {
     "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
   );
 }
+const imgSrcList = [
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228543_img_20230610184253.png",
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228544_img_20230610184145.png",
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228545_img_20230610184110.png",
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228542_img_20230610184253.png",
+];
 let data = [];
 for (let i = 0; i < 10; i++) {
   data.push({
     width: 400,
     height: 300,
     index: i,
-    backgroundColor: randomColor(),
+    src: imgSrcList[i % imgSrcList.length],
   });
 }
 
@@ -59,14 +66,23 @@ onMounted(() => {
 </script>
 
 <template>
-  <div>
+  <div :style="{width: 1280, height: 720, backgroundColor:'#F5F5DC'}"></div>
+  <div :style="{
+    width: 1280,
+    height: 100,
+    fontSize: 30,
+    textAlign: 'center',
+    lineHeight: 100,
+    color: '#000000'
+  }">
+    上下键切换获焦的轮播图, 左右键切换轮播图显示海报, 失焦轮播图自动轮播
+  </div>
+  <div :style="{left: (1280 - 400) / 2, top: 100}">
     <jsv-swiper
       name="mySwiper1"
       ref="mySwiper1"
       :totalFrame="data.length"
       :layoutInfo="{
-        left: 50,
-        top: 50,
         width: 400,
         height: 200,
       }"
@@ -80,17 +96,7 @@ onMounted(() => {
       :onEdge="swiper1.onEdge"
     >
       <template #itemView="{ dataIndex, focused }">
-        <div
-          :style="{
-            width: data[dataIndex].width,
-            height: data[dataIndex].height,
-            backgroundColor: data[dataIndex].backgroundColor,
-            fontSize: 40,
-            color: focused ? '#FF0000' : '#FFFFFF',
-          }"
-        >
-          {{ data[dataIndex].index }}
-        </div>
+        <item :data="data[dataIndex]" :focused="focused"/>
       </template>
     </jsv-swiper>
 
@@ -99,7 +105,6 @@ onMounted(() => {
       ref="mySwiper2"
       :totalFrame="data.length"
       :layoutInfo="{
-        left: 50,
         top: 300,
         width: 400,
         height: 200,
@@ -118,30 +123,24 @@ onMounted(() => {
       :smoothTranslate="true"
     >
       <template #itemView="{ dataIndex, focused }">
-        <div
-          :style="{
-            width: data[dataIndex].width,
-            height: data[dataIndex].height,
-            backgroundColor: data[dataIndex].backgroundColor,
-            fontSize: 40,
-            color: focused ? '#FF0000' : '#FFFFFF',
-          }"
-        >
-          {{ data[dataIndex].index }}
-        </div>
+        <item :data="data[dataIndex]" :focused="focused"/>
       </template>
       <template #indicatorDot="{ dataIndex, currentIndex }">
         <div
           :style="{
             width: 20,
             height: 20,
+            color: '#ffffff',
+            lineHeight: 20,
+            textAlign: 'center',
             backgroundColor:
               dataIndex == currentIndex
                 ? 'rgba(100, 100, 100, 0.7)'
                 : '#ff0000',
-            borderRadius: 10,
           }"
-        ></div>
+        >
+        {{ dataIndex }}
+      </div>
       </template>
     </jsv-swiper>
   </div>

package/Swiper/Item.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      backgroundImage: data.src,
+      fontSize: 40,
+      color: focused ? '#FF0000' : '#FFFFFF',
+    }"
+  >
+    {{ "海报" + data.index }}
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  data: Object,
+  focused: Boolean,
+});
+</script>

package/SwiperTest/App.vue

@@ -44,39 +44,39 @@ const layoutInfo = {
 const items = reactive([
   {
     image:
-      "https://pic.meetao.com/images/admin/2531edf0b7e34c299892ceace72b2c81.jpg",
+      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/2531edf0b7e34c299892ceace72b2c81.jpg",
   },
   {
     image:
-      "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/TabUi/rBAQvWLWXvKAdqZ5AAB5Ot8fJhc62.webp",
+      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/rBAQvWLWXvKAdqZ5AAB5Ot8fJhc62.webp",
   },
   {
     image:
-      "https://pic.meetao.com/images/admin/bc28dfc4a9ae470e86eed8f743a3d97a.png",
+      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/bc28dfc4a9ae470e86eed8f743a3d97a.png",
   },
   {
     image:
-      "https://pic.meetao.com/images/admin/1070701b82e8416d940c558f5fb61ad2.jpg",
+      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/1070701b82e8416d940c558f5fb61ad2.jpg",
   },
   {
     image:
-      "https://pic.meetao.com/images/admin/5a454819dabd469991c62c72e348c49b.jpg",
+      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/5a454819dabd469991c62c72e348c49b.jpg",
   },
   {
     image:
-      "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/TabUi/rBAQvWNpwcGAM-w1AACsNFeB3SQ56.webp",
+      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/rBAQvWNpwcGAM-w1AACsNFeB3SQ56.webp",
   },
   {
     image:
-      "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/TabUi/rBAQvWNpw9GAbOL_AABn2OGO6UY97.webp",
+      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/rBAQvWNpw9GAbOL_AABn2OGO6UY97.webp",
   },
   {
     image:
-      "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/TabUi/rBAQvWLWWFGAfDz4AAB_dMtnwC831.webp",
+      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/rBAQvWLWWFGAfDz4AAB_dMtnwC831.webp",
   },
   {
     image:
-      "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/TabUi/rBAQvWNpxACASppDAACKmP9qkQ020.webp",
+      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/rBAQvWNpxACASppDAACKmP9qkQ020.webp",
   },
 ]);