前台提交

src/main/vue/src/components/GoodsLittle.vue

@@ -0,0 +1,101 @@
+<template>
+    <div class="goods">
+        <img src="../assetsPre/levelA.png" alt="" class="level">
+        <div class="goodsImg" style="background-image:url(https://bpic.588ku.com/back_pic/05/56/93/515b212d11992dd.jpg)"></div>
+        <div class="title">
+            <div class="name">美瑞莉娜工作室</div>
+            <div class="address">合肥</div>
+        </div>
+        <div class="subtitle">
+            <span>响应时间 :</span>
+            <span>15分钟</span>
+        </div>
+        <div class="subtitle">
+            <span>返片率 :</span>
+            <span>2%</span>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'goodsLittle',
+    data() {
+        return {
+
+        }
+    },
+    computed: {
+
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.goods {
+    overflow: hidden;
+    padding: 32px 30px 0;
+    position: relative;
+    display: inline-block;
+    .level {
+        width: 39px;
+        height: 20px;
+        position: absolute;
+        right: 0;
+        top: 4px;
+    }
+    .goodsImg {
+        width: 176px;
+        height: 100px;
+        border-radius: 8px;
+        background-position: center center;
+        background-size: cover;
+        background-repeat: no-repeat;
+    }
+
+    .title {
+        overflow: hidden;
+        width: 176px;
+        margin: 9px 0 0;
+        .name {
+            font-size: 14px;
+            font-family: MicrosoftYaHei;
+            color: rgba(51, 51, 51, 1);
+            line-height: 19px;
+            float: left;
+            max-width: 140px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .address {
+            font-size: 14px;
+            font-family: MicrosoftYaHei;
+            color: rgba(11, 158, 192, 1);
+            line-height: 19px;
+            float: right;
+        }
+    }
+
+    .subtitle {
+        margin-top: 8px;
+        span {
+            font-size: 12px;
+            font-family: MicrosoftYaHei;
+
+            line-height: 16px;
+            &:first-child {
+                color: #666666;
+            }
+            &:last-child {
+                color: #fb6e08;
+            }
+        }
+    }
+}
+</style>

src/main/vue/src/components/Logo.vue

@@ -0,0 +1,85 @@
+<template>
+    <div class="HeadLogo">
+        <div class="logo">
+            <img src="../assetsPre/logo登陆页.png" alt="">
+        </div>
+
+        <div class="textGroup">
+            <div class="textTop">
+                <div class="textLeft">FIGURE</div>
+                <div class="textRight">图途象</div>
+            </div>
+            <div class="textBottom">FIGURE HAVE ROAD NETWORK TECHOLOGY CO LTD</div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'logo',
+    data() {
+        return {
+
+        }
+    },
+    computed: {
+
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.HeadLogo {
+    float: left;
+    overflow: hidden;
+}
+.logo {
+    width: 50px;
+    height: 50px;
+    background-color: #0b9ec0;
+    background: linear-gradient(-141deg, rgba(27, 184, 172, 1), rgba(0, 142, 205, 1));
+    border-radius: 100%;
+    overflow: hidden;
+    float: left;
+    margin-top: 8px;
+    img {
+        display: block;
+        margin: 6px auto;
+        width: 46px;
+    }
+}
+
+.textGroup {
+    float: left;
+    overflow: hidden;
+    margin-left: 6px;
+    .textTop {
+        overflow: hidden;
+        .textLeft {
+            font-size: 36px;
+            font-family: SFNSDisplay;
+            color: rgba(68, 68, 68, 1);
+            line-height: 47px;
+            float: left;
+        }
+        .textRight {
+            font-size: 40px;
+            font-family: SFNSDisplay;
+            color: rgba(68, 68, 68, 1);
+            line-height: 47px;
+            float: left;
+            margin-left: 1px;
+        }
+    }
+    .textBottom {
+        font-size: 9px;
+        font-family: AppleSystemUIFont;
+        color: rgba(102, 102, 102, 1);
+        line-height: 11px;
+    }
+}
+</style>

src/main/vue/src/components/RankList.vue

@@ -0,0 +1,101 @@
+<template>
+    <div class="goods">
+        <img src="../assetsPre/levelA.png" alt="" class="level">
+        <div class="goodsImg" style="background-image:url(https://bpic.588ku.com/back_pic/05/56/93/515b212d11992dd.jpg)"></div>
+        <div class="title">
+            <div class="name">美瑞莉娜工作室</div>
+            <div class="address">合肥</div>
+        </div>
+        <div class="subtitle">
+            <span>响应时间 :</span>
+            <span>15分钟</span>
+        </div>
+        <div class="subtitle">
+            <span>返片率 :</span>
+            <span>2%</span>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'goodsLittle',
+    data() {
+        return {
+
+        }
+    },
+    computed: {
+
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.goods {
+    overflow: hidden;
+    padding: 32px 30px 0;
+    position: relative;
+    display: inline-block;
+    .level {
+        width: 39px;
+        height: 20px;
+        position: absolute;
+        right: 0;
+        top: 4px;
+    }
+    .goodsImg {
+        width: 176px;
+        height: 100px;
+        border-radius: 8px;
+        background-position: center center;
+        background-size: cover;
+        background-repeat: no-repeat;
+    }
+
+    .title {
+        overflow: hidden;
+        width: 176px;
+        margin: 9px 0 0;
+        .name {
+            font-size: 14px;
+            font-family: MicrosoftYaHei;
+            color: rgba(51, 51, 51, 1);
+            line-height: 19px;
+            float: left;
+            max-width: 140px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .address {
+            font-size: 14px;
+            font-family: MicrosoftYaHei;
+            color: rgba(11, 158, 192, 1);
+            line-height: 19px;
+            float: right;
+        }
+    }
+
+    .subtitle {
+        margin-top: 8px;
+        span {
+            font-size: 12px;
+            font-family: MicrosoftYaHei;
+
+            line-height: 16px;
+            &:first-child {
+                color: #666666;
+            }
+            &:last-child {
+                color: #fb6e08;
+            }
+        }
+    }
+}
+</style>

src/main/vue/src/emUI.less

@@ -0,0 +1,172 @@
+*{
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+
+.myTab{
+    position: relative;
+    .el-tabs__header{
+        margin-top:10px;
+    }
+    .el-tabs__nav{
+        width: 100%;
+
+        .el-tabs__item{
+            width: 50%;
+            text-align: center;
+            font-size:18px;
+            font-family:MicrosoftYaHei;
+            color:rgba(153,153,153,1);
+            padding: 0;
+        }
+
+        .el-tabs__item.is-active{
+            font-size:18px;
+            font-family:MicrosoftYaHei-Bold;
+            color:rgba(51,51,51,1);
+            font-weight: bold;
+        }
+
+        .el-tabs__active-bar{
+            height: 3px;
+            background:rgba(11,158,192,1);
+            display: none;
+        }
+    }
+
+
+
+}
+.login-wrapper{
+    position: relative;
+    .tabLine{
+        height: 3px;
+        background:rgba(11,158,192,1);
+        width:144px;
+        position: absolute;
+        top:48px;
+        left:33px;
+        z-index: 20;
+        -webkit-transition: left ease-in-out .3s;
+           -moz-transition: left ease-in-out .3s;
+             -o-transition: left ease-in-out .3s;
+                transition: left ease-in-out .3s;
+    }
+}
+.el-input-group__append, .el-input-group__prepend{
+    background-color: transparent;
+    padding: 0;
+}
+
+input:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0px 1000px white inset;
+    /*border: 1px solid #CCC!important;*/
+}
+.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
+    background-color: #0B9EC0;
+    border-color: #0B9EC0;
+}
+.el-checkbox__label{
+    font-size: 12px;
+}
+.el-checkbox__input.is-checked+.el-checkbox__label{
+    color: #0B9EC0;
+    font-size:12px;
+    font-family:MicrosoftYaHei;
+}
+.el-button--color{
+    background-color: #0B9EC0;
+    background:linear-gradient(135deg,rgba(27,184,172,1),rgba(0,142,205,1));
+    border:none;
+    color: #fff;
+    span{
+        color: #fff;
+    }
+
+    &:link,&:visited,&:hover,&:active{
+        background-color: #0B9EC0;
+        background:linear-gradient(135deg,rgba(27,184,172,1),rgba(0,142,205,1));
+        a{
+            text-decoration: none;
+            color: #fff;
+        }
+    }
+}
+
+.isRemenber{
+    .el-form-item__content{
+        line-height: 16px;
+    }
+}
+
+
+.search{
+
+    .el-input__inner{
+        border:1px solid rgba(11,158,192,1);
+        height: 45px;
+        border-radius: 0px;
+    }
+    .el-input-group__append, .el-input-group__prepend{
+        border:1px solid rgba(11,158,192,1);
+        background-color: rgba(11,158,192,1);
+        width: 99px;
+        cursor: pointer;
+        border-radius: 0;
+    }
+}
+
+
+a{
+    outline: none;
+    border:0;
+    text-decoration: none;
+}
+
+
+.swiper .el-carousel__item.is-animating{
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+    height:420px ;
+}
+
+.swiper .el-carousel__arrow{
+    display: none;
+}
+
+.swiper .el-carousel__button{
+    width:10px;
+    height:10px;
+    background:rgba(255,255,255,1);
+    border-radius:7px;
+
+}
+
+
+.swiper .el-carousel__indicator.is-active .el-carousel__button{
+    width:30px;
+    height:10px;
+    background:rgba(255,255,255,1);
+    border-radius:7px;
+}
+
+
+.Breadcrumb .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
+    color: #666666;
+    font-size:12px;
+    font-family:MicrosoftYaHei;
+    line-height:16px;
+    font-weight: normal;
+}
+.Breadcrumb .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link:hover{
+    color: #0B9EC0
+}
+.Breadcrumb .el-breadcrumb__inner{
+    color: #666666;
+    font-size:12px;
+    font-family:MicrosoftYaHei;
+    line-height:16px;
+    font-weight: normal;
+}

src/main/vue/src/entries/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>图途象</title>
+    <link rel="icon" href="/static/favicon.ico" />
+    <script src="/static/polyfill.min.js"></script>
+    <script src="/static/fontawesome-v5.2.0.js"></script>
+</head>
+
+<body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+</body>
+
+</html>

src/main/vue/src/entries/index.js

@@ -0,0 +1,197 @@
+import Vue from 'vue'
+import Main from '../pagesPre/Main'
+import router from '../routerPre'
+import store from '../vuexPre'
+import ElementUI from 'element-ui'
+import axios from 'axios'
+import MultiUpload from '../components/MultiUpload'
+import SingleUpload from '../components/SingleUpload'
+import VueI18n from 'vue-i18n'
+import VueAMap from 'vue-amap'
+
+import 'normalize.css/normalize.css'
+import 'element-ui/lib/theme-chalk/index.css'
+import '../main.less'
+import '../emUI.less'
+import { format } from 'date-fns'
+import zh from 'date-fns/locale/zh_cn'
+
+VueAMap.initAMapApiLoader({
+    key: 'bf91055058a47a7dc387e40ab6256a5f',
+    plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation'],
+    v: '1.4.7'
+});
+
+Vue.config.productionTip = false;
+Vue.use(ElementUI);
+Vue.use(VueI18n);
+Vue.component('multi-upload', MultiUpload);
+Vue.component('single-upload', SingleUpload);
+const baseUrl = process.env.NODE_ENV === 'production' ? '../' : `http://${location.hostname}:8080`;
+Vue.prototype.$baseUrl = baseUrl;
+axios.defaults.withCredentials = true;
+axios.defaults.baseURL = baseUrl;
+Vue.prototype.$http = {
+    get(params) {
+        return new Promise((resolve, reject) => {
+            if (params instanceof String) {
+                params = { url: params };
+            } else if (!params instanceof Object) {
+                reject('params error');
+                return;
+            }
+            if (!params.url) {
+                reject('url error');
+                return;
+            } else if (!params.url instanceof String) {
+                reject('url error');
+                return;
+            } else if (params.url.length === 0) {
+                reject('url error');
+                return;
+            }
+            // if (!/^(http:\/\/)|(https:\/\/)/.test(params.url)) {
+            //     params.url = baseUrl + params.url;
+            // }
+            store.commit('updateFetchingData', true);
+            axios.get(params.url, {
+                params: params.data
+            }, { withCredentials: true }).then(res => {
+                store.commit('updateFetchingData', false);
+                if (res.status === 200) {
+                    resolve(res.data);
+                } else {
+                    reject(res);
+                }
+                try {
+                    if (res.data.code === 10001) {
+                        axios({
+                            method: 'post',
+                            url: '/auth/logout'
+                        });
+                        store.commit('updateUserInfo', null);
+                        router.replace('/login');
+                    }
+                } catch (e) {
+
+                }
+            }).catch(e => {
+                store.commit('updateFetchingData', false);
+                reject(e);
+            });
+        });
+    },
+    post(params) {
+        if (params instanceof String) {
+            params = { url: params };
+        } else if (!params instanceof Object) {
+            reject('params error');
+            return;
+        }
+        if (!params.url) {
+            reject('url error');
+            return;
+        } else if (!params.url instanceof String) {
+            reject('url error');
+            return;
+        } else if (params.url.length === 0) {
+            reject('url error');
+            return;
+        }
+        // if (!/^(http:\/\/)|(https:\/\/)/.test(params.url)) {
+        //     params.url = baseUrl + params.url;
+        // }
+        let data = new FormData();
+        if (params.data) {
+            for (let key in params.data) {
+                if (params.data.hasOwnProperty(key)) {
+                    if (params.data[key] instanceof Array) {
+                        let hasObject = false;
+                        params.data[key].forEach(i => {
+                            if (i instanceof Object) {
+                                hasObject = true;
+                            }
+                        });
+                        if (!hasObject) {
+                            data.append(key, params.data[key].join());
+                        }
+                    } else if (!(params.data[key] instanceof Object)) {
+                        data.append(key, params.data[key]);
+                    }
+                }
+            }
+        }
+        return new Promise((resolve, reject) => {
+            store.commit('updateFetchingData', true);
+            axios.post(params.url, data, { withCredentials: true }).then(res => {
+                store.commit('updateFetchingData', false);
+                if (res.status === 200) {
+                    resolve(res.data);
+                } else {
+                    reject(res);
+                }
+                try {
+                    if (res.data.code === 10001) {
+                        axios({
+                            method: 'post',
+                            url: '/auth/logout'
+                        });
+                        store.commit('updateUserInfo', null);
+                        router.replace('/login');
+                    }
+                } catch (e) {
+
+                }
+            }).catch(e => {
+                store.commit('updateFetchingData', false);
+                reject(e);
+            });
+        });
+    }
+};
+Vue.mixin({
+    methods: {
+        timeFormatter(row, column, cellValue, index) {
+            return format(new Date(cellValue), 'HH:mm', { locale: zh })
+        },
+        datetimeFormatter(row, column, cellValue, index) {
+            if (!cellValue) return ''
+            return format(new Date(cellValue), 'YYYY/MM/DD HH:mm', { locale: zh })
+        }
+    }
+});
+
+const updateTableHeight = () => {
+    try {
+        const total = document.getElementsByTagName('main')[0].clientHeight;
+        const filter = document.getElementsByClassName('filters-container')[0].clientHeight;
+        const page = document.getElementsByClassName('pagination-wrapper')[0].clientHeight;
+        store.commit('updateTableHeight', total - filter - page - 44);
+    } catch (e) {
+        // console.error(e)
+    }
+};
+
+
+
+//校验手机号是否正确
+Vue.prototype.checkPhone = function(phone) {
+    var result = false
+    if ((/^1[3|4|5|8|7|6|9][0-9]\d{8}$/.test(phone))) {
+        result = true
+    }
+    return result
+}
+
+
+window.onload = updateTableHeight;
+window.onresize = updateTableHeight;
+setInterval(updateTableHeight, 500);
+
+new Vue({
+    el: '#app',
+    router,
+    store,
+    components: { Main },
+    template: '<Main/>'
+});

src/main/vue/src/pagesPre/404.vue

@@ -0,0 +1,233 @@
+<template>
+    <div class="wscn-http404">
+        <div class="pic-404">
+            <img class="pic-404__parent" :src="img_404" alt="404">
+            <img class="pic-404__child left" :src="img_404_cloud" alt="404">
+            <img class="pic-404__child mid" :src="img_404_cloud" alt="404">
+            <img class="pic-404__child right" :src="img_404_cloud" alt="404">
+        </div>
+        <div class="bullshit">
+            <div class="bullshit__oops">OOPS!</div>
+            <div class="bullshit__headline">{{ message }}</div>
+            <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回</div>
+            <span class="bullshit__return-home" @click="goBack">返回</span>
+        </div>
+    </div>
+</template>
+
+<script>
+    import img_404 from '../assets/404_images/404.png'
+    import img_404_cloud from '../assets/404_images/404_cloud.png'
+
+    export default {
+        name: 'page404',
+        data() {
+            return {
+                img_404,
+                img_404_cloud
+            }
+        },
+        computed: {
+            message() {
+                return '鲁迅曾经说过："这个页面你不能进"'
+            }
+        },
+        methods: {
+            goBack() {
+                this.$router.go(-1);
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .wscn-http404 {
+        background: #f0f2f5;
+        margin: -20px;
+        min-height: 100%;
+        position: relative;
+        padding: 20px 100px;
+        overflow: hidden;
+        height: 100%;
+        .pic-404 {
+            position: relative;
+            float: left;
+            width: 600px;
+            padding: 150px 0;
+            overflow: hidden;
+            &__parent {
+                width: 100%;
+            }
+            &__child {
+                position: absolute;
+                &.left {
+                    width: 80px;
+                    top: 17px;
+                    left: 220px;
+                    opacity: 0;
+                    animation-name: cloudLeft;
+                    animation-duration: 2s;
+                    animation-timing-function: linear;
+                    animation-fill-mode: forwards;
+                    animation-delay: 1s;
+                }
+                &.mid {
+                    width: 46px;
+                    top: 10px;
+                    left: 420px;
+                    opacity: 0;
+                    animation-name: cloudMid;
+                    animation-duration: 2s;
+                    animation-timing-function: linear;
+                    animation-fill-mode: forwards;
+                    animation-delay: 1.2s;
+                }
+                &.right {
+                    width: 62px;
+                    top: 100px;
+                    left: 500px;
+                    opacity: 0;
+                    animation-name: cloudRight;
+                    animation-duration: 2s;
+                    animation-timing-function: linear;
+                    animation-fill-mode: forwards;
+                    animation-delay: 1s;
+                }
+                @keyframes cloudLeft {
+                    0% {
+                        top: 17px;
+                        left: 220px;
+                        opacity: 0;
+                    }
+                    20% {
+                        top: 33px;
+                        left: 188px;
+                        opacity: 1;
+                    }
+                    80% {
+                        top: 81px;
+                        left: 92px;
+                        opacity: 1;
+                    }
+                    100% {
+                        top: 97px;
+                        left: 60px;
+                        opacity: 0;
+                    }
+                }
+                @keyframes cloudMid {
+                    0% {
+                        top: 10px;
+                        left: 420px;
+                        opacity: 0;
+                    }
+                    20% {
+                        top: 40px;
+                        left: 360px;
+                        opacity: 1;
+                    }
+                    70% {
+                        top: 130px;
+                        left: 180px;
+                        opacity: 1;
+                    }
+                    100% {
+                        top: 160px;
+                        left: 120px;
+                        opacity: 0;
+                    }
+                }
+                @keyframes cloudRight {
+                    0% {
+                        top: 100px;
+                        left: 500px;
+                        opacity: 0;
+                    }
+                    20% {
+                        top: 120px;
+                        left: 460px;
+                        opacity: 1;
+                    }
+                    80% {
+                        top: 180px;
+                        left: 340px;
+                        opacity: 1;
+                    }
+                    100% {
+                        top: 200px;
+                        left: 300px;
+                        opacity: 0;
+                    }
+                }
+            }
+        }
+        .bullshit {
+            position: relative;
+            float: left;
+            width: 330px;
+            padding: 150px 0;
+            overflow: hidden;
+            &__oops {
+                font-size: 32px;
+                font-weight: bold;
+                line-height: 40px;
+                color: #1482f0;
+                opacity: 0;
+                margin-bottom: 20px;
+                animation-name: slideUp;
+                animation-duration: 0.5s;
+                animation-fill-mode: forwards;
+            }
+            &__headline {
+                font-size: 20px;
+                line-height: 24px;
+                color: #1482f0;
+                opacity: 0;
+                margin-bottom: 10px;
+                animation-name: slideUp;
+                animation-duration: 0.5s;
+                animation-delay: 0.1s;
+                animation-fill-mode: forwards;
+            }
+            &__info {
+                font-size: 13px;
+                line-height: 21px;
+                color: grey;
+                opacity: 0;
+                margin-bottom: 30px;
+                animation-name: slideUp;
+                animation-duration: 0.5s;
+                animation-delay: 0.2s;
+                animation-fill-mode: forwards;
+            }
+            &__return-home {
+                display: block;
+                float: left;
+                width: 110px;
+                height: 36px;
+                background: #1482f0;
+                border-radius: 100px;
+                text-align: center;
+                color: #ffffff;
+                opacity: 0;
+                font-size: 14px;
+                line-height: 36px;
+                cursor: pointer;
+                animation-name: slideUp;
+                animation-duration: 0.5s;
+                animation-delay: 0.3s;
+                animation-fill-mode: forwards;
+            }
+            @keyframes slideUp {
+                0% {
+                    transform: translateY(60px);
+                    opacity: 0;
+                }
+                100% {
+                    transform: translateY(0);
+                    opacity: 1;
+                }
+            }
+        }
+    }
+</style>

src/main/vue/src/pagesPre/App.vue

@@ -0,0 +1,286 @@
+<template>
+    <div class="container">
+        <div style="background-color:#fff;">
+            <div class="Head">
+                <div class="HeadTop">
+                    <img class="logo" src="../assetsPre/logo.png" alt="">
+                    <div class="Head-right">
+                        <el-input class="search" v-model="input" placeholder="搜索商品或服务">
+                            <template slot="append">
+                                <button>搜索</button>
+                            </template>
+                        </el-input>
+
+                        <div class="shop-enter">
+                            <img src="../assetsPre/shop.png" alt="">
+                            <span>入驻接单</span>
+                        </div>
+                    </div>
+
+                </div>
+                <div class="HeadBottom">
+                    <div class="service-list" @mousemove="showMenu=true" @mouseout="showMenu=false">
+                        <div class="name">
+                            <span>服务列表</span>
+                            <img src="../assetsPre/menu.png" alt="">
+                        </div>
+                        <transition name='slide-down'>
+                            <div class="service-content" v-if="showMenu">
+                                <div class="serive-item">
+                                    <div class="title">修图服务</div>
+                                    <div class="serive-val-list">
+                                        <a href='#' class="service-val">精修套餐</a>
+                                        <a href='#' class="service-val">中修套餐</a>
+                                        <a href='#' class="service-val">简修套餐</a>
+                                    </div>
+                                </div>
+                                <div class="serive-item">
+                                    <div class="title">修图服务</div>
+                                    <div class="serive-val-list">
+                                        <a href='#' class="service-val">精修套餐</a>
+                                        <a href='#' class="service-val">中修套餐</a>
+                                        <a href='#' class="service-val">简修套餐</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </transition>
+
+                    </div>
+
+                    <div class="menuList">
+                        <router-link id='menuItem0' class="menu-item" :style="{color:nowMenu==0?'#0B9EC0':'#333'}" :to='{name:"index"}'>首页</router-link>
+                        <router-link id='menuItem1' class="menu-item" :style="{color:nowMenu==1?'#0B9EC0':'#333'}" :to='{name:"business",query:{id:1}}'>修图商</router-link>
+                        <router-link id='menuItem2' class="menu-item" :style="{color:nowMenu==2?'#0B9EC0':'#333'}" :to='{name:"business",query:{id:2}}'>影楼</router-link>
+                        <router-link id='menuItem3' class="menu-item" :style="{color:nowMenu==3?'#0B9EC0':'#333'}" :to='{name:"business",query:{id:3}}'>样片</router-link>
+                        <router-link id='menuItem4' class="menu-item" :style="{color:nowMenu==4?'#0B9EC0':'#333'}" :to='{name:"business",query:{id:4}}'>营销</router-link>
+                        <router-link id='menuItem5' class="menu-item" :style="{color:nowMenu==5?'#0B9EC0':'#333'}" :to='{name:"business",query:{id:5}}'>周边</router-link>
+                        <div class="menu-line" :style="{left:lineLeft+'px',width:lineWidth+'px'}"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <router-view></router-view>
+        <logo-foot :isBottom='false'></logo-foot>
+    </div>
+</template>
+
+<script>
+import logo from '../components/Logo'
+import { mapState } from 'vuex'
+import logoFoot from '../pagesPre/LogoFoot'
+
+export default {
+    name: 'App',
+    created() {
+        setTimeout(() => {
+            console.log(document.getElementById('menuItem0').offsetWidth)
+        }, 1000)
+    },
+    data() {
+        return {
+            showMenu: false,
+            nowMenu: 0,
+            input: '',
+            lineLeft: -2,
+        }
+    },
+    computed: {
+        ...mapState(['userInfo']),
+        // lineLeft() {
+        //     var length = -2
+        //     if (document.getElementById('menuItem0')) {
+        //         for (var i = 0; i < this.nowMenu; i++) {
+        //             length += document.getElementById('menuItem' + i).offsetWidth + 40.5
+        //         }
+        //     }
+
+        //     return length
+        // },
+        lineWidth() {
+            var width = 40
+            if (document.getElementById('menuItem' + this.nowMenu)) {
+                width = document.getElementById('menuItem' + this.nowMenu).offsetWidth + 4
+            }
+
+            return width
+        }
+    },
+    methods: {
+
+    },
+    watch: {
+        $route() {
+            if (this.$route.name == 'index') {
+                this.nowMenu = 0
+            }
+            else if (this.$route.name == 'business') {
+                this.nowMenu = parseInt(this.$route.query.id)
+
+            }
+            var length = -2
+            for (var i = 0; i < this.nowMenu; i++) {
+                length += document.getElementById('menuItem' + i).offsetWidth + 40.5
+            }
+            this.lineLeft = length
+        }
+    },
+    components: {
+        logo, logoFoot
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+    background: rgba(249, 249, 249, 1);
+}
+.Head {
+    // overflow: hidden;
+    width: 1190px;
+    margin: auto;
+    background-color: #fff;
+    .HeadTop {
+        overflow: hidden;
+        padding: 32px 0 30px;
+        .logo {
+            float: left;
+            width: 300px;
+            height: 54px;
+        }
+
+        .Head-right {
+            float: right;
+            margin: 7px 0 4px;
+
+            .shop-enter {
+                width: 105px;
+                height: 45px;
+                background: rgba(254, 168, 60, 1);
+                float: left;
+                margin-left: 5px;
+                img {
+                    width: 19px;
+                    display: block;
+                    float: left;
+                    margin: 13px 5px 14px 12px;
+                }
+                span {
+                    font-size: 14px;
+                    font-family: MicrosoftYaHei-Bold;
+                    color: rgba(255, 255, 255, 1);
+                    line-height: 45px;
+                    font-weight: bold;
+                }
+            }
+        }
+
+        .search {
+            float: left;
+            width: 681px;
+            height: 45px;
+
+            button {
+                width: 100%;
+                color: #fff;
+                font-size: 14px;
+                cursor: pointer;
+            }
+        }
+    }
+    .HeadBottom {
+        // overflow: hidden;
+        height: 40px;
+        .service-list {
+            width: 220px;
+            height: 40px;
+            position: relative;
+            float: left;
+            .name {
+                width: 220px;
+                height: 40px;
+                background: rgba(26, 205, 225, 1);
+                background: linear-gradient(112.5deg, rgba(26, 205, 225, 1), rgba(11, 158, 192, 1));
+                cursor: pointer;
+                span {
+                    font-size: 16px;
+                    font-family: MicrosoftYaHei-Bold;
+                    color: rgba(255, 255, 255, 1);
+                    line-height: 40px;
+                    font-weight: bold;
+                    margin-left: 12px;
+                    float: left;
+                }
+
+                img {
+                    width: 17px;
+                    height: 15px;
+                    float: right;
+                    margin: 14px 12px;
+                }
+            }
+            .service-content {
+                position: absolute;
+                top: 40px;
+                left: 0;
+                background: #f1f7fe;
+                padding: 0 14px 10px 10px;
+                width: 196px;
+
+                .serive-item {
+                    .title {
+                        font-size: 12px;
+                        font-family: MicrosoftYaHei;
+                        color: rgba(51, 51, 51, 1);
+                        line-height: 16px;
+                        margin-top: 12px;
+                    }
+
+                    .serive-val-list {
+                        padding-bottom: 12px;
+
+                        a {
+                            display: inline-block;
+                            width: 30%;
+                            font-size: 12px;
+                            font-family: MicrosoftYaHei;
+                            color: rgba(102, 102, 102, 1);
+                            line-height: 16px;
+                            margin-top: 6px;
+                            text-decoration: none;
+                        }
+                    }
+
+                    &:not(:last-child) {
+                        border-bottom: 1px solid rgba(223, 237, 236, 1);
+                    }
+                }
+            }
+        }
+
+        .menuList {
+            float: left;
+            margin-left: 78px;
+            position: relative;
+
+            .menu-item {
+                margin-right: 36px;
+                font-size: 18px;
+                font-family: MicrosoftYaHei;
+                color: rgba(51, 51, 51, 1);
+                line-height: 40px;
+                font-weight: bold;
+            }
+
+            .menu-line {
+                width: 40px;
+                height: 7px;
+                background: rgba(11, 158, 192, 1);
+                transition: all 0.3s ease-in-out;
+                position: absolute;
+                bottom: 0;
+                left: -2px;
+            }
+        }
+    }
+}
+</style>

src/main/vue/src/pagesPre/Business.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="conatiner">
+        <el-carousel height="420px" :interval="4000" class="swiper">
+            <el-carousel-item style="backgroundImage:url(https://bpic.588ku.com/element_banner/20/18/08/2d44722d8e86bcdf3ad16ec341a2caa2.jpg)">
+
+            </el-carousel-item>
+            <el-carousel-item style="backgroundImage:url(https://bpic.588ku.com/element_banner/20/18/08/dc94f7674aff60d0fc101cf41f176670.jpg)">
+
+            </el-carousel-item>
+
+        </el-carousel>
+
+        <el-breadcrumb separator-class="el-icon-arrow-right" class="Breadcrumb">
+            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+            <el-breadcrumb-item>修图商</el-breadcrumb-item>
+        </el-breadcrumb>
+
+        <div class="content">
+            <div class="content-left">
+                div.
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'home',
+    data() {
+        return {}
+    },
+    computed: {
+    },
+    methods: {
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.swiper {
+    width: 1190px;
+    height: 420px;
+    margin: auto;
+}
+.Breadcrumb{
+    width: 1190px;
+    margin:13px auto 10px;
+}
+</style>

src/main/vue/src/pagesPre/Customer.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="conatiner">
+customer
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'home',
+    data() {
+        return {
+        }
+    },
+    computed: {
+    },
+    methods: {
+    }
+}
+</script>
+
+<style lang="less" scoped>
+</style>

src/main/vue/src/pagesPre/Index.vue

@@ -0,0 +1,340 @@
+<template>
+    <div class="conatiner">
+        <div class="banner" :style="{backgroundImage:'url('+require('../assetsPre/indexBanner.png')+')'}">
+
+        </div>
+
+        <div class="content">
+            <div class="content-step">
+                <div class="step-item">
+                    <div class="num">1</div>
+                    <div class="text">
+                        <div class="title">选择所需服务</div>
+                        <div class="subTitle">100+服务项目</div>
+                    </div>
+                    <img src="../assetsPre/more.png" alt="">
+                </div>
+                <div class="step-item">
+                    <div class="num">2</div>
+                    <div class="text">
+                        <div class="title">服务商对接服务</div>
+                        <div class="subTitle">专人客服对接办理</div>
+                    </div>
+                    <img src="../assetsPre/more.png" alt="">
+                </div>
+                <div class="step-item">
+                    <div class="num">3</div>
+                    <div class="text">
+                        <div class="title">在线下单支付</div>
+                        <div class="subTitle">款项支付到平台</div>
+                    </div>
+                    <img src="../assetsPre/more.png" alt="">
+                </div>
+                <div class="step-item">
+                    <div class="num">4</div>
+                    <div class="text">
+                        <div class="title">验收服务</div>
+                        <div class="subTitle">验收后商家才能收到款项</div>
+                    </div>
+                </div>
+
+            </div>
+
+            <div class="content-box">
+                <div class="box-top">
+                    <div class="title">
+                        修图商
+                    </div>
+                    <div class="subTitle">
+                        专业一对一定制化修图服务
+                    </div>
+                    <router-link class='more' :to='{name:"business",query:{id:1}}'>查看更多 ></router-link>
+                </div>
+                <div class="box-content">
+                    <div class="box-left"></div>
+                    <div class="box-right">
+                        <div class="box-right-top" style="background:rgba(40,208,235,1);">
+                            <div class="box-ad">
+                                <span>消息提醒：最热门服务商家可在此展示位置自定义一条广告消息展示</span>
+                            </div>
+                            <div class="box-hot">热门修图商</div>
+                            <img src="../assetsPre/hot.png" alt="">
+                        </div>
+                        <div class="box-right-content">
+                            <div class="box-goodsList">
+                                <goods-little style="border-right:1px solid #EAEAEA"></goods-little>
+                                <goods-little style="border-right:1px solid #EAEAEA"></goods-little>
+                                <goods-little style="border-right:1px solid #EAEAEA"></goods-little>
+                                <goods-little style="border-right:1px solid #EAEAEA;padding-bottom: 30px;"></goods-little>
+                                <goods-little style="border-right:1px solid #EAEAEA;padding-bottom: 30px;"></goods-little>
+                                <goods-little style="border-right:1px solid #EAEAEA;padding-bottom: 30px;"></goods-little>
+                            </div>
+                            <div class="box-rankList">
+                                <div class="box-rankItem">
+                                    <div class="num" :style="{backgroundImage:'url('+require('../assetsPre/num_bg_pre.png')+')'}">1</div>
+                                    <div class="name">韩国艺匠ARTIZ STUDIO</div>
+                                </div>
+                                <div class="box-rankItem">
+                                    <div class="num" :style="{backgroundImage:'url('+require('../assetsPre/num_bg_pre.png')+')'}">2</div>
+                                    <div class="name">韩国艺匠ARTIZ STUDIO</div>
+                                </div>
+                                <div class="box-rankItem">
+                                    <div class="num" :style="{backgroundImage:'url('+require('../assetsPre/num_bg_pre.png')+')'}">3</div>
+                                    <div class="name">韩国艺匠ARTIZ STUDIO</div>
+                                </div>
+                                <div class="box-rankItem">
+                                    <div class="num" :style="{backgroundImage:'url('+require('../assetsPre/num_bg.png')+')'}">4</div>
+                                    <div class="name">韩国艺匠ARTIZ STUDIO</div>
+                                </div>
+                                <div class="box-rankItem">
+                                    <div class="num" :style="{backgroundImage:'url('+require('../assetsPre/num_bg.png')+')'}">5</div>
+                                    <div class="name">韩国艺匠ARTIZ STUDIO</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="quickMenu">
+                  
+            </div>
+        </div>
+
+        <menuFoot></menuFoot>
+
+    </div>
+</template>
+
+<script>
+import goodsLittle from '../components/GoodsLittle'
+import menuFoot from '../pagesPre/MenuFoot'
+export default {
+    name: 'home',
+    data() {
+        return {
+        }
+    },
+    computed: {
+    },
+    methods: {
+    },
+    components: {
+        goodsLittle,menuFoot
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.banner {
+    height: 420px;
+    width: 100%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    min-width: 1190px;
+}
+
+.content {
+    width: 100%;
+    // max-width: 1555px;
+    .content-step {
+        width: 1190px;
+        height: 80px;
+        background: rgba(255, 255, 255, 1);
+        border: 1px solid rgba(234, 234, 234, 1);
+        margin: 30px auto 0;
+
+        .step-item {
+            display: inline-block;
+            width: 24%;
+            height: 100%;
+
+            .num {
+                width: 40px;
+                height: 40px;
+                border: 1px solid rgba(11, 158, 192, 1);
+                border-radius: 100%;
+                font-size: 20px;
+                font-family: MicrosoftYaHei;
+                color: rgba(11, 158, 192, 1);
+                line-height: 40px;
+                text-align: center;
+                font-weight: bold;
+                float: left;
+                margin: 20px 0 20px 50px;
+            }
+
+            .text {
+                float: left;
+                margin: 0 19px;
+                padding: 20px 0;
+
+                .title {
+                    font-size: 14px;
+                    font-family: MicrosoftYaHei;
+                    color: rgba(11, 158, 192, 1);
+                    line-height: 19px;
+                    font-weight: bold;
+                }
+
+                .subTitle {
+                    font-size: 12px;
+                    font-family: MicrosoftYaHei;
+                    color: rgba(153, 153, 153, 1);
+                    line-height: 16px;
+                    margin-top: 4px;
+                }
+            }
+
+            img {
+                width: 16.8px;
+                height: 29px;
+                display: block;
+                float: right;
+                margin: 27px 0;
+            }
+        }
+    }
+
+    .content-box {
+        overflow: hidden;
+        width: 1190px;
+        margin: 40px auto 0;
+        background-color: #fff;
+        border: 1px solid rgba(234, 234, 234, 1);
+        .box-top {
+            padding: 8px 10px 11px 20px;
+            overflow: hidden;
+            .title {
+                font-size: 24px;
+                font-family: MicrosoftYaHei;
+                color: rgba(51, 51, 51, 1);
+                line-height: 31px;
+                float: left;
+            }
+
+            .subTitle {
+                font-size: 12px;
+                font-family: MicrosoftYaHei;
+                color: rgba(102, 102, 102, 1);
+                line-height: 16px;
+                margin: 13px 8px 2px;
+                float: left;
+            }
+
+            .more {
+                font-size: 12px;
+                font-family: MicrosoftYaHei;
+                color: rgba(153, 153, 153, 1);
+                line-height: 16px;
+                float: right;
+                margin: 13px 0px 2px;
+            }
+        }
+
+        .box-content {
+            overflow: hidden;
+            height: 500px;
+            width: 100%;
+            .box-left {
+                background: rgba(40, 208, 235, 1);
+                width: 230px;
+                float: left;
+                height: 100%;
+            }
+            .box-right {
+                width: 960px;
+                height: 100%;
+                float: right;
+                .box-right-top {
+                    height: 40px;
+                    overflow: hidden;
+                    position: relative;
+                    .box-ad {
+                        font-size: 14px;
+                        font-family: MicrosoftYaHei;
+                        color: rgba(255, 255, 255, 1);
+                        line-height: 19px;
+                        margin: 11px 0;
+                        float: left;
+                        width: 716px;
+
+                        span {
+                            margin-left: 30px;
+                        }
+                    }
+
+                    .box-hot {
+                        font-size: 14px;
+                        font-family: MicrosoftYaHei;
+                        font-weight: bold;
+                        color: rgba(255, 255, 255, 1);
+                        line-height: 19px;
+                        margin: 11px 26px;
+                    }
+
+                    img {
+                        width: 29px;
+                        height: 35px;
+                        position: absolute;
+                        right: 0;
+                        top: 0;
+                    }
+                }
+
+                .box-right-content {
+                    overflow: hidden;
+                    padding-top: 14px;
+
+                    .box-goodsList {
+                        font-size: 0;
+                        width: 716px;
+                        float: left;
+                    }
+                }
+
+                .box-rankList {
+                    width: 241px;
+                    float: right;
+
+                    .box-rankItem {
+                        margin-left: 26px;
+                        font-size: 0;
+                        overflow: hidden;
+                        margin-top: 12px;
+                        margin-bottom: 6px;
+                        .num {
+                            width: 15px;
+                            height: 20px;
+                            background-size: contain;
+                            font-size: 10px;
+                            font-family: MicrosoftYaHei;
+                            color: rgba(255, 255, 255, 1);
+                            line-height: 14px;
+                            font-weight: bold;
+                            text-align: center;
+                            padding-left: 3px;
+                            line-height: 20px;
+                            float: left;
+                        }
+                        .name {
+                            font-size: 12px;
+                            font-family: MicrosoftYaHei;
+                            color: rgba(153, 153, 153, 1);
+                            line-height: 19px;
+                            font-weight: bold;
+                            margin-left: 10px;
+                            width: 180px;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                            float: left;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/main/vue/src/pagesPre/Login.vue

@@ -0,0 +1,261 @@
+<template>
+    <div class="container">
+        <logo-head></logo-head>
+        <div class="loginCenter" :style="{backgroundImage:'url('+require('../assetsPre/loginBanner.png')+')'}">
+            <div class="login">
+                <div class="login-wrapper" @keyup.enter="login">
+                    <div class="tabLine" :style="{left:activeName=='first'?'33px':'177px'}"></div>
+                    <el-tabs class="myTab" v-model="activeName">
+
+                        <el-tab-pane label="用户名登陆" name="first">
+                            <el-form :model="userInfo" style="width: 288px;margin-top:27px;" ref="form">
+                                <el-form-item prop="username">
+                                    <el-input v-model="userInfo.username" placeholder="用户名/手机号/邮箱">
+
+                                        <template slot="prepend">
+                                            <div style="padding: 0 12px">
+                                                <img style="width:19px;" src="../assetsPre/yonghuming.png" alt="">
+                                            </div>
+                                        </template>
+                                    </el-input>
+                                </el-form-item>
+                                <el-form-item prop="password">
+                                    <el-input v-model="userInfo.password" placeholder="密码" type="password">
+
+                                        <template slot="prepend">
+                                            <div style="padding: 0 15px">
+                                                <img style="width:13.6px;" src="../assetsPre/password.png" alt="">
+                                            </div>
+                                        </template>
+                                    </el-input>
+                                </el-form-item>
+                                <el-form-item class='isRemenber' label="" style="line-height:16px;">
+                                    <el-checkbox v-model="rememberMe">记住我</el-checkbox>
+                                    <a href="#">忘记密码？</a>
+                                </el-form-item>
+                                <el-form-item>
+                                    <el-button :loading="loading" @click="login" type="color" style="width: 100%;">登录</el-button>
+                                </el-form-item>
+
+                            </el-form>
+                        </el-tab-pane>
+                        <el-tab-pane label="验证码登陆" name="second">
+                            <el-form :model="userInfo" style="width: 288px;margin-top:27px;" ref="form">
+                                <el-form-item prop="phone">
+                                    <el-input v-model="userInfo.phone" placeholder="手机号">
+
+                                        <template slot="prepend">
+                                            <div style="padding: 0 12px">
+                                                <img style="width:19px;" src="../assetsPre/yonghuming.png" alt="">
+                                            </div>
+                                        </template>
+                                    </el-input>
+                                </el-form-item>
+                                <el-form-item prop="code">
+                                    <el-input v-model="userInfo.password" placeholder="验证码" type="text">
+
+                                        <template slot="prepend">
+                                            <div style="padding: 0 15px">
+                                                <img style="width:13.6px;" src="../assetsPre/password.png" alt="">
+                                            </div>
+                                        </template>
+                                        <template slot='append'>
+                                            <div class="send" @click="sendCode">{{isSend?'已发送('+num+')S':'发送验证码'}}</div>
+                                        </template>
+                                    </el-input>
+
+                                </el-form-item>
+                                <el-form-item class='isRemenber' label="" style="line-height:16px;">
+                                    <el-checkbox v-model="rememberMe">记住我</el-checkbox>
+                                    <a href="#">忘记密码？</a>
+                                </el-form-item>
+                                <el-form-item>
+                                    <el-button :loading="loading" @click="login" type="color" style="width: 100%;">登录</el-button>
+                                </el-form-item>
+
+                            </el-form>
+                        </el-tab-pane>
+                    </el-tabs>
+                    <div class="regest">
+                        <a href="#">没有账户，立即注册>></a>
+                    </div>
+
+                </div>
+            </div>
+
+        </div>
+
+        <logo-foot :isBottom='false'></logo-foot>
+    </div>
+</template>
+<script>
+import logoHead from '../pagesPre/LogoHead'
+import logoFoot from '../pagesPre/LogoFoot'
+export default {
+    data() {
+        return {
+            rememberMe: false,
+            loading: false,
+            userInfo: {
+                username: '',
+                password: '',
+                phone: '',
+                code: '',
+            },
+            activeName: 'first',
+            realCode: '',
+            num: 61,
+            isSend: false,
+        }
+    },
+    methods: {
+        login() {
+            this.$refs.form.validate(valid => {
+                if (this.activeName == 'first') {
+                    if (!this.userInfo.username || !this.userInfo.password) {
+                        this.$message({
+                            message: '用户名或密码不能为空！',
+                            type: 'warning'
+                        });
+                        return
+                    }
+                    this.loading = true;
+                    this.$http.post({
+                        url: '/auth/login',
+                        data: {
+                            username: this.userInfo.username,
+                            password: this.userInfo.password,
+                            remember: this.rememberMe
+                        }
+                    }).then(res => {
+                        this.loading = false;
+                        if (res.success) {
+                            this.$router.replace('/');
+                        } else {
+                            this.$message.error('登录失败');
+                        }
+                    }).catch(() => {
+                        this.loading = false;
+                    })
+                }
+                else {
+
+                }
+            })
+        },
+        sendCode() {
+            if (this.isSend) {
+                return
+            }
+            if (!this.checkPhone(this.userInfo.phone)) {
+                this.$message.error('手机号格式错误');
+                return
+            }
+
+            this.isSend = true
+            this.getTime()
+
+            this.sendMessage()
+        },
+        sendMessage() {
+            new Promise((resolve, reject) => {
+                this.$http.post({
+                    url: '/rong/sendCode',
+                    data: {
+                        phone: this.userInfo.phone,
+                    }
+                }).then(res => {
+                    if (res.success) {
+                        this.$message.success('验证码发送成功！');
+                        this.realCode = res.data
+                        this.isSend = true
+                        this.getTime()
+                    }
+                }).catch(() => {
+                    this.$message.error('验证码发送失败！');
+                })
+            })
+        },
+        getTime() {
+            if (this.num > 0) {
+                this.num--
+                setTimeout(() => {
+                    this.getTime()
+                }, 1000);
+            }
+            else {
+                this.num = 61
+                this.isSend = false
+            }
+        }
+    },
+    components: {
+        logoHead, logoFoot
+    }
+}
+</script>
+<style lang="less" scoped>
+.loginCenter {
+    overflow: hidden;
+    padding: 96px 0 129px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    width: 100%;
+    position: relative;
+
+    .login {
+        width: 1138px;
+        overflow: hidden;
+        margin: auto;
+    }
+
+    .login-wrapper {
+        padding: 0 33px;
+        width: 288px;
+        height: 375px;
+        background: rgba(255, 255, 255, 1);
+        box-shadow: 0px 2px 3px 2px rgba(4, 115, 165, 0.47);
+        border-radius: 2px;
+        float: right;
+    }
+}
+
+.isRemenber {
+    a {
+        float: right;
+        font-size: 12px;
+        color: rgba(11, 158, 192, 1);
+        line-height: 16px;
+    }
+}
+
+.regest {
+    height: 40px;
+    background: rgba(238, 242, 243, 1);
+    border-radius: 2px;
+    // padding: 0 26px;
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+
+    a {
+        font-size: 12px;
+        font-family: MicrosoftYaHei;
+        color: rgba(251, 110, 8, 1);
+        line-height: 40px;
+        text-decoration: none;
+        float: right;
+        margin-right: 26px;
+    }
+}
+
+.send {
+    height: 100%;
+    // background-color: #0b9ec0;
+    font-size: 12px;
+    color: #000;
+    padding: 0 10px;
+    cursor: pointer;
+}
+</style>

src/main/vue/src/pagesPre/LogoFoot.vue

@@ -0,0 +1,153 @@
+<template>
+    <div class='FootBox'>
+        <div class="FootContent" :class="{FootBottom:isBottom}">
+            <div class="Foot">
+                <div class="foot-top">
+                    <ul class='short-enter'>
+                        <li>
+                            <a href="#">首页</a>
+                        </li>
+                        <li>
+                            <a href="#">修图商</a>
+                        </li>
+                        <li>
+                            <a href="#">影楼|样片</a>
+                        </li>
+                        <li>
+                            <a href="#">营销</a>
+                        </li>
+                        <li>
+                            <a href="#">周边</a>
+                        </li>
+                        <li>
+                            <a href="#">联系我们</a>
+                        </li>
+                        <li>
+                            <a href="#">加入我们</a>
+                        </li>
+                        <li>
+                            <a href="#">关于我们</a>
+                        </li>
+                    </ul>
+
+                    <div class="foot-right">Copyright @ 2018 图忆途 | ICP证皖 B2-2-111890</div>
+                </div>
+                <div class="foot-bottom">
+                    <ul>
+                        <li>
+                            友情链接
+                        </li>
+                        <li>
+                            <a href='#'>阿里巴巴集团</a>
+                        </li>
+                        <li>
+                            <a href='#'>淘宝网</a>
+                        </li>
+                        <li>
+                            <a href='#'>天猫</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+</template>
+
+<script>
+
+export default {
+    props: {
+        isBottom: {
+            type: Boolean,
+            default: true
+        }
+    },
+    name: 'page404',
+    data() {
+        return {
+
+        }
+    },
+    computed: {
+
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.FootBox {
+    height: 104px;
+    width: 100%;
+}
+.FootContent {
+    background: rgba(255, 255, 255, 1);
+}
+.Foot {
+    width: 1183px;
+    margin: auto;
+    overflow: hidden;
+
+    .foot-top {
+        overflow: hidden;
+        padding: 19px 0;
+        border-bottom: 1px solid rgba(233, 233, 233, 1);
+        .short-enter {
+            float: left;
+            li {
+                display: inline-block;
+                padding-right: 12px;
+                margin-right: 10px;
+                a {
+                    font-size: 12px;
+                    font-family: MicrosoftYaHei;
+                    color: rgba(153, 153, 153, 1);
+                    line-height: 12px;
+                    display: block;
+                    color: #999;
+                    text-decoration: none;
+                }
+
+                &:not(:last-child) {
+                    border-right: 1px solid #999;
+                }
+            }
+        }
+        .foot-right {
+            float: right;
+            font-size: 12px;
+            font-family: MicrosoftYaHei;
+            color: rgba(153, 153, 153, 1);
+            line-height: 16px;
+        }
+    }
+
+    .foot-bottom {
+        padding: 13px 0;
+        ul {
+            li {
+                display: inline-block;
+                font-size: 12px;
+                font-family: MicrosoftYaHei;
+                color: rgba(153, 153, 153, 1);
+                line-height: 16px;
+                margin-right: 10px;
+                a {
+                    color: rgba(153, 153, 153, 1);
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+}
+
+.FootBottom {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}
+</style>

src/main/vue/src/pagesPre/LogoHead.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="HeadContent">
+        <div class="Head">
+            <img class="logo" src="../assetsPre/logo.png" alt="">
+            <div class="line">
+                |
+            </div>
+            <div class="welcome">
+                欢迎登陆
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+import logo from '../components/Logo'
+export default {
+    name: 'page404',
+    data() {
+        return {
+
+        }
+    },
+    computed: {
+
+    },
+    methods: {
+
+    },
+    components:{
+        logo
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.HeadContent {
+    box-shadow: 0px 1px 2px 0px rgba(199, 199, 199, 0.5);
+    padding: 33px 0;
+    width: 100%;
+}
+.Head {
+    width: 1183px;
+    margin: auto;
+    overflow: hidden;
+    background: rgba(255, 255, 255, 1);
+
+    .logo {
+       width: 300px;
+       height: 54px;
+       float: left;
+    }
+
+
+    .line {
+        float: left;
+        font-size: 30px;
+        font-family: PingFangSC-Regular;
+        color: rgba(102, 102, 102, 1);
+        line-height: 42px;
+        margin: 8px 0 8px 22px;
+    }
+    .welcome {
+        float: left;
+        line-height: 40px;
+        font-size: 30px;
+        font-family: MicrosoftYaHei;
+        color: rgba(102, 102, 102, 1);
+        margin: 9px 0 9px 14px;
+    }
+}
+</style>

src/main/vue/src/pagesPre/Main.vue

@@ -0,0 +1,26 @@
+<template>
+    <keep-alive include="*">
+        <router-view></router-view>
+    </keep-alive>
+</template>
+<script>
+export default {
+    name: '',
+    data() {
+        return {
+        }
+    },
+    watch: {
+        $route() {
+            if (this.$route.meta.title) {
+                document.title = this.$route.meta.title
+            }
+            else {
+                document.title = '图途象'
+            }
+        }
+    },
+    methods: {
+    }
+}
+</script>

src/main/vue/src/pagesPre/MenuFoot.vue

@@ -0,0 +1,113 @@
+<template>
+    <div class='menuList'>
+        <div class="menu-item">
+            <img src="../assetsPre/Group1.png" alt="">
+            <div class="text">
+                <div class="title">7*24</div>
+                <div class="subTitle">全天候服务支持</div>
+            </div>
+        </div>
+         <div class="menu-item">
+            <img src="../assetsPre/Group2.png" alt="">
+            <div class="text">
+                <div class="title">一对一客服</div>
+                <div class="subTitle">商家客服一对一</div>
+            </div>
+        </div>
+         <div class="menu-item">
+            <img src="../assetsPre/Group3.png" alt="">
+            <div class="text">
+                <div class="title">交易担保</div>
+                <div class="subTitle">入驻商家全担保</div>
+            </div>
+        </div>
+         <div class="menu-item">
+            <img src="../assetsPre/Group4.png" alt="">
+            <div class="text">
+                <div class="title">可靠交付</div>
+                <div class="subTitle">交付验收自主审核</div>
+            </div>
+        </div>
+         <div class="menu-item">
+            <img src="../assetsPre/Group5.png" alt="">
+            <div class="text">
+                <div class="title">售后保障</div>
+                <div class="subTitle">不满意随时找我们</div>
+            </div>
+        </div>
+
+    </div>
+
+</template>
+
+<script>
+
+export default {
+    props: {
+        isBottom: {
+            type: Boolean,
+            default: true
+        }
+    },
+    name: 'page404',
+    data() {
+        return {
+
+        }
+    },
+    computed: {
+
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.menuList {
+    width: 1190px;
+    margin: 50px auto;
+    height: 90px;
+    font-size: 0;
+
+    .menu-item {
+        width: 228px;
+        height: 90px;
+        background: rgba(255, 255, 255, 1);
+        border: 1px solid rgba(234, 234, 234, 1);
+        display: inline-block;
+
+        &:not(:last-child){
+            margin-right: 10px;
+        }
+        img {
+            display: block;
+            width: 44px;
+            height: 41px;
+            float: left;
+            margin: 29px 0 20px 27px;
+        }
+
+        .text {
+            float: right;
+            margin: 26px 34px 19px 0;
+            .title {
+                font-size: 16px;
+                font-family: MicrosoftYaHei;
+                color: rgba(51, 51, 51, 1);
+                line-height: 21px;
+                text-align: center;
+            }
+            .subTitle {
+                font-size: 12px;
+                font-family: MicrosoftYaHei;
+                color: rgba(153, 153, 153, 1);
+                line-height: 16px;
+                text-align: center;
+                margin-top: 8px;
+            }
+        }
+    }
+}
+</style>

src/main/vue/src/pagesPre/Periphery.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="conatiner">
+periphery
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'home',
+    data() {
+        return {
+        }
+    },
+    computed: {
+    },
+    methods: {
+    }
+}
+</script>
+
+<style lang="less" scoped>
+</style>

src/main/vue/src/pagesPre/Product.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="conatiner">
+product
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'home',
+    data() {
+        return {
+        }
+    },
+    computed: {
+    },
+    methods: {
+    }
+}
+</script>
+
+<style lang="less" scoped>
+</style>

src/main/vue/src/pagesPre/Sale.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="conatiner">
+sale
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'home',
+    data() {
+        return {
+        }
+    },
+    computed: {
+    },
+    methods: {
+    }
+}
+</script>
+
+<style lang="less" scoped>
+</style>

src/main/vue/src/routerPre/index.js

@@ -0,0 +1,115 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import store from '../vuexPre'
+import axios from 'axios'
+
+Vue.use(Router);
+
+const router = new Router({
+    routes: [{
+            path: '/',
+            component: () =>
+                import ('../pagesPre/App'),
+            children: [{
+                    path: '/',
+                    redirect: 'index'
+                },
+                {
+                    path: '/404',
+                    name: '404',
+                    component: () =>
+                        import ('../pagesPre/404')
+                },
+                {
+                    path: '/index',
+                    name: 'index',
+                    component: () =>
+                        import ('../pagesPre/Index')
+                },
+                {
+                    path: '/business',
+                    name: 'business',
+                    component: () =>
+                        import ('../pagesPre/Business'),
+                    meta: {
+                        title: '修图商'
+                    }
+                },
+                {
+                    path: '/customer',
+                    name: 'customer',
+                    component: () =>
+                        import ('../pagesPre/Customer')
+                },
+                {
+                    path: '/product',
+                    name: 'product',
+                    component: () =>
+                        import ('../pagesPre/Product')
+                },
+                {
+                    path: '/sale',
+                    name: 'sale',
+                    component: () =>
+                        import ('../pagesPre/Sale')
+                },
+                {
+                    path: '/periphery',
+                    name: 'periphery',
+                    component: () =>
+                        import ('../pagesPre/Periphery')
+                }
+            ]
+        },
+        {
+            path: '/login',
+            name: 'login',
+            component: () =>
+                import ('../pagesPre/Login')
+        }
+    ]
+});
+router.beforeEach((to, from, next) => {
+    //console.log(to);
+    if (/^\/http/.test(to.path)) {
+        console.log(Vue.$baseUrl);
+        let url = to.path.replace('/', '');
+        let params = [];
+        if (to.query) {
+            for (let key in to.query) {
+                if (to.query.hasOwnProperty(key)) {
+                    params.push(`${key}=${to.query[key]}`);
+                }
+            }
+        }
+        if (params.length > 0) {
+            url += `?${params.join('&')}`;
+        }
+        window.open(url);
+        return;
+    }
+    next()
+        // if (!store.state.userInfo && to.path !== '/login') {
+        //     axios.get('/userInfo/getUserInfo').then(res => {
+        //         if (res.status === 200) {
+        //             if (res.data.success && res.data.data) {
+        //                 store.commit('updateUserInfo', res.data.data);
+        //                 next();
+        //                 return;
+        //             }
+        //         }
+        //         next('/login');
+        //     }).catch(() => {
+        //         next('/login');
+        //     })
+        // } else if (!to.matched.length) {
+        //     next('/404');
+        // } else {
+        //     next();
+        // }
+});
+router.afterEach((to, from) => {
+    window.onresize();
+});
+
+export default router;

src/main/vue/src/vuexPre/index.js

@@ -0,0 +1,25 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+    state: {
+        tableHeight: 0,
+        fetchingData: false,
+        userInfo: null
+    },
+    mutations: {
+        updateTableHeight(state, height) {
+            state.tableHeight = height;
+        },
+        updateFetchingData(state, fetchingData) {
+            state.fetchingData = fetchingData
+        },
+        updateUserInfo(state, userInfo) {
+            state.userInfo = userInfo
+        }
+    },
+    actions: {}
+})
+;