日常提交0620

file/resources/css/carousel.css

@@ -0,0 +1,132 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+.carousel a {
+    list-style: none;
+
+}
+
+.carousel li {
+    list-style: none;
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.carousel {
+    width: 100%;
+}
+
+.carousel .content {
+    height: 300px;
+    margin: 0 auto 0;
+    position: relative;
+}
+
+.carousel #item {
+    width: 100%;
+    height: 100%;
+
+}
+
+.carousel .item {
+    width: 100%;
+    position: absolute;
+    opacity: 0;
+    transition: all 1s;
+    overflow: hidden;
+
+}
+
+.carousel .item.active {
+    opacity: 1;
+}
+
+.carousel img {
+    /*width: 100%;*/
+
+    height: 300px;
+}
+
+.carousel #btn-left {
+    width: 30px;
+    height: 69px;
+    font-size: 30px;
+    color: white;
+    background-color: rgba(0, 0, 0, 0.4);
+    line-height: 69px;
+    padding-left: 5px;
+    z-index: 10; /*始终显示在图片的上层*/
+    position: absolute;
+    left: 40px;
+    top: 50%;
+    transform: translateY(-60%); /*使按钮向上偏移居中对齐*/
+    cursor: pointer;
+    opacity: 0; /*平时隐藏*/
+    user-select: none;
+    border-radius: 8px;
+    transition: opacity 0.3s ease-in-out,background-color 0.3s ease-in-out;
+}
+
+.carousel:hover #btn-left {
+    /*鼠标滑入，显示图标*/
+    opacity: 1;
+}
+#btn-left:hover {
+    background-color: rgba(0, 0, 0, 0.65);
+}
+.carousel #btn-right {
+    border-radius: 8px;
+    user-select: none;
+    width: 26px;
+    height: 69px;
+    font-size: 30px;
+    color: white;
+    background-color: rgba(0, 0, 0, 0.4);
+    line-height: 69px;
+    padding-left: 5px;
+    z-index: 10;
+    position: absolute;
+    right: 40px;
+    top: 50%;
+    cursor: pointer;
+    opacity: 0;
+    transform: translateY(-60%);
+    transition: opacity 0.3s ease-in-out,background-color 0.3s ease-in-out;
+}
+
+.carousel:hover #btn-right {
+    opacity: 1;
+}
+#btn-right:hover {
+    background-color: rgba(0, 0, 0, 0.65);
+}
+.carousel #circle {
+    height: 20px;
+    display: flex;
+    position: absolute;
+    bottom: 5px;
+    left: calc(50% - 50px);
+
+    align-items: center;
+    padding-bottom: 1px;
+    border-radius: 10px;
+}
+
+.carousel .circle {
+    width: 10px;
+    height: 10px;
+    border-radius: 10px;
+    /*border: 2px solid white;*/
+    background: rgba(0, 0, 0, 0.4);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+    margin: 5px;
+}
+
+.carousel .white {
+    background-color: #FFFFFF;
+}

file/resources/css/detail.css

