no message

package.json

@@ -8,7 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^1.9.0",
     "core-js": "^3.8.3",
+    "element-ui": "^2.15.14",
+    "lib-flexible": "^0.3.2",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
@@ -21,8 +24,12 @@
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "autoprefixer": "^10.4.21",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
+    "postcss": "^8.5.3",
+    "postcss-loader": "^8.1.1",
+    "postcss-pxtorem": "^6.1.0",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
     "vue-template-compiler": "^2.6.14"

src/App.vue

@@ -1,32 +1,11 @@
 <template>
   <div id="app">
-    <nav>
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </nav>
+<!--    <nav>-->
+<!--      <router-link to="/">Home</router-link> |-->
+<!--    </nav>-->
     <router-view/>
   </div>
 </template>
 
 <style lang="scss">
-#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/api/member.js

@@ -0,0 +1,5 @@
+import request from '@/utils/request'
+
+const newsUrl = '/api/member/'
+// 登陆
+export const userLogin = (data) => request(newsUrl + 'login', 'post', data, true)

src/assets/css/commin.css

@@ -0,0 +1,644 @@
+body{
+    margin: 0;
+    padding: 0;
+    font-size: 16px;
+}
+.black-custom-img{
+    width: 160px;
+    height: 160px;
+}
+.black-custom-img-1{
+    width: 60px;
+    height: 1px;
+}
+
+/* 隐藏scroll-view 滚动条 */
+::-webkit-scrollbar {
+    display: none;
+}
+
+/* 不换行 */
+.view-nowrap{
+    white-space: nowrap;
+}
+/* 数字和文字不自动换行 */
+.overflowWrap{
+    overflowWrap:break-word;
+    word-break: break-all;
+}
+/* 自动换行 */
+.view-word-wrap{
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+/*超出三行... */
+.text-overflow-ellipsis-t {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    -webkit-box-orient: vertical;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+/*超出两行... */
+.text-overflow-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+/*超出一行... */
+.text-overflow-ellipsis-one {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-break: break-all;
+}
+/* 内部盒子 */
+.box-border-box{
+    box-sizing: border-box;
+}
+
+.flex-common-css {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+.flex-index-css {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+.flex-direction-column {
+    display: flex;
+    flex-direction: column;
+}
+.display-flex {
+    display: flex;
+}
+.flex-justify-space {
+    display: flex;
+    justify-content: space-between;
+}
+
+.flex-justify-around {
+    display: flex;
+    justify-content: space-around;
+}
+
+.flex-justify-center {
+    display: flex;
+    justify-content: center;
+}
+.flex-justify-end {
+    display: flex;
+    justify-content: flex-end;
+}
+.flex-justify-start {
+    display: flex;
+    justify-content: flex-start;
+}
+.align-items-start {
+    display: flex;
+    align-items: flex-start;
+}
+.align-items-center {
+    display: flex;
+    align-items: center;
+}
+.align-items-flex-end {
+    display: flex;
+    align-items: flex-end;
+}
+.flex-wrap-wrap {
+    display: flex;
+    flex-wrap: wrap;
+}
+.common-view-css{
+    width: 100%;
+    flex: 1;
+}
+.scroll-view-css {
+    width: 100%;
+    flex: 1;
+    overflow: auto;
+}
+.box-sizing-border {
+    box-sizing: border-box;
+}
+.text-align-center {
+    text-align: center;
+}
+.text-align-right {
+    text-align: right;
+}
+.text-align-left {
+    text-align: left;
+}
+.flex-1{
+    flex: 1;
+}
+.flex-shrink0{
+    flex-shrink: 0;
+}
+
+/* 字体大小 */
+.fs-12{
+    font-size: 12px;
+}
+.fs-14{
+    font-size: 14px;
+}
+.fs-16{
+    font-size: 16px;
+}
+.fs-18{
+    font-size: 18px;
+}
+.fs-20{
+    font-size: 20px;
+}
+.fs-22{
+    font-size: 22px;
+}
+.fs-24{
+    font-size: 24px;
+}
+.fs-26{
+    font-size: 26px;
+}
+.fs-28{
+    font-size: 28px;
+}
+.fs-30{
+    font-size: 30px;
+}
+.fs-32{
+    font-size: 32px;
+}
+.fs-34{
+    font-size: 34px;
+}
+.fs-36{
+    font-size: 36px;
+}
+.fs-40{
+    font-size: 40px;
+}
+.fs-44{
+    font-size: 44px;
+}
+.fs-48{
+    font-size: 48px;
+}
+.fs-52{
+    font-size: 52px;
+}
+.fs-64{
+    font-size: 64px;
+}
+.fs-72{
+    font-size: 72px;
+}
+/* 字体粗细 */
+.fw-b{
+    font-weight: bold;
+}
+.fw-400{
+    font-weight: 400;
+}
+.fw-500{
+    font-weight: 500;
+}
+.fw-600{
+    font-weight: 600;
+}
+/* 圆角 */
+
+.br-r-8{
+    border-radius: 8px;
+}
+
+.br-r-16{
+    border-radius: 16px;
+}
+.br-r-20{
+    border-radius: 20px;
+}
+
+/* 字体颜色 */
+.fc-f{
+    color: #fff;
+}
+.fc-0{
+    color: #000;
+}
+.fc-3{
+    color: #333;
+}
+.fc-6{
+    color: #666;
+}
+.fc-9{
+    color: #999;
+}
+.fc-794B06{
+    color: #794B06;
+}
+.fc-FFDDA1{
+    color: #FFDDA1;
+}
+.fc-16BB5D{
+    color: #16BB5D;
+}
+.fc-4BC285{
+    color: #4BC285;
+}
+.fc-13984C{
+    color: #13984C;
+}
+.fc-34C759{
+    color: #34C759;
+}
+.fc-ED301D{
+    color: #ED301D;
+}
+.fc-FF3B30{
+    color: #FF3B30;
+}
+.fc-ED930F{
+    color: #ED930F;
+}
+.fc-FF9D00{
+    color: #FF9D00;
+}
+.fc-FE9E11{
+    color: #FE9E11;
+}
+.fc-3489FF{
+    color: #3489FF;
+}
+.fc-358AFD{
+    color:#358AFD;
+    font-weight: 600;
+}
+.fc-27AE60{
+    color: #27AE60;
+}
+.fc-9198A2{
+    color: #9198A2;
+}
+.fc-2F80ED{
+    color: #2F80ED;
+}
+.fc-632611{
+    color: #632611;
+}
+.fc-8C5E0B{
+    color: #8C5E0B;
+}
+.fc-2680EB{
+    color: #2680EB;
+}
+.fc-4C96EF{
+    color: #4C96EF;
+}
+.fc-1778FD{
+    color: #1778FD;
+}
+.fc-C6DBFE{
+    color: #C6DBFE;
+}
+.fc-7B7D82{
+    color: #7B7D82;
+}
+/* 背景颜色 */
+.bgc-f{
+    background-color: #fff;
+}
+.bgc-c{
+    background-color: #ccc;
+}
+.bgc-3{
+    background-color: #333;
+}
+.bgc-9{
+    background-color: #999;
+}
+.bgc-F5F5F5{
+    background-color: #F5F5F5;
+}
+.bgc-F6F6F6{
+    background-color: #F6F6F6;
+}
+.bgc-27AE60{
+    background-color: #27AE60;
+}
+.bgc-A2E4BE{
+    background-color: #A2E4BE;
+}
+.bgc-16BB5D{
+    background-color: #16BB5D;
+}
+.bgc-E8F9EF{
+    background-color: #E8F9EF;
+}
+.bgc-3489FF{
+    background-color: #3489FF;
+}
+.bgc-E2EEFF{
+    background-color: #E2EEFF;
+}
+.bgc-1778FD{
+    background-color: #1778FD;
+}
+.bgc-EAF4FD{
+    background-color: #EAF4FD;
+}
+.bgc-4FB3EF{
+    background-color: #4FB3EF;
+}
+.bgc-B3DDFB{
+    background-color: #B3DDFB;
+}
+.bgc-1989F9{
+    background-color: #1989F9;
+}
+.bgc-ADCDFE{
+    background-color: #ADCDFE;
+}
+.bgc-F5F4F9{
+    background-color: #F5F4F9;
+}
+.bgc-F7F7F7{
+    background-color: #F7F7F7;
+}
+.bgc-F6F7FB{
+    background-color: #F6F7FB;
+}
+.bgc-FE9E11{
+    background: #FE9E11;
+}
+
+/* 内边距 */
+.pb-10{
+    padding-bottom: 10px;
+}
+.pb-20{
+    padding-bottom: 20px;
+}
+.pb-30{
+    padding-bottom: 30px;
+}
+.pb-32{
+    padding-bottom: 32px;
+}
+.pb-24{
+    padding-bottom: 24px;
+}
+.p-16{
+    padding: 16px;
+}
+.p-24{
+    padding: 24px;
+}
+.p-30{
+    padding: 30px;
+}
+.p-32{
+    padding: 32px;
+}
+.p-40{
+    padding: 40px;
+}
+.p-46{
+    padding: 46px;
+}
+.plr-24{
+    padding: 0 24px;
+}
+.plr-32{
+    padding: 0 32px;
+}
+.plr-40{
+    padding: 0 40px;
+}
+.plr-38{
+    padding: 0 38px;
+}
+.pr-8{
+    padding-right: 8px;
+}
+.pt-24 {
+    padding-top: 24px;
+}
+.pt-7{
+    padding-top: 7px;
+}
+/* 外边距 */
+.m-24{
+    margin: 24px;
+}
+
+.ml-8{
+    margin-left: 8px;
+}
+.ml-10{
+    margin-left: 10px;
+}
+.ml-16{
+    margin-left: 16px;
+}
+.ml-26{
+    margin-left: 26px;
+}
+.ml-30{
+    margin-left: 30px;
+}
+.ml-40{
+    margin-left: 40px;
+}
+.mt-4{
+    margin-top: 4px;
+}
+.mt-7{
+    margin-top: 7px;
+}
+.mt-8{
+    margin-top: 8px;
+}
+.mt-10{
+    margin-top: 10px;
+}
+.mt-17{
+    margin-top: 17px;
+}
+.mt-20{
+    margin-top: 20px;
+}
+.mt-30{
+    margin-top: 30px;
+}
+.mb-2{
+    margin-bottom: 2px;
+}
+.mb-8{
+    margin-bottom: 8px;
+}
+.mb-13{
+    margin-bottom: 13px;
+}
+.mb-16{
+    margin-bottom: 16px;
+}
+.mb-18{
+    margin-bottom: 18px;
+}
+.mb-24{
+    margin-bottom: 24px;
+}
+.mb-30{
+    margin-bottom: 30px;
+}
+.mb-32{
+    margin-bottom: 32px;
+}
+.mb-40{
+    margin-bottom: 40px;
+}
+.mb-56{
+    margin-bottom: 56px;
+}
+.mb-64{
+    margin-bottom: 64px;
+}
+.mb-80{
+    margin-bottom: 80px;
+}
+.mb-100{
+    margin-bottom: 100px;
+}
+
+
+.mr-4{
+    margin-right: 4px;
+}
+.mr-6{
+    margin-right: 6px;
+}
+.mr-8{
+    margin-right: 8px;
+}
+.mr-10{
+    margin-right: 10px;
+}
+.mr-16{
+    margin-right: 16px;
+}
+.mr-20{
+    margin-right: 20px;
+}
+.mr-22{
+    margin-right: 22px;
+}
+.mr-24{
+    margin-right: 24px;
+}
+.mr-26{
+    margin-right: 26px;
+}
+.mr-30{
+    margin-right: 30px;
+}
+.mr-40{
+    margin-right: 40px;
+}
+.mr-50{
+    margin-right: 50px;
+}
+.mr-68{
+    margin-right: 68px;
+}
+.mr-90{
+    margin-right: 90px;
+}
+
+.mt-80{
+    margin-top: 80px;
+}
+.m-t-40{
+    margin-top: 40px;
+}
+.mb-4{
+    margin-bottom: 4px;
+}
+.m-b-20{
+    margin-bottom: 20px;
+}
+.m-b-32{
+    margin-bottom: 32px;
+}
+.m-b-72{
+    margin-bottom: 72px;
+}
+
+.mb-20{
+    margin-bottom: 20px;
+}
+.pb-30{
+    padding-bottom: 30px;
+}
+.border-9 {
+    border: 1px solid #999999;
+}
+.border-bottom-E6E7E9{
+    border-bottom: 1px solid #E6E7E9;
+}
+.b-b-EEEEEE{
+    border-bottom: 1px solid #EEEEEE;
+}
+
+.w-100{
+    width: 100px;
+}
+.w-200{
+    width: 200px;
+}
+.w-10030{
+    width: 30%;
+}
+.w-100100{
+    width: 100%;
+}
+
+
+.b-rad-200{
+    border-radius: 200px;
+}
+.b-rad-100{
+    border-radius: 100px;
+}
+.b-rad-20{
+    border-radius: 20px;
+}
+.b-rad-16{
+    border-radius: 16px;
+}
+.b-rad-8{
+    border-radius: 8px;
+}
+
+.sc-img{
+    width: 40px;
+    height: 40px;
+}

src/components/HelloWorld.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/main.js

@@ -2,8 +2,16 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import './utils/routerEach'
+import 'lib-flexible'
+import './assets/css/commin.css'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css';
+import message from "@/utils/message";
 
 Vue.config.productionTip = false
+Vue.use(ElementUI)
+Vue.use(message)
 
 new Vue({
   router,

src/router/index.js

@@ -1,23 +1,26 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import HomeView from '../views/HomeView.vue'
-
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
-    name: 'home',
-    component: HomeView
+    name: 'login',
+    component: () => import('@/views/login/login_index.vue') //路由懒加载
   },
   {
-    path: '/about',
-    name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-  }
+    path: '/goods_list',
+    name: 'goods_list',
+    component: () => import('@/views/goods/goods_list.vue') //路由懒加载
+  },
+  // {
+  //   path: '/about',
+  //   name: 'about',
+  //   // route level code-splitting
+  //   // this generates a separate chunk (about.[hash].js) for this route
+  //   // which is lazy-loaded when the route is visited.
+  //   component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+  // }
 ]
 
 const router = new VueRouter({

src/utils/message.js

@@ -0,0 +1,32 @@
+//引入官方组件
+
+import { Message } from 'element-ui'
+
+// 默认参数
+const defaultOption = {
+    duration: 3000,
+    customClass: 'custom-notification',
+}
+
+const message = {}
+
+const globalMessage = function (type, msg = '', customOption = {}) {
+    return Message({
+        ...Object.assign({}, defaultOption, customOption),
+        type,
+        dangerouslyUseHTMLString: true,
+        message: `<p>${msg}</p>`,
+    })
+}
+
+message.success = function (msg, cpt) {
+    return globalMessage('success', msg, cpt)
+}
+message.error = function (msg, cpt) {
+    return globalMessage('error', msg, cpt)
+}
+message.warning = function (msg, cpt) {
+    return globalMessage('warning', msg, cpt)
+}
+
+export default message

src/utils/request.js

@@ -0,0 +1,85 @@
+import axios from 'axios'
+import { getToken } from '@/utils/setToken.js'
+import { Message, Loading } from 'element-ui'
+const service = axios.create({
+    // baseURL: '/api', //baseURL会自动加在请求地址上
+    timeout: 5000
+})
+// 添加请求拦截器
+service.interceptors.request.use((config) => {
+    // 在请求之前做些什么（获取并设置token）
+    if (config.isLoading) {
+        startLoading()
+    }
+    config.headers['token'] = getToken('token')
+    return config
+}, (error) => {
+    return Promise.reject(error)
+})
+
+// 添加响应拦截器
+service.interceptors.response.use((response) => {
+    // 在响应数据做些什么（获取并设置token）
+    if (response.config.isLoading) {
+        endLoading();
+    }
+    const res = response.data
+    if (res.code == 1) {
+        return res
+    } else if( res.code === 0) {
+        // Message({
+        //     message: res.msg || 'Error',type: 'error',duration: 5 * 1000
+        // })
+    } else if (res.code === 401) {
+        localStorage.clear()
+        Message({
+            message: '登录信息过期，请重新登录',type: 'error',duration: 3 * 1000,
+            onClose: () => {
+                window.location.href = '/'
+            }
+        })
+    } else if (res.code === 402) {
+        Message({
+            message: '暂无权限访问或操作该页面',type: 'error',duration: 3 * 1000,
+        })
+    }
+    return res
+}, (error) => {
+    Message({
+        message: '系统错误',
+        type: 'error',
+        duration: 3 * 1000
+    })
+    endLoading();
+    return Promise.reject(error)
+})
+
+let loading
+function startLoading() {
+    loading = Loading.service({
+        lock: true,
+        text: '加载中',
+        background: 'rgba(0, 0, 0, 0.7)'
+    })
+}
+function endLoading() {
+    loading.close()
+}
+const request = (url, method = 'get', data, isLoading = false) => {
+    const config = {}
+    if (data) {
+        if (method === 'get') {
+            config.params = data
+        } else {
+            config.data = data
+        }
+    }
+
+    return service({
+        url,
+        method,
+        isLoading,
+        ...config
+    })
+}
+export default request

src/utils/routerEach.js

@@ -0,0 +1,32 @@
+import router from '../router/index.js'
+
+// const routeList = router.options.routes[0].children
+
+
+const whiteList = ['/']
+router.beforeEach((to, from, next) => {
+  let userToken = window.localStorage.getItem('token')
+  if (userToken) {
+    // 如果用户已登录，并且跳转到登录页，则重定向到首页
+    // if (to.path === '/login') {
+    //   next({ path: '/' })
+    // } else {
+    //   // 判断用户是否有权限访问该页面
+    //   const hasPermission = store.getters.hasPermission
+    //   if (hasPermission) {
+    //     next()
+    //   } else {
+    //     // 如果没有权限，则跳转到 403 页面
+    //     next({ path: '/403' })
+    //   }
+    // }
+    next()
+  } else {
+    // 如果用户未登录，则判断是否在白名单中，如果在白名单中，则直接进入，否则重定向到登录页
+    if (whiteList.indexOf(to.path) !== -1) {
+      next()
+    } else {
+      next('/')
+    }
+  }
+})

src/utils/setToken.js

@@ -0,0 +1,12 @@
+// 设置
+export function setToken(tokenKey, token) {
+    return localStorage.setItem(tokenKey, token)
+}
+// 获取
+export function getToken(tokenKey) {
+    return localStorage.getItem(tokenKey)
+}
+// 删除
+export function removeToken(tokenKey) {
+    return localStorage.removeItem(tokenKey)
+}

src/views/AboutView.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/HomeView.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'HomeView',
-  components: {
-    HelloWorld
-  }
-}
-</script>

src/views/goods/goods_list.vue

@@ -0,0 +1,15 @@
+<script>
+export default {
+  name: "goods_list"
+}
+</script>
+
+<template>
+<div>
+hi
+</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/login/login_index.vue

@@ -0,0 +1,104 @@
+<script>
+import {userLogin} from "@/api/member";
+
+export default {
+  components:{},
+  data() {
+    return {
+      formData: {
+        phone: '',
+        password: ''
+      }
+    };
+  },
+  mounted(){},
+  methods: {
+    login(){
+      userLogin(this.formData).then((res) => {
+        if(res.code === 1) {
+          localStorage.setItem('token',res.data.token)
+          localStorage.setItem('m_id',res.data.m_id)
+          this.$router.push('/goods_list')
+        }else {
+          this.$message.error(res.msg)
+        }
+      })
+      // if(!this.formData.phone) {
+      //   this.$message.error('请输入手机号')
+      // } else if(!this.formData.password) {
+      //   this.$message.error('请输入密码')
+      // } else {
+      //   userLogin.then((res) => {
+      //     if(res.code === 1) {
+      //       console.log('成功')
+      //     }else {
+      //       this.$message.error(res.msg)
+      //     }
+      //   })
+      // }
+    }
+  }
+}
+</script>
+
+<template>
+<div class="flex-common-css p-24 box-sizing-border">
+  <div class="fs-24 mb-30 fw-600">
+    嗨，欢迎登录
+  </div>
+  <el-image
+      class="img-box"
+      :src="require('@/assets/img/logo/1.png')"
+      fit="cover"></el-image>
+  <div class="text-align-center fw-600 mb-32">
+    芭芭拉
+  </div>
+  <div class="fs-18 fw-600 mb-16">
+    手机号
+  </div>
+  <div class="b-rad-100 bgc-F6F6F6 input-box align-items-center mb-16">
+    <i class="el-icon-lock fs-16"></i>
+    <el-input type="number" class="el-input-box" v-model="formData.phone" placeholder="请输入手机号"></el-input>
+  </div>
+  <div class="b-rad-100 bgc-F6F6F6 input-box align-items-center mb-13">
+    <i class="el-icon-lock fs-16"></i>
+    <el-input type="password" class="el-input-box" v-model="formData.password" placeholder="请输入登录密码"></el-input>
+  </div>
+  <div class="fs-14 fc-6 mb-40">
+    忘记密码？
+  </div>
+  <div class="b-rad-100 bgc-16BB5D align-items-center flex-justify-center fs-16 fc-f fw-600 login-but mb-30" @click="login">
+    登录
+  </div>
+  <div class="fs-16 fc-9 align-items-center flex-justify-center">
+    没有账号？<p class="fs-16 fc-16BB5D">立即注册</p>
+  </div>
+</div>
+</template>
+
+<style scoped lang="scss">
+.img-box{
+  width: 62px;
+  height: 62px;
+  margin: 0 auto 10px;
+}
+.input-box{
+  height: 46px;
+  line-height: 46px;
+  padding: 0 12px;
+}
+.i-box{
+  width: 16px;
+  height: 16px;
+}
+::v-deep .el-input__inner{
+  background: transparent;
+  border: none;
+  font-size: 16px;
+  color: black;
+}
+.login-but{
+  width: 100%;
+  height: 46px;
+}
+</style>

vue.config.js

@@ -1,4 +1,35 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  devServer: {
+    open: true,  // 自动打开
+    host: 'localhost',
+    proxy: { // 配置代理
+      '/api': {
+        target: 'https://adopted.jhcs888.com/',
+        changeOrigin: true, //允许跨域
+        pathRewrite: {
+          '^/api': 'api'
+        }
+      }
+    }
+  },
+  css: {
+    loaderOptions: {
+      postcss: {
+        postcssOptions: {
+          plugins: [
+            // 自动添加浏览器前缀
+            require('autoprefixer'),
+            // 单位转换插件
+            require('postcss-pxtorem')({
+              rootValue: 37.5, // 根据设计稿调整（设计稿宽度/10）
+              propList: ['*'], // 转换所有属性
+              exclude: /node_modules/ // 排除 node_modules 目录
+            })
+          ]
+        }
+      }
+    }
+  }
 })