摸鱼累了

data/dao/OrderDao.go

@@ -183,6 +183,25 @@ func GetOrderByUserId(userId int64) ([]domain.GoodsOrder, error) {
 		orders = append(orders, order)
 	}
 	return orders, nil
+} // GetOrderByUserId 获取订单集合
+func GetOrderByUserIdAndPageSize(userId int64, pageNum, pageSize int) ([]domain.GoodsOrder, error) {
+	order := domain.GoodsOrder{}
+	rows, err := configs.Engine.Table("goods_order").Where("create_by = ?", userId).Desc("create_time").
+		Limit(pageSize, (pageNum-1)*pageSize).Rows(&order)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+	var orders []domain.GoodsOrder
+	for rows.Next() {
+		var order domain.GoodsOrder
+		err := rows.Scan(&order)
+		if err != nil {
+			return nil, err
+		}
+		orders = append(orders, order)
+	}
+	return orders, nil
 }
 
 // GetUserWalletByUserId 获取用户的钱包信息

file/resources/css/bar.css

@@ -0,0 +1,205 @@
+.router-bar-user-login-view {
+    display: flex;
+    position: fixed;
+    flex-direction: column;
+    top: 0;
+    left: 0;
+    width: 100VW;
+    height: 100VH;
+    background-color: #fafafa;
+    z-index: 12;
+}
+
+.mobile-login-header {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    min-width: 20px;
+    min-height: 20px;
+    height: 4VW;
+    line-height: 4VW;
+    padding: 2VW 2VW 18VW;
+}
+
+.mobile-login-header .mobile-login-header-back {
+    display: flex;
+    justify-content: space-evenly;
+    width: 4VW;
+    height: 4VW;
+    border-radius: 50%;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+.mobile-login-form form {
+    display: flex;
+    flex-direction: column;
+    padding: 10px 20px;
+
+
+}
+
+.mobile-login-form form .select-login-type {
+    display: flex;
+    flex-direction: row;
+    padding: 3.2VW 8VW;
+}
+
+.mobile-login-form form .select-login-type .select-login-type-item {
+    padding-right: 6VW;
+    font-weight: inherit;
+    font-size: 4.3VW;
+    line-height: 5VW;
+    height: 5VW;
+    transition: font-size 0.3s;
+}
+
+.mobile-login-form form .select-login-type .login-type-select {
+    font-weight: bold;
+    font-size: 5.3VW;
+}
+
+.mobile-login-form .login-view-email {
+    display: flex;
+    flex-direction: column;
+    height: 10VW;
+    padding: 0 8VW 5.4VW;
+}
+
+.mobile-login-form .login-view-email .login-view-email-input {
+    /*height: 10VW;*/
+    /*line-height: 10VW;*/
+    display: flex;
+    margin-bottom: 5VW;
+    width: 100%;
+
+    background-color: #dddddd;
+    border-radius: 5VW;
+}
+
+.mobile-login-form .login-view-email .login-view-email-input input {
+    width: 100%;
+    border-radius: 5VW;
+    height: 10VW;
+    line-height: 10VW;
+    border: none;
+    font-size: 3.6VW;
+    padding: 0 5VW;
+    background-color: transparent;
+}
+
+.mobile-login-form .login-view-email .login-view-email-input .show-password {
+    margin: 0 2VW;
+    line-height: 10VW;
+    height: 10VW;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.mobile-login-form .login-view-email .login-view-email-btn {
+    width: 100%;
+    border-radius: 5VW;
+    height: 10VW;
+    line-height: 10VW;
+    border: none;
+    font-size: 3.6VW;
+    background-color: #1475fa;
+    color: #fafafa;
+    text-align: center;
+
+}
+
+.mobile-login-form .login-view-email .other-handler {
+    display: flex;
+    padding: 3.2VW 1VW;
+    font-size: 3.2VW;
+    justify-content: space-between;
+    color: #1475fa;
+}
+.mobile-register-form{
+    display: flex;
+    flex-direction: column;
+
+    padding: 0 8VW 5.4VW;
+
+}
+.mobile-register-form .mobile-register-form-title{
+    font-weight: bold;
+    font-size: 5.3VW;
+    padding: 3.2VW 1VW;
+
+}
+/*注册*/
+.mobile-register-form .mobile-register-form .login-view-register-input {
+    height: 10VW;
+    line-height: 10VW;
+    display: flex;
+    margin-bottom: 5VW;
+    width: 100%;
+    background-color: #dddddd;
+    border-radius: 5VW;
+    justify-content: space-between;
+}
+
+.mobile-register-form form .login-view-register-input {
+
+    display: flex;
+    margin-bottom: 5VW;
+    width: auto;
+    background-color: #dddddd;
+    border-radius: 5VW;
+}
+
+.mobile-register-form form .login-view-register-input input {
+    width: 100%;
+    border-radius: 5VW;
+    height: 10VW;
+    line-height: 10VW;
+    border: none;
+    font-size: 3.6VW;
+    padding: 0 5VW;
+    background-color: transparent;
+}
+
+.mobile-register-form form .login-view-register-input .show-password {
+    margin: 0 2VW;
+    line-height: 10VW;
+    height: 10VW;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.mobile-register-form form .login-view-email-btn {
+    width: 100%;
+    border-radius: 5VW;
+    height: 10VW;
+    line-height: 10VW;
+    border: none;
+    font-size: 3.6VW;
+    background-color: #1475fa;
+    color: #fafafa;
+    text-align: center;
+
+}
+.mobile-register-form form .register-code{
+    width: 50%;
+    border-radius: 5VW;
+    cursor: pointer;
+    height: 10VW;
+    line-height: 10VW;
+    border: none;
+    font-size: 3.6VW;
+    background-color: #1475fa;
+    color: #fafafa;
+    text-align: center;
+}
+.mobile-register-form form .other-handler {
+    display: flex;
+    padding: 3.2VW 1VW;
+    font-size: 3.2VW;
+    justify-content: space-between;
+    color: #1475fa;
+}
+

file/resources/css/detail.css

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

file/resources/css/index.css

@@ -419,8 +419,7 @@
         text-security: disc;
     }
 
-    .login-phone-input
-    :active {
+    .login-phone-input :active {
         border: transparent 0;
     }
 
@@ -555,8 +554,7 @@
         text-security: disc;
     }
 
-    .login-email-input
-    :active {
+    .login-email-input :active {
         border: transparent 0;
     }
 

file/resources/css/search.css

@@ -1,133 +1,313 @@
-.search-result {
-    padding-top: 80px;
-    background-color: #f8f8f8;
-}
-.search-result .search-result-body {
-    padding-top: 30px;
-    width: 1170px;
-    margin: 0 auto;
-    text-align: left;
-}
-.search-result .search-result-body .search-result-title {
-    margin-top: 30px;
-    font-size: 30px;
-    font-weight: bold;
-}
-.search-result .search-result-body .search-total {
-    margin: 10px auto 16px;
-    font-size: 12px;
-    border-bottom: #d0d1d1;
-}
-.search-result .search-result-body .card-list {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    padding: 5px 0 0 0;
-    margin-top: 15px;
-    overflow: hidden;
-}
-.search-result .search-result-body .card-list div {
-    margin-right: 25px;
-    display: inline-block;
-}
-.search-result .search-result-body .card-list div:nth-child(6n) {
-    margin-right: 0;
-}
-.search-result .search-result-body .card-list div:nth-child(6n+1) {
-    margin-left: 5px;
-}
-.search-result .search-result-body .search-pagination {
-    margin-top: 30px;
-    display: flex;
-    justify-content: center;
-}
+@media screen and (min-width: 10px) and (max-width: 768px) {
 
+    .search-result {
+        background-color: #f8f8f8;
+    }
 
+    .search-result .search-result-body {
+        width: calc(100VW - 6.4vw);
+        padding-top: 2.6VW;
+        margin: 0 auto;
+        text-align: left;
+    }
 
+    .search-result .search-result-body .search-result-title {
+        font-size: 5VW;
+        font-weight: bold;
+    }
 
-.goods-sku-info {
-    display: block;
-    max-width: 170px;
-    margin: 0 25px 25px 0;
-    cursor: pointer;
-}
+    .search-result .search-result-body .search-total {
+        margin: 10px auto 16px;
+        font-size: 2.6VW;
+        border-bottom: #d0d1d1;
+    }
 
-.goods-sku-info .goods-img {
-    padding: 0;
-    margin: 0 0 12px 0;
-    overflow: hidden;
-    display: flex;
-    box-shadow: #dddddd 0 0 6px;
-    position: relative;
-}
+    .search-result .search-result-body .card-list {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        padding: 5px 0 0 0;
+        margin-top: 15px;
+        overflow: hidden;
+    }
 
-.goods-sku-info .goods-img img {
-    height: 228px;
-    width: 170px;
-}
+    .search-result .search-result-body .card-list div {
+        margin-right: 25px;
+        display: inline-block;
+    }
 
-.goods-sku-info .goods-img img:hover {
-    z-index: 0;
-}
+    .search-result .search-result-body .card-list div:nth-child(6n) {
+        margin-right: 0;
+    }
 
-.goods-sku-info .goods-img:hover::after {
-    opacity: 1;
-    box-shadow: rgba(100, 100, 100, 0.3) 0 0 8px 3px;
-}
+    .search-result .search-result-body .card-list div:nth-child(6n+1) {
+        margin-left: 5px;
+    }
 
-.goods-sku-info .goods-img::after {
-    content: "";
-    position: absolute;
-    width: 170px;
-    height: 228px;
-    box-sizing: border-box;
-    background: rgba(229, 229, 229, 0.2);
-    animation: enlarge 0.2s ease 0s 1 normal none running;
-    opacity: 0;
-    transition: all 0.3s ease 0s;
-}
+    .search-result .search-result-body .search-pagination {
+        margin-top: 30px;
+        display: flex;
+        justify-content: center;
+    }
 
-.goods-sku-info .goods-name {
-    height: 38px;
-    font-size: 12px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-}
 
-.goods-sku-info .goods-price {
-    font-size: 16px;
-    margin: 5px 0;
-    font-weight: bold;
-}
+    .goods-sku-info {
+        display: block;
+        max-width: 170px;
+        margin: 0 25px 25px 0;
+        cursor: pointer;
+    }
 
-.goods-sku-info .goods-price::before {
-    content: "￥";
-}
+    .goods-sku-info .goods-img {
+        padding: 0;
+        margin: 0 0 12px 0;
+        overflow: hidden;
+        display: flex;
+        box-shadow: #dddddd 0 0 6px;
+        position: relative;
+    }
 
-.goods-sku-info .goods--original-price {
-    display: inline-block;
-    text-decoration: line-through;
-    font-size: 12px;
-    margin: 0;
-    padding: 0;
-}
+    .goods-sku-info .goods-img img {
+        height: 228px;
+        width: 170px;
+    }
 
-.goods-sku-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-sku-info .goods-img img:hover {
+        z-index: 0;
+    }
 
-.goods-sku-info .goods-discount-percentage::before {
-    content: "-";
-}
+    .goods-sku-info .goods-img:hover::after {
+        opacity: 1;
+        box-shadow: rgba(100, 100, 100, 0.3) 0 0 8px 3px;
+    }
+
+    .goods-sku-info .goods-img::after {
+        content: "";
+        position: absolute;
+        width: 170px;
+        height: 228px;
+        box-sizing: border-box;
+        background: rgba(229, 229, 229, 0.2);
+        animation: enlarge 0.2s ease 0s 1 normal none running;
+        opacity: 0;
+        transition: all 0.3s ease 0s;
+    }
+
+    .goods-sku-info .goods-name {
+        height: 38px;
+        font-size: 12px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+    }
+
+    .goods-sku-info .goods-price {
+        font-size: 16px;
+        margin: 5px 0;
+        font-weight: bold;
+    }
+
+    .goods-sku-info .goods-price::before {
+        content: "￥";
+    }
+
+    .goods-sku-info .goods--original-price {
+        display: inline-block;
+        text-decoration: line-through;
+        font-size: 12px;
+        margin: 0;
+        padding: 0;
+    }
 
-.goods-sku-info .goods-discount-percentage::after {
-    content: "%";
+    .goods-sku-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-sku-info .goods-discount-percentage::before {
+        content: "-";
+    }
+
+    .goods-sku-info .goods-discount-percentage::after {
+        content: "%";
+    }
+
+    .pagination {
+        font-size: 3.2VW;
+        padding-bottom: 3VW;
+        display: flex;
+        list-style-type: none;
+    }
+    .pagination li {
+        margin: 0 5px;
+        cursor: pointer;
+    }
+    .pagination li.active {
+        font-weight: bold;
+    }
+    .pagination li.disabled {
+        color: #ccc;
+        cursor: not-allowed;
+    }
 }
+
+@media screen and (min-width: 768px) {
+    .search-result {
+        padding-top: 80px;
+        background-color: #f8f8f8;
+    }
+
+    .search-result .search-result-body {
+        padding-top: 30px;
+        width: 1170px;
+        margin: 0 auto;
+        text-align: left;
+    }
+
+    .search-result .search-result-body .search-result-title {
+        margin-top: 30px;
+        font-size: 30px;
+        font-weight: bold;
+    }
+
+    .search-result .search-result-body .search-total {
+        margin: 10px auto 16px;
+        font-size: 12px;
+        border-bottom: #d0d1d1;
+    }
+
+    .search-result .search-result-body .card-list {
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+        flex-wrap: wrap;
+        padding: 5px 0 0 0;
+        margin-top: 15px;
+        width: auto;
+        overflow: hidden;
+    }
+
+    .search-result .search-result-body .card-list div {
+        margin-right: 25px;
+        display: inline-block;
+    }
+
+
+
+    .search-result .search-result-body .search-pagination {
+        margin-top: 30px;
+        display: flex;
+        justify-content: center;
+        min-height: 30px;
+    }
+
+
+    .goods-sku-info {
+        display: block;
+        max-width: 170px;
+        margin: 0 25px 25px 0;
+        cursor: pointer;
+    }
+
+    .goods-sku-info .goods-img {
+        padding: 0;
+        margin: 0 0 12px 0;
+        overflow: hidden;
+        display: flex;
+        box-shadow: #dddddd 0 0 6px;
+        position: relative;
+    }
+
+    .goods-sku-info .goods-img img {
+        height: 228px;
+        width: 170px;
+    }
+
+    .goods-sku-info .goods-img img:hover {
+        z-index: 0;
+    }
+
+    .goods-sku-info .goods-img:hover::after {
+        opacity: 1;
+        box-shadow: rgba(100, 100, 100, 0.3) 0 0 8px 3px;
+    }
+
+    .goods-sku-info .goods-img::after {
+        content: "";
+        position: absolute;
+        width: 170px;
+        height: 228px;
+        box-sizing: border-box;
+        background: rgba(229, 229, 229, 0.2);
+        animation: enlarge 0.2s ease 0s 1 normal none running;
+        opacity: 0;
+        transition: all 0.3s ease 0s;
+    }
+
+    .goods-sku-info .goods-name {
+        height: 38px;
+        font-size: 12px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+    }
+
+    .goods-sku-info .goods-price {
+        font-size: 16px;
+        margin: 5px 0;
+        font-weight: bold;
+    }
+
+    .goods-sku-info .goods-price::before {
+        content: "￥";
+    }
+
+    .goods-sku-info .goods--original-price {
+        display: inline-block;
+        text-decoration: line-through;
+        font-size: 12px;
+        margin: 0;
+        padding: 0;
+    }
+
+    .goods-sku-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-sku-info .goods-discount-percentage::before {
+        content: "-";
+    }
+
+    .goods-sku-info .goods-discount-percentage::after {
+        content: "%";
+    }
+    .pagination {
+        display: flex;
+        list-style-type: none;
+        padding: 0;
+    }
+    .pagination li {
+        margin: 0 5px;
+        cursor: pointer;
+    }
+    .pagination li.active {
+        font-weight: bold;
+    }
+    .pagination li.disabled {
+        color: #ccc;
+        cursor: not-allowed;
+    }
+}

file/resources/css/user.css

@@ -361,10 +361,11 @@
     width: 16.5VW;
     height: 16.5VW;
     border-radius: 50%;
+    box-shadow: rgba(100, 100, 100, 0.5) 0 2px 4px;
 }
 
 
-.router-bar-user-info-view .router-user-logout{
+.router-bar-user-info-view .router-user-logout {
     font-size: 3.7VW;
     text-align: center;
     padding: 4VW;
@@ -372,4 +373,230 @@
     margin-bottom: 4VW;
 }
 
+/*订单*/
+.router-bar-user-order-view {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding: 0 4VW;
+}
+
+.router-bar-user-order-view .order-tags {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    background-color: white;
+}
+
+.router-bar-user-order-view .tag-list {
+    background-color: white;
+    display: flex;
+    justify-content: space-around;
+    height: 12VW;
+    line-height: 12VW;
+    font-size: 4VW;
+}
+
+.router-bar-user-order-view .tag-item {
+    transition: font-size .3s, color .3s;
+    padding: 0 2VW;
+}
+
+.router-bar-user-order-view .tag-item-select {
+    font-weight: bold;
+    font-size: 4.2VW;
+
+    color: #1470da;
+}
+
+.router-bar-user-order-view .order-content {
+    display: flex;
+    flex-direction: column;
+    width: 92VW;
+    height: calc(100VH - 18.5VW);
+}
+
+.router-bar-user-order-view .order-content .order-empty {
+    margin: 0 auto;
+    text-align: center;
+    font-size: 4.6VW;
+    color: #666666;
+}
+
+.router-bar-user-order-view .order-content .order-empty img {
+    margin-top: calc(50VW - 9.5VW);
+    width: 50VW;
+    text-align: center;
+    font-size: 3.6VW;
+}
+
+.router-bar-user-order-view .order-content .order-list {
+    color: #666666;
+    overflow: auto;
+}
+.router-bar-user-order-view .order-content .order-list::-webkit-scrollbar {
+    display: none; /* 隐藏滚动条 */
+}
+
+.router-bar-user-order-view .order-content .order-list .order-item {
+    display: flex;
+    flex-direction: column;
+
+    padding: 3VW 4VW 4VW;
+    background-color: rgba(100, 145, 123, 0.1);
+    margin: 1.2VW 0;
+    border-radius: 3VW;
+}
+
+.router-bar-user-order-view .order-content .order-list div {
+    display: -webkit-box; /* 用于设置弹性盒子模型 */
+    -webkit-box-orient: vertical; /* 设置盒子内文本的垂直排列方式 */
+    overflow: hidden; /* 隐藏超出区域的内容 */
+    -webkit-line-clamp: 1; /* 限制文本行数，例如：2 行 */
+}
+
+.router-bar-user-order-view .order-content .order-list .order-item .order-item-header {
+    /*height: 10.8VW;*/
+    /*line-height: 10.8VW;*/
+    flex-direction: row;
+    font-size: 3.73333vw;
+    line-height: 5.86667vw;
+    display: flex;
+    justify-content: space-between;
+}
+
+.router-bar-user-order-view .order-content .order-list .order-item .order-item-body {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 2.6666VW 0 0;
+}
+
+.router-bar-user-order-view .order-item .order-item-body .order-item-body-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+}
+
+.router-bar-user-order-view .order-item .order-item-body .order-item-body-img {
+    width: 19VW;
+    height: 21.333VW;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    border-radius: 1.3VW;
+    overflow: hidden;
+}
+
+.router-bar-user-order-view .order-item .order-item-body .order-item-body-img img {
+    width: 100%;
+    height: 100%;
+}
+
+.router-bar-user-order-view .order-item .order-item-body .order-item-body-info {
+    width: calc(100% - 11.4VW);
+    margin-left: 5.4VW;
+
+}
+
+.router-bar-user-order-view .order-item .order-item-body .order-item-body-info .order-item-body-info-title, .order-item-body-info-desc {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.router-bar-user-order-view .order-item .order-item-body .order-item-body-info .order-item-body-info-title {
+    color: #333333;
+    height: 6.4VW;
+    font-size: 4.2VW;
+    font-weight: bold;
+    line-height: 6.4VW;
+}
+
+.router-bar-user-order-view .order-item .order-item-body .order-item-body-info .order-item-body-info-title .order-item-body-info-title-name {
+    width: calc(100% - 9VW);
+    color: #333333;
+    height: 6.4VW;
+    font-size: 4.2VW;
+    font-weight: bold;
+    line-height: 6.4VW;
+}
+
+.router-bar-user-order-view .order-item .order-item-body .order-item-body-info .order-item-body-info-title .order-item-body-info-title-price {
+    color: #333333;
+    width: 9VW;
+    height: 6.4VW;
+    font-size: 3.5VW;
+    font-weight: initial;
+    line-height: 6.4VW;
+    text-align: right;
+}
+
+.router-bar-user-order-view .order-item .order-item-body .order-item-body-info .order-item-body-info-desc {
+    height: 5.6VW;
+    font-size: 3.5VW;
+    color: #777777;
+    font-weight: initial;
+    margin-top: 1.5VW;
+    line-height: 5.6VW;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+}
+
+.router-bar-user-order-view .order-item .order-item-body .order-item-body-info .order-item-body-info-desc .order-item-body-info-desc-text {
+    width: calc(100% - 9VW);
+}
+
+.router-bar-user-order-view .order-item .order-item-body .order-item-body-info .order-item-body-info-desc .order-item-body-info-desc-count {
+    width: 9VW;
+    text-align: right;
+}
+
+.router-bar-user-order-view .order-item .order-item-footer {
+    margin-top: 2.4VW;
+    /*height: 5.6VW;*/
+    font-size: 3.733VW;
+    color: #777777;
+    font-weight: initial;
+    line-height: 5.6VW;
+}
+
+.router-bar-user-order-view .order-item .order-item-footer .order-item-footer-orderid {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.router-bar-user-order-view .order-item .order-item-footer .order-item-footer-orderid div {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.router-bar-user-order-view .order-item .order-item-footer .order-item-footer-settlement {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.router-bar-user-order-view .order-item .order-item-footer .footer-orderid-copy {
+    padding-left: 3VW;
+    border-left: #aaaaaa 3px solid;
+    margin-left: 3VW;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.router-bar-user-order-view .order-item .order-item-footer-settlement {
+    padding-top: 2VW;
+}
+
+.router-bar-user-order-view .order-item .order-item-footer-btns {
+    display: none;
+    height: 0;
+    overflow: hidden;
+}
+
 

file/resources/image/.idea/.gitignore

@@ -1,8 +0,0 @@
-# 默认忽略的文件
-/shelf/
-/workspace.xml
-# 基于编辑器的 HTTP 客户端请求
-/httpRequests/
-# Datasource local storage ignored files
-/dataSources/
-/dataSources.local.xml

file/resources/image/.idea/image.iml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="Go" enabled="true" />
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

file/resources/image/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/image.iml" filepath="$PROJECT_DIR$/.idea/image.iml" />
-    </modules>
-  </component>
-</project>

file/resources/image/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$/../../.." vcs="Git" />
-  </component>
-</project>

file/resources/js/Detail.js

@@ -92,13 +92,13 @@ function orderSubmit() {
     fetch('/api/order/submit', {
         method: 'POST',
         headers: {
-            'Content-Type': 'application/json'
+            'Content-Type': 'application/json',
+            "auth-sign": getToken()
         },
         body: JSON.stringify(data)
     })
         .then(response => response.json())
         .then(data => {
-            console.log('Success:', data);
             if (data.code === 200) {
                 let orderAmount = document.getElementById("order-amount")
                 let orderPrice = document.getElementById("order-price")
@@ -113,9 +113,8 @@ function orderSubmit() {
                 orderPrice.innerText = (skuPrice * purchaseQuantity).toFixed(2)
                 orderAmount.innerText = (skuPrice * purchaseQuantity).toFixed(2)
                 orderHistoricalPrice.innerText = (skuHistoricalPrice * purchaseQuantity).toFixed(2)
-
             }
-            alert(data.msg);
+            // alert(data.msg);
         })
         .catch((error) => {
             console.error('Error:', error);

file/resources/js/base.js

@@ -0,0 +1,54 @@
+function getMobileUserInfo() {
+    if (localStorage.getItem("token")) {
+        fetch("/api/user/info", {
+            method: 'GET', headers: {
+                // 'Content-Type': 'application/json',
+                "auth-sign": localStorage.getItem("token")
+            }, // body: JSON.stringify(data)
+        })
+            .then(response => response.json())
+            .then(data => {
+                if (data.code !== 200) {
+                    loginState = false;
+                    let avatar = document.getElementsByClassName("user-info-show-avatar")[0];
+                    // //导航栏头像处理
+                    // avatar.innerText = "请登录";
+                    let name = document.getElementsByClassName("user-info-show-name-text")[0]
+                    //名字
+                    name.innerText = "未登录";
+                    let uisnb = document.getElementsByClassName("user-info-show-name-button")[0]
+                    uisnb.innerText = "请先登录";
+
+
+                    let avater = document.getElementsByClassName("router-user-info-avatar");
+                    avater[0].getElementsByTagName("img")[0].src = data.data.avatar;
+                    let email = document.getElementsByClassName("router-user-info-email");
+                    email[0].getElementsByClassName("value")[0].innerHTML = data.data.email;
+                } else {
+                    let avatar = document.getElementsByClassName("user-info-show-avatar")[0];
+                    //导航栏头像处理
+                    if (data.data.avatar) {
+                        avatar.getElementsByTagName("img")[0].src = data.data.avatar;
+                    }
+                    let name = document.getElementsByClassName("user-info-show-name-text")[0]
+                    //名字
+                    name.innerText = data.data.name;
+                    let uisnb = document.getElementsByClassName("user-info-show-name-button")[0]
+                    uisnb.innerText = "用户信息设置";
+                    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("获取登录信息失败");
+            });
+    }
+    // 将数据对象转换为 JSON 字符串并发送
+    // xhr.send();
+}

file/static/category.html

@@ -38,7 +38,7 @@
         <div class="cgdh-tab-item">按价格由低到高</div>
     </div>
     <div class="category-goods-detail-skus" id="category-goods-detail-skus">
-        <div class="category-goods-detail-sku">
+        <div class="category-goods-detail-sku" data-value="">
             <div class="cgds-left-img">
                 <img src=""/>
             </div>
@@ -73,7 +73,7 @@
             cpgd.style.display = "none"
             cpd.style.display = ""
             console.log(666)
-            let newUrl = window.location.href;
+            let newUrl = window.location.protocol + '//' +window.location.href;
             let number = newUrl.lastIndexOf('/');
             newUrl = newUrl.substring(0, number)
             history.pushState(null, null, newUrl);
@@ -82,7 +82,7 @@
 
     function getSkuList() {
         if (nowGoodsId) {
-            var newUrl = window.location + '/' + nowGoodsId;
+            let newUrl = window.location.protocol + '//' +window.location.host + '/category/' + nowGoodsId;
             history.pushState(null, null, newUrl);
         }
         postCategoryGoodsData(nowGoodsId)
@@ -219,7 +219,7 @@
                 // 创建外层 div
                 const skuDiv = document.createElement('div');
                 skuDiv.classList.add('category-goods-detail-sku');
-
+                skuDiv.dataset.value = item.id;
                 // 左侧图片 div
                 const leftImgDiv = document.createElement('div');
                 leftImgDiv.classList.add('cgds-left-img');
@@ -268,16 +268,39 @@
 
                 // 将生成的 sku div 添加到页面容器中
                 container.appendChild(skuDiv);
+
+                //点击跳转事件
+                skuDiv.addEventListener("click", function () {
+                    window.location.href = "/detail?skuId="+skuDiv.dataset.value
+                })
+
+
             });
     }
 
     // 调用函数，传入实际数据
     // postCategoryData(1, 1, 10);
-    function init() {
+    function initCategory() {
         let ele = null
+        //获取路由
+        let path = ""
+        let host = window.location.host
+        let href = window.location.href
+        let number = href.indexOf(host)
+        if (number === -1) {
+            ele.click()
+        } else {
+            path = href.substring(number + host.length)
+        }
+        let strings = path.split("/");
+
+        let sign = 0
+
         for (let i = 0; i < categoryMenuItems.length; i++) {
             let item = categoryMenuItems[i]
-
+            if (strings[strings.length-1] && item.dataset.value===strings[strings.length-1]){
+                item.classList.add("category-menu-item-select")
+            }
             item.addEventListener("click", function () {
                 for (let j = 0; j < categoryMenuItems.length; j++) {
                     let cmi = categoryMenuItems[j]
@@ -285,28 +308,16 @@
                         cmi.className = "category-menu-item"
                     }
                 }
-                this.className = "category-menu-item category-menu-item-select"
-                var newUrl = window.location.host + '/category/';
-                history.pushState(null, null, newUrl + item.dataset.value);
-                postCategoryData(item.dataset.value, 1, 30)
+                item.className = "category-menu-item category-menu-item-select"
 
+                let newUrl =window.location.protocol + '//' + window.location.host + '/category/';
+                history.pushState(null, "", newUrl + item.dataset.value);
+                postCategoryData(item.dataset.value, 1, 30)
             })
             if (i === 0) {
                 ele = item
             }
         }
-        //获取路由
-        let path = ""
-        let host = window.location.host
-        let href = window.location.href
-        let number = href.indexOf(host)
-        if (number === -1) {
-            ele.click()
-        } else {
-            path = href.substring(number + host.length)
-        }
-        let strings = path.split("/");
-        let sign = 0
         let reg = /^[0-9]*$/
         for (let i = 0; i < strings.length; i++) {
             if (strings[i] === "category") {
@@ -314,9 +325,9 @@
                 if (i === strings.length - 1) {
                     let d = ele.getAttribute("data-value");
                     postCategoryData(d, 1, 30)
-                    var newUrl = window.location.href + '/' + d;
-                    history.pushState(null, null, newUrl);
-                    console.log("base")
+                    let newUrl = window.location.protocol + '//' +window.location.host+ '/category/' + '/' + d;
+                    console.log("ddd",newUrl)
+                    history.pushState(null, "", newUrl);
                 }
                 continue
             }
@@ -332,8 +343,9 @@
                 break
             }
         }
+
     }
 
-    init()
+    initCategory()
 </script>
 </html>

file/static/detail.html

@@ -5,6 +5,7 @@
     <title>{{if .sku.seoTitle}}{{.sku.seoTitle}}{{else}}{{.sku.skuName}} - 易租租{{end}}</title>
     <link rel="stylesheet" href="/api/static//css/index.css">
     <link rel="stylesheet" href="/api/static/css/detail.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="og:title" content="{{if .sku.seoKeywords}}{{.sku.seoTitle}}{{else}}{{.sku.skuName}} - 易租租{{end}}">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <meta name="keywords" content="{{if .sku.seoKeywords}}{{.sku.seoKeywords}} - 易租租{{else}}{{.goods.goodsName}} - 易租租{{end}}">
@@ -35,6 +36,10 @@
                     <div class="goods-show-title">
                         {{ .goods.goodsName }}
                     </div>
+                    <div class="goods-show-price-text">
+                        <span>近30天销量：</span>
+                        <span>0</span>
+                    </div>
                     <div class="goods-show-advantages">
                         {{range $tag := .tags}}
                         {{if $tag}}
@@ -62,6 +67,7 @@
                             </div>
                             <div class="goods-show-des">
                             </div>
+
                         </div>
                     </div>
 
@@ -210,8 +216,27 @@
                                 </div>
                             </div>
                         </div>
+                        <div class="info-left-des mobile-show">
+                            <div class="des-tags">
+                                <div class="des-tag" :class="selectArticleType==0?'des-select-tag':''"
+                                     @click="selectArticleType=0">
+                                    商品介绍
+                                </div>
+                                <!--            <div class="des-tag" :class="selectArticleType==1?'des-select-tag':''" @click="selectArticleType=1">-->
+                                <!--              常见问题-->
+                                <!--            </div>-->
+                            </div>
+                            <div class="info-introduction">
+                                {{range $index, $introduction := .introductions}}
+                                {{if eq $index 0}}
+                                {{ $introduction.goodsArticle | safeHTML}}
+                                {{end}}
+                                {{end}}
+                            </div>
+                            <div class="info-question" v-show="selectArticleType==1"></div>
+                        </div>
 <!--                        TODO 1-->
-                        <div class="order-buy-curtain" id="order-buy-curtain" style="display: none">
+                        <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()">
@@ -271,8 +296,8 @@
                                                     <div class="order-data-item-value">{{.sku.skuName}}</div>
                                                 </div>
                                                 <div class="order-data-item">
-                                                    <div class="order-data-item-name" id="order-count">数量</div>
-                                                    <div class="order-data-item-value">{{.Count}}!!</div>
+                                                    <div class="order-data-item-name" >数量</div>
+                                                    <div class="order-data-item-value" id="order-count">{{.Count}}!!</div>
                                                 </div>
                                                 <div class="order-data-item">
                                                     <div class="order-data-item-name">单价</div>

file/static/mobileLogin.tmpl

@@ -0,0 +1,300 @@
+<div class="router-bar-user-login-view" id="mobile-login" style="display: none">
+    <div class="mobile-login-header">
+        <div class="mobile-login-header-back" id="mobile-login-header-back">
+            <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="m8.786 7.981 4.609-4.585a.555.555 0 1 0-.784-.789l-4.61 4.586L3.43 2.61a.556.556 0 0 0-.788.786l4.57 4.583-4.608 4.583a.555.555 0 1 0 .784.788l4.608-4.584 4.612 4.626a.553.553 0 0 0 .787.001.556.556 0 0 0 0-.786l-4.61-4.625Z"
+                      fill="#999"></path>
+            </svg>
+        </div>
+    </div>
+    <div class="mobile-login-form" id="mobile-login-form">
+        <form>
+            <div class="select-login-type">
+                <!--                <div class="select-login-type-item " id="mobile-login-phone">手机登录</div>-->
+                <div class="select-login-type-item login-type-select" id="mobile-login-email">邮箱登录</div>
+            </div>
+            <div class="login-view-phone"></div>
+            <div class="login-view-email">
+                <div class="login-view-email-input">
+                    <input name="email" placeholder="请输入邮箱"/>
+                </div>
+
+                <div class="login-view-email-input">
+                    <input name="password" placeholder="请输入密码" type="password"/>
+                    <div class="show-password" id="show-password">
+                        <img id="show-eye"
+                             src="/api/static/image/bar/login_eyeopen.png">
+                    </div>
+                </div>
+
+                <div class="login-view-email-btn" id="login-email-btn">
+                    登录
+                </div>
+                <div class="other-handler">
+                    <div class="register-now">立即注册</div>
+                    <div class="forgot-password">忘记密码</div>
+                </div>
+            </div>
+        </form>
+    </div>
+    <div class="mobile-register-form" id="mobile-register-form" style="display: none">
+        <div class="mobile-register-form-title">注册</div>
+        <form>
+            <div class="login-view-register-input">
+                <input name="register-email" placeholder="请输入邮箱"/>
+            </div>
+            <div class="login-view-register-input">
+                <input name="register-password" placeholder="请输入密码" type="password"/>
+                <div class="show-password" id="show-register-password">
+                    <img id="show-eye-register"
+                         src="/api/static/image/bar/login_eyeopen.png">
+                </div>
+            </div>
+            <div class="login-view-register-input">
+                <input name="verify-password" placeholder="请输入确认密码" type="password"/>
+                <div class="show-password" id="show-verify-password">
+                    <img id="show-eye-verify"
+                         src="/api/static/image/bar/login_eyeopen.png">
+                </div>
+            </div>
+            <div class="login-view-register-input">
+                <input name="verify-code" placeholder="请输入验证码" type="text"/>
+                <div class="register-code" id="send-code">发送验证码</div>
+            </div>
+            <div class="login-view-email-btn" id="btn-register">
+                注册
+            </div>
+            <div class="other-handler">
+                <div class="to-login">登录</div>
+                <div class="forgot-password">忘记密码</div>
+            </div>
+        </form>
+    </div>
+</div>
+<script>
+    function init() {
+        let toLogin = document.getElementsByClassName("to-login");
+        let forgotPassword = document.getElementsByClassName("forgot-password");
+        let registerNow = document.getElementsByClassName("register-now");
+
+        for (let i = 0; i < toLogin.length; i++) {
+            let item = toLogin[i];
+            item.addEventListener("click", function () {
+                document.getElementById("mobile-forgotPassword-login").style.display = "none";
+                document.getElementById("mobile-register-form").style.display = "none";
+                document.getElementById("mobile-login-form").style.display = "";
+            })
+        }
+        for (let i = 0; i < registerNow.length; i++) {
+            let item = registerNow[i];
+            item.addEventListener("click", function () {
+                document.getElementById("mobile-login-form").style.display = "none";
+                document.getElementById("mobile-register-form").style.display = "";
+                document.getElementById("mobile-forgotPassword-login").style.display = "none";
+            })
+        }
+
+        for (let i = 0; i < forgotPassword.length; i++) {
+            let item = forgotPassword[i];
+            item.addEventListener("click", function () {
+                document.getElementById("mobile-login-form").style.display = "none";
+                document.getElementById("mobile-register-form").style.display = "none";
+                document.getElementById("mobile-forgotPassword-login").style.display = "";
+            })
+        }
+        document.getElementById("mobile-login-header-back").addEventListener("click", function () {
+            closeLoginPage()
+        })
+
+    }
+
+    function closeLoginPage() {
+        let ele1 = document.getElementById("mobile-login");
+        if (ele1) ele1.style.display = "none";
+        let ele2 = document.getElementById("mobile-login-form");
+        if (ele2) ele2.style.display = "";
+        let ele3 = document.getElementById("mobile-register-form");
+        if (ele3) ele3.style.display = "none";
+        let ele4 = document.getElementById("mobile-forgotPassword-login");
+        if (ele4) ele4.style.display = "none";
+    }
+
+    document.getElementById("login-email-btn").addEventListener('click', () => {
+        // 获取用户输入的邮箱和密码
+        const email = document.querySelector("input[name='email']").value;
+        const password = document.querySelector("input[name='password']").value;
+
+        // 校验邮箱格式
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(email)) {
+            alert("请输入有效的邮箱地址");
+            return;
+        }
+
+        // 校验密码长度
+        if (password.length < 6) {
+            alert("密码长度至少为 6 位");
+            return;
+        }
+
+        // 进行邮箱登录的 API 请求
+        fetch("/api/user/login", {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                username: email,
+                password: password,
+                type: "email" // 将类型修改为 "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)
+                closeLoginPage()
+                getMobileUserInfo()
+                //刷新页面
+                window.location.reload();
+            } else {
+                alert(data.msg)
+            }
+        }).catch(error => {
+            console.error('There has been a problem with your fetch operation:', error);
+        });
+        //获取用户钱包
+    });
+
+    function setToken(value) {
+        localStorage.setItem("token", value);
+    }
+
+    // 修改1: API URL 配置
+    const API_BASE_URL = '/api'; // 假设 API 根路径为 /api
+
+    // 修改2: 发送验证码请求提取为独立函数
+    function sendVerificationCode(email) {
+        return fetch(`${API_BASE_URL}/send-verification-code`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({email}),
+        })
+            .then(response => response.json())
+            .catch(error => {
+                console.error('Error sending verification code:', error);
+            });
+    }
+
+    // 修改3: 注册请求提取为独立函数
+    function registerUser(email, password, verifyCode) {
+        return fetch(`${API_BASE_URL}/register`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                email,
+                password,
+                verifyCode,
+            }),
+        })
+            .then(response => response.json())
+            .catch(error => {
+                console.error('Error registering user:', error);
+            });
+    }
+
+    // 原密码显示功能部分
+    let showPassword = [false, false, false];
+
+    let showPasswordImg = document.getElementById("show-password");
+    let showRegisterPasswordImg = document.getElementById("show-register-password");
+    let showVerifyPasswordImg = document.getElementById("show-verify-password");
+
+    showPasswordImg.addEventListener("click", function () {
+        showPasswordByEye(this, 0)
+    })
+    showRegisterPasswordImg.addEventListener("click", function () {
+        showPasswordByEye(this, 1)
+    })
+    showVerifyPasswordImg.addEventListener("click", function () {
+        showPasswordByEye(this, 2)
+    })
+
+    function showPasswordByEye(ele, index) {
+
+        showPassword[index] = !showPassword[index];
+        let eye = ele.children[0];
+        let inputField = ele.parentNode.getElementsByTagName("input")[0];
+        if (showPassword[index]) {
+            eye.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAyxJREFUWEftVUFIVFEUvfc5iGALF6JCQQlG7WqRpmRk0MJF0KJFRS2ECkEEJ/z/jdCiEVr43/tDIxUUGBgRuGkhtAmCJiioMdCoyF0GLWR0MYsWwh/nxh3el+84+sc0MPhv9/597/5zzzn3PoQ9tnCP4YEIUJgiEUMRQ2EMhMUjD/3/DEkpryLiV8dxPodVs5O4lPIIAFzO5XLO5OTkip9rzUPDw8MHhRAPEPE8ACwQUZfWenEnP93sbjweb6itrZ0FgENENAcAg1rr93x+DZBlWSeFEBkAqOMAEc0DwNndBmXbdgsAvEHEowbwChH1aq3frgPEGynldQCYCFS2wIw5jvNtN5gyMr0EgDY/HxHFtdbjGyTzP9i2PYSI6QAA1vduLpdLBbXeDsCenp5YR0fHEOfxFTD3R5RSTjBXxTnExjZMleQza5GIxjzPe5pOp/PVAGKvxGKxi0KIkSArAMBFDiqlnpTn2QCIq2lvb+/nahCxocKPWfMMIr4GgDnP834KIXyAjTU1NfsB4AQRdSPiuTJGSumIaBkRrWw2+zyTyRQ2Zci27UuIyLSuaVwNE397hjuMiJKu605v8JBlWXeEEMmy5IuImCwUCi+EEDyfXACIbRPA72Kx6CLiYwDgglk+7rTgSiqlRtd1mZTyABF9YZmIKE9E6UKhMO77xbA3FeiOCURsIaJORGz0pQCAT6XEiL3+2WKx2Om67kfeDwwM7Kuvr7+NiHEjJ/vpsFLq1zpAvDEd1ra6ujqaSqWW/YR9fX11TU1NPwKVTSmlrnBcSnkPADg5r7RS6pbxIRfnz5oP2Wz2dNAvPI8QMYGI847jMHulVdVrL6W8z11h7rCpW/2BWQmQKe4UIr4L6HKjUleVyx8KKJFIHCMilqHkHSLiMf/QT7QZIAPqGSJeM/fynue1ho2MUEC2bc8i4nGTdG5paakrOCBDALF5v/vjg4gmtNY3y1kJ7qsBxJ0xZh7Cbv8RrIYhPpNIJPqJ6BG/jUKIuOM4r3YEiC+zqZubm89USrYVQ3zXGPzCzMzMdPkQrAQslKGtqvkXsQhQGKsRQxFDYQyExSMPhTH0B2nxWTRHozuQAAAAAElFTkSuQmCC";
+            inputField.type = "text";
+        } else {
+            eye.src = "/api/static/image/bar/login_eyeopen.png";
+            inputField.type = "password";
+        }
+    }
+
+
+    // 修改4: 发送验证码按钮点击事件修改为调用 sendVerificationCode
+    document.getElementById("send-code").addEventListener("click", function () {
+        let email = document.querySelector("input[name='register-email']").value;
+        if (email === "") {
+            alert("请填写邮箱");
+            return;
+        }
+
+        sendVerificationCode(email).then(result => {
+            if (result && result.code === 0) {
+                alert("验证码已发送");
+                let lastSendTime = 60;
+                this.innerText = lastSendTime;
+                let si = setInterval(() => {
+                    lastSendTime -= 1;
+                    document.getElementById("send-code").innerText = lastSendTime;
+                    if (lastSendTime <= 0) {
+                        document.getElementById("send-code").innerText = "发送验证码";
+                        clearInterval(si);
+                    }
+                }, 1000);
+            } else {
+                alert("发送验证码失败: " + (result && result.msg ? result.msg : "未知错误"));
+            }
+        });
+    });
+
+    // 修改5: 注册按钮点击事件修改为调用 registerUser
+    document.getElementById("btn-register").addEventListener("click", function (event) {
+        event.preventDefault();
+        let email = document.querySelector("input[name='register-email']").value;
+        let password = document.querySelector("input[name='register-password']").value;
+        let verifyPassword = document.querySelector("input[name='verify-password']").value;
+        let verifyCode = document.querySelector("input[name='verify-code']").value;
+        console.log(email, password, verifyPassword, verifyCode)
+        if (email === "" || password === "" || verifyPassword === "" || verifyCode === "") {
+            alert("请填写所有字段");
+            return;
+        }
+
+        if (password !== verifyPassword) {
+            alert("密码和确认密码不匹配");
+            return;
+        }
+
+        registerUser(email, password, verifyCode).then(result => {
+            if (result && result.code === 0) {
+                alert("注册成功");
+                // 注册成功后进行页面跳转或其他操作
+            } else {
+                alert("注册失败: " + (result && result.msg ? result.msg : "未知错误"));
+            }
+        });
+    });
+    init()
+</script>

file/static/search.html

@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="/api/static/css/search.css">
     <link rel="stylesheet" href="/api/static/css/index.css">
     <meta name="keywords" content="{{.key}} - 易租租">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description"
           content="海外数字商城，为全球用户提供谷歌、苹果、脸书等购买服务，还有苹果、谷歌、steam礼品卡等购买渠道。在这里您还能进行steam代充、steam海外代充、steam钱包代充等，7*24小时为您提供满意的交易。">
 </head>
@@ -17,7 +18,10 @@
             <div class="search-result-title-text">搜索结果</div>
         </div>
 
-        <div class="search-total">{{.count}}</div>
+        <div class="search-total">
+            <span>搜索数量：</span>
+            <span id="search-total-num">{{.count}}</span>
+        </div>
 
         <div class="card-list">
             {{range $i,$vo := .list}}
@@ -26,12 +30,12 @@
                 <div class="goods-name">{{ .skuName }}</div>
                 <div class="goods-price">{{ .price }}</div>
                 {{if ne .historicalPrices .price }}
-                <div >
+                <div>
                     <div class="goods--original-price">￥{{ .historicalPrices }}</div>
                     <div class="goods-discount-percentage">{{discalc .price .historicalPrices }}</div>
                 </div>
                 {{else}}
-                <div >
+                <div>
                     <div class="goods--original-price">￥{{ .historicalPrices }}</div>
                 </div>
                 {{end}}
@@ -39,19 +43,86 @@
             {{end}}
         </div>
         <div class="search-pagination">
-            {{if gt .count 11}}
-            <el-pagination background
-                           @current-change="GetSearch"
-                           :current-page="vo.pageNum"
-                           :page-size="vo.pageSize"
-                           :hide-on-single-page="true"
-                           :total="vo.total"
-                           layout="prev, pager, next ">
-            </el-pagination>
-            {{end}}
+
+            <ul id="pagination" class="pagination"></ul>
         </div>
     </div>
 </div>
 {{template "BottomBar.tmpl" .}}
 </body>
+<script>
+
+    document.addEventListener("DOMContentLoaded", function () {
+        const itemsPerPage = 12;
+        const totalItems = parseInt(document.getElementById("search-total-num").textContent, 10);
+        const totalPages = Math.ceil(totalItems / itemsPerPage);
+        let currentPage = getCurrentPageFromUrl();
+
+        function renderPagination() {
+            let pagination = document.getElementById("pagination");
+            // Previous button
+            const prevLi = document.createElement("li");
+            prevLi.textContent = "上一页";
+            if (currentPage === 1) {
+                prevLi.classList.add("disabled");
+            } else {
+                prevLi.addEventListener("click", function () {
+                    goToPage(currentPage - 1);
+                });
+            }
+            pagination.appendChild(prevLi);
+
+            // Page numbers
+            for (let i = 1; i <= totalPages; i++) {
+                const pageLi = document.createElement("li");
+                pageLi.textContent = i;
+                if (i === currentPage) {
+                    pageLi.classList.add("active");
+                } else {
+                    pageLi.addEventListener("click", function () {
+                        goToPage(i);
+                    });
+                }
+                pagination.appendChild(pageLi);
+            }
+
+            // Next button
+            const nextLi = document.createElement("li");
+            nextLi.textContent = "下一页";
+            if (currentPage === totalPages) {
+                nextLi.classList.add("disabled");
+            } else {
+                nextLi.addEventListener("click", function () {
+                    goToPage(currentPage + 1);
+                });
+            }
+            pagination.appendChild(nextLi);
+        }
+
+        function goToPage(page) {
+            if (page < 1 || page > totalPages) {
+                return;
+            }
+            currentPage = page;
+            updateUrlWithPage(page);
+            renderPagination();
+            // Perform actions to load the data for the selected page here
+        }
+
+        function getCurrentPageFromUrl() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const pageNum = parseInt(urlParams.get('pageNum'), 10);
+            return isNaN(pageNum) ? 1 : pageNum;
+        }
+
+        function updateUrlWithPage(page) {
+            const url = new URL(window.location.href);
+            url.searchParams.set('pageNum', page);
+            window.location.href = url.toString();
+            window.history.pushState({}, '', url);
+        }
+
+        renderPagination();
+    });
+</script>
 </html>

file/static/user.html

@@ -3,13 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <title>易租租-用户</title>
-
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/api/static/css/index.css">
     <link rel="stylesheet" href="/api/static/css/user.css">
+    <link rel="stylesheet" href="/api/static/css/bar.css">
+    <script src="/api/static/js/base.js"></script>
 </head>
 <body>
-<div class="user-page">
+<div class="user-page" id="user-page">
     <div style="position: fixed;top: 0;width: 100%;height: 100%;left: 0;right: 0;z-index:-1">
         <img src="/api/static/image/user-page-back.png" style="width: 100VW;height: 100%"/>
     </div>
@@ -19,28 +20,27 @@
                 <img src="/api/static/image/def_image.png"/>
             </div>
             <div class="user-info-show-name">
-                <div class="user-info-show-name-text">名称</div>
-                <div class="user-info-show-name-button">完善资料 ></div>
+                <div class="user-info-show-name-text">未登录</div>
+                <div class="user-info-show-name-button">请先登录</div>
             </div>
         </div>
-
     </div>
     <div class="user-page-handler">
         <div class="user-handler-info">
             <div class="user-handler-info-item">
-                <div class="user-handler-info-item-number">0</div>
+                <div class="user-handler-info-item-number" id="user-wallet-points">0</div>
                 <div class="user-handler-info-item-remark">积分</div>
             </div>
             <div class="user-handler-info-item">
-                <div class="user-handler-info-item-number">0</div>
+                <div class="user-handler-info-item-number" id="user-wallet-cardCount">0</div>
                 <div class="user-handler-info-item-remark">卡券</div>
             </div>
             <div class="user-handler-info-item">
-                <div class="user-handler-info-item-number">0.00</div>
+                <div class="user-handler-info-item-number" id="user-wallet-balance">0.00</div>
                 <div class="user-handler-info-item-remark">账户余额</div>
             </div>
             <div class="user-handler-info-item">
-                <div class="user-handler-info-item-number">0.00</div>
+                <div class="user-handler-info-item-number" id="user-wallet-income">0.00</div>
                 <div class="user-handler-info-item-remark">累计收益</div>
             </div>
         </div>
@@ -48,103 +48,94 @@
         <div class="user-handler-other">
             <div class="user-handler-other-header">
                 <div class="title">我的订单</div>
-                <div class="more-btn">全部</div>
+                <div class="more-btn user-order-all-btn" onclick="clickOrder('')">全部</div>
             </div>
             <div class="user-handler-other-bottom">
-                <div class="user-handler-other-bottom-item">
+                <div class="user-handler-other-bottom-item" onclick="clickOrder('0')">
                     <div class="icon">
                         <img src="/api/static/image/bar/wallet.svg"/>
                     </div>
                     <div class="label">待付款</div>
                 </div>
-                <div class="user-handler-other-bottom-item">
+                <div class="user-handler-other-bottom-item" onclick="clickOrder('1')">
                     <div class="icon">
-                        <img src="/api/static/image/bar/wallet.svg"/>
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA5pJREFUaEPtWj1oVEEQnrmXkCM/cAaT3G5SKChopaKgoIGIhREULWxEwRRaGSstFGsxoIIgVgpGiKBVIqRIKhUVFCPYKVgoGHZeCIQDQzjIvR1v5V44zvfu3k/encHbLtmZne+bmX07O3sIG3zgBscPsQh0d3cPtLW13UDEdBRHaK2XHce5ubi4aEfRNzqxCAghziLiRFTjRk9rPWLb9pOoa8QikM1mz6dSqfGoxpsE4qbQPx8BKeUlZj6NiBk3TZh5jogumr+FEEcRcSZOCjHzMBHNltZ7iIj7ymwtM/Mz27Yf+Nnw3QPZbPZKKpW6U6nIzK+I6LD7/66urs0dHR2dUUg4jpMv/wIJIV4i4lDlWlrrUT8SvgSklN8AYJsHga9EtDMK4Fo6QogviLjDw+YPItrqpe9LQAixiogtXkrMfE9rPY2ITi1QQeaZ2bIs6xQAjPrJK6U8sVaLAAcxXi+ZJoF6ebqZQq4HpJTNPbCeadfcxBG8mWNmt84fQMRIp7Vrt14RyDPzhNb60cLCwocy0i1CiF2IOMrM5/wOyGpOSpwAM/8AgNNE9KkakN7e3l2WZU0h4pYwUU2awLzWetC2bUOifKSLNdXZfD4/u7S0NO9OlK6ib8KQSJrAIaXUu0qPCiFuIeI1Zp4homPl80KIvYg4FzQKiRHQWpt6/YwXECnlYwAYAYDPSqk9HgQnEdEUcTVHYgSK4E4Vwb2IQkBKeRIApmqiB4DECKyurgq/tkitCJi9kE6nfzaUgFKqFQAK1SLAzMsAMIeIBWYeJ6KnYUuWxCKwsrKyKZfL5bwICCHMHfdC+Zz53Lq3q56ens7W1tZfDY2A4zgHKg6tNTxSyoPMPOaewsxsImA2/V0j1NfXt9+yrPcNJWAAEtH1ICAqZaSUtwHgahDdxFLI5HehUNgetr+ZyWQy7e3t3wFgrWXTyFJiWil1IognSzItUsrJ4sY+HlQnsQi4AJj5ERFdBoB8DVBpIcT9ys1di0jiBEoA3mutr9m2/drnq2Q6eWPFw2t3LcCV8/Ui8MduqTI1LUe3gBsAgOEwxVtDCYT1bhD5ukYgCKCwMk0CYT223vLNCKy3R8Ou9/9FoNr7QFjvxZU3VSwRmXvHX6PaA8fH8vequCBi6r9VSg2GItDf339Eaz0TpQkVE2ylet5xnCG/O0fVh27T+jCXdgCI1RYMQCjt83OFr1rr5x79prUlY73UBwCWuMiGJ/AbAc7sQEBGQLsAAAAASUVORK5CYII="
+                             draggable="false" loading="lazy"
+                             data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA5pJREFUaEPtWj1oVEEQnrmXkCM/cAaT3G5SKChopaKgoIGIhREULWxEwRRaGSstFGsxoIIgVgpGiKBVIqRIKhUVFCPYKVgoGHZeCIQDQzjIvR1v5V44zvfu3k/encHbLtmZne+bmX07O3sIG3zgBscPsQh0d3cPtLW13UDEdBRHaK2XHce5ubi4aEfRNzqxCAghziLiRFTjRk9rPWLb9pOoa8QikM1mz6dSqfGoxpsE4qbQPx8BKeUlZj6NiBk3TZh5jogumr+FEEcRcSZOCjHzMBHNltZ7iIj7ymwtM/Mz27Yf+Nnw3QPZbPZKKpW6U6nIzK+I6LD7/66urs0dHR2dUUg4jpMv/wIJIV4i4lDlWlrrUT8SvgSklN8AYJsHga9EtDMK4Fo6QogviLjDw+YPItrqpe9LQAixiogtXkrMfE9rPY2ITi1QQeaZ2bIs6xQAjPrJK6U8sVaLAAcxXi+ZJoF6ebqZQq4HpJTNPbCeadfcxBG8mWNmt84fQMRIp7Vrt14RyDPzhNb60cLCwocy0i1CiF2IOMrM5/wOyGpOSpwAM/8AgNNE9KkakN7e3l2WZU0h4pYwUU2awLzWetC2bUOifKSLNdXZfD4/u7S0NO9OlK6ib8KQSJrAIaXUu0qPCiFuIeI1Zp4homPl80KIvYg4FzQKiRHQWpt6/YwXECnlYwAYAYDPSqk9HgQnEdEUcTVHYgSK4E4Vwb2IQkBKeRIApmqiB4DECKyurgq/tkitCJi9kE6nfzaUgFKqFQAK1SLAzMsAMIeIBWYeJ6KnYUuWxCKwsrKyKZfL5bwICCHMHfdC+Zz53Lq3q56ens7W1tZfDY2A4zgHKg6tNTxSyoPMPOaewsxsImA2/V0j1NfXt9+yrPcNJWAAEtH1ICAqZaSUtwHgahDdxFLI5HehUNgetr+ZyWQy7e3t3wFgrWXTyFJiWil1IognSzItUsrJ4sY+HlQnsQi4AJj5ERFdBoB8DVBpIcT9ys1di0jiBEoA3mutr9m2/drnq2Q6eWPFw2t3LcCV8/Ui8MduqTI1LUe3gBsAgOEwxVtDCYT1bhD5ukYgCKCwMk0CYT223vLNCKy3R8Ou9/9FoNr7QFjvxZU3VSwRmXvHX6PaA8fH8vequCBi6r9VSg2GItDf339Eaz0TpQkVE2ylet5xnCG/O0fVh27T+jCXdgCI1RYMQCjt83OFr1rr5x79prUlY73UBwCWuMiGJ/AbAc7sQEBGQLsAAAAASUVORK5CYII="
+                             width="24" height="24" style="background: none;">
                     </div>
-                    <div class="label">待付款</div>
+                    <div class="label">待发货</div>
                 </div>
-                <div class="user-handler-other-bottom-item">
+                <div class="user-handler-other-bottom-item" onclick="clickOrder('2')">
                     <div class="icon">
-                        <img src="/api/static/image/bar/wallet.svg"/>
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA2NJREFUaEPtWj1oFEEUfu9+4IoUEjyyM0kRQVALQdBGUExQMYVFgoKKhVpYGbEIYrrESgWLFLFKk8IiVoloYQpRIYWigoJgRMGAMG+TXGkRuOw8b8IdLMfuZW92N+Rkr7qbmffm+9735v8QOvyDHY4fYhEol8tOoVCYQMSSbSCYedPzvOm1tbWvNj5iERBCXEXEpzYdN9nMKqVu2PiJRcBxnGu5XG7WpuOMQD0C/7cCUspbzHwREfc0JGfmT0R00/zu6em5lM/n5+KmkNZ62nXd20KIGUQ85uvrLzPPua77JKyPUAUcxxnL5XKPmw2Z+S0RDdbLS0KIC8xciEPC87zF9fV1VwjxBhEHmn1prUfDSIQSkFL+BID9AQSWiehQHMBhtkKI74h4MKDPFSLaF2QXSkAIUUXEwMgy85TW+iUiekkQYeZ8Pp8fBoDRMH9KqUCsrRTgJMAl5SMjkFQkbf1kCthGLim7TIGkImnrJ1PANnKt7JjZBYAFABgIWoH9trtRgV9a67Ou664AQElK+QcA9nbESszMS4g4opSqNAALIX4jYv+uJ8DMr4hoBAA2fOAfIOJ4q3TbFSnEzAtEdMUHviClnAGA69uNsVQImBuFsB1rwJZ4iojuAsCm7ywxj4hD24E39YkSMMAB4DwRvXYc507QwacJ1GQNwP1GWblc7ioWi/MAcCYK+DQIfCOiw43Ow05v9fpxpdSjRtvu7u6+Uqn0ojZ9HokKPnECJoeZ+QQRfW6AkFJO1L5P+kCZQXpZKfXcR7QfEc2xMXS22bFZyCxC5vyqlPoRQMIQHCaiRV/dATMD2YBPQ4EtXIYEMx+vL0ZbZVLKe1rr967rvvNF/lTttsEcQbvaSRt/20QHsd8xM68w86CfhL9eCHEOEc12wfr+NDUFGkDDSNTvjczVYyzwqROop9NKtVodqlQqZkyYBWqsBvyhbco026WWQk3pZNaHL4joAEBfUuB3RIEkwQb52hEF0iSREUgzulF8ZwpEiVKabTIF0oxuFN9tK9DqfSBKh0m2MQcoIioG+Wz1wPHR/16VJCALX0tKqZNtEejt7T2ttTb791jvXxZgm002PM8bWF1d/dAWAdNYCHG0trcxTz/W+/iIBEohf1dY1lo/C9uqG9+x3okjgku1WccT+AeBHspAJOoQGwAAAABJRU5ErkJggg=="
+                             draggable="false" loading="lazy"
+                             data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA2NJREFUaEPtWj1oFEEUfu9+4IoUEjyyM0kRQVALQdBGUExQMYVFgoKKhVpYGbEIYrrESgWLFLFKk8IiVoloYQpRIYWigoJgRMGAMG+TXGkRuOw8b8IdLMfuZW92N+Rkr7qbmffm+9735v8QOvyDHY4fYhEol8tOoVCYQMSSbSCYedPzvOm1tbWvNj5iERBCXEXEpzYdN9nMKqVu2PiJRcBxnGu5XG7WpuOMQD0C/7cCUspbzHwREfc0JGfmT0R00/zu6em5lM/n5+KmkNZ62nXd20KIGUQ85uvrLzPPua77JKyPUAUcxxnL5XKPmw2Z+S0RDdbLS0KIC8xciEPC87zF9fV1VwjxBhEHmn1prUfDSIQSkFL+BID9AQSWiehQHMBhtkKI74h4MKDPFSLaF2QXSkAIUUXEwMgy85TW+iUiekkQYeZ8Pp8fBoDRMH9KqUCsrRTgJMAl5SMjkFQkbf1kCthGLim7TIGkImnrJ1PANnKt7JjZBYAFABgIWoH9trtRgV9a67Ou664AQElK+QcA9nbESszMS4g4opSqNAALIX4jYv+uJ8DMr4hoBAA2fOAfIOJ4q3TbFSnEzAtEdMUHviClnAGA69uNsVQImBuFsB1rwJZ4iojuAsCm7ywxj4hD24E39YkSMMAB4DwRvXYc507QwacJ1GQNwP1GWblc7ioWi/MAcCYK+DQIfCOiw43Ow05v9fpxpdSjRtvu7u6+Uqn0ojZ9HokKPnECJoeZ+QQRfW6AkFJO1L5P+kCZQXpZKfXcR7QfEc2xMXS22bFZyCxC5vyqlPoRQMIQHCaiRV/dATMD2YBPQ4EtXIYEMx+vL0ZbZVLKe1rr967rvvNF/lTttsEcQbvaSRt/20QHsd8xM68w86CfhL9eCHEOEc12wfr+NDUFGkDDSNTvjczVYyzwqROop9NKtVodqlQqZkyYBWqsBvyhbco026WWQk3pZNaHL4joAEBfUuB3RIEkwQb52hEF0iSREUgzulF8ZwpEiVKabTIF0oxuFN9tK9DqfSBKh0m2MQcoIioG+Wz1wPHR/16VJCALX0tKqZNtEejt7T2ttTb791jvXxZgm002PM8bWF1d/dAWAdNYCHG0trcxTz/W+/iIBEohf1dY1lo/C9uqG9+x3okjgku1WccT+AeBHspAJOoQGwAAAABJRU5ErkJggg=="
+                             width="24" height="24" style="background: none;">
                     </div>
-                    <div class="label">待付款</div>
+                    <div class="label">已发货</div>
                 </div>
-                <div class="user-handler-other-bottom-item">
+                <div class="user-handler-other-bottom-item" onclick="clickOrder('3')">
                     <div class="icon">
-                        <img src="/api/static/image/bar/wallet.svg"/>
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA2NJREFUaEPtWj1oFEEUfu9+4IoUEjyyM0kRQVALQdBGUExQMYVFgoKKhVpYGbEIYrrESgWLFLFKk8IiVoloYQpRIYWigoJgRMGAMG+TXGkRuOw8b8IdLMfuZW92N+Rkr7qbmffm+9735v8QOvyDHY4fYhEol8tOoVCYQMSSbSCYedPzvOm1tbWvNj5iERBCXEXEpzYdN9nMKqVu2PiJRcBxnGu5XG7WpuOMQD0C/7cCUspbzHwREfc0JGfmT0R00/zu6em5lM/n5+KmkNZ62nXd20KIGUQ85uvrLzPPua77JKyPUAUcxxnL5XKPmw2Z+S0RDdbLS0KIC8xciEPC87zF9fV1VwjxBhEHmn1prUfDSIQSkFL+BID9AQSWiehQHMBhtkKI74h4MKDPFSLaF2QXSkAIUUXEwMgy85TW+iUiekkQYeZ8Pp8fBoDRMH9KqUCsrRTgJMAl5SMjkFQkbf1kCthGLim7TIGkImnrJ1PANnKt7JjZBYAFABgIWoH9trtRgV9a67Ou664AQElK+QcA9nbESszMS4g4opSqNAALIX4jYv+uJ8DMr4hoBAA2fOAfIOJ4q3TbFSnEzAtEdMUHviClnAGA69uNsVQImBuFsB1rwJZ4iojuAsCm7ywxj4hD24E39YkSMMAB4DwRvXYc507QwacJ1GQNwP1GWblc7ioWi/MAcCYK+DQIfCOiw43Ow05v9fpxpdSjRtvu7u6+Uqn0ojZ9HokKPnECJoeZ+QQRfW6AkFJO1L5P+kCZQXpZKfXcR7QfEc2xMXS22bFZyCxC5vyqlPoRQMIQHCaiRV/dATMD2YBPQ4EtXIYEMx+vL0ZbZVLKe1rr967rvvNF/lTttsEcQbvaSRt/20QHsd8xM68w86CfhL9eCHEOEc12wfr+NDUFGkDDSNTvjczVYyzwqROop9NKtVodqlQqZkyYBWqsBvyhbco026WWQk3pZNaHL4joAEBfUuB3RIEkwQb52hEF0iSREUgzulF8ZwpEiVKabTIF0oxuFN9tK9DqfSBKh0m2MQcoIioG+Wz1wPHR/16VJCALX0tKqZNtEejt7T2ttTb791jvXxZgm002PM8bWF1d/dAWAdNYCHG0trcxTz/W+/iIBEohf1dY1lo/C9uqG9+x3okjgku1WccT+AeBHspAJOoQGwAAAABJRU5ErkJggg=="
+                             draggable="false" loading="lazy"
+                             data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA2NJREFUaEPtWj1oFEEUfu9+4IoUEjyyM0kRQVALQdBGUExQMYVFgoKKhVpYGbEIYrrESgWLFLFKk8IiVoloYQpRIYWigoJgRMGAMG+TXGkRuOw8b8IdLMfuZW92N+Rkr7qbmffm+9735v8QOvyDHY4fYhEol8tOoVCYQMSSbSCYedPzvOm1tbWvNj5iERBCXEXEpzYdN9nMKqVu2PiJRcBxnGu5XG7WpuOMQD0C/7cCUspbzHwREfc0JGfmT0R00/zu6em5lM/n5+KmkNZ62nXd20KIGUQ85uvrLzPPua77JKyPUAUcxxnL5XKPmw2Z+S0RDdbLS0KIC8xciEPC87zF9fV1VwjxBhEHmn1prUfDSIQSkFL+BID9AQSWiehQHMBhtkKI74h4MKDPFSLaF2QXSkAIUUXEwMgy85TW+iUiekkQYeZ8Pp8fBoDRMH9KqUCsrRTgJMAl5SMjkFQkbf1kCthGLim7TIGkImnrJ1PANnKt7JjZBYAFABgIWoH9trtRgV9a67Ou664AQElK+QcA9nbESszMS4g4opSqNAALIX4jYv+uJ8DMr4hoBAA2fOAfIOJ4q3TbFSnEzAtEdMUHviClnAGA69uNsVQImBuFsB1rwJZ4iojuAsCm7ywxj4hD24E39YkSMMAB4DwRvXYc507QwacJ1GQNwP1GWblc7ioWi/MAcCYK+DQIfCOiw43Ow05v9fpxpdSjRtvu7u6+Uqn0ojZ9HokKPnECJoeZ+QQRfW6AkFJO1L5P+kCZQXpZKfXcR7QfEc2xMXS22bFZyCxC5vyqlPoRQMIQHCaiRV/dATMD2YBPQ4EtXIYEMx+vL0ZbZVLKe1rr967rvvNF/lTttsEcQbvaSRt/20QHsd8xM68w86CfhL9eCHEOEc12wfr+NDUFGkDDSNTvjczVYyzwqROop9NKtVodqlQqZkyYBWqsBvyhbco026WWQk3pZNaHL4joAEBfUuB3RIEkwQb52hEF0iSREUgzulF8ZwpEiVKabTIF0oxuFN9tK9DqfSBKh0m2MQcoIioG+Wz1wPHR/16VJCALX0tKqZNtEejt7T2ttTb791jvXxZgm002PM8bWF1d/dAWAdNYCHG0trcxTz/W+/iIBEohf1dY1lo/C9uqG9+x3okjgku1WccT+AeBHspAJOoQGwAAAABJRU5ErkJggg=="
+                             width="24" height="24" style="background: none;">
                     </div>
-                    <div class="label">待付款</div>
+                    <div class="label">订单完成</div>
                 </div>
-                <div class="user-handler-other-bottom-item">
+                <div class="user-handler-other-bottom-item" onclick="clickOrder('4')">
                     <div class="icon">
-                        <img src="/api/static/image/bar/wallet.svg"/>
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAypJREFUaEPtmUFrE0EUx9/bbCCBBkLpJjub3qw3QT3poVBBP4CHghU89FDBQw96sgcPihb1ZKGIgogKBXsRBS8eFE8FL0JBQcEeFMPMNoklB0ly2M24E5KybTa7G82yk5o9biYz7/f+b968N4sw5A8Ouf1w8AAMw5iwbfs0IqYkUqfSaDQ2qtVqdb9NexTI5/PnEonEUwCQyfiOzUXLsuZKpdKGG2IXQNO0KVVVvyCiKpHn95tSpJQeBoBG54ddAELITUS8JrHxLdM457OMsRdeAI8QcUF2gGazOW+a5rMuAMMwngDA/NACEEKGXoGrTva5I7sCtm2f2d7eftcVQpqm6clk8hMATMgK4Wzgz4yx4wBgdQGIF/l8/kQikVgDgCkJId42m82Lpml+9zwH3C9zudwhABiTBcKyrF87OztFL3sOXi3kolQLhcKMbduTcSjhHKoizr8yxj76re+pwPj4+GQqlXoNAMfiMN69Juf8FWPsvLt8CNwDhJD3iHgqbuM763POVxhjV0LtgXY6ZbIY365/KowxLRRALpc7qqrqpkwAwhZKqWe4d70cAUQk3UiBAMduijoFEWejakcjUYBzbjpg1xljj0WBRQi5h4iXo4iiQQM0OOcP6/X6DfdNga7rM4qiBJ4fnHPRdx8BgJOIqIcBHjTAAqVUeP2fHk3TxpLJ5GqYTlBKgA49IeQBIl7y88ZAATjnFiKu1Gq15b8MIVGovXEVainDMH76NVMDBXB5quIUWUuUUnFLYOm6vqooymLIuBL7aLoDQQh5iYhne/03KoDWeiKFAsAHRLzQZxoV8HfFHISQ24i4FAtASI/vHyaPAiEA1kVz4iqP9+wBkY1UVf3ml1IjDaEAgHVKqWhIej5hLtVkBUi1T2/fFBp7Oc05X3M2+JYrhFonMSJOh72HilOBEFskeMgIINhH0Y74fxTIZrPZdDpdluxT01b701KXzJ6dvmEYz52DZy7aoOhr9kVK6X2vf/S6GxX5uVWnx6yEKDduMcaWe+H6Xu5mMpmJdDpd6MtXAxqsKIpl2/aPcrn822/KA307PSBfRjvNSIFo/Rs8+x+1lG5A3x3WcwAAAABJRU5ErkJggg=="
+                             draggable="false" loading="lazy"
+                             data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAypJREFUaEPtmUFrE0EUx9/bbCCBBkLpJjub3qw3QT3poVBBP4CHghU89FDBQw96sgcPihb1ZKGIgogKBXsRBS8eFE8FL0JBQcEeFMPMNoklB0ly2M24E5KybTa7G82yk5o9biYz7/f+b968N4sw5A8Ouf1w8AAMw5iwbfs0IqYkUqfSaDQ2qtVqdb9NexTI5/PnEonEUwCQyfiOzUXLsuZKpdKGG2IXQNO0KVVVvyCiKpHn95tSpJQeBoBG54ddAELITUS8JrHxLdM457OMsRdeAI8QcUF2gGazOW+a5rMuAMMwngDA/NACEEKGXoGrTva5I7sCtm2f2d7eftcVQpqm6clk8hMATMgK4Wzgz4yx4wBgdQGIF/l8/kQikVgDgCkJId42m82Lpml+9zwH3C9zudwhABiTBcKyrF87OztFL3sOXi3kolQLhcKMbduTcSjhHKoizr8yxj76re+pwPj4+GQqlXoNAMfiMN69Juf8FWPsvLt8CNwDhJD3iHgqbuM763POVxhjV0LtgXY6ZbIY365/KowxLRRALpc7qqrqpkwAwhZKqWe4d70cAUQk3UiBAMduijoFEWejakcjUYBzbjpg1xljj0WBRQi5h4iXo4iiQQM0OOcP6/X6DfdNga7rM4qiBJ4fnHPRdx8BgJOIqIcBHjTAAqVUeP2fHk3TxpLJ5GqYTlBKgA49IeQBIl7y88ZAATjnFiKu1Gq15b8MIVGovXEVainDMH76NVMDBXB5quIUWUuUUnFLYOm6vqooymLIuBL7aLoDQQh5iYhne/03KoDWeiKFAsAHRLzQZxoV8HfFHISQ24i4FAtASI/vHyaPAiEA1kVz4iqP9+wBkY1UVf3ml1IjDaEAgHVKqWhIej5hLtVkBUi1T2/fFBp7Oc05X3M2+JYrhFonMSJOh72HilOBEFskeMgIINhH0Y74fxTIZrPZdDpdluxT01b701KXzJ6dvmEYz52DZy7aoOhr9kVK6X2vf/S6GxX5uVWnx6yEKDduMcaWe+H6Xu5mMpmJdDpd6MtXAxqsKIpl2/aPcrn822/KA307PSBfRjvNSIFo/Rs8+x+1lG5A3x3WcwAAAABJRU5ErkJggg=="
+                             width="24" height="24" style="background: none;">
                     </div>
-                    <div class="label">待付款</div>
-                </div>
-                <div class="user-handler-other-bottom-item">
-                    <div class="icon">
-                        <img src="/api/static/image/bar/wallet.svg"/>
-                    </div>
-                    <div class="label">待付款</div>
+                    <div class="label">订单异常</div>
                 </div>
+                <!--                <div class="user-handler-other-bottom-item">-->
+                <!--                    <div class="icon">-->
+                <!--                        <img src="/api/static/image/bar/wallet.svg"/>-->
+                <!--                    </div>-->
+                <!--                    <div class="label">待付款</div>-->
+                <!--                </div>-->
             </div>
         </div>
         <div class="user-handler-service"></div>
         <div class="user-handler-publicize"></div>
         <div class="user-handler-goods-recommend">
             <div class="user-handler-goods-recommend-header">
-                <div class="title">我的订单</div>
-                <div class="more-btn">全部</div>
+                <div class="title">相关推荐</div>
+<!--                <div class="more-btn user-order-all-btn">全部</div>-->
             </div>
             <div class="user-handler-goods-recommend-skus">
-                <div class="sku-item">
-                    <div class="image">
-                        <img src="/api/static/image/def_image.png"/>
-                    </div>
-                    <div class="name">100钻石</div>
-                </div>
-                <div class="sku-item">
+                {{range $item := .vo}}
+                <div class="sku-item" onclick="window.location.href='/detail?skuId={{$item.id}}'">
                     <div class="image">
-                        <img src="/api/static/image/def_image.png"/>
+                        <img src="{{$item.skuImage}}"/>
                     </div>
-                    <div class="name">100钻石</div>
-                </div>
-                <div class="sku-item">
-                    <div class="image">
-                        <img src="/api/static/image/def_image.png"/>
-                    </div>
-                    <div class="name">100钻石</div>
-                </div>
-                <div class="sku-item">
-                    <div class="image">
-                        <img src="/api/static/image/def_image.png"/>
-                    </div>
-                    <div class="name">100钻石</div>
-                </div>
-                <div class="sku-item">
-                    <div class="image">
-                        <img src="/api/static/image/def_image.png"/>
-                    </div>
-                    <div class="name">100钻石</div>
+                    <div class="name">{{$item.skuName}}</div>
                 </div>
+                {{end}}
+
             </div>
 
         </div>
     </div>
 
 </div>
-<div class="router-bar-view" id="router-bar-view">
+<div class="router-bar-view" id="router-bar-view" style="display: none">
     <div class="view-header">
         <div class="view-header-back-btn">
             <div class="header-return" id="header-return"></div>
             <div class="header-title">标题</div>
         </div>
     </div>
-    {{template "user_info.tmpl" . }}
+    <!--    {2{template "user_login.tmpl" . }}-->
     <!--    用户信息-->
-    <div class="router-bar-user-info-view"></div>
+    {{template "user_info.tmpl" . }}
     <!--    用户设置-->
-    <div class="router-bar-user-setting-view" id="router-user-setting"></div>
+    {{template "user_setting.tmpl" . }}
     <!--    用户优惠券-->
     <div class="router-bar-user-coupon-view" id="router-user-coupon"></div>
     <!--    用户余额-->
@@ -152,8 +143,9 @@
     <!--    用户收益-->
     <div class="router-bar-user-earnings-view" id="router-user-earnings"></div>
     <!--    订单-->
-    <div class="router-bar-user-order-view" id="router-user-order"></div>
+    {{template "user_order.tmpl" .}}
 </div>
+{{template "mobileLogin.tmpl" .}}
 {{template "FooterBar.tmpl" .}}
 </body>
 <script>
@@ -168,47 +160,162 @@
         }
     }, 100)
 
