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 => {