feature/task315-0526-ch
ch 2 years ago
parent 4d1a40b5d0
commit 7bb20db2d8

Binary file not shown.

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 179 KiB

@ -2,7 +2,7 @@
* @Author: ch
* @Date: 2022-05-04 17:56:39
* @LastEditors: ch
* @LastEditTime: 2022-05-27 16:40:50
* @LastEditTime: 2022-05-31 16:52:40
* @Description: file content
-->
<template>
@ -12,7 +12,7 @@
<div class="layout-content">
<Nuxt />
</div>
<!-- <Footer /> -->
<Footer />
</div>
</template>
<script>

@ -84,37 +84,11 @@
<img v-show="!orderHover" src="~/assets/img/layout/icon-order.png" />
<span>我的订单</span>
</div>
<div class="header-wrap-content--line"></div>
<!-- 下载app -->
<el-popover
popper-class="header-info-bar__popover"
placement="bottom"
width="230"
trigger="hover"
@show="phoneHover = true"
@hide="phoneHover = false"
>
<div
slot="reference"
class="header-wrap-content__common flex flex-middle"
>
<img
v-show="phoneHover"
src="~/assets/img/layout/icon-phone-light.png"
/>
<img
v-show="!phoneHover"
src="~/assets/img/layout/icon-phone.png"
/>
<span :class="{ 'wrap-content-common--light': phoneHover }"
>下载app</span
>
</div>
<div class="info-bar-popover__qrcode">
<img src="~/assets/img/common/app-qrcode.png" />
<span>扫一扫上方二维码 下载APP</span>
</div>
</el-popover>
<div class="header-wrap-content__common flex flex-middle down"
@click="$router.push('/down')">
<img src="~/assets/img/layout/icon-phone.png"/>
<span>下载app</span>
</div>
</div>
</div>
</div>
@ -133,7 +107,6 @@ export default {
return {
menuVisible: false,
orderHover: false,
phoneHover: false,
messageHover: false,
menuList: [
{
@ -317,6 +290,13 @@ export default {
margin-right: 4px;
}
}
.down{
background:#474747;
padding: 0 10px;
height: 26px;
display: flex;
align-items: center;
}
}
}
}

@ -2,7 +2,7 @@
* @Author: ch
* @Date: 2022-05-26 16:08:17
* @LastEditors: ch
* @LastEditTime: 2022-05-31 16:08:41
* @LastEditTime: 2022-05-31 16:40:50
* @Description: file content
-->
<template>
@ -12,30 +12,30 @@
<ul class="group">
<li class="group--item">
<div class="qrcode">
<img class="qrcode--icon" src="@/assets/img/down/android.png"/>
<img class="qrcode--img" src="@/assets/img/down/app-qrcode.png"/>
<img class="qrcode--icon" src="@/assets/img/down/android.png"/>
</div>
<span class="group--item-title">Android</span>
</li>
<li class="group--item">
<div class="qrcode qrcode__disabled">
<img class="qrcode--icon" src="@/assets/img/down/android.png"/>
<img class="qrcode--img" src="@/assets/img/down/app-qrcode.png"/>
<img class="qrcode--icon" src="@/assets/img/down/android.png"/>
</div>
<span class="group--item-title">iOS</span>
<span class="group--item-btn">规划中...</span>
</li>
<li class="group--item">
<div class="qrcode">
<img class="qrcode--icon" src="@/assets/img/down/android.png"/>
<img class="qrcode--img" src="@/assets/img/down/wx-qrcode.jpg"/>
<img class="qrcode--icon" src="@/assets/img/down/android.png"/>
</div>
<span class="group--item-title">微信公众号</span>
</li>
<li class="group--item">
<div class="qrcode">
<img class="qrcode--icon" src="@/assets/img/down/android.png"/>
<img class="qrcode--img" src="@/assets/img/down/h5-qrcode.png"/>
<img class="qrcode--icon" src="@/assets/img/down/android.png"/>
</div>
<span class="group--item-title">H5</span>
</li>
@ -108,7 +108,9 @@
}
}
}
// .qrcode--img:hover + .qrcode--icon{
// opacity: 0;
// }
.qrcode{
width: 180px;
height: 180px;
@ -124,6 +126,8 @@
height: 96px;
left: 62px;
top: 42px;
transition: opacity .8s;
opacity: 1;
}
&--img{
position: absolute;
@ -134,12 +138,18 @@
opacity: 0;
&:hover{
opacity: 1;
+ .qrcode--icon{
opacity: 0;
}
}
}
&__disabled{
cursor: no-drop;
.qrcode--img:hover{
opacity: 0;
+ .qrcode--icon{
opacity: 1;
}
}
}
}

@ -2,13 +2,12 @@
<div
v-if="tabBarVisible"
class="home-tabbar-fixed flex"
:class="{ 'home-tabbar-fixed--change': appHover }"
:style="tabBarStyle"
>
<div v-show="appHover" class="home-tabbar-fixed__qrcode">
<!-- <div v-show="appHover" class="home-tabbar-fixed__qrcode">
<img src="~/assets/img/common/app-qrcode.png" />
<p>扫一扫上方二维码 下载APP</p>
</div>
</div> -->
<div
class="home-tabbar-fixed__box flex flex-column flex-middle"
:class="{ 'home-tabbar-fixed__box--height-short': !showToTop }"
@ -16,6 +15,7 @@
<div
@mouseenter="appHover = true"
@mouseleave="appHover = false"
@click="$router.push('/down')"
class="tabbar-fixed-box__common flex flex-middle"
>
<span v-show="appHover">app</span>

Loading…
Cancel
Save