seo页面

data/domain/vo/ShopAdviceVo.go

@@ -6,7 +6,16 @@ type ShopAdviceVo struct {
 	Carousels   []domain.ShopAdviceCarousel `json:"carousels"`
 	PackageList []AdviceSku                 `json:"packageList"`
 }
+
 type AdviceSku struct {
 	ShopAdviceCarousel domain.ShopAdviceCarousel `xorm:"extends" json:"shopAdviceCarousel"`
 	GoodsSku           domain.GoodsSku           `xorm:"extends" json:"goodsSku"`
 }
+
+func (a AdviceSku) String() string {
+	return a.ShopAdviceCarousel.String() + a.GoodsSku.String()
+}
+
+func (s ShopAdviceVo) String() string {
+	return s.Carousels[0].String() + s.PackageList[0].String()
+}

file/assets/css/detail.css

@@ -0,0 +1,275 @@
+.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-tag .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-tag .goods-show-desc {
+    font-size: 12px;
+}
+
+.detail .goods-show .goods-show-info .goods-show-body .goods-show-text .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;
+    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 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 .

file/static/css/index.css → file/assets/css/home.css

@@ -243,8 +243,181 @@ span {
     color: white;
     font-weight: bolder;
 }
+.price-target span{
+    color: white;
+}
 
 .price-now {
     font-family: BlinkMacSystemFont;
     font-size: 16px;
 }
+
+/*==============首页主题====================*/
+.card {
+    width: 1180px;
+    margin: auto;
+    padding: 0;
+    /* border: 1px solid #ccc; */
+    text-align: left;
+}
+
+.card .card-header {
+    margin: 20px 0 0 5px;
+    display: flex;
+    line-height: 32px;
+}
+
+.card .card-header .card-title {
+    text-align: left;
+    display: inline-block;
+    padding: 0;
+    width: auto;
+    margin: 0;
+    font-weight: bold;
+    font-size: 24px;
+}
+
+.card .card-header .cart-other {
+    flex: 1;
+    margin: 0;
+    width: auto;
+    text-align: right;
+    vertical-align: middle;
+    align-items: center;
+    font-size: 12px;
+}
+
+.card .card-header .cart-other a {
+    cursor: pointer;
+    padding: 5px 15px;
+    color: white;
+    background: #1475fa;
+}
+
+.card .card-des {
+    margin: 8px 0 0 5px;
+    color: #666666;
+    font-size: 14px;
+}
+
+.card .card-list {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 5px 0 0 0;
+    margin-top: 15px;
+    overflow: hidden;
+    /* overflow-y: auto; */
+}
+
+.card .card-list div {
+    margin-right: 30px;
+    display: inline-block;
+}
+
+.card .card-list div:nth-child(6n) {
+    margin-right: 0;
+}
+
+.card .card-list div:nth-child(6n+1) {
+    margin-left: 5px;
+}
+
+.card .card-show {
+    text-align: center;
+    width: 100%;
+    cursor: pointer;
+    color: #646cff;
+}
+/*topic list item*/
+
+.goods-info {
+    display: block;
+    max-width: 170px;
+    margin-bottom: 30px;
+
+}
+
+.goods-info:hover {
+    cursor: pointer;
+}
+
+.goods-info .goods-img {
+    padding: 0;
+    margin: 0 0 12px 0;
+    overflow: hidden;
+    display: flex;
+}
+
+.goods-info .goods-img img {
+    height: 228px;
+    width: 170px;
+}
+
+.goods-info .goods-img img:hover {
+    z-index: 0;
+}
+
+.goods-info .goods-img:hover::after {
+    opacity: 1;
+    box-shadow: rgba(100, 100, 100, 0.3) 0 0 8px 3px;
+}
+
+.goods-info .goods-img::after {
+    content: "";
+    position: absolute;
+    z-index: 9999;
+    width: 170px;
+    height: 228px;
+    box-sizing: border-box;
+    background: rgba(229, 229, 229, 0.2);
+    transform: translateX(-170px);
+    animation: 0.2s ease 0s 1 normal none running enlarge;
+    opacity: 0;
+    transition: all 0.3s ease 0s;
+}
+
+.goods-info .goods-name {
+    height: 38px;
+    font-size: 12px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+}
+
+.goods-info .goods-price {
+    font-size: 16px;
+    margin: 5px 0;
+    font-weight: bold;
+}
+
+.goods-info .goods-price::before {
+    content: "￥";
+}
+
+.goods-info .goods-original-price {
+    display: inline-block;
+    text-decoration: line-through;
+    font-size: 12px;
+    margin: 0;
+    padding: 0;
+
+}
+
+.goods-info .goods-discount-percentage {
+    display: inline-block;
+    font-size: 12px;
+    margin: 0 0 0 10px;
+    padding: 0 5px;
+    color: white;
+    background: rgb(223, 30, 28);
+}
+
+.goods-info .goods-discount-percentage::before {
+    content: "-";
+}
+
+.goods-info .goods-discount-percentage::after {
+    content: "%";
+}
+

file/static/css/bar.css → file/assets/css/index.css

