@@ -869,25 +869,47 @@
.tipBoxPop {
position: fixed;
+ left: 0;
+ top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
overflow: hidden;
z-index: 999;
.tipBox {
+ position: relative;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -55%);
background: url('./images/tip-box-icon.png') no-repeat center;
background-size: contain;
height: 310px;
- width: auto;
- padding-top: 124px;
+ width: 260px;
+ padding: 124px 22px 0;
.tipTitle {
- width: 74px;
- height: 21px;
+ width: 75px;
+ display: block;
+ margin: 0 auto 10px;
}
.tipBtn {
img {
width: 190px;
height: 62px;
+ margin: 8px auto 0;
+ }
+ span {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ padding: 12px;
+ font-size: 18px;
+ color: #fff;
+ font-weight: 500;
.tipItem {
@@ -898,6 +920,15 @@
height: 14px;
margin-right: 5px;
+ p {
+ font-size: 13px;
+ color: #777777;
+ line-height: 26px;
+ color: #0C8BFE;
@@ -2176,17 +2176,18 @@ export default defineComponent({
<img src={tipIcon1} />
<p>开课时赠送<span>全新乐器一支</span></p>
</li>
- <li>
- <img src={tipIcon1} />
+ <li class={styles.tipItem}>
+ <img src={tipIcon2} />
<p>买一赠二,即<span>团购一年,使用三年</span></p>
+ <img src={tipIcon3} />
<p><span>7天内无理由</span>全额退款保障</p>
</ul>
<div class={styles.tipBtn}>
<img src={tipBtnIcon} />
+ <span>我知道了(3s)</span>
</div>