配置文件

src/main/pc-space/package.json

@@ -1,35 +1,35 @@
 {
-  "name": "pc-space",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "axios": "^0.24.0",
-    "core-js": "^3.6.5",
-    "element-ui": "^2.15.6",
-    "qs": "^6.10.1",
-    "vue": "^2.6.11",
-    "vue-router": "^3.2.0",
-    "vuex": "^3.4.0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^6.2.2",
-    "less": "^3.0.4",
-    "less-loader": "^5.0.0",
-    "prettier": "^2.2.1",
-    "vue-template-compiler": "^2.6.11"
-  }
+    "name": "pc-space",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "serve": "vue-cli-service serve",
+        "build": "vue-cli-service build",
+        "lint": "vue-cli-service lint"
+    },
+    "dependencies": {
+        "axios": "^0.24.0",
+        "core-js": "^3.6.5",
+        "element-ui": "^2.15.6",
+        "qs": "^6.10.1",
+        "vue": "^2.6.11",
+        "vue-router": "^3.2.0",
+        "vuex": "^3.4.0"
+    },
+    "devDependencies": {
+        "@vue/cli-plugin-babel": "~4.5.0",
+        "@vue/cli-plugin-eslint": "~4.5.0",
+        "@vue/cli-plugin-router": "~4.5.0",
+        "@vue/cli-plugin-vuex": "~4.5.0",
+        "@vue/cli-service": "~4.5.0",
+        "@vue/eslint-config-prettier": "^6.0.0",
+        "babel-eslint": "^10.1.0",
+        "eslint": "^6.7.2",
+        "eslint-plugin-prettier": "^3.3.1",
+        "eslint-plugin-vue": "^6.2.2",
+        "less": "^3.0.4",
+        "less-loader": "^5.0.0",
+        "prettier": "^2.2.1",
+        "vue-template-compiler": "^2.6.11"
+    }
 }

src/main/pc-space/src/App.vue

@@ -1,32 +1,5 @@
 <template>
     <div id="app">
-        <div id="nav">
-            <!-- <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link> -->
-        </div>
-        <router-view />
+        <router-view style="min-width: 1200px" />
     </div>
 </template>
-
-<style lang="less">
-#app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
-}
-
-#nav {
-    padding: 30px;
-
-    a {
-        font-weight: bold;
-        color: #2c3e50;
-
-        &.router-link-exact-active {
-            color: #42b983;
-        }
-    }
-}
-</style>

src/main/pc-space/src/components/PageHeader.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="container">
+        <div class="header"></div>
+        <div class="center-item">
+            <router-link to="/Home" class="link">我的</router-link>
+            <router-link to="/casting" class="link">铸造</router-link>
+        </div>
+    </div>
+</template>
+<script>
+export default {};
+</script>
+<style lang="less" scoped>
+.container {
+    background: #000;
+    .header {
+        background: #fff;
+    }
+    .center-item {
+        padding: 0 80px;
+        .link {
+            &:first-child {
+                font-size: 12px;
+                color: #ffffff;
+                line-height: 17px;
+            }
+        }
+        &:not(:last-child) {
+            border-right: 1px solid #acacac;
+        }
+    }
+}
+</style>

src/main/pc-space/src/main.js

@@ -4,7 +4,15 @@ import router from './router';
 import store from './store';
 import http from './plugins/http';
 import ElementUI from 'element-ui';
+ElementUI.Dialog.props.closeOnClickModal.default = false;
+import './styles/common.less';
+import './styles/font.less';
+// import './styles/app.less';
 
+Vue.prototype.$colors = {
+    prim: '#FF7F1F',
+    red: '#F42202'
+};
 Vue.use(ElementUI);
 Vue.use(http);
 

src/main/pc-space/src/plugins/http.js

@@ -1,7 +1,21 @@
 import axios from 'axios';
 import qs from 'qs';
 /* eslint-disable */
-let baseUrl = process.env.VUE_APP_BASE_URL;
+let baseUrl = 'http://localhost:8080';
+switch (process.env.NODE_ENV) {
+    case 'development':
+        baseUrl = 'http://zhirongip.izouma.com';
+        // baseUrl = 'http://192.168.50.190:8080';
+        // baseUrl = 'http://localhost:8080';
+        // baseUrl = 'http://192.168.50.190:8080';
+        break;
+    case 'test':
+        baseUrl = 'http://localhost:8080';
+        break;
+    case 'production':
+        baseUrl = '../../';
+        break;
+}
 const axiosInstance = axios.create({
     baseURL: baseUrl
 });
