|
|
@@ -1,7 +1,16 @@
|
|
|
<template>
|
|
|
<div class="bottom-menu animation--hack-browser-bug--stack-too-high">
|
|
|
<ul class="b-ul">
|
|
|
- <li :class="['b-li',`${idx==currentTimeIdx?'active':''}`]" @click="emit('onClickTimeItem', idx)" v-for="(timeItem, idx) in list" :key="timeItem.id">
|
|
|
+ <li
|
|
|
+ :class="[
|
|
|
+ 'b-li',
|
|
|
+ `${idx == currentTimeIdx ? 'active' : ''}`,
|
|
|
+ `${$isMobile ? 'mobile' : 'pc'}`,
|
|
|
+ ]"
|
|
|
+ @click="emit('onClickTimeItem', idx)"
|
|
|
+ v-for="(timeItem, idx) in list"
|
|
|
+ :key="timeItem.id"
|
|
|
+ >
|
|
|
<div></div>
|
|
|
<p>{{ timeItem.info.textCn }}</p>
|
|
|
</li>
|
|
|
@@ -93,7 +102,14 @@ const rmenu = shallowReactive([{
|
|
|
flex: 1;
|
|
|
cursor: pointer;
|
|
|
transition: .2s ease transform;
|
|
|
-
|
|
|
+ &.active {
|
|
|
+ transform: scale(1.1);
|
|
|
+ --thiscolor: #783435;
|
|
|
+ }
|
|
|
+ &.pc:hover {
|
|
|
+ transform: scale(1.1);
|
|
|
+ --thiscolor: #783435;
|
|
|
+ }
|
|
|
>div {
|
|
|
width: 0.8rem;
|
|
|
height: 0.8rem;
|
|
|
@@ -123,10 +139,6 @@ const rmenu = shallowReactive([{
|
|
|
margin-top: 1rem;
|
|
|
}
|
|
|
|
|
|
- &:hover,&.active {
|
|
|
- transform: scale(1.1);
|
|
|
- --thiscolor: #783435;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
|
任一存