+    let showRouteNameList = ["mobile-login", "router-user-info", "router-user-setting", "router-user-coupon", "router-user-balance", "router-user-earnings", "router-user-order"]
+    let showRouteName = "router-user-order"
+    let orderType = ""
     document.getElementById("header-return").addEventListener("click", function () {
-        showOrNoneUserReturn()
+        showOrNoneUserReturn(false)
     })
-    let showRouteNameList = ["router-user-info", "router-user-setting", "router-user-coupon", "router-user-balance", "router-user-earnings", "router-user-order"]
-    let showRouteName = ""
 
-    function init() {
+    function checkLoginStatus() {
+        if (!localStorage.getItem("token")) {
+            console.log(document.getElementById("mobile-login"))
+            let mobileLogin = document.getElementById("mobile-login");
+            mobileLogin.style.display = ""
+            // showRouteName = "router-user-login"
+            // showOrNoneUserReturn()
+            return false
+        }
+        document.getElementById("mobile-login").style.display = "none"
+        return true
+    }
+
+    function showOrNoneUserReturn(status = true) {
+        let page = document.getElementById("user-page");
+        let bar = document.getElementById("router-bar-view");
+        if (status) {
+            bar.style.display = ""
+            page.style.display = "none"
+            for (let i = 0; i < showRouteNameList.length; i++) {
+                //判断页面是否显示
+                let res = showRouteNameList[i] === showRouteName
+                //console.log(showRouteNameList[i] === showRouteName, showRouteNameList[i], showRouteName
+                //,document.getElementById(showRouteNameList[i]))
+                document.getElementById(showRouteNameList[i]).style.display = res ? "" : "none"
+            }
+        } else {
+            bar.style.display = "none"
+            page.style.display = ""
+            showRouteName = ""
+        }
+    }
+
+    function initMobileUser() {
         //打开用户信息页面
         let userInfo = document.getElementsByClassName("user-info-show-name-text");
         let avatar = document.getElementsByClassName("user-info-show-avatar")
+        let setting = document.getElementsByClassName("user-info-show-name-button")
+        //获取用户信息
+        getMobileUserInfo()
+        //获取订单信息
+
+        //判断是否登录
         for (let i = 0; i < userInfo.length; i++) {
             userInfo[i].addEventListener("click", function () {
-                showOrNoneUserReturn()
-                showRouteName = "router-user-info"
+                if (checkLoginStatus()) {
+                    showRouteName = "router-user-info"
+                    showOrNoneUserReturn()
+                }
             })
-        }for (let i = 0; i < avatar.length; i++) {
+        }
+        for (let i = 0; i < avatar.length; i++) {
             avatar[i].addEventListener("click", function () {
-                showOrNoneUserReturn()
-                showRouteName = "router-user-info"
+                if (checkLoginStatus()) {
+                    showRouteName = "router-user-info"
+                    showOrNoneUserReturn()
+                }
             })
         }
+        //设置界面
+        for (let i = 0; i < setting.length; i++) {
+            setting[i].addEventListener("click", function () {
+                if (checkLoginStatus()) {
+                    //TODO 暂时没完成设置功能
+                    // showRouteName = "router-user-setting"
+                    showRouteName = "router-user-info"
+                    showOrNoneUserReturn()
+                }
+            })
+        }
+        //订单列表
+        // let orderAllBtns = document.getElementsByClassName("user-order-all-btn")
+        // for (let i = 0; i < orderAllBtns.length; i++) {
+        //     orderAllBtns[i].addEventListener("click", function () {
+        //
+        //     })
+        // }
+    }
 
+    function clickOrder(type) {
+        showRouteName = "router-user-order"
+        showOrNoneUserReturn()
+        //刷新数据
+        orderTypeClick(type)
+    }
 
+    function getLastOrderList() {
+        let url = "/api/order/list"
+        fetch(url, {
+            method: 'POST',
+            headers: {
+                "auth-sign": localStorage.getItem("token"),
+                'Content-Type': 'application/json'
+            }
+        }).then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok ' + response.statusText);
+            }
+            return response.json();
+        }).then(data => {
+            if (data.code == 200) {
+
+            } else {
+                console.log(data.msg)
+            }
+        }).catch(error => {
+            console.error('There has been a problem with your fetch operation:', error);
+        });
     }
 
