部分调整修改

file/resources/css/carousel.css

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

file/resources/css/home.css

@@ -1,423 +1,578 @@
+@media screen and (min-width: 100px) and (max-width: 768px) {
+
+    /*==============首页主题====================*/
+    .card {
+        width: calc(100% - 30px);
+        margin: auto;
+        padding: 0 15px;
+        text-align: left;
+    }
+
+    .card .card-header {
+        margin: 20px 0 0 5px;
+        display: flex;
+        line-height: 32px;
+    }
+
+    .card .card-header .card-title {
+        text-align: left;
+        display: inline-block;
+        padding: 0;
+        width: auto;
+        margin: 0;
+        font-size: 24px;
+    }
+
+    .card .card-header .cart-other {
+        flex: 1;
+        margin: 0;
+        width: auto;
+        text-align: right;
+        vertical-align: middle;
+        align-items: center;
+        font-size: 12px;
+    }
+
+    .card .card-header .cart-other a {
+        cursor: pointer;
+        padding: 5px 15px;
+        color: #666666;
+        font-size: 16px;
+        /*color: white;*/
+        /*background: #1475fa;*/
+    }
+    .card .card-header .cart-other a:after {
+        content: " >";
+    }
+
+    .card .card-des {
+        margin: 8px 0 0 5px;
+        color: #666666;
+        font-size: 14px;
+    }
+
+    .card .card-list {
+        display: flex;
+        align-items: center; /* 确保文本和图片顶部对齐 */
+        justify-content: space-between;
+        flex-wrap: wrap;
+        padding: 5px 0 0 0;
+        margin-top: 15px;
+        overflow: hidden;
+    }
+
+    .card .card-list .goods-info {
+        width: calc(33.3333% - 20px); /* 三个卡片平分宽度，留出间隙 */
+        margin-right: 10px;
+        margin-bottom: 20px;
+        text-align: center;
+    }
+
+    /* 隐藏 .card-list 中第六个元素之后的所有元素 */
+    .card .card-list .goods-info:nth-child(n+7) {
+        display: none;
+    }
+
+    /* 保证最后一列没有右边距 */
+    .card .card-list div:nth-child(3n) {
+        margin-right: 0;
+    }
+    /* 统一图片容器的高度 */
+    .goods-info .goods-img {
+        /*width: 100%;*/
+        width: calc(33.3333VW - 20px);
+        height: calc(44.4444VW - 27px); /* 设定一个固定的高度 */
+        overflow: hidden; /* 超出部分隐藏 */
+    }
+
+    /* 图片自适应并裁剪 */
+    .goods-info .goods-img img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover; /* 保持图片裁剪以适应容器 */
+    }
+
+    .card .card-show {
+        text-align: center;
+        width: 100%;
+        cursor: pointer;
+        color: #646cff;
+    }
+
+    /*topic list item*/
+    .goods-info {
+        display: block;
+        margin-bottom: 30px;
+    }
+
+    .goods-info:hover {
+        cursor: pointer;
+    }
+
+    .goods-info .goods-name {
+        font-size: 12px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        -webkit-line-clamp: 2;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+    }
+
+    .goods-price {
+        display: none;
+    }
+
+    .goods-info .goods-price {
+        display: none;
+        font-size: 0;
+        color: transparent;
+    }
+
+    .goods-info .goods-price-od {
+        display: none;
+    }
+
+
+    .goods-info .goods-original-price {
+        display: none;
+
+    }
+
+    .goods-info br {
+        display: none;
+    }
+
+    .goods-info .goods-discount-percentage {
+        display: none;
+    }
+
+    .card-show {
+        display: none;
+    }
+
+}
+
+@media screen and (min-width: 768px) {
+    .home-suspension {
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        position: absolute;
+        z-index: 10;
+        width: 0;
+        height: 0;
+    }
+
+    .bottom-advertisement {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 130px;
+        background: #8a65d9;
+    }
+
+    .advertisement-content {
+        width: 1180px;
+        height: 130px;
+        margin: auto auto;
+    }
+
+    .right-handler {
+        position: fixed;
+        bottom: 50px;
+        right: 50px;
+        width: 75px;
+        background-color: white;
+        display: flex;
+        flex-direction: column;
+        color: black;
+        z-index: 1;
+        border-radius: 8px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    }
+
+
+    .handler-btn .tooltip {
+        display: none;
+    }
+
+    .handler-btn .handler-btn:hover .tooltip {
+        display: block;
+    }
+
+    .handler-item-top {
+        border-radius: 8px 8px 0 0;
+    }
+
+    .handler-item-bottom {
+        border-radius: 0 0 8px 8px;
+    }
+
+    .handler-item {
+        transition: background-color 0.3s ease-in-out;
+    }
+
+    .item-icon-top {
+        padding: 10px 0;
+        color: #666666;
+        transform: rotateZ(180deg);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .item-icon-top div {
+        width: 25px;
+        height: 25px;
+    }
 
-.home-suspension {
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    position: absolute;
-    z-index: 10;
-    width: 0;
-    height: 0;
-}
-
-.bottom-advertisement {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 130px;
-    background: #8a65d9;
-}
-
-.advertisement-content {
-    width: 1180px;
-    height: 130px;
-    margin: auto auto;
-}
-
-.right-handler {
-    position: fixed;
-    bottom: 50px;
-    right: 50px;
-    width: 75px;
-    background-color: white;
-    display: flex;
-    flex-direction: column;
-    color: black;
-    z-index: 1;
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-}
-
-
-.handler-btn .tooltip {
-    display: none;
-}
-
-.handler-btn .handler-btn:hover .tooltip {
-    display: block;
-}
-
-.handler-item-top {
-    border-radius: 8px 8px 0 0;
-}
-
-.handler-item-bottom {
-    border-radius: 0 0 8px 8px;
-}
-
-.handler-item {
-    transition: background-color 0.3s ease-in-out;
-}
-
-.item-icon-top {
-    padding: 10px 0;
-    color: #666666;
-    transform: rotateZ(180deg);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.item-icon-top div {
-    width: 25px;
-    height: 25px;
-}
-
-.right-handler div:hover {
-    background-color: #1475fa;
-}
-
-.item-icon-top:hover {
-
-}
-
-.item-icon-top:hover span {
-    color: white;
-}
-
-.item-icon-top:hover .item-icon {
-    color: white;
-}
-
-.item-icon-top:hover .item-icon-top {
-    color: white;
-}
-
-.handler-item-content {
-    margin: 0 auto;
-    width: 52px;
-    height: 74px;
-    justify-content: center;
-    align-items: center;
-    border-bottom: #F1F1F1 1px solid;
-
-    display: flex;
-    flex-direction: column;
-    font-size: 13px;
-}
-
-.item-icon {
-    color: #666666;
-}
-
-
-span {
-    color: #333333;
-}
-
-
-.handler-item-content:hover {
-    cursor: pointer;
-    user-select: none;
-    color: white;
-    background-color: #1475fa;
-
-
-}
-
-.handler-item-content:hover span {
-    color: white;
-}
-
-.handler-item-content:hover .item-icon {
-    color: white;
-}
-
-.handler-item-content:hover .item-icon-top {
-    color: white;
-
-}
-
-
-.tooltip {
-
-    display: block;
-    position: absolute;
-    padding: 10px;
-    border-radius: 8px;
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
-    cursor: auto;
-    color: #333333;
-}
-
-.tooltip-arrow {
-    position: absolute;
-    right: -9.5px;
-    top: calc(50% - 10px);
-    width: 10px;
-    height: 20px;
-
-
-    -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
-    clip-path: polygon(100% 50%, 0 0, 0 100%);
-}
-
-.slot-image {
-    max-width: 80px;
-    max-height: 80px;
-}
-
-.handler-to-top {
-    cursor: pointer;
-}
-
-
-.gift-pack {
-    width: 1170px;
-    text-align: left;
-    font-size: 12px;
-    margin: 60px auto 50px auto;
-    line-height: 18px;
-    padding-bottom: 20px;
-    border-bottom: 1px solid rgb(217, 217, 217);
-}
-
-.gift-pack-title {
-    font-size: 24px;
-    margin-bottom: 15px;
-}
-
-.gift-pack-content {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 20px;
-}
-
-.content-item {
-    cursor: pointer;
-}
-
-.content-item-img {
-    max-width: 370px;
-    max-height: 165px;
-    overflow: hidden;
-}
-
-.content-item-img img {
-    border-radius: 10px;
-    width: 370px;
-    height: 165px;
-}
-
-
-.content-item-title {
-    font-weight: bold;
-    font-size: 14px;
-}
-
-.content-item-remark {
-    color: #999;
-}
-
-.content-item-price {
-    display: flex;
-    vertical-align: middle;
-    margin: 10px 0;
-}
-
-.content-item-price div {
-    margin-right: 10px;
-}
-
-.price-original {
-    text-decoration: line-through;
-    color: #888888;
-}
-
-.price-target {
-    vertical-align: middle;
-    padding: 0 3px;
-    margin: 0 0 0 4px;
-    background: rgb(223, 30, 28);
-    color: white;
-    font-weight: bolder;
-}
-.price-target span{
-    color: white;
-}
-
-.price-now {
-    font-family: BlinkMacSystemFont;
-    font-size: 16px;
-}
-
-/*==============首页主题====================*/
-.card {
-    width: 1180px;
-    margin: auto;
-    padding: 0;
-    /* border: 1px solid #ccc; */
-    text-align: left;
-}
-
-.card .card-header {
-    margin: 20px 0 0 5px;
-    display: flex;
-    line-height: 32px;
-}
-
-.card .card-header .card-title {
-    text-align: left;
-    display: inline-block;
-    padding: 0;
-    width: auto;
-    margin: 0;
-    font-weight: bold;
-    font-size: 24px;
-}
-
-.card .card-header .cart-other {
-    flex: 1;
-    margin: 0;
-    width: auto;
-    text-align: right;
-    vertical-align: middle;
-    align-items: center;
-    font-size: 12px;
-}
-
-.card .card-header .cart-other a {
-    cursor: pointer;
-    padding: 5px 15px;
-    color: white;
-    background: #1475fa;
-}
-
-.card .card-des {
-    margin: 8px 0 0 5px;
-    color: #666666;
-    font-size: 14px;
-}
-
-.card .card-list {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    padding: 5px 0 0 0;
-    margin-top: 15px;
-    overflow: hidden;
-    /* overflow-y: auto; */
-}
-
-.card .card-list div {
-    margin-right: 30px;
-    display: inline-block;
-}
-
-.card .card-list div:nth-child(6n) {
-    margin-right: 0;
-}
-
-.card .card-list div:nth-child(6n+1) {
-    margin-left: 5px;
-}
-
-.card .card-show {
-    text-align: center;
-    width: 100%;
-    cursor: pointer;
-    color: #646cff;
-}
-/*topic list item*/
-
-.goods-info {
-    display: block;
-    max-width: 170px;
-    margin-bottom: 30px;
-
-}
-
-.goods-info:hover {
-    cursor: pointer;
-}
-
-.goods-info .goods-img {
-    padding: 0;
-    margin: 0 0 12px 0;
-    overflow: hidden;
-    display: flex;
-}
-
-.goods-info .goods-img img {
+    .right-handler div:hover {
+        background-color: #1475fa;
+    }
+
+    .item-icon-top:hover {
+
+    }
+
+    .item-icon-top:hover span {
+        color: white;
+    }
+
+    .item-icon-top:hover .item-icon {
+        color: white;
+    }
+
+    .item-icon-top:hover .item-icon-top {
+        color: white;
+    }
+
+    .handler-item-content {
+        margin: 0 auto;
+        width: 52px;
+        height: 74px;
+        justify-content: center;
+        align-items: center;
+        border-bottom: #F1F1F1 1px solid;
+
+        display: flex;
+        flex-direction: column;
+        font-size: 13px;
+    }
+
+    .item-icon {
+        color: #666666;
+    }
+
+
+    span {
+        color: #333333;
+    }
+
+
+    .handler-item-content:hover {
+        cursor: pointer;
+        user-select: none;
+        color: white;
+        background-color: #1475fa;
+
+
+    }
+
+    .handler-item-content:hover span {
+        color: white;
+    }
+
+    .handler-item-content:hover .item-icon {
+        color: white;
+    }
+
+    .handler-item-content:hover .item-icon-top {
+        color: white;
+
+    }
+
+
+    .tooltip {
+
+        display: block;
+        position: absolute;
+        padding: 10px;
+        border-radius: 8px;
+        box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
+        cursor: auto;
+        color: #333333;
+    }
+
+    .tooltip-arrow {
+        position: absolute;
+        right: -9.5px;
+        top: calc(50% - 10px);
+        width: 10px;
+        height: 20px;
+
+
+        -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
+        clip-path: polygon(100% 50%, 0 0, 0 100%);
+    }
+
+    .slot-image {
+        max-width: 80px;
+        max-height: 80px;
+    }
+
+    .handler-to-top {
+        cursor: pointer;
+    }
+
+
+    .gift-pack {
+        width: 1170px;
+        text-align: left;
+        font-size: 12px;
+        margin: 60px auto 50px auto;
+        line-height: 18px;
+        padding-bottom: 20px;
+        border-bottom: 1px solid rgb(217, 217, 217);
+    }
+
+    .gift-pack-title {
+        font-size: 24px;
+        margin-bottom: 15px;
+    }
+
+    .gift-pack-content {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 20px;
+    }
+
+    .content-item {
+        cursor: pointer;
+    }
+
+    .content-item-img {
+        max-width: 370px;
+        max-height: 165px;
+        overflow: hidden;
+    }
+
+    .content-item-img img {
+        border-radius: 10px;
+        width: 370px;
+        height: 165px;
+    }
+
+
+    .content-item-title {
+        font-weight: bold;
+        font-size: 14px;
+    }
+
+    .content-item-remark {
+        color: #999;
+    }
+
+    .content-item-price {
+        display: flex;
+        vertical-align: middle;
+        margin: 10px 0;
+    }
+
+    .content-item-price div {
+        margin-right: 10px;
+    }
+
+    .price-original {
+        text-decoration: line-through;
+        color: #888888;
+    }
+
+    .price-target {
+        vertical-align: middle;
+        padding: 0 3px;
+        margin: 0 0 0 4px;
+        background: rgb(223, 30, 28);
+        color: white;
+        font-weight: bolder;
+    }
+
+    .price-target span {
+        color: white;
+    }
+
+    .price-now {
+        font-family: BlinkMacSystemFont;
+        font-size: 16px;
+    }
+
+    /*==============首页主题====================*/
+    .card {
+        width: 1180px;
+        margin: auto;
+        padding: 0;
+        /* border: 1px solid #ccc; */
+        text-align: left;
+    }
+
+    .card .card-header {
+        margin: 20px 0 0 5px;
+        display: flex;
+        line-height: 32px;
+    }
+
+    .card .card-header .card-title {
+        text-align: left;
+        display: inline-block;
+        padding: 0;
+        width: auto;
+        margin: 0;
+        font-weight: bold;
+        font-size: 24px;
+    }
+
+    .card .card-header .cart-other {
+        flex: 1;
+        margin: 0;
+        width: auto;
+        text-align: right;
+        vertical-align: middle;
+        align-items: center;
+        font-size: 12px;
+    }
+
+    .card .card-header .cart-other a {
+        cursor: pointer;
+        padding: 5px 15px;
+        color: white;
+        background: #1475fa;
+    }
+
+    .card .card-des {
+        margin: 8px 0 0 5px;
+        color: #666666;
+        font-size: 14px;
+    }
+
+    .card .card-list {
+        display: flex;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        padding: 5px 0 0 0;
+        margin-top: 15px;
+        overflow: hidden;
+        /* overflow-y: auto; */
+    }
+
+    .card .card-list div {
+        margin-right: 30px;
+        display: inline-block;
+    }
+
+    .card .card-list div:nth-child(6n) {
+        margin-right: 0;
+    }
+
+    .card .card-list div:nth-child(6n+1) {
+        margin-left: 5px;
+    }
+
+    .card .card-show {
+        text-align: center;
+        width: 100%;
+        cursor: pointer;
+        color: #646cff;
+    }
+
+    /*topic list item*/
+    .goods-info {
+        display: block;
+        max-width: 170px;
+        margin-bottom: 30px;
+
+    }
+
+    .goods-info:hover {
+        cursor: pointer;
+    }
+
+    .goods-info .goods-img {
+        width: auto;
+        padding: 0;
+        margin: 0 0 12px 0;
+        overflow: hidden;
+        display: flex;
+    }
+
+    .goods-info .goods-img img {
     height: 228px;
     width: 170px;
-}
-
-.goods-info .goods-img img:hover {
-    z-index: 0;
-}
-
-.goods-info .goods-img:hover::after {
-    opacity: 1;
-    box-shadow: rgba(100, 100, 100, 0.3) 0 0 8px 3px;
-}
-
-.goods-info .goods-img::after {
-    content: "";
-    position: absolute;
-    z-index: 9;
-    width: 170px;
-    height: 228px;
-    box-sizing: border-box;
-    background: rgba(229, 229, 229, 0.2);
-    transform: translateX(-170px);
-    animation: 0.2s ease 0s 1 normal none running enlarge;
-    opacity: 0;
-    transition: all 0.3s ease 0s;
-}
-
-.goods-info .goods-name {
-    height: 38px;
-    font-size: 12px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    -webkit-line-clamp: 2;
-}
-
-.goods-info .goods-price {
-    font-size: 16px;
-    margin: 5px 0;
-    font-weight: bold;
-}
-
-.goods-info .goods-price::before {
-    content: "￥";
-}
-
-.goods-info .goods-original-price {
-    display: inline-block;
-    text-decoration: line-through;
-    font-size: 12px;
-    margin: 0;
-    padding: 0;
-
-}
-
-.goods-info .goods-discount-percentage {
-    display: inline-block;
-    font-size: 12px;
-    margin: 0 0 0 10px;
-    padding: 0 5px;
-    color: white;
-    background: rgb(223, 30, 28);
-}
-
-.goods-info .goods-discount-percentage::before {
-    content: "-";
-}
-
-.goods-info .goods-discount-percentage::after {
-    content: "%";
-}
-
+    }
+
+    .goods-info .goods-img img:hover {
+        z-index: 0;
+    }
+
+    .goods-info .goods-img:hover::after {
+        opacity: 1;
+        box-shadow: rgba(100, 100, 100, 0.3) 0 0 8px 3px;
+    }
+
+    .goods-info .goods-img::after {
+        content: "";
+        position: absolute;
+        z-index: 9;
+        width: 170px;
+        height: 228px;
+        box-sizing: border-box;
+        background: rgba(229, 229, 229, 0.2);
+        transform: translateX(-170px);
+        animation: 0.2s ease 0s 1 normal none running enlarge;
+        opacity: 0;
+        transition: all 0.3s ease 0s;
+    }
+
+    .goods-info .goods-name {
+        font-size: 12px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        -webkit-line-clamp: 2;
+    }
+
+    .goods-info .goods-price {
+        font-size: 16px;
+        margin: 5px 0;
+        font-weight: bold;
+    }
+
+    .goods-info .goods-price::before {
+        content: "￥";
+    }
+
+    .goods-info .goods-original-price {
+        display: inline-block;
+        text-decoration: line-through;
+        font-size: 12px;
+        margin: 0;
+        padding: 0;
+
+    }
+
+    .goods-info .goods-discount-percentage {
+        display: inline-block;
+        font-size: 12px;
+        margin: 0 0 0 10px;
+        padding: 0 5px;
+        color: white;
+        background: rgb(223, 30, 28);
+    }
+
+    .goods-info .goods-discount-percentage::before {
+        content: "-";
+    }
+
+    .goods-info .goods-discount-percentage::after {
+        content: "%";
+    }
+}

file/resources/css/index.css

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

file/static/index.html

@@ -6,9 +6,11 @@
     <link rel="stylesheet" href="/api/static/css/index.css">
     <link rel="stylesheet" href="/api/static/css/carousel.css">
     <link rel="stylesheet" href="/api/static/css/home.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="keywords" content="易租租">
     <meta name="description"
           content="海外数字商城，为全球用户提供谷歌、苹果、脸书等购买服务，还有苹果、谷歌、steam礼品卡等购买渠道。在这里您还能进行steam代充、steam海外代充、steam钱包代充等，7*24小时为您提供满意的交易。">
+
 </head>
 <body>
 <div class="nav-top"></div>

main.go

@@ -21,6 +21,7 @@ func main() {
 
 func runGin() {
 	Router := gin.Default()
+	router.TestRouth(Router.Group("/"))
 	apiGroup := Router.Group(router.Prefix)
 	Router.SetFuncMap(templatefunc.BaseTemplateFunc())
 	//加载模板

router/Router.go

@@ -23,7 +23,7 @@ func InitRouter(apiGroup *gin.RouterGroup) {
 	//文件上传下载
 	FileRouter(apiGroup)
 	//测试
-	TestRouth(apiGroup)
+	//TestRouth(apiGroup)
 	//订单，支付
 	OrderRouter(apiGroup)
 	//文章接口

router/TestRouter.go

@@ -14,12 +14,14 @@ import (
 )
 
 func TestRouth(engine *gin.RouterGroup) {
-	user := engine.Group("/test")
+	//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", Home)
+		PushRouter(user, "GET", "/", Home)
 		PushRouter(user, "GET", "/topic", Topic)
 		PushRouter(user, "GET", "/detail", Detail)
 		PushRouter(user, "GET", "/search", SearchPage)