aamin 1 рік тому
батько
коміт
856f56fdd5

BIN
src/assets/images/bamboo-hot-bg.png


BIN
src/assets/images/btn_active.png


BIN
src/assets/images/cancel-bg.png


BIN
src/assets/images/line-scene.png


BIN
src/assets/images/reset-bg.png


BIN
src/assets/images/reset-icon.png


BIN
src/assets/images/screen-box2.png


+ 0 - 6
src/views/BambooBookScene1.vue

@@ -48,12 +48,6 @@ const innerHeight = ref(window.innerHeight + 'px')
       <div class="zhupu-box">
         竹谱
       </div>
-      <!-- <img
-        v-if="isShowOperationH"
-        class="operation-h"
-        src="@/assets/images/icon_operation_h_white.png"
-        alt=""
-      > -->
       <OperationTip
         class="operation-h"
         text=""

+ 5 - 5
src/views/BambooBookScene2.vue

@@ -85,10 +85,10 @@ const {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    // background-image: url(@/assets/images/screen-box2.png);
-    // background-size: 100% 100%;
-    background: linear-gradient(180deg, #233E16 -100%, rgba(156, 171, 148, 0.5) 100%);
-    backdrop-filter: blur(15px);
+    background-image: url(@/assets/images/screen-box2.png);
+    background-size: 100% 100%;
+    // background: linear-gradient(180deg, #233E16 -100%, rgba(156, 171, 148, 0.5) 100%);
+    // backdrop-filter: blur(15px);
     // padding-top: calc(71 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
 
     .title-disc {
@@ -128,7 +128,7 @@ const {
         // padding: calc(8 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
         background-size: 100% 100%;
         transform: scale(1.2);
-        color: #7B916B;
+        color: #ffffff;
         display: flex;
         justify-content: center;
         align-items: center;

+ 1 - 0
src/views/BambooBookScene3.vue

@@ -86,6 +86,7 @@ const stepList = [
     width: 100%;
     height: 100%;
     background: url(@/assets/images/screen-box3.png);
+    background-size:cover ;
 
     .step-list{
       width: 100%;

+ 10 - 15
src/views/BambooHotView.vue

@@ -85,6 +85,7 @@ const currentIndex = ref(-1)
 const scrollableElement = ref(null)
 
 
+
 // 进度条位置监听
 const scrollFn = () => {
   // 获取当前文档流的 scrollLeft
@@ -92,30 +93,20 @@ const scrollFn = () => {
   // const scrollPosition =  || document.body.scrollLeft
   let element = document.getElementById('bamboo-hot')
   let elementScrollLeft = element.scrollLeft
-  // console.log('多少', elementScrollLeft, element)
-
-  console.log('滚动', elementScrollLeft, '12中竹林长度', document.getElementById('bamboo-hot').getBoundingClientRect().width)
-
-  // const items = document.getElementsByClassName('bamboo-hot-item')
 
-  // calc(3900 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
 
-  // const 253 / 12的width = x / 当前长度
 
   const zhulinClientWidth = document.getElementById('bamboo-hot').getBoundingClientRect().width
 
   const zhulinAllWidth = 3900 / windowSizeWhenDesignForRef.value * windowSizeInCssForRef.value.slice(0, -2)
-  const items = document.getElementsByClassName('bamboo-hot-item')
 
+  // const items = document.getElementsByClassName('bamboo-hot-item')
 
-  // setTimeout(() =>{
-  //   const items = document.getElementsByClassName('bamboo-hot-item')
-  //   items.forEach((element, index) => {
-  //     console.log(index, element.left)
-  //   }, 50)
-  // })
+  // calc(3900 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
 
+  // const 253 / 12的width = x / 当前长度
 
+  const items = document.getElementsByClassName('bamboo-hot-item')
 
 
 
@@ -159,7 +150,11 @@ onMounted(() => {
 
   setTimeout(() => {
     if (scrollableElement.value) {
-      scrollableElement.value.scrollLeft = (383 / 390) * document.getElementById('bamboo-hot').getBoundingClientRect().width
+      const zhulinClientWidth = document.getElementById('bamboo-hot').getBoundingClientRect().width
+      const zhulinAllWidth = 3900 / windowSizeWhenDesignForRef.value * windowSizeInCssForRef.value.slice(0, -2)
+      const items = document.getElementsByClassName('bamboo-hot-item')
+      // scrollableElement.value.scrollLeft = (383 / 390) * document.getElementById('bamboo-hot').getBoundingClientRect().width
+      scrollableElement.value.scrollLeft = items[0].style.left.slice(0, 2) / 100 * zhulinAllWidth - zhulinClientWidth + items[0].getBoundingClientRect().width + 60
       console.log(scrollableElement.value.scrollLeft)
     }
   }, 50)