-    function showOrNoneUserReturn() {
-        let page = document.getElementById("user-page");
-        let bar = document.getElementById("router-bar-view");
-        if (bar.style.display) {
-            bar.style.display = ""
-            page.style.display = "none"
-            showRouteName = ""
-        } else {
-            bar.style.display = "none"
-            page.style.display = ""
-        }
-        for (let i = 0; i < showRouteNameList.length; i++) {
-            let res = showRouteNameList[i] === showRouteName
-            document.getElementById(showRouteName).style.display = res ? "" : "none"
-        }
+    //获取钱包数据
+    function getWalletInfo() {
+        if (localStorage.getItem("token")) {
+            fetch("/api/user/wallet", {
+                method: 'GET', headers: {
+                    // 'Content-Type': 'application/json',
+                    "auth-sign": localStorage.getItem("token")
+                }, // body: JSON.stringify(data)
+            })
+                .then(response => response.json())
+                .then(data => {
+                    let elePoints = document.getElementById("user-wallet-points");
+                    let eleCardCount = document.getElementById("user-wallet-cardCount");
+                    let eleBalance = document.getElementById("user-wallet-balance");
+                    let eleIncome = document.getElementById("user-wallet-income");
 
+                    if (data.code === 200) {
+                        elePoints.innerText = "0"
+                        console.log(data.data.CouponUserJDM.length, data.data.Wallet.balance, data.data.Wallet)
+                        eleCardCount.innerText = data.data.CouponUserJDM.length
+                        eleBalance.innerText = data.data.Wallet.balance.toFixed(2)
+                        eleIncome.innerText = data.data.Wallet.promotionAmount.toFixed(2)
+                    } else {
+                        elePoints.innerText = "0"
+                        eleCardCount.innerText = "0"
+                        eleBalance.innerText = "0.00"
+                        eleIncome.innerText = "0.00"
+                    }
+                })
+                .catch((error) => {
+                    console.error('Error:', error);
+                });
+        }
     }
+
+    initMobileUser()
+    getWalletInfo()
+    // getOrderList()
+    //TODO 测试使用
+    //  document.getElementsByClassName("more-btn user-order-all-btn")[0].click()
 </script>
 </html>

file/static/user_info.tmpl

@@ -10,10 +10,49 @@
             <div class="title">邮箱</div>
             <div class="value">18425@qq.com</div>
         </div>
-        <div class="router-user-info-real list-item">
+        <!--TODO 移动端 未添加实名认证功能-->
+        <div class="router-user-info-real list-item" style="display: none">
             <div class="title">实名认证</div>
             <div class="value">未认证 ></div>
         </div>
     </div>
     <div class="router-user-logout">退出登录</div>
-</div>
+</div>
+<script>
+    let logout = document.getElementsByClassName('router-user-logout')[0];
+    logout.addEventListener('click', function(e){
+        console.log('logout')
+        localStorage.removeItem('token');
+        let name = document.getElementsByClassName("user-info-show-name-text");
+        let button = document.getElementsByClassName("user-info-show-name-button");
+        name[0].innerHTML = '未登录';
+        button[0].innerHTML = '请先登录';
+        showOrNoneUserReturn(false)
+    })
+    function getUserInfo(){
+        let url = "/api/user/info"
+        fetch(url, {
+            method: 'GET',
+            headers: {
+                "auth-sign": localStorage.getItem("token"),
+                'Content-Type': 'application/json'
+            }
+        }).then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok ' + response.statusText);
+            }
+            return response.json();
+        }).then(data => {
+            if (data.code === 200) {
+
+
+                console.log(data)
+            } else {
+                console.log(data.msg)
+            }
+        }).catch(error => {
+            console.error('There has been a problem with your fetch operation:', error);
+        });
+    }
+    // getUserInfo()
+</script>