@@ -1,3 +1,11 @@
+* {
+    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;

file/assets/css/topic.css

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

file/assets/js/handler.js

@@ -0,0 +1,10 @@
+const routerArray = [
+    {
+        path: '/',
+        name: '首页',
+    }]
+
+//=======================链接跳转
+function JumpRouter(url, query) {
+    window.location.href = url + "?routerlink=" + query;
+}

file/static/js/index.js → file/assets/js/index.js

@@ -1,5 +1,4 @@
 window.addEventListener('scroll', handleScroll, true)
-handleScroll()
 
 function handleScroll() {
     if (window.scrollY > 100) {
@@ -46,18 +45,18 @@ window.onload = function () {
 
 //点击右边按钮切换下一张图片
     rightBtn.onclick = function () {
-        if (index === items.length - 1){
+        if (index === items.length - 1) {
             index = 0;
-        }else {
+        } else {
             index++
         }
         move();
     }
 //点击左边按钮切换上一张图片
     leftBtn.onclick = function () {
-        if (index === 0){
+        if (index === 0) {
             index = items.length - 1;
-        }else {
+        } else {
             index--
         }
         move();
@@ -91,3 +90,57 @@ window.onload = function () {
         }, 1500)
     }
 }
+
+var CardListElements = null
+
+//初始化加载 topic列表
+function TopicListShowLoad() {
+    CardListElements = document.getElementsByClassName("card-list");
+    console.log(6666666666)
+    for (let i = 0; i < CardListElements.length; i++) {
+        let goodsInfoEles = CardListElements[i].getElementsByClassName("goods-info")
+        for (let i = 0; i < goodsInfoEles.length; i++) {
+            if (goodsInfoEles[i].getAttribute("index") > 12) {
+                goodsInfoEles[i].style.display = "none";
+            }
+        }
+        let showEle = CardListElements[i].getElementsByClassName("card-show")
+        console.log(showEle)
+        if (!showEle || showEle.length === 0) {
+            continue
+        }
+        let linkElement = showEle.item(0).getElementsByTagName("a").item(0);
+        console.log(linkElement)
+        linkElement.addEventListener("click", (e) => {
+            if (linkElement.getAttribute("show")==="true") {
+                linkElement.setAttribute("show", "false");
+                linkElement.innerHTML = "查看更多";
+                for (let i = 0; i < goodsInfoEles.length; i++) {
+                    if (goodsInfoEles[i].getAttribute("index") > 12) {
+                        goodsInfoEles[i].style.display = "none";
+                    }
+                }
+            } else {
+                linkElement.setAttribute("show", "true");
+                linkElement.innerHTML = "收起";
+                for (let i = 0; i < goodsInfoEles.length; i++) {
+                    if (goodsInfoEles[i].getAttribute("index") > 12) {
+                        goodsInfoEles[i].style.display = "inline-block";
+                    }
+                }
+            }
+        })
+    }
+
+    // let goodsInfoEles = document.getElementsByClassName("goods-info");
+    // for (let i = 0; i < goodsInfoEles.length; i++) {
+    //     if (goodsInfoEles[i].getAttribute("index") > 12) {
+    //         goodsInfoEles[i].style.display = "none";
+    //     }
+    // }
+
+
+}
+
+handleScroll()
+TopicListShowLoad()

file/static/NavigationBar.tmpl

@@ -0,0 +1,165 @@
+<div class="navigation-bar">
+    <div class="nav-body">
+        <!--      <router-link to="/" class="nav-logo">-->
+        <div class="nav-logo">
+            <img src="../assets/image/logo.png" alt="logo" onclick="JumpRouter('/','')"/>
+        </div>
+        <!--      </router-link>-->
+        <div class="nav-search">
+            <form action="/search" target="_blank">
+                <div class="nav-search-div">
+                    <input class="search-input" type="text" name="key" placeholder="搜索商品名称"/>
+                </div>
+                <!--          点击-->
+                <div class="search-btn">
+                    <div class="search-btn-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-6fbb019e="">
+                            <path fill="currentColor"
+                                  d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704"></path>
+                        </svg>
+                    </div>
+                </div>
+            </form>
+        </div>
+        <div class="nav-user">
+
+            <!--                todo 头像处理-->
+            <div class="nav-user-icon" @click="openView()">
+                <div class="nav-user-icon-bg">
+                    <el-icon size="24">
+                        <User/>
+                    </el-icon>
+                    <img :src="userInfo.avatar" v-else alt="6"/>
+                </div>
+                <span>{1{ isLogin ? userInfo.name : "登录" }1}</span>
+            </div>
+
+            <div class="login-body" style="display: none">
+                <div class="login-center" style="display: none">
+                    <div class="login-content">
+                        <div class="login-image" :style="loginImageStyle"></div>
+                        <form>
+                            <div class="login-from">
+                                <div class="login-select">
+                                    <div class=" login-select-item "
+                                         :class="selectType=='phone'?'select-item':''"
+                                         @click="setType('phone')">
+                                        <span>手机号登录</span>
+                                    </div>
+                                    <div class=" login-select-item "
+                                         :class="selectType=='email'?'select-item':''"
+                                         @click="setType('email')">
+                                        <span>邮箱登录</span>
+                                    </div>
+                                    <div class=" login-select-item "
+                                         :class="selectType=='wx'?'select-item':''"
+                                         @click="setType('wx')">
+                                        <span>微信扫码登录</span>
+                                    </div>
+                                    <!--特效白条-->
+                                    <div class="select-item2" :style="getSelectTypeStyle()"></div>
+                                </div>
+
+                                <div class="login-type-phone" v-show="selectType=='phone'||selectType=='email'">
+                                    <div class="login-phone">
+
+                                        <div class="login-phone-input">
+                                            <input name="username" v-model="username"
+                                                   autocomplete="off"
+                                                   :placeholder="selectType=='phone'?'手机号码':'邮箱'"/>
+                                        </div>
+                                    </div>
+                                    <div class="login-phone-code" v-if="selectType=='phone'">
+                                        <div class="login-phone-code-input">
+                                            <input name="username" v-model="password"
+                                                   autocomplete="off"
+                                                   placeholder="验证码"/>
+                                        </div>
+                                        <div class="login-phone-code-btn" @click="getCode()">
+                                            {1{ awaitCode > 0 ? awaitCode + 's' : '发送验证码' }1}
+                                        </div>
+                                    </div>
+
+                                    <div class="login-email" v-if="selectType=='email'">
+                                        <div class="login-email-input">
+                                            <input name="username" v-model="password"
+                                                   autocomplete="off"
+                                                   type="password"
+                                                   placeholder="密码"/>
+                                        </div>
+                                    </div>
+
+                                    <div class="login-btn" @click="login()">
+                                        <div class="login-btn-div">登录</div>
+                                    </div>
+                                </div>
+
+                                <div class="login-type-wx" v-show="selectType=='wx'">
+                                    <div class="login-wx-refresh" @click="refreshWxCode()">
+                                        <div class="login-wx-refresh-icon"
+                                             style="transform: translateY(15%)">
+                                            <el-icon size="25" :class="refreshWxCodeState?'is-loading':''">
+                                                <refresh/>
+                                            </el-icon>
+                                        </div>
+                                        <div class="login-wx-refresh-text">
+                                            <span style="line-height: 25px">刷新二维码</span>
+                                        </div>
+                                    </div>
+                                    <div class="login-wx-tip">
+                                        <span>微信登录</span>
+                                    </div>
+                                    <div class="login-wx-image"></div>
+                                    <div class="login-wx-tip">
+                                        <span>请使用微信扫码登录</span>
+                                    </div>
+                                </div>
+                                <span class="login-register-btn"
+                                      v-if="selectType!=='wx'"
+                                      @click="setShowRegister('register')">注册</span>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <div class="register-center" style="display: none">
+                    <div class="register-content">
+                        <form>
+                            <div class="register-content-title">
+                                注册
+                            </div>
+                            <div class="register-content-input">
+                                <k-k-c-input name="username" @binding="setUsername" :text="username"
+                                             placeholder="请输入邮箱" type="text"/>
+                            </div>
+                            <div class="register-content-input">
+                                <k-k-c-input name="password" @binding="setPassword" :text="password"
+                                             type="password" placeholder="请输入密码"/>
+                            </div>
+                            <div class="register-content-input">
+                                <k-k-c-input name="username" @binding="setRequirePassword" :text="requirePassword"
+                                             type="password" placeholder="请输入密码"/>
+                            </div>
+                            <div class="register-content-input">
+                                <k-k-c-input name="username" @binding="setPhone" :text="phone"
+                                             placeholder="请输入手机号" type="text"/>
+                            </div>
+                            <div class="register-content-code">
+                                <div class="register-content-code-input">
+                                    <k-k-c-input name="username" @binding="setCode" :text="code"
+                                                 placeholder="请输入手机号" type="text"/>
+                                </div>
+                                <div class="register-content-code-btn" @click="sendCode()">
+                                    {1{ awaitCode > 0 ? awaitCode + 's' : '发送验证码' }1}
+                                </div>
+                            </div>
+                            <div class="register-content-submit" @click="register()">
+                                注册
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <div class="login-body-shield" @click="showViewType=''"></div>
+            </div>
+        </div>
+    </div>
+</div>

file/static/detail.html

@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>详情</title>
+    <link rel="stylesheet" href="../assets/css/index.css">
+    <link rel="stylesheet" href="../assets/css/detail.css">
+</head>
+<body>
+<div class="navigation-bar">
+    <div class="nav-body">
+        <!--      <router-link to="/" class="nav-logo">-->
+        <div class="nav-logo">
+            <img src="../assets/image/logo.png" alt="logo" onclick="JumpRouter('/','')"/>
+        </div>
+        <!--      </router-link>-->
+        <div class="nav-search">
+            <form action="/search" target="_blank">
+                <div class="nav-search-div">
+                    <input class="search-input" type="text" name="key" placeholder="搜索商品名称"/>
+                </div>
+                <!--          点击-->
+                <div class="search-btn">
+                    <div class="search-btn-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-6fbb019e="">
+                            <path fill="currentColor"
+                                  d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704"></path>
+                        </svg>
+                    </div>
+                </div>
+            </form>
+        </div>
+        <div class="nav-user">
+
+            <!--                todo 头像处理-->
+            <div class="nav-user-icon" @click="openView()">
+                <div class="nav-user-icon-bg">
+                    <el-icon size="24">
+                        <User/>
+                    </el-icon>
+                    <img :src="userInfo.avatar" v-else alt="6"/>
+                </div>
+                <span>{1{ isLogin ? userInfo.name : "登录" }1}</span>
+            </div>
+
+            <div class="login-body" style="display: none">
+                <div class="login-center" style="display: none">
+                    <div class="login-content">
+                        <div class="login-image" :style="loginImageStyle"></div>
+                        <form>
+                            <div class="login-from">
+                                <div class="login-select">
+                                    <div class=" login-select-item "
+                                         :class="selectType=='phone'?'select-item':''"
+                                         @click="setType('phone')">
+                                        <span>手机号登录</span>
+                                    </div>
+                                    <div class=" login-select-item "
+                                         :class="selectType=='email'?'select-item':''"
+                                         @click="setType('email')">
+                                        <span>邮箱登录</span>
+                                    </div>
+                                    <div class=" login-select-item "
+                                         :class="selectType=='wx'?'select-item':''"
+                                         @click="setType('wx')">
+                                        <span>微信扫码登录</span>
+                                    </div>
+                                    <!--特效白条-->
+                                    <div class="select-item2" :style="getSelectTypeStyle()"></div>
+                                </div>
+
+                                <div class="login-type-phone" v-show="selectType=='phone'||selectType=='email'">
+                                    <div class="login-phone">
+
+                                        <div class="login-phone-input">
+                                            <input name="username" v-model="username"
+                                                   autocomplete="off"
+                                                   :placeholder="selectType=='phone'?'手机号码':'邮箱'"/>
+                                        </div>
+                                    </div>
+                                    <div class="login-phone-code" v-if="selectType=='phone'">
+                                        <div class="login-phone-code-input">
+                                            <input name="username" v-model="password"
+                                                   autocomplete="off"
+                                                   placeholder="验证码"/>
+                                        </div>
+                                        <div class="login-phone-code-btn" @click="getCode()">
+                                            {1{ awaitCode > 0 ? awaitCode + 's' : '发送验证码' }1}
+                                        </div>
+                                    </div>
+
+                                    <div class="login-email" v-if="selectType=='email'">
+                                        <div class="login-email-input">
+                                            <input name="username" v-model="password"
+                                                   autocomplete="off"
+                                                   type="password"
+                                                   placeholder="密码"/>
+                                        </div>
+                                    </div>
+
+                                    <div class="login-btn" @click="login()">
+                                        <div class="login-btn-div">登录</div>
+                                    </div>
+                                </div>
+
+                                <div class="login-type-wx" v-show="selectType=='wx'">
+                                    <div class="login-wx-refresh" @click="refreshWxCode()">
+                                        <div class="login-wx-refresh-icon"
+                                             style="transform: translateY(15%)">
+                                            <el-icon size="25" :class="refreshWxCodeState?'is-loading':''">
+                                                <refresh/>
+                                            </el-icon>
+                                        </div>
+                                        <div class="login-wx-refresh-text">
+                                            <span style="line-height: 25px">刷新二维码</span>
+                                        </div>
+                                    </div>
+                                    <div class="login-wx-tip">
+                                        <span>微信登录</span>
+                                    </div>
+                                    <div class="login-wx-image"></div>
+                                    <div class="login-wx-tip">
+                                        <span>请使用微信扫码登录</span>
+                                    </div>
+                                </div>
+                                <span class="login-register-btn"
+                                      v-if="selectType!=='wx'"
+                                      @click="setShowRegister('register')">注册</span>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <div class="register-center" style="display: none">
+                    <div class="register-content">
+                        <form>
+                            <div class="register-content-title">
+                                注册
+                            </div>
+                            <div class="register-content-input">
+                                <k-k-c-input name="username" @binding="setUsername" :text="username"
+                                             placeholder="请输入邮箱" type="text"/>
+                            </div>
+                            <div class="register-content-input">
+                                <k-k-c-input name="password" @binding="setPassword" :text="password"
+                                             type="password" placeholder="请输入密码"/>
+                            </div>
+                            <div class="register-content-input">
+                                <k-k-c-input name="username" @binding="setRequirePassword" :text="requirePassword"
+                                             type="password" placeholder="请输入密码"/>
+                            </div>
+                            <div class="register-content-input">
+                                <k-k-c-input name="username" @binding="setPhone" :text="phone"
+                                             placeholder="请输入手机号" type="text"/>
+                            </div>
+                            <div class="register-content-code">
+                                <div class="register-content-code-input">
+                                    <k-k-c-input name="username" @binding="setCode" :text="code"
+                                                 placeholder="请输入手机号" type="text"/>
+                                </div>
+                                <div class="register-content-code-btn" @click="sendCode()">
+                                    {1{ awaitCode > 0 ? awaitCode + 's' : '发送验证码' }1}
+                                </div>
+                            </div>
+                            <div class="register-content-submit" @click="register()">
+                                注册
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <div class="login-body-shield" @click="showViewType=''"></div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="detail" v-if="detailInfo !== null">
+    <!--    路由地址栏-->
+    <RouterJumpBar v-model:nowRouterName="detailInfo.sku.skuName"/>
+    {{.goods}}
+    <div class="goods-show">
+        <div class="goods-show-info">
+            <div class="goods-show-body">
+                <div class="goods-show-img">
+                    <!--            <img src="../assets/goods-img.jpg" alt="" width="180" height="240"/>-->
+                    <img src="{{.sku.skuImage}}" alt="" width="180" height="240"/>
+                </div>
+                <div class="goods-show-text">
+                    <div class="goods-show-title">
+                        {{ .goods.goodsName }}
+                    </div>
+                    <div class="goods-show-advantages">
+                        {{range $tag := .tags}}
+                        {{if ne $tag nil and ne $tag.tag ""}}
+                        <div class="goods-show-advantage goods-show-advantage-icon">
+                        {{else}}
+                        <div class="goods-show-advantage goods-show-advantage-not-icon">
+                        {{end}}
+                                <img :src="item.iconUrl" v-if="item.iconUrl!=null&&item.iconUrl!==''">
+                                <div class="goods-show-tag">
+                                    <div class="goods-show-name">
+                                        {1{ item.name }}
+                                    </div>
+                                    <div class="goods-show-desc">
+                                        {1{ item.tag }}
+                                    </div>
+                                </div>
+                            </div>
+                            <!--                        </template>-->
+                            {{end}}
+                        </div>
+                        <div class="goods-show-des">
+                        </div>
+                    </div>
+                </div>
+
+                <div class="goods-show-count">
+                    <div class="goods-show-price-text">
+                        <span>近30天销量：</span>
+                        <span>{1{ detailInfo.goods.salesVolume }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="goods-info">
+            <div class="info-left">
+                <div class="info-left-select-btns">
+                    <div class="info-left-select-btn"
+                         @click="selectCommodityArea(item.id)"
+                         :style="detailInfo.sku.commodityAreaId===item.id?{backgroundColor:'#c7c7c7'}:{}"
+                         v-for="(item,index) in detailInfo.areas">
+                        <span>{1{ item.commodityAreaName }} {1{ item.id }}</span>
+                    </div>
+                </div>
+
+                <div class="info-left-select-param">
+                    <template v-for="(item,index) in selectorDatas">
+                        <div class="info-left-select-param-btn" @click="selectSku(item.id)">
+                            <div class="ilspb-selector">
+                                <el-icon v-if="detailInfo.sku.id==item.id" size="15" color="#dddddd">
+                                    <Select/>
+                                </el-icon>
+                            </div>
+                            <span>{1{ item.skuName }}</span>
+                            <div class="ilspb-tag" :style="getTargetMarginLeft(item.price.toString())"
+                                 v-if="item.price">
+                                ￥{1{ item.price }}
+                            </div>
+                        </div>
+                    </template>
+                </div>
+
+                <div class="info-left-des">
+                    <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>
+                    <template v-if="detailInfo.introductions.length>0" v-show="selectArticleType==0">
+                        <!--            v-if="detailInfo.introducti ons[0].id=detailInfo.sku.commodityAreaId"-->
+                        <div class="info-introduction"
+                             v-show="selectArticleType==0" v-html="detailInfo.introductions[0].goodsArticle">
+                        </div>
+                    </template>
+
+                    <div class="info-question" v-show="selectArticleType==1"></div>
+                </div>
+
+            </div>
+            <div class="info-right">
+                <div class="info-right-price-calc">
+                    <div class="info-right-purchase-count">
+                        <!--  购买数量 -->
+                        <div class="irpc-font">购买数量</div>
+                        <!--          数量按钮-->
+                        <div class="irpc-count-button">
+                            <div class="irpc-count-button-minus" @click="purchaseQuantityMinus()">-</div>
+                            <div class="irpc-count-button-input">
+                                <input v-model="purchaseQuantity"
+                                       @input="checkPurchaseQuantity"/>
+                            </div>
+                            <div class="irpc-count-button-add" @click="purchaseQuantityAdd()">+</div>
+                        </div>
+                    </div>
+                    <div class="info-right-total-purchase-price">
+
+                        <div class="price">
+                            <div class="price-name" style="font-size: 20px;color: #333333">单价</div>
+                            <div class="price-number">
+                                <div class="price-original"
+                                     v-if="detailInfo.sku.historicalPrices>=detailInfo.sku.price">
+                                    {1{ detailInfo.sku.historicalPrices }}
+                                </div>
+                                <div class="price-value" style="font-size: 20px">{1{ detailInfo.sku.price }}</div>
+                            </div>
+                        </div>
+                        <div class="price">
+                            <div class="price-name">总价</div>
+                            <div class="price-number">
+                                <div class="price-original"
+                                     v-if="detailInfo.sku.historicalPrices>=detailInfo.sku.price">
+                                    {1{ detailInfo.sku.historicalPrices * purchaseQuantity }}
+                                </div>
+                                <div class="price-value">{1{ detailInfo.sku.price * purchaseQuantity }}</div>
+                            </div>
+                        </div>
+                        <div class="purchase-button">
+                            <div class="purchase-button-btn" @click="SubmitOrder()">
+                                立即购买
+                            </div>
+                        </div>
+                    </div>
+                    <order-by-view :count="purchaseQuantity" :now-sku="detailInfo.sku"
+                                   :goods-name="detailInfo.goods.goodsName"
+                                   @closeView="closeOrderBuyView" v-model:ShowView="showOrderBuyView"
+                                   v-if="showOrderBuyView"/>
+                </div>
+                <div class="info-recommend">
+                    <div class="info-recommend-title">
+                        相关推荐
+                    </div>
+                    <div class="info-recommend-items">
+                        <template v-for="item in detailInfo.recommendedGoods">
+                            <div class="info-recommend-item" @click="SelectRecommended(item.id)">
+                                <div class="recommend-item-img">
+                                    <img :src="item.skuImage" alt="图片"/>
+                                </div>
+                                <div class="recommend-item-name">
+                                    {1{ item.skuName }} {1{ item.id }}
+                                </div>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="bottom-bar">
+        <!--    合作伙伴-->
+        <div class="partners">
+            <div class="partners-line">
+                <ul>
+                    <li>
+                        <img style="transform: rotate(180deg);"
+                             src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAAXNSR0IArs4c6QAAAhdJREFUSEulVU1rE1EUPdfEgBAIg27UjT+jS13pTpeKriMxRQxJ3hukBnc2ZUwiLUFGxRbbKqZ/Rve+2bswkSB13jDvygtJSZPJl5nlzJz7zr33nPNISlmL4/it53k/seJDQoh3RMRKqc1Op6NXwZOU8j6ABoATrfXLZrP5a9kCVC6Xr6TT6a8ANpj5Y6/Xe+b7frRMAbI/SSkLANoALG1Pa/16GQYDcLFYvJzNZr8DuAbgFMBxGIaVVqvVm8dgAM7n8xcdx3kDwDIAM4dE1FZKufOGOADbp1Kp3EylUkfD0+0rzczvoyh6MauFM3ChUHByudwxM98ZFWRm28JeEARbSQzOwMPBPQLwaaLP0Bizz8y1SSGdA5dKpUuZTOYHgKsTBf4C+KKUejzO4BzYAlzX3WXmJwAuTBQYrLHb7e74vv/bfpsCCyE2iOgzgBsJazq1QjLGCM/z/iSd7Bhjdono4Ywd2xYa/X7/1RTYAoQQ94hoH0BuVgFjzEkiWEp5F8DBPLA10jzaDxKGZonMpr3EwD4YY9zEgUkp94YaT1qV9f12vV6fXtVaIpFSJsnT6vswjuOtmfJ0XddhZiuO22PrsaJoB0HwfK4xhBC3iOhwZUuuFQbDGPoG4PoohrTWYlGOjQKwaE0/DMBGGIb1Rfk1cNVa0SuEsO7ZAXAURdH2IqrjRhldN7FS6unK1021Wq0x839ddP8AAxJAzJtS4CsAAAAASUVORK5CYII="/>
+                    </li>
+                    <!--          <li v-for="index in 9"><div><img src="../assets/steam-partners.png" alt=""></div></li>-->
+                    <li>
+                        <div><img src="../assets/image/footer/footer-slider-steam.png" alt=""></div>
+                    </li>
+                    <li>
+                        <div><img src="../assets/image/footer/footer-slider-google.png" alt=""></div>
+                    </li>
+                    <li>
+                        <div><img src="../assets/image/footer/footer-slider-tencent.png" alt=""></div>
+                    </li>
+                    <li>
+                        <div><img src="../assets/image/footer/footer-slider-microsoft.png" alt=""></div>
+                    </li>
+                    <li>
+                        <div><img src="../assets/image/footer/footer-slider-garena.png" alt=""></div>
+                    </li>
+                    <li>
+                        <div><img src="../assets/image/footer/footer-slider-ea.png" alt=""></div>
+                    </li>
+                    <li>
+                        <div><img src="../assets/image/footer/footer-slider-riot.png" alt=""></div>
+                    </li>
+                    <li>
+                        <div><img src="../assets/image/footer/footer-slider-pubg.png" alt=""></div>
+                    </li>
+                    <li>
+                        <div><img src="../assets/image/footer/footer-slider-ubisoft.png" alt=""></div>
+                    </li>
+                    <li>
+                        <img
+                                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAAXNSR0IArs4c6QAAAhdJREFUSEulVU1rE1EUPdfEgBAIg27UjT+jS13pTpeKriMxRQxJ3hukBnc2ZUwiLUFGxRbbKqZ/Rve+2bswkSB13jDvygtJSZPJl5nlzJz7zr33nPNISlmL4/it53k/seJDQoh3RMRKqc1Op6NXwZOU8j6ABoATrfXLZrP5a9kCVC6Xr6TT6a8ANpj5Y6/Xe+b7frRMAbI/SSkLANoALG1Pa/16GQYDcLFYvJzNZr8DuAbgFMBxGIaVVqvVm8dgAM7n8xcdx3kDwDIAM4dE1FZKufOGOADbp1Kp3EylUkfD0+0rzczvoyh6MauFM3ChUHByudwxM98ZFWRm28JeEARbSQzOwMPBPQLwaaLP0Bizz8y1SSGdA5dKpUuZTOYHgKsTBf4C+KKUejzO4BzYAlzX3WXmJwAuTBQYrLHb7e74vv/bfpsCCyE2iOgzgBsJazq1QjLGCM/z/iSd7Bhjdono4Ywd2xYa/X7/1RTYAoQQ94hoH0BuVgFjzEkiWEp5F8DBPLA10jzaDxKGZonMpr3EwD4YY9zEgUkp94YaT1qV9f12vV6fXtVaIpFSJsnT6vswjuOtmfJ0XddhZiuO22PrsaJoB0HwfK4xhBC3iOhwZUuuFQbDGPoG4PoohrTWYlGOjQKwaE0/DMBGGIb1Rfk1cNVa0SuEsO7ZAXAURdH2IqrjRhldN7FS6unK1021Wq0x839ddP8AAxJAzJtS4CsAAAAASUVORK5CYII="/>
+                    </li>
+                </ul>
+            </div>
+
+            <!--      服务支持-->
+            <div class="partners-service-guarantee">
+                <div class="service-guarantee">
+                    <div class="sg-icon" style="background: rgb(225, 222, 250);">
+                        <img
+                                class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
+                                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA1hJREFUWEftl0FO21AQhv+ZOBWtVDXLgE1wd1BQ+wLquuYE0BM0nKBwg9yg9AZwgnKDuPsWLBVaujOJTdg1Wwj2VM9JIIQ4iVMhNn1ZxFLezHz+Z97MC+GRF/1LfKu46AhRLWz+mtrP1IYa3CquOGCpBecnU/sZa2jbqqCD+b7XGlRrHIBdVLZ/4fmjVB4LUJp7XQXxBuexPggxKgWmuawYRi3G5U4Ynu6lQYwFsAt24frZc5cpJ4MQlrXiSBTdqwEdPEf5mgid5fLiDFOvBzQWQG/UaYjacAkknJcbJSxLOYiuakHz540f01SKITWAxwbXvicCuIUQl8A3EBqsfdmuhM2TXb1HBzfYqEGiMzJGv3kmBXqbO0qQVmKvHh4mQftXyVS7ROyQEY+Uvd9mYgUGg9nmWxVTtAHEYAP7vj+62qcuwjTDeauslVAQaQGyEBPWg8Bzsza2oQqYs8vbnHuyAZGOP+psY1DrLDh8r581gP5uBEdO51lajcDb7KRJvoAY+qMVihM/AjB9bjS8g7EpmJ9b2iR+qrTx7WLto9XLfT9AyVqtxnLlBOGxk3TIuVdV5pl7YjBi1x9Qaeoa6KQArXpwtDkIkCUNUwOUzFUfhL16cFgtWaoqAqcReokCWdZUAPNzy3tExuZVdKkuLk79TrvOfQDR3ZYr5NfD7/ujgFIBdDslkY1+4xiRx8LbxHkHiLYa4UkSUNcM88x2r2J06ekeJ8A7SOzVQ6+c+RiWrPIBBEoIyTQjQInICyD6KpFUg4vjsUfONpWKiY5EZKsRekMHUqoCC1bZFZCrc9w7diTk1cPD7Sw5XrBWXUHs1gMv8TO4sgFAUh2lQS1YayIiO8Nad1fZ4aZDFcgIoJuSXBt/CFj3g29DU/agCuj7AiNf42t5mXYzyghwWxOT1EHS0pk/NcIfqXFSf+gOm7tF2FeUkwBY5vIuYqigeZLaoB4WYHbR1cc4PD+tZO4D9xQwlR6/fj08SnU2GMSaXWoJ4mrY/H3v8tLbm6pAyVo7gMgbIfH1WCaCAqgAiSpxJD7QTs0CMRcEqBAZ6+3oKmnXmRUoFhdtg7n7tt0mK6T/I3xMbpJ6xHfvCYlzPfN7ryPJz2eUk0oQnI7smFMNo0kKcNI9/wEeXYG/2/HLMDfFEZMAAAAASUVORK5CYII="
+                                draggable="false">
+                    </div>
+                    <div class="sg-info">
+                        <div>自动发货</div>
+                        <div>提供最快发货</div>
+                    </div>
+                </div>
+
+                <div class="service-guarantee">
+                    <div class="sg-icon" style="background: rgb(234, 217, 247);">
+                        <img
+                                class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
+                                src="../assets/image/footer/footer-promise-2.png"
+                                draggable="false">
+                    </div>
+                    <div class="sg-info">
+                        <div>正版保障</div>
+                        <div>官方正版采购,安全保障</div>
+                    </div>
+                </div>
+
+                <div class="service-guarantee">
+                    <div class="sg-icon" style="background: rgb(245, 221, 231);">
+                        <img
+                                class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
+                                src="../assets/image/footer/footer-promise-3.png"
+                                draggable="false">
+                    </div>
+                    <div class="sg-info">
+                        <div>客户服务</div>
+                        <div>提供专业的客服咨询</div>
+                    </div>
+                </div>
+
+                <div class="service-guarantee">
+                    <div class="sg-icon" style="background: rgb(226, 235, 230);">
+                        <img
+                                class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
+                                src="../assets/image/footer/footer-promise-4.png"
+                                draggable="false">
+                    </div>
+                    <div class="sg-info">
+                        <div>100%满意度</div>
+                        <div>给予您满意的购物体验</div>
+                    </div>
+                </div>
+
+
+            </div>
+        </div>
+
+        <div class="bottom-bar-about">
+            <div class="bottom-bar-about-left">
+                <div class="about-contact about-row">
+                    <div class="about-row-title">联系我们</div>
+                    <div class="about-row-item">平日 9:30 - 24:00</div>
+                    <div class="about-row-item">周末 9:30 - 24:00</div>
+                    <div class="about-row-imgs">
+                        <img src="../assets/image/footer/footer-about-1.png"/>
+                        <img src="../assets/image/footer/footer-about-2.png"/>
+                        <img src="../assets/image/footer/footer-about-3.png"/>
+                        <img src="../assets/image/footer/footer-about-4.png"/>
+                    </div>
+                </div>
+
+                <div class="about-me about-row">
+                    <div class="about-row-title">关于我们</div>
+                    <div class="about-row-item">关于我们</div>
+                    <div class="about-row-item">联系我们</div>
+                    <div class="about-row-item">条款与条件</div>
+                    <div class="about-row-item">隐私和Cookie</div>
+                </div>
+
+                <div class="about-issue about-row">
+                    <div class="about-row-title">常见问题</div>
+                    <div class="about-row-item">帮助中心</div>
+                    <div class="about-row-item">售后服务</div>
+                    <div class="about-row-item">关于退款</div>
+                    <div class="about-row-item">关于发货</div>
+                </div>
+            </div>
+
+            <div class="bottom-bar-about-right">
+                <div class="about-my-use about-row-title">
+                    我们使用
+                </div>
+                <div class="my-user-images">
+                    <img src="../assets/image/footer/footer-myuse-0.png"/>
+                    <img src="../assets/image/footer/footer-myuse-1.png"/>
+                    <img src="../assets/image/footer/footer-myuse-2.png"/>
+                    <img src="../assets/image/footer/footer-myuse-3.png"/>
+                    <img src="../assets/image/footer/footer-myuse-4.png"/>
+                    <img src="../assets/image/footer/footer-myuse-5.png"/>
+                    <img src="../assets/image/footer/footer-myuse-6.png"/>
+                    <img src="../assets/image/footer/footer-myuse-7.png"/>
+                    <img src="../assets/image/footer/footer-myuse-8.png"/>
+                    <img src="../assets/image/footer/footer-myuse-9.png"/>
+                    <img src="../assets/image/footer/footer-myuse-10.png"/>
+                    <img src="../assets/image/footer/footer-myuse-11.png"/>
+                    <img src="../assets/image/footer/footer-myuse-12.png"/>
+                    <img src="../assets/image/footer/footer-myuse-13.png"/>
+                    <img src="../assets/image/footer/footer-myuse-14.png"/>
+                    <img src="../assets/image/footer/footer-myuse-15.png"/>
+
+                </div>
+            </div>
+        </div>
+        <div class="bottom-bar-active">
+            <img src="../assets/image/footer/footer-active-0.png"/>
+            <img src="../assets/image/footer/footer-active-1.png"/>
+            <img src="../assets/image/footer/footer-active-2.png"/>
+            <img src="../assets/image/footer/footer-active-3.png"/>
+            <img src="../assets/image/footer/footer-active-4.png"/>
+        </div>
+        <div class="footer-about-box">
+            <img src="../assets/image/logo.png" width="130" height="35">
+        </div>
+        <div class="footer-about-app">
+            <img src="../assets/image/footer/footer-app-0.png"/>
+            <img src="../assets/image/footer/footer-app-1.png"/>
+        </div>
+
+        <!--    备案-->
+        <div class="filing">
+            <div class="filing-body">xxx省xxx市xxx区666号xxx公司</div>
+        </div>
+
+    </div>
+</body>
+</html>

file/static/index.html

@@ -3,10 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
-    <link rel="stylesheet" href="css/bar.css">
-    <link rel="stylesheet" href="css/index.css">
-    <link rel="stylesheet" href="css/carousel.css">
-
+    <link rel="stylesheet" href="../assets/css/index.css">
+    <link rel="stylesheet" href="../assets/css/carousel.css">
+    <link rel="stylesheet" href="../assets/css/home.css">
+    <script src="../assets/js/handler.js"></script>
 </head>
 <body>
 <div class="nav-top"></div>
@@ -14,7 +14,7 @@
     <div class="nav-body">
         <!--      <router-link to="/" class="nav-logo">-->
         <div class="nav-logo">
-            <img src="./assets/logo.png" alt="logo" @click="cleanRouter()"/>
+            <img src="../assets/image/logo.png" alt="logo" onclick="JumpRouter('/','')"/>
         </div>
         <!--      </router-link>-->
         <div class="nav-search">
@@ -34,6 +34,7 @@
             </form>
         </div>
         <div class="nav-user">
+
             <!--                todo 头像处理-->
             <div class="nav-user-icon" @click="openView()">
                 <div class="nav-user-icon-bg">
@@ -42,7 +43,7 @@
                     </el-icon>
                     <img :src="userInfo.avatar" v-else alt="6"/>
                 </div>
-                <span>{{ isLogin ? userInfo.name : "登录" }}</span>
+                <span>{1{ isLogin ? userInfo.name : "登录" }1}</span>
             </div>
 
             <div class="login-body" style="display: none">
@@ -87,7 +88,7 @@
                                                    placeholder="验证码"/>
                                         </div>
                                         <div class="login-phone-code-btn" @click="getCode()">
-                                            {{ awaitCode > 0 ? awaitCode + 's' : '发送验证码' }}
+                                            {1{ awaitCode > 0 ? awaitCode + 's' : '发送验证码' }1}
                                         </div>
                                     </div>
 
@@ -160,7 +161,7 @@
                                                  placeholder="请输入手机号" type="text"/>
                                 </div>
                                 <div class="register-content-code-btn" @click="sendCode()">
-                                    {{ awaitCode > 0 ? awaitCode + 's' : '发送验证码' }}
+                                    {1{ awaitCode > 0 ? awaitCode + 's' : '发送验证码' }1}
                                 </div>
                             </div>
                             <div class="register-content-submit" @click="register()">
@@ -298,30 +299,18 @@
     <div class="carousel">
         <div class="content">
             <ul id="item">
+                {{range $carousel := .carousels }}
                 <li class="item">
-                    <a href="#"><img src="assets/202405201111165c8a0eec19d9a.jpg"></a>
-                </li>
-                <li class="item">
-                    <a href="#"><img src="./assets/202405201111165c8a0eec19d9a.jpg"></a>
-                </li>
-                <li class="item">
-                    <a href="#"><img src="./assets/202405201111165c8a0eec19d9a.jpg"></a>
-                </li>
-                <li class="item">
-                    <a href="#"><img src="./assets/202405201111165c8a0eec19d9a.jpg"></a>
-                </li>
-                <li class="item">
-                    <a href="#"><img src="./assets/202405201111165c8a0eec19d9a.jpg"></a>
+                    <a href="{{$carousel.toId}}"><img src="{{$carousel.imageUrl}}"></a>
                 </li>
+                {{end}}
             </ul>
             <div id="btn-left"><</div>
             <div id="btn-right">></div>
             <ul id="circle">
+                {{range $carousel := .carousels }}
                 <li class="circle"></li>
-                <li class="circle"></li>
-                <li class="circle"></li>
-                <li class="circle"></li>
-                <li class="circle"></li>
+                {{end}}
             </ul>
         </div>
     </div>
@@ -329,32 +318,85 @@
     <div class="gift-pack">
         <h2 class="gift-pack-title">特惠礼包</h2>
         <div class="gift-pack-content">
-            {{range .packageList}}
-            <template v-for="(item,index) in adviceList">
-                <div class="content-item" @click="Jump(item.shopAdviceCarousel.toType,item.shopAdviceCarousel.toId)">
-                    <div class="content-item-img">
-                        <img :src="item.shopAdviceCarousel.imageUrl"/>
-                    </div>
-                    <div class="content-item-title">{{ item.shopAdviceCarousel.name }}</div>
-                    <div class="content-item-remark">{{ item.goodsSku.skuName }}</div>
-                    <div class="content-item-price">
-                        <del class="price-original" v-if="item.goodsSku.historicalPrices>item.goodsSku.price">
-                            <span>￥{{ item.goodsSku.historicalPrices }}</span></del>
-                        <div class="price-target" v-if="item.goodsSku.historicalPrices>item.goodsSku.price">
-                            <span>省{{ item.goodsSku.historicalPrices - item.goodsSku.price }}</span>
-                        </div>
-                        <div class="price-now">￥{{ item.goodsSku.price }}</div>
+            {{range $package := .packageList}}
+            <div class="content-item"
+                 onclick="JumpRouter('/detail/'+{{$package.shopAdviceCarousel.toId}},{{$package.shopAdviceCarousel.toType}})">
+                <div class="content-item-img">
+                    <img src="{{$package.shopAdviceCarousel.imageUrl}}"/>
+                </div>
+                <div class="content-item-title">{{ $package.shopAdviceCarousel.name }}</div>
+                <div class="content-item-remark">{{ $package.goodsSku.skuName }}</div>
+                <div class="content-item-price">
+                    {{if gt $package.goodsSku.historicalPrices $package.goodsSku.price}}
+                    <del class="price-original">
+                        <span>￥{{ $package.goodsSku.historicalPrices }}</span>
+                    </del>
+                    {{ end }}
+                    {{if gt $package.goodsSku.historicalPrices $package.goodsSku.price}}
+                    <div class="price-target">
+                        <span>省{{addFloat $package.goodsSku.historicalPrices $package.goodsSku.price}}</span>
                     </div>
+                    {{ end }}
+                    <div class="price-now">￥{{ $package.goodsSku.price }}</div>
                 </div>
-            </template>
-            {{- end }}
+            </div>
+            {{end}}
         </div>
     </div>
 
+    {{range $item := .list}}
+    {{if ne $item nil}}
 
-    <template v-if="shopHomeTopicVoList" v-for="item in shopHomeTopicVoList">
-        <GoodsTypeComponent :ShopHomeTopic="item"/>
-    </template>
+    <div class="card" v-if="ShopHomeTopic">
+        <div class="card-header">
+            <div class="card-title">
+                <span>    {{$item.topic.topicName}}</span>
+            </div>
+            <div class="cart-other">
+                <a @click="JumpRouter('/topic/'+ ShopHomeTopic.topic.id)">发现全部</a>
+            </div>
+        </div>
+        <div class="card-des">
+            <span>
+            {{ $item.topic.topicDesc }}
+            </span>
+        </div>
+        <div class="card-list">
+            {{$itemLen := len $item.skus}}
+            {{if ne $itemLen 0}}
+            {{range $index, $sku := $item.skus}}
+            <div class="goods-info" index="{{$index}}" onclick="JumpRouter('/detail/'+{{$sku.id}})">
+                <!--      //获取图片-->
+                <div class="goods-img"><img src="{{ $sku.skuImage }}" alt=""></div>
+                <div class="goods-name">{{$sku.skuName }}
+                </div>
+                <div class="goods-price">{{ $sku.price }}</div>
+
+                {{if gt $sku.historicalPrices $sku.price}}
+                <div class="goods-price-od">
+                    <span class="goods-original-price">￥{{ $sku.historicalPrices }}</span>
+                    <span class="goods-discount-percentage">{{discalc $sku.historicalPrices $sku.price}}</span>
+                </div>
+                {{else}}
+                <br>
+                <div class="goods-price-od">
+                    <span class="goods-original-price"></span>
+                    <span class=""></span>
+                </div>
+                {{end}}
+            </div>
+            {{end}}
+            {{end}}
+            {{if gt $itemLen 12}}
+            <!--            <div class="card-show" v-if="props.ShopHomeTopic.skus&&props.ShopHomeTopic.skus.length>12">-->
+            <div class="card-show">
+                <a>查看更多</a>
+            </div>
+            {{end}}
+        </div>
+    </div>
+    {{end}}
+    {{end}}
 </div>
 
 <div class="bottom-bar">
@@ -368,31 +410,31 @@
                 </li>
                 <!--          <li v-for="index in 9"><div><img src="../assets/steam-partners.png" alt=""></div></li>-->
                 <li>
-                    <div><img src="./assets/footer/footer-slider-steam.png" alt=""></div>
+                    <div><img src="../assets/image/footer/footer-slider-steam.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="./assets/footer/footer-slider-google.png" alt=""></div>
+                    <div><img src="../assets/image/footer/footer-slider-google.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="./assets/footer/footer-slider-tencent.png" alt=""></div>
+                    <div><img src="../assets/image/footer/footer-slider-tencent.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="./assets/footer/footer-slider-microsoft.png" alt=""></div>
+                    <div><img src="../assets/image/footer/footer-slider-microsoft.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="./assets/footer/footer-slider-garena.png" alt=""></div>
+                    <div><img src="../assets/image/footer/footer-slider-garena.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="./assets/footer/footer-slider-ea.png" alt=""></div>
+                    <div><img src="../assets/image/footer/footer-slider-ea.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="./assets/footer/footer-slider-riot.png" alt=""></div>
+                    <div><img src="../assets/image/footer/footer-slider-riot.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="./assets/footer/footer-slider-pubg.png" alt=""></div>
+                    <div><img src="../assets/image/footer/footer-slider-pubg.png" alt=""></div>
                 </li>
                 <li>
-                    <div><img src="./assets/footer/footer-slider-ubisoft.png" alt=""></div>
+                    <div><img src="../assets/image/footer/footer-slider-ubisoft.png" alt=""></div>
                 </li>
                 <li>
                     <img
@@ -420,7 +462,7 @@
                 <div class="sg-icon" style="background: rgb(234, 217, 247);">
                     <img
                             class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                            src="./assets/footer/footer-promise-2.png"
+                            src="../assets/image/footer/footer-promise-2.png"
                             draggable="false">
                 </div>
                 <div class="sg-info">
@@ -433,7 +475,7 @@
                 <div class="sg-icon" style="background: rgb(245, 221, 231);">
                     <img
                             class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                            src="./assets/footer/footer-promise-3.png"
+                            src="../assets/image/footer/footer-promise-3.png"
                             draggable="false">
                 </div>
                 <div class="sg-info">
@@ -446,7 +488,7 @@
                 <div class="sg-icon" style="background: rgb(226, 235, 230);">
                     <img
                             class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
-                            src="./assets/footer/footer-promise-4.png"
+                            src="../assets/image/footer/footer-promise-4.png"
                             draggable="false">
                 </div>
                 <div class="sg-info">
@@ -466,10 +508,10 @@
                 <div class="about-row-item">平日 9:30 - 24:00</div>
                 <div class="about-row-item">周末 9:30 - 24:00</div>
                 <div class="about-row-imgs">
-                    <img src="./assets/footer/footer-about-1.png"/>
-                    <img src="./assets/footer/footer-about-2.png"/>
-                    <img src="./assets/footer/footer-about-3.png"/>
-                    <img src="./assets/footer/footer-about-4.png"/>
+                    <img src="../assets/image/footer/footer-about-1.png"/>
+                    <img src="../assets/image/footer/footer-about-2.png"/>
+                    <img src="../assets/image/footer/footer-about-3.png"/>
+                    <img src="../assets/image/footer/footer-about-4.png"/>
                 </div>
             </div>
 
@@ -495,39 +537,39 @@
                 我们使用
             </div>
             <div class="my-user-images">
-                <img src="./assets/footer/footer-myuse-0.png"/>
-                <img src="./assets/footer/footer-myuse-1.png"/>
-                <img src="./assets/footer/footer-myuse-2.png"/>
-                <img src="./assets/footer/footer-myuse-3.png"/>
-                <img src="./assets/footer/footer-myuse-4.png"/>
-                <img src="./assets/footer/footer-myuse-5.png"/>
-                <img src="./assets/footer/footer-myuse-6.png"/>
-                <img src="./assets/footer/footer-myuse-7.png"/>
-                <img src="./assets/footer/footer-myuse-8.png"/>
-                <img src="./assets/footer/footer-myuse-9.png"/>
-                <img src="./assets/footer/footer-myuse-10.png"/>
-                <img src="./assets/footer/footer-myuse-11.png"/>
-                <img src="./assets/footer/footer-myuse-12.png"/>
-                <img src="./assets/footer/footer-myuse-13.png"/>
-                <img src="./assets/footer/footer-myuse-14.png"/>
-                <img src="./assets/footer/footer-myuse-15.png"/>
+                <img src="../assets/image/footer/footer-myuse-0.png"/>
+                <img src="../assets/image/footer/footer-myuse-1.png"/>
+                <img src="../assets/image/footer/footer-myuse-2.png"/>
+                <img src="../assets/image/footer/footer-myuse-3.png"/>
+                <img src="../assets/image/footer/footer-myuse-4.png"/>
+                <img src="../assets/image/footer/footer-myuse-5.png"/>
+                <img src="../assets/image/footer/footer-myuse-6.png"/>
+                <img src="../assets/image/footer/footer-myuse-7.png"/>
+                <img src="../assets/image/footer/footer-myuse-8.png"/>
+                <img src="../assets/image/footer/footer-myuse-9.png"/>
+                <img src="../assets/image/footer/footer-myuse-10.png"/>
+                <img src="../assets/image/footer/footer-myuse-11.png"/>
+                <img src="../assets/image/footer/footer-myuse-12.png"/>
+                <img src="../assets/image/footer/footer-myuse-13.png"/>
+                <img src="../assets/image/footer/footer-myuse-14.png"/>
+                <img src="../assets/image/footer/footer-myuse-15.png"/>
 
             </div>
         </div>
     </div>
     <div class="bottom-bar-active">
-        <img src="./assets/footer/footer-active-0.png"/>
-        <img src="./assets/footer/footer-active-1.png"/>
-        <img src="./assets/footer/footer-active-2.png"/>
-        <img src="./assets/footer/footer-active-3.png"/>
-        <img src="./assets/footer/footer-active-4.png"/>
+        <img src="../assets/image/footer/footer-active-0.png"/>
+        <img src="../assets/image/footer/footer-active-1.png"/>
+        <img src="../assets/image/footer/footer-active-2.png"/>
+        <img src="../assets/image/footer/footer-active-3.png"/>
+        <img src="../assets/image/footer/footer-active-4.png"/>
     </div>
     <div class="footer-about-box">
-        <img src="./assets/logo.png" width="130" height="35">
+        <img src="../assets/image/logo.png" width="130" height="35">
     </div>
     <div class="footer-about-app">
-        <img src="./assets/footer/footer-app-0.png"/>
-        <img src="./assets/footer/footer-app-1.png"/>
+        <img src="../assets/image/footer/footer-app-0.png"/>
+        <img src="../assets/image/footer/footer-app-1.png"/>
     </div>
 
     <!--    备案-->
@@ -537,5 +579,5 @@
 
 </div>
 </body>
-<script src="js/index.js" defer></script>
+<script src="../assets/js/index.js" defer></script>
 </html>

file/static/topic.html

@@ -0,0 +1,436 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Topic</title>
+    <link rel="stylesheet" href="../assets/css/index.css">
+    <link rel="stylesheet" href="../assets/css/topic.css">
+</head>
+<body>
+<div class="navigation-bar">
+    <div class="nav-body">
+        <!--      <router-link to="/" class="nav-logo">-->
+        <div class="nav-logo">
+            <img src="../assets/image/logo.png" alt="logo" onclick="JumpRouter('/','')"/>
+        </div>
+        <!--      </router-link>-->
+        <div class="nav-search">
+            <form action="/search" target="_blank">
+                <div class="nav-search-div">
+                    <input class="search-input" type="text" name="key" placeholder="搜索商品名称"/>
+                </div>
+                <!--          点击-->
+                <div class="search-btn">
+                    <div class="search-btn-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-6fbb019e="">
+                            <path fill="currentColor"
+                                  d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704"></path>
+                        </svg>
+                    </div>
+                </div>
+            </form>
+        </div>
+        <div class="nav-user">
+
+            <!--                todo 头像处理-->
+            <div class="nav-user-icon" @click="openView()">
+                <div class="nav-user-icon-bg">
+                    <el-icon size="24">
+                        <User/>
+                    </el-icon>
+                    <img :src="userInfo.avatar" v-else alt="6"/>
+                </div>
+                <span>{1{ isLogin ? userInfo.name : "登录" }1}</span>
+            </div>
+
+            <div class="login-body" style="display: none">
+                <div class="login-center" style="display: none">
+                    <div class="login-content">
+                        <div class="login-image" :style="loginImageStyle"></div>
+                        <form>
+                            <div class="login-from">
+                                <div class="login-select">
+                                    <div class=" login-select-item "
+                                         :class="selectType=='phone'?'select-item':''"
+                                         @click="setType('phone')">
+                                        <span>手机号登录</span>
+                                    </div>
+                                    <div class=" login-select-item "
+                                         :class="selectType=='email'?'select-item':''"
+                                         @click="setType('email')">
+                                        <span>邮箱登录</span>
+                                    </div>
+                                    <div class=" login-select-item "
+                                         :class="selectType=='wx'?'select-item':''"
+                                         @click="setType('wx')">
+                                        <span>微信扫码登录</span>
+                                    </div>
+                                    <!--特效白条-->
+                                    <div class="select-item2" :style="getSelectTypeStyle()"></div>
+                                </div>
+
+                                <div class="login-type-phone" v-show="selectType=='phone'||selectType=='email'">
+                                    <div class="login-phone">
+
+                                        <div class="login-phone-input">
+                                            <input name="username" v-model="username"
+                                                   autocomplete="off"
+                                                   :placeholder="selectType=='phone'?'手机号码':'邮箱'"/>
+                                        </div>
+                                    </div>
+                                    <div class="login-phone-code" v-if="selectType=='phone'">
+                                        <div class="login-phone-code-input">
+                                            <input name="username" v-model="password"
+                                                   autocomplete="off"
+                                                   placeholder="验证码"/>
+                                        </div>
+                                        <div class="login-phone-code-btn" @click="getCode()">
+                                            {1{ awaitCode > 0 ? awaitCode + 's' : '发送验证码' }1}
+                                        </div>
+                                    </div>
+
+                                    <div class="login-email" v-if="selectType=='email'">
+                                        <div class="login-email-input">
+                                            <input name="username" v-model="password"
+                                                   autocomplete="off"
+                                                   type="password"
+                                                   placeholder="密码"/>
+                                        </div>
+                                    </div>
+
+                                    <div class="login-btn" @click="login()">
+                                        <div class="login-btn-div">登录</div>
+                                    </div>
+                                </div>
+
+                                <div class="login-type-wx" v-show="selectType=='wx'">
+                                    <div class="login-wx-refresh" @click="refreshWxCode()">
+                                        <div class="login-wx-refresh-icon"
+                                             style="transform: translateY(15%)">
+                                            <el-icon size="25" :class="refreshWxCodeState?'is-loading':''">
+                                                <refresh/>
+                                            </el-icon>
+                                        </div>
+                                        <div class="login-wx-refresh-text">
+                                            <span style="line-height: 25px">刷新二维码</span>
+                                        </div>
+                                    </div>
+                                    <div class="login-wx-tip">
+                                        <span>微信登录</span>
+                                    </div>
+                                    <div class="login-wx-image"></div>
+                                    <div class="login-wx-tip">
+                                        <span>请使用微信扫码登录</span>
+                                    </div>
+                                </div>
+                                <span class="login-register-btn"
+                                      v-if="selectType!=='wx'"
+                                      @click="setShowRegister('register')">注册</span>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <div class="register-center" style="display: none">
+                    <div class="register-content">
+                        <form>
+                            <div class="register-content-title">
+                                注册
+                            </div>
+                            <div class="register-content-input">
+                                <k-k-c-input name="username" @binding="setUsername" :text="username"
+                                             placeholder="请输入邮箱" type="text"/>
+                            </div>
+                            <div class="register-content-input">
+                                <k-k-c-input name="password" @binding="setPassword" :text="password"
+                                             type="password" placeholder="请输入密码"/>
+                            </div>
+                            <div class="register-content-input">
+                                <k-k-c-input name="username" @binding="setRequirePassword" :text="requirePassword"
+                                             type="password" placeholder="请输入密码"/>
+                            </div>
+                            <div class="register-content-input">
+                                <k-k-c-input name="username" @binding="setPhone" :text="phone"
+                                             placeholder="请输入手机号" type="text"/>
+                            </div>
+                            <div class="register-content-code">
+                                <div class="register-content-code-input">
+                                    <k-k-c-input name="username" @binding="setCode" :text="code"
+                                                 placeholder="请输入手机号" type="text"/>
+                                </div>
+                                <div class="register-content-code-btn" @click="sendCode()">
+                                    {1{ awaitCode > 0 ? awaitCode + 's' : '发送验证码' }1}
+                                </div>
+                            </div>
+                            <div class="register-content-submit" @click="register()">
+                                注册
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <div class="login-body-shield" @click="showViewType=''"></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="topic">
+
+    {{if ne .topic.topic.topicPageImage ""}}
+    <div class="topic-image"
+         style="background-image:url('{{.topic.topicPageImage}}');">
+        <div class="image-bottom"></div>
+    </div>
+    {{else}}
+    <div class="topic-image" style="">
+        <div class="image-bottom"></div>
+    </div>
+    {{end}}
+
+    <!--    锚点-->
+    <div class="topic-anchor">
+        <div class="topic-anchor-to-left anchor-arrow">
+            <div class="anchor-arrow-body anchor-div" v-show="getShowStatus('left')"
+                 @click="setFirstItemIndex(firstItemIndex-1)"></div>
+        </div>
+        <div class="topic-anchor-body anchor-div">
+            <template v-for="(item,index) in selectList" :key="index">
+                <div class="topic-anchor-item" @click="jumpClass(index.toString())">
+                    <div class="anchor-item-body">
+                        <div class="topic-anchor-item-img">
+                            <img :src="item.type.typeImage"/>
+                        </div>
+                        <div class="topic-anchor-item-text"><span>{1{ item.type.typeName }}</span></div>
+                    </div>
+                </div>
+            </template>
+        </div>
+
+        <div class="topic-anchor-to-right anchor-arrow">
+            <div class="anchor-arrow-body anchor-div"
+                 v-show="getShowStatus('right')"
+                 @click="setFirstItemIndex(firstItemIndex+1)">
+
+            </div>
+        </div>
+    </div>
+
+    <div class="topic-body">
+        <div class="topic-body-list" v-for="(item,index) in topic.types" :key="index">
+            <div class="topic-body-title" :class="'to-class'+index">
+                {1{ item.type.typeName }}
+            </div>
+            <div class="topic-body-items">
+
+                <div class="topic-body-item" v-for="(subItem,index) in item.skuList"
+                     @click="JumpRouter('/detail/'+subItem.id,routerPaths)">
+                    <!--               @click="router.push({path:'/detail/'+subItem.id,query:routerPaths})">-->
+                    <div class="topic-body-left">
+                        <div class="topic-item-img">
+                            <img :src="subItem.skuImage" alt="image">
+                        </div>
+                        <div class="topic-item-text">
+                            <div class="topic-item-name">
+                                {1{ subItem.skuName }}
+                            </div>
+                            <div class="topic-item-description">
+                                {1{ subItem.price }}
+                            </div>
+                            <div class="topic-item-num">
+                                <div class="topic-item-price">{1{ subItem.price }}</div>
+                                <div class="topic-item-originalPrice">{1{ subItem.historicalPrices }}</div>
+                                <div class="topic-item-discountPercentage">{1{
+                                    (100 - subItem.price * 100 / subItem.historicalPrices).toFixed(0)
+                                    }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="topic-body-right">
+                        <div class="topic-item-btn">立即购买</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="bottom-bar">
+    <!--    合作伙伴-->
+    <div class="partners">
+        <div class="partners-line">
+            <ul>
+                <li>
+                    <img style="transform: rotate(180deg);"
+                         src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAAXNSR0IArs4c6QAAAhdJREFUSEulVU1rE1EUPdfEgBAIg27UjT+jS13pTpeKriMxRQxJ3hukBnc2ZUwiLUFGxRbbKqZ/Rve+2bswkSB13jDvygtJSZPJl5nlzJz7zr33nPNISlmL4/it53k/seJDQoh3RMRKqc1Op6NXwZOU8j6ABoATrfXLZrP5a9kCVC6Xr6TT6a8ANpj5Y6/Xe+b7frRMAbI/SSkLANoALG1Pa/16GQYDcLFYvJzNZr8DuAbgFMBxGIaVVqvVm8dgAM7n8xcdx3kDwDIAM4dE1FZKufOGOADbp1Kp3EylUkfD0+0rzczvoyh6MauFM3ChUHByudwxM98ZFWRm28JeEARbSQzOwMPBPQLwaaLP0Bizz8y1SSGdA5dKpUuZTOYHgKsTBf4C+KKUejzO4BzYAlzX3WXmJwAuTBQYrLHb7e74vv/bfpsCCyE2iOgzgBsJazq1QjLGCM/z/iSd7Bhjdono4Ywd2xYa/X7/1RTYAoQQ94hoH0BuVgFjzEkiWEp5F8DBPLA10jzaDxKGZonMpr3EwD4YY9zEgUkp94YaT1qV9f12vV6fXtVaIpFSJsnT6vswjuOtmfJ0XddhZiuO22PrsaJoB0HwfK4xhBC3iOhwZUuuFQbDGPoG4PoohrTWYlGOjQKwaE0/DMBGGIb1Rfk1cNVa0SuEsO7ZAXAURdH2IqrjRhldN7FS6unK1021Wq0x839ddP8AAxJAzJtS4CsAAAAASUVORK5CYII="/>
+                </li>
+                <!--          <li v-for="index in 9"><div><img src="../assets/steam-partners.png" alt=""></div></li>-->
+                <li>
+                    <div><img src="../assets/image/footer/footer-slider-steam.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="../assets/image/footer/footer-slider-google.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="../assets/image/footer/footer-slider-tencent.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="../assets/image/footer/footer-slider-microsoft.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="../assets/image/footer/footer-slider-garena.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="../assets/image/footer/footer-slider-ea.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="../assets/image/footer/footer-slider-riot.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="../assets/image/footer/footer-slider-pubg.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="../assets/image/footer/footer-slider-ubisoft.png" alt=""></div>
+                </li>
+                <li>
+                    <img
+                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAAXNSR0IArs4c6QAAAhdJREFUSEulVU1rE1EUPdfEgBAIg27UjT+jS13pTpeKriMxRQxJ3hukBnc2ZUwiLUFGxRbbKqZ/Rve+2bswkSB13jDvygtJSZPJl5nlzJz7zr33nPNISlmL4/it53k/seJDQoh3RMRKqc1Op6NXwZOU8j6ABoATrfXLZrP5a9kCVC6Xr6TT6a8ANpj5Y6/Xe+b7frRMAbI/SSkLANoALG1Pa/16GQYDcLFYvJzNZr8DuAbgFMBxGIaVVqvVm8dgAM7n8xcdx3kDwDIAM4dE1FZKufOGOADbp1Kp3EylUkfD0+0rzczvoyh6MauFM3ChUHByudwxM98ZFWRm28JeEARbSQzOwMPBPQLwaaLP0Bizz8y1SSGdA5dKpUuZTOYHgKsTBf4C+KKUejzO4BzYAlzX3WXmJwAuTBQYrLHb7e74vv/bfpsCCyE2iOgzgBsJazq1QjLGCM/z/iSd7Bhjdono4Ywd2xYa/X7/1RTYAoQQ94hoH0BuVgFjzEkiWEp5F8DBPLA10jzaDxKGZonMpr3EwD4YY9zEgUkp94YaT1qV9f12vV6fXtVaIpFSJsnT6vswjuOtmfJ0XddhZiuO22PrsaJoB0HwfK4xhBC3iOhwZUuuFQbDGPoG4PoohrTWYlGOjQKwaE0/DMBGGIb1Rfk1cNVa0SuEsO7ZAXAURdH2IqrjRhldN7FS6unK1021Wq0x839ddP8AAxJAzJtS4CsAAAAASUVORK5CYII="/>
+                </li>
+            </ul>
+        </div>
+
+        <!--      服务支持-->
+        <div class="partners-service-guarantee">
+            <div class="service-guarantee">
+                <div class="sg-icon" style="background: rgb(225, 222, 250);">
+                    <img
+                            class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
+                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA1hJREFUWEftl0FO21AQhv+ZOBWtVDXLgE1wd1BQ+wLquuYE0BM0nKBwg9yg9AZwgnKDuPsWLBVaujOJTdg1Wwj2VM9JIIQ4iVMhNn1ZxFLezHz+Z97MC+GRF/1LfKu46AhRLWz+mtrP1IYa3CquOGCpBecnU/sZa2jbqqCD+b7XGlRrHIBdVLZ/4fmjVB4LUJp7XQXxBuexPggxKgWmuawYRi3G5U4Ynu6lQYwFsAt24frZc5cpJ4MQlrXiSBTdqwEdPEf5mgid5fLiDFOvBzQWQG/UaYjacAkknJcbJSxLOYiuakHz540f01SKITWAxwbXvicCuIUQl8A3EBqsfdmuhM2TXb1HBzfYqEGiMzJGv3kmBXqbO0qQVmKvHh4mQftXyVS7ROyQEY+Uvd9mYgUGg9nmWxVTtAHEYAP7vj+62qcuwjTDeauslVAQaQGyEBPWg8Bzsza2oQqYs8vbnHuyAZGOP+psY1DrLDh8r581gP5uBEdO51lajcDb7KRJvoAY+qMVihM/AjB9bjS8g7EpmJ9b2iR+qrTx7WLto9XLfT9AyVqtxnLlBOGxk3TIuVdV5pl7YjBi1x9Qaeoa6KQArXpwtDkIkCUNUwOUzFUfhL16cFgtWaoqAqcReokCWdZUAPNzy3tExuZVdKkuLk79TrvOfQDR3ZYr5NfD7/ujgFIBdDslkY1+4xiRx8LbxHkHiLYa4UkSUNcM88x2r2J06ekeJ8A7SOzVQ6+c+RiWrPIBBEoIyTQjQInICyD6KpFUg4vjsUfONpWKiY5EZKsRekMHUqoCC1bZFZCrc9w7diTk1cPD7Sw5XrBWXUHs1gMv8TO4sgFAUh2lQS1YayIiO8Nad1fZ4aZDFcgIoJuSXBt/CFj3g29DU/agCuj7AiNf42t5mXYzyghwWxOT1EHS0pk/NcIfqXFSf+gOm7tF2FeUkwBY5vIuYqigeZLaoB4WYHbR1cc4PD+tZO4D9xQwlR6/fj08SnU2GMSaXWoJ4mrY/H3v8tLbm6pAyVo7gMgbIfH1WCaCAqgAiSpxJD7QTs0CMRcEqBAZ6+3oKmnXmRUoFhdtg7n7tt0mK6T/I3xMbpJ6xHfvCYlzPfN7ryPJz2eUk0oQnI7smFMNo0kKcNI9/wEeXYG/2/HLMDfFEZMAAAAASUVORK5CYII="
+                            draggable="false">
+                </div>
+                <div class="sg-info">
+                    <div>自动发货</div>
+                    <div>提供最快发货</div>
+                </div>
+            </div>
+
+            <div class="service-guarantee">
+                <div class="sg-icon" style="background: rgb(234, 217, 247);">
+                    <img
+                            class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
+                            src="../assets/image/footer/footer-promise-2.png"
+                            draggable="false">
+                </div>
+                <div class="sg-info">
+                    <div>正版保障</div>
+                    <div>官方正版采购,安全保障</div>
+                </div>
+            </div>
+
+            <div class="service-guarantee">
+                <div class="sg-icon" style="background: rgb(245, 221, 231);">
+                    <img
+                            class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
+                            src="../assets/image/footer/footer-promise-3.png"
+                            draggable="false">
+                </div>
+                <div class="sg-info">
+                    <div>客户服务</div>
+                    <div>提供专业的客服咨询</div>
+                </div>
+            </div>
+
+            <div class="service-guarantee">
+                <div class="sg-icon" style="background: rgb(226, 235, 230);">
+                    <img
+                            class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
+                            src="../assets/image/footer/footer-promise-4.png"
+                            draggable="false">
+                </div>
+                <div class="sg-info">
+                    <div>100%满意度</div>
+                    <div>给予您满意的购物体验</div>
+                </div>
+            </div>
+
+
+        </div>
+    </div>
+
+    <div class="bottom-bar-about">
+        <div class="bottom-bar-about-left">
+            <div class="about-contact about-row">
+                <div class="about-row-title">联系我们</div>
+                <div class="about-row-item">平日 9:30 - 24:00</div>
+                <div class="about-row-item">周末 9:30 - 24:00</div>
+                <div class="about-row-imgs">
+                    <img src="../assets/image/footer/footer-about-1.png"/>
+                    <img src="../assets/image/footer/footer-about-2.png"/>
+                    <img src="../assets/image/footer/footer-about-3.png"/>
+                    <img src="../assets/image/footer/footer-about-4.png"/>
+                </div>
+            </div>
+
+            <div class="about-me about-row">
+                <div class="about-row-title">关于我们</div>
+                <div class="about-row-item">关于我们</div>
+                <div class="about-row-item">联系我们</div>
+                <div class="about-row-item">条款与条件</div>
+                <div class="about-row-item">隐私和Cookie</div>
+            </div>
+
+            <div class="about-issue about-row">
+                <div class="about-row-title">常见问题</div>
+                <div class="about-row-item">帮助中心</div>
+                <div class="about-row-item">售后服务</div>
+                <div class="about-row-item">关于退款</div>
+                <div class="about-row-item">关于发货</div>
+            </div>
+        </div>
+
+        <div class="bottom-bar-about-right">
+            <div class="about-my-use about-row-title">
+                我们使用
+            </div>
+            <div class="my-user-images">
+                <img src="../assets/image/footer/footer-myuse-0.png"/>
+                <img src="../assets/image/footer/footer-myuse-1.png"/>
+                <img src="../assets/image/footer/footer-myuse-2.png"/>
+                <img src="../assets/image/footer/footer-myuse-3.png"/>
+                <img src="../assets/image/footer/footer-myuse-4.png"/>
+                <img src="../assets/image/footer/footer-myuse-5.png"/>
+                <img src="../assets/image/footer/footer-myuse-6.png"/>
+                <img src="../assets/image/footer/footer-myuse-7.png"/>
+                <img src="../assets/image/footer/footer-myuse-8.png"/>
+                <img src="../assets/image/footer/footer-myuse-9.png"/>
+                <img src="../assets/image/footer/footer-myuse-10.png"/>
+                <img src="../assets/image/footer/footer-myuse-11.png"/>
+                <img src="../assets/image/footer/footer-myuse-12.png"/>
+                <img src="../assets/image/footer/footer-myuse-13.png"/>
+                <img src="../assets/image/footer/footer-myuse-14.png"/>
+                <img src="../assets/image/footer/footer-myuse-15.png"/>
+
+            </div>
+        </div>
+    </div>
+    <div class="bottom-bar-active">
+        <img src="../assets/image/footer/footer-active-0.png"/>
+        <img src="../assets/image/footer/footer-active-1.png"/>
+        <img src="../assets/image/footer/footer-active-2.png"/>
+        <img src="../assets/image/footer/footer-active-3.png"/>
+        <img src="../assets/image/footer/footer-active-4.png"/>
+    </div>
+    <div class="footer-about-box">
+        <img src="../assets/image/logo.png" width="130" height="35">
+    </div>
+    <div class="footer-about-app">
+        <img src="../assets/image/footer/footer-app-0.png"/>
+        <img src="../assets/image/footer/footer-app-1.png"/>
+    </div>
+
+    <!--    备案-->
+    <div class="filing">
+        <div class="filing-body">xxx省xxx市xxx区666号xxx公司</div>
+    </div>
+
+</div>
+</body>
+</html>

main.go

@@ -3,7 +3,9 @@ package main
 import (
 	"demo/configs"
 	"demo/router"
+	"demo/util/templatefunc"
 	"github.com/gin-gonic/gin"
+	"net/http"
 )
 
 func init() {
@@ -18,9 +20,11 @@ func main() {
 func runGin() {
 	Router := gin.Default()
 	apiGroup := Router.Group(router.Prefix)
+	Router.SetFuncMap(templatefunc.BaseTemplateFunc())
 	//加载模板
-	Router.LoadHTMLGlob("file/static/*")
-
+	Router.LoadHTMLGlob("file/static/*.html")
+	apiGroup.StaticFS("/static", http.Dir("file/resources"))
+	apiGroup.StaticFS("/assets", http.Dir("file/assets"))
 	router.InitRouter(apiGroup)
 	router.InitAuthority(Router)
 	Router.Run(":8182")

router/FileRouter.go

@@ -4,7 +4,6 @@ import (
 	"errors"
 	"fmt"
 	"github.com/gin-gonic/gin"
-	"net/http"
 	"time"
 )
 
@@ -15,7 +14,6 @@ var (
 
 func FileRouter(engine *gin.RouterGroup) {
 	//文件静态资源，可以直接访问静态资源文件
-	engine.StaticFS("/static", http.Dir("file/resources"))
 	user := engine.Group("/file")
 	{
 		//文章上传

router/TestRouter.go

@@ -1,12 +1,17 @@
 package router
 
 import (
+	"demo/configs"
 	"demo/data/dao"
+	"demo/data/dao/manage"
+	"demo/data/domain"
 	"demo/share"
+	"encoding/json"
 	"fmt"
 	"github.com/gin-gonic/gin"
 	"github.com/spf13/cast"
 	"net/http"
+	"strconv"
 )
 
 func TestRouth(engine *gin.RouterGroup) {
@@ -14,8 +19,10 @@ func TestRouth(engine *gin.RouterGroup) {
 	{
 		PushRouter(user, "POST", "/order/pay", OrderSubmit)
 		PushRouter(user, "POST", "/test", DataTest)
-		PushRouter(user, "POST", "/home", Home)
 
+		PushRouter(user, "GET", "/home", Home)
+		PushRouter(user, "GET", "/topic", Topic)
+		PushRouter(user, "GET", "/detail", Detail)
 	}
 
 }
@@ -44,9 +51,165 @@ func DataTest(c *gin.Context) {
 }
 
 func Home(c *gin.Context) {
+	m := make(map[string]interface{})
+	//获取登录信息
+	id := GetUserId(c)
+	if id != 0 {
+		var userInfo = domain.User{}
+		_, err := configs.Engine.Table("user").Where("id = ?", id).Get(&userInfo)
+		if err != nil {
+			c.JSON(200, CreateResultError(401, "用户信息查询失败"))
+			return
+		}
+		userInfoMap := map[string]interface{}{
+			"userInfo": userInfo,
+		}
+		u, err := json.Marshal(userInfoMap)
+		if err != nil {
+			c.JSON(200, CreateResultError(401, "用户查询失败"))
+			return
+		}
+		json.Unmarshal(u, &m)
+	}
+	//首页宣传信息
 	data, err := dao.GetAdviceData()
 	if err != nil {
-		panic(err)
+		c.JSON(200, CreateResultError(401, "advice查询失败"))
+		return
+	}
+	marshal, err := json.Marshal(data)
+	if err != nil {
+		fmt.Println(err)
+		c.JSON(200, CreateResultError(401, err.Error()))
+		return
+	}
+	json.Unmarshal(marshal, &m)
+
+	//首页主题信息
+	list, err := dao.GetTopicList()
+	if err != nil {
+		c.JSON(200, CreateResultError(401, "主题列表查询失败"))
+		return
+	}
+	m2 := map[string]interface{}{
+		"list": list,
+	}
+	//结构体转map
+	d2m, err := json.Marshal(m2)
+	if err != nil {
+		fmt.Println(err)
+		c.JSON(200, CreateResultError(401, err.Error()))
+		return
+	}
+	json.Unmarshal(d2m, &m)
+
+	fmt.Println("data:", m)
+	c.HTML(http.StatusOK, "index.html", m)
+}
+
+func Topic(c *gin.Context) {
+	topicId := c.Query("topicId")
+	m := make(map[string]interface{})
+	//获取登录信息
+	id := GetUserId(c)
+	if id != 0 {
+		var userInfo = domain.User{}
+		_, err := configs.Engine.Table("user").Where("id = ?", id).Get(&userInfo)
+		if err != nil {
+			c.JSON(200, CreateResultError(401, "用户信息查询失败"))
+			return
+		}
+		userInfoMap := map[string]interface{}{
+			"userInfo": userInfo,
+		}
+		u, err := json.Marshal(userInfoMap)
+		if err != nil {
+			c.JSON(200, CreateResultError(401, "用户查询失败"))
+			return
+		}
+		json.Unmarshal(u, &m)
+	}
+	list, err := dao.GetTopicPageDataListById(cast.ToInt64(topicId))
+	if err != nil {
+		c.JSON(200, CreateResultError(401, "主题列表查询失败"))
+		return
 	}
-	c.HTML(http.StatusOK, "index.html", data)
+	dm, err := json.Marshal(list)
+	if err != nil {
+		fmt.Println(err)
+		c.JSON(200, CreateResultError(401, "json转换失败"))
+		return
+	}
+	json.Unmarshal(dm, &m)
+	fmt.Println("data:", m)
+	c.HTML(http.StatusOK, "topic.html", m)
+}
+func Detail(c *gin.Context) {
+	skuId := c.Query("skuId")
+	m := make(map[string]interface{})
+	//获取登录信息
+	id := GetUserId(c)
+	if id != 0 {
+		var userInfo = domain.User{}
+		_, err := configs.Engine.Table("user").Where("id = ?", id).Get(&userInfo)
+		if err != nil {
+			c.JSON(200, CreateResultError(401, "用户信息查询失败"))
+			return
+		}
+		userInfoMap := map[string]interface{}{
+			"userInfo": userInfo,
+		}
+		u, err := json.Marshal(userInfoMap)
+		if err != nil {
+			c.JSON(200, CreateResultError(401, "用户查询失败"))
+			return
+		}
+		json.Unmarshal(u, &m)
+	}
+	//标签
+	tagList, err := manage.GetGoodsTagList(domain.GoodsTag{}, 1, 10000)
+	if err != nil {
+		c.JSON(200, CreateResultError(401, "文章标签查询失败"))
+		return
+	}
+	tagMap := map[string]interface{}{
+		"tags": tagList.List,
+	}
+	tagString, err := json.Marshal(tagMap)
+	if err != nil {
+		fmt.Println(err)
+		c.JSON(200, CreateResultError(401, "json转换失败"))
+		return
+	}
+	json.Unmarshal(tagString, &m)
+	//文章内容
+	vo, err := dao.SelectSkuInfoBySkuId(cast.ToInt64(skuId))
+	if err != nil {
+		c.JSON(200, CreateResultError(401, "文章查询失败"))
+		return
+	}
+	dm, err := json.Marshal(vo)
+	if err != nil {
+		fmt.Println(err)
+		c.JSON(200, CreateResultError(401, "json转换失败"))
+		return
+	}
+	json.Unmarshal(dm, &m)
+
+	fmt.Println("data:", m)
+	c.HTML(http.StatusOK, "detail.html", m)
+}
+
+func GetUserId(c *gin.Context) int64 {
+	header := c.GetHeader("auth-sign")
+	if header == "" {
+		return 0
+	}
+	claims, err := share.ParseToken(header)
+	if err != nil {
+		return 0
+	}
+	i, err := strconv.ParseInt(claims["iss"].(string), 10, 32)
+	return i
+
 }

util/templatefunc/BaseTemplateFunc.go

@@ -0,0 +1,37 @@
+package templatefunc
+
+import (
+	"html/template"
+	"strconv"
+)
+
+func BaseTemplateFunc() template.FuncMap {
+	addInt := func(arg1, arg2 int) int {
+		return arg1 + arg2
+	}
+	addFloat := func(arg1, arg2 float64) float64 {
+		return arg1 + arg2
+	}
+	minusInt := func(arg1, arg2 int) int {
+		return arg1 - arg2
+	}
+	minusFloat := func(arg1, arg2 float64) float64 {
+		return arg1 - arg2
+	}
+
+	return template.FuncMap{
+		"addInt":     addInt,
+		"addFloat":   addFloat,
+		"minusInt":   minusInt,
+		"minusFloat": minusFloat,
+		"discalc":    DiscountCalculation,
+	}
+}
+
+// DiscountCalculation 折扣计算，float64
+// arg1 原件
+// arg2 现价
+func DiscountCalculation(arg1, arg2 float64) string {
+	f := 1.0 - (arg2)/arg1
+	return strconv.FormatFloat(f*100, 'f', 0, 64)
+}