|
@@ -1,228 +1,26 @@
|
|
|
-<!--<template>
|
|
|
|
|
|
|
+<template>
|
|
|
<div class="statistics">
|
|
<div class="statistics">
|
|
|
- <ul class="list-inline" :style="{top: widthTop + 'rem'}" :class="{no_tran: widthTop == 2.4}">
|
|
|
|
|
- <li v-for="(item, index) in itemData" :style="index % 2 == 0 ? 'text-align: right;padding-right: .3rem;' : 'text-align: left;padding-left: .3rem;'">
|
|
|
|
|
- <span class="number" v-if="item.type === 2">
|
|
|
|
|
- <img :src="`/images/mobile/@2x/home/count${index + 1}.jpg`" alt="">
|
|
|
|
|
- <span v-html="formatDouble(item.count)" style="vertical-align: middle"></span>
|
|
|
|
|
- <span class="unit">条</span>
|
|
|
|
|
- </span>
|
|
|
|
|
- <span class="number" v-else>
|
|
|
|
|
- <img :src="`/images/mobile/@2x/home/count${index + 1}.jpg`" alt="">
|
|
|
|
|
- <span v-html="formatNumber(item.count, index)" style="vertical-align: middle"></span>
|
|
|
|
|
|
|
+ <ul class="list-inline pull-left" ref="pingdanListWrapper" :style="'top: -' + 1 * timerIndexL + 'rem'" :class="{'topL': isTopL}">
|
|
|
|
|
+ <li v-for="(item, index) in itemLeft">
|
|
|
|
|
+ <span class="number">
|
|
|
|
|
+ <span class="name" v-html="nameLeft[index]"></span>
|
|
|
|
|
+ <span class="num" v-html="formatNumber(item.count, item.type)"></span>
|
|
|
<span class="unit" v-if="item.type === 3">家</span>
|
|
<span class="unit" v-if="item.type === 3">家</span>
|
|
|
</span>
|
|
</span>
|
|
|
</li>
|
|
</li>
|
|
|
</ul>
|
|
</ul>
|
|
|
- <ul class="list-inline" :style="{top: widthTop + 'rem'}" :class="{no_tran: widthTop == 2.4}">
|
|
|
|
|
- <li v-for="(item, index) in itemData" :style="index % 2 == 0 ? 'text-align: right;padding-right: .3rem;' : 'text-align: left;padding-left: .3rem;'">
|
|
|
|
|
|
|
+ <ul class="list-inline pull-right" ref="pingdanListWrapperR" :style="'top: -' + 1 * timerIndexR + 'rem'" :class="{'topR': isTopR}">
|
|
|
|
|
+ <li v-for="(item, index) in itemRight">
|
|
|
<span class="number" v-if="item.type === 2">
|
|
<span class="number" v-if="item.type === 2">
|
|
|
- <img :src="`/images/mobile/@2x/home/count${index + 1}.jpg`" alt="">
|
|
|
|
|
- <span v-html="formatDouble(item.count)" style="vertical-align: middle"></span>
|
|
|
|
|
|
|
+ <span class="name" v-html="nameRight[index]"></span>
|
|
|
|
|
+ <span class="month" v-if="item.id === '上月询价单'">(上月)</span>
|
|
|
|
|
+ <span class="month" v-if="item.id === '本月询价单'">(本月)</span>
|
|
|
|
|
+ <span class="num" v-html="formatDouble(item.count)"></span>
|
|
|
<span class="unit">条</span>
|
|
<span class="unit">条</span>
|
|
|
</span>
|
|
</span>
|
|
|
<span class="number" v-else>
|
|
<span class="number" v-else>
|
|
|
- <img :src="`/images/mobile/@2x/home/count${index + 1}.jpg`" alt="">
|
|
|
|
|
- <span v-html="formatNumber(item.count, index)" style="vertical-align: middle"></span>
|
|
|
|
|
- <span class="unit" v-if="item.type === 3">家</span>
|
|
|
|
|
- </span>
|
|
|
|
|
- </li>
|
|
|
|
|
- </ul>
|
|
|
|
|
- </div>
|
|
|
|
|
-</template>
|
|
|
|
|
-<script>
|
|
|
|
|
- export default {
|
|
|
|
|
- name: 'StatisticsView',
|
|
|
|
|
- data () {
|
|
|
|
|
- return {
|
|
|
|
|
- step: 1,
|
|
|
|
|
- widthTop: 0,
|
|
|
|
|
- timerIndex: 0,
|
|
|
|
|
- timer: {}, // 定时器实体
|
|
|
|
|
- imgbox: {
|
|
|
|
|
- 'src': ''
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- mounted () {
|
|
|
|
|
- this.$nextTick(() => {
|
|
|
|
|
- this.changeInterval()
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- methods: {
|
|
|
|
|
- changeInterval () {
|
|
|
|
|
- setInterval(() => {
|
|
|
|
|
- this.widthTop += -0.6
|
|
|
|
|
- if (this.widthTop === -2.4) {
|
|
|
|
|
- this.widthTop = 0
|
|
|
|
|
- }
|
|
|
|
|
- }, 3000)
|
|
|
|
|
- },
|
|
|
|
|
- formatNumber (num, type) {
|
|
|
|
|
- if (num.toString().indexOf('E') !== -1) {
|
|
|
|
|
- let arr = num.toString().split('E')
|
|
|
|
|
- num = arr[0] * Math.pow(10, arr[1])
|
|
|
|
|
- }
|
|
|
|
|
- if (num > 99999999) {
|
|
|
|
|
- let str2 = num.toString()
|
|
|
|
|
- num = Math.floor(num / 100000000)
|
|
|
|
|
- if (parseInt(str2.charAt(str2.length - 8)) > 8) {
|
|
|
|
|
- num = num + 1
|
|
|
|
|
- }
|
|
|
|
|
- num = num + '<span style="color: #333">亿</span>'
|
|
|
|
|
- } else if (num > 9999) {
|
|
|
|
|
- let str = num.toString()
|
|
|
|
|
- num = Math.floor(num / 10000)
|
|
|
|
|
- if (parseInt(str.charAt(str.length - 4)) > 4) {
|
|
|
|
|
- num = num + 1
|
|
|
|
|
- }
|
|
|
|
|
- num += '<span style="color: #333">万</span>'
|
|
|
|
|
- } else {
|
|
|
|
|
- if (type === 6 || type === 7) {
|
|
|
|
|
- num += '<span style="color: #333">元</span>'
|
|
|
|
|
- } else if (type === 0 || type === 1 || type === 2) {
|
|
|
|
|
- num += '<span style="color: #333">个</span>'
|
|
|
|
|
- } else {
|
|
|
|
|
- num += ''
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- return num
|
|
|
|
|
- },
|
|
|
|
|
- formatDouble (num) {
|
|
|
|
|
- if (num.toString().indexOf('E') !== -1) {
|
|
|
|
|
- let arr = num.toString().split('E')
|
|
|
|
|
- num = arr[0] * Math.pow(10, arr[1])
|
|
|
|
|
- }
|
|
|
|
|
- if (num > 99999999) {
|
|
|
|
|
- num = (num / 100000000).toFixed(2).slice(num.length - 1, 4) + '<span style="color: #333">亿</span>'
|
|
|
|
|
- } else if (num > 9999) {
|
|
|
|
|
- num = (num / 10000).toFixed(2).slice(num.length - 1, 4) + '<span style="color: #333">万</span>'
|
|
|
|
|
- } else {
|
|
|
|
|
- num += ''
|
|
|
|
|
- }
|
|
|
|
|
- return num
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- computed: {
|
|
|
|
|
- allCount () {
|
|
|
|
|
- return this.$store.state.count.allCount.data
|
|
|
|
|
- },
|
|
|
|
|
- inquirySheet () {
|
|
|
|
|
- let sheetNum = this.$store.state.count.inquirySheet.data.count
|
|
|
|
|
- return this.formatDouble(sheetNum)
|
|
|
|
|
- },
|
|
|
|
|
- inquirySheetLast () {
|
|
|
|
|
- let lastSheetNum = this.$store.state.count.inquirySheetLast.data.count
|
|
|
|
|
- return this.formatDouble(lastSheetNum)
|
|
|
|
|
- },
|
|
|
|
|
- all () {
|
|
|
|
|
- let count = this.$store.state.supplier.merchant.merchantAll.data
|
|
|
|
|
- return count.content ? count.totalElements : '0'
|
|
|
|
|
- },
|
|
|
|
|
- counts () {
|
|
|
|
|
- return this.$store.state.product.common.counts
|
|
|
|
|
- },
|
|
|
|
|
- itemData () {
|
|
|
|
|
- let str = []
|
|
|
|
|
- if (this.counts.data) {
|
|
|
|
|
- this.counts.data.forEach((value, key, $data) => {
|
|
|
|
|
- str.push({id: $data[key].item, count: $data[key].count, type: 1})
|
|
|
|
|
- })
|
|
|
|
|
- }
|
|
|
|
|
- str.push({id: '供应商', count: this.all ? this.all : 0, type: 3})
|
|
|
|
|
- str.push({id: '本月询价单', count: this.$store.state.count.inquirySheet.data ? this.$store.state.count.inquirySheet.data.count : 0, type: 2})
|
|
|
|
|
- str.push({id: '上月询价单', count: this.$store.state.count.inquirySheetLast.data ? this.$store.state.count.inquirySheetLast.data.count : 0, type: 2})
|
|
|
|
|
- if (this.allCount) {
|
|
|
|
|
- this.allCount.forEach((value, key, $data) => {
|
|
|
|
|
- str.push({id: $data[key].item, count: $data[key].count, type: 1})
|
|
|
|
|
- })
|
|
|
|
|
- }
|
|
|
|
|
- str = [str[1], str[2], str[0], ...str.slice(3, 6), str[7], str[6]]
|
|
|
|
|
- return str
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-</script>
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
|
|
- .statistics{
|
|
|
|
|
- position:relative;
|
|
|
|
|
- /* height: 0.6rem;*/
|
|
|
|
|
- height: 8rem;
|
|
|
|
|
- border-radius:.3rem;
|
|
|
|
|
- background: #fff;
|
|
|
|
|
- margin:0 .05rem .2rem;
|
|
|
|
|
- /*overflow: hidden;*/
|
|
|
|
|
- background: url('/images/mobile/@2x/home/countbg.png') no-repeat center;
|
|
|
|
|
- ul{
|
|
|
|
|
- float: left;
|
|
|
|
|
- width:50%;
|
|
|
|
|
- position:absolute;
|
|
|
|
|
- transition: .5s all linear;
|
|
|
|
|
- border: 1px solid red;
|
|
|
|
|
- &:no_tran{
|
|
|
|
|
- transition:none;
|
|
|
|
|
- }
|
|
|
|
|
- li{
|
|
|
|
|
- width:100%;
|
|
|
|
|
- height:.6rem;
|
|
|
|
|
- line-height: .6rem;
|
|
|
|
|
- font-size: .28rem;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- vertical-align:top;
|
|
|
|
|
- &:nth-child(even){
|
|
|
|
|
- &::before{
|
|
|
|
|
- content: '';
|
|
|
|
|
- display: inline-block;
|
|
|
|
|
- width: 0.02rem;
|
|
|
|
|
- height: 0.3rem;
|
|
|
|
|
- background-color: #9c9c9c;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- top: .1rem;
|
|
|
|
|
- left: -.3rem;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- span{
|
|
|
|
|
- img {
|
|
|
|
|
- height: .3rem;
|
|
|
|
|
- }
|
|
|
|
|
- &.number{
|
|
|
|
|
- display: inline-block;
|
|
|
|
|
- color:red;
|
|
|
|
|
- font-size: 0.32rem;
|
|
|
|
|
- height: .6rem;
|
|
|
|
|
- vertical-align:middle;
|
|
|
|
|
- line-height:.6rem;
|
|
|
|
|
- .unit{
|
|
|
|
|
- color: #333;
|
|
|
|
|
- vertical-align: middle;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-</style>-->
|
|
|
|
|
-<template>
|
|
|
|
|
- <div class="statistics">
|
|
|
|
|
- <ul class="list-inline pull-left" ref="pingdanListWrapper" :style="{top: topLeft + 'rem'}" :class="{no_tran: topLeft == 2.4}">
|
|
|
|
|
- <li v-for="(item, index) in itemData" v-if="index <= 4">
|
|
|
|
|
- <span class="number">
|
|
|
|
|
- <span class="name" v-html="count[index]"></span>
|
|
|
|
|
- <span class="num" v-html="formatNumber(item.count, index)"></span>
|
|
|
|
|
- <span class="unit" v-if="item.type === 3">家</span>
|
|
|
|
|
- </span>
|
|
|
|
|
- </li>
|
|
|
|
|
- </ul>
|
|
|
|
|
- <ul class="list-inline pull-right" ref="pingdanListWrapper" :style="{top: topRight + 'rem'}" :class="{no_tran: topRight == 2.4}">
|
|
|
|
|
- <li v-for="(item, index) in itemData" v-if="index > 4">
|
|
|
|
|
- <span class="number">
|
|
|
|
|
- <span class="name" v-html="count[index]"></span>
|
|
|
|
|
- <span class="month" v-if="index === 5">(上月)</span>
|
|
|
|
|
- <span class="month" v-if="index === 6">(本月)</span>
|
|
|
|
|
- <span class="num" v-html="formatDouble(item.count)"></span>
|
|
|
|
|
- <span class="unit" v-if="item.type === 2">条</span>
|
|
|
|
|
|
|
+ <span class="name" v-html="nameRight[index]"></span>
|
|
|
|
|
+ <span class="num" v-html="formatNumber(item.count, item.type)"></span>
|
|
|
</span>
|
|
</span>
|
|
|
</li>
|
|
</li>
|
|
|
</ul>
|
|
</ul>
|
|
@@ -235,11 +33,18 @@
|
|
|
data () {
|
|
data () {
|
|
|
return {
|
|
return {
|
|
|
step: 1,
|
|
step: 1,
|
|
|
- count: ['现货', '品牌', '规格书', '供应商', '店铺', '询价求购', '询价求购', '上年交易', '本年交易'],
|
|
|
|
|
|
|
+ nameLeft: ['现货', '品牌', '规格书', '供应商', '店铺'],
|
|
|
|
|
+ nameRight: ['询价求购', '询价求购', '上年交易', '本年交易'],
|
|
|
topLeft: 0,
|
|
topLeft: 0,
|
|
|
topRight: 0,
|
|
topRight: 0,
|
|
|
- timerIndex: 0,
|
|
|
|
|
- timer: {}, // 定时器实体
|
|
|
|
|
|
|
+// timer: {},
|
|
|
|
|
+// timerIndex: 0,
|
|
|
|
|
+ timerIndexL: 0,
|
|
|
|
|
+ timerIndexR: 0,
|
|
|
|
|
+ isTopL: false,
|
|
|
|
|
+ isTopR: false,
|
|
|
|
|
+ timerL: {},
|
|
|
|
|
+ timerR: {}, // 定时器实体
|
|
|
imgbox: {
|
|
imgbox: {
|
|
|
'src': ''
|
|
'src': ''
|
|
|
}
|
|
}
|
|
@@ -247,78 +52,57 @@
|
|
|
},
|
|
},
|
|
|
mounted () {
|
|
mounted () {
|
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
|
- this.changeIntervalL()
|
|
|
|
|
- this.changeIntervalR()
|
|
|
|
|
|
|
+ this.changeIntervalL(true)
|
|
|
|
|
+ this.changeIntervalR(true)
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
-// changeIntervalL () {
|
|
|
|
|
-// setInterval(() => {
|
|
|
|
|
-// this.topLeft += -1
|
|
|
|
|
-// let arr1 = this.itemData.slice(0, 5)
|
|
|
|
|
-// let arr2 = arr1.shift()
|
|
|
|
|
-// arr1.push(arr2)
|
|
|
|
|
-// if (this.topLeft === -5) {
|
|
|
|
|
-// this.topLeft = 0
|
|
|
|
|
-// }
|
|
|
|
|
-// }, 2400)
|
|
|
|
|
-// },
|
|
|
|
|
-// changeIntervalR () {
|
|
|
|
|
-// setInterval(() => {
|
|
|
|
|
-// this.topRight += -1
|
|
|
|
|
-// let arr1 = this.itemData.slice(5, 9)
|
|
|
|
|
-// let arr2 = arr1.shift()
|
|
|
|
|
-// arr1.push(arr2)
|
|
|
|
|
-// this.itemDataTemp.push(this.itemData)
|
|
|
|
|
-// if (this.topRight === -4) {
|
|
|
|
|
-// this.topRight = 0
|
|
|
|
|
-// }
|
|
|
|
|
-// }, 3000)
|
|
|
|
|
-// },
|
|
|
|
|
changeIntervalL: function (flag) {
|
|
changeIntervalL: function (flag) {
|
|
|
if (flag) {
|
|
if (flag) {
|
|
|
- this.timer = setInterval(() => {
|
|
|
|
|
- this.isTop = false
|
|
|
|
|
|
|
+ this.timerL = setInterval(() => {
|
|
|
|
|
+ this.isTopL = false
|
|
|
let isChange = true
|
|
let isChange = true
|
|
|
- this.timerIndex++
|
|
|
|
|
|
|
+ this.timerIndexL++
|
|
|
let _transitionEvent = whichTransitionEvent()
|
|
let _transitionEvent = whichTransitionEvent()
|
|
|
- _transitionEvent && this.$refs.pingdanListWrapper[0].addEventListener(
|
|
|
|
|
|
|
+ _transitionEvent && this.$refs.pingdanListWrapper.addEventListener(
|
|
|
_transitionEvent, () => {
|
|
_transitionEvent, () => {
|
|
|
- console.log(isChange)
|
|
|
|
|
if (isChange) {
|
|
if (isChange) {
|
|
|
- let title = this.itemData.slice(0, 5).shift()
|
|
|
|
|
- this.title.push(title)
|
|
|
|
|
- this.timerIndex = 0
|
|
|
|
|
|
|
+ let title = this.itemLeft.shift()
|
|
|
|
|
+ let name = this.nameLeft.shift()
|
|
|
|
|
+ this.itemLeft.push(title)
|
|
|
|
|
+ this.nameLeft.push(name)
|
|
|
|
|
+ this.timerIndexL = 0
|
|
|
isChange = false
|
|
isChange = false
|
|
|
- this.isTop = true
|
|
|
|
|
|
|
+ this.isTopL = true
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
}, 2400)
|
|
}, 2400)
|
|
|
} else {
|
|
} else {
|
|
|
- clearInterval(this.timer)
|
|
|
|
|
|
|
+ clearInterval(this.timerL)
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
changeIntervalR: function (flag) {
|
|
changeIntervalR: function (flag) {
|
|
|
if (flag) {
|
|
if (flag) {
|
|
|
- this.timer = setInterval(() => {
|
|
|
|
|
- this.isTop = false
|
|
|
|
|
|
|
+ this.timerR = setInterval(() => {
|
|
|
|
|
+ this.isTopR = false
|
|
|
let isChange = true
|
|
let isChange = true
|
|
|
- this.timerIndex++
|
|
|
|
|
|
|
+ this.timerIndexR++
|
|
|
let _transitionEvent = whichTransitionEvent()
|
|
let _transitionEvent = whichTransitionEvent()
|
|
|
- _transitionEvent && this.$refs.pingdanListWrapper[0].addEventListener(
|
|
|
|
|
|
|
+ _transitionEvent && this.$refs.pingdanListWrapperR.addEventListener(
|
|
|
_transitionEvent, () => {
|
|
_transitionEvent, () => {
|
|
|
- console.log(isChange)
|
|
|
|
|
if (isChange) {
|
|
if (isChange) {
|
|
|
- let title = this.itemData.slice(5, 9).shift()
|
|
|
|
|
- this.title.push(title)
|
|
|
|
|
- this.timerIndex = 0
|
|
|
|
|
|
|
+ let title = this.itemRight.shift()
|
|
|
|
|
+ let name = this.nameRight.shift()
|
|
|
|
|
+ this.itemRight.push(title)
|
|
|
|
|
+ this.nameRight.push(name)
|
|
|
|
|
+ this.timerIndexR = 0
|
|
|
isChange = false
|
|
isChange = false
|
|
|
- this.isTop = true
|
|
|
|
|
|
|
+ this.isTopR = true
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
}, 3000)
|
|
}, 3000)
|
|
|
} else {
|
|
} else {
|
|
|
- clearInterval(this.timer)
|
|
|
|
|
|
|
+ clearInterval(this.timerR)
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
formatNumber (num, type) {
|
|
formatNumber (num, type) {
|
|
@@ -341,9 +125,9 @@
|
|
|
}
|
|
}
|
|
|
num += '万'
|
|
num += '万'
|
|
|
} else {
|
|
} else {
|
|
|
- if (type >= 7) {
|
|
|
|
|
|
|
+ if (type === 4) {
|
|
|
num += '元'
|
|
num += '元'
|
|
|
- } else if (type <= 2) {
|
|
|
|
|
|
|
+ } else if (type === 1) {
|
|
|
num += '个'
|
|
num += '个'
|
|
|
} else {
|
|
} else {
|
|
|
num += ''
|
|
num += ''
|
|
@@ -402,12 +186,18 @@
|
|
|
str.push({id: '上月询价单', count: this.$store.state.count.inquirySheetLast.data ? this.$store.state.count.inquirySheetLast.data.count : 0, type: 2})
|
|
str.push({id: '上月询价单', count: this.$store.state.count.inquirySheetLast.data ? this.$store.state.count.inquirySheetLast.data.count : 0, type: 2})
|
|
|
if (this.allCount) {
|
|
if (this.allCount) {
|
|
|
this.allCount.forEach((value, key, $data) => {
|
|
this.allCount.forEach((value, key, $data) => {
|
|
|
- str.push({id: $data[key].item, count: $data[key].count, type: 1})
|
|
|
|
|
|
|
+ str.push({id: $data[key].item, count: $data[key].count, type: 4})
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
str.push({id: '店铺', count: this.list ? this.list : 0, type: 3})
|
|
str.push({id: '店铺', count: this.list ? this.list : 0, type: 3})
|
|
|
str = [str[1], str[0], str[2], str[3], str[8], str[5], str[4], str[6], str[7]]
|
|
str = [str[1], str[0], str[2], str[3], str[8], str[5], str[4], str[6], str[7]]
|
|
|
return str
|
|
return str
|
|
|
|
|
+ },
|
|
|
|
|
+ itemLeft () {
|
|
|
|
|
+ return this.itemData.slice(0, 5)
|
|
|
|
|
+ },
|
|
|
|
|
+ itemRight () {
|
|
|
|
|
+ return this.itemData.slice(5, 9)
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -426,6 +216,18 @@
|
|
|
width:50%;
|
|
width:50%;
|
|
|
position:relative;
|
|
position:relative;
|
|
|
transition: .5s all linear;
|
|
transition: .5s all linear;
|
|
|
|
|
+ &.topL {
|
|
|
|
|
+ transition: top 0s;
|
|
|
|
|
+ -moz-transition: top 0s; /* Firefox 4 */
|
|
|
|
|
+ -webkit-transition: top 0s; /* Safari and Chrome */
|
|
|
|
|
+ -o-transition: top 0s; /* Opera */
|
|
|
|
|
+ }
|
|
|
|
|
+ &.topR {
|
|
|
|
|
+ transition: top 0s;
|
|
|
|
|
+ -moz-transition: top 0s; /* Firefox 4 */
|
|
|
|
|
+ -webkit-transition: top 0s; /* Safari and Chrome */
|
|
|
|
|
+ -o-transition: top 0s; /* Opera */
|
|
|
|
|
+ }
|
|
|
&:first-child{
|
|
&:first-child{
|
|
|
margin-left: .0rem;
|
|
margin-left: .0rem;
|
|
|
}
|
|
}
|