file/static/user_order.tmpl

@@ -0,0 +1,314 @@
+<div class="router-bar-user-order-view" id="router-user-order">
+    <div class="order-tags">
+        <div class="tag-list">
+            <div class="tag-item tag-item-select" data-value="">全部</div>
+            <div class="tag-item" data-value="0">待支付</div>
+            <div class="tag-item" data-value="1">待发货</div>
+            <div class="tag-item" data-value="2">已发货</div>
+            <div class="tag-item" data-value="3">订单完成</div>
+        </div>
+        <!--        <div class="tag-bottom-line"></div>-->
+    </div>
+    <div class="order-content">
+        <!--没有数据时显示-->
+        <div class="order-empty" id="order-empty" style="display: none;">
+            <img class="empty-image" src="/api/static/image/bar/not-order.png">
+            <div class="empty-text">暂无订单</div>
+        </div>
+        <!--有数据时显示-->
+        <div class="order-list" id="order-list">
+            <div class="order-item">
+                <div class="order-item-header">
+                    <div class="order-item-header-time">201912121212121212</div>
+                    <div class="order-item-header-status">待支付</div>
+                </div>
+                <div class="order-item-body">
+                    <div class="order-item-body-img">
+                        <img/>
+                    </div>
+                    <div class="order-item-body-info">
+                        <div class="order-item-body-info-title">
+                            <div class="order-item-body-info-title-name">商品名称</div>
+                            <div class="order-item-body-info-title-price">￥100</div>
+                        </div>
+                        <div class="order-item-body-info-desc">
+                            <div class="order-item-body-info-desc-text">商品sku名称</div>
+                            <div class="order-item-body-info-desc-count">X1</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="order-item-footer">
+                    <div class="order-item-footer-orderid">
+                        <div class="footer-orderid-title">订单号</div>
+                        <div class="footer-orderid-info">
+                            <div class="footer-orderid-id">2033333</div>
+                            <div class="footer-orderid-copy">复制</div>
+                        </div>
+                    </div>
+                    <div class="order-item-footer-settlement">
+                        <div class="footer-settlement-left">实付</div>
+                        <div class="footer-settlement-price">￥2</div>
+                    </div>
+                    <div class="order-item-footer-btns">
+                        <div class="footer-btns-cancel">取消订单</div>
+                        <div class="footer-btns-pay">去支付</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+    let tagItems = document.querySelectorAll('.router-bar-user-order-view .tag-item');
+
+    function initUserOrder() {
+        for (let i = 0; i < tagItems.length; i++) {
+            tagItems[i].addEventListener('click', function () {
+                tagItems.forEach(item => {
+                    if (item !== this) {
+                        item.classList.remove('tag-item-select')
+                    } else {
+                        orderTypeClick(item.dataset)
+                        item.classList.add('tag-item-select')
+                    }
+                })
+
+            })
+        }
+    }
+
+    function orderTypeClick(orderId) {
+        orderType = orderId
+
+        if (!orderId){
+            orderType = ""
+        }
+        console.log(orderType)
+        getOrderList()
+
+    }
+
+    function getOrderList() {
+        getOrderList2()
+    }
+
+    function getOrderList2() {
+        let url = "/api/order/list"
+        fetch(url, {
+            method: 'POST',
+            headers: {
+                "auth-sign": localStorage.getItem("token"),
+                'Content-Type': 'application/json'
+            }
+        }).then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok ' + response.statusText);
+            }
+            return response.json();
+        }).then(data => {
+            if (data.code == 200) {
+                let orderListEle = document.getElementById("order-list");
+                orderListEle.innerHTML = ''
+                orderListEle.style.display = 'none'
+                let orderEmptyEle = document.getElementById("order-empty");
+                orderEmptyEle.style.display = ''
+                if (data.data.length === 0) {
+                } else {
+
+                    let orderListEle = document.getElementById("order-list");
+                    orderListEle.innerHTML = ''
+                    orderListEle.style.display = ""
+                    let orderEmptyEle = document.getElementById("order-empty");
+                    orderEmptyEle.style.display = 'none'
+                    data.data.vos.forEach(item => {
+                        console.log(123331,item.order.state, orderType)
+                        if (orderType == "" || item.order.state === orderType) {
+                            let orderItem = generateOrderHTML(item);
+                            orderListEle.appendChild(orderItem);
+                        }
+                    })
+                }
+            } else {
+                console.log(data.msg)
+            }
+        }).catch(error => {
+            console.error('There has been a problem with your fetch operation:', error);
+        });
+    }
+
+    function generateOrderHTML(data) {
+        function formatDate(isoString) {
+            const date = new Date(isoString);
+
+            // 获取年、月、日、小时、分钟、秒
+            const year = date.getFullYear();
+            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需加1
+            const day = String(date.getDate()).padStart(2, '0');
+            const hours = String(date.getHours()).padStart(2, '0');
+            const minutes = String(date.getMinutes()).padStart(2, '0');
+            const seconds = String(date.getSeconds()).padStart(2, '0');
+
+            // 拼接成所需的格式
+            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+        }
+        const orderItem = document.createElement('div');
+        orderItem.className = 'order-item';
+
+        const header = document.createElement('div');
+        header.className = 'order-item-header';
+        const time = document.createElement('div');
+        time.className = 'order-item-header-time';
+        time.textContent = formatDate(data.order.createTime)
+        const status = document.createElement('div');
+        status.className = 'order-item-header-status';
+        let stateString = ""
+        switch (data.order.state) {
+            case "":
+                stateString = "订单关闭"
+                break;
+            case "0":
+                stateString = "待支付"
+                break;
+            case "1":
+                stateString = "待发货"
+                break;
+            case "2":
+                stateString = "已收货"
+                break;
+            case "3":
+                stateString = "订单完成"
+                break
+            default:
+                stateString = "订单异常"
+        }
+
+        status.textContent = stateString;
+
+
+        header.appendChild(time);
+        header.appendChild(status);
+        orderItem.appendChild(header);
+
+        const body = document.createElement('div');
+        body.className = 'order-item-body';
+
+        const img = document.createElement('div');
+        img.className = 'order-item-body-img';
+        const htmlImageElement = document.createElement("img");
+        let imageUrl = data.sku.skuImage ? data.sku.skuImage : "/api/static/image/def_image.png"
+        htmlImageElement.src = imageUrl;
+        img.appendChild(htmlImageElement)
+
+        // img.style.backgroundImage = `url('${data.sku.skuImage}')`;
+        const info = document.createElement('div');
+        info.className = 'order-item-body-info';
+
+        const title = document.createElement('div');
+        title.className = 'order-item-body-info-title';
+        const name = document.createElement('div');
+        name.className = 'order-item-body-info-title-name';
+        name.textContent = data.order.orderName;
+        const price = document.createElement('div');
+        price.className = 'order-item-body-info-title-price';
+        price.textContent = `￥${data.order.price}`;
+        title.appendChild(name);
+        title.appendChild(price);
+
+        const desc = document.createElement('div');
+        desc.className = 'order-item-body-info-desc';
+        const descText = document.createElement('div');
+        descText.className = 'order-item-body-info-desc-text';
+        descText.textContent = data.sku.skuName || data.order.orderName;
+        const descCount = document.createElement('div');
+        descCount.className = 'order-item-body-info-desc-count';
+        descCount.textContent = `X${data.order.count}`;
+        desc.appendChild(descText);
+        desc.appendChild(descCount);
+
+        info.appendChild(title);
+        info.appendChild(desc);
+        body.appendChild(img);
+        body.appendChild(info);
+        orderItem.appendChild(body);
+
+        const footer = document.createElement('div');
+        footer.className = 'order-item-footer';
+
+        const orderIdDiv = document.createElement('div');
+        orderIdDiv.className = 'order-item-footer-orderid';
+        const footerOrderTitle = document.createElement('div');
+        footerOrderTitle.className = 'footer-orderid-title';
+        footerOrderTitle.innerText = "订单号"
+
+        const footerOrderInfo = document.createElement('div');
+        footerOrderInfo.className = 'footer-orderid-info';
+        const footerOrderId = document.createElement('div');
+        footerOrderId.className = 'footer-orderid-id';
+        footerOrderId.textContent = `${data.order.id}`;
+        const footerOrderCopy = document.createElement('div');
+        footerOrderCopy.className = 'footer-orderid-copy';
+        footerOrderCopy.textContent = '复制';
+        footerOrderCopy.onclick = function () {
+            copyToClipboard(data.order.id);
+        };
+        footerOrderInfo.appendChild(footerOrderId);
+        footerOrderInfo.appendChild(footerOrderCopy);
+        orderIdDiv.appendChild(footerOrderTitle);
+        orderIdDiv.appendChild(footerOrderInfo);
+
+        const settlement = document.createElement('div');
+        settlement.className = 'order-item-footer-settlement';
+        const settlementLeft = document.createElement('div');
+        settlementLeft.className = 'footer-settlement-left';
+        settlementLeft.textContent = '实付款';
+        const settlementPrice = document.createElement('div');
+        settlementPrice.className = 'footer-settlement-price';
+        settlementPrice.textContent = `￥${data.order.totalPrice}`;
+        settlement.appendChild(settlementLeft);
+        settlement.appendChild(settlementPrice);
+
+        const btns = document.createElement('div');
+        btns.className = 'order-item-footer-btns';
+        const btnCancel = document.createElement('div');
+        btnCancel.className = 'footer-btns-cancel';
+        btnCancel.textContent = '取消订单';
+        btnCancel.onclick = function () {
+            cancelOrder(data.order.id);
+        };
+        const btnPay = document.createElement('div');
+        btnPay.className = 'footer-btns-pay';
+        btnPay.textContent = '去支付';
+        btnPay.onclick = function () {
+            payOrder(data.order.id);
+        };
+        btns.appendChild(btnCancel);
+        btns.appendChild(btnPay);
+
+        footer.appendChild(orderIdDiv);
+        footer.appendChild(settlement);
+        footer.appendChild(btns);
+        orderItem.appendChild(footer);
+
+        return orderItem;
+    }
+
+    function copyToClipboard(text) {
+        navigator.clipboard.writeText(text).then(function () {
+            alert('订单号已复制到剪贴板');
+        }, function () {
+            alert('复制失败');
+        });
+    }
+
+    function cancelOrder(orderId) {
+        console.log(`取消订单: ${orderId}`);
+        // 在这里实现取消订单的逻辑
+    }
+
+    function payOrder(orderId) {
+        console.log(`去支付订单: ${orderId}`);
+        // 在这里实现支付订单的逻辑
+    }
+
+    initUserOrder()
+</script>

