|
|
|
@ -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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|