diff --git a/src/pages/home/Search.vue b/src/pages/home/Search.vue index be4bca5..578e590 100644 --- a/src/pages/home/Search.vue +++ b/src/pages/home/Search.vue @@ -4,7 +4,7 @@ @@ -44,9 +44,9 @@
音乐榜
品牌榜
- + -
+
@@ -77,7 +77,7 @@
-
+
{{ index + 1 }}
@@ -104,7 +104,7 @@
-
+
{{ index + 1 }}
@@ -126,7 +126,7 @@
-
+
import Search from "../../components/Search"; import _ from 'lodash' +import Dom from "../../utils/dom"; +import {nextTick} from "vue"; export default { name: "SearchPage", @@ -205,7 +207,6 @@ export default { }, data() { return { - isShowText: false, isExpand: false, history: [ '历史记录1', @@ -235,6 +236,7 @@ export default { {name: '当代女生社交现状', type: -1}, {name: '恒大集团凌晨发公告', type: -1}, ], + randomGuess: [], hotRankList: [ {name: '国内手机厂商最大的软肋就是 android 系统!', type: 0}, {name: '大家的官网订单现在什么状态', type: -1}, @@ -581,11 +583,9 @@ export default { }, selectBrandKey: '汽车', selectBrandKeyIndex: 0, - randomGuess: [], - slideIndex: 3, - list1: [], - list2: [], - timer: null + slideIndex: 0, + timer: null, + slideItemHeight: null } }, computed: { @@ -604,21 +604,33 @@ export default { brandListKeys() { return Object.keys(this.brandRankList) }, + slideListHeight() { + return {height: this.slideItemHeight ? (this.slideItemHeight + 'px') : '100%'} + } }, watch: { - slideIndex(newVal) { - if (newVal === 3) { - this.timer = setInterval(() => { - if (this.selectBrandKeyIndex === this.brandListKeys.length - 1) { - this.selectBrandKeyIndex = 0 - } else { - this.selectBrandKeyIndex++ - } - this.selectBrandKey = this.brandListKeys[this.selectBrandKeyIndex] - }, 3000) - } else { - clearInterval(this.timer) - } + slideIndex: { + handler(newVal) { + nextTick(() => { + // console.log(this.$refs[`slide${newVal}`]) + this.slideItemHeight = new Dom(`.slide${newVal}`).css('height') + // console.log(this.slideItemHeight) + this.slideItemHeight = parseFloat(this.slideItemHeight) + 50 + }) + if (newVal === 3) { + this.timer = setInterval(() => { + if (this.selectBrandKeyIndex === this.brandListKeys.length - 1) { + this.selectBrandKeyIndex = 0 + } else { + this.selectBrandKeyIndex++ + } + this.selectBrandKey = this.brandListKeys[this.selectBrandKeyIndex] + }, 3000) + } else { + clearInterval(this.timer) + } + }, + immediate: true } }, created() { @@ -793,7 +805,8 @@ export default { } } - .slide1 { + .slide0 { + box-sizing: border-box; margin: 0 @padding-page 5rem @padding-page; background: linear-gradient(to right, rgb(32, 29, 36), rgb(50, 29, 38)); padding: @padding-page; @@ -851,7 +864,8 @@ export default { } } - .slide2 { + .slide1 { + box-sizing: border-box; margin: 0 @padding-page 5rem @padding-page; background: rgb(20, 22, 34); border: 1px solid rgba(31, 34, 52, 0.5); @@ -963,7 +977,8 @@ export default { } } - .slide3 { + .slide2 { + box-sizing: border-box; margin: 0 @padding-page 5rem @padding-page; background: rgb(20, 22, 34); border: 1px solid rgba(31, 34, 52, 0.5); @@ -1049,7 +1064,8 @@ export default { } } - .slide4 { + .slide3 { + box-sizing: border-box; margin: 0 @padding-page 5rem @padding-page; border-radius: 1rem; diff --git a/src/utils/dom.js b/src/utils/dom.js index dfdcd72..8be4329 100644 --- a/src/utils/dom.js +++ b/src/utils/dom.js @@ -1,3 +1,5 @@ +import globalMethods from '../utils/global-methods' + export default class Dom { els = [] @@ -54,7 +56,9 @@ export default class Dom { if (args.length === 1) { //情况一:获取样式 if (typeof args[0] === 'string') { - return this.els[0].style[args[0]] + return window.getComputedStyle(this.els[0], null)[args[0]] + // return globalMethods.$getCss2 + // return this.els[0].style[args[0]] } else { //情况三:设置多个样式 Object.keys(args[0]).map(key => {