新增供应商登录页

src/main/resources/static/css/supplier-login/components/loginTop.css

@@ -1,13 +1,96 @@
+[v-cloak] {
+    opacity: 0;
+}
 #login_header{
     width: 100vw;
-    height: 10vh;
     display: flex;
     justify-content: center;
+    height: 7vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: #fff;
 }
 #login_header_container{
-    width: 90vw;
+    width: 95vw;
     display: flex;
-    justify-content: space-between;
     border: 1px solid #ccc;
-    height: 10vh;
+    align-items: center;
+}
+.img_logo {
+    display: flex;
+    align-items: center;
+}
+.img_logo .logo {
+    width: 5.5vw;
+    height: 4vh;
+    background: url("/img/supplier-login/logo.png") no-repeat;
+}
+.text {
+    font-size: 1.2vw;
+    font-weight: 400;
+    color: #272727;
+}
+.header_link{
+    align-items: center;
+    position: relative;
+    width: 49vw;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+.header_link .nav_link {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: end;
+    width: 7vw;
+    height: 100%;
+    transition: .3s;
+}
+.header_link .nav_link .nav_link_item{
+    width: 1.2vw;
+    height: 0.2vh;
+    background: #FF5B00;
+    border-radius: 8px;
+    margin-bottom: 1vh;
+}
+.header_link .header_link_itme {
+    cursor: pointer;
+    font-size: 0.84vw;
+    width: 7vw;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+}
+.header_link .header_link_itme:hover{
+    color: #FF5B00;
+    transform: scale(1.1);
+}
+.header_link_itme:nth-child(2):hover ~ .nav_link {
+    left: 7vw;
+}
+.header_link_itme:nth-child(3):hover ~ .nav_link {
+    left: 14vw;
+}
+.header_link_itme:nth-child(4):hover ~ .nav_link {
+    left: 21vw;
+}
+.header_link_itme:nth-child(5):hover ~ .nav_link {
+    left: 28vw;
+}
+.header_link_itme:nth-child(6):hover ~ .nav_link {
+    left: 35vw;
+}
+.header_link_itme:nth-child(7):hover ~ .nav_link {
+    left: 42vw;
+}
+.isActiveLink {
+    color: #FF5B00;
+    transform: scale(1.1);
 }
+

src/main/resources/static/css/supplier-login/login.css

@@ -0,0 +1,17 @@
+.swipercont {
+    height: 100vh;
+    scroll-behavior: smooth;
+    width: 100vw;
+}
+#login_content .page {
+    width: 100vw;
+    height: 100vh;
+    border: 1px solid #ccc;
+    padding-top: 7vh;
+}
+#login_content #firstPage {
+    background: #0DB26D;
+}
+#login_content #secondPage {
+    background: aquamarine;
+}

src/main/resources/static/js/supplier-login/components/loginTop.js

@@ -1,9 +1,10 @@
 new Vue({
-    el: "#login_header",
-    data() {},
+    el: "#login_header_container",
+    data: {
+
+    },
     computed: {},
     watch: {},
-    mounted() {
-    },
+    mounted() {},
     methods: {},
 })

src/main/resources/static/js/supplier-login/login.js

@@ -1,13 +1,55 @@
 new Vue({
     el: "#login_content",
-    data() {
-
+    data: {
+        fit: "contain",
+        activeLinks: [
+            {
+                id: 1,
+                title: '解决方案',
+                href: '#firstPage'
+            },{
+                id: 2,
+                title: '营销产品',
+                href: '#secondPage'
+            },{
+                id: 3,
+                title: '成功案例',
+                href: '#thirdPage'
+            },{
+                id: 4,
+                title: '增长社区',
+                href: '#fourPage'
+            },{
+                id: 5,
+                title: '入驻价格',
+                href: '#fivePage'
+            },{
+                id: 6,
+                title: '关于采美',
+                href: '#sixPage'
+            },{
+                id: 7,
+                title: '帮助中心',
+                href: '#'
+            }
+        ],
+        activeLinkId: 1,
     },
     created() {},
     mounted() {
-        console.log(1234)
+        console.log(615)
     },
     watch: {},
     computed: {},
-    methods: {},
+    methods: {
+        // 切换链接跳转
+        handlerNav(options) {
+            const nav_link_item = this.$refs.nav_link_item
+            this.activeLinkId = options.id
+            console.log(nav_link_item)
+        },
+        handlerLink() {
+            console.log(1111)
+        }
+    },
 })

src/main/resources/templates/supplier_login/components/loginTop.html

@@ -1,8 +1,40 @@
-<header id="globalHead" xmlns:th="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <meta charset="UTF-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0"/>
+    <title>采美</title>
+    <link rel="canonical" href="https://www.caimei365.com/"/>
+    <!--element ui 样式表-->
+    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
     <!--顶部导航-->
-    <div id="login_header">
-        <div id="login_header_container">
-
+<div id="login_header">
+    <div id="login_header_container">
+        <div class="img_logo">
+            <div class="logo"></div>
+            <div class="text">美业参谋</div>
+        </div>
+        <div class="header_link" v-cloak>
+            <div class="header_link_itme" :class="activeLinkId === item.id ? 'isActiveLink' : ''" v-for="item in activeLinks" :key="item.id" @click="handlerNav(item)">
+                {{item.title}}
+            </div>
+            <div class="nav_link" ref="nav_link_item">
+                <div class="nav_link_item"></div>
+            </div>
         </div>
+
+
+
     </div>
-</header>
+</div>
+<input type="hidden" th:value="${coreServer}" id="coreServer">
+<input type="hidden" th:value="${agent}" id="userAgent">
+
+</body>
+
+</html>

src/main/resources/templates/supplier_login/index.html

@@ -19,19 +19,43 @@
     <template th:replace="components/analysis"></template>
 </head>
 <body>
-<!-- 引用头部 -->
-<template th:replace="supplier_login/components/loginTop"></template>
 <div id="login_content">
+    <!-- 引用头部 -->
+    <template th:replace="supplier_login/components/loginTop"></template>
+    <div class="swipercont">
+        <div id="zeroPage" class="page">
+            banner
+        </div>
+        <div id="firstPage" class="page">
+            解决方案
+        </div>
+        <div id="secondPage" class="page">
+            营销产品
+        </div>
+        <div id="thirdPage" class="page">
+            成功案例
+        </div>
+        <div id="fourPage" class="page">
+            增长社区
+        </div>
+        <div id="fivePage" class="page">
+            入驻价格
+        </div>
+        <div id="sixPage" class="page">
+            关于采美
+        </div>
+        <!-- 底部区域 end -->
+        <template th:replace="components/footer"></template>
+        <template th:replace="components/foot-link"></template>
+    </div>
 
 </div>
-<!-- 底部区域 end -->
-<template th:replace="components/footer"></template>
-<template th:replace="components/foot-link"></template>
+
 <script type="text/javascript" src="/lib/element-ui/element-ui.min.js"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/cmsMixins.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/cmSysMixins.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/supplier-login/components/loginTop.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/supplier-login/login.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/supplier-login/components/loginTop.js(v=${version})}"></script>
 </body>
 </html>