file/static/user_setting.tmpl

@@ -0,0 +1,3 @@
+<div class="router-bar-user-setting-view" id="router-user-setting">
+
+</div>

main.go

@@ -6,6 +6,8 @@ import (
 	"demo/util/templatefunc"
 	"github.com/gin-gonic/gin"
 	"net/http"
+	"net/http/httputil"
+	"net/url"
 )
 
 func init() {
@@ -22,13 +24,34 @@ func main() {
 func runGin() {
 	Router := gin.Default()
 	router.TestRouth(Router.Group("/"))
+	// 重定向 /back 及其子路径到指定 IP 地址
 	apiGroup := Router.Group(router.Prefix)
 	Router.SetFuncMap(templatefunc.BaseTemplateFunc())
 	//加载模板
 	Router.LoadHTMLGlob("file/static/*")
 	apiGroup.StaticFS("/static", http.Dir("file/resources"))
 	apiGroup.StaticFS("/assets", http.Dir("file/assets"))
+	proxy(Router)
+
 	router.InitRouter(apiGroup)
 	router.InitAuthority(Router)
 	Router.Run(":8182")
 }
+func proxy(Router *gin.Engine) {
+	proxy := func(target string) gin.HandlerFunc {
+		return func(c *gin.Context) {
+			targetUrl, err := url.Parse(target)
+			if err != nil {
+				c.JSON(http.StatusInternalServerError, gin.H{"error": "Invalid target URL"})
+				return
+			}
+
+			proxy := httputil.NewSingleHostReverseProxy(targetUrl)
+			proxy.ServeHTTP(c.Writer, c.Request)
+		}
+	}
+
+	// 将所有未定义的路径转发到其他 IP
+	Router.NoRoute(proxy("http://127.0.0.1:12306"))
+
+}

router/TestRouter.go

@@ -19,11 +19,13 @@ func TestRouth(engine *gin.RouterGroup) {
 	//user := engine.Group("/test")
 	user := engine.Group("")
 	{
-		PushRouter(user, "POST", "/order/pay", OrderSubmit)
-		PushRouter(user, "POST", "/test", DataTest)
 
 		//PushRouter(user, "GET", "/home", Home)
 		PushRouter(user, "GET", "/", Home)
+
+		PushRouter(user, "POST", "/order/pay", OrderSubmit)
+		PushRouter(user, "POST", "/test", DataTest)
+
 		PushRouter(user, "GET", "/topic", Topic)
 		PushRouter(user, "GET", "/detail", Detail)
 		PushRouter(user, "GET", "/search", SearchPage)
@@ -238,7 +240,15 @@ func CategoryPage(c *gin.Context) {
 	c.HTML(http.StatusOK, "category.html", dm)
 }
 func UserPage(c *gin.Context) {
-	c.HTML(http.StatusOK, "user.html", nil)
+	//获取相关推荐
+	vo, err := manage.GetGoodsSkuList(domain.GoodsSku{}, 1, 9)
+	if err != nil {
+	}
+	m := make(map[string]interface{})
+	m["vo"] = vo.List
+	dm, err := json.Marshal(m)
+	json.Unmarshal(dm, &m)
+	c.HTML(http.StatusOK, "user.html", m)
 }
 
 //================存json请求======================