seo页面

file/assets/css/carousel.css

@@ -1,132 +0,0 @@
-* {
-    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/assets/css/detail.css

@@ -1,729 +0,0 @@
-.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/assets/css/home.css

@@ -1,423 +0,0 @@
-
-.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/assets/css/index.css

@@ -1,873 +0,0 @@
-* {
-    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/assets/css/topic.css

@@ -1,209 +0,0 @@
-.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/assets/image/suspension/app_android_download.svg

@@ -1,12 +0,0 @@
-<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/assets/image/suspension/app_ios_download.svg

@@ -1,12 +0,0 @@
-<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/assets/image/suspension/collection.svg

@@ -1,10 +0,0 @@
-<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/assets/image/suspension/orderSelect.svg

@@ -1,13 +0,0 @@
-<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/assets/image/suspension/phoneVersion.svg

@@ -1,5 +0,0 @@
-<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/assets/image/suspension/toTop.svg

@@ -1,4 +0,0 @@
-<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/assets/js/Detail.js

@@ -1,159 +0,0 @@
-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/assets/js/handler.js

@@ -1,361 +0,0 @@
-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/assets/js/index.js

@@ -1,169 +0,0 @@
-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/resources/css/carousel.css

@@ -38,7 +38,6 @@
     opacity: 0;
     transition: all 1s;
     overflow: hidden;
-
 }
 
 .carousel .item.active {

file/resources/css/home.css

@@ -5,7 +5,7 @@
     top: 0;
     bottom: 0;
     position: absolute;
-    z-index: 2;
+    z-index: 10;
     width: 0;
     height: 0;
 }
@@ -366,7 +366,7 @@ span {
 .goods-info .goods-img::after {
     content: "";
     position: absolute;
-    z-index: 9999;
+    z-index: 9;
     width: 170px;
     height: 228px;
     box-sizing: border-box;

file/resources/css/index.css

@@ -304,7 +304,8 @@ body, html, div {
     margin: 20px auto 20px auto;
     width: 300px;
 }
-.login-email .login-email-input{
+
+.login-email .login-email-input {
     margin: 0 auto 20px auto;
 }
 
@@ -520,7 +521,9 @@ body, html, div {
 
 .login-image {
     border-radius: 25px;
-    background-image: url('https://cdn.yicanggongyi.com/yinhe/icon/login.png'); width: 430px; height: 430px;
+    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%);
@@ -714,6 +717,10 @@ body, html, div {
     line-height: 16px;
     color: #666666;
     margin-bottom: 10px;
+    cursor: pointer;
+}
+.about-row-item:hover {
+    color: #1a6adc;
 }
 
 .about-row-imgs {
@@ -835,6 +842,7 @@ body, html {
 .register-content-code-input {
     width: 60%;
 }
+
 .register-content-code-input input {
     width: 100%;
     height: 32px;
@@ -844,6 +852,7 @@ body, html {
     outline: none;
     font-size: 16px;
 }
+
 .register-content-code-btn {
     width: 32%;
     height: 42px;
@@ -871,3 +880,27 @@ body, html {
     font-weight: bold;
     margin-top: 20px;
 }
+
+.page {
+    padding-top: 80px;
+    background-color: white;
+    border-bottom: #dddddd 1px solid;
+}
+
+
+.page .info-page {
+    width: 1170px;
+    margin: 0 auto;
+    background-color: #FFFFFF;
+    min-height: 800px;
+    text-align: left;
+    font-size: 16px;
+}
+
+.page .info-page .info-title {
+    padding-top: 30px;
+    text-align: left;
+    font-size: 30px;
+    font-weight: bold;
+
+}

file/resources/js/Detail.js

@@ -60,8 +60,6 @@ function GetAreaById(areaId) {
     }
 
 
-
-
     console.log(areaId)
     let eles = document.getElementsByClassName("info-left-select-param-btn");
     for (let i = 0; i < eles.length; i++) {
@@ -79,6 +77,7 @@ function RouterJumpId(id) {
     window.location.href = "?skuId=" + id
 
 }
+
 //TODO a
 function orderSubmit() {
 
@@ -101,7 +100,23 @@ function orderSubmit() {
         .then(response => response.json())
         .then(data => {
             console.log('Success:', data);
-            alert("假装购买成功");
+            if (data.code === 200) {
+                let orderAmount = document.getElementById("order-amount")
+                let orderPrice = document.getElementById("order-price")
+                let orderHistoricalPrice = document.getElementById("order-historical-price")
+                let orderCount = document.getElementById("order-count")
+
+                let orderBuyCurtain = document.getElementById("order-buy-curtain")
+                orderBuyCurtain.style.display = ""
+
+
+                orderCount.innerText = purchaseQuantity
+                orderPrice.innerText = (skuPrice * purchaseQuantity).toFixed(2)
+                orderAmount.innerText = (skuPrice * purchaseQuantity).toFixed(2)
+                orderHistoricalPrice.innerText = (skuHistoricalPrice * purchaseQuantity).toFixed(2)
+
+            }
+            alert(data.msg);
         })
         .catch((error) => {
             console.error('Error:', error);
@@ -110,7 +125,7 @@ function orderSubmit() {
 }
 
 let selectIndex = 0;
-let nowSku = { Price: 100, SkuImage: "path/to/image", SkuName: "SKU 名称", HistoricalPrices: 120 }; // Example data
+let nowSku = {Price: 100, SkuImage: "path/to/image", SkuName: "SKU 名称", HistoricalPrices: 120}; // Example data
 let count = 1;
 let goodsName = "商品名称"; // Example data
 
@@ -153,7 +168,7 @@ function orderTest() {
     alert("假装购买成功");
 }
 
-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener("DOMContentLoaded", function () {
     selectPayMethod(0); // Set default selection
 });
 

file/resources/js/handler.js

@@ -1,9 +1,9 @@
-const routerArray = [{
-    path: '/', name: '首页',
-}]
-const handler = {
-    routerArray, JumpRouter, getToken, setToken, GetUserInfo
-}
+// const routerArray = [{
+//     path: '/', name: '首页',
+// }]
+// const handler = {
+//      JumpRouter, getToken, setToken, GetUserInfo
+// }
 var loginState = false;
 
 //=======================链接跳转
@@ -15,6 +15,16 @@ function JumpRouter(url, query) {
     }
 }
 
+function jumpClass(className) {
+    // document.querySelector('.to-class' + className).scrollIntoView()
+    // 获取元素的网页高度
+    var height = document.querySelector('.to-class' + className).offsetTop;
+    //这个80是导航栏的高度
+    window.scrollTo(0, height - 80);
+
+
+}
+
 function getToken() {
     return localStorage.getItem("token");
 }
@@ -70,6 +80,7 @@ function GetUserInfo() {
 
 }
 
+//点击导航栏头像
 function clickAvatar() {
     if (loginState) {
         //已经登录的，进入管理页面
@@ -84,6 +95,7 @@ function clickAvatar() {
     }
 }
 
+//关闭登录框
 function closeLoginBody() {
     console.log(6666666666)
     let loginBody = document.getElementById("login-body");
@@ -92,10 +104,9 @@ function closeLoginBody() {
     loginBody.style.display = "none";
     loginCenter.style.display = "none";
     registerCenter.style.display = "none"
-
-
 }
 
+//打开登录框
 function openLoginBody(type) {
     if (type === "register") {
         let loginBody = document.getElementById("login-body");
@@ -262,14 +273,37 @@ document.addEventListener('DOMContentLoaded', () => {
             showTip('密码过短');
             return;
         }
-        //TODO 邮箱登录
-        alert('邮箱登录成功');
+        fetch("/api/user/login", {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                username: email,
+                password: password,
+                type: "email"
+            })
+        }).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);
+        });
     });
 
     refreshWxCode.addEventListener('click', () => {
         console.log('二维码已刷新');
     });
-
     setType(selectType);
 });
 //注册

file/static/BottomBar.tmpl

@@ -0,0 +1,179 @@
+<div class="bottom-bar">
+    <!--    合作伙伴-->
+    <div class="partners">
+        <div class="partners-line">
+            <ul>
+                <li>
+                    <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="/api/static/steam-partners.png" alt=""></div></li>-->
+                <li>
+                    <div><img src="/api/static/image/footer/footer-slider-steam.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="/api/static/image/footer/footer-slider-google.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="/api/static/image/footer/footer-slider-tencent.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="/api/static/image/footer/footer-slider-microsoft.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="/api/static/image/footer/footer-slider-garena.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="/api/static/image/footer/footer-slider-ea.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="/api/static/image/footer/footer-slider-riot.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="/api/static/image/footer/footer-slider-pubg.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="/api/static/image/footer/footer-slider-ubisoft.png" alt=""></div>
+                </li>
+                <li>
+                    <img
+                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAAXNSR0IArs4c6QAAAhdJREFUSEulVU1rE1EUPdfEgBAIg27UjT+jS13pTpeKriMxRQxJ3hukBnc2ZUwiLUFGxRbbKqZ/Rve+2bswkSB13jDvygtJSZPJl5nlzJz7zr33nPNISlmL4/it53k/seJDQoh3RMRKqc1Op6NXwZOU8j6ABoATrfXLZrP5a9kCVC6Xr6TT6a8ANpj5Y6/Xe+b7frRMAbI/SSkLANoALG1Pa/16GQYDcLFYvJzNZr8DuAbgFMBxGIaVVqvVm8dgAM7n8xcdx3kDwDIAM4dE1FZKufOGOADbp1Kp3EylUkfD0+0rzczvoyh6MauFM3ChUHByudwxM98ZFWRm28JeEARbSQzOwMPBPQLwaaLP0Bizz8y1SSGdA5dKpUuZTOYHgKsTBf4C+KKUejzO4BzYAlzX3WXmJwAuTBQYrLHb7e74vv/bfpsCCyE2iOgzgBsJazq1QjLGCM/z/iSd7Bhjdono4Ywd2xYa/X7/1RTYAoQQ94hoH0BuVgFjzEkiWEp5F8DBPLA10jzaDxKGZonMpr3EwD4YY9zEgUkp94YaT1qV9f12vV6fXtVaIpFSJsnT6vswjuOtmfJ0XddhZiuO22PrsaJoB0HwfK4xhBC3iOhwZUuuFQbDGPoG4PoohrTWYlGOjQKwaE0/DMBGGIb1Rfk1cNVa0SuEsO7ZAXAURdH2IqrjRhldN7FS6unK1021Wq0x839ddP8AAxJAzJtS4CsAAAAASUVORK5CYII="/>
+                </li>
+            </ul>
+        </div>
+
+        <!--      服务支持-->
+        <div class="partners-service-guarantee">
+            <div class="service-guarantee">
+                <div class="sg-icon" style="background: rgb(225, 222, 250);">
+                    <img
+                            class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
+                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA1hJREFUWEftl0FO21AQhv+ZOBWtVDXLgE1wd1BQ+wLquuYE0BM0nKBwg9yg9AZwgnKDuPsWLBVaujOJTdg1Wwj2VM9JIIQ4iVMhNn1ZxFLezHz+Z97MC+GRF/1LfKu46AhRLWz+mtrP1IYa3CquOGCpBecnU/sZa2jbqqCD+b7XGlRrHIBdVLZ/4fmjVB4LUJp7XQXxBuexPggxKgWmuawYRi3G5U4Ynu6lQYwFsAt24frZc5cpJ4MQlrXiSBTdqwEdPEf5mgid5fLiDFOvBzQWQG/UaYjacAkknJcbJSxLOYiuakHz540f01SKITWAxwbXvicCuIUQl8A3EBqsfdmuhM2TXb1HBzfYqEGiMzJGv3kmBXqbO0qQVmKvHh4mQftXyVS7ROyQEY+Uvd9mYgUGg9nmWxVTtAHEYAP7vj+62qcuwjTDeauslVAQaQGyEBPWg8Bzsza2oQqYs8vbnHuyAZGOP+psY1DrLDh8r581gP5uBEdO51lajcDb7KRJvoAY+qMVihM/AjB9bjS8g7EpmJ9b2iR+qrTx7WLto9XLfT9AyVqtxnLlBOGxk3TIuVdV5pl7YjBi1x9Qaeoa6KQArXpwtDkIkCUNUwOUzFUfhL16cFgtWaoqAqcReokCWdZUAPNzy3tExuZVdKkuLk79TrvOfQDR3ZYr5NfD7/ujgFIBdDslkY1+4xiRx8LbxHkHiLYa4UkSUNcM88x2r2J06ekeJ8A7SOzVQ6+c+RiWrPIBBEoIyTQjQInICyD6KpFUg4vjsUfONpWKiY5EZKsRekMHUqoCC1bZFZCrc9w7diTk1cPD7Sw5XrBWXUHs1gMv8TO4sgFAUh2lQS1YayIiO8Nad1fZ4aZDFcgIoJuSXBt/CFj3g29DU/agCuj7AiNf42t5mXYzyghwWxOT1EHS0pk/NcIfqXFSf+gOm7tF2FeUkwBY5vIuYqigeZLaoB4WYHbR1cc4PD+tZO4D9xQwlR6/fj08SnU2GMSaXWoJ4mrY/H3v8tLbm6pAyVo7gMgbIfH1WCaCAqgAiSpxJD7QTs0CMRcEqBAZ6+3oKmnXmRUoFhdtg7n7tt0mK6T/I3xMbpJ6xHfvCYlzPfN7ryPJz2eUk0oQnI7smFMNo0kKcNI9/wEeXYG/2/HLMDfFEZMAAAAASUVORK5CYII="
+                            draggable="false">
+                </div>
+                <div class="sg-info">
+                    <div>自动发货</div>
+                    <div>提供最快发货</div>
+                </div>
+            </div>
+
+            <div class="service-guarantee">
+                <div class="sg-icon" style="background: rgb(234, 217, 247);">
+                    <img
+                            class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
+                            src="/api/static/image/footer/footer-promise-2.png"
+                            draggable="false">
+                </div>
+                <div class="sg-info">
+                    <div>正版保障</div>
+                    <div>官方正版采购,安全保障</div>
+                </div>
+            </div>
+
+            <div class="service-guarantee">
+                <div class="sg-icon" style="background: rgb(245, 221, 231);">
+                    <img
+                            class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
+                            src="/api/static/image/footer/footer-promise-3.png"
+                            draggable="false">
+                </div>
+                <div class="sg-info">
+                    <div>客户服务</div>
+                    <div>提供专业的客服咨询</div>
+                </div>
+            </div>
+
+            <div class="service-guarantee">
+                <div class="sg-icon" style="background: rgb(226, 235, 230);">
+                    <img
+                            class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
+                            src="/api/static/image/footer/footer-promise-4.png"
+                            draggable="false">
+                </div>
+                <div class="sg-info">
+                    <div>100%满意度</div>
+                    <div>给予您满意的购物体验</div>
+                </div>
+            </div>
+
+
+        </div>
+    </div>
+
+    <div class="bottom-bar-about">
+        <div class="bottom-bar-about-left">
+            <div class="about-contact about-row">
+                <div class="about-row-title">联系我们</div>
+                <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="/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>
+
+            <div class="about-me about-row">
+                <div class="about-row-title">关于我们</div>
+                <div class="about-row-item" onclick="JumpRouter('/info/abouts')" >关于我们</div>
+                <div class="about-row-item" onclick="JumpRouter('/info/contact')">联系我们</div>
+                <div class="about-row-item" onclick="JumpRouter('/info/terms')">条款与条件</div>
+                <div class="about-row-item" onclick="JumpRouter('/info/cookies')">隐私和Cookie</div>
+            </div>
+
+            <div class="about-issue about-row">
+                <div class="about-row-title">常见问题</div>
+                <div class="about-row-item" onclick="JumpRouter('/info/help')">帮助中心</div>
+                <div class="about-row-item" onclick="JumpRouter('/info/serve')">售后服务</div>
+                <div class="about-row-item" onclick="JumpRouter('/info/refunds')">关于退款</div>
+                <div class="about-row-item" onclick="JumpRouter('/info/shipping')">关于发货</div>
+            </div>
+        </div>
+
+        <div class="bottom-bar-about-right">
+            <div class="about-my-use about-row-title">
+                我们使用
+            </div>
+            <div class="my-user-images">
+                <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="/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="/api/static/image/bottom-logo.png" width="130" height="80">
+    </div>
+    <div class="footer-about-app">
+        <img src="/api/static/image/footer/footer-app-0.png"/>
+        <img src="/api/static/image/footer/footer-app-1.png"/>
+    </div>
+
+    <!--    备案-->
+    <div class="filing">
+        <div class="filing-body">xxx省xxx市xxx区666号xxx公司</div>
+    </div>
+
+</div>

file/static/NavigationBar.tmpl

@@ -1,10 +1,9 @@
+<script src="/api/static/js/handler.js"></script>
 <div class="navigation-bar">
     <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>
-        <!--      </router-link>-->
         <div class="nav-search">
             <form action="/search" target="_blank">
                 <div class="nav-search-div">
@@ -22,88 +21,75 @@
             </form>
         </div>
         <div class="nav-user">
-
-            <!--                todo 头像处理-->
-            <div class="nav-user-icon" @click="openView()">
+            <div class="nav-user-icon" onclick="clickAvatar()">
                 <div class="nav-user-icon-bg">
-                    <el-icon size="24">
-                        <User/>
-                    </el-icon>
-                    <img :src="userInfo.avatar" v-else alt="6"/>
+                    <svg id="not-login" style="width: 24px;height: 24px"
+                         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+                        <path fill="currentColor"
+                              d="M512 512a192 192 0 1 0 0-384 192 192 0 0 0 0 384m0 64a256 256 0 1 1 0-512 256 256 0 0 1 0 512m320 320v-96a96 96 0 0 0-96-96H288a96 96 0 0 0-96 96v96a32 32 0 1 1-64 0v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 1 1-64 0"></path>
+                    </svg>
+                    <img id="logged-in" style="display: none" alt="6"/>
                 </div>
-                <span>{1{ isLogin ? userInfo.name : "登录" }1}</span>
+                <span id="login-name">登录</span>
             </div>
-
-            <div class="login-body" style="display: none">
-                <div class="login-center" style="display: none">
+            <div class="login-body" id="login-body" style="display: none">
+                <div class="login-center" id="login-center" style="display: none">
                     <div class="login-content">
-                        <div class="login-image" :style="loginImageStyle"></div>
+                        <div class="login-image"></div>
                         <form>
                             <div class="login-from">
                                 <div class="login-select">
-                                    <div class=" login-select-item "
-                                         :class="selectType=='phone'?'select-item':''"
-                                         @click="setType('phone')">
+                                    <div class="login-select-item select-item" id="phone-tab">
                                         <span>手机号登录</span>
                                     </div>
-                                    <div class=" login-select-item "
-                                         :class="selectType=='email'?'select-item':''"
-                                         @click="setType('email')">
+                                    <div class="login-select-item select-item" id="email-tab">
                                         <span>邮箱登录</span>
                                     </div>
-                                    <div class=" login-select-item "
-                                         :class="selectType=='wx'?'select-item':''"
-                                         @click="setType('wx')">
+                                    <div class="login-select-item select-item" id="wx-tab">
                                         <span>微信扫码登录</span>
                                     </div>
-                                    <!--特效白条-->
-                                    <div class="select-item2" :style="getSelectTypeStyle()"></div>
+                                    <div class="select-item2" id="select-bar"></div>
                                 </div>
 
-                                <div class="login-type-phone" v-show="selectType=='phone'||selectType=='email'">
+                                <div class="login-type-phone" id="phone-section">
                                     <div class="login-phone">
-
                                         <div class="login-phone-input">
-                                            <input name="username" v-model="username"
-                                                   autocomplete="off"
-                                                   :placeholder="selectType=='phone'?'手机号码':'邮箱'"/>
+                                            <input name="username" id="phone-input" autocomplete="off"
+                                                   placeholder="手机号码"/>
                                         </div>
                                     </div>
-                                    <div class="login-phone-code" v-if="selectType=='phone'">
+                                    <div class="login-phone-code">
                                         <div class="login-phone-code-input">
-                                            <input name="username" v-model="password"
-                                                   autocomplete="off"
+                                            <input name="password" id="phone-code-input" autocomplete="off"
                                                    placeholder="验证码"/>
                                         </div>
-                                        <div class="login-phone-code-btn" @click="getCode()">
-                                            {1{ awaitCode > 0 ? awaitCode + 's' : '发送验证码' }1}
-                                        </div>
+                                        <div class="login-phone-code-btn" id="send-code-btn">发送验证码</div>
+                                    </div>
+                                    <div class="login-btn" id="phone-login-btn">
+                                        <div class="login-btn-div">登录</div>
                                     </div>
+                                </div>
 
-                                    <div class="login-email" v-if="selectType=='email'">
+                                <div class="login-type-email" id="email-section">
+                                    <div class="login-email">
+                                        <div class="login-email-input">
+                                            <input name="username" id="email-input" autocomplete="off"
+                                                   placeholder="邮箱"/>
+                                        </div>
                                         <div class="login-email-input">
-                                            <input name="username" v-model="password"
-                                                   autocomplete="off"
-                                                   type="password"
-                                                   placeholder="密码"/>
+                                            <input name="password" id="email-password-input" autocomplete="off"
+                                                   type="password" placeholder="密码"/>
                                         </div>
                                     </div>
-
-                                    <div class="login-btn" @click="login()">
+                                    <div class="login-btn" id="email-login-btn">
                                         <div class="login-btn-div">登录</div>
                                     </div>
                                 </div>
 
-                                <div class="login-type-wx" v-show="selectType=='wx'">
-                                    <div class="login-wx-refresh" @click="refreshWxCode()">
-                                        <div class="login-wx-refresh-icon"
-                                             style="transform: translateY(15%)">
-                                            <el-icon size="25" :class="refreshWxCodeState?'is-loading':''">
-                                                <refresh/>
-                                            </el-icon>
-                                        </div>
-                                        <div class="login-wx-refresh-text">
-                                            <span style="line-height: 25px">刷新二维码</span>
+                                <div class="login-type-wx" id="wx-section">
+                                    <div class="login-wx-refresh" id="refresh-wx-code">
+                                        <div class="login-wx-refresh-icon">
+                                            <span>刷新二维码</span>
                                         </div>
                                     </div>
                                     <div class="login-wx-tip">
@@ -114,51 +100,56 @@
                                         <span>请使用微信扫码登录</span>
                                     </div>
                                 </div>
-                                <span class="login-register-btn"
-                                      v-if="selectType!=='wx'"
-                                      @click="setShowRegister('register')">注册</span>
+
+                                <span class="login-register-btn" onclick="openLoginBody('register')">注册</span>
                             </div>
                         </form>
                     </div>
                 </div>
-                <div class="register-center" style="display: none">
-                    <div class="register-content">
+                <div id="register-center" class="register-center" style="display: none">
+                    <div class="register-content" >
                         <form>
                             <div class="register-content-title">
                                 注册
                             </div>
                             <div class="register-content-input">
-                                <k-k-c-input name="username" @binding="setUsername" :text="username"
-                                             placeholder="请输入邮箱" type="text"/>
+                                <label>
+                                    <input name="username" id="username" placeholder="请输入邮箱" type="text"/>
+                                </label>
                             </div>
                             <div class="register-content-input">
-                                <k-k-c-input name="password" @binding="setPassword" :text="password"
-                                             type="password" placeholder="请输入密码"/>
+                                <label>
+                                    <input name="password" id="password" type="password" placeholder="请输入密码"/>
+                                </label>
                             </div>
                             <div class="register-content-input">
-                                <k-k-c-input name="username" @binding="setRequirePassword" :text="requirePassword"
-                                             type="password" placeholder="请输入密码"/>
+                                <label>
+                                    <input name="requirePassword" id="requirePassword" type="password"
+                                           placeholder="请输入密码"/>
+                                </label>
                             </div>
                             <div class="register-content-input">
-                                <k-k-c-input name="username" @binding="setPhone" :text="phone"
-                                             placeholder="请输入手机号" type="text"/>
+                                <label>
+                                    <input name="phone" id="phone" placeholder="请输入手机号" type="text"/>
+                                </label>
                             </div>
                             <div class="register-content-code">
                                 <div class="register-content-code-input">
-                                    <k-k-c-input name="username" @binding="setCode" :text="code"
-                                                 placeholder="请输入手机号" type="text"/>
+                                    <label>
+                                        <input name="username" id="code" placeholder="请输入验证码" type="text"/>
+                                    </label>
                                 </div>
-                                <div class="register-content-code-btn" @click="sendCode()">
-                                    {1{ awaitCode > 0 ? awaitCode + 's' : '发送验证码' }1}
+                                <div class="register-content-code-btn" id="send-register-code">
+                                    发送验证码
                                 </div>
                             </div>
-                            <div class="register-content-submit" @click="register()">
+                            <div class="register-content-submit" id="register-btn">
                                 注册
                             </div>
                         </form>
                     </div>
                 </div>
-                <div class="login-body-shield" @click="showViewType=''"></div>
+                <div class="login-body-shield" onclick="closeLoginBody()"></div>
             </div>
         </div>
     </div>

file/static/detail.html

@@ -6,171 +6,12 @@
     <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>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="description" content="{{.goods.goodsName}} / {{.sku.skuName}}" />
 </head>
 <body>
 
-<div class="navigation-bar">
-    <div class="nav-body">
-        <!--      <router-link to="/" class="nav-logo">-->
-        <div class="nav-logo">
-            <img src="/api/static/image/logo.png" alt="logo" onclick="JumpRouter('/','')"/>
-        </div>
-        <!--        <button onclick="setToken('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MTg3ODIzOTMsImlzcyI6IjEifQ.b6tID6zWsYtMKnxen0ZuGBpsSE2bpupAHYf80WsH2gQ')">-->
-        <!--            首页-->
-        <!--        </button>-->
-        <!--      </router-link>-->
-        <div class="nav-search">
-            <form action="/search" target="_blank">
-                <div class="nav-search-div">
-                    <input class="search-input" type="text" name="key" placeholder="搜索商品名称"/>
-                </div>
-                <!--          点击-->
-                <div class="search-btn">
-                    <div class="search-btn-icon">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-6fbb019e="">
-                            <path fill="currentColor"
-                                  d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704"></path>
-                        </svg>
-                    </div>
-                </div>
-            </form>
-        </div>
-        <div class="nav-user">
-            <!--                todo 头像处理-->
-            <div class="nav-user-icon" onclick="clickAvatar()">
-                <div class="nav-user-icon-bg">
-                    <svg id="not-login" style="width: 24px;height: 24px"
-                         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-                        <path fill="currentColor"
-                              d="M512 512a192 192 0 1 0 0-384 192 192 0 0 0 0 384m0 64a256 256 0 1 1 0-512 256 256 0 0 1 0 512m320 320v-96a96 96 0 0 0-96-96H288a96 96 0 0 0-96 96v96a32 32 0 1 1-64 0v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 1 1-64 0"></path>
-                    </svg>
-                    <img id="logged-in" style="display: none" alt="6"/>
-                </div>
-                <span id="login-name">登录</span>
-            </div>
-
-            <div class="login-body" id="login-body" style="display: none">
-                <div class="login-center" id="login-center" style="display: none">
-                    <div class="login-content">
-                        <div class="login-image"></div>
-                        <form>
-                            <div class="login-from">
-                                <div class="login-select">
-                                    <div class="login-select-item select-item" id="phone-tab">
-                                        <span>手机号登录</span>
-                                    </div>
-                                    <div class="login-select-item select-item" id="email-tab">
-                                        <span>邮箱登录</span>
-                                    </div>
-                                    <div class="login-select-item select-item" id="wx-tab">
-                                        <span>微信扫码登录</span>
-                                    </div>
-                                    <div class="select-item2" id="select-bar"></div>
-                                </div>
-
-                                <div class="login-type-phone" id="phone-section">
-                                    <div class="login-phone">
-                                        <div class="login-phone-input">
-                                            <input name="username" id="phone-input" autocomplete="off"
-                                                   placeholder="手机号码"/>
-                                        </div>
-                                    </div>
-                                    <div class="login-phone-code">
-                                        <div class="login-phone-code-input">
-                                            <input name="password" id="phone-code-input" autocomplete="off"
-                                                   placeholder="验证码"/>
-                                        </div>
-                                        <div class="login-phone-code-btn" id="send-code-btn">发送验证码</div>
-                                    </div>
-                                    <div class="login-btn" id="phone-login-btn">
-                                        <div class="login-btn-div">登录</div>
-                                    </div>
-                                </div>
-
-                                <div class="login-type-email" id="email-section">
-                                    <div class="login-email">
-                                        <div class="login-email-input">
-                                            <input name="username" id="email-input" autocomplete="off"
-                                                   placeholder="邮箱"/>
-                                        </div>
-                                        <div class="login-email-input">
-                                            <input name="password" id="email-password-input" autocomplete="off"
-                                                   type="password" placeholder="密码"/>
-                                        </div>
-                                    </div>
-                                    <div class="login-btn" id="email-login-btn">
-                                        <div class="login-btn-div">登录</div>
-                                    </div>
-                                </div>
-
-                                <div class="login-type-wx" id="wx-section">
-                                    <div class="login-wx-refresh" id="refresh-wx-code">
-                                        <div class="login-wx-refresh-icon">
-                                            <span>刷新二维码</span>
-                                        </div>
-                                    </div>
-                                    <div class="login-wx-tip">
-                                        <span>微信登录</span>
-                                    </div>
-                                    <div class="login-wx-image"></div>
-                                    <div class="login-wx-tip">
-                                        <span>请使用微信扫码登录</span>
-                                    </div>
-                                </div>
-
-                                <span class="login-register-btn" onclick="openLoginBody('register')">注册</span>
-                            </div>
-                        </form>
-                    </div>
-                </div>
-                <div id="register-center" class="register-center" style="display: none">
-                    <div class="register-content" >
-                        <form>
-                            <div class="register-content-title">
-                                注册
-                            </div>
-                            <div class="register-content-input">
-                                <label>
-                                    <input name="username" id="username" placeholder="请输入邮箱" type="text"/>
-                                </label>
-                            </div>
-                            <div class="register-content-input">
-                                <label>
-                                    <input name="password" id="password" type="password" placeholder="请输入密码"/>
-                                </label>
-                            </div>
-                            <div class="register-content-input">
-                                <label>
-                                    <input name="requirePassword" id="requirePassword" type="password"
-                                           placeholder="请输入密码"/>
-                                </label>
-                            </div>
-                            <div class="register-content-input">
-                                <label>
-                                    <input name="phone" id="phone" placeholder="请输入手机号" type="text"/>
-                                </label>
-                            </div>
-                            <div class="register-content-code">
-                                <div class="register-content-code-input">
-                                    <label>
-                                        <input name="username" id="code" placeholder="请输入验证码" type="text"/>
-                                    </label>
-                                </div>
-                                <div class="register-content-code-btn" id="send-register-code">
-                                    发送验证码
-                                </div>
-                            </div>
-                            <div class="register-content-submit" id="register-btn">
-                                注册
-                            </div>
-                        </form>
-                    </div>
-                </div>
-                <div class="login-body-shield" onclick="closeLoginBody()"></div>
-            </div>
-        </div>
-    </div>
-</div>
+{{template "NavigationBar.tmpl" .}}
 <div class="detail">
     <!--    路由地址栏-->
     <RouterJumpBar v-model:nowRouterName="detailInfo.sku.skuName"/>
@@ -359,7 +200,7 @@
                             </div>
                         </div>
 <!--                        TODO 1-->
-                        <div class="order-buy-curtain" id="order-buy-curtain" style="">
+                        <div class="order-buy-curtain" id="order-buy-curtain" style="display: none">
                             <div class="order-buy-body">
                                 <div class="order-buy-title">订单详情</div>
                                 <div class="order-buy-close" onclick="closeView()">
@@ -396,7 +237,7 @@
                                             </div>
                                             <div class="pay-body-info">
                                                 <div class="pay-body-info-title">应付金额</div>
-                                                <div class="pay-body-info-amount">{{.NowSku.Price}} * {{.Count}}</div>
+                                                <div class="pay-body-info-amount" id="order-amount">{{.NowSku.Price}} * {{.Count}}</div>
                                             </div>
                                             <div class="pay-body-tip">
                                                 <span>购买即同意</span>
@@ -419,7 +260,7 @@
                                                     <div class="order-data-item-value">{{.sku.skuName}}</div>
                                                 </div>
                                                 <div class="order-data-item">
-                                                    <div class="order-data-item-name">数量</div>
+                                                    <div class="order-data-item-name" id="order-count">数量</div>
                                                     <div class="order-data-item-value">{{.Count}}!!</div>
                                                 </div>
                                                 <div class="order-data-item">
@@ -432,8 +273,8 @@
                                                 <div class="order-data-item">
                                                     <div class="order-data-item-name">总计</div>
                                                     <div class="order-data-item-value">
-                                                        <div class="value-delete-line">{{.NowSku.HistoricalPrices}} * {{.Count}}</div>
-                                                        <div class="value-now">{{.NowSku.Price}} * {{.Count}}</div>
+                                                        <div class="value-delete-line" id="order-historical-price">{{.sku.historicalPrices}}</div>
+                                                        <div class="value-now" id="order-price">{{.sku.price}}</div>
                                                     </div>
                                                 </div>
                                             </div>
@@ -465,185 +306,9 @@
         </div>
     </div>
 
-    <div class="bottom-bar">
-        <!--    合作伙伴-->
-        <div class="partners">
-            <div class="partners-line">
-                <ul>
-                    <li>
-                        <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="/api/static/steam-partners.png" alt=""></div></li>-->
-                    <li>
-                        <div><img src="/api/static/image/footer/footer-slider-steam.png" alt=""></div>
-                    </li>
-                    <li>
-                        <div><img src="/api/static/image/footer/footer-slider-google.png" alt=""></div>
-                    </li>
-                    <li>
-                        <div><img src="/api/static/image/footer/footer-slider-tencent.png" alt=""></div>
-                    </li>
-                    <li>
-                        <div><img src="/api/static/image/footer/footer-slider-microsoft.png" alt=""></div>
-                    </li>
-                    <li>
-                        <div><img src="/api/static/image/footer/footer-slider-garena.png" alt=""></div>
-                    </li>
-                    <li>
-                        <div><img src="/api/static/image/footer/footer-slider-ea.png" alt=""></div>
-                    </li>
-                    <li>
-                        <div><img src="/api/static/image/footer/footer-slider-riot.png" alt=""></div>
-                    </li>
-                    <li>
-                        <div><img src="/api/static/image/footer/footer-slider-pubg.png" alt=""></div>
-                    </li>
-                    <li>
-                        <div><img src="/api/static/image/footer/footer-slider-ubisoft.png" alt=""></div>
-                    </li>
-                    <li>
-                        <img
-                                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAAXNSR0IArs4c6QAAAhdJREFUSEulVU1rE1EUPdfEgBAIg27UjT+jS13pTpeKriMxRQxJ3hukBnc2ZUwiLUFGxRbbKqZ/Rve+2bswkSB13jDvygtJSZPJl5nlzJz7zr33nPNISlmL4/it53k/seJDQoh3RMRKqc1Op6NXwZOU8j6ABoATrfXLZrP5a9kCVC6Xr6TT6a8ANpj5Y6/Xe+b7frRMAbI/SSkLANoALG1Pa/16GQYDcLFYvJzNZr8DuAbgFMBxGIaVVqvVm8dgAM7n8xcdx3kDwDIAM4dE1FZKufOGOADbp1Kp3EylUkfD0+0rzczvoyh6MauFM3ChUHByudwxM98ZFWRm28JeEARbSQzOwMPBPQLwaaLP0Bizz8y1SSGdA5dKpUuZTOYHgKsTBf4C+KKUejzO4BzYAlzX3WXmJwAuTBQYrLHb7e74vv/bfpsCCyE2iOgzgBsJazq1QjLGCM/z/iSd7Bhjdono4Ywd2xYa/X7/1RTYAoQQ94hoH0BuVgFjzEkiWEp5F8DBPLA10jzaDxKGZonMpr3EwD4YY9zEgUkp94YaT1qV9f12vV6fXtVaIpFSJsnT6vswjuOtmfJ0XddhZiuO22PrsaJoB0HwfK4xhBC3iOhwZUuuFQbDGPoG4PoohrTWYlGOjQKwaE0/DMBGGIb1Rfk1cNVa0SuEsO7ZAXAURdH2IqrjRhldN7FS6unK1021Wq0x839ddP8AAxJAzJtS4CsAAAAASUVORK5CYII="/>
-                    </li>
-                </ul>
-            </div>
-
-            <!--      服务支持-->
-            <div class="partners-service-guarantee">
-                <div class="service-guarantee">
-                    <div class="sg-icon" style="background: rgb(225, 222, 250);">
-                        <img
-                                class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA1hJREFUWEftl0FO21AQhv+ZOBWtVDXLgE1wd1BQ+wLquuYE0BM0nKBwg9yg9AZwgnKDuPsWLBVaujOJTdg1Wwj2VM9JIIQ4iVMhNn1ZxFLezHz+Z97MC+GRF/1LfKu46AhRLWz+mtrP1IYa3CquOGCpBecnU/sZa2jbqqCD+b7XGlRrHIBdVLZ/4fmjVB4LUJp7XQXxBuexPggxKgWmuawYRi3G5U4Ynu6lQYwFsAt24frZc5cpJ4MQlrXiSBTdqwEdPEf5mgid5fLiDFOvBzQWQG/UaYjacAkknJcbJSxLOYiuakHz540f01SKITWAxwbXvicCuIUQl8A3EBqsfdmuhM2TXb1HBzfYqEGiMzJGv3kmBXqbO0qQVmKvHh4mQftXyVS7ROyQEY+Uvd9mYgUGg9nmWxVTtAHEYAP7vj+62qcuwjTDeauslVAQaQGyEBPWg8Bzsza2oQqYs8vbnHuyAZGOP+psY1DrLDh8r581gP5uBEdO51lajcDb7KRJvoAY+qMVihM/AjB9bjS8g7EpmJ9b2iR+qrTx7WLto9XLfT9AyVqtxnLlBOGxk3TIuVdV5pl7YjBi1x9Qaeoa6KQArXpwtDkIkCUNUwOUzFUfhL16cFgtWaoqAqcReokCWdZUAPNzy3tExuZVdKkuLk79TrvOfQDR3ZYr5NfD7/ujgFIBdDslkY1+4xiRx8LbxHkHiLYa4UkSUNcM88x2r2J06ekeJ8A7SOzVQ6+c+RiWrPIBBEoIyTQjQInICyD6KpFUg4vjsUfONpWKiY5EZKsRekMHUqoCC1bZFZCrc9w7diTk1cPD7Sw5XrBWXUHs1gMv8TO4sgFAUh2lQS1YayIiO8Nad1fZ4aZDFcgIoJuSXBt/CFj3g29DU/agCuj7AiNf42t5mXYzyghwWxOT1EHS0pk/NcIfqXFSf+gOm7tF2FeUkwBY5vIuYqigeZLaoB4WYHbR1cc4PD+tZO4D9xQwlR6/fj08SnU2GMSaXWoJ4mrY/H3v8tLbm6pAyVo7gMgbIfH1WCaCAqgAiSpxJD7QTs0CMRcEqBAZ6+3oKmnXmRUoFhdtg7n7tt0mK6T/I3xMbpJ6xHfvCYlzPfN7ryPJz2eUk0oQnI7smFMNo0kKcNI9/wEeXYG/2/HLMDfFEZMAAAAASUVORK5CYII="
-                                draggable="false">
-                    </div>
-                    <div class="sg-info">
-                        <div>自动发货</div>
-                        <div>提供最快发货</div>
-                    </div>
-                </div>
-
-                <div class="service-guarantee">
-                    <div class="sg-icon" style="background: rgb(234, 217, 247);">
-                        <img
-                                class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                                src="/api/static/image/footer/footer-promise-2.png"
-                                draggable="false">
-                    </div>
-                    <div class="sg-info">
-                        <div>正版保障</div>
-                        <div>官方正版采购,安全保障</div>
-                    </div>
-                </div>
-
-                <div class="service-guarantee">
-                    <div class="sg-icon" style="background: rgb(245, 221, 231);">
-                        <img
-                                class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                                src="/api/static/image/footer/footer-promise-3.png"
-                                draggable="false">
-                    </div>
-                    <div class="sg-info">
-                        <div>客户服务</div>
-                        <div>提供专业的客服咨询</div>
-                    </div>
-                </div>
-
-                <div class="service-guarantee">
-                    <div class="sg-icon" style="background: rgb(226, 235, 230);">
-                        <img
-                                class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                                src="/api/static/image/footer/footer-promise-4.png"
-                                draggable="false">
-                    </div>
-                    <div class="sg-info">
-                        <div>100%满意度</div>
-                        <div>给予您满意的购物体验</div>
-                    </div>
-                </div>
-
-
-            </div>
-        </div>
-
-        <div class="bottom-bar-about">
-            <div class="bottom-bar-about-left">
-                <div class="about-contact about-row">
-                    <div class="about-row-title">联系我们</div>
-                    <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="/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>
-
-                <div class="about-me about-row">
-                    <div class="about-row-title">关于我们</div>
-                    <div class="about-row-item">关于我们</div>
-                    <div class="about-row-item">联系我们</div>
-                    <div class="about-row-item">条款与条件</div>
-                    <div class="about-row-item">隐私和Cookie</div>
-                </div>
-
-                <div class="about-issue about-row">
-                    <div class="about-row-title">常见问题</div>
-                    <div class="about-row-item">帮助中心</div>
-                    <div class="about-row-item">售后服务</div>
-                    <div class="about-row-item">关于退款</div>
-                    <div class="about-row-item">关于发货</div>
-                </div>
-            </div>
-
-            <div class="bottom-bar-about-right">
-                <div class="about-my-use about-row-title">
-                    我们使用
-                </div>
-                <div class="my-user-images">
-                    <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="/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="/api/static/image/logo.png" width="130" height="35">
-        </div>
-        <div class="footer-about-app">
-            <img src="/api/static/image/footer/footer-app-0.png"/>
-            <img src="/api/static/image/footer/footer-app-1.png"/>
-        </div>
-
-        <!--    备案-->
-        <div class="filing">
-            <div class="filing-body">xxx省xxx市xxx区666号xxx公司</div>
-        </div>
+</div>
 
-    </div>
+{{template "BottomBar.tmpl" .}}
 </body>
 <script src="/api/static/js/Detail.js"></script>
 

file/static/index.html

@@ -2,176 +2,17 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Title</title>
+    <title>card 商城</title>
     <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>
+    <meta name="description"
+          content="海外数字商城，为全球用户提供谷歌、苹果、脸书等购买服务，还有苹果、谷歌、steam礼品卡等购买渠道。在这里您还能进行steam代充、steam海外代充、steam钱包代充等，7*24小时为您提供满意的交易。">
 </head>
 <body>
 <div class="nav-top"></div>
-<div class="navigation-bar">
-    <div class="nav-body">
-        <!--      <router-link to="/" class="nav-logo">-->
-        <div class="nav-logo">
-            <img src="/api/static/image/logo.png" alt="logo" onclick="JumpRouter('/','')"/>
-        </div>
-        <!--        <button onclick="setToken('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MTg3ODIzOTMsImlzcyI6IjEifQ.b6tID6zWsYtMKnxen0ZuGBpsSE2bpupAHYf80WsH2gQ')">-->
-        <!--            首页-->
-        <!--        </button>-->
-        <!--      </router-link>-->
-        <div class="nav-search">
-            <form action="/search" target="_blank">
-                <div class="nav-search-div">
-                    <input class="search-input" type="text" name="key" placeholder="搜索商品名称"/>
-                </div>
-                <!--          点击-->
-                <div class="search-btn">
-                    <div class="search-btn-icon">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-6fbb019e="">
-                            <path fill="currentColor"
-                                  d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704"></path>
-                        </svg>
-                    </div>
-                </div>
-            </form>
-        </div>
-        <div class="nav-user">
-            <!--                todo 头像处理-->
-            <div class="nav-user-icon" onclick="clickAvatar()">
-                <div class="nav-user-icon-bg">
-                    <svg id="not-login" style="width: 24px;height: 24px"
-                         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-                        <path fill="currentColor"
-                              d="M512 512a192 192 0 1 0 0-384 192 192 0 0 0 0 384m0 64a256 256 0 1 1 0-512 256 256 0 0 1 0 512m320 320v-96a96 96 0 0 0-96-96H288a96 96 0 0 0-96 96v96a32 32 0 1 1-64 0v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 1 1-64 0"></path>
-                    </svg>
-                    <img id="logged-in" style="display: none" alt="6"/>
-                </div>
-                <span id="login-name">登录</span>
-            </div>
-
-            <div class="login-body" id="login-body" style="display: none">
-                <div class="login-center" id="login-center" style="display: none">
-                    <div class="login-content">
-                        <div class="login-image"></div>
-                        <form>
-                            <div class="login-from">
-                                <div class="login-select">
-                                    <div class="login-select-item select-item" id="phone-tab">
-                                        <span>手机号登录</span>
-                                    </div>
-                                    <div class="login-select-item select-item" id="email-tab">
-                                        <span>邮箱登录</span>
-                                    </div>
-                                    <div class="login-select-item select-item" id="wx-tab">
-                                        <span>微信扫码登录</span>
-                                    </div>
-                                    <div class="select-item2" id="select-bar"></div>
-                                </div>
-
-                                <div class="login-type-phone" id="phone-section">
-                                    <div class="login-phone">
-                                        <div class="login-phone-input">
-                                            <input name="username" id="phone-input" autocomplete="off"
-                                                   placeholder="手机号码"/>
-                                        </div>
-                                    </div>
-                                    <div class="login-phone-code">
-                                        <div class="login-phone-code-input">
-                                            <input name="password" id="phone-code-input" autocomplete="off"
-                                                   placeholder="验证码"/>
-                                        </div>
-                                        <div class="login-phone-code-btn" id="send-code-btn">发送验证码</div>
-                                    </div>
-                                    <div class="login-btn" id="phone-login-btn">
-                                        <div class="login-btn-div">登录</div>
-                                    </div>
-                                </div>
-
-                                <div class="login-type-email" id="email-section">
-                                    <div class="login-email">
-                                        <div class="login-email-input">
-                                            <input name="username" id="email-input" autocomplete="off"
-                                                   placeholder="邮箱"/>
-                                        </div>
-                                        <div class="login-email-input">
-                                            <input name="password" id="email-password-input" autocomplete="off"
-                                                   type="password" placeholder="密码"/>
-                                        </div>
-                                    </div>
-                                    <div class="login-btn" id="email-login-btn">
-                                        <div class="login-btn-div">登录</div>
-                                    </div>
-                                </div>
-
-                                <div class="login-type-wx" id="wx-section">
-                                    <div class="login-wx-refresh" id="refresh-wx-code">
-                                        <div class="login-wx-refresh-icon">
-                                            <span>刷新二维码</span>
-                                        </div>
-                                    </div>
-                                    <div class="login-wx-tip">
-                                        <span>微信登录</span>
-                                    </div>
-                                    <div class="login-wx-image"></div>
-                                    <div class="login-wx-tip">
-                                        <span>请使用微信扫码登录</span>
-                                    </div>
-                                </div>
-
-                                <span class="login-register-btn" onclick="openLoginBody('register')">注册</span>
-                            </div>
-                        </form>
-                    </div>
-                </div>
-                <div id="register-center" class="register-center" style="display: none">
-                    <div class="register-content" >
-                        <form>
-                            <div class="register-content-title">
-                                注册
-                            </div>
-                            <div class="register-content-input">
-                                <label>
-                                    <input name="username" id="username" placeholder="请输入邮箱" type="text"/>
-                                </label>
-                            </div>
-                            <div class="register-content-input">
-                                <label>
-                                    <input name="password" id="password" type="password" placeholder="请输入密码"/>
-                                </label>
-                            </div>
-                            <div class="register-content-input">
-                                <label>
-                                    <input name="requirePassword" id="requirePassword" type="password"
-                                           placeholder="请输入密码"/>
-                                </label>
-                            </div>
-                            <div class="register-content-input">
-                                <label>
-                                    <input name="phone" id="phone" placeholder="请输入手机号" type="text"/>
-                                </label>
-                            </div>
-                            <div class="register-content-code">
-                                <div class="register-content-code-input">
-                                    <label>
-                                        <input name="username" id="code" placeholder="请输入验证码" type="text"/>
-                                    </label>
-                                </div>
-                                <div class="register-content-code-btn" id="send-register-code">
-                                    发送验证码
-                                </div>
-                            </div>
-                            <div class="register-content-submit" id="register-btn">
-                                注册
-                            </div>
-                        </form>
-                    </div>
-                </div>
-                <div class="login-body-shield" onclick="closeLoginBody()"></div>
-            </div>
-        </div>
-    </div>
-</div>
+{{template "NavigationBar.tmpl" .}}
 <div class="home">
     <div class="home-suspension">
         <div class="right-handler">
@@ -298,7 +139,9 @@
             <ul id="item">
                 {{range $carousel := .carousels }}
                 <li class="item">
-                    <a href="/detail?skuId={{$carousel.toId}}"><img src="{{$carousel.imageUrl}}"></a>
+                    <a href="detail?skuId={{$carousel.toId}}">
+                        <img src="{{$carousel.imageUrl}}">
+                    </a>
                 </li>
                 {{end}}
             </ul>
@@ -350,7 +193,7 @@
                 <span>    {{$item.topic.topicName}}</span>
             </div>
             <div class="cart-other">
-                <a @click="JumpRouter('/topic/'+ ShopHomeTopic.topic.id)">发现全部</a>
+                <a onclick="JumpRouter('/topic?topicId={{$item.topic.id}}' )">发现全部</a>
             </div>
         </div>
         <div class="card-des">
@@ -395,192 +238,11 @@
     {{end}}
     {{end}}
 </div>
-
-<div class="bottom-bar">
-    <!--    合作伙伴-->
-    <div class="partners">
-        <div class="partners-line">
-            <ul>
-                <li>
-                    <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="/api/static/steam-partners.png" alt=""></div></li>-->
-                <li>
-                    <div><img src="/api/static/image/footer/footer-slider-steam.png" alt=""></div>
-                </li>
-                <li>
-                    <div><img src="/api/static/image/footer/footer-slider-google.png" alt=""></div>
-                </li>
-                <li>
-                    <div><img src="/api/static/image/footer/footer-slider-tencent.png" alt=""></div>
-                </li>
-                <li>
-                    <div><img src="/api/static/image/footer/footer-slider-microsoft.png" alt=""></div>
-                </li>
-                <li>
-                    <div><img src="/api/static/image/footer/footer-slider-garena.png" alt=""></div>
-                </li>
-                <li>
-                    <div><img src="/api/static/image/footer/footer-slider-ea.png" alt=""></div>
-                </li>
-                <li>
-                    <div><img src="/api/static/image/footer/footer-slider-riot.png" alt=""></div>
-                </li>
-                <li>
-                    <div><img src="/api/static/image/footer/footer-slider-pubg.png" alt=""></div>
-                </li>
-                <li>
-                    <div><img src="/api/static/image/footer/footer-slider-ubisoft.png" alt=""></div>
-                </li>
-                <li>
-                    <img
-                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAAXNSR0IArs4c6QAAAhdJREFUSEulVU1rE1EUPdfEgBAIg27UjT+jS13pTpeKriMxRQxJ3hukBnc2ZUwiLUFGxRbbKqZ/Rve+2bswkSB13jDvygtJSZPJl5nlzJz7zr33nPNISlmL4/it53k/seJDQoh3RMRKqc1Op6NXwZOU8j6ABoATrfXLZrP5a9kCVC6Xr6TT6a8ANpj5Y6/Xe+b7frRMAbI/SSkLANoALG1Pa/16GQYDcLFYvJzNZr8DuAbgFMBxGIaVVqvVm8dgAM7n8xcdx3kDwDIAM4dE1FZKufOGOADbp1Kp3EylUkfD0+0rzczvoyh6MauFM3ChUHByudwxM98ZFWRm28JeEARbSQzOwMPBPQLwaaLP0Bizz8y1SSGdA5dKpUuZTOYHgKsTBf4C+KKUejzO4BzYAlzX3WXmJwAuTBQYrLHb7e74vv/bfpsCCyE2iOgzgBsJazq1QjLGCM/z/iSd7Bhjdono4Ywd2xYa/X7/1RTYAoQQ94hoH0BuVgFjzEkiWEp5F8DBPLA10jzaDxKGZonMpr3EwD4YY9zEgUkp94YaT1qV9f12vV6fXtVaIpFSJsnT6vswjuOtmfJ0XddhZiuO22PrsaJoB0HwfK4xhBC3iOhwZUuuFQbDGPoG4PoohrTWYlGOjQKwaE0/DMBGGIb1Rfk1cNVa0SuEsO7ZAXAURdH2IqrjRhldN7FS6unK1021Wq0x839ddP8AAxJAzJtS4CsAAAAASUVORK5CYII="/>
-                </li>
-            </ul>
-        </div>
-
-        <!--      服务支持-->
-        <div class="partners-service-guarantee">
-            <div class="service-guarantee">
-                <div class="sg-icon" style="background: rgb(225, 222, 250);">
-                    <img
-                            class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA1hJREFUWEftl0FO21AQhv+ZOBWtVDXLgE1wd1BQ+wLquuYE0BM0nKBwg9yg9AZwgnKDuPsWLBVaujOJTdg1Wwj2VM9JIIQ4iVMhNn1ZxFLezHz+Z97MC+GRF/1LfKu46AhRLWz+mtrP1IYa3CquOGCpBecnU/sZa2jbqqCD+b7XGlRrHIBdVLZ/4fmjVB4LUJp7XQXxBuexPggxKgWmuawYRi3G5U4Ynu6lQYwFsAt24frZc5cpJ4MQlrXiSBTdqwEdPEf5mgid5fLiDFOvBzQWQG/UaYjacAkknJcbJSxLOYiuakHz540f01SKITWAxwbXvicCuIUQl8A3EBqsfdmuhM2TXb1HBzfYqEGiMzJGv3kmBXqbO0qQVmKvHh4mQftXyVS7ROyQEY+Uvd9mYgUGg9nmWxVTtAHEYAP7vj+62qcuwjTDeauslVAQaQGyEBPWg8Bzsza2oQqYs8vbnHuyAZGOP+psY1DrLDh8r581gP5uBEdO51lajcDb7KRJvoAY+qMVihM/AjB9bjS8g7EpmJ9b2iR+qrTx7WLto9XLfT9AyVqtxnLlBOGxk3TIuVdV5pl7YjBi1x9Qaeoa6KQArXpwtDkIkCUNUwOUzFUfhL16cFgtWaoqAqcReokCWdZUAPNzy3tExuZVdKkuLk79TrvOfQDR3ZYr5NfD7/ujgFIBdDslkY1+4xiRx8LbxHkHiLYa4UkSUNcM88x2r2J06ekeJ8A7SOzVQ6+c+RiWrPIBBEoIyTQjQInICyD6KpFUg4vjsUfONpWKiY5EZKsRekMHUqoCC1bZFZCrc9w7diTk1cPD7Sw5XrBWXUHs1gMv8TO4sgFAUh2lQS1YayIiO8Nad1fZ4aZDFcgIoJuSXBt/CFj3g29DU/agCuj7AiNf42t5mXYzyghwWxOT1EHS0pk/NcIfqXFSf+gOm7tF2FeUkwBY5vIuYqigeZLaoB4WYHbR1cc4PD+tZO4D9xQwlR6/fj08SnU2GMSaXWoJ4mrY/H3v8tLbm6pAyVo7gMgbIfH1WCaCAqgAiSpxJD7QTs0CMRcEqBAZ6+3oKmnXmRUoFhdtg7n7tt0mK6T/I3xMbpJ6xHfvCYlzPfN7ryPJz2eUk0oQnI7smFMNo0kKcNI9/wEeXYG/2/HLMDfFEZMAAAAASUVORK5CYII="
-                            draggable="false">
-                </div>
-                <div class="sg-info">
-                    <div>自动发货</div>
-                    <div>提供最快发货</div>
-                </div>
-            </div>
-
-            <div class="service-guarantee">
-                <div class="sg-icon" style="background: rgb(234, 217, 247);">
-                    <img
-                            class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                            src="/api/static/image/footer/footer-promise-2.png"
-                            draggable="false">
-                </div>
-                <div class="sg-info">
-                    <div>正版保障</div>
-                    <div>官方正版采购,安全保障</div>
-                </div>
-            </div>
-
-            <div class="service-guarantee">
-                <div class="sg-icon" style="background: rgb(245, 221, 231);">
-                    <img
-                            class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                            src="/api/static/image/footer/footer-promise-3.png"
-                            draggable="false">
-                </div>
-                <div class="sg-info">
-                    <div>客户服务</div>
-                    <div>提供专业的客服咨询</div>
-                </div>
-            </div>
-
-            <div class="service-guarantee">
-                <div class="sg-icon" style="background: rgb(226, 235, 230);">
-                    <img
-                            class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                            src="/api/static/image/footer/footer-promise-4.png"
-                            draggable="false">
-                </div>
-                <div class="sg-info">
-                    <div>100%满意度</div>
-                    <div>给予您满意的购物体验</div>
-                </div>
-            </div>
-
-
-        </div>
-    </div>
-
-    <div class="bottom-bar-about">
-        <div class="bottom-bar-about-left">
-            <div class="about-contact about-row">
-                <div class="about-row-title">联系我们</div>
-                <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="/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>
-
-            <div class="about-me about-row">
-                <div class="about-row-title">关于我们</div>
-                <div class="about-row-item">关于我们</div>
-                <div class="about-row-item">联系我们</div>
-                <div class="about-row-item">条款与条件</div>
-                <div class="about-row-item">隐私和Cookie</div>
-            </div>
-
-            <div class="about-issue about-row">
-                <div class="about-row-title">常见问题</div>
-                <div class="about-row-item">帮助中心</div>
-                <div class="about-row-item">售后服务</div>
-                <div class="about-row-item">关于退款</div>
-                <div class="about-row-item">关于发货</div>
-            </div>
-        </div>
-
-        <div class="bottom-bar-about-right">
-            <div class="about-my-use about-row-title">
-                我们使用
-            </div>
-            <div class="my-user-images">
-                <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="/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="/api/static/image/logo.png" width="130" height="35">
-    </div>
-    <div class="footer-about-app">
-        <img src="/api/static/image/footer/footer-app-0.png"/>
-        <img src="/api/static/image/footer/footer-app-1.png"/>
-    </div>
-
-    <!--    备案-->
-    <div class="filing">
-        <div class="filing-body">xxx省xxx市xxx区666号xxx公司</div>
-    </div>
-
-</div>
+{{template "BottomBar.tmpl" .}}
 </body>
 <script src="/api/static/js/index.js"></script>
 
 <script>
-    window.onload = function () {
-        handler.GetUserInfo()
-    }
+    GetUserInfo()
 </script>
 </html>

file/static/info.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>{{.title}}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/api/static/css/index.css">
+</head>
+<body>
+{{template "NavigationBar.tmpl" .}}
+<div class="page">
+    <div class="info-page">
+        <div class="info-title">
+            {{ .title }}
+        </div>
+        <div class="info-content">
+            {{safeHTML .content}}
+        </div>
+    </div>
+</div>
+{{template "BottomBar.tmpl" .}}
+</body>
+</html>

file/static/topic.html

@@ -2,175 +2,13 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Topic</title>
+    <title>{{.topic.topicName}}</title>
     <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>
+    <meta name="description" content="{{.topic.topicDesc}}">
 </head>
 <body>
-
-<div class="navigation-bar">
-    <div class="nav-body">
-        <!--      <router-link to="/" class="nav-logo">-->
-        <div class="nav-logo">
-            <img src="/api/static/image/logo.png" alt="logo" onclick="JumpRouter('/','')"/>
-        </div>
-        <!--        <button onclick="setToken('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MTg3ODIzOTMsImlzcyI6IjEifQ.b6tID6zWsYtMKnxen0ZuGBpsSE2bpupAHYf80WsH2gQ')">-->
-        <!--            首页-->
-        <!--        </button>-->
-        <!--      </router-link>-->
-        <div class="nav-search">
-            <form action="/search" target="_blank">
-                <div class="nav-search-div">
-                    <input class="search-input" type="text" name="key" placeholder="搜索商品名称"/>
-                </div>
-                <!--          点击-->
-                <div class="search-btn">
-                    <div class="search-btn-icon">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-6fbb019e="">
-                            <path fill="currentColor"
-                                  d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704"></path>
-                        </svg>
-                    </div>
-                </div>
-            </form>
-        </div>
-        <div class="nav-user">
-            <!--                todo 头像处理-->
-            <div class="nav-user-icon" onclick="clickAvatar()">
-                <div class="nav-user-icon-bg">
-                    <svg id="not-login" style="width: 24px;height: 24px"
-                         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-                        <path fill="currentColor"
-                              d="M512 512a192 192 0 1 0 0-384 192 192 0 0 0 0 384m0 64a256 256 0 1 1 0-512 256 256 0 0 1 0 512m320 320v-96a96 96 0 0 0-96-96H288a96 96 0 0 0-96 96v96a32 32 0 1 1-64 0v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 1 1-64 0"></path>
-                    </svg>
-                    <img id="logged-in" style="display: none" alt="6"/>
-                </div>
-                <span id="login-name">登录</span>
-            </div>
-
-            <div class="login-body" id="login-body" style="display: none">
-                <div class="login-center" id="login-center" style="display: none">
-                    <div class="login-content">
-                        <div class="login-image"></div>
-                        <form>
-                            <div class="login-from">
-                                <div class="login-select">
-                                    <div class="login-select-item select-item" id="phone-tab">
-                                        <span>手机号登录</span>
-                                    </div>
-                                    <div class="login-select-item select-item" id="email-tab">
-                                        <span>邮箱登录</span>
-                                    </div>
-                                    <div class="login-select-item select-item" id="wx-tab">
-                                        <span>微信扫码登录</span>
-                                    </div>
-                                    <div class="select-item2" id="select-bar"></div>
-                                </div>
-
-                                <div class="login-type-phone" id="phone-section">
-                                    <div class="login-phone">
-                                        <div class="login-phone-input">
-                                            <input name="username" id="phone-input" autocomplete="off"
-                                                   placeholder="手机号码"/>
-                                        </div>
-                                    </div>
-                                    <div class="login-phone-code">
-                                        <div class="login-phone-code-input">
-                                            <input name="password" id="phone-code-input" autocomplete="off"
-                                                   placeholder="验证码"/>
-                                        </div>
-                                        <div class="login-phone-code-btn" id="send-code-btn">发送验证码</div>
-                                    </div>
-                                    <div class="login-btn" id="phone-login-btn">
-                                        <div class="login-btn-div">登录</div>
-                                    </div>
-                                </div>
-
-                                <div class="login-type-email" id="email-section">
-                                    <div class="login-email">
-                                        <div class="login-email-input">
-                                            <input name="username" id="email-input" autocomplete="off"
-                                                   placeholder="邮箱"/>
-                                        </div>
-                                        <div class="login-email-input">
-                                            <input name="password" id="email-password-input" autocomplete="off"
-                                                   type="password" placeholder="密码"/>
-                                        </div>
-                                    </div>
-                                    <div class="login-btn" id="email-login-btn">
-                                        <div class="login-btn-div">登录</div>
-                                    </div>
-                                </div>
-
-                                <div class="login-type-wx" id="wx-section">
-                                    <div class="login-wx-refresh" id="refresh-wx-code">
-                                        <div class="login-wx-refresh-icon">
-                                            <span>刷新二维码</span>
-                                        </div>
-                                    </div>
-                                    <div class="login-wx-tip">
-                                        <span>微信登录</span>
-                                    </div>
-                                    <div class="login-wx-image"></div>
-                                    <div class="login-wx-tip">
-                                        <span>请使用微信扫码登录</span>
-                                    </div>
-                                </div>
-
-                                <span class="login-register-btn" onclick="openLoginBody('register')">注册</span>
-                            </div>
-                        </form>
-                    </div>
-                </div>
-                <div id="register-center" class="register-center" style="display: none">
-                    <div class="register-content" >
-                        <form>
-                            <div class="register-content-title">
-                                注册
-                            </div>
-                            <div class="register-content-input">
-                                <label>
-                                    <input name="username" id="username" placeholder="请输入邮箱" type="text"/>
-                                </label>
-                            </div>
-                            <div class="register-content-input">
-                                <label>
-                                    <input name="password" id="password" type="password" placeholder="请输入密码"/>
-                                </label>
-                            </div>
-                            <div class="register-content-input">
-                                <label>
-                                    <input name="requirePassword" id="requirePassword" type="password"
-                                           placeholder="请输入密码"/>
-                                </label>
-                            </div>
-                            <div class="register-content-input">
-                                <label>
-                                    <input name="phone" id="phone" placeholder="请输入手机号" type="text"/>
-                                </label>
-                            </div>
-                            <div class="register-content-code">
-                                <div class="register-content-code-input">
-                                    <label>
-                                        <input name="username" id="code" placeholder="请输入验证码" type="text"/>
-                                    </label>
-                                </div>
-                                <div class="register-content-code-btn" id="send-register-code">
-                                    发送验证码
-                                </div>
-                            </div>
-                            <div class="register-content-submit" id="register-btn">
-                                注册
-                            </div>
-                        </form>
-                    </div>
-                </div>
-                <div class="login-body-shield" onclick="closeLoginBody()"></div>
-            </div>
-        </div>
-    </div>
-</div>
+{{template "NavigationBar.tmpl" .}}
 
 <div class="topic">
 
@@ -184,24 +22,22 @@
         <div class="image-bottom"></div>
     </div>
     {{end}}
-
     <!--    锚点-->
     <div class="topic-anchor">
         <div class="topic-anchor-to-left anchor-arrow">
-            <div class="anchor-arrow-body anchor-div" v-show="getShowStatus('left')"
-                 @click="setFirstItemIndex(firstItemIndex-1)"></div>
+            <div class="anchor-arrow-body anchor-div" @click="setFirstItemIndex(firstItemIndex-1)"></div>
         </div>
         <div class="topic-anchor-body anchor-div">
-            <template v-for="(item,index) in selectList" :key="index">
-                <div class="topic-anchor-item" @click="jumpClass(index.toString())">
-                    <div class="anchor-item-body">
-                        <div class="topic-anchor-item-img">
-                            <img :src="item.type.typeImage"/>
-                        </div>
-                        <div class="topic-anchor-item-text"><span>{1{ item.type.typeName }}</span></div>
+            {{range  $index, $type :=.types}}
+            <div class="topic-anchor-item" onclick="jumpClass('{{$index}}')">
+                <div class="anchor-item-body">
+                    <div class="topic-anchor-item-img">
+                        <img src="{{.type.typeImage}}"/>
                     </div>
+                    <div class="topic-anchor-item-text"><span>{{ .type.typeName }}</span></div>
                 </div>
-            </template>
+            </div>
+            {{end}}
         </div>
 
         <div class="topic-anchor-to-right anchor-arrow">
@@ -213,34 +49,35 @@
         </div>
     </div>
 
+
     <div class="topic-body">
-        <div class="topic-body-list" v-for="(item,index) in topic.types" :key="index">
-            <div class="topic-body-title" :class="'to-class'+index">
-                {1{ item.type.typeName }}
+
+        {{range $index, $type :=.types}}
+        <div class="topic-body-list" >
+            <div class="topic-body-title to-class{{$index}}">
+                {{ .type.typeName }}
             </div>
             <div class="topic-body-items">
-
-                <div class="topic-body-item" v-for="(subItem,index) in item.skuList"
-                     @click="JumpRouter('/detail/'+subItem.id,routerPaths)">
-                    <!--               @click="router.push({path:'/detail/'+subItem.id,query:routerPaths})">-->
+                {{range .skuList}}
+                <div class="topic-body-item" onclick="JumpRouter('/detail?skuId='+{{.id}})">
                     <div class="topic-body-left">
                         <div class="topic-item-img">
-                            <img :src="subItem.skuImage" alt="image">
+                            <img src="{{.skuImage}}" alt="image">
                         </div>
                         <div class="topic-item-text">
                             <div class="topic-item-name">
-                                {1{ subItem.skuName }}
+                                {{ .skuName }}
                             </div>
                             <div class="topic-item-description">
-                                {1{ subItem.price }}
+                                {{ .price }}
                             </div>
                             <div class="topic-item-num">
-                                <div class="topic-item-price">{1{ subItem.price }}</div>
-                                <div class="topic-item-originalPrice">{1{ subItem.historicalPrices }}</div>
-                                <div class="topic-item-discountPercentage">{1{
-                                    (100 - subItem.price * 100 / subItem.historicalPrices).toFixed(0)
-                                    }}
-                                </div>
+                                <div class="topic-item-price">{{ .price }}</div>
+                                {{$dis := discalc .price .historicalPrices}}
+                                {{if and (ne $dis "0") (ne $dis "NaN")}}
+                                <div class="topic-item-originalPrice">{{ .historicalPrices }}</div>
+                                <div class="topic-item-discountPercentage">{{ $dis }}</div>
+                                {{end}}
                             </div>
                         </div>
                     </div>
@@ -248,188 +85,13 @@
                         <div class="topic-item-btn">立即购买</div>
                     </div>
                 </div>
+                {{end}}
             </div>
         </div>
+        {{end}}
     </div>
 </div>
-<div class="bottom-bar">
-    <!--    合作伙伴-->
-    <div class="partners">
-        <div class="partners-line">
-            <ul>
-                <li>
-                    <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="/api/static/steam-partners.png" alt=""></div></li>-->
-                <li>
-                    <div><img src="/api/static/image/footer/footer-slider-steam.png" alt=""></div>
-                </li>
-                <li>
-                    <div><img src="/api/static/image/footer/footer-slider-google.png" alt=""></div>
-                </li>
-                <li>
-                    <div><img src="/api/static/image/footer/footer-slider-tencent.png" alt=""></div>
-                </li>
-                <li>
-                    <div><img src="/api/static/image/footer/footer-slider-microsoft.png" alt=""></div>
-                </li>
-                <li>
-                    <div><img src="/api/static/image/footer/footer-slider-garena.png" alt=""></div>
-                </li>
-                <li>
-                    <div><img src="/api/static/image/footer/footer-slider-ea.png" alt=""></div>
-                </li>
-                <li>
-                    <div><img src="/api/static/image/footer/footer-slider-riot.png" alt=""></div>
-                </li>
-                <li>
-                    <div><img src="/api/static/image/footer/footer-slider-pubg.png" alt=""></div>
-                </li>
-                <li>
-                    <div><img src="/api/static/image/footer/footer-slider-ubisoft.png" alt=""></div>
-                </li>
-                <li>
-                    <img
-                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAAXNSR0IArs4c6QAAAhdJREFUSEulVU1rE1EUPdfEgBAIg27UjT+jS13pTpeKriMxRQxJ3hukBnc2ZUwiLUFGxRbbKqZ/Rve+2bswkSB13jDvygtJSZPJl5nlzJz7zr33nPNISlmL4/it53k/seJDQoh3RMRKqc1Op6NXwZOU8j6ABoATrfXLZrP5a9kCVC6Xr6TT6a8ANpj5Y6/Xe+b7frRMAbI/SSkLANoALG1Pa/16GQYDcLFYvJzNZr8DuAbgFMBxGIaVVqvVm8dgAM7n8xcdx3kDwDIAM4dE1FZKufOGOADbp1Kp3EylUkfD0+0rzczvoyh6MauFM3ChUHByudwxM98ZFWRm28JeEARbSQzOwMPBPQLwaaLP0Bizz8y1SSGdA5dKpUuZTOYHgKsTBf4C+KKUejzO4BzYAlzX3WXmJwAuTBQYrLHb7e74vv/bfpsCCyE2iOgzgBsJazq1QjLGCM/z/iSd7Bhjdono4Ywd2xYa/X7/1RTYAoQQ94hoH0BuVgFjzEkiWEp5F8DBPLA10jzaDxKGZonMpr3EwD4YY9zEgUkp94YaT1qV9f12vV6fXtVaIpFSJsnT6vswjuOtmfJ0XddhZiuO22PrsaJoB0HwfK4xhBC3iOhwZUuuFQbDGPoG4PoohrTWYlGOjQKwaE0/DMBGGIb1Rfk1cNVa0SuEsO7ZAXAURdH2IqrjRhldN7FS6unK1021Wq0x839ddP8AAxJAzJtS4CsAAAAASUVORK5CYII="/>
-                </li>
-            </ul>
-        </div>
-
-        <!--      服务支持-->
-        <div class="partners-service-guarantee">
-            <div class="service-guarantee">
-                <div class="sg-icon" style="background: rgb(225, 222, 250);">
-                    <img
-                            class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA1hJREFUWEftl0FO21AQhv+ZOBWtVDXLgE1wd1BQ+wLquuYE0BM0nKBwg9yg9AZwgnKDuPsWLBVaujOJTdg1Wwj2VM9JIIQ4iVMhNn1ZxFLezHz+Z97MC+GRF/1LfKu46AhRLWz+mtrP1IYa3CquOGCpBecnU/sZa2jbqqCD+b7XGlRrHIBdVLZ/4fmjVB4LUJp7XQXxBuexPggxKgWmuawYRi3G5U4Ynu6lQYwFsAt24frZc5cpJ4MQlrXiSBTdqwEdPEf5mgid5fLiDFOvBzQWQG/UaYjacAkknJcbJSxLOYiuakHz540f01SKITWAxwbXvicCuIUQl8A3EBqsfdmuhM2TXb1HBzfYqEGiMzJGv3kmBXqbO0qQVmKvHh4mQftXyVS7ROyQEY+Uvd9mYgUGg9nmWxVTtAHEYAP7vj+62qcuwjTDeauslVAQaQGyEBPWg8Bzsza2oQqYs8vbnHuyAZGOP+psY1DrLDh8r581gP5uBEdO51lajcDb7KRJvoAY+qMVihM/AjB9bjS8g7EpmJ9b2iR+qrTx7WLto9XLfT9AyVqtxnLlBOGxk3TIuVdV5pl7YjBi1x9Qaeoa6KQArXpwtDkIkCUNUwOUzFUfhL16cFgtWaoqAqcReokCWdZUAPNzy3tExuZVdKkuLk79TrvOfQDR3ZYr5NfD7/ujgFIBdDslkY1+4xiRx8LbxHkHiLYa4UkSUNcM88x2r2J06ekeJ8A7SOzVQ6+c+RiWrPIBBEoIyTQjQInICyD6KpFUg4vjsUfONpWKiY5EZKsRekMHUqoCC1bZFZCrc9w7diTk1cPD7Sw5XrBWXUHs1gMv8TO4sgFAUh2lQS1YayIiO8Nad1fZ4aZDFcgIoJuSXBt/CFj3g29DU/agCuj7AiNf42t5mXYzyghwWxOT1EHS0pk/NcIfqXFSf+gOm7tF2FeUkwBY5vIuYqigeZLaoB4WYHbR1cc4PD+tZO4D9xQwlR6/fj08SnU2GMSaXWoJ4mrY/H3v8tLbm6pAyVo7gMgbIfH1WCaCAqgAiSpxJD7QTs0CMRcEqBAZ6+3oKmnXmRUoFhdtg7n7tt0mK6T/I3xMbpJ6xHfvCYlzPfN7ryPJz2eUk0oQnI7smFMNo0kKcNI9/wEeXYG/2/HLMDfFEZMAAAAASUVORK5CYII="
-                            draggable="false">
-                </div>
-                <div class="sg-info">
-                    <div>自动发货</div>
-                    <div>提供最快发货</div>
-                </div>
-            </div>
-
-            <div class="service-guarantee">
-                <div class="sg-icon" style="background: rgb(234, 217, 247);">
-                    <img
-                            class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                            src="/api/static/image/footer/footer-promise-2.png"
-                            draggable="false">
-                </div>
-                <div class="sg-info">
-                    <div>正版保障</div>
-                    <div>官方正版采购,安全保障</div>
-                </div>
-            </div>
-
-            <div class="service-guarantee">
-                <div class="sg-icon" style="background: rgb(245, 221, 231);">
-                    <img
-                            class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                            src="/api/static/image/footer/footer-promise-3.png"
-                            draggable="false">
-                </div>
-                <div class="sg-info">
-                    <div>客户服务</div>
-                    <div>提供专业的客服咨询</div>
-                </div>
-            </div>
-
-            <div class="service-guarantee">
-                <div class="sg-icon" style="background: rgb(226, 235, 230);">
-                    <img
-                            class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                            src="/api/static/image/footer/footer-promise-4.png"
-                            draggable="false">
-                </div>
-                <div class="sg-info">
-                    <div>100%满意度</div>
-                    <div>给予您满意的购物体验</div>
-                </div>
-            </div>
-
-
-        </div>
-    </div>
-
-    <div class="bottom-bar-about">
-        <div class="bottom-bar-about-left">
-            <div class="about-contact about-row">
-                <div class="about-row-title">联系我们</div>
-                <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="/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>
-
-            <div class="about-me about-row">
-                <div class="about-row-title">关于我们</div>
-                <div class="about-row-item">关于我们</div>
-                <div class="about-row-item">联系我们</div>
-                <div class="about-row-item">条款与条件</div>
-                <div class="about-row-item">隐私和Cookie</div>
-            </div>
-
-            <div class="about-issue about-row">
-                <div class="about-row-title">常见问题</div>
-                <div class="about-row-item">帮助中心</div>
-                <div class="about-row-item">售后服务</div>
-                <div class="about-row-item">关于退款</div>
-                <div class="about-row-item">关于发货</div>
-            </div>
-        </div>
 
-        <div class="bottom-bar-about-right">
-            <div class="about-my-use about-row-title">
-                我们使用
-            </div>
-            <div class="my-user-images">
-                <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="/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="/api/static/image/logo.png" width="130" height="35">
-    </div>
-    <div class="footer-about-app">
-        <img src="/api/static/image/footer/footer-app-0.png"/>
-        <img src="/api/static/image/footer/footer-app-1.png"/>
-    </div>
-
-    <!--    备案-->
-    <div class="filing">
-        <div class="filing-body">xxx省xxx市xxx区666号xxx公司</div>
-    </div>
-
-</div>
+{{template "BottomBar.tmpl" .}}
 </body>
 </html>

main.go

@@ -22,7 +22,7 @@ func runGin() {
 	apiGroup := Router.Group(router.Prefix)
 	Router.SetFuncMap(templatefunc.BaseTemplateFunc())
 	//加载模板
-	Router.LoadHTMLGlob("file/static/*.html")
+	Router.LoadHTMLGlob("file/static/*")
 	apiGroup.StaticFS("/static", http.Dir("file/resources"))
 	apiGroup.StaticFS("/assets", http.Dir("file/assets"))
 	router.InitRouter(apiGroup)

router/TestRouter.go

@@ -5,6 +5,7 @@ import (
 	"demo/data/dao/manage"
 	"demo/data/domain"
 	"demo/share"
+	"demo/util/templatefunc"
 	"encoding/json"
 	"fmt"
 	"github.com/gin-gonic/gin"
@@ -22,6 +23,7 @@ func TestRouth(engine *gin.RouterGroup) {
 		PushRouter(user, "GET", "/home", Home)
 		PushRouter(user, "GET", "/topic", Topic)
 		PushRouter(user, "GET", "/detail", Detail)
+		PushRouter(user, "GET", "/info/:infoName", InfoPage)
 	}
 
 }
@@ -51,25 +53,6 @@ func DataTest(c *gin.Context) {
 
 func Home(c *gin.Context) {
 	m := make(map[string]interface{})
-	//获取登录信息
-	/*	id := GetUserId(c)
-		if id != 0 {
-			var userInfo = domain.User{}
-			_, err := configs.Engine.Table("user").Where("id = ?", id).Get(&userInfo)
-			if err != nil {
-				c.JSON(200, CreateResultError(401, "用户信息查询失败"))
-				return
-			}
-			userInfoMap := map[string]interface{}{
-				"userInfo": userInfo,
-			}
-			u, err := json.Marshal(userInfoMap)
-			if err != nil {
-				c.JSON(200, CreateResultError(401, "用户查询失败"))
-				return
-			}
-			json.Unmarshal(u, &m)
-		}*/
 	//首页宣传信息
 	data, err := dao.GetAdviceData()
 	if err != nil {
@@ -109,25 +92,6 @@ func Home(c *gin.Context) {
 func Topic(c *gin.Context) {
 	topicId := c.Query("topicId")
 	m := make(map[string]interface{})
-	//获取登录信息
-	/*	id := GetUserId(c)
-		if id != 0 {
-			var userInfo = domain.User{}
-			_, err := configs.Engine.Table("user").Where("id = ?", id).Get(&userInfo)
-			if err != nil {
-				c.JSON(200, CreateResultError(401, "用户信息查询失败"))
-				return
-			}
-			userInfoMap := map[string]interface{}{
-				"userInfo": userInfo,
-			}
-			u, err := json.Marshal(userInfoMap)
-			if err != nil {
-				c.JSON(200, CreateResultError(401, "用户查询失败"))
-				return
-			}
-			json.Unmarshal(u, &m)
-		}*/
 	list, err := dao.GetTopicPageDataListById(cast.ToInt64(topicId))
 	if err != nil {
 		c.JSON(200, CreateResultError(401, "主题列表查询失败"))
@@ -143,28 +107,10 @@ func Topic(c *gin.Context) {
 	fmt.Println("data:", m)
 	c.HTML(http.StatusOK, "topic.html", m)
 }
+
 func Detail(c *gin.Context) {
 	skuId := c.Query("skuId")
 	m := make(map[string]interface{})
-	//获取登录信息
-	/*	id := GetUserId(c)
-		if id != 0 {
-			var userInfo = domain.User{}
-			_, err := configs.Engine.Table("user").Where("id = ?", id).Get(&userInfo)
-			if err != nil {
-				c.JSON(200, CreateResultError(401, "用户信息查询失败"))
-				return
-			}
-			userInfoMap := map[string]interface{}{
-				"userInfo": userInfo,
-			}
-			u, err := json.Marshal(userInfoMap)
-			if err != nil {
-				c.JSON(200, CreateResultError(401, "用户查询失败"))
-				return
-			}
-			json.Unmarshal(u, &m)
-		}*/
 	//标签
 	tagList, err := manage.GetGoodsTagList(domain.GoodsTag{}, 1, 10000)
 	if err != nil {
@@ -199,6 +145,25 @@ func Detail(c *gin.Context) {
 	c.HTML(http.StatusOK, "detail.html", m)
 }
 
+func InfoPage(c *gin.Context) {
+	infoName := c.Param("infoName")
+	content := templatefunc.InfoPageContentMap[infoName]
+	m := make(map[string]interface{})
+	if content.InfoName != "" {
+		dm, err := json.Marshal(content)
+		if err != nil {
+			fmt.Println(err)
+			c.JSON(200, CreateResultError(401, "json转换失败"))
+			return
+		}
+		json.Unmarshal(dm, &m)
+		c.HTML(http.StatusOK, "info.html", m)
+		return
+	}
+	c.JSON(200, CreateResultError(401, "页面不存在"))
+
+}
+
 func GetUserId(c *gin.Context) int64 {
 	header := c.GetHeader("auth-sign")
 	if header == "" {
@@ -210,5 +175,4 @@ func GetUserId(c *gin.Context) int64 {
 	}
 	i, err := strconv.ParseInt(claims["iss"].(string), 10, 32)
 	return i
-
 }

util/templatefunc/BaseTemplateFunc.go

@@ -37,11 +37,22 @@ func BaseTemplateFunc() template.FuncMap {
 // arg2 现价
 func DiscountCalculation(arg1, arg2 float64) string {
 	f := 1.0 - (arg2)/arg1
+	if f < 0 {
+		f = f * -1
+	}
+
 	return strconv.FormatFloat(f*100, 'f', 0, 64)
+	//res := strconv.FormatFloat(f*100, 'f', 0, 64)
+	//fmt.Println("=========>", arg1, ",", arg2, ",", res)
+	//return res
 }
+
+// SafeHTML 将数据转为html输出，而不是文本
 func SafeHTML(s string) template.HTML {
 	return template.HTML(s)
 }
+
+// ToJson 将内容转为json
 func ToJson(arg any) string {
 	//将arg转换为json字符串
 	marshal, err := json.Marshal(arg)