提交

src/view/allMedia/H5Mall.vue

@@ -92,12 +92,13 @@ getH5Mall({}).then(r => {
 .main .item {
     display: inline-block;
     width: 184px;
-    height: 343px;
+    height: 363px;
     transition: all .3s;
     border-radius: 2px;
     vertical-align: middle;
     margin-right: 1em;
     border-radius: 5px;
+    overflow: hidden;
 }
 
 .main_item{

src/view/allMedia/components/H5.vue

@@ -1,20 +1,14 @@
 <template>
-  <div class="H5" @mousemove="move">
-    <el-image
-      class="outImage"
-      :src="hoversList[0].url"
-      :fit="hoversList[0].background_mode || 'fill'"
-    />
-    <div class="listImage inShow">
+  <div class="H5" @mousemove="move" @mouseleave="mouseleave" ref="H5">
       <el-image
-        class="inImage"
-        :style="isShowFunc(index)"
+        :style="Math.floor(percentage*0.07) === index ? 'display: block' : 'display: none' "
         v-for="(item, index) in hoversList"
         :key="item.url"
         :src="item.url"
         :fit="item.background_mode || 'fill'"
       />
-      <el-progress class="inShow" :show-text="false" :percentage="percentage" />
+    <div class="listImage inShow">
+      <el-progress :duration="1000" :show-text="false" :percentage="percentage" />
     </div>
   </div>
 </template>
@@ -34,6 +28,7 @@ const props = defineProps({
 
 const hoversList = ref([]);
 const percentage = ref(0);
+const H5 = ref();
 let pc_item = undefined;
 
 hoversList.value = props.item.hoversList || [];
@@ -41,22 +36,24 @@ hoversList.value = props.item.hoversList || [];
 const move = e => {
   if (pc_item) return;
   pc_item = setTimeout(() => {
-    pc_item = clearTimeout(pc_item);
-    percentage.value = (e.offsetX / e.target.width) * 100;
+    let X = e ? e.offsetX : 0;
+    X > 184 ? X = 184 : '';
+    pc_item = window.clearTimeout(pc_item);
+    percentage.value = (X / 184) * 100;
   }, 20);
 };
 
-const isShowFunc = index => {
-  const low = (index / hoversList.value.length) * 100;
-  const hie = ((index + 1) / hoversList.value.length) * 100;
-  if (percentage.value >= low && percentage.value < hie) return 'display:block';
-  else return 'display:none';
-};
+const mouseleave = ()=> {
+    percentage.value = 0;
+    if(pc_item) pc_item = window.clearTimeout(pc_item)
+}
 
-console.log(hoversList.value);
 </script>
 
 <style scoped>
+.H5{
+    min-height: 300px;
+}
 .H5,
 .H5 * {
   width: 100%;
@@ -65,17 +62,10 @@ console.log(hoversList.value);
 .listImage {
   position: relative;
 }
-
-.inImage {
-  top: 0;
-  left: 0;
-  position: absolute;
-}
 </style>
 
 <style>
-.inShow,
-.item:hover .outImage {
+.item .inShow {
   display: none;
 }
 

src/view/allMedia/components/LONGPAGE.vue

@@ -1,9 +1,46 @@
 <template>
-    <div>3</div>
+  <div class="longpage" @mouseenter="mouseenter" @mouseleave="mouseleave">
+    <el-image
+      :style="'transform: translateY(' + tfT + 'px)'"
+      :src="hoversList[0].url"
+      :fit="hoversList[0].background_mode || 'fill'"
+    />
+  </div>
 </template>
 
-<script steup>
+<script setup>
+import { defineProps, ref } from 'vue';
+
+const props = defineProps({
+  item: {
+    type: Object, //参数类型
+    default: () => {
+      return {};
+    }, //默认值
+    required: true, //是否必须传递
+  },
+});
+const tfT = ref(0);
+
+let longpageTime = undefined;
+
+const hoversList = props.item.hoversList || [];
+const mouseenter = () => {
+  if (longpageTime) return;
+  longpageTime = setInterval(() => {
+    tfT.value -= 1;
+  }, 10);
+};
+const mouseleave = () => {
+  tfT.value = 0;
+  if (longpageTime) longpageTime = clearInterval(longpageTime);
+};
 </script>
 
 <style scoped>
+.longpage {
+  width: 184px;
+  height: 282px;
+  overflow: hidden;
+}
 </style>

src/view/allMedia/components/POSTER.vue

@@ -1,9 +1,27 @@
 <template>
-    <div>2</div>
+  <div>
+    <el-image
+      :src="hoversList[0].url"
+      :fit="hoversList[0].background_mode || 'fill'"
+    />
+  </div>
 </template>
 
-<script steup>
+<script setup>
+import { defineProps, ref } from 'vue';
+
+const props = defineProps({
+  item: {
+    type: Object, //参数类型
+    default: () => {
+      return {};
+    }, //默认值
+    required: true, //是否必须传递
+  },
+});
+const hoversList = ref([]);
+hoversList.value = props.item.hoversList || [];
+console.log(props.item);
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>