第一场景第一镜头第一按钮，人物改用序列帧

README.md

@@ -6,12 +6,10 @@
 ## todo
 import ... from '/public/dsflksdfj/...' 这样没意义吧？
 
-文物列表页，进行筛选、搜索后，重新计算宽度
+内容页人物替换成动图
 
 结尾二维码没有
 
-内容页人物替换成动图
-
 
 用新版全景
 

src/components/CameraContent-1-1-1.vue

@@ -45,13 +45,41 @@
         <div class="zhuanchang-tag two">
           市规划
         </div>
-        <div class="character-wrap">
+        <!-- <div class="character-wrap">
           <img
             class="character"
             src="@/assets/images/character-luibingzhong.png"
             alt=""
             draggable="false"
           >
+        </div> -->
+        <div
+          class="character-frames-wrapper"
+        >
+          <img
+            v-show="animationType === 1"
+            class="frames frames-2"
+            :class="{
+              animating: isCharacterSpecialMoving1,
+              state1: isCharacterSpecialMoving1 === 0,
+              state2: isCharacterSpecialMoving1 === 1,
+            }"
+            src="@/assets/images/character-luibingzhong-2.png"
+            alt=""
+            draggable="false"
+          >
+          <img
+            v-show="animationType === 2"
+            class="frames frames-3"
+            :class="{
+              animating: isCharacterSpecialMoving2,
+              state1: isCharacterSpecialMoving2 === 0,
+              state2: isCharacterSpecialMoving2 === 1,
+            }"
+            src="@/assets/images/character-luibingzhong-1.png"
+            alt=""
+            draggable="false"
+          >
         </div>
         <h2 class="design">
           大都设计
@@ -211,11 +239,34 @@ const layoutDataList = [
 
 const displayingHotspotIdx = ref(-1)
 
+const isCharacterSpecialMoving1 = ref(0)
+const isCharacterSpecialMoving2 = ref(0)
+const animationType = ref(1)
+
+setTimeout(() => {
+  isCharacterSpecialMoving1.value = 1
+  setTimeout(() => {
+    animationType.value = 2
+  }, 3000)
+}, 0)
 
+setInterval(() => {
+  isCharacterSpecialMoving2.value = 1
+  setTimeout(() => {
+    isCharacterSpecialMoving2.value = 0
+  }, 3000)
+}, 3300)
 </script>
 
 <style lang="less" scoped>
 @page-height-design-px: 970;
+
+@frame-width: 256px;
+@frame-height: 512px;
+@duration-2: 3s;
+@frame-num-2: 72;
+@duration-3: 3s;
+@frame-num-3: 72;
 .camera-content-1-1{
   position: absolute;
   left: 0;
@@ -381,18 +432,52 @@ const displayingHotspotIdx = ref(-1)
       >.zhuanchang-tag.two{
         left: calc(220 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
-      >.character-wrap{
+      // >.character-wrap{
+      //   position: absolute;
+      //   left: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      //   top: calc(-60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      //   width: calc(585 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      //   height: calc(796 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      //   >img.character{
+      //     position: absolute;
+      //     left: 0;
+      //     top: 0;
+      //     width: 100%;
+      //     height: 100%;
+      //   }
+      // }
+
+      >.character-frames-wrapper {
         position: absolute;
-        left: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        top: calc(-60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        width: calc(585 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        height: calc(796 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        >img.character{
+        left: calc(200 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        bottom: calc(-30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(@frame-height * 1.5);
+        width: calc(@frame-width * 1.5);
+        overflow: hidden;
+        >.frames {
           position: absolute;
-          left: 0;
-          top: 0;
-          width: 100%;
           height: 100%;
+          transition-property: none;
+          &.animating{
+            transition-property: left;
+          }
+          &.state1 {
+            left: 0;
+          }
+        }
+        >.frames-2{
+          transition-duration: @duration-2;
+          transition-timing-function: steps(@frame-num-2 - 1, jump-end);
+          &.state2 {
+            left: calc(-100% * (@frame-num-2 - 1));
+          }
+        }
+        >.frames-3{
+          transition-duration: @duration-3;
+          transition-timing-function: steps(@frame-num-3 - 1, jump-end);
+          &.state2 {
+            left: calc(-100% * (@frame-num-3 - 1));
+          }
         }
       }
       >h2.design{
@@ -609,4 +694,20 @@ const displayingHotspotIdx = ref(-1)
     }
   }
 }
+@media only screen and (max-width: 1560px) {
+  .character-frames-wrapper {
+    left: calc(250 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) !important;
+    bottom: calc(0 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) !important;
+    height: calc(@frame-height * 1) !important;
+    width: calc(@frame-width * 1) !important;
+  }
+}
+@media only screen and (max-width: 1100px) {
+  .character-frames-wrapper {
+    left: calc(230 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) !important;
+    bottom: calc(0 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) !important;
+    height: 350px !important;
+    width: 175px !important;
+  }
+}
 </style>

src/views/RelicList.vue

@@ -4,24 +4,12 @@
       class="return"
       @click="router.go(-1)"
     />
-    <!-- <menu>
-      <button class="scene-select">
-        大汗之城
-      </button>
-      <button class="camera-select">
-        雄伟帝都
-      </button>
-      <button class="all">
-        全部
-      </button>
-    </menu> -->
     <el-cascader
       v-model="cascaderValue"
       :options="cameraTree"
       :props="{
         expandTrigger: 'hover',
       }"
-      @change="handleCascaderChange"
     />
     <div class="search-ui">
       <input
@@ -32,7 +20,6 @@
       >
       <button
         class="search"
-        @click="onSearch"
       />
     </div>
     <div class="the-list">
@@ -151,13 +138,8 @@ const cameraTree = ref([
     ]
   },
 ])
-function handleCascaderChange(e) {
-  console.log(e)
-}
 
 const keyword = ref('')
-function onSearch() {
-}
 
 const sceneIdx = computed(() => {
   return route.query.sceneIdx
@@ -217,6 +199,13 @@ const { hasOperatedThisTime, updateWidth } = useSmoothSwipe({
   scrollTargetRef: listEl,
   viewportWidth: listWidth,
 })
+watch(relicData, (vNew) => {
+  nextTick(() => {
+    updateWidth()
+  })
+}, {
+  deep: true
+})
 
 function onClickItem(idx) {
   if (!hasOperatedThisTime.value) {