弃用--最后一次提交（已完成卡片合成动效+卡片翻转动效果）

4 months ago · e47708e726
11 changed files with 1816 additions and 8 deletions
--- a/src/assets/main.css
+++ b/src/assets/main.css
@ -1,6 +1,6 @@
 /* @import './base.css'; */
 html,
 body {
-  background: #bb2628;
+  background: #ffffff;
  position: relative;
 }
--- a/src/assets/static/css/atom.css
+++ b/src/assets/static/css/atom.css
@ -0,0 +1,80 @@
+/** * 原子类 */
+/*常用文字颜色*/
+.ui-txt-black {
+    color: black;
+}
+
+.ui-txt-gray {
+    color: gray;
+}
+
+.ui-txt-lightgray {
+    color: #a6a6a6;
+}
+
+.ui-txt-blue {
+    color: #0079ff;
+}
+
+/** * 1px border hack */
+.ui-border-top {
+    border-top: 1px solid #c8c7cc;
+}
+
+.ui-border-btm {
+    border-bottom: 1px solid #c8c7cc
+}
+
+.ui-border-tb {
+    border-top: #c8c7cc 1px solid;
+    border-bottom: #c8c7cc 1px solid;
+    background-image: none;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 2) {
+    .ui-border-top {
+        border-top: none;
+    }
+
+    .ui-border-btm {
+        border-bottom: none;
+    }
+
+    /*方法1*/
+    .ui-border-top {
+        background-position: left top;
+        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, #c8c7cc), to(#c8c7cc));
+    }
+
+    .ui-border-btm {
+        background-position: left bottom;
+        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, #c8c7cc), to(#c8c7cc));
+    }
+
+    .ui-border-top,
+    .ui-border-btm {
+        background-repeat: repeat-x;
+        background-size: 100% 1px;
+    }
+
+    .ui-border-tb {
+        background: -webkit-gradient(linear, left bottom, left top, color-stop(.50, transparent), color-stop(.50, #c8c7cc), to(#c8c7cc)) left top repeat-x, -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #c8c7cc), to(#c8c7cc)) left bottom repeat-x;
+        border-top: 0;
+        border-bottom: 0;
+    }
+
+    .ui-border-tb {
+        background-size: 100% 1px;
+        -wekit-background-size: 100% 1px;
+    }
+}
+
+/** * 垂直上下居中 */
+.ui-center {
+    width: 100%;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-box-pack: center;
+    -webkit-box-align: center;
+    text-align: center;
+}
--- a/src/assets/static/css/global.css
+++ b/src/assets/static/css/global.css
@ -0,0 +1,288 @@
+/*button*/
+body {
+    background: #FFF4D2;
+    background-size: 320px auto;
+}
+
+select {
+    -webkit-appearance: none;
+    -webkit-padding-end: 20px;
+    -webkit-padding-start: 6px;
+    background: url(https://d31zlh4on95l9h.cloudfront.net/images/5iujb001000d6m666suevij21ag8zigk.png) no-repeat #fff right 0px;
+    background-size: 34px auto;
+    border: #cfba8a 1px solid;
+    box-sizing: border-box;
+    width: 100%;
+    height: 33px;
+    outline: none;
+    font-size: 12px;
+    color: #9e702f;
+    padding: 0px 8px;
+}
+
+input[type="text"] {
+    -webkit-appearance: none;
+    border: #cfba8a 1px solid;
+    border: #cfba8a 1px solid;
+    box-sizing: border-box;
+    width: 100%;
+    height: 33px;
+    outline: none;
+    font-size: 12px;
+    color: #9e702f;
+    padding: 0px 8px;
+}
+
+.c-orange {
+    color: #ff5400;
+}
+
+.c-red {
+    color: #cd0000;
+}
+
+.c-gray {
+    color: rgba(134, 85, 0, .7);
+}
+
+.chest-btn {
+    width: 70%;
+    margin: 0 auto;
+    display: block;
+    color: #fff;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffa200), to(#ffa200));
+    height: 40px;
+    top: 53px;
+    border-radius: 3px;
+    font-size: 17px;
+    position: relative;
+}
+
+.chest-btn:active {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#f09902), to(#f09902));
+}
+
+.btn-weak {
+    background: #ff9600;
+}
+
+.btn-weak:active {
+    background: #ec8c03;
+}
+
+.wrapper .ui-border-top {
+    border-top: 1px solid #eccf88
+}
+
+.wrapper .ui-border-btm {
+    border-bottom: 1px solid #eccf88
+}
+
+.wrapper .ui-border-tb {
+    border-top: #eccf88 1px solid;
+    border-bottom: #eccf88 1px solid;
+    background-image: none
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:2) {
+    .wrapper .ui-border-top {
+        border-top: 0
+    }
+
+    .wrapper .ui-border-btm {
+        border-bottom: 0
+    }
+
+    .wrapper .ui-border-top {
+        background-position: left top;
+        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, #eccf88), to(#eccf88))
+    }
+
+    .wrapper .ui-border-btm {
+        background-position: left bottom;
+        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, #eccf88), to(#eccf88))
+    }
+
+    .wrapper .ui-border-top,
+    .wrapper .ui-border-btm {
+        background-repeat: repeat-x;
+        background-size: 100% 1px
+    }
+
+    .wrapper .ui-border-tb {
+        background: -webkit-gradient(linear, left bottom, left top, color-stop(.50, transparent), color-stop(.50, #eccf88), to(#eccf88)) left top repeat-x, -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #eccf88), to(#eccf88)) left bottom repeat-x;
+        border-top: 0;
+        border-bottom: 0
+    }
+
+    .wrapper .ui-border-tb {
+        background-size: 100% 1px;
+        -wekit-background-size: 100% 1px
+    }
+}
+
+.mod-chest-cont {
+    background: url(https://d31zlh4on95l9h.cloudfront.net/images/5iujav01000d6m67lg7791u218c8up7s.png) center top no-repeat, url(https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d6m67yhi0r381zor2jh5x.png) center bottom no-repeat;
+    background-size: 276px auto;
+    width: 276px;
+    margin: 27px auto 118px;
+    position: relative;
+}
+
+.mod-chest-cont:before {
+    width: 100%;
+    position: absolute;
+    top: 12px;
+    bottom: 80px;
+    left: 0px;
+    content: "";
+    background: #fff;
+    border-left: #e59c00 1px solid;
+    border-right: #e59c00 1px solid;
+    box-sizing: border-box;
+}
+
+.mod-chest-cont .content {
+    position: relative;
+    z-index: 2;
+    padding: 13px;
+}
+
+.mod-chest-cont h3 {
+    color: #865500;
+    font-size: 15px;
+}
+
+.mod-chest {
+    position: relative;
+    width: 100%;
+}
+
+.mod-chest .chest-close {
+    width: 320px;
+    height: 135px;
+    opacity: 0;
+    position: relative;
+    z-index: 1;
+    position: absolute;
+    left: 50%;
+    top: 0px;
+    margin-left: -160px;
+}
+
+.mod-chest .chest-close .gift {
+    width: 320px;
+    height: 135px;
+    background: url(https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d6m6951t5jxf23jg29v8w.png) no-repeat 0px 0px;
+    background-size: 320px auto;
+    position: absolute;
+    left: 0;
+    top: 0px;
+}
+
+.mod-chest .chest-open {
+    width: 320px;
+    height: 150px;
+    background: url(https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d6m6951t5jxf23jg29v8w.png) no-repeat 0px -137px;
+    background-size: 320px auto;
+    opacity: 0;
+    position: relative;
+    z-index: 1;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+}
+
+.mod-chest .chest-open .mod-chest-cont {
+    position: absolute;
+    bottom: -27px;
+    left: 50%;
+    margin-left: -138px;
+}
+
+.mod-chest .show {
+    z-index: 2;
+    opacity: 1;
+}
+
+.chest-icon-zuan {
+    position: relative;
+    width: 50px;
+    overflow: visible;
+    height: 0px;
+    vertical-align: middle;
+    display: inline-block;
+}
+
+.chest-icon-zuan:after {
+    display: block;
+    content: "";
+    width: 75px;
+    height: 50px;
+    position: absolute;
+    top: -30px;
+    left: 0px;
+    background: url(https://d31zlh4on95l9h.cloudfront.net/images/5iujav01000d6m6auu0ic6w21963lhng.png) 0px 0px no-repeat;
+    background-size: 75px auto;
+    left: -10px;
+}
+
+.icon-state-doing,
+.icon-state-finish,
+.icon-state-expired {
+    display: block;
+    width: 112px;
+    height: 45px;
+    background: url(https://d31zlh4on95l9h.cloudfront.net/images/5iujb001000d6m6b4er0rno21b08jyxm.png) 0px 0px no-repeat;
+    background-size: 112px auto;
+}
+
+.icon-state-doing {
+    background-position: 0px -45px;
+}
+
+.icon-state-expired {
+    background-position: 0px -90px;
+}
+
+.icon-gift-xin,
+.icon-gift-zuan {
+    position: relative;
+    width: 15px;
+    overflow: visible;
+    height: 0px;
+    vertical-align: middle;
+    display: inline-block;
+    margin: 0px 3px;
+}
+
+.icon-gift-xin:after,
+.icon-gift-zuan:after {
+    display: block;
+    content: "";
+    width: 15px;
+    height: 13px;
+    position: absolute;
+    top: -8px;
+    left: 0px;
+    background: url(https://d31zlh4on95l9h.cloudfront.net/images/5iujb001000d6m6bem23rc221ctklq09.png) 0px 0px no-repeat;
+    background-size: 100px auto;
+}
+
+.icon-gift-xin:after {
+    background-position: -20px 0px;
+}
+
+.icon-dot {
+    width: 6px;
+    height: 6px;
+    display: inline-block;
+    overflow: hidden;
+    background: #ff0000;
+    border-radius: 6px;
+}
+
+.ui-round {
+    -webkit-mask: url(https://d31zlh4on95l9h.cloudfront.net/images/5iujav01000d6m6c4lnpbu621anlmjfe.png) 0px 0px no-repeat;
+    -webkit-mask-size: 100% auto;
+}
--- a/src/assets/static/css/open.css
+++ b/src/assets/static/css/open.css
@ -0,0 +1,318 @@
+.wrapper {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+    top: 250px;
+}
+
+.open-body {
+    width: 100%;
+    overflow: hidden;
+}
+
+.open-body .bg {
+    position: absolute;
+    z-index: 1;
+    background: url(https://d31zlh4on95l9h.cloudfront.net/images/5iujb001000d6m6ct5ghzpl21en4zi3e.png) 0px 0px no-repeat;
+    background-size: 452px auto;
+    width: 452px;
+    height: 510px;
+    max-height: 100%;
+    left: 50%;
+    margin-left: -226px;
+    top: -25px;
+}
+
+.open-body .bg.rotate {
+    -webkit-animation: rotate 10s infinite linear;
+}
+
+.open-has {
+    position: relative;
+    z-index: 2;
+    height: 450px;
+    width: 320px;
+    margin: 0px auto;
+}
+
+.open-has .title-close {
+    opacity: 1;
+    -webkit-transition: all .5s;
+    width: 100%;
+    text-align: center;
+}
+
+.open-has .title-open {
+    opacity: 0;
+    -webkit-transition: all .5s;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    text-align: center;
+    width: 100%;
+}
+
+.open-has h3 {
+    color: #865500;
+    font-size: 15px;
+    text-align: center;
+    padding-top: 75px;
+    padding-bottom: 33px;
+}
+
+.open-has h3 .user {
+    color: #ff5400;
+    margin: 0px 5px;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100px;
+    position: relative;
+    white-space: nowrap;
+    vertical-align: top;
+}
+
+.open-has .title-close .user {}
+
+.mod-chest .chest-close .tips {
+    width: 166px;
+    height: 60px;
+    background: url(https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d6m6dcaam22o21olgw92l.png) 0px 0px no-repeat;
+    background-size: 190px auto;
+    position: absolute;
+    left: 70px;
+    top: 145px;
+    -webkit-transition: all .5s;
+}
+
+.mod-chest .chest-close .tips .arrow {
+    width: 26px;
+    height: 60px;
+    background: url(https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d6m6dcaam22o21olgw92l.png) right 0px no-repeat;
+    background-size: 190px auto;
+    position: absolute;
+    display: block;
+    top: 0px;
+    right: -28px;
+    -webkit-animation: move .7s linear infinite alternate;
+}
+
+.mod-chest .chest-close:after {
+    width: 320px;
+    height: 300px;
+    position: absolute;
+    top: -100px;
+    left: -61px;
+    content: "";
+    display: block;
+}
+
+.mod-chest .chest-close:active {
+    -webkit-transform: scale(1.05);
+    -webkit-transition: all .3s;
+}
+
+.mod-chest .chest-close.shake .gift {
+    -webkit-animation: shake 1.2s linear;
+    -webkit-animation-fill-mode: forwards;
+}
+
+.mod-chest .chest-close.shake .tips {
+    opacity: 0;
+}
+
+.mod-chest .chest-open {}
+
+.mod-chest .chest-open.blur:after {
+    width: 320px;
+    height: 68px;
+    background: url(https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d6m6e13ri0qn23k3g8s09.png) no-repeat 0px 0px;
+    background-size: 320px auto;
+    position: relative;
+    z-index: 1;
+    position: absolute;
+    left: 0px;
+    top: -5px;
+    content: "";
+    display: block;
+}
+
+.open-has.opened .title-open {
+    opacity: 1;
+}
+
+.open-has.opened .title-close {
+    opacity: 0;
+}
+
+/*.open-has.opened .mod-chest{-webkit-transform:translate(0px,150px);}*/
+.open-has.opened .mod-chest .chest-open {
+    -webkit-transform: translate(0px, 150px);
+}
+
+.open-has .mod-chest-cont {
+    padding: 30px 0px 50px;
+    text-align: center;
+    overflow: hidden;
+    opacity: 0;
+    -webkit-transform: translate(0px, 30px);
+    /*-webkit-transition:all .3s .3s;-webkit-transition:all .3s .3s cubic-bezier(.53,1.5,.69,1.81);*/
+    z-index: 9;
+    -webkit-animation-fill-mode: forwards;
+}
+
+.open-has .chest-open.show .mod-chest-cont {
+    /*-webkit-transform:translate(0px,0px);opacity: 1;*/
+    -webkit-animation: move2 .2s .0s linear;
+    -webkit-animation-fill-mode: forwards;
+}
+
+.open-has .mod-chest-cont .gift {
+    color: #ff6000;
+    font-size: 24px;
+    line-height: 30px;
+    padding-bottom: 30px;
+}
+
+.open-has .mod-chest-cont .gift .icon {
+    width: 58px;
+    height: 0px;
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.open-has .mod-chest-cont .gift img {
+    width: 160px;
+    height: 160px;
+    position: absolute;
+    top: -62px;
+    left: -48px;
+}
+
+.open-none {
+    position: relative;
+    z-index: 2;
+    height: 450px;
+    width: 320px;
+    margin: 0px auto;
+}
+
+.open-none .mod-chest {
+    height: 150px;
+}
+
+.open-none h3 {
+    font-size: 15px;
+    color: #865500;
+    text-align: center;
+    padding-top: 35px;
+    padding-bottom: 40px;
+}
+
+.open-none .func {
+    padding: 18px 35px 30px;
+}
+
+@-webkit-keyframes rotate {
+    0% {
+        -webkit-transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+@-webkit-keyframes move {
+    0% {
+        -webkit-transform: translate(0px, 0px);
+    }
+
+    100% {
+        -webkit-transform: translate(0px, -5px);
+    }
+}
+
+@-webkit-keyframes move2 {
+    0% {
+        -webkit-transform: translate(0px, 30px);
+        opacity: 0;
+    }
+
+    70% {
+        -webkit-transform: translate(0px, -20px);
+        opacity: 1;
+    }
+
+    100% {
+        -webkit-transform: translate(0px, 0px);
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes shake {
+    0% {
+        transform: scale(1);
+        -webkit-transform: scale3d(1, 1, 1);
+    }
+
+    6% {
+        -webkit-transform: scale(.9) rotate(-8deg);
+        -webkit-transform: scale3d(1, 1, 1) rotate(0, 0, 1, -8deg);
+    }
+
+    18%,
+    30%,
+    42% {
+        -webkit-transform: scale(1.1) rotate(8deg);
+        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 8deg);
+    }
+
+    12%,
+    24%,
+    36%,
+    48% {
+        -webkit-transform: scale(1.1) rotate(-8deg);
+        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -8deg);
+    }
+
+    54% {
+        -webkit-transform: scale(1);
+        -webkit-transform: scale3d(1, 1, 1);
+    }
+
+    60% {
+        -webkit-transform: scale(1);
+        -webkit-transform: scale3d(1, 1, 1);
+    }
+
+    80% {
+        -webkit-transform: scale(1) translate(0px, 150px);
+        -webkit-transform: scale3d(1, 1, 1) translate3d(0px, 150px, 0);
+    }
+
+    90% {
+        -webkit-transform: scale(1) translate(0px, 130px);
+        -webkit-transform: scale3d(1, 1, 1) translate3d(0px, 130px, 0);
+    }
+
+    100% {
+        -webkit-transform: scale(1) translate(0px, 150px);
+        -webkit-transform: scale3d(1, 1, 1) translate3d(0px, 150px, 0);
+    }
+}
+
+.chest-notice {
+    text-align: center;
+    font-size: 12px;
+    line-height: 20px;
+    position: relative;
+    color: #ff6000;
+    padding-bottom: 10px;
+}
+
+.chest-notice input {
+    position: relative;
+    top: 3px;
+}
--- a/src/assets/static/css/reset.css
+++ b/src/assets/static/css/reset.css
@ -0,0 +1,107 @@
+/*CSS Reset*/
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+code,
+form,
+fieldset,
+legend,
+input,
+textarea,
+p,
+blockquote,
+th,
+td,
+header,
+hgroup,
+nav,
+section,
+article,
+aside,
+footer,
+figure,
+figcaption,
+menu,
+button {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
+    line-height: 24px;
+    font-size: 14px;
+    color: #000;
+    background-color: #efeff4;
+    -webkit-user-select: none;
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: inherit;
+    font-weight: normal;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+fieldset,
+img {
+    border: 0;
+}
+
+li {
+    list-style: none;
+}
+
+input,
+textarea,
+select {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+}
+
+button,
+input[type="text"] {
+    border: none;
+    background: none;
+    -webkit-appearance: none;
+    outline: none;
+}
+
+a {
+    -webkit-touch-callout: none;
+    text-decoration: none;
+    color: #0079ff;
+    outline: none;
+}
+
+em,
+i {
+    font-style: normal;
+}
+
+::-webkit-input-placeholder {
+    color: #999;
+}
--- a/src/assets/static/js/zepto.min.js
+++ b/src/assets/static/js/zepto.min.js
--- a/src/components/MangHe.vue
+++ b/src/components/MangHe.vue
@ -0,0 +1,358 @@
+<template>
+    <div class="wrapper">
+        <div class="bg rotate"></div>
+        <div class="open-has" id="app">
+            <h3 class="title-close">恭喜您获得<span class="user">2025跨年</span>宝箱</h3>
+            <h3 class="title-open" id="title">恭喜您，<br>成功领取<span class="user">福卡</span>{{  }}</h3>
+            <div class="mod-chest">
+                <div class="chest-close show" @click="handleCloseClick">
+                    <div class="gift"></div>
+                    <div class="tips"><i class="arrow"></i></div>
+                </div>
+                <!--  -->
+                <div class="chest-open">
+                    <!-- 弹框 -->
+                    <!-- <div class="mod-chest-cont open-cont">
+                        <div class="content">
+                            <div class="gift">
+                                <div class="icon">
+                                    <img :src="cardImage" id="picture" />
+                                </div>
+                            </div>
+                        </div>
+                    </div> -->
+                </div>
+            </div>
+        </div>
+        <!-- <div class="open-none">
+            <h3>你来晚啦，下次早点吧！</h3>
+            <div class="mod-chest">
+                <div class="chest-open show"></div>
+            </div>
+            <div class="func"><button class="chest-btn">查看领取详情</button></div>
+        </div> -->
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import { ElDialog, ElTable, ElTableColumn, ElButton } from 'element-plus';
+
+// 变量声明
+const dialogVisible = ref(false);
+
+const cardImages = {
+    '七天加油卡': 'https://d31zlh4on95l9h.cloudfront.net/images/5iujb001000d6m58i9121b9217bdf02z.png',
+    '一个月加油卡': 'https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d6m56l6lph3121mn2aszr.png',
+    '两个月加油卡': 'https://d31zlh4on95l9h.cloudfront.net/images/5iujay01000d6m57d2c6f3o1w1fbqg4t.png',
+    '三个月加油卡': 'https://d31zlh4on95l9h.cloudfront.net/images/5iujb001000d6m57p2bdhet2164mogj3.png',
+    '未抽到': 'https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d6pkbt1o249528nj1oip3.png',
+    '重复抽取': 'https://d31zlh4on95l9h.cloudfront.net/images/5iujay01000d6nyotdpr7g31yt3l0936.png'
+};
+
+// 当前抽到的卡片图片
+let cardImage = ref(cardImages['未抽到']);
+let token = new URLSearchParams(window.location.search).get('token');
+
+// 方法定义
+const handleClick = (row) => {
+    console.log(row.name);
+};
+
+
+const suiji = () => {
+    const apiUrl = 'http://39.101.133.168:8828/coupon/api/coupon_backend/is-eligible-user';
+    axios
+        .post(apiUrl, { couponIds: [1, 2, 3, 4] }, { headers: { token } })
+        .then((response) => {
+            if (response.data.code === 200) {
+                // 获取随机加油卡类型
+                let random = Math.random();
+                let cardType = '';
+                if (random < 0.7) {
+                    cardType = '一个月加油卡';
+                } else if (random >= 0.7 && random < 0.8) {
+                    cardType = '七天加油卡';
+                } else if (random >= 0.8 && random < 0.9) {
+                    cardType = '两个月加油卡';
+                } else {
+                    cardType = '三个月加油卡';
+                }
+                // 更新卡片图片
+                cardImage.value = cardImages[cardType];
+                console.log(`您获得了：${cardType}`);
+            }
+        })
+        .catch((error) => {
+            console.log(error);
+        });
+};
+
+const gotouse = () => {
+    const encodedToken = encodeURIComponent(token);
+    window.location.href = `http://39.101.133.168:8828/live/api/coupon/getCoupons?token=${encodedToken}`;
+};
+
+const close = () => {
+    axios
+        .post(
+            'http://39.101.133.168:8828/coupon/api/coupon_backend/add-record',
+            { couponId: 1, name: 'AI金牛' },
+            { headers: { token } }
+        )
+        .then((response) => {
+            window.location.href = `http://121.89.234.155:8807/hljw/homepage?menu=999999991&token=${encodeURIComponent(token)}`;
+        })
+        .catch((error) => {
+            console.log(error);
+        });
+    dialogVisible.value = false;
+};
+
+const use = () => {
+    dialogVisible.value = true;
+};
+
+const isChestOpen = ref(false);
+const isChestBlur = ref(false);
+
+let animationEndListener;
+
+//开启宝箱动画
+const handleCloseClick = () => {
+    const chestCloseElement = document.querySelector('.chest-close');
+    chestCloseElement.classList.add('shake');
+
+    animationEndListener = () => {
+        const openHasElement = chestCloseElement.closest('.open-has');
+        if (openHasElement) {
+            openHasElement.classList.add('opened');
+        }
+
+        setTimeout(() => {
+            chestCloseElement.classList.remove('show');
+            const chestOpenElement = chestCloseElement.closest('.mod-chest').querySelector('.chest-open');
+            if (chestOpenElement) {
+                chestOpenElement.classList.add('show');
+                setTimeout(() => {
+                    chestOpenElement.classList.add('blur');
+                }, 500);
+            }
+        }, 200);
+    };
+    chestCloseElement.addEventListener('webkitAnimationEnd', animationEndListener, false);
+};
+
+onUnmounted(() => {
+    const chestCloseElement = document.querySelector('.chest-close');
+    if (chestCloseElement && animationEndListener) {
+        chestCloseElement.removeEventListener('webkitAnimationEnd', animationEndListener, false);
+    }
+});
+
+onMounted(() => {
+    suiji(); // 模拟抽奖
+});
+</script>
+
+<style scoped>
+@import '/src/assets/static/css/reset.css';
+@import '/src/assets/static/css/atom.css';
+@import '/src/assets/static/css/global.css';
+@import '/src/assets/static/css//open.css';
+@import 'element-plus/dist/index.css';
+
+
+
+/* 针对电脑屏幕的默认样式 */
+/* 选中某行时的背景色*/
+.el-table__body tr.current-row>td {
+    color: white;
+    background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujaz01000d6mhi6phn0x6231zklia7.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+}
+
+.dialog {
+    background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d6mfo5rm5znl245g0eghr.png'), url('https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d6m6h1ljwbq823ltfsecq.png');
+    background-size: 100% 100%;
+    background-position: center;
+    --el-dialog-bg-color: transparent;
+    --el-dialog-border-color: transparent;
+    width: 21%;
+    height: 120%;
+}
+
+.el-dialog__headerbtn {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    font-size: var(--el-message-close-size, 26px);
+    height: 48px;
+    outline: none;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 48px;
+    margin-top: 27%;
+    margin-right: 10%;
+}
+
+.dialog-header-1 {
+    width: 48%;
+    height: 70px;
+    margin: 0 auto;
+    margin-top: 10%;
+    background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujaz01000d6masa3xhgt222sdei8jt.png');
+    background-size: 100% 100%;
+    background-position: center;
+}
+
+.dialog-header-2 {
+    width: 130%;
+    height: 90px;
+    margin: 0 -15%;
+    background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d6matlbu84iz221znbk2l.png');
+    background-size: 100% 100%;
+    background-position: center;
+}
+
+.bg-image {
+    background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujay01000d6m94uiqypdo1we53k02e.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+}
+
+.tip {
+    width: 65%;
+    margin: auto;
+    text-align: center;
+    color: white;
+}
+
+.queding {
+    width: 30%;
+    background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujav01000d6mfsofztcdp21n8dj7qd.png');
+    background-size: 100% 100%;
+    background-position: center;
+}
+
+.el-table {
+    --el-table-border-color: transparent;
+    --el-table-border: none;
+    --el-table-text-color: red;
+    --el-table-header-text-color: #bdbdbe;
+    --el-table-row-hover-bg-color: transparent;
+    --el-table-current-row-bg-color: transparent;
+    --el-table-header-bg-color: transparent;
+    --el-table-bg-color: transparent;
+    --el-table-tr-bg-color: transparent;
+    --el-table-expanded-cell-bg-color: transparent;
+
+}
+
+.el-table__body {
+    border-spacing: 0px 6px !important;
+}
+
+/* 媒体查询：当屏幕宽度小于等于 768px 时，适用于手机屏幕 */
+@media screen and (max-width: 768px) {
+
+
+    /* 选中某行时的背景色*/
+    .el-table__body tr.current-row>td {
+        color: white;
+        background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujaz01000d6mhi6phn0x6231zklia7.png');
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center;
+    }
+
+    .dialog {
+        background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d6mfo5rm5znl245g0eghr.png'), url('https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d6m6h1ljwbq823ltfsecq.png');
+        background-size: 100% 100%;
+        background-position: center;
+        --el-dialog-bg-color: transparent;
+        --el-dialog-border-color: transparent;
+        width: 80%;
+        height: 1100px;
+    }
+
+    .el-dialog__headerbtn {
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+        font-size: var(--el-message-close-size, 26px);
+        height: 48px;
+        outline: none;
+        padding: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 48px;
+        margin-top: 25%;
+        margin-right: 10%;
+    }
+
+    .dialog-header-1 {
+        width: 50%;
+        height: 50px;
+        margin: 0 auto;
+        margin-top: 15%;
+        background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujaz01000d6masa3xhgt222sdei8jt.png');
+        background-size: 100% 100%;
+        background-position: center;
+    }
+
+    .dialog-header-2 {
+        /* width: 20%;
+                height: 100%; */
+        margin: 0 -15%;
+        background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d6matlbu84iz221znbk2l.png');
+        background-size: 100% 100%;
+        background-position: center;
+    }
+
+    .bg-image {
+        background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujay01000d6m94uiqypdo1we53k02e.png');
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center;
+    }
+
+    .tip {
+        width: 65%;
+        margin: auto;
+        text-align: center;
+        color: white;
+    }
+
+    .queding {
+        width: 30%;
+        background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/5iujav01000d6mfsofztcdp21n8dj7qd.png');
+        background-size: 100% 100%;
+        background-position: center;
+    }
+
+    .el-table {
+        --el-table-border-color: transparent;
+        --el-table-border: none;
+        --el-table-text-color: red;
+        --el-table-header-text-color: #bdbdbe;
+        --el-table-row-hover-bg-color: transparent;
+        --el-table-current-row-bg-color: transparent;
+        --el-table-header-bg-color: transparent;
+        --el-table-bg-color: transparent;
+        --el-table-tr-bg-color: transparent;
+        --el-table-expanded-cell-bg-color: transparent;
+
+    }
+
+    .el-table__body {
+        border-spacing: 0px 6px !important;
+    }
+}
+</style>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import BackView from '../views/BackView.vue'
+import HomeView_test from '../views/HomeView_test.vue'

 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
@ -14,6 +15,11 @@ const router = createRouter({
      path: '/back',
      name: 'back',
      component: BackView,
+    },
+    {
+      path: '/test',
+      name: 'test',
+      component: HomeView_test,
    }
  ],
 })
--- a/src/views/BackView.vue
+++ b/src/views/BackView.vue
@ -19,6 +19,7 @@
 </template>

 <script setup>
+//导入MangHe组件
 import { ref } from 'vue';
 const list = ref([]);
 function getList() {
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -36,6 +36,7 @@
      </div>
      <center>
        <div class="btn" @click='choose' v-if='!isAllFlag'>抽卡({{ times }})</div>
+        <!-- <div class="manghe" @click='choose' v-if='!isAllFlag'><mang-he></mang-he></div> -->
        <div class="btn" @click='compose' v-else>合成</div>
      </center>
      <center class='anxiang'>&nbsp;</center>
@ -55,10 +56,14 @@
    </template>
    <!-- <center>截止时间：12月12日</center> -->
  </div>
+
+
+  
 </template>

 <script setup>
 import { ref, onMounted } from 'vue';
+// import MangHe from '/src/components/MangHe.vue';

 const imgHeight = ref('155px');
 const isPageFlag = ref(false);
@ -68,7 +73,7 @@ const isAllFlag = ref(false);
 const type = ref(0);
 const times = ref(10);
 const chance = ref(100); // 玄武卡分界点，影响获得该卡的概率
-const rate = ref('2%');
+const rate = ref('20%');
 const list = ref([
  { src: 'src/assets/img/1.jpg', nums: 0, name: '青龙', info: '代表太昊与东方七宿的东方之神，于五行主木，四季中的春季。' },
  { src: 'src/assets/img/1.jpg', nums: 0, name: '白虎', info: '代表少昊与西方七宿的西方之神，于五行主金，四季中的秋季。象征着威武和军队。' },
@ -132,10 +137,19 @@ function compose() {
  if (type.value === 5) {
    alert('已经合成过一次了，不能再合成！');
  } else {
-    for (let i = 0; i < 4; i++) {
-      list.value[i].nums--;
-    }
-    type.value = 5;
+    // 给所有卡片添加 shrink 类，让它们动画消失
+    list.value.forEach((item, index) => {
+      setTimeout(() => {
+        document.querySelectorAll('.card-li')[index].classList.add('shrink');
+      }, 100 * index); // 让每个卡片的消失有个时间差
+    });
+
+    // 延迟一段时间后执行合成效果和弹窗显示
+    setTimeout(() => {
+      type.value = 5;
+      isMaskFlag.value = true; // 显示合成成功的弹窗
+    }, 1000); // 1秒后弹出合成提示
+
    isMaskFlag.value = true;
  }
 };
@ -145,7 +159,7 @@ function close() {
 };

 function addChance() {
-  chance.value += 2;
+  chance.value += 20;
  rate.value = parseInt((chance.value - 98) / chance.value * 100) + '%';
 };

@ -153,6 +167,7 @@ function addChance() {
 function reload() {
  window.location.reload();
 }
+
 </script>

 <style scoped>
@ -235,7 +250,8 @@ a,

 .card-list {
  overflow: hidden;
-  margin-bottom: 10px;
+  margin-bottom: 70px;
+  margin-top: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
@ -254,6 +270,12 @@ a,
  transition: 1s;
 }

+.card-li.shrink {
+  transform: scale(0.2) translate(50%, 50%);  /* 缩小并移动到中间 */
+  opacity: 0; /* 让卡片消失 */
+  z-index: 10;  /* 确保合成卡在最上层 */
+}
+
 .font {
  position: absolute;
  top: 0;
@ -319,6 +341,18 @@ a,
  margin: 0 4.5% 15px;
 }

+/* .manghe{
+  display: inline-block;
+  border-radius: 15px;
+  line-height: 30px;
+  text-align: center;
+  width: 40%;
+  color: #5b2e19;
+  font-size: 14px;
+  cursor: pointer;
+  margin: 0 4.5% 15px;
+} */
+
 .btn a {
  text-decoration: none;
  color: #5b2e19;
@ -389,6 +423,7 @@ a,

@media (max-width: 767px) {
  .card-list {
+    margin-top: 15%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
@ -424,4 +459,5 @@ a,
    justify-self: center;
  }
 }
+
 </style>
--- a/src/views/HomeView_test.vue
+++ b/src/views/HomeView_test.vue
@ -0,0 +1,612 @@
+<template>
+  <div id="advert">
+    <div class="bg1">
+      <div :class="{
+        'bg1_view': start,
+        'one': info.counts.length == 1,
+        'two': info.counts.length == 2,
+        'three': info.counts.length == 3,
+        'four': info.counts.length == 4,
+        'five': info.counts.length == 5,
+        'six': info.counts.length == 6,
+        'seven': info.counts.length == 7,
+        'eight': info.counts.length == 8,
+        'active': start
+      }" v-if="info.counts">
+        <img :src="item.goods_thumb" v-for="(item, index) in info.counts" :key="index"
+          :class="'icon0' + Number(index + 1)">
+      </div>
+    </div>
+    <div class="content" :class="{ 'content_active': end }">
+      <img :src="info.goods_thumb" alt="">
+    </div>
+  </div>
+  <div class="btn">
+    <span @click="hecheng" :class="{ 'btnActive': loading }">{{ loading ? '正在合成中...' : '合成' }}</span>
+  </div>
+  <!-- 弹窗 -->
+  <div class="mask" v-show="successFlag"></div>
+  <div class="popup" v-show="successFlag">
+    <div class="popup-title">
+      <span @click="back()">×</span>
+    </div>
+    <div class="popup-content">
+      <img :src="info.goods_thumb" alt="">
+    </div>
+    <div class="popup-footer">
+      <div>恭喜您获得顶级藏品 *** </div>
+      <div>您可以在我的藏品中查看获得所有藏品哦</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+
+
+const start = ref(false);
+const end = ref(false);
+const successFlag = ref(false);
+const loading = ref(false);
+const info = ref({
+  goods_thumb: 'https://cdn.apifox.cn/logo/apifox-logo-512.png',
+  counts: [
+    { goods_thumb: 'src/assets/img/1.jpg' },
+    { goods_thumb: 'src/assets/img/2.jpg' },
+    { goods_thumb: 'src/assets/img/3.jpg' },
+    { goods_thumb: 'src/assets/img/4.jpg' },
+    { goods_thumb: 'src/assets/img/5.jpg' }
+  ]
+});
+function hecheng() {
+  if (loading.value) {
+    return false;
+  }
+  let num = 1;
+  start.value = true; // 开启周围动画
+  loading.value = true; // 更改按钮状态
+  const time = setInterval(() => {
+    num++;
+    // 转动到5秒时 中间内容动画开始
+    if (num === 5) {
+      end.value = true;
+    }
+    // 周围动画结束
+    if (num === 7) {
+      start.value = false;
+    }
+    // 8秒后 中间内容动画结束，处理后续逻辑
+    if (num === 8) {
+      num = 1;  // 重置计数器
+      end.value = false;  // 重置中间动画
+      clearInterval(time); // 清除计时器
+      if (!end.value) {
+        // 动画结束后
+        loading.value = false;  // 按钮状态
+        successFlag.value = true;  // 弹窗开关
+      }
+    }
+  }, 1000);
+}
+
+function back() {
+  successFlag.value = false;
+}
+</script>
+
+<style scoped>
+html,
+body {
+  background-color: #201D35;
+}
+
+/* 弹窗 */
+.mask {
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  background: rgba(0, 0, 0, .8);
+  left: 0;
+  top: 0;
+  z-index: 998;
+}
+
+.popup {
+  width: 280px;
+  padding: 10px;
+  background-color: #201D35;
+  border-radius: 10px;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  z-index: 999;
+  transform: translate(-50%, -50%);
+  border-top: 5px solid #4D4A5D;
+}
+
+.popup .popup-title {
+  text-align: right;
+  color: #FFF;
+  font-size: 28px;
+}
+
+.popup .popup-content {
+  text-align: center;
+}
+
+.popup .popup-content img {
+  width: 100px;
+  height: 100px;
+  margin: 30px auto 20px;
+  padding: 6px;
+  background: linear-gradient(to right, #525252, #E9E9E9);
+  border-radius: 50%;
+}
+
+.popup .popup-footer div:first-of-type {
+  color: #FFF;
+  font-weight: bold;
+  text-align: center;
+  padding-top: 40px;
+  font-size: 16px;
+}
+
+.popup .popup-footer div:last-of-type {
+  color: #9F9EA5;
+  font-size: 14px;
+  margin-top: 8px;
+  text-align: center;
+  padding-bottom: 40px;
+}
+
+@keyframes animtran {
+  from {
+    transform: rotateZ(0deg);
+  }
+
+  to {
+    transform: rotateZ(360deg);
+  }
+}
+
+@keyframes animtrans {
+  from {
+    transform: rotateZ(360deg);
+  }
+
+  to {
+    transform: rotateZ(0deg);
+  }
+}
+
+@-webkit-keyframes animtran {
+  from {
+    transform: rotateZ(0deg);
+  }
+
+  to {
+    transform: rotateZ(360deg);
+  }
+}
+
+@-webkit-keyframes animtrans {
+  from {
+    transform: rotateZ(360deg);
+  }
+
+  to {
+    transform: rotateZ(0deg);
+  }
+}
+
+#advert {
+  width: 300px;
+  height: 300px;
+  margin: 0 auto;
+  position: relative;
+}
+
+#advert .bg1 {
+  width: 280px;
+  height: 280px;
+  position: absolute;
+  top: 48%;
+  left: 10px;
+  z-index: 10;
+}
+
+#advert .bg1 div {
+  width: 280px;
+  height: 280px;
+  /* border: #ccc 1px solid; */
+  border-radius: 15em;
+  position: relative;
+}
+
+#advert .bg1 .bg1_view {
+  animation-name: animtrans;
+  animation-duration: 8s;
+  /*动画持续时间*/
+  animation-fill-mode: forwards;
+  /*动画填充模式，forwards作用是将动画的样式停留在最后一个 */
+  animation-direction: reverse;
+  /*规定是否应该轮流反向播放动画。*/
+  animation-iteration-count: infinite;
+  /*规定动画的速度曲线。*/
+  animation-timing-function: cubic-bezier(.8, .04, .02, .08);
+  /*速度 */
+}
+
+#advert .bg1 img {
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  position: absolute;
+}
+
+#advert .active img {
+  animation-name: animtrans;
+  animation-duration: 8s;
+  /*动画持续时间*/
+  animation-fill-mode: forwards;
+  /*动画填充模式，forwards作用是将动画的样式停留在最后一个 */
+  animation-direction: reverse;
+  /*规定是否应该轮流反向播放动画。*/
+  animation-iteration-count: infinite;
+  /*规定动画的速度曲线。*/
+  animation-timing-function: cubic-bezier(.8, .04, .02, .08);
+  /*速度 */
+}
+
+#advert .bg1 .icon01 {
+  top: -24px;
+  left: 110px;
+}
+
+#advert .bg1 .icon02 {
+  bottom: 20px;
+  left: 10px;
+}
+
+/* 一个藏品的情况 */
+#advert .one .icon01 {
+  top: -24px !important;
+  left: 110px !important;
+}
+
+/* 两个藏品的情况 */
+#advert .two .icon01 {
+  top: 100px;
+  left: -24px;
+}
+
+#advert .two .icon02 {
+  top: 100px !important;
+  right: -24px !important;
+  left: auto !important;
+}
+
+/* 三个藏品的情况 */
+#advert .three .icon02 {
+  left: 0 !important;
+}
+
+#advert .three .icon03 {
+  right: 0 !important;
+}
+
+/* 四个藏品的情况 */
+#advert .four .icon01 {
+  top: 8px !important;
+  left: 14px !important;
+}
+
+/* 五个藏品的情况 */
+#advert .five .icon02 {
+  left: 20px !important;
+  bottom: 0 !important;
+}
+
+#advert .five .icon03 {
+  right: 20px !important;
+  bottom: 0 !important;
+}
+
+#advert .five .icon04 {
+  top: 80px !important;
+  left: -24px !important;
+}
+
+#advert .five .icon05 {
+  top: 80px !important;
+}
+
+/* 六个藏品的情况 */
+#advert .six .icon02 {
+  left: 0 !important;
+  bottom: 35px !important;
+}
+
+#advert .six .icon03 {
+  right: 0 !important;
+  bottom: 35px !important;
+}
+
+#advert .six .icon04 {
+  top: 55px !important;
+  right: 0 !important;
+}
+
+#advert .six .icon05 {
+  top: auto !important;
+  bottom: -25px !important;
+  right: 110px !important;
+}
+
+#advert .six .icon06 {
+  top: 55px !important;
+  left: 0 !important;
+}
+
+
+#advert .bg1 .icon03 {
+  bottom: 20px;
+  right: 10px;
+}
+
+#advert .bg1 .icon04 {
+  top: 8px;
+  right: 14px;
+}
+
+#advert .bg1 .icon05 {
+  top: 100px;
+  right: -24px;
+}
+
+#advert .bg1 .icon06 {
+  top: 8px;
+  left: 14px;
+}
+
+#advert .bg1 .icon07 {
+  bottom: -25px;
+  left: 110px;
+}
+
+#advert .bg1 .icon08 {
+  top: 100px;
+  left: -24px;
+}
+
+#advert .content {
+  position: absolute;
+  z-index: 11;
+  left: 100px;
+  top: 76%;
+  border-radius: 50%;
+  padding: 6px;
+  background: linear-gradient(to right, #525252, #E9E9E9);
+}
+
+#advert .content img {
+  width: 100px;
+  height: 100px;
+}
+
+@keyframes ani-one {
+  from {
+    left: 260px;
+  }
+
+  to {
+    left: 16px
+  }
+}
+
+@keyframes ani-two {
+  from {
+    left: 260px;
+  }
+
+  to {
+    left: 70px
+  }
+}
+
+@keyframes ani-three {
+  from {
+    top: 0;
+    left: 0;
+  }
+
+  to {
+    top: 8px;
+    left: 8px;
+  }
+}
+
+@keyframes ani-four {
+  0% {
+    width: 130px;
+    height: 50px;
+    left: 85px;
+    top: 125px;
+    box-shadow: #f6f6f6 8px 8px 8px 4px;
+    border: #eee 0px solid;
+    margin-left: 0;
+  }
+
+  100% {
+    width: 259px;
+    height: 333px;
+    left: 50%;
+    top: 0px;
+    box-shadow: #FFFFFF 0 0 0 0;
+    border: #eee 1px solid;
+    margin-left: -130px;
+  }
+}
+
+@keyframes ani-five {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes ani-six {
+  from {
+    left: 260px;
+  }
+
+  to {
+    left: 0;
+  }
+}
+
+@-webkit-keyframes ani-one {
+  from {
+    left: 260px;
+  }
+
+  to {
+    left: 16px
+  }
+}
+
+@-webkit-keyframes ani-two {
+  from {
+    left: 260px;
+  }
+
+  to {
+    left: 70px
+  }
+}
+
+@-webkit-keyframes ani-three {
+  from {
+    top: 0;
+    left: 0;
+  }
+
+  to {
+    top: 8px;
+    left: 8px;
+  }
+}
+
+@keyframes shake {
+
+  /* 水平抖动，核心代码 */
+  10%,
+  90% {
+    transform: translate3d(-2px, 0, 0);
+  }
+
+  20%,
+  80% {
+    transform: translate3d(+4px, 0, 0);
+  }
+
+  30%,
+  70% {
+    transform: translate3d(-8px, 0, 0);
+  }
+
+  40%,
+  60% {
+    transform: translate3d(+8px, 0, 0);
+  }
+
+  50% {
+    transform: translate3d(-8px, 0, 0);
+  }
+}
+
+@keyframes rotation {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+.content_active {
+  /* animation: shake 2s ease-in-out; */
+  -webkit-animation: rotation 2s linear infinite;
+  animation: rotation 2s linear infinite;
+}
+
+@-webkit-keyframes ani-four {
+  0% {
+    width: 130px;
+    height: 50px;
+    left: 85px;
+    top: 125px;
+    box-shadow: #f6f6f6 8px 8px 8px 4px;
+    border: #eee 0px solid;
+    margin-left: 0;
+  }
+
+  100% {
+    width: 259px;
+    height: 333px;
+    left: 50%;
+    top: 0px;
+    box-shadow: #FFFFFF 0 0 0 0;
+    border: #eee 1px solid;
+    margin-left: -130px;
+  }
+}
+
+@-webkit-keyframes ani-five {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes ani-six {
+  from {
+    left: 260px;
+  }
+
+  to {
+    left: 0;
+  }
+}
+
+.btn {
+  margin-top: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn span {
+  display: inline-block;
+  width: 80%;
+  line-height: 48px;
+  background: linear-gradient(to left, #FEECDE, #F1CCA7);
+  color: #665A4A;
+  text-align: center;
+  border-radius: 40px;
+}
+
+.btn .btnActive {
+  background: none;
+  background-color: #37344A;
+  color: #9F9EA5;
+}
+</style>