本地化home

data/dao/DetailDao.go

@@ -230,6 +230,7 @@ func SelectSkuInfoBySkuId(skuId int64) (vo.DetailInfoVo, error) {
 	//查询文章下的所有
 
 	var intrs = make([]domain.GoodsIntroduction, 0)
+
 	//{
 	//	intrIds := make([]int64, 0)
 	//	intrIds = append(intrIds, goods.IntroductionId)

file/static/assets/suspension/app_android_download.svg

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

file/static/assets/suspension/app_ios_download.svg

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

file/static/assets/suspension/collection.svg

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

file/static/assets/suspension/orderSelect.svg

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

file/static/assets/suspension/phoneVersion.svg

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

file/static/assets/suspension/toTop.svg

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

file/static/css/bar.css

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

file/static/css/carousel.css

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

file/static/css/index.css

@@ -0,0 +1,250 @@
+
+.home-suspension {
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    z-index: 2;
+    width: 0;
+    height: 0;
+}
+
+.bottom-advertisement {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 130px;
+    background: #8a65d9;
+}
+
+.advertisement-content {
+    width: 1180px;
+    height: 130px;
+    margin: auto auto;
+}
+
+.right-handler {
+    position: fixed;
+    bottom: 50px;
+    right: 50px;
+    width: 75px;
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    color: black;
+    z-index: 1;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+
+.handler-btn .tooltip {
+    display: none;
+}
+
+.handler-btn .handler-btn:hover .tooltip {
+    display: block;
+}
+
+.handler-item-top {
+    border-radius: 8px 8px 0 0;
+}
+
+.handler-item-bottom {
+    border-radius: 0 0 8px 8px;
+}
+
+.handler-item {
+    transition: background-color 0.3s ease-in-out;
+}
+
+.item-icon-top {
+    padding: 10px 0;
+    color: #666666;
+    transform: rotateZ(180deg);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.item-icon-top div {
+    width: 25px;
+    height: 25px;
+}
+
+.right-handler div:hover {
+    background-color: #1475fa;
+}
+
+.item-icon-top:hover {
+
+}
+
+.item-icon-top:hover span {
+    color: white;
+}
+
+.item-icon-top:hover .item-icon {
+    color: white;
+}
+
+.item-icon-top:hover .item-icon-top {
+    color: white;
+}
+
+.handler-item-content {
+    margin: 0 auto;
+    width: 52px;
+    height: 74px;
+    justify-content: center;
+    align-items: center;
+    border-bottom: #F1F1F1 1px solid;
+
+    display: flex;
+    flex-direction: column;
+    font-size: 13px;
+}
+
+.item-icon {
+    color: #666666;
+}
+
+
+span {
+    color: #333333;
+}
+
+
+.handler-item-content:hover {
+    cursor: pointer;
+    user-select: none;
+    color: white;
+    background-color: #1475fa;
+
+
+}
+
+.handler-item-content:hover span {
+    color: white;
+}
+
+.handler-item-content:hover .item-icon {
+    color: white;
+}
+
+.handler-item-content:hover .item-icon-top {
+    color: white;
+
+}
+
+
+.tooltip {
+
+    display: block;
+    position: absolute;
+    padding: 10px;
+    border-radius: 8px;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
+    cursor: auto;
+    color: #333333;
+}
+
+.tooltip-arrow {
+    position: absolute;
+    right: -9.5px;
+    top: calc(50% - 10px);
+    width: 10px;
+    height: 20px;
+
+
+    -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
+    clip-path: polygon(100% 50%, 0 0, 0 100%);
+}
+
+.slot-image {
+    max-width: 80px;
+    max-height: 80px;
+}
+
+.handler-to-top {
+    cursor: pointer;
+}
+
+
+.gift-pack {
+    width: 1170px;
+    text-align: left;
+    font-size: 12px;
+    margin: 60px auto 50px auto;
+    line-height: 18px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid rgb(217, 217, 217);
+}
+
+.gift-pack-title {
+    font-size: 24px;
+    margin-bottom: 15px;
+}
+
+.gift-pack-content {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+}
+
+.content-item {
+    cursor: pointer;
+}
+
+.content-item-img {
+    max-width: 370px;
+    max-height: 165px;
+    overflow: hidden;
+}
+
+.content-item-img img {
+    border-radius: 10px;
+    width: 370px;
+    height: 165px;
+}
+
+
+.content-item-title {
+    font-weight: bold;
+    font-size: 14px;
+}
+
+.content-item-remark {
+    color: #999;
+}
+
+.content-item-price {
+    display: flex;
+    vertical-align: middle;
+    margin: 10px 0;
+}
+
+.content-item-price div {
+    margin-right: 10px;
+}
+
+.price-original {
+    text-decoration: line-through;
+    color: #888888;
+}
+
+.price-target {
+    vertical-align: middle;
+    padding: 0 3px;
+    margin: 0 0 0 4px;
+    background: rgb(223, 30, 28);
+    color: white;
+    font-weight: bolder;
+}
+
+.price-now {
+    font-family: BlinkMacSystemFont;
+    font-size: 16px;
+}

file/static/index.html

@@ -0,0 +1,541 @@
+<!DOCTYPE html>
+<html lang="en">
+<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">
+
+</head>
+<body>
+<div class="nav-top"></div>
+<div class="navigation-bar">
+    <div class="nav-body">
+        <!--      <router-link to="/" class="nav-logo">-->
+        <div class="nav-logo">
+            <img src="./assets/logo.png" alt="logo" @click="cleanRouter()"/>
+        </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>{{ isLogin ? userInfo.name : "登录" }}</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()">
+                                            {{ awaitCode > 0 ? awaitCode + 's' : '发送验证码' }}
+                                        </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()">
+                                    {{ awaitCode > 0 ? awaitCode + 's' : '发送验证码' }}
+                                </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="home">
+    <div class="home-suspension">
+        <div class="right-handler">
+            <div class="handler-customerService"></div>
+            <div class="handler-collection handler-item-top">
+                <div class="handler-item handler-item-top">
+                    <ToolTip class="handler-tooltip"/>
+                    <div class="handler-item-content">
+                        <div class="item-icon">
+                            <svg width="26" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <g fill="currentClor">
+                                    <path fill="currentColor"
+                                          d="M6.2 23.85c-.394 0-.787-.113-1.069-.338-.562-.393-.843-1.125-.73-1.8l1.068-6.243c0-.056 0-.113-.056-.169L.856 10.856a1.855 1.855 0 0 1-.45-1.912c.225-.675.788-1.182 1.52-1.238l6.243-.9a.121.121 0 0 0 .112-.112l.62-1.181c.224-.394.73-.563 1.124-.394.394.225.563.731.394 1.125L9.8 7.425c-.281.563-.787.9-1.406 1.013l-6.244.956a.121.121 0 0 0-.112.112c0 .056 0 .113.056.169l4.556 4.444c.45.45.619 1.012.506 1.631l-1.125 6.244c0 .056 0 .112.057.169.056.056.112.056.168 0l5.625-2.982a1.908 1.908 0 0 1 1.744 0l5.625 2.982c.056.056.113.056.169 0 .056-.057.056-.113.056-.17l-1.069-6.243a1.753 1.753 0 0 1 .563-1.631l1.237-1.238a.816.816 0 0 1 1.182 0 .816.816 0 0 1 0 1.181L20.15 15.3c-.056.056-.056.112-.056.169l1.069 6.243c.112.675-.17 1.407-.732 1.8-.562.394-1.35.45-1.968.17l-5.625-2.926h-.17l-5.624 2.982a3.83 3.83 0 0 1-.844.112Z"
+                                          class="collect_svg__collect1"></path>
+                                    <path fill="currentColor"
+                                          d="M22.625 12.544a.904.904 0 0 1-.618-.282.816.816 0 0 1 0-1.18l1.462-1.407s.056-.056.056-.169c0-.056-.056-.112-.225-.168l-6.3-.9c-.562-.057-1.068-.45-1.35-1.013l-2.756-5.681c-.056-.113-.225-.113-.281 0l-1.069 2.194c-.225.393-.731.562-1.125.393-.394-.225-.562-.731-.394-1.125l1.07-2.193A1.898 1.898 0 0 1 12.781 0c.73 0 1.35.394 1.687 1.012l2.813 5.682c0 .056.056.056.056.112l6.244.9c.73.113 1.35.619 1.575 1.294.225.675.056 1.406-.45 1.856l-1.463 1.406a.903.903 0 0 1-.619.282Z"
+                                          class="collect_svg__collect2"></path>
+                                </g>
+                            </svg>
+                        </div>
+                        <span>收藏网址</span>
+                    </div>
+                </div>
+            </div>
+            <div class="handler-phone-version">
+                <div class="handler-item">
+                    <ToolTip class="handler-tooltip" :index="1"/>
+                    <div class="handler-item-content">
+                        <div class="item-icon">
+                            <svg width="20" height="23" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                        d="M3.143 0h13.714A3.153 3.153 0 0 1 20 3.163v16.674A3.153 3.153 0 0 1 16.857 23H3.143A3.153 3.153 0 0 1 0 19.837V3.163A3.153 3.153 0 0 1 3.143 0Zm0 1.725a1.42 1.42 0 0 0-1.01.421 1.438 1.438 0 0 0-.419 1.017v16.674a1.445 1.445 0 0 0 .419 1.017 1.43 1.43 0 0 0 1.01.421h13.714a1.422 1.422 0 0 0 1.32-.887c.072-.175.109-.362.109-.55V3.162a1.445 1.445 0 0 0-.419-1.017 1.428 1.428 0 0 0-1.01-.421H3.143ZM7.714 18.4a.855.855 0 0 1-.606-.253.865.865 0 0 1 0-1.22.855.855 0 0 1 .606-.252h4.572c.227 0 .445.09.606.253a.865.865 0 0 1-.606 1.472H7.714Z"
+                                        fill="currentColor"></path>
+                            </svg>
+                        </div>
+                        <span>手机版</span>
+                    </div>
+                </div>
+            </div>
+            <div class="handler-order-select ">
+                <div class="handler-item">
+                    <ToolTip class="handler-tooltip" :index="2"></ToolTip>
+                    <div class="handler-item-content">
+                        <div class="item-icon">
+                            <svg width="24" height="23" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <g clip-path="url(#queryicon_svg__a)" fill="currentColor">
+                                    <path
+                                            d="M15.82 8.31H7.199c-.527 0-.958.413-.958.918 0 .505.43.918.958.918h8.623c.527 0 .958-.413.958-.918 0-.505-.431-.919-.958-.919Zm0 3.672H7.199c-.527 0-.958.413-.958.918 0 .505.43.918.958.918h8.623c.527 0 .958-.413.958-.918 0-.505-.431-.918-.958-.918Zm-2.874 3.673H7.198c-.527 0-.958.413-.958.918 0 .505.43.918.958.918h5.748c.527 0 .958-.413.958-.918 0-.505-.43-.918-.958-.918Z"></path>
+                                    <path
+                                            d="M19.21 1.882h-1.162C17.653.815 16.587.046 15.34.046H8.634c-1.257 0-2.31.769-2.706 1.836h-1.09c-1.317 0-2.395 1.033-2.395 2.296v16.527C2.443 21.967 3.52 23 4.838 23H19.21c1.33 0 2.396-1.033 2.396-2.295V4.178c0-1.274-1.078-2.296-2.396-2.296Zm-10.576-.23h6.707c.659 0 1.198.517 1.198 1.148 0 .632-.54 1.148-1.198 1.148H8.634c-.658 0-1.197-.516-1.197-1.148 0-.63.539-1.147 1.197-1.147Zm11.054 19.053a.47.47 0 0 1-.479.459H4.84a.47.47 0 0 1-.48-.46V4.179a.47.47 0 0 1 .48-.46h1.089c.395 1.068 1.461 1.837 2.706 1.837h6.707c1.246 0 2.312-.77 2.707-1.836h1.161a.47.47 0 0 1 .48.459v16.527Z"></path>
+                                </g>
+                                <defs>
+                                    <clipPath id="queryicon_svg__a">
+                                        <path fill="#fff" d="M0 0h24v23H0z"></path>
+                                    </clipPath>
+                                </defs>
+                            </svg>
+                        </div>
+                        <span>快捷查单</span>
+                    </div>
+                </div>
+            </div>
+            <div class="handler-app-ios-download ">
+                <div class="handler-item">
+                    <ToolTip class="handler-tooltip" :index="3"></ToolTip>
+                    <div class="handler-item-content">
+                        <div class="item-icon">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="26" height="26">
+                                <defs>
+                                    <clipPath id="ios-icon_svg__a">
+                                        <rect width="26" height="26" rx="0"></rect>
+                                    </clipPath>
+                                </defs>
+                                <g clip-path="url(#ios-icon_svg__a)">
+                                    <path
+                                            d="M20.096 13.815c-.032-3.293 2.686-4.872 2.807-4.95-1.528-2.236-3.907-2.541-4.754-2.577-2.025-.205-3.95 1.192-4.978 1.192-1.025 0-2.61-1.162-4.29-1.131-2.207.032-4.242 1.283-5.378 3.26-2.293 3.978-.588 9.872 1.647 13.1 1.092 1.579 2.395 3.353 4.104 3.29 1.646-.066 2.27-1.066 4.26-1.066 1.99 0 2.55 1.065 4.292 1.033 1.771-.034 2.894-1.61 3.979-3.194 1.253-1.832 1.77-3.607 1.8-3.698-.039-.018-3.455-1.326-3.489-5.26Zm-3.273-9.663C17.73 3.05 18.343 1.523 18.176 0c-1.308.054-2.892.871-3.83 1.969-.841.974-1.578 2.529-1.38 4.022 1.46.114 2.948-.741 3.857-1.84Z"
+                                            fill="currentColor"></path>
+                                </g>
+                            </svg>
+                        </div>
+                        <span>IOS下载</span>
+                    </div>
+                </div>
+            </div>
+            <div class="handler-app-android-download handler-item-bottom">
+                <div class="handler-item">
+                    <ToolTip class="handler-tooltip" :index="4"></ToolTip>
+                    <div class="handler-item-content">
+                        <div class="item-icon">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="26" height="26">
+                                <defs>
+                                    <clipPath id="android-icon_svg__a">
+                                        <rect width="26" height="26" rx="0"></rect>
+                                    </clipPath>
+                                </defs>
+                                <g clip-path="url(#android-icon_svg__a)">
+                                    <path
+                                            d="M23.131 8.131c-.919 0-1.68.728-1.68 1.612v6.267c0 .884.735 1.612 1.68 1.612.919 0 1.68-.728 1.68-1.613V9.743a1.674 1.674 0 0 0-1.68-1.611Zm-20.27 0c-.918 0-1.68.728-1.68 1.611v6.268c0 .884.735 1.612 1.68 1.612.946 0 1.681-.728 1.681-1.613V9.743c0-.884-.735-1.611-1.68-1.611Zm2.705.052V19.65c0 .675.578 1.247 1.313 1.247h1.497v3.484c0 .885.734 1.613 1.68 1.613.919 0 1.68-.728 1.68-1.613v-3.484h2.626v3.484c0 .885.735 1.613 1.68 1.613.918 0 1.68-.728 1.68-1.613v-3.484h1.497c.735 0 1.313-.546 1.313-1.247V8.182H5.566v.001ZM16.54 2.254 17.933.382c.052-.13.052-.286-.08-.338-.105-.078-.262-.026-.34.078l-1.419 1.95a9.22 9.22 0 0 0-3.098-.546c-1.103 0-2.152.182-3.098.546L8.481.122c-.08-.13-.237-.156-.342-.078a.245.245 0 0 0-.053.338l1.392 1.873c-2.179.962-3.728 2.782-3.912 4.914h14.94c-.236-2.133-1.76-3.952-3.965-4.915ZM9.846 5.22c-.473 0-.814-.338-.814-.78 0-.443.367-.78.814-.78.473 0 .813.337.813.78 0 .442-.367.78-.813.78Zm6.406 0c-.473 0-.814-.338-.814-.78 0-.443.368-.78.814-.78.473 0 .814.337.814.78 0 .442-.367.78-.814.78Z"
+                                            fill="currentColor"></path>
+                                </g>
+                            </svg>
+                        </div>
+                        <span>安卓下载</span>
+                    </div>
+                </div>
+            </div>
+            <div class="handler-to-top handler-item-bottom" onclick="ToTop()">
+                <div class="handler-item handler-item-bottom">
+                    <div class="item-icon-top">
+                        <div class="item-icon">
+                            <svg data-v-5620823b="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+                                <path fill="currentColor"
+                                      d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path>
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--    todo body-->
+    <div class="carousel">
+        <div class="content">
+            <ul id="item">
+                <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>
+                </li>
+            </ul>
+            <div id="btn-left"><</div>
+            <div id="btn-right">></div>
+            <ul id="circle">
+                <li class="circle"></li>
+                <li class="circle"></li>
+                <li class="circle"></li>
+                <li class="circle"></li>
+                <li class="circle"></li>
+            </ul>
+        </div>
+    </div>
+
+    <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>
+                    </div>
+                </div>
+            </template>
+            {{- end }}
+        </div>
+    </div>
+
+
+    <template v-if="shopHomeTopicVoList" v-for="item in shopHomeTopicVoList">
+        <GoodsTypeComponent :ShopHomeTopic="item"/>
+    </template>
+</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/footer/footer-slider-steam.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="./assets/footer/footer-slider-google.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="./assets/footer/footer-slider-tencent.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="./assets/footer/footer-slider-microsoft.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="./assets/footer/footer-slider-garena.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="./assets/footer/footer-slider-ea.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="./assets/footer/footer-slider-riot.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="./assets/footer/footer-slider-pubg.png" alt=""></div>
+                </li>
+                <li>
+                    <div><img src="./assets/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/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/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/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/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"/>
+                </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/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"/>
+
+            </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"/>
+    </div>
+    <div class="footer-about-box">
+        <img src="./assets/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"/>
+    </div>
+
+    <!--    备案-->
+    <div class="filing">
+        <div class="filing-body">xxx省xxx市xxx区666号xxx公司</div>
+    </div>
+
+</div>
+</body>
+<script src="js/index.js" defer></script>
+</html>

file/static/js/index.js

@@ -0,0 +1,93 @@
+window.addEventListener('scroll', handleScroll, true)
+handleScroll()
+
+function handleScroll() {
+    if (window.scrollY > 100) {
+        document.getElementsByClassName('handler-app-android-download').item(0).className = "handler-app-android-download"
+        document.getElementsByClassName("handler-to-top").item(0).style.display = "block"
+    } else {
+        document.getElementsByClassName('handler-app-android-download').item(0).className = "handler-app-android-download handler-item-bottom"
+        document.getElementsByClassName("handler-to-top").item(0).style.display = "none"
+    }
+}
+
+function ToTop() {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+    })
+}
+
+//todo 首页轮播图
+window.onload = function () {
+    var items = document.getElementsByClassName("item");
+    var circles = document.getElementsByClassName("circle");
+    var leftBtn = document.getElementById("btn-left");
+    var rightBtn = document.getElementById("btn-right");
+    var content = document.querySelector('.content');
+    var index = 0;
+    var timer = null;
+
+//清除class
+    var clearclass = function () {
+        for (let i = 0; i < items.length; i++) {
+            items[i].className = "item";
+            circles[i].className = "circle";
+            circles[i].setAttribute("num", i);
+        }
+    }
+
+    /*只显示一个class*/
+    function move() {
+        clearclass();
+        items[index].className = "item active";
+        circles[index].className = "circle white";
+    }
+
+//点击右边按钮切换下一张图片
+    rightBtn.onclick = function () {
+        if (index === items.length - 1){
+            index = 0;
+        }else {
+            index++
+        }
+        move();
+    }
+//点击左边按钮切换上一张图片
+    leftBtn.onclick = function () {
+        if (index === 0){
+            index = items.length - 1;
+        }else {
+            index--
+        }
+        move();
+    }
+//开始定时器，点击右边按钮，实现轮播
+    rightBtn.onclick();
+    timer = setInterval(function () {
+        rightBtn.onclick();
+    }, 3000)
+//点击圆点时，跳转到对应图片
+    for (var i = 0; i < circles.length; i++) {
+        circles[i].addEventListener("click", function () {
+            var point_index = this.getAttribute("num");
+            index = point_index;
+            move();
+        })
+
+    }
+//鼠标移入清除定时器，并开启一个三秒的定时器，使慢慢转动
+    content.onmouseover = function () {
+        clearInterval(timer);
+        timer = setInterval(function () {
+            rightBtn.onclick();
+        }, 3000)
+    }
+//鼠标移出又开启定时器
+    content.onmouseleave = function () {
+        clearInterval(timer);
+        timer = setInterval(function () {
+            rightBtn.onclick();
+        }, 1500)
+    }
+}

main.go

@@ -18,6 +18,9 @@ func main() {
 func runGin() {
 	Router := gin.Default()
 	apiGroup := Router.Group(router.Prefix)
+	//加载模板
+	Router.LoadHTMLGlob("file/static/*")
+
 	router.InitRouter(apiGroup)
 	router.InitAuthority(Router)
 	Router.Run(":8182")

router/TestRouter.go

@@ -6,6 +6,7 @@ import (
 	"fmt"
 	"github.com/gin-gonic/gin"
 	"github.com/spf13/cast"
+	"net/http"
 )
 
 func TestRouth(engine *gin.RouterGroup) {
@@ -13,7 +14,10 @@ func TestRouth(engine *gin.RouterGroup) {
 	{
 		PushRouter(user, "POST", "/order/pay", OrderSubmit)
 		PushRouter(user, "POST", "/test", DataTest)
+		PushRouter(user, "POST", "/home", Home)
+
 	}
+
 }
 
 func OrderSubmit(c *gin.Context) {
@@ -38,3 +42,11 @@ func DataTest(c *gin.Context) {
 	fmt.Println("router:", c.Request.Body)
 	c.JSON(200, CreateResultData("test"))
 }
+
+func Home(c *gin.Context) {
+	data, err := dao.GetAdviceData()
+	if err != nil {
+		panic(err)
+	}
+	c.HTML(http.StatusOK, "index.html", data)
+}