@@ -0,0 +1,729 @@
+.detail {
+    padding-top: 80px;
+    width: 100%;
+    background: #f8f8f8;
+}
+.detail .detail-router {
+    line-height: 50px;
+    text-align: left;
+    margin: 0 auto;
+    color: #333;
+    width: 1180px;
+    height: 50px;
+    background: white;
+}
+.detail .detail-router .detail-router-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: 14px;
+    color: #888888;
+    font-weight: bold;
+    display: flex;
+}
+.detail .detail-router .detail-router-list .detail-router-item {
+    margin: 0 10px;
+}
+.detail .detail-router .detail-router-list .detail-router-item:hover {
+    cursor: pointer;
+    color: #207cfb;
+    text-decoration: underline;
+}
+.detail .goods-show {
+    background: #cfddd6;
+    height: 300px;
+    padding-top: 35px;
+}
+.detail .goods-show .goods-show-info {
+    width: 1180px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+}
+.detail .goods-show .goods-show-info .goods-show-body {
+    display: flex;
+}
+.detail .goods-show .goods-show-info .goods-show-body .goods-show-img {
+    perspective: 300px;
+}
+.detail .goods-show .goods-show-info .goods-show-body .goods-show-img img {
+    transform-origin: left center;
+    transform: rotateY(10deg) rotateX(5deg);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    border-radius: 20px;
+}
+.detail .goods-show .goods-show-info .goods-show-body .goods-show-text {
+    padding-top: 20px;
+    padding-left: 30px;
+    margin-left: 50px;
+    width: 600px;
+    text-align: left;
+}
+.detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-title {
+    line-height: 35px;
+    font-size: 30px;
+    font-weight: bold;
+    color: #777;
+}
+.detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-advantages {
+    margin-top: 15px;
+    color: #888;
+    display: flex;
+    justify-content: left;
+    flex-wrap: wrap;
+}
+.detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-advantages .goods-show-advantage-not-icon {
+    width: 85px;
+}
+.detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-advantages .goods-show-advantage-icon {
+    width: 110px;
+}
+.detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-advantages .goods-show-advantage-icon .goods-show-tag {
+    padding-left: 0px;
+}
+.detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-advantages .goods-show-advantage {
+    padding: 5px;
+    margin-bottom: 5px;
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
+    border-radius: 5px;
+    border: 1px solid #b0c0bf;
+    background-color: #c0d0ca;
+    user-select: none;
+    text-align: center;
+}
+.detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-advantages .goods-show-advantage img {
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+}
+.detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-advantages .goods-show-advantage .goods-show-tag {
+    width: 100%;
+}
+.detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-advantages .goods-show-advantage .goods-show-name {
+    font-size: 16px;
+    line-height: 20px;
+    color: #666666;
+    font-weight: bold;
+}
+.detail .goods-show .goods-show-info .goods-show-body .goods-show-text .goods-show-advantages .goods-show-advantage .goods-show-desc {
+    font-size: 12px;
+}
+.detail .goods-show .goods-show-info .goods-show-body .goods-show-des {
+    margin-top: 30px;
+    color: #aaa;
+    height: 140px;
+    text-indent: 2em;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+.detail .goods-show .goods-show-info .goods-show-count {
+    display: flex;
+    width: 150px;
+}
+.detail .goods-show .goods-show-info .goods-show-count .goods-show-price-text {
+    font-size: 12px;
+    width: 150px;
+    line-height: 34px;
+    text-align: center;
+    border-radius: 15px;
+    height: 34px;
+    background: rgba(255, 255, 255, 0.3);
+}
+.detail .goods-show .goods-show-info .goods-show-count .goods-show-price-text span:nth-child(1) {
+    color: #999;
+}
+.detail .goods-info {
+    width: 1180px;
+    display: flex;
+    padding-bottom: 40px;
+    justify-content: space-between;
+    margin: 20px auto 0 auto;
+}
+.detail .goods-info .info-left {
+    width: 760px;
+}
+.detail .goods-info .info-left .info-left-select-btns {
+    padding: 15px;
+    width: 730px;
+    border: #dddddd solid;
+    border-width: 1px 1px 0 1px;
+    border-radius: 5px 5px 0 0;
+    display: flex;
+    justify-content: left;
+    flex-wrap: wrap;
+    background: white;
+}
+.detail .goods-info .info-left .info-left-select-btns .info-left-select-btn {
+    margin: 0 10px 20px 0;
+    height: 35px;
+    line-height: 35px;
+    text-align: center;
+    border-radius: 15px;
+    border: #8b8b8b 1px solid;
+    padding: 5px 15px;
+    color: #8b8b8b;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    user-select: none;
+}
+.detail .goods-info .info-left .info-left-select-btns .info-left-select-btn:hover {
+    background: #888888;
+    color: white;
+}
+.detail .goods-info .info-left .info-left-select-btns .info-left-select-btn:active {
+    background: #dddddd;
+    color: #888888;
+}
+.detail .goods-info .info-left .info-left-select-param {
+    padding: 15px;
+    border-radius: 0 0 5px 5px;
+    border: #dddddd 1px solid;
+    background: white;
+    margin-bottom: 20px;
+    width: 730px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+.detail .goods-info .info-left .info-left-select-param .info-left-select-param-btn {
+    user-select: none;
+    width: 300px;
+    height: 35px;
+    line-height: 35px;
+    padding: 5px 15px;
+    cursor: pointer;
+    border: #8b8b8b 1px solid;
+    border-radius: 15px;
+    transition: background-color 0.2s ease;
+    display: flex;
+    font-size: 12px;
+    margin-bottom: 10px;
+}
+.detail .goods-info .info-left .info-left-select-param .info-left-select-param-btn .ilspb-selector {
+    line-height: 35px;
+    width: 20px;
+    height: 20px;
+    background: #888888;
+    color: white;
+    border-radius: 50%;
+    margin: 7px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.detail .goods-info .info-left .info-left-select-param .info-left-select-param-btn .ilspb-selector svg{
+    width: 15px;
+    height: 15px;
+}
+.detail .goods-info .info-left .info-left-select-param .info-left-select-param-btn span {
+    margin-left: 10px;
+}
+.detail .goods-info .info-left .info-left-select-param .info-left-select-param-btn .ilspb-tag {
+    margin-top: -15px;
+    margin-left: 0;
+    padding: 0 10px;
+    background: rgba(248, 217, 209, 1);
+    font-size: 12px;
+    height: 20px;
+    line-height: 20px;
+    border-radius: 5px;
+    position: absolute;
+    color: rgba(223, 30, 28);
+    border: rgba(223, 30, 28) 1px solid;
+}
+.detail .goods-info .info-left .info-left-select-param .info-left-select-param-btn:hover .ilspb-tag {
+    background: rgba(248, 217, 209, 0.3);
+}
+.detail .goods-info .info-left .info-left-select-param .info-left-select-param-btn .it {
+    margin: -15px 0 0 180px;
+}
+.detail .goods-info .info-left .info-left-select-param .info-left-select-param-btn:hover {
+    background: #aaa;
+    color: white;
+}
+.detail .goods-info .info-left .info-left-select-param .info-left-select-param-btn:active {
+    background: #dddddd;
+    color: #aaa;
+}
+.detail .goods-info .info-left .info-left-des {
+    margin-top: 30px;
+    border-radius: 5px;
+    min-height: 600px;
+    padding: 0 20px 20px 20px;
+    border: #dddddd 1px solid;
+    background: white;
+}
+.detail .goods-info .info-left .info-left-des .des-tags {
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 16px;
+    border-bottom: #dddddd 1px solid;
+}
+.detail .goods-info .info-left .info-left-des .des-tags .des-tag {
+    padding: 15px 5px;
+    transition: font-size 0.2s ease;
+    line-height: 30px;
+    cursor: pointer;
+}
+.detail .goods-info .info-left .info-left-des .des-tags .des-select-tag {
+    font-weight: bold;
+    font-size: 20px;
+}
+.detail .goods-info .info-left .info-left-des .info-introduction {
+    text-align: left;
+    text-indent: 2em;
+    height: auto;
+}
+.detail .goods-info .info-right {
+    width: 380px;
+}
+.detail .goods-info .info-right .info-right-price-calc {
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-purchase-count {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px 30px;
+    border-radius: 5px 5px 0 0;
+    background: white;
+    border: solid #dddddd;
+    border-width: 1px 1px 0 1px;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-purchase-count .irpc-font {
+    font-size: 14px;
+    line-height: 36px;
+    text-align: left;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-purchase-count .irpc-count-button {
+    width: 120px;
+    border-radius: 15px;
+    background: #f0f0f0;
+    height: 36px;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-purchase-count .irpc-count-button .irpc-count-button-minus,
+.detail .goods-info .info-right .info-right-price-calc .info-right-purchase-count .irpc-count-button .irpc-count-button-add {
+    text-align: center;
+    line-height: 36px;
+    font-weight: bold;
+    color: #666666;
+    font-size: 18px;
+    width: 40px;
+    cursor: pointer;
+    user-select: none;
+    border-radius: 0 15px 15px 0;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-purchase-count .irpc-count-button .irpc-count-button-minus:nth-child(1) {
+    border-radius: 15px 0 0 15px;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-purchase-count .irpc-count-button .irpc-count-button-minus:hover,
+.detail .goods-info .info-right .info-right-price-calc .info-right-purchase-count .irpc-count-button .irpc-count-button-add:hover {
+    background: #eaeaea;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-purchase-count .irpc-count-button .irpc-count-button-input {
+    text-align: center;
+    line-height: 36px;
+    width: 40px;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-purchase-count .irpc-count-button .irpc-count-button-input input {
+    color: #666666;
+    font-size: 14px;
+    text-align: center;
+    width: 40px;
+    outline: none;
+    background: transparent;
+    border: transparent;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-total-purchase-price {
+    border: solid #dddddd;
+    border-width: 0 1px 1px 1px;
+    border-radius: 0 0 5px 5px;
+    height: 200px;
+    width: 318px;
+    padding: 10px 30px 10px 30px;
+    background: white;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-total-purchase-price .price-name {
+    justify-content: left;
+    text-align: left;
+    font-size: 26px;
+    font-weight: bold;
+    display: inline-block;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-total-purchase-price .price {
+    display: flex;
+    vertical-align: bottom;
+    justify-content: space-between;
+    margin: 10px 5px 0 5px;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-total-purchase-price .price .price-number {
+    display: flex;
+    justify-content: right;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-total-purchase-price .price .price-number .price-original {
+    padding-top: 13px;
+    display: block;
+    position: relative;
+    bottom: 0;
+    width: auto;
+    color: #8b8b8b;
+    text-decoration: line-through;
+    font-size: 14px;
+    text-align: right;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-total-purchase-price .price .price-number .price-original:before {
+    content: "￥";
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-total-purchase-price .price .price-number .price-value {
+    font-weight: bold;
+    font-size: 26px;
+    color: #ff4d4f;
+    text-align: right;
+    letter-spacing: -1.5px;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-total-purchase-price .price .price-number .price-value:before {
+    content: "￥";
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-total-purchase-price .purchase-button {
+    border-top: 1px solid #dddddd;
+    width: 320px;
+    height: 45px;
+    margin: 20px auto 0 auto;
+    color: white;
+    text-align: center;
+}
+.detail .goods-info .info-right .info-right-price-calc .info-right-total-purchase-price .purchase-button .purchase-button-btn {
+    margin-top: 20px;
+    background: #207cfb;
+    border-radius: 5px;
+    line-height: 45px;
+    user-select: none;
+    cursor: pointer;
+}
+.detail .goods-info .info-right .info-recommend {
+    margin-top: 40px;
+    margin-bottom: 20px;
+    width: 380px;
+    background: #fff;
+    border-radius: 5px;
+    border: 1px solid #dddddd;
+}
+.detail .goods-info .info-right .info-recommend .info-recommend-title {
+    font-size: 24px;
+    font-weight: bold;
+    text-align: center;
+    padding-bottom: 15px;
+    margin-bottom: 15px;
+    border-bottom: 1px solid #dddddd;
+}
+.detail .goods-info .info-right .info-recommend .info-recommend-items {
+    width: 320px;
+    padding: 10px 30px;
+    min-height: 30px;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    display: flex;
+}
+.detail .goods-info .info-right .info-recommend .info-recommend-items .info-recommend-item {
+    cursor: pointer;
+    margin: 0 10px 20px 10px;
+    max-width: 150px;
+}
+.detail .goods-info .info-right .info-recommend .info-recommend-items .info-recommend-item .recommend-item-img {
+    width: 110px;
+    height: 143px;
+    margin-bottom: 12px;
+}
+.detail .goods-info .info-right .info-recommend .info-recommend-items .info-recommend-item .recommend-item-img img {
+    border-radius: 15px;
+    width: 110px;
+    height: 143px;
+    z-index: 1;
+}
+.detail .goods-info .info-right .info-recommend .info-recommend-items .info-recommend-item .recommend-item-img:after {
+    transition: all 5.3s ease;
+    margin: -148px 0 0 0;
+    position: absolute;
+    display: none;
+    z-index: 2;
+    content: "";
+    width: 110px;
+    height: 143px;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+}
+.detail .goods-info .info-right .info-recommend .info-recommend-items .info-recommend-item .recommend-item-img:hover:after {
+    display: block;
+}
+.detail .goods-info .info-right .info-recommend .info-recommend-items .info-recommend-item:hover .recommend-item-img img {
+    box-shadow: #333 0 0 8px;
+}
+.detail .goods-info .info-right .info-recommend .info-recommend-items .info-recommend-item .recommend-item-name {
+    width: 110px;
+    height: 38px;
+    font-size: 12px;
+    text-align: left;
+}
+
+
+.content * {
+    max-width: 740px;
+}
+
+
+.content img {
+    max-width: 680px;
+}
+/*//todo order*/
+.order-buy-curtain {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100VW;
+    height: 100VH;
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.order-buy-body {
+    position: absolute;
+    top: calc(50% - 200px);
+    left: calc(50% - 300px);
+    background: white;
+    border-radius: 15px;
+    padding: 20px;
+}
+
+.order-buy-title {
+    font-size: 24px;
+    font-weight: bold;
+    text-align: left;
+    margin-bottom: 15px;
+}
+
+.order-buy-close {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    right: 10px;
+    top: 10px;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    transition: background-color 0.2s ease;
+    color: #aaaaaa;
+    cursor: pointer;
+}
+
+.order-buy-close:hover {
+    color: #555555;
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
+.order-body {
+    display: flex;
+    justify-content: space-between;
+}
+
+.order-buy-pay {
+    color: #333333;
+    width: 380px;
+    border-radius: 15px;
+    border: #dddddd 1px solid;
+    margin-right: 10px;
+    height: auto;
+}
+
+.order-buy-pay-list {
+    display: flex;
+    justify-content: left;
+    margin: 10px 10px 0 10px;
+    border-bottom: solid 3px #dddddd;
+}
+
+.order-buy-pay-item {
+    height: 40px;
+    width: calc(340px / 3);
+    background-color: #dddddd;
+    border-radius: 5px 5px 0 0;
+    user-select: none;
+    cursor: pointer;
+    margin-right: 10px;
+}
+
+.order-buy-pay-item:last-child {
+    margin-right: 0;
+}
+
+.order-buy-pay-item:hover {
+    background-color: #cccccc;
+}
+
+.order-buy-pay-item div .order-buy-pay-name {
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.order-buy-pay-item div .order-buy-pay-tip {
+    font-size: 12px;
+    color: #ea6200;
+}
+
+.order-buy-pay-select {
+    position: relative;
+    height: 40px;
+    background-color: transparent;
+    border-width: 0 0 3px 0;
+    border-style: solid;
+    width: calc(340px / 3);
+    transition: left 0.2s ease-in-out, border-color 0.2s ease-in-out;
+    top: -43px;
+    margin: 0;
+    padding: 0;
+}
+
+.order-buy-pay-body {
+    padding: 20px 0 10px;
+    margin: -43px 10px 10px;
+    border-radius: 0 0 10px 10px;
+    background: #eeeeee;
+}
+
+.pay-body-qrcode {
+    width: 150px;
+    height: 150px;
+    background-color: #dddddd;
+    margin: 0 auto 20px;
+}
+
+#test-purchase {
+    border-radius: 10px;
+    width: 100%;
+    height: 40px;
+    background-color: #207cfb;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    color: white;
+    font-weight: bold;
+    font-size: 14px;
+    user-select: none;
+}
+
+.pay-body-info {
+    display: flex;
+    justify-content: space-between;
+    width: 150px;
+    margin: 0 auto 5px;
+}
+
+.pay-body-info-title {
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.pay-body-info-amount {
+    font-size: 16px;
+    color: #ff4d4f;
+}
+
+.pay-body-info-amount:before {
+    content: "￥";
+}
+
+.pay-body-tip {
+    text-align: center;
+}
+
+.pay-body-tip-line {
+    cursor: pointer;
+}
+
+.pay-body-tip-line:hover {
+    color: #aaaaaa;
+}
+
+.order-buy-info {
+    border-radius: 15px;
+    width: 335px;
+    text-align: left;
+}
+
+.order-buy-info-body {
+    margin: 10px;
+    border-radius: 10px;
+}
+
+.order-buy-info-title {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.order-buy-info-data {
+    display: flex;
+    justify-content: left;
+    border-bottom: 1px solid #cccccc;
+    padding-bottom: 10px;
+}
+
+.order-image {
+    padding-right: 20px;
+}
+
+.order-image img {
+    border-radius: 5px;
+    width: 50px;
+    height: 70px;
+}
+
+.order-name {
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.order-data {
+    margin-top: 20px;
+}
+
+.order-data-item {
+    display: flex;
+    justify-content: space-between;
+    margin: 5px 0;
+}
+
+.order-data-item-name:after {
+    content: ":";
+}
+
+.order-data-item-value {
+    display: flex;
+    vertical-align: bottom;
+}
+
+.value-delete-line {
+    text-decoration: line-through;
+    height: 16px;
+    margin-top: 6px;
+    font-size: 12px;
+    color: #888888;
+    margin-right: 5px;
+}
+
+.value-delete-line:before {
+    content: "￥";
+}
+
+.value-now {
+    color: #ff4d4f;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.value-now:before {
+    content: "￥";
+}
+

file/resources/css/home.css

@@ -0,0 +1,423 @@
+
+.home-suspension {
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    z-index: 2;
+    width: 0;
+    height: 0;
+}
+
+.bottom-advertisement {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 130px;
+    background: #8a65d9;
+}
+
+.advertisement-content {
+    width: 1180px;
+    height: 130px;
+    margin: auto auto;
+}
+
+.right-handler {
+    position: fixed;
+    bottom: 50px;
+    right: 50px;
+    width: 75px;
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    color: black;
+    z-index: 1;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+
+.handler-btn .tooltip {
+    display: none;
+}
+
+.handler-btn .handler-btn:hover .tooltip {
+    display: block;
+}
+
+.handler-item-top {
+    border-radius: 8px 8px 0 0;
+}
+
+.handler-item-bottom {
+    border-radius: 0 0 8px 8px;
+}
+
+.handler-item {
+    transition: background-color 0.3s ease-in-out;
+}
+
+.item-icon-top {
+    padding: 10px 0;
+    color: #666666;
+    transform: rotateZ(180deg);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.item-icon-top div {
+    width: 25px;
+    height: 25px;
+}
+
+.right-handler div:hover {
+    background-color: #1475fa;
+}
+
+.item-icon-top:hover {
+
+}
+
+.item-icon-top:hover span {
+    color: white;
+}
+
+.item-icon-top:hover .item-icon {
+    color: white;
+}
+
+.item-icon-top:hover .item-icon-top {
+    color: white;
+}
+
+.handler-item-content {
+    margin: 0 auto;
+    width: 52px;
+    height: 74px;
+    justify-content: center;
+    align-items: center;
+    border-bottom: #F1F1F1 1px solid;
+
+    display: flex;
+    flex-direction: column;
+    font-size: 13px;
+}
+
+.item-icon {
+    color: #666666;
+}
+
+
+span {
+    color: #333333;
+}
+
+
+.handler-item-content:hover {
+    cursor: pointer;
+    user-select: none;
+    color: white;
+    background-color: #1475fa;
+
+
+}
+
+.handler-item-content:hover span {
+    color: white;
+}
+
+.handler-item-content:hover .item-icon {
+    color: white;
+}
+
+.handler-item-content:hover .item-icon-top {
+    color: white;
+
+}
+
+
+.tooltip {
+
+    display: block;
+    position: absolute;
+    padding: 10px;
+    border-radius: 8px;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
+    cursor: auto;
+    color: #333333;
+}
+
+.tooltip-arrow {
+    position: absolute;
+    right: -9.5px;
+    top: calc(50% - 10px);
+    width: 10px;
+    height: 20px;
+
+
+    -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
+    clip-path: polygon(100% 50%, 0 0, 0 100%);
+}
+
+.slot-image {
+    max-width: 80px;
+    max-height: 80px;
+}
+
+.handler-to-top {
+    cursor: pointer;
+}
+
+
+.gift-pack {
+    width: 1170px;
+    text-align: left;
+    font-size: 12px;
+    margin: 60px auto 50px auto;
+    line-height: 18px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid rgb(217, 217, 217);
+}
+
+.gift-pack-title {
+    font-size: 24px;
+    margin-bottom: 15px;
+}
+
+.gift-pack-content {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+}
+
+.content-item {
+    cursor: pointer;
+}
+
+.content-item-img {
+    max-width: 370px;
+    max-height: 165px;
+    overflow: hidden;
+}
+
+.content-item-img img {
+    border-radius: 10px;
+    width: 370px;
+    height: 165px;
+}
+
+
+.content-item-title {
+    font-weight: bold;
+    font-size: 14px;
+}
+
+.content-item-remark {
+    color: #999;
+}
+
+.content-item-price {
+    display: flex;
+    vertical-align: middle;
+    margin: 10px 0;
+}
+
+.content-item-price div {
+    margin-right: 10px;
+}
+
+.price-original {
+    text-decoration: line-through;
+    color: #888888;
+}
+
+.price-target {
+    vertical-align: middle;
+    padding: 0 3px;
+    margin: 0 0 0 4px;
+    background: rgb(223, 30, 28);
+    color: white;
+    font-weight: bolder;
+}
+.price-target span{
+    color: white;
+}
+
+.price-now {
+    font-family: BlinkMacSystemFont;
+    font-size: 16px;
+}
+
+/*==============首页主题====================*/
+.card {
+    width: 1180px;
+    margin: auto;
+    padding: 0;
+    /* border: 1px solid #ccc; */
+    text-align: left;
+}
+
+.card .card-header {
+    margin: 20px 0 0 5px;
+    display: flex;
+    line-height: 32px;
+}
+
+.card .card-header .card-title {
+    text-align: left;
+    display: inline-block;
+    padding: 0;
+    width: auto;
+    margin: 0;
+    font-weight: bold;
+    font-size: 24px;
+}
+
+.card .card-header .cart-other {
+    flex: 1;
+    margin: 0;
+    width: auto;
+    text-align: right;
+    vertical-align: middle;
+    align-items: center;
+    font-size: 12px;
+}
+
+.card .card-header .cart-other a {
+    cursor: pointer;
+    padding: 5px 15px;
+    color: white;
+    background: #1475fa;
+}
+
+.card .card-des {
+    margin: 8px 0 0 5px;
+    color: #666666;
+    font-size: 14px;
+}
+
+.card .card-list {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 5px 0 0 0;
+    margin-top: 15px;
+    overflow: hidden;
+    /* overflow-y: auto; */
+}
+
+.card .card-list div {
+    margin-right: 30px;
+    display: inline-block;
+}
+
+.card .card-list div:nth-child(6n) {
+    margin-right: 0;
+}
+
+.card .card-list div:nth-child(6n+1) {
+    margin-left: 5px;
+}
+
+.card .card-show {
+    text-align: center;
+    width: 100%;
+    cursor: pointer;
+    color: #646cff;
+}
+/*topic list item*/
+
+.goods-info {
+    display: block;
+    max-width: 170px;
+    margin-bottom: 30px;
+
+}
+
+.goods-info:hover {
+    cursor: pointer;
+}
+
+.goods-info .goods-img {
+    padding: 0;
+    margin: 0 0 12px 0;
+    overflow: hidden;
+    display: flex;
+}
+
+.goods-info .goods-img img {
+    height: 228px;
+    width: 170px;
+}
+
+.goods-info .goods-img img:hover {
+    z-index: 0;
+}
+
+.goods-info .goods-img:hover::after {
+    opacity: 1;
+    box-shadow: rgba(100, 100, 100, 0.3) 0 0 8px 3px;
+}
+
+.goods-info .goods-img::after {
+    content: "";
+    position: absolute;
+    z-index: 9999;
+    width: 170px;
+    height: 228px;
+    box-sizing: border-box;
+    background: rgba(229, 229, 229, 0.2);
+    transform: translateX(-170px);
+    animation: 0.2s ease 0s 1 normal none running enlarge;
+    opacity: 0;
+    transition: all 0.3s ease 0s;
+}
+
+.goods-info .goods-name {
+    height: 38px;
+    font-size: 12px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+}
+
+.goods-info .goods-price {
+    font-size: 16px;
+    margin: 5px 0;
+    font-weight: bold;
+}
+
+.goods-info .goods-price::before {
+    content: "￥";
+}
+
+.goods-info .goods-original-price {
+    display: inline-block;
+    text-decoration: line-through;
+    font-size: 12px;
+    margin: 0;
+    padding: 0;
+
+}
+
+.goods-info .goods-discount-percentage {
+    display: inline-block;
+    font-size: 12px;
+    margin: 0 0 0 10px;
+    padding: 0 5px;
+    color: white;
+    background: rgb(223, 30, 28);
+}
+
+.goods-info .goods-discount-percentage::before {
+    content: "-";
+}
+
+.goods-info .goods-discount-percentage::after {
+    content: "%";
+}
+

file/resources/css/index.css

@@ -0,0 +1,873 @@
+* {
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
+}
+
+body {
+    background: #f0f0f0;
+}
+
+body, html, div {
+    margin: 0;
+    padding: 0;
+}
+
+.navigation-bar {
+    display: flex;
+    position: fixed;
+    place-items: center;
+    top: 0;
+    height: 80px;
+    width: 100%;
+    z-index: 11;
+
+    background-color: #000000;
+}
+
+.nav-body {
+    height: 100%;
+    width: 1170px;
+    margin: auto auto;
+    display: flex;
+    justify-content: space-between;
+    grid-template-columns: 135px 1fr 150px;
+}
+
+.nav-logo {
+    max-width: 135px;
+    cursor: pointer;
+    margin: auto 20px;
+}
+
+.nav-logo img {
+    max-height: 80px;
+}
+
+
+.nav-search {
+    width: 450px;
+    height: 40px;
+    margin: auto auto;
+    display: flex;
+    border: none;
+}
+
+.nav-search form {
+    display: flex;
+}
+
+.nav-search-div .search-input {
+    width: 370px;
+    height: 40px;
+    /*/ / padding-left: 15 px;*/
+    padding: 0 0 0 15px;
+    font-size: 14px;
+    border: none;
+    outline: none;
+    border-radius: 5px 0 0 5px;
+
+}
+
+.search-btn {
+    width: 70px;
+    height: 40px;
+    outline: none;
+    margin: 0;
+    border: none;
+    background: #1475fa;
+    border-radius: 0 5px 5px 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.search-btn:hover {
+    border: none;
+    cursor: pointer;
+}
+
+.search-btn:active {
+    border: none;
+    background: #1470da;
+    cursor: pointer;
+}
+
+.search-btn .search-btn-icon {
+    width: 22px;
+    height: 22px;
+    color: white;
+}
+
+.nav-user {
+    display: flex;
+    justify-content: right;
+    margin: auto 20px;
+    height: 70px;
+    color: white;
+}
+
+.nav-user-menu {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 48px;
+    margin-left: 30px;
+}
+
+.nav-user-icon-bg {
+    min-width: 35px;
+    min-height: 35px;
+    border-radius: 50%;
+    background: #1d1d1d;
+    margin-right: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.nav-top {
+    padding-top: 80px;
+}
+
+/*登录*/
+
+.login-center {
+    display: inline-block;
+    position: absolute;
+    margin: 10% auto 0 auto;
+    top: 10%;
+    left: calc(50% - 200px);
+    text-align: center;
+}
+
+.login-content {
+    display: inline-block;
+
+    width: 437px;
+    height: 430px;
+    background-color: transparent;
+    padding: 10px 0;
+}
+
+.login-content form {
+    height: 390px;
+    margin: 20px 0;
+}
+
+.login-from {
+    width: 400px;
+    height: 370px;
+    border-radius: 25px;
+    padding-left: 100px;
+    padding-top: 20px;
+    background: white;
+    color: #333333;
+}
+
+.login-select {
+    display: flex;
+    justify-content: center;
+    border-radius: 20px;
+    width: 308px;
+    margin: 10px auto;
+    background: #e8e8e8;
+    color: #888888;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.login-select-item {
+    width: 112px;
+    height: 40px;
+    cursor: pointer;
+    line-height: 40px;
+    padding: 0 3px;
+}
+
+.login-select-item span {
+    z-index: -2;
+}
+
+
+.login-select-phone {
+    border-radius: 20px 0 0 20px;
+}
+
+.login-select-wx {
+    border-radius: 0 20px 20px 0;
+}
+
+.select-item {
+    border-radius: 20px;
+    z-index: 2;
+}
+
+.select-item2 {
+    position: absolute;
+    width: 103px;
+    height: 40px;
+    background: rgba(255, 255, 255, 1);
+
+    border-radius: 20px;
+    box-shadow: #888888 0 0 5px;
+    transition: margin-left 0.2s ease-in-out;
+    z-index: 1;
+}
+
+
+.login-type-phone {
+}
+
+.login-phone {
+
+    display: flex;
+    justify-content: center;
+    margin: 50px auto 20px auto;
+    width: 300px;
+}
+
+.login-phone-input {
+    height: 32px;
+    width: 290px;
+    border-radius: 15px;
+    border: 2px #dddddd solid;
+    padding: 3px 10px;
+    background-color: transparent;
+}
+
+.login-phone-input input {
+    height: 32px;
+    width: 280px;
+    background: transparent;
+    border: transparent 0;
+    font-size: 18px;
+    outline: none;
+    text-security: disc;
+}
+
+.login-phone-input
+:active {
+    border: transparent 0;
+}
+
+
+.login-phone-code {
+
+    display: flex;
+    justify-content: center;
+    margin: 0 auto 20px auto;
+    width: 308px;
+}
+
+.login-phone-code-input {
+    height: 32px;
+    width: 150px;
+    border-radius: 15px;
+    border: 2px #dddddd solid;
+    padding: 3px 10px;
+    background-color: transparent;
+}
+
+.login-phone-code-input input {
+    height: 32px;
+    width: 140px;
+    background: transparent;
+    border: transparent 0;
+    font-size: 18px;
+    outline: none;
+}
+
+.login-phone-code-input :active {
+    border: transparent 0;
+}
+
+
+.login-phone-code-btn {
+    margin-left: 20px;
+    height: 42px;
+    width: 120px;
+    user-select: none;
+    border-radius: 15px;
+    background: #0971ef;
+    color: #dddddd;
+    line-height: 42px;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+
+.login-email {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    margin: 20px auto 20px auto;
+    width: 300px;
+}
+.login-email .login-email-input{
+    margin: 0 auto 20px auto;
+}
+
+.login-email-input {
+    height: 32px;
+    width: 290px;
+    border-radius: 15px;
+    border: 2px #dddddd solid;
+    padding: 3px 10px;
+    background-color: transparent;
+}
+
+.login-email-input input {
+    height: 32px;
+    width: 280px;
+    background: transparent;
+    border: transparent 0;
+    font-size: 18px;
+    outline: none;
+    text-security: disc;
+}
+
+.login-email-input:active {
+    /*border: transparent 0;*/
+}
+
+
+.login-btn {
+    height: 42px;
+    border-radius: 15px;
+    width: 300px;
+    margin: 30px auto;
+    background: #0971ef;
+}
+
+.login-btn-div {
+    cursor: pointer;
+    user-select: none;
+    color: #dddddd;
+    font-size: 18px;
+
+    line-height: 42px;
+    font-weight: bold;
+}
+
+.login-type-email {
+    padding-top: 20px;
+}
+
+.login-email {
+    display: flex;
+    justify-content: center;
+    margin: 20px auto 20px auto;
+    width: 300px;
+}
+
+.login-email-input {
+    height: 32px;
+    width: 290px;
+    border-radius: 15px;
+    border: 2px #dddddd solid;
+    padding: 3px 10px;
+    background-color: transparent;
+}
+
+.login-email-input input {
+    height: 32px;
+    width: 280px;
+    background: transparent;
+    border: transparent 0;
+    font-size: 18px;
+    outline: none;
+    text-security: disc;
+}
+
+.login-email-input
+:active {
+    border: transparent 0;
+}
+
+
+.login-email-code {
+
+    display: flex;
+    justify-content: center;
+    margin: 0 auto 20px auto;
+    width: 308px;
+}
+
+.login-email-code-input {
+    height: 32px;
+    width: 150px;
+    border-radius: 15px;
+    border: 2px #dddddd solid;
+    padding: 3px 10px;
+    background-color: transparent;
+}
+
+.login-email-code-input input {
+    height: 32px;
+    width: 140px;
+    background: transparent;
+    border: transparent 0;
+    font-size: 20px;
+    outline: none;
+}
+
+.login-email-code-input:active {
+    border: transparent 0;
+}
+
+
+.login-email-code-btn {
+    margin-left: 20px;
+    height: 42px;
+    width: 120px;
+    user-select: none;
+    border-radius: 15px;
+    background: #0971ef;
+    color: #dddddd;
+    line-height: 42px;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+
+.login-btn {
+    height: 42px;
+    border-radius: 15px;
+    width: 300px;
+    margin: 30px auto;
+    background: #0971ef;
+}
+
+.login-btn-div {
+    cursor: pointer;
+    user-select: none;
+    color: #dddddd;
+    font-size: 18px;
+    line-height: 42px;
+    font-weight: bold;
+}
+
+.login-type-wx {
+}
+
+.login-wx-refresh {
+    cursor: pointer;
+    user-select: none;
+    width: 125px;
+    margin: 10px auto 5px auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 25px;
+    font-weight: bold;
+    color: #888888;
+}
+
+.login-wx-refresh-icon {
+
+}
+
+.login-wx-refresh-icon img {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 25px;
+    height: 25px;
+}
+
+
+.login-wx-refresh-text {
+    font-size: 20px;
+    line-height: 25px;
+}
+
+
+.login-wx-tip {
+    margin: 0;
+    padding: 0;
+    font-size: 14px;
+    display: inline-block;
+
+    font-weight: bolder;
+    color: #555555;
+}
+
+.login-wx-image {
+    width: 180px;
+    height: 180px;
+    background: #888888;
+    margin: 10px auto;
+}
+
+
+.login-register-btn {
+    margin: 20px auto;
+    cursor: pointer;
+    user-select: none;
+    color: #888888;
+}
+
+.login-register-btn:hover {
+    color: #207cfb;
+}
+
+.login-register-btn:active {
+    color: #1a6adc;
+}
+
+
+.login-image {
+    border-radius: 25px;
+    background-image: url('https://cdn.yicanggongyi.com/yinhe/icon/login.png'); width: 430px; height: 430px;
+    /*background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9));*/
+    position: absolute;
+    transform: translateX(-70%);
+    width: 437px;
+    height: 430px;
+    background-size: 100% 100%;
+}
+
+
+.nav-user-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 35px;
+    margin: 17px 0;
+    cursor: pointer;
+}
+
+.nav-user-icon-bg {
+    min-width: 35px;
+    min-height: 35px;
+
+    background: #1d1d1d;
+    margin-right: 5px;
+    display: flex;
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.nav-user-icon-bg img {
+    border-radius: 50%;
+    max-width: 35px;
+    max-height: 35px;
+
+}
+
+
+.login-body {
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    position: fixed;
+    z-index: 999;
+    width: 100VW;
+
+}
+
+.login-body-shield {
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    position: fixed;
+    background: rgba(0, 0, 0, 0.5);
+    width: 100VW;
+    z-index: -1;
+}
+
+
+.bottom-bar {
+    background: white;
+    margin: 0;
+    padding: 70px 0 0 0;
+}
+
+.partners-line {
+    margin: auto;
+    width: 1170px;
+}
+
+.partners-line ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    padding: 0;
+}
+
+.partners-line ul li {
+    height: 46px;
+    display: flex;
+    margin: 0 10px;
+    justify-content: space-between;
+    align-items: center;
+
+}
+
+.partners-service-guarantee {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 1170px;
+    margin: 10px auto 30px;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.service-guarantee {
+    display: flex;
+    text-align: left;
+    margin-top: 40px;
+    margin-bottom: 20px;
+}
+
+.sg-icon {
+    height: 60px;
+    width: 60px;
+    border-radius: 50%;
+    background: #daD5D9;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.sg-info {
+    justify-content: center;
+    align-items: center;
+    height: 38px;
+    margin-top: 8px;
+    margin-bottom: 20px;
+    margin-left: 16px;
+}
+
+.sg-info div:nth-child(1) {
+    color: #333333;
+    display: block;
+    box-sizing: border-box;
+    line-height: 14px;
+    width: 100%;
+    font-size: 16px;
+}
+
+.sg-info div:nth-child(2) {
+    color: #666666;
+    display: block;
+    margin-top: 8px;
+    box-sizing: border-box;
+    line-height: 14px;
+    width: 100%;
+    font-size: 12px;
+}
+
+.filing-body {
+    text-align: center;
+    color: #8b8b8b;
+    border-top: #dddddd 1px solid;
+    width: 1170px;
+    margin: 30px auto 0;
+    padding: 15px 0;
+}
+
+.bottom-bar-about {
+    width: 1170px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+}
+
+.bottom-bar-about-left {
+    display: flex;
+    justify-content: space-between;
+    text-align: left;
+}
+
+.about-contact {
+    width: 185px;
+}
+
+.about-me {
+    margin-left: 95px;
+}
+
+.about-issue {
+    margin-left: 134px;
+}
+
+.about-row {
+    font-size: 14px;
+}
+
+.about-row-title {
+    font-size: 16px;
+    margin-bottom: 16px;
+    color: #000000;
+}
+
+.about-row-item {
+    height: 16px;
+    line-height: 16px;
+    color: #666666;
+    margin-bottom: 10px;
+}
+
+.about-row-imgs {
+    margin-top: 16px;
+}
+
+.about-row-imgs img {
+    margin-right: 16px;
+}
+
+.bottom-bar-about-right {
+    display: flex;
+    flex-direction: column;
+    width: 278px;
+}
+
+.about-row-title {
+    font-size: 16px;
+    margin-bottom: 16px;
+}
+
+.my-user-images {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.my-user-images img {
+    margin: 0 4px 4px 0;
+}
+
+.bottom-bar-active {
+    display: flex;
+    justify-content: center;
+    margin-top: 30px;
+}
+
+.bottom-bar-active img {
+    margin-right: 30px;
+}
+
+.footer-about-box {
+
+    display: flex;
+    justify-content: center;
+    margin-top: 30px;
+}
+
+.footer-about-app {
+
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+}
+
+.footer-about-app img {
+    margin-right: 30px;
+}
+
+
+/*注册*/
+body, html {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+}
+
+.register-center {
+    position: absolute;
+    margin: 10% auto 0 auto;
+    top: 10%;
+    left: calc(50% - 200px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #888;
+}
+
+.register-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 350px;
+    height: 430px;
+    background-color: white;
+    border-radius: 20px;
+    padding: 20px 40px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.register-content-title {
+    color: #333;
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 20px;
+}
+
+.register-content-input {
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.register-content-input input {
+    width: 100%;
+    height: 32px;
+    padding: 5px;
+    border: 2px solid #ddd;
+    border-radius: 15px;
+    outline: none;
+    font-size: 16px;
+}
+
+.register-content-code {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+
+.register-content-code-input {
+    width: 60%;
+}
+.register-content-code-input input {
+    width: 100%;
+    height: 32px;
+    padding: 5px;
+    border: 2px solid #ddd;
+    border-radius: 15px;
+    outline: none;
+    font-size: 16px;
+}
+.register-content-code-btn {
+    width: 32%;
+    height: 42px;
+    background-color: #207cfb;
+    color: white;
+    border-radius: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+}
+
+.register-content-submit {
+    width: 100%;
+    height: 42px;
+    background-color: #207cfb;
+    color: white;
+    border-radius: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    font-weight: bold;
+    margin-top: 20px;
+}

file/resources/css/topic.css

@@ -0,0 +1,209 @@
+.topic {
+    padding-top: 80px;
+    color: #ff4d4f;
+    padding-bottom: 100px;
+}
+.topic .topic-image img {
+    z-index: 2;
+}
+.topic .topic-image .image-bottom:after {
+    content: '';
+    display: block;
+    width: 100%;
+    margin-top: 0px;
+    height: 480px;
+    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(240, 240, 240, 1));
+    z-index: 3;
+}
+.topic .anchor-div {
+    box-shadow: #dddddd 0 0 3px;
+    transition: box-shadow 0.5s;
+}
+.topic .anchor-div:hover {
+    box-shadow: #aaaaaa 0 0 5px;
+}
+.topic .topic-anchor {
+    z-index: 10;
+    margin: -95px auto 0 auto;
+    width: 1254px;
+    height: 90px;
+    display: flex;
+}
+.topic .topic-anchor .anchor-arrow {
+    width: 32px;
+}
+.topic .topic-anchor .anchor-arrow .anchor-arrow-body {
+    border-radius: 15px;
+    width: 32px;
+    height: 90px;
+    display: none;
+    background-color: white;
+    cursor: pointer;
+}
+.topic .topic-anchor .topic-anchor-to-left {
+    margin-right: 10px;
+}
+.topic .topic-anchor .topic-anchor-to-left .anchor-arrow-body {
+    display: block;
+}
+.topic .topic-anchor .topic-anchor-to-right {
+    margin-left: 10px;
+}
+.topic .topic-anchor .topic-anchor-to-right .anchor-arrow-body {
+    display: block;
+}
+.topic .topic-anchor .topic-anchor-body {
+    width: 1140px;
+    padding: 0 15px;
+    height: 90px;
+    border-radius: 15px;
+    background-color: white;
+    display: flex;
+}
+.topic .topic-anchor .topic-anchor-body .topic-anchor-item {
+    height: 90px;
+    width: 150px;
+    color: #333333;
+    font-size: 12px;
+    transition: border-bottom-color 0.5s;
+    border-bottom: 2px transparent solid;
+    cursor: pointer;
+}
+.topic .topic-anchor .topic-anchor-body .topic-anchor-item:hover {
+    border-bottom: 2px #1475fa solid;
+}
+.topic .topic-anchor .topic-anchor-body .topic-anchor-item .anchor-item-body {
+    display: flex;
+    margin: 27px 0;
+    justify-content: center;
+    border-left: #dddddd 1px solid;
+    border-right: #dddddd 1px solid;
+}
+.topic .topic-anchor .topic-anchor-body .topic-anchor-item .anchor-item-body .topic-anchor-item-img img {
+    width: 34px;
+    height: 34px;
+}
+.topic .topic-anchor .topic-anchor-body .topic-anchor-item .anchor-item-body .topic-anchor-item-text {
+    line-height: 36px;
+    padding-left: 10px;
+}
+.topic .topic-body {
+    width: 1170px;
+    margin: 0 auto;
+    padding-top: 35px;
+}
+.topic .topic-body .topic-body-list {
+    border-radius: 20px;
+}
+.topic .topic-body .topic-body-list .topic-body-title {
+    padding: 10px 0;
+    text-align: left;
+    font-size: 24px;
+    font-weight: bold;
+    color: #333333;
+}
+.topic .topic-body .topic-body-list .topic-body-items {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+.topic .topic-body .topic-body-list .topic-body-items .topic-body-item {
+    cursor: pointer;
+    text-align: left;
+    color: #333333;
+    padding: 10px 15px;
+    display: flex;
+    flex-wrap: wrap;
+    background: white;
+    margin-bottom: 10px;
+    border-radius: 20px;
+    width: 550px;
+    justify-content: space-between;
+}
+.topic .topic-body .topic-body-list .topic-body-items .topic-body-item .topic-body-left {
+    display: flex;
+    flex-wrap: wrap;
+}
+.topic .topic-body .topic-body-list .topic-body-items .topic-body-item .topic-body-left .topic-item-img {
+    height: 120px;
+    overflow: hidden;
+}
+.topic .topic-body .topic-body-list .topic-body-items .topic-body-item .topic-body-left .topic-item-img img {
+    border-radius: 10px;
+    height: 120px;
+    width: 90px;
+}
+.topic .topic-body .topic-body-list .topic-body-items .topic-body-item .topic-body-left .topic-item-text {
+    margin-top: 12px;
+    margin-left: 15px;
+    width: 280px;
+}
+.topic .topic-body .topic-body-list .topic-body-items .topic-body-item .topic-body-left .topic-item-text .topic-item-name {
+    font-size: 16px;
+    font-weight: bold;
+}
+.topic .topic-body .topic-body-list .topic-body-items .topic-body-item .topic-body-left .topic-item-text .topic-item-description {
+    margin: 5px 0;
+    box-sizing: border-box;
+    height: 28px;
+    line-height: 14px;
+    font-size: 12px;
+    color: #999999;
+    width: 280px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+.topic .topic-body .topic-body-list .topic-body-items .topic-body-item .topic-body-left .topic-item-text .topic-item-num {
+    display: flex;
+    height: 20px;
+    line-height: 20px;
+}
+.topic .topic-body .topic-body-list .topic-body-items .topic-body-item .topic-body-left .topic-item-text .topic-item-num .topic-item-price {
+    color: #df1e1c;
+    font-size: 18px;
+}
+.topic .topic-body .topic-body-list .topic-body-items .topic-body-item .topic-body-left .topic-item-text .topic-item-num .topic-item-price:before {
+    content: "￥";
+}
+.topic .topic-body .topic-body-list .topic-body-items .topic-body-item .topic-body-left .topic-item-text .topic-item-num .topic-item-originalPrice {
+    margin-left: 8px;
+    text-decoration: line-through;
+    color: #999999;
+    font-size: 12px;
+}
+.topic .topic-body .topic-body-list .topic-body-items .topic-body-item .topic-body-left .topic-item-text .topic-item-num .topic-item-originalPrice:before {
+    content: "￥";
+}
+.topic .topic-body .topic-body-list .topic-body-items .topic-body-item .topic-body-left .topic-item-text .topic-item-num .topic-item-discountPercentage {
+    margin-left: 8px;
+    color: white;
+    background: #df1e1c;
+    font-size: 12px;
+    padding: 0 5px;
+}
+.topic .topic-body .topic-body-list .topic-body-items .topic-body-item .topic-body-left .topic-item-text .topic-item-num .topic-item-discountPercentage:before {
+    content: "- ";
+}
+.topic .topic-body .topic-body-list .topic-body-items .topic-body-item .topic-body-left .topic-item-text .topic-item-num .topic-item-discountPercentage:after {
+    content: "%";
+}
+.topic .topic-body .topic-body-list .topic-body-items .topic-body-item .topic-body-right .topic-item-btn {
+    display: none;
+    margin: 40px auto;
+    border-radius: 10px;
+    background-color: rgb(255, 255, 255);
+    text-align: center;
+    line-height: 40px;
+    color: black;
+    height: 40px;
+    width: 100px;
+    transition: background-color 0.3s ease;
+}
+.topic .topic-body .topic-body-list .topic-body-items .topic-body-item:hover .topic-body-right .topic-item-btn {
+    background-color: rgb(45, 151, 255);
+    display: block;
+    color: white;
+}

file/resources/image/suspension/app_android_download.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="26" height="26">
+    <defs>
+        <clipPath id="android-icon_svg__a">
+            <rect width="26" height="26" rx="0"></rect>
+        </clipPath>
+    </defs>
+    <g clip-path="url(#android-icon_svg__a)">
+        <path
+                d="M23.131 8.131c-.919 0-1.68.728-1.68 1.612v6.267c0 .884.735 1.612 1.68 1.612.919 0 1.68-.728 1.68-1.613V9.743a1.674 1.674 0 0 0-1.68-1.611Zm-20.27 0c-.918 0-1.68.728-1.68 1.611v6.268c0 .884.735 1.612 1.68 1.612.946 0 1.681-.728 1.681-1.613V9.743c0-.884-.735-1.611-1.68-1.611Zm2.705.052V19.65c0 .675.578 1.247 1.313 1.247h1.497v3.484c0 .885.734 1.613 1.68 1.613.919 0 1.68-.728 1.68-1.613v-3.484h2.626v3.484c0 .885.735 1.613 1.68 1.613.918 0 1.68-.728 1.68-1.613v-3.484h1.497c.735 0 1.313-.546 1.313-1.247V8.182H5.566v.001ZM16.54 2.254 17.933.382c.052-.13.052-.286-.08-.338-.105-.078-.262-.026-.34.078l-1.419 1.95a9.22 9.22 0 0 0-3.098-.546c-1.103 0-2.152.182-3.098.546L8.481.122c-.08-.13-.237-.156-.342-.078a.245.245 0 0 0-.053.338l1.392 1.873c-2.179.962-3.728 2.782-3.912 4.914h14.94c-.236-2.133-1.76-3.952-3.965-4.915ZM9.846 5.22c-.473 0-.814-.338-.814-.78 0-.443.367-.78.814-.78.473 0 .813.337.813.78 0 .442-.367.78-.813.78Zm6.406 0c-.473 0-.814-.338-.814-.78 0-.443.368-.78.814-.78.473 0 .814.337.814.78 0 .442-.367.78-.814.78Z"
+                fill="currentColor"></path>
+    </g>
+</svg>

file/resources/image/suspension/app_ios_download.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="26" height="26">
+    <defs>
+        <clipPath id="ios-icon_svg__a">
+            <rect width="26" height="26" rx="0"></rect>
+        </clipPath>
+    </defs>
+    <g clip-path="url(#ios-icon_svg__a)">
+        <path
+                d="M20.096 13.815c-.032-3.293 2.686-4.872 2.807-4.95-1.528-2.236-3.907-2.541-4.754-2.577-2.025-.205-3.95 1.192-4.978 1.192-1.025 0-2.61-1.162-4.29-1.131-2.207.032-4.242 1.283-5.378 3.26-2.293 3.978-.588 9.872 1.647 13.1 1.092 1.579 2.395 3.353 4.104 3.29 1.646-.066 2.27-1.066 4.26-1.066 1.99 0 2.55 1.065 4.292 1.033 1.771-.034 2.894-1.61 3.979-3.194 1.253-1.832 1.77-3.607 1.8-3.698-.039-.018-3.455-1.326-3.489-5.26Zm-3.273-9.663C17.73 3.05 18.343 1.523 18.176 0c-1.308.054-2.892.871-3.83 1.969-.841.974-1.578 2.529-1.38 4.022 1.46.114 2.948-.741 3.857-1.84Z"
+                fill="currentColor"></path>
+    </g>
+</svg>

file/resources/image/suspension/collection.svg

@@ -0,0 +1,10 @@
+<svg width="26" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g fill="currentClor">
+        <path fill="currentColor"
+              d="M6.2 23.85c-.394 0-.787-.113-1.069-.338-.562-.393-.843-1.125-.73-1.8l1.068-6.243c0-.056 0-.113-.056-.169L.856 10.856a1.855 1.855 0 0 1-.45-1.912c.225-.675.788-1.182 1.52-1.238l6.243-.9a.121.121 0 0 0 .112-.112l.62-1.181c.224-.394.73-.563 1.124-.394.394.225.563.731.394 1.125L9.8 7.425c-.281.563-.787.9-1.406 1.013l-6.244.956a.121.121 0 0 0-.112.112c0 .056 0 .113.056.169l4.556 4.444c.45.45.619 1.012.506 1.631l-1.125 6.244c0 .056 0 .112.057.169.056.056.112.056.168 0l5.625-2.982a1.908 1.908 0 0 1 1.744 0l5.625 2.982c.056.056.113.056.169 0 .056-.057.056-.113.056-.17l-1.069-6.243a1.753 1.753 0 0 1 .563-1.631l1.237-1.238a.816.816 0 0 1 1.182 0 .816.816 0 0 1 0 1.181L20.15 15.3c-.056.056-.056.112-.056.169l1.069 6.243c.112.675-.17 1.407-.732 1.8-.562.394-1.35.45-1.968.17l-5.625-2.926h-.17l-5.624 2.982a3.83 3.83 0 0 1-.844.112Z"
+              class="collect_svg__collect1"></path>
+        <path fill="currentColor"
+              d="M22.625 12.544a.904.904 0 0 1-.618-.282.816.816 0 0 1 0-1.18l1.462-1.407s.056-.056.056-.169c0-.056-.056-.112-.225-.168l-6.3-.9c-.562-.057-1.068-.45-1.35-1.013l-2.756-5.681c-.056-.113-.225-.113-.281 0l-1.069 2.194c-.225.393-.731.562-1.125.393-.394-.225-.562-.731-.394-1.125l1.07-2.193A1.898 1.898 0 0 1 12.781 0c.73 0 1.35.394 1.687 1.012l2.813 5.682c0 .056.056.056.056.112l6.244.9c.73.113 1.35.619 1.575 1.294.225.675.056 1.406-.45 1.856l-1.463 1.406a.903.903 0 0 1-.619.282Z"
+              class="collect_svg__collect2"></path>
+    </g>
+</svg>

file/resources/image/suspension/orderSelect.svg

@@ -0,0 +1,13 @@
+<svg width="24" height="23" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#queryicon_svg__a)" fill="currentColor">
+        <path
+                d="M15.82 8.31H7.199c-.527 0-.958.413-.958.918 0 .505.43.918.958.918h8.623c.527 0 .958-.413.958-.918 0-.505-.431-.919-.958-.919Zm0 3.672H7.199c-.527 0-.958.413-.958.918 0 .505.43.918.958.918h8.623c.527 0 .958-.413.958-.918 0-.505-.431-.918-.958-.918Zm-2.874 3.673H7.198c-.527 0-.958.413-.958.918 0 .505.43.918.958.918h5.748c.527 0 .958-.413.958-.918 0-.505-.43-.918-.958-.918Z"></path>
+        <path
+                d="M19.21 1.882h-1.162C17.653.815 16.587.046 15.34.046H8.634c-1.257 0-2.31.769-2.706 1.836h-1.09c-1.317 0-2.395 1.033-2.395 2.296v16.527C2.443 21.967 3.52 23 4.838 23H19.21c1.33 0 2.396-1.033 2.396-2.295V4.178c0-1.274-1.078-2.296-2.396-2.296Zm-10.576-.23h6.707c.659 0 1.198.517 1.198 1.148 0 .632-.54 1.148-1.198 1.148H8.634c-.658 0-1.197-.516-1.197-1.148 0-.63.539-1.147 1.197-1.147Zm11.054 19.053a.47.47 0 0 1-.479.459H4.84a.47.47 0 0 1-.48-.46V4.179a.47.47 0 0 1 .48-.46h1.089c.395 1.068 1.461 1.837 2.706 1.837h6.707c1.246 0 2.312-.77 2.707-1.836h1.161a.47.47 0 0 1 .48.459v16.527Z"></path>
+    </g>
+    <defs>
+        <clipPath id="queryicon_svg__a">
+            <path fill="#fff" d="M0 0h24v23H0z"></path>
+        </clipPath>
+    </defs>
+</svg>

file/resources/image/suspension/phoneVersion.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="23" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+            d="M3.143 0h13.714A3.153 3.153 0 0 1 20 3.163v16.674A3.153 3.153 0 0 1 16.857 23H3.143A3.153 3.153 0 0 1 0 19.837V3.163A3.153 3.153 0 0 1 3.143 0Zm0 1.725a1.42 1.42 0 0 0-1.01.421 1.438 1.438 0 0 0-.419 1.017v16.674a1.445 1.445 0 0 0 .419 1.017 1.43 1.43 0 0 0 1.01.421h13.714a1.422 1.422 0 0 0 1.32-.887c.072-.175.109-.362.109-.55V3.162a1.445 1.445 0 0 0-.419-1.017 1.428 1.428 0 0 0-1.01-.421H3.143ZM7.714 18.4a.855.855 0 0 1-.606-.253.865.865 0 0 1 0-1.22.855.855 0 0 1 .606-.252h4.572c.227 0 .445.09.606.253a.865.865 0 0 1-.606 1.472H7.714Z"
+            fill="currentColor"></path>
+</svg>

file/resources/image/suspension/toTop.svg

@@ -0,0 +1,4 @@
+<svg data-v-5620823b="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path fill="currentColor"
+          d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path>
+</svg>

file/resources/js/Detail.js

@@ -0,0 +1,159 @@
+var purchaseQuantity = 1
+var areaId = 0
+
+function init(skuHistoricalPrice, skuPrice) {
+    var priceInput = document.getElementById("irpc-input")
+    priceInput.addEventListener("input", (e) => {
+        purchaseQuantity = e.target.value
+        if (purchaseQuantity <= 0) {
+            purchaseQuantity = 1
+        }
+        if (purchaseQuantity > 999) {
+            purchaseQuantity = 999
+        }
+
+    })
+
+
+    var pchp = document.getElementById("price-calc-historical-price")
+    var pcp = document.getElementById("price-calc-price")
+
+
+    setInterval(() => {
+        priceInput.value = purchaseQuantity
+        //计算价格
+        if (pchp) {
+            pchp.innerText = (skuHistoricalPrice * purchaseQuantity).toFixed(2)
+        }
+        if (pcp) {
+            pcp.innerText = (skuPrice * purchaseQuantity).toFixed(2)
+        }
+    }, 100)
+}
+
+// 购买数量减
+function purchaseQuantityAdd() {
+    if (purchaseQuantity >= 999) {
+        purchaseQuantity = 999
+        return
+    }
+    purchaseQuantity++;
+}
+
+// 购买数量减
+function purchaseQuantityMinus() {
+    if (purchaseQuantity <= 1) {
+        purchaseQuantity = 1
+        return
+    }
+    purchaseQuantity--;
+}
+
+function GetAreaById(areaId) {
+    let areaEles = document.getElementsByClassName("info-left-select-btn")
+    for (let i = 0; i < areaEles.length; i++) {
+        if (areaEles[i].getAttribute("areaId") == areaId) {
+            areaEles[i].style.backgroundColor = "rgb(199, 199, 199)"
+        } else {
+            areaEles[i].style.backgroundColor = ""
+        }
+    }
+
+
+
+
+    console.log(areaId)
+    let eles = document.getElementsByClassName("info-left-select-param-btn");
+    for (let i = 0; i < eles.length; i++) {
+        if (eles[i].getAttribute("areaId") == areaId) {
+            eles[i].style = ""
+        } else {
+            eles[i].style.display = "none"
+        }
+    }
+    return areaId
+}
+
+
+function RouterJumpId(id) {
+    window.location.href = "?skuId=" + id
+
+}
+//TODO a
+function orderSubmit() {
+
+    const data = {
+        skuId: skuData.id,
+        count: purchaseQuantity,
+        //优惠券
+        couponUserId: 0,
+        //联系信息
+        contactInformation: ""
+    };
+
+    fetch('/api/order/submit', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+    })
+        .then(response => response.json())
+        .then(data => {
+            console.log('Success:', data);
+            alert("假装购买成功");
+        })
+        .catch((error) => {
+            console.error('Error:', error);
+            alert("购买失败");
+        });
+}
+
+let selectIndex = 0;
+let nowSku = { Price: 100, SkuImage: "path/to/image", SkuName: "SKU 名称", HistoricalPrices: 120 }; // Example data
+let count = 1;
+let goodsName = "商品名称"; // Example data
+
+function closeView() {
+    document.querySelector(".order-buy-curtain").style.display = "none";
+}
+
+function selectPayMethod(index) {
+    selectIndex = index;
+    document.querySelectorAll(".order-buy-pay-item").forEach((item, idx) => {
+        item.style.backgroundColor = idx === index ? "#cccccc" : "#dddddd";
+    });
+    updatePaySelectPosition();
+    document.getElementById("test-purchase").style.display = index === 2 ? "flex" : "none";
+}
+
+function updatePaySelectPosition() {
+    const select = document.getElementById("pay-select");
+    const wxColor = "rgba(0, 168, 242, 1)";
+    const zfbColor = "rgba(1, 183, 0, 1)";
+    const pyColor = "rgba(234, 98, 0, 1)";
+    let bc = "";
+    switch (selectIndex) {
+        case 0:
+            bc = wxColor;
+            break;
+        case 1:
+            bc = zfbColor;
+            break;
+        case 2:
+            bc = pyColor;
+            break;
+    }
+    select.style.left = 10 + (selectIndex * (10 + 340 / 3)) + "px";
+    select.style.borderColor = bc;
+}
+
+function orderTest() {
+    console.log("Test order submitted");
+    alert("假装购买成功");
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+    selectPayMethod(0); // Set default selection
+});
+

file/resources/js/handler.js

@@ -0,0 +1,361 @@
+const routerArray = [{
+    path: '/', name: '首页',
+}]
+const handler = {
+    routerArray, JumpRouter, getToken, setToken, GetUserInfo
+}
+var loginState = false;
+
+//=======================链接跳转
+function JumpRouter(url, query) {
+    if (query) {
+        window.location.href = url + "?routerlink=" + query;
+    } else {
+        window.location.href = url
+    }
+}
+
+function getToken() {
+    return localStorage.getItem("token");
+}
+
+function setToken(value) {
+    localStorage.setItem("token", value);
+    console.log("token set", getToken())
+}
+
+function GetUserInfo() {
+    console.log("获取用户信息")
+    fetch('/api/user/info', {
+        method: 'GET', headers: {
+            // 'Content-Type': 'application/json',
+            "auth-sign": getToken()
+        }, // body: JSON.stringify(data)
+    })
+        .then(response => response.json())
+        .then(data => {
+            if (data.code !== 200) {
+                loginState = false;
+                //头像修改
+                document.getElementById("not-login").style.display = "black";
+                document.getElementById("logged-in").style.display = "none";
+                //用户名称
+                document.getElementById("login-name").innerText = "登录";
+            } else {
+                //导航栏头像处理
+                if (data.data.avatar) {
+                    document.getElementById("not-login").style.display = "none";
+                    let logged = document.getElementById("logged-in");
+                    logged.style.display = "block"
+                    logged.src = data.data.avatar;
+                } else {
+                    document.getElementById("not-login").style.display = "black";
+                    document.getElementById("logged-in").style.display = "none";
+                }
+                // 导航栏名字问题
+                document.getElementById("login-name").innerText = data.data.name;
+                loginState = true;
+            }
+        })
+        .catch((error) => {
+            loginState = false;
+            //头像修改
+            document.getElementById("not-login").style.display = "black";
+            document.getElementById("logged-in").style.display = "none";
+            //用户名称
+            document.getElementById("login-name").innerText = "登录";
+            console.error('Error:', error);
+            // alert("获取登录信息失败");
+        });
+
+}
+
+function clickAvatar() {
+    if (loginState) {
+        //已经登录的，进入管理页面
+        JumpRouter("/manage/info");
+    } else {
+        let loginBody = document.getElementById("login-body");
+        let loginCenter = document.getElementById("login-center");
+        let registerCenter = document.getElementById("register-center");
+        loginBody.style.display = "";
+        loginCenter.style.display = "";
+        registerCenter.style.display = "none"
+    }
+}
+
+function closeLoginBody() {
+    console.log(6666666666)
+    let loginBody = document.getElementById("login-body");
+    let loginCenter = document.getElementById("login-center");
+    let registerCenter = document.getElementById("register-center");
+    loginBody.style.display = "none";
+    loginCenter.style.display = "none";
+    registerCenter.style.display = "none"
+
+
+}
+
+function openLoginBody(type) {
+    if (type === "register") {
+        let loginBody = document.getElementById("login-body");
+        let loginCenter = document.getElementById("login-center");
+        let registerCenter = document.getElementById("register-center");
+        loginBody.style.display = "";
+        loginCenter.style.display = "none";
+        registerCenter.style.display = ""
+    } else if (type === "login") {
+        let loginBody = document.getElementById("login-body");
+        let loginCenter = document.getElementById("login-center");
+        let registerCenter = document.getElementById("register-center");
+        loginBody.style.display = "";
+        loginCenter.style.display = "";
+        registerCenter.style.display = "none"
+    }
+}
+
+//登录
+document.addEventListener('DOMContentLoaded', () => {
+    const selectType = 'email';
+    const phoneTab = document.getElementById('phone-tab');
+    const emailTab = document.getElementById('email-tab');
+    const wxTab = document.getElementById('wx-tab');
+    const phoneSection = document.getElementById('phone-section');
+    const emailSection = document.getElementById('email-section');
+    const wxSection = document.getElementById('wx-section');
+    const selectBar = document.getElementById('select-bar');
+
+    const sendCodeBtn = document.getElementById('send-code-btn');
+    const phoneLoginBtn = document.getElementById('phone-login-btn');
+
+    const emailLoginBtn = document.getElementById('email-login-btn');
+    const refreshWxCode = document.getElementById('refresh-wx-code');
+
+    function setType(type) {
+        phoneSection.style.display = 'none';
+        emailSection.style.display = 'none';
+        wxSection.style.display = 'none';
+
+        if (type === 'phone') {
+            phoneSection.style.display = 'block';
+
+            selectBar.style.marginLeft = '-200px';
+        } else if (type === 'email') {
+            emailSection.style.display = 'block';
+            selectBar.style.marginLeft = '0';
+        } else if (type === 'wx') {
+            wxSection.style.display = 'block';
+            selectBar.style.marginLeft = '200px';
+        }
+    }
+
+    phoneTab.addEventListener('click', () => setType('phone'));
+    emailTab.addEventListener('click', () => setType('email'));
+    wxTab.addEventListener('click', () => setType('wx'));
+
+    function showTip(msg) {
+        alert(msg);
+    }
+
+    function validateEmail(email) {
+        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return re.test(String(email).toLowerCase());
+    }
+
+    function validatePhone(phone) {
+        const re = /^1[3-9]\d{9}$/;
+        return re.test(String(phone));
+    }
+
+    function validateCode(code) {
+        const re = /^\d{6}$/;
+        return re.test(String(code));
+    }
+
+
+    sendCodeBtn.addEventListener('click', () => {
+        const phone = document.getElementById('phone-input').value;
+        if (!validatePhone(phone)) {
+            showTip('手机号格式错误');
+            return;
+        }
+        fetch("/api/user/loginCode", {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                phone: phone
+            })
+        })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok ' + response.statusText);
+                }
+                return response.json();
+            })
+            .then(data => {
+                if (data.success) {
+                    console.log('Verification code sent successfully:', data);
+                } else {
+                    console.error('Failed to send verification code:', data.message);
+                }
+            })
+            .catch(error => {
+                console.error('There has been a problem with your fetch operation:', error);
+            });
+        alert('验证码已发送');
+
+
+    });
+
+    phoneLoginBtn.addEventListener('click', () => {
+        const phone = document.getElementById('phone-input').value;
+        const code = document.getElementById('phone-code-input').value;
+        if (!validatePhone(phone)) {
+            showTip('手机号格式错误');
+            return;
+        }
+        if (!validateCode(code)) {
+            showTip('验证码错误');
+            return;
+        }
+        fetch("/api/user/login", {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                username: phone,
+                password: code,
+                type: "phone"
+            })
+        }).then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok ' + response.statusText);
+            }
+            return response.json();
+        }).then(data => {
+            if (data.code === 200) {
+                setToken(data.data.token)
+                //刷新页面
+                window.location.reload();
+            } else {
+                alert(data.msg)
+            }
+        }).catch(error => {
+            console.error('There has been a problem with your fetch operation:', error);
+        });
+
+
+        alert('手机号登录成功');
+    });
+
+    emailLoginBtn.addEventListener('click', () => {
+        const email = document.getElementById('email-input').value;
+        const password = document.getElementById('email-password-input').value;
+        if (!validateEmail(email)) {
+            showTip('邮箱格式错误');
+            return;
+        }
+        if (password.length < 6) {
+            showTip('密码过短');
+            return;
+        }
+        //TODO 邮箱登录
+        alert('邮箱登录成功');
+    });
+
+    refreshWxCode.addEventListener('click', () => {
+        console.log('二维码已刷新');
+    });
+
+    setType(selectType);
+});
+//注册
+document.addEventListener('DOMContentLoaded', () => {
+    const username = document.getElementById('username');
+    const password = document.getElementById('password');
+    const requirePassword = document.getElementById('requirePassword');
+    const phone = document.getElementById('phone');
+    const code = document.getElementById('code');
+    const sendCodeBtn = document.getElementById('send-register-code');
+    const registerBtn = document.getElementById('register-btn');
+
+    let awaitCode = 0;
+
+    function showTip(msg) {
+        alert(msg);
+    }
+
+    function validateEmail(email) {
+        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return re.test(String(email).toLowerCase());
+    }
+
+    function validatePhone(phone) {
+        const re = /^1[3-9]\d{9}$/;
+        return re.test(String(phone));
+    }
+
+    function validatePassword(password) {
+        const re = /^[a-zA-Z0-9,./<>?;'\\:"|\[\]{}~!@#$%^&*()_+=-]{6,32}$/;
+        return re.test(String(password));
+    }
+
+    function validateCode(code) {
+        const re = /^[0-9]{6}$/;
+        return re.test(String(code));
+    }
+
+    sendCodeBtn.addEventListener('click', () => {
+        if (awaitCode === 0) {
+            const phoneVal = phone.value;
+            if (!validatePhone(phoneVal)) {
+                showTip('手机号格式错误');
+                return;
+            }
+            alert('验证码已发送');
+            awaitCode = 5;
+            const interval = setInterval(() => {
+                awaitCode--;
+                sendCodeBtn.textContent = awaitCode > 0 ? `${awaitCode}s` : '发送验证码';
+                if (awaitCode === 0) {
+                    clearInterval(interval);
+                }
+            }, 1000);
+        }
+    });
+
+    registerBtn.addEventListener('click', () => {
+        const usernameVal = username.value;
+        const passwordVal = password.value;
+        const requirePasswordVal = requirePassword.value;
+        const phoneVal = phone.value;
+        const codeVal = code.value;
+
+        if (!validateEmail(usernameVal)) {
+            showTip('邮箱格式错误');
+            return;
+        }
+        if (!validatePassword(passwordVal)) {
+            showTip('密码格式错误');
+            return;
+        }
+        if (passwordVal !== requirePasswordVal) {
+            showTip('两次密码不一致');
+            return;
+        }
+        if (!validatePhone(phoneVal)) {
+            showTip('手机号格式错误');
+            return;
+        }
+        if (!validateCode(codeVal)) {
+            showTip('验证码错误');
+            return;
+        }
+
+        alert('注册成功');
+        // Here you can make an API request to register the user
+    });
+});

file/resources/js/index.js

@@ -0,0 +1,169 @@
+window.addEventListener('scroll', handleScroll, true)
+
+function handleScroll() {
+    if (window.scrollY > 100) {
+        document.getElementsByClassName('handler-app-android-download').item(0).className = "handler-app-android-download"
+        document.getElementsByClassName("handler-to-top").item(0).style.display = "block"
+    } else {
+        document.getElementsByClassName('handler-app-android-download').item(0).className = "handler-app-android-download handler-item-bottom"
+        document.getElementsByClassName("handler-to-top").item(0).style.display = "none"
+    }
+}
+
+function ToTop() {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+    })
+}
+
+//todo 首页轮播图
+window.onload = function () {
+    var items = document.getElementsByClassName("item");
+    var circles = document.getElementsByClassName("circle");
+    var leftBtn = document.getElementById("btn-left");
+    var rightBtn = document.getElementById("btn-right");
+    var content = document.querySelector('.content');
+    var index = 0;
+    var timer = null;
+
+//清除class
+    var clearclass = function () {
+        for (let i = 0; i < items.length; i++) {
+            items[i].className = "item";
+            circles[i].className = "circle";
+            circles[i].setAttribute("num", i);
+        }
+    }
+
+    /*只显示一个class*/
+    function move() {
+        clearclass();
+        items[index].className = "item active";
+        circles[index].className = "circle white";
+    }
+
+//点击右边按钮切换下一张图片
+    rightBtn.onclick = function () {
+        if (index === items.length - 1) {
+            index = 0;
+        } else {
+            index++
+        }
+        move();
+    }
+//点击左边按钮切换上一张图片
+    leftBtn.onclick = function () {
+        if (index === 0) {
+            index = items.length - 1;
+        } else {
+            index--
+        }
+        move();
+    }
+//开始定时器，点击右边按钮，实现轮播
+    rightBtn.onclick();
+    timer = setInterval(function () {
+        rightBtn.onclick();
+    }, 3000)
+//点击圆点时，跳转到对应图片
+    for (var i = 0; i < circles.length; i++) {
+        circles[i].addEventListener("click", function () {
+            var point_index = this.getAttribute("num");
+            index = point_index;
+            move();
+        })
+
+    }
+//鼠标移入清除定时器，并开启一个三秒的定时器，使慢慢转动
+    content.onmouseover = function () {
+        clearInterval(timer);
+        timer = setInterval(function () {
+            rightBtn.onclick();
+        }, 3000)
+    }
+//鼠标移出又开启定时器
+    content.onmouseleave = function () {
+        clearInterval(timer);
+        timer = setInterval(function () {
+            rightBtn.onclick();
+        }, 1500)
+    }
+}
+
+var CardListElements = null
+
+//初始化加载 topic列表
+function TopicListShowLoad() {
+    CardListElements = document.getElementsByClassName("card-list");
+    for (let i = 0; i < CardListElements.length; i++) {
+        let goodsInfoEles = CardListElements[i].getElementsByClassName("goods-info")
+        for (let i = 0; i < goodsInfoEles.length; i++) {
+            if (goodsInfoEles[i].getAttribute("index") > 12) {
+                goodsInfoEles[i].style.display = "none";
+            }
+        }
+        let showEle = CardListElements[i].getElementsByClassName("card-show")
+        if (!showEle || showEle.length === 0) {
+            continue
+        }
+        let linkElement = showEle.item(0).getElementsByTagName("a").item(0);
+        linkElement.addEventListener("click", (e) => {
+            if (linkElement.getAttribute("show")==="true") {
+                linkElement.setAttribute("show", "false");
+                linkElement.innerHTML = "查看更多";
+                for (let i = 0; i < goodsInfoEles.length; i++) {
+                    if (goodsInfoEles[i].getAttribute("index") > 12) {
+                        goodsInfoEles[i].style.display = "none";
+                    }
+                }
+            } else {
+                linkElement.setAttribute("show", "true");
+                linkElement.innerHTML = "收起";
+                for (let i = 0; i < goodsInfoEles.length; i++) {
+                    if (goodsInfoEles[i].getAttribute("index") > 12) {
+                        goodsInfoEles[i].style.display = "inline-block";
+                    }
+                }
+            }
+        })
+    }
+
+    // let goodsInfoEles = document.getElementsByClassName("goods-info");
+    // for (let i = 0; i < goodsInfoEles.length; i++) {
+    //     if (goodsInfoEles[i].getAttribute("index") > 12) {
+    //         goodsInfoEles[i].style.display = "none";
+    //     }
+    // }
+
+
+}
+
+// fetch('/api/order/submit', {
+//     method: 'POST',
+//     headers: {
+//         'Content-Type': 'application/json'
+//     },
+//     body: JSON.stringify(data)
+// })
+//     .then(response => response.json())
+//     .then(data => {
+//         console.log('Success:', data);
+//         alert("假装购买成功");
+//     })
+//     .catch((error) => {
+//         console.error('Error:', error);
+//         alert("购买失败");
+//     });
+
+
+
+
+
+
+
+
+
+
+handleScroll()
+TopicListShowLoad()

file/static/detail.html

@@ -3,9 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <title>详情</title>
-    <link rel="stylesheet" href="../assets/css/index.css">
-    <link rel="stylesheet" href="../assets/css/detail.css">
-    <script src="../assets/js/handler.js"></script>
+    <link rel="stylesheet" href="/api/static//css/index.css">
+    <link rel="stylesheet" href="/api/static/css/detail.css">
+    <script src="/api/static/js/handler.js"></script>
 </head>
 <body>
 
@@ -13,7 +13,7 @@
     <div class="nav-body">
         <!--      <router-link to="/" class="nav-logo">-->
         <div class="nav-logo">
-            <img src="../assets/image/logo.png" alt="logo" onclick="JumpRouter('/','')"/>
+            <img src="/api/static/image/logo.png" alt="logo" onclick="JumpRouter('/','')"/>
         </div>
         <!--        <button onclick="setToken('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MTg3ODIzOTMsImlzcyI6IjEifQ.b6tID6zWsYtMKnxen0ZuGBpsSE2bpupAHYf80WsH2gQ')">-->
         <!--            首页-->
@@ -179,7 +179,7 @@
         <div class="goods-show-info">
             <div class="goods-show-body">
                 <div class="goods-show-img">
-                    <!--            <img src="../assets/goods-img.jpg" alt="" width="180" height="240"/>-->
+                    <!--            <img src="/api/static/goods-img.jpg" alt="" width="180" height="240"/>-->
                     <img src="{{.sku.skuImage}}" alt="" width="180" height="240"/>
                 </div>
                 <div class="goods-show-text">
@@ -464,7 +464,7 @@
             </div>
         </div>
     </div>
-    {{toJson .sku}}
+
     <div class="bottom-bar">
         <!--    合作伙伴-->
         <div class="partners">
@@ -474,33 +474,33 @@
                         <img style="transform: rotate(180deg);"
                              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAAXNSR0IArs4c6QAAAhdJREFUSEulVU1rE1EUPdfEgBAIg27UjT+jS13pTpeKriMxRQxJ3hukBnc2ZUwiLUFGxRbbKqZ/Rve+2bswkSB13jDvygtJSZPJl5nlzJz7zr33nPNISlmL4/it53k/seJDQoh3RMRKqc1Op6NXwZOU8j6ABoATrfXLZrP5a9kCVC6Xr6TT6a8ANpj5Y6/Xe+b7frRMAbI/SSkLANoALG1Pa/16GQYDcLFYvJzNZr8DuAbgFMBxGIaVVqvVm8dgAM7n8xcdx3kDwDIAM4dE1FZKufOGOADbp1Kp3EylUkfD0+0rzczvoyh6MauFM3ChUHByudwxM98ZFWRm28JeEARbSQzOwMPBPQLwaaLP0Bizz8y1SSGdA5dKpUuZTOYHgKsTBf4C+KKUejzO4BzYAlzX3WXmJwAuTBQYrLHb7e74vv/bfpsCCyE2iOgzgBsJazq1QjLGCM/z/iSd7Bhjdono4Ywd2xYa/X7/1RTYAoQQ94hoH0BuVgFjzEkiWEp5F8DBPLA10jzaDxKGZonMpr3EwD4YY9zEgUkp94YaT1qV9f12vV6fXtVaIpFSJsnT6vswjuOtmfJ0XddhZiuO22PrsaJoB0HwfK4xhBC3iOhwZUuuFQbDGPoG4PoohrTWYlGOjQKwaE0/DMBGGIb1Rfk1cNVa0SuEsO7ZAXAURdH2IqrjRhldN7FS6unK1021Wq0x839ddP8AAxJAzJtS4CsAAAAASUVORK5CYII="/>
                     </li>
-                    <!--          <li v-for="index in 9"><div><img src="../assets/steam-partners.png" alt=""></div></li>-->
+                    <!--          <li v-for="index in 9"><div><img src="/api/static/steam-partners.png" alt=""></div></li>-->
                     <li>
-                        <div><img src="../assets/image/footer/footer-slider-steam.png" alt=""></div>
+                        <div><img src="/api/static/image/footer/footer-slider-steam.png" alt=""></div>
                     </li>
                     <li>
-                        <div><img src="../assets/image/footer/footer-slider-google.png" alt=""></div>
+                        <div><img src="/api/static/image/footer/footer-slider-google.png" alt=""></div>
                     </li>
                     <li>
-                        <div><img src="../assets/image/footer/footer-slider-tencent.png" alt=""></div>
+                        <div><img src="/api/static/image/footer/footer-slider-tencent.png" alt=""></div>
                     </li>
                     <li>
-                        <div><img src="../assets/image/footer/footer-slider-microsoft.png" alt=""></div>
+                        <div><img src="/api/static/image/footer/footer-slider-microsoft.png" alt=""></div>
                     </li>
                     <li>
-                        <div><img src="../assets/image/footer/footer-slider-garena.png" alt=""></div>
+                        <div><img src="/api/static/image/footer/footer-slider-garena.png" alt=""></div>
                     </li>
                     <li>
-                        <div><img src="../assets/image/footer/footer-slider-ea.png" alt=""></div>
+                        <div><img src="/api/static/image/footer/footer-slider-ea.png" alt=""></div>
                     </li>
                     <li>
-                        <div><img src="../assets/image/footer/footer-slider-riot.png" alt=""></div>
+                        <div><img src="/api/static/image/footer/footer-slider-riot.png" alt=""></div>
                     </li>
                     <li>
-                        <div><img src="../assets/image/footer/footer-slider-pubg.png" alt=""></div>
+                        <div><img src="/api/static/image/footer/footer-slider-pubg.png" alt=""></div>
                     </li>
                     <li>
-                        <div><img src="../assets/image/footer/footer-slider-ubisoft.png" alt=""></div>
+                        <div><img src="/api/static/image/footer/footer-slider-ubisoft.png" alt=""></div>
                     </li>
                     <li>
                         <img
@@ -528,7 +528,7 @@
                     <div class="sg-icon" style="background: rgb(234, 217, 247);">
                         <img
                                 class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                                src="../assets/image/footer/footer-promise-2.png"
+                                src="/api/static/image/footer/footer-promise-2.png"
                                 draggable="false">
                     </div>
                     <div class="sg-info">
@@ -541,7 +541,7 @@
                     <div class="sg-icon" style="background: rgb(245, 221, 231);">
                         <img
                                 class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                                src="../assets/image/footer/footer-promise-3.png"
+                                src="/api/static/image/footer/footer-promise-3.png"
                                 draggable="false">
                     </div>
                     <div class="sg-info">
@@ -554,7 +554,7 @@
                     <div class="sg-icon" style="background: rgb(226, 235, 230);">
                         <img
                                 class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                                src="../assets/image/footer/footer-promise-4.png"
+                                src="/api/static/image/footer/footer-promise-4.png"
                                 draggable="false">
                     </div>
                     <div class="sg-info">
@@ -574,10 +574,10 @@
                     <div class="about-row-item">平日 9:30 - 24:00</div>
                     <div class="about-row-item">周末 9:30 - 24:00</div>
                     <div class="about-row-imgs">
-                        <img src="../assets/image/footer/footer-about-1.png"/>
-                        <img src="../assets/image/footer/footer-about-2.png"/>
-                        <img src="../assets/image/footer/footer-about-3.png"/>
-                        <img src="../assets/image/footer/footer-about-4.png"/>
+                        <img src="/api/static/image/footer/footer-about-1.png"/>
+                        <img src="/api/static/image/footer/footer-about-2.png"/>
+                        <img src="/api/static/image/footer/footer-about-3.png"/>
+                        <img src="/api/static/image/footer/footer-about-4.png"/>
                     </div>
                 </div>
 
@@ -603,39 +603,39 @@
                     我们使用
                 </div>
                 <div class="my-user-images">
-                    <img src="../assets/image/footer/footer-myuse-0.png"/>
-                    <img src="../assets/image/footer/footer-myuse-1.png"/>
-                    <img src="../assets/image/footer/footer-myuse-2.png"/>
-                    <img src="../assets/image/footer/footer-myuse-3.png"/>
-                    <img src="../assets/image/footer/footer-myuse-4.png"/>
-                    <img src="../assets/image/footer/footer-myuse-5.png"/>
-                    <img src="../assets/image/footer/footer-myuse-6.png"/>
-                    <img src="../assets/image/footer/footer-myuse-7.png"/>
-                    <img src="../assets/image/footer/footer-myuse-8.png"/>
-                    <img src="../assets/image/footer/footer-myuse-9.png"/>
-                    <img src="../assets/image/footer/footer-myuse-10.png"/>
-                    <img src="../assets/image/footer/footer-myuse-11.png"/>
-                    <img src="../assets/image/footer/footer-myuse-12.png"/>
-                    <img src="../assets/image/footer/footer-myuse-13.png"/>
-                    <img src="../assets/image/footer/footer-myuse-14.png"/>
-                    <img src="../assets/image/footer/footer-myuse-15.png"/>
+                    <img src="/api/static/image/footer/footer-myuse-0.png"/>
+                    <img src="/api/static/image/footer/footer-myuse-1.png"/>
+                    <img src="/api/static/image/footer/footer-myuse-2.png"/>
+                    <img src="/api/static/image/footer/footer-myuse-3.png"/>
+                    <img src="/api/static/image/footer/footer-myuse-4.png"/>
+                    <img src="/api/static/image/footer/footer-myuse-5.png"/>
+                    <img src="/api/static/image/footer/footer-myuse-6.png"/>
+                    <img src="/api/static/image/footer/footer-myuse-7.png"/>
+                    <img src="/api/static/image/footer/footer-myuse-8.png"/>
+                    <img src="/api/static/image/footer/footer-myuse-9.png"/>
+                    <img src="/api/static/image/footer/footer-myuse-10.png"/>
+                    <img src="/api/static/image/footer/footer-myuse-11.png"/>
+                    <img src="/api/static/image/footer/footer-myuse-12.png"/>
+                    <img src="/api/static/image/footer/footer-myuse-13.png"/>
+                    <img src="/api/static/image/footer/footer-myuse-14.png"/>
+                    <img src="/api/static/image/footer/footer-myuse-15.png"/>
 
                 </div>
             </div>
         </div>
         <div class="bottom-bar-active">
-            <img src="../assets/image/footer/footer-active-0.png"/>
-            <img src="../assets/image/footer/footer-active-1.png"/>
-            <img src="../assets/image/footer/footer-active-2.png"/>
-            <img src="../assets/image/footer/footer-active-3.png"/>
-            <img src="../assets/image/footer/footer-active-4.png"/>
+            <img src="/api/static/image/footer/footer-active-0.png"/>
+            <img src="/api/static/image/footer/footer-active-1.png"/>
+            <img src="/api/static/image/footer/footer-active-2.png"/>
+            <img src="/api/static/image/footer/footer-active-3.png"/>
+            <img src="/api/static/image/footer/footer-active-4.png"/>
         </div>
         <div class="footer-about-box">
-            <img src="../assets/image/logo.png" width="130" height="35">
+            <img src="/api/static/image/logo.png" width="130" height="35">
         </div>
         <div class="footer-about-app">
-            <img src="../assets/image/footer/footer-app-0.png"/>
-            <img src="../assets/image/footer/footer-app-1.png"/>
+            <img src="/api/static/image/footer/footer-app-0.png"/>
+            <img src="/api/static/image/footer/footer-app-1.png"/>
         </div>
 
         <!--    备案-->
@@ -645,7 +645,7 @@
 
     </div>
 </body>
-<script src="../assets/js/Detail.js"></script>
+<script src="/api/static/js/Detail.js"></script>
 
 <script>
     let skuData = JSON.parse("{{toJson .sku}}")

file/static/index.html

@@ -3,10 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
-    <link rel="stylesheet" href="../assets/css/index.css">
-    <link rel="stylesheet" href="../assets/css/carousel.css">
-    <link rel="stylesheet" href="../assets/css/home.css">
-    <script src="../assets/js/handler.js"></script>
+    <link rel="stylesheet" href="/api/static/css/index.css">
+    <link rel="stylesheet" href="/api/static/css/carousel.css">
+    <link rel="stylesheet" href="/api/static/css/home.css">
+    <script src="/api/static/js/handler.js"></script>
 </head>
 <body>
 <div class="nav-top"></div>
@@ -14,7 +14,7 @@
     <div class="nav-body">
         <!--      <router-link to="/" class="nav-logo">-->
         <div class="nav-logo">
-            <img src="../assets/image/logo.png" alt="logo" onclick="JumpRouter('/','')"/>
+            <img src="/api/static/image/logo.png" alt="logo" onclick="JumpRouter('/','')"/>
         </div>
         <!--        <button onclick="setToken('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MTg3ODIzOTMsImlzcyI6IjEifQ.b6tID6zWsYtMKnxen0ZuGBpsSE2bpupAHYf80WsH2gQ')">-->
         <!--            首页-->
@@ -298,7 +298,7 @@
             <ul id="item">
                 {{range $carousel := .carousels }}
                 <li class="item">
-                    <a href="{{$carousel.toId}}"><img src="{{$carousel.imageUrl}}"></a>
+                    <a href="/detail?skuId={{$carousel.toId}}"><img src="{{$carousel.imageUrl}}"></a>
                 </li>
                 {{end}}
             </ul>
@@ -362,7 +362,7 @@
             {{$itemLen := len $item.skus}}
             {{if ne $itemLen 0}}
             {{range $index, $sku := $item.skus}}
-            <div class="goods-info" index="{{$index}}" onclick="JumpRouter('/detail/'+{{$sku.id}})">
+            <div class="goods-info" index="{{$index}}" onclick="JumpRouter('/detail?skuId='+{{$sku.id}})">
                 <!--      //获取图片-->
                 <div class="goods-img"><img src="{{ $sku.skuImage }}" alt=""></div>
                 <div class="goods-name">{{$sku.skuName }}
@@ -405,33 +405,33 @@
                     <img style="transform: rotate(180deg);"
                          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAAXNSR0IArs4c6QAAAhdJREFUSEulVU1rE1EUPdfEgBAIg27UjT+jS13pTpeKriMxRQxJ3hukBnc2ZUwiLUFGxRbbKqZ/Rve+2bswkSB13jDvygtJSZPJl5nlzJz7zr33nPNISlmL4/it53k/seJDQoh3RMRKqc1Op6NXwZOU8j6ABoATrfXLZrP5a9kCVC6Xr6TT6a8ANpj5Y6/Xe+b7frRMAbI/SSkLANoALG1Pa/16GQYDcLFYvJzNZr8DuAbgFMBxGIaVVqvVm8dgAM7n8xcdx3kDwDIAM4dE1FZKufOGOADbp1Kp3EylUkfD0+0rzczvoyh6MauFM3ChUHByudwxM98ZFWRm28JeEARbSQzOwMPBPQLwaaLP0Bizz8y1SSGdA5dKpUuZTOYHgKsTBf4C+KKUejzO4BzYAlzX3WXmJwAuTBQYrLHb7e74vv/bfpsCCyE2iOgzgBsJazq1QjLGCM/z/iSd7Bhjdono4Ywd2xYa/X7/1RTYAoQQ94hoH0BuVgFjzEkiWEp5F8DBPLA10jzaDxKGZonMpr3EwD4YY9zEgUkp94YaT1qV9f12vV6fXtVaIpFSJsnT6vswjuOtmfJ0XddhZiuO22PrsaJoB0HwfK4xhBC3iOhwZUuuFQbDGPoG4PoohrTWYlGOjQKwaE0/DMBGGIb1Rfk1cNVa0SuEsO7ZAXAURdH2IqrjRhldN7FS6unK1021Wq0x839ddP8AAxJAzJtS4CsAAAAASUVORK5CYII="/>
                 </li>
-                <!--          <li v-for="index in 9"><div><img src="../assets/steam-partners.png" alt=""></div></li>-->
+                <!--          <li v-for="index in 9"><div><img src="/api/static/steam-partners.png" alt=""></div></li>-->
                 <li>
-                    <div><img src="../assets/image/footer/footer-slider-steam.png" alt=""></div>
+                    <div><img src="/api/static/image/footer/footer-slider-steam.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="../assets/image/footer/footer-slider-google.png" alt=""></div>
+                    <div><img src="/api/static/image/footer/footer-slider-google.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="../assets/image/footer/footer-slider-tencent.png" alt=""></div>
+                    <div><img src="/api/static/image/footer/footer-slider-tencent.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="../assets/image/footer/footer-slider-microsoft.png" alt=""></div>
+                    <div><img src="/api/static/image/footer/footer-slider-microsoft.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="../assets/image/footer/footer-slider-garena.png" alt=""></div>
+                    <div><img src="/api/static/image/footer/footer-slider-garena.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="../assets/image/footer/footer-slider-ea.png" alt=""></div>
+                    <div><img src="/api/static/image/footer/footer-slider-ea.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="../assets/image/footer/footer-slider-riot.png" alt=""></div>
+                    <div><img src="/api/static/image/footer/footer-slider-riot.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="../assets/image/footer/footer-slider-pubg.png" alt=""></div>
+                    <div><img src="/api/static/image/footer/footer-slider-pubg.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="../assets/image/footer/footer-slider-ubisoft.png" alt=""></div>
+                    <div><img src="/api/static/image/footer/footer-slider-ubisoft.png" alt=""></div>
                 </li>
                 <li>
                     <img
@@ -459,7 +459,7 @@
                 <div class="sg-icon" style="background: rgb(234, 217, 247);">
                     <img
                             class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                            src="../assets/image/footer/footer-promise-2.png"
+                            src="/api/static/image/footer/footer-promise-2.png"
                             draggable="false">
                 </div>
                 <div class="sg-info">
@@ -472,7 +472,7 @@
                 <div class="sg-icon" style="background: rgb(245, 221, 231);">
                     <img
                             class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                            src="../assets/image/footer/footer-promise-3.png"
+                            src="/api/static/image/footer/footer-promise-3.png"
                             draggable="false">
                 </div>
                 <div class="sg-info">
@@ -485,7 +485,7 @@
                 <div class="sg-icon" style="background: rgb(226, 235, 230);">
                     <img
                             class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                            src="../assets/image/footer/footer-promise-4.png"
+                            src="/api/static/image/footer/footer-promise-4.png"
                             draggable="false">
                 </div>
                 <div class="sg-info">
@@ -505,10 +505,10 @@
                 <div class="about-row-item">平日 9:30 - 24:00</div>
                 <div class="about-row-item">周末 9:30 - 24:00</div>
                 <div class="about-row-imgs">
-                    <img src="../assets/image/footer/footer-about-1.png"/>
-                    <img src="../assets/image/footer/footer-about-2.png"/>
-                    <img src="../assets/image/footer/footer-about-3.png"/>
-                    <img src="../assets/image/footer/footer-about-4.png"/>
+                    <img src="/api/static/image/footer/footer-about-1.png"/>
+                    <img src="/api/static/image/footer/footer-about-2.png"/>
+                    <img src="/api/static/image/footer/footer-about-3.png"/>
+                    <img src="/api/static/image/footer/footer-about-4.png"/>
                 </div>
             </div>
 
@@ -534,39 +534,39 @@
                 我们使用
             </div>
             <div class="my-user-images">
-                <img src="../assets/image/footer/footer-myuse-0.png"/>
-                <img src="../assets/image/footer/footer-myuse-1.png"/>
-                <img src="../assets/image/footer/footer-myuse-2.png"/>
-                <img src="../assets/image/footer/footer-myuse-3.png"/>
-                <img src="../assets/image/footer/footer-myuse-4.png"/>
-                <img src="../assets/image/footer/footer-myuse-5.png"/>
-                <img src="../assets/image/footer/footer-myuse-6.png"/>
-                <img src="../assets/image/footer/footer-myuse-7.png"/>
-                <img src="../assets/image/footer/footer-myuse-8.png"/>
-                <img src="../assets/image/footer/footer-myuse-9.png"/>
-                <img src="../assets/image/footer/footer-myuse-10.png"/>
-                <img src="../assets/image/footer/footer-myuse-11.png"/>
-                <img src="../assets/image/footer/footer-myuse-12.png"/>
-                <img src="../assets/image/footer/footer-myuse-13.png"/>
-                <img src="../assets/image/footer/footer-myuse-14.png"/>
-                <img src="../assets/image/footer/footer-myuse-15.png"/>
+                <img src="/api/static/image/footer/footer-myuse-0.png"/>
+                <img src="/api/static/image/footer/footer-myuse-1.png"/>
+                <img src="/api/static/image/footer/footer-myuse-2.png"/>
+                <img src="/api/static/image/footer/footer-myuse-3.png"/>
+                <img src="/api/static/image/footer/footer-myuse-4.png"/>
+                <img src="/api/static/image/footer/footer-myuse-5.png"/>
+                <img src="/api/static/image/footer/footer-myuse-6.png"/>
+                <img src="/api/static/image/footer/footer-myuse-7.png"/>
+                <img src="/api/static/image/footer/footer-myuse-8.png"/>
+                <img src="/api/static/image/footer/footer-myuse-9.png"/>
+                <img src="/api/static/image/footer/footer-myuse-10.png"/>
+                <img src="/api/static/image/footer/footer-myuse-11.png"/>
+                <img src="/api/static/image/footer/footer-myuse-12.png"/>
+                <img src="/api/static/image/footer/footer-myuse-13.png"/>
+                <img src="/api/static/image/footer/footer-myuse-14.png"/>
+                <img src="/api/static/image/footer/footer-myuse-15.png"/>
 
             </div>
         </div>
     </div>
     <div class="bottom-bar-active">
-        <img src="../assets/image/footer/footer-active-0.png"/>
-        <img src="../assets/image/footer/footer-active-1.png"/>
-        <img src="../assets/image/footer/footer-active-2.png"/>
-        <img src="../assets/image/footer/footer-active-3.png"/>
-        <img src="../assets/image/footer/footer-active-4.png"/>
+        <img src="/api/static/image/footer/footer-active-0.png"/>
+        <img src="/api/static/image/footer/footer-active-1.png"/>
+        <img src="/api/static/image/footer/footer-active-2.png"/>
+        <img src="/api/static/image/footer/footer-active-3.png"/>
+        <img src="/api/static/image/footer/footer-active-4.png"/>
     </div>
     <div class="footer-about-box">
-        <img src="../assets/image/logo.png" width="130" height="35">
+        <img src="/api/static/image/logo.png" width="130" height="35">
     </div>
     <div class="footer-about-app">
-        <img src="../assets/image/footer/footer-app-0.png"/>
-        <img src="../assets/image/footer/footer-app-1.png"/>
+        <img src="/api/static/image/footer/footer-app-0.png"/>
+        <img src="/api/static/image/footer/footer-app-1.png"/>
     </div>
 
     <!--    备案-->
@@ -576,7 +576,7 @@
 
 </div>
 </body>
-<script src="../assets/js/index.js"></script>
+<script src="/api/static/js/index.js"></script>
 
 <script>
     window.onload = function () {

file/static/topic.html

@@ -3,9 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <title>Topic</title>
-    <link rel="stylesheet" href="../assets/css/index.css">
-    <link rel="stylesheet" href="../assets/css/topic.css">
-    <script src="../assets/js/handler.js"></script>
+    <link rel="stylesheet" href="/api/static/css/index.css">
+    <link rel="stylesheet" href="/api/static/css/topic.css">
+    <script src="/api/static/js/handler.js"></script>
 </head>
 <body>
 
@@ -13,7 +13,7 @@
     <div class="nav-body">
         <!--      <router-link to="/" class="nav-logo">-->
         <div class="nav-logo">
-            <img src="../assets/image/logo.png" alt="logo" onclick="JumpRouter('/','')"/>
+            <img src="/api/static/image/logo.png" alt="logo" onclick="JumpRouter('/','')"/>
         </div>
         <!--        <button onclick="setToken('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MTg3ODIzOTMsImlzcyI6IjEifQ.b6tID6zWsYtMKnxen0ZuGBpsSE2bpupAHYf80WsH2gQ')">-->
         <!--            首页-->
@@ -261,33 +261,33 @@
                     <img style="transform: rotate(180deg);"
                          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAAXNSR0IArs4c6QAAAhdJREFUSEulVU1rE1EUPdfEgBAIg27UjT+jS13pTpeKriMxRQxJ3hukBnc2ZUwiLUFGxRbbKqZ/Rve+2bswkSB13jDvygtJSZPJl5nlzJz7zr33nPNISlmL4/it53k/seJDQoh3RMRKqc1Op6NXwZOU8j6ABoATrfXLZrP5a9kCVC6Xr6TT6a8ANpj5Y6/Xe+b7frRMAbI/SSkLANoALG1Pa/16GQYDcLFYvJzNZr8DuAbgFMBxGIaVVqvVm8dgAM7n8xcdx3kDwDIAM4dE1FZKufOGOADbp1Kp3EylUkfD0+0rzczvoyh6MauFM3ChUHByudwxM98ZFWRm28JeEARbSQzOwMPBPQLwaaLP0Bizz8y1SSGdA5dKpUuZTOYHgKsTBf4C+KKUejzO4BzYAlzX3WXmJwAuTBQYrLHb7e74vv/bfpsCCyE2iOgzgBsJazq1QjLGCM/z/iSd7Bhjdono4Ywd2xYa/X7/1RTYAoQQ94hoH0BuVgFjzEkiWEp5F8DBPLA10jzaDxKGZonMpr3EwD4YY9zEgUkp94YaT1qV9f12vV6fXtVaIpFSJsnT6vswjuOtmfJ0XddhZiuO22PrsaJoB0HwfK4xhBC3iOhwZUuuFQbDGPoG4PoohrTWYlGOjQKwaE0/DMBGGIb1Rfk1cNVa0SuEsO7ZAXAURdH2IqrjRhldN7FS6unK1021Wq0x839ddP8AAxJAzJtS4CsAAAAASUVORK5CYII="/>
                 </li>
-                <!--          <li v-for="index in 9"><div><img src="../assets/steam-partners.png" alt=""></div></li>-->
+                <!--          <li v-for="index in 9"><div><img src="/api/static/steam-partners.png" alt=""></div></li>-->
                 <li>
-                    <div><img src="../assets/image/footer/footer-slider-steam.png" alt=""></div>
+                    <div><img src="/api/static/image/footer/footer-slider-steam.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="../assets/image/footer/footer-slider-google.png" alt=""></div>
+                    <div><img src="/api/static/image/footer/footer-slider-google.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="../assets/image/footer/footer-slider-tencent.png" alt=""></div>
+                    <div><img src="/api/static/image/footer/footer-slider-tencent.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="../assets/image/footer/footer-slider-microsoft.png" alt=""></div>
+                    <div><img src="/api/static/image/footer/footer-slider-microsoft.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="../assets/image/footer/footer-slider-garena.png" alt=""></div>
+                    <div><img src="/api/static/image/footer/footer-slider-garena.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="../assets/image/footer/footer-slider-ea.png" alt=""></div>
+                    <div><img src="/api/static/image/footer/footer-slider-ea.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="../assets/image/footer/footer-slider-riot.png" alt=""></div>
+                    <div><img src="/api/static/image/footer/footer-slider-riot.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="../assets/image/footer/footer-slider-pubg.png" alt=""></div>
+                    <div><img src="/api/static/image/footer/footer-slider-pubg.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="../assets/image/footer/footer-slider-ubisoft.png" alt=""></div>
+                    <div><img src="/api/static/image/footer/footer-slider-ubisoft.png" alt=""></div>
                 </li>
                 <li>
                     <img
@@ -315,7 +315,7 @@
                 <div class="sg-icon" style="background: rgb(234, 217, 247);">
                     <img
                             class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                            src="../assets/image/footer/footer-promise-2.png"
+                            src="/api/static/image/footer/footer-promise-2.png"
                             draggable="false">
                 </div>
                 <div class="sg-info">
@@ -328,7 +328,7 @@
                 <div class="sg-icon" style="background: rgb(245, 221, 231);">
                     <img
                             class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                            src="../assets/image/footer/footer-promise-3.png"
+                            src="/api/static/image/footer/footer-promise-3.png"
                             draggable="false">
                 </div>
                 <div class="sg-info">
@@ -341,7 +341,7 @@
                 <div class="sg-icon" style="background: rgb(226, 235, 230);">
                     <img
                             class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                            src="../assets/image/footer/footer-promise-4.png"
+                            src="/api/static/image/footer/footer-promise-4.png"
                             draggable="false">
                 </div>
                 <div class="sg-info">
@@ -361,10 +361,10 @@
                 <div class="about-row-item">平日 9:30 - 24:00</div>
                 <div class="about-row-item">周末 9:30 - 24:00</div>
                 <div class="about-row-imgs">
-                    <img src="../assets/image/footer/footer-about-1.png"/>
-                    <img src="../assets/image/footer/footer-about-2.png"/>
-                    <img src="../assets/image/footer/footer-about-3.png"/>
-                    <img src="../assets/image/footer/footer-about-4.png"/>
+                    <img src="/api/static/image/footer/footer-about-1.png"/>
+                    <img src="/api/static/image/footer/footer-about-2.png"/>
+                    <img src="/api/static/image/footer/footer-about-3.png"/>
+                    <img src="/api/static/image/footer/footer-about-4.png"/>
                 </div>
             </div>
 
@@ -390,39 +390,39 @@
                 我们使用
             </div>
             <div class="my-user-images">
-                <img src="../assets/image/footer/footer-myuse-0.png"/>
-                <img src="../assets/image/footer/footer-myuse-1.png"/>
-                <img src="../assets/image/footer/footer-myuse-2.png"/>
-                <img src="../assets/image/footer/footer-myuse-3.png"/>
-                <img src="../assets/image/footer/footer-myuse-4.png"/>
-                <img src="../assets/image/footer/footer-myuse-5.png"/>
-                <img src="../assets/image/footer/footer-myuse-6.png"/>
-                <img src="../assets/image/footer/footer-myuse-7.png"/>
-                <img src="../assets/image/footer/footer-myuse-8.png"/>
-                <img src="../assets/image/footer/footer-myuse-9.png"/>
-                <img src="../assets/image/footer/footer-myuse-10.png"/>
-                <img src="../assets/image/footer/footer-myuse-11.png"/>
-                <img src="../assets/image/footer/footer-myuse-12.png"/>
-                <img src="../assets/image/footer/footer-myuse-13.png"/>
-                <img src="../assets/image/footer/footer-myuse-14.png"/>
-                <img src="../assets/image/footer/footer-myuse-15.png"/>
+                <img src="/api/static/image/footer/footer-myuse-0.png"/>
+                <img src="/api/static/image/footer/footer-myuse-1.png"/>
+                <img src="/api/static/image/footer/footer-myuse-2.png"/>
+                <img src="/api/static/image/footer/footer-myuse-3.png"/>
+                <img src="/api/static/image/footer/footer-myuse-4.png"/>
+                <img src="/api/static/image/footer/footer-myuse-5.png"/>
+                <img src="/api/static/image/footer/footer-myuse-6.png"/>
+                <img src="/api/static/image/footer/footer-myuse-7.png"/>
+                <img src="/api/static/image/footer/footer-myuse-8.png"/>
+                <img src="/api/static/image/footer/footer-myuse-9.png"/>
+                <img src="/api/static/image/footer/footer-myuse-10.png"/>
+                <img src="/api/static/image/footer/footer-myuse-11.png"/>
+                <img src="/api/static/image/footer/footer-myuse-12.png"/>
+                <img src="/api/static/image/footer/footer-myuse-13.png"/>
+                <img src="/api/static/image/footer/footer-myuse-14.png"/>
+                <img src="/api/static/image/footer/footer-myuse-15.png"/>
 
             </div>
         </div>
     </div>
     <div class="bottom-bar-active">
-        <img src="../assets/image/footer/footer-active-0.png"/>
-        <img src="../assets/image/footer/footer-active-1.png"/>
-        <img src="../assets/image/footer/footer-active-2.png"/>
-        <img src="../assets/image/footer/footer-active-3.png"/>
-        <img src="../assets/image/footer/footer-active-4.png"/>
+        <img src="/api/static/image/footer/footer-active-0.png"/>
+        <img src="/api/static/image/footer/footer-active-1.png"/>
+        <img src="/api/static/image/footer/footer-active-2.png"/>
+        <img src="/api/static/image/footer/footer-active-3.png"/>
+        <img src="/api/static/image/footer/footer-active-4.png"/>
     </div>
     <div class="footer-about-box">
-        <img src="../assets/image/logo.png" width="130" height="35">
+        <img src="/api/static/image/logo.png" width="130" height="35">
     </div>
     <div class="footer-about-app">
-        <img src="../assets/image/footer/footer-app-0.png"/>
-        <img src="../assets/image/footer/footer-app-1.png"/>
+        <img src="/api/static/image/footer/footer-app-0.png"/>
+        <img src="/api/static/image/footer/footer-app-1.png"/>
     </div>
 
     <!--    备案-->