@@ -9,7 +23,7 @@ const axiosInstance = axios.create({
 axiosInstance.interceptors.request.use(
     function (config) {
         config.headers = config.headers || {};
-        let token = localStorage.getItem('nineToken');
+        let token = localStorage.getItem('webToken');
         if (token) {
             config.headers['Authorization'] = 'Bearer ' + token;
         }
@@ -101,9 +115,9 @@ const http = {
 export default {
     axios: axiosInstance,
     http: http,
-    install(app, options) {
-        app.config.globalProperties.$baseUrl = baseUrl;
-        app.config.globalProperties.$axios = axiosInstance;
-        app.config.globalProperties.$http = http;
+    install(_Vue, options) {
+        _Vue.prototype.$baseUrl = baseUrl;
+        _Vue.prototype.$axios = axiosInstance;
+        _Vue.prototype.$http = http;
     }
 };

src/main/pc-space/src/router/index.js

@@ -1,16 +1,38 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-// import Home from '../views/Home.vue';
-
+// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
+const originalPush = VueRouter.prototype.push;
+VueRouter.prototype.push = function push(location) {
+    return originalPush.call(this, location).catch(err => err);
+};
 Vue.use(VueRouter);
 
 const routes = [
     {
         path: '/',
-        name: 'Home'
+        redirect: 'home'
     },
     {
-        component: () => import(/* webpackChunkName: "about" */ '../views/Index.vue')
+        path: '/',
+        component: () => import('../views/Index.vue'),
+        children: [
+            {
+                path: '/home',
+                name: 'home',
+                component: () => import('../views/Home.vue'),
+                meta: {
+                    title: '首页'
+                }
+            },
+            {
+                path: '/casting',
+                name: 'casting',
+                component: () => import('../views/Casting.vue'),
+                meta: {
+                    title: '铸造'
+                }
+            }
+        ]
     }
 ];
 

src/main/pc-space/src/store/index.js

@@ -23,25 +23,16 @@ export default new Vuex.Store({
         updateUserInfo(state, userInfo) {
             state.userInfo = userInfo;
         },
-        setUserInfo(state, userInfo) {
-            state.userInfo = userInfo;
-        },
         updateShowAdd(state, showAdd) {
             state.showAdd = showAdd;
         }
     },
     actions: {
         getUserInfo(context) {
-            return http.http
-                .get('/user/my')
-                .then(res => {
-                    context.commit('setUserInfo', res);
-                    return Promise.resolve();
-                })
-                .catch(() => {
-                    context.commit('setUserInfo', null);
-                    return Promise.reject();
-                });
+            return http.http.get('/user/my').then(res => {
+                console.log(res);
+                context.commit('updateUserInfo', res);
+            });
         }
     }
 });

src/main/pc-space/src/styles/app.less

@@ -0,0 +1,235 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+body,
+html {
+    font-family: Noto Sans, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun,
+        sans-serif;
+}
+
+a {
+    text-decoration: none;
+    span {
+        text-decoration: none;
+    }
+}
+
+.el-dialog__wrapper {
+    // z-index: 200000 !important;
+}
+
+.hideSelect.el-select-dropdown {
+    border-width: 0px;
+    box-shadow: none;
+    display: none;
+}
+
+.center-content {
+    .center-content();
+}
+
+.el-dialog {
+    box-shadow: 0px -1px 0px 0px #f2f3f5 !important;
+    border-radius: 8px !important;
+
+    .btns {
+        .flex();
+        justify-content: flex-end;
+        .el-button {
+            min-width: 100px;
+            border-radius: 8px;
+            line-height: 16px;
+        }
+    }
+}
+
+.el-dialog {
+    max-height: 70vh;
+    .flex-col();
+    .el-dialog__header {
+        flex-shrink: 0;
+    }
+    .el-dialog__body {
+        padding: 30px 0 40px;
+        flex-grow: 1;
+        overflow: auto;
+    }
+    .el-form-item {
+        width: 50%;
+        box-sizing: border-box;
+        padding-right: 16px;
+        margin-right: 0px !important;
+        margin-bottom: 20px;
+        display: inline-flex !important;
+        .el-form-item__content {
+            flex-grow: 1;
+        }
+        &.block {
+            width: calc(100% - 14px);
+            .el-input {
+                width: 400px;
+            }
+            .el-textarea {
+                width: 400px;
+            }
+        }
+
+        .el-input {
+            width: 200px;
+        }
+
+        .el-input-number--small {
+            text-align: left;
+            width: 200px;
+
+            input {
+                text-align: left;
+            }
+        }
+    }
+
+    .btns {
+        padding: 50px 90px 0;
+    }
+}
+
+.iconfont {
+    font-size: 24px;
+}
+
+body {
+    font-size: 16px;
+
+    div {
+        font-size: 14px;
+    }
+}
+
+* {
+    &::-webkit-scrollbar {
+        width: 0.5em;
+        height: 0.5em;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: transparent;
+        border-radius: 2px;
+    }
+    &::-webkit-scrollbar-thumb {
+        background: #bfbfbf;
+        border-radius: 10px;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+        background: #333;
+    }
+}
+.el-menu {
+    border-right-width: 0px !important;
+}
+
+.popup-menu {
+    .el-menu--popup-bottom-start {
+        margin-top: 0;
+    }
+    .el-menu--popup {
+        min-width: 208px;
+        background-color: #ffffff !important;
+        box-sizing: border-box;
+        padding: 0 0 !important;
+    }
+    .el-menu {
+        .el-menu-item {
+            height: 56px !important;
+            line-height: 56px !important;
+            padding: 0 40px !important;
+            text-align: center;
+            background-color: #ffffff !important;
+            color: #353535 !important;
+           
+            &.is-active {
+                background-color: transparent !important;
+                color: #353535 !important;
+                // font-weight: bold;
+            }
+            &:hover {
+                background-color: #e4e4e4 !important;
+                color: #000 !important;
+                font-weight: bold;
+            }
+        }
+    }
+}
+
+.search {
+    .el-input__suffix-inner {
+        display: flex;
+        flex-direction: row-reverse;
+
+        .el-icon-search {
+            color: #c0c4cc;
+            font-size: 14;
+            cursor: pointer;
+            transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+            &:hover {
+                color: #909399;
+            }
+        }
+    }
+
+    .el-input-group__append,
+    .el-input-group__prepend {
+        background-color: @warn;
+        padding: 0 10px;
+        color: #fff;
+        border-color: @warn;
+    }
+
+    &.el-input-group--append {
+        .el-input__inner {
+            border-color: @warn;
+            background-color: transparent;
+        }
+    }
+}
+
+.btn-block {
+    display: block;
+    width: 100%;
+}
+.btn-block + .btn-block {
+    margin-left: 0 !important;
+    margin-top: 20px;
+}
+
+.el-dialog__title {
+    font-weight: bold;
+    // font-size: 16px !important;
+}
+
+.swiper-pagination-bullet {
+    background-color: rgba(0, 0, 0, 0.6);
+}
+.swiper-pagination-bullet-active {
+    background-color: @prim;
+}
+.animate__animated.animate__bounce {
+    --animate-duration: 2s;
+}
+:root {
+    --swiper-theme-color: @prim;
+}
+/* This changes all the animations globally */
+// :root {
+//     --animate-duration: 800ms;
+//     --animate-delay: 0.9s;
+// }
+
+.symbol {
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
+}

src/main/pc-space/src/styles/common.less

@@ -0,0 +1,115 @@
+@warn: #00684f;
+@success: #07c160;
+@danger: #ea2d2d;
+@prim: #ff8700;
+@info: #939599;
+@text0: #181818;
+@text1: #323233;
+@text2: #606266;
+@text3: #939599;
+@text4: #c6c8cc;
+@border1: #f5f7fa;
+@border2: #f2f3f5;
+@border3: #dfe1e6;
+@border4: #f2f6fc;
+@bg: #f5f7fa;
+@red: #fd4d49;
+@menuFont: 16px;
+.flex1 {
+    flex-grow: 1;
+}
+.flex() {
+    display: flex;
+    align-items: center;
+}
+.flex-col() {
+    display: flex;
+    flex-direction: column;
+}
+
+.ellipsis() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ellipsis-line( @line:2 ) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: @line;
+    overflow: hidden;
+}
+
+.min-height(@subHeight:462px, @screenHeight:969px) {
+    min-height: calc(100vh - @subHeight);
+    @media screen and (max-height: @screenHeight) {
+        min-height: calc(@screenHeight - @subHeight);
+    }
+}
+
+.bg() {
+    background-position: center center;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+@keyframes iconAnimate {
+    from {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+
+    20% {
+        -webkit-transform: scale(0.8);
+        transform: scale(0.8);
+    }
+
+    80% {
+        -webkit-transform: scale(1.5);
+        transform: scale(1.5);
+    }
+    100% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+}
+.iconAnimate {
+    animation: iconAnimate ease-in-out 0.3s;
+}
+
+.center-content( @width:1300px ) {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 50px;
+    max-width: @width;
+    margin: 0 auto;
+}
+
+.icon-button {
+    .flex();
+    display: inline-flex;
+    vertical-align: middle;
+    &.is-plain {
+        background-color: #fff;
+        &:active,
+        &:hover,
+        &:visited,
+        &:focus {
+            background-color: @prim;
+        }
+    }
+
+    span {
+        font-size: 12px;
+        font-weight: normal;
+        .flex();
+    }
+
+    i {
+        font-size: 22px;
+        display: inline-block;
+        vertical-align: sub;
+        margin-right: 4px;
+    }
+    padding: 0 20px;
+}

src/main/pc-space/src/styles/font.less

@@ -0,0 +1,4 @@
+@font-face {
+    font-family: 'Impact';
+    src: url(https://zhirongip.oss-cn-hangzhou.aliyuncs.com/fonts/impact.ttf);
+}

src/main/pc-space/src/views/Casting.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>铸造</div>
+</template>

src/main/pc-space/src/views/Home.vue

@@ -1,18 +1,16 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+    <div class="container">我的</div>
 </template>
-
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
 export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
-}
+    data() {
+        return {
+            list: '666'
+        };
+    },
+    mounted() {
+        console.log(this.list);
+    }
+};
 </script>
+<style lang="less" scoped></style>

src/main/pc-space/src/views/Index.vue

@@ -1,7 +1,112 @@
 <template>
-    <div></div>
+    <el-container id="app" direction="vertical">
+        <page-header></page-header>
+        <el-container direction="vertical">
+            <el-main class="main" style="width: 100%; overflow: hidden">
+                <keep-alive>
+                    <router-view />
+                </keep-alive>
+            </el-main>
+            <el-footer height="246px">Footer</el-footer>
+        </el-container>
+    </el-container>
 </template>
 <script>
-export default {};
+import PageHeader from '../components/PageHeader.vue';
+export default {
+    components: { PageHeader }
+};
 </script>
-<style lang="less"></style>
+<style lang="less" scoped>
+#app {
+    min-height: 100vh;
+}
+.el-footer {
+    // background-color: @warn;
+    background: #ccc;
+    padding: 0;
+    position: relative;
+    // .flex-col();
+    // display: flex;
+    // flex-direction: column;
+    &::before {
+        content: '';
+        height: 6px;
+        display: block;
+        // background-color: @prim;
+    }
+
+    .footer-content {
+        justify-content: center;
+        // padding-bottom: 55px;
+        padding-top: 42px;
+        // .flex();
+        // .left {
+        //     min-width: 240px;
+        // }
+        .name {
+            font-size: 12px;
+            font-weight: 600;
+            color: #ffffff;
+            line-height: 17px;
+            text-align: center;
+        }
+        .center {
+            width: 438px;
+            // .flex();
+            .center-item {
+                padding: 0 80px;
+                .link {
+                    &:first-child {
+                        font-size: 12px;
+                        color: #ffffff;
+                        line-height: 17px;
+                    }
+                    display: block;
+                    font-size: 12px;
+                    color: #acacac;
+                    line-height: 17px;
+                    margin-top: 12px;
+                    cursor: pointer;
+
+                    &:hover {
+                        // color: @prim;
+                        text-decoration: underline;
+                    }
+                }
+
+                &:not(:last-child) {
+                    border-right: 1px solid #acacac;
+                }
+            }
+        }
+        position: relative;
+    }
+}
+.el-aside {
+    background-color: #d3dce6;
+    color: #333;
+    text-align: center;
+    line-height: 200px;
+}
+
+.el-main {
+    background-color: #e9eef3;
+    color: #333;
+    text-align: center;
+    line-height: 160px;
+}
+
+body > .el-container {
+    margin-bottom: 40px;
+}
+
+.el-container:nth-child(5) .el-aside,
+.el-container:nth-child(6) .el-aside {
+    line-height: 260px;
+}
+
+.el-container:nth-child(7) .el-aside {
+    line-height: 320px;
+}
+</style>