Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/americanCont...

gongjinbao

2025-01-08 d026c140cb1ed99abecfd4eeade8036ca2001b98

Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/americanContainer

 package-lock.json

@@ -5140,6 +5140,11 @@
        "randomfill": "^1.0.4"
      }
    },
    "crypto-js": {
      "version": "4.2.0",
      "resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.2.0.tgz",
      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
    },
    "css-color-names": {
      "version": "0.0.4",
<<<<<<< HEAD

 package.json

@@ -12,6 +12,7 @@
    "@tailwindcss/postcss7-compat": "^2.2.17",
    "axios": "^1.5.0",
    "core-js": "^2.6.5",
    "crypto-js": "^4.2.0",
    "element-ui": "^2.15.14",
    "ezuikit-js": "^7.7.10",
    "moment": "^2.29.4",

 src/App.vue

@@ -5,7 +5,8 @@
</template>

<script>

import './utils/app.css'
import './utils/basics.less'
export default {
  name: "app",
  components: {
@@ -23,4 +24,17 @@
};
</script>

<style lang='less'></style>
<style lang='less'>
::-webkit-scrollbar {
  display: none;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: rgb(245, 245, 245);
}
</style>

 src/assets/add.png

 src/assets/delete.png

 src/assets/img/bianji@2x.png

 src/assets/img/loginBg.png

 src/assets/img/logo@2x.png

 src/assets/img/mima@2x.png

 src/assets/img/tuichu@2x.png

 src/assets/img/yanzhengma@2x.png

 src/assets/img/youxiang@2x.png

 src/component/Header.vue

New file
@@ -0,0 +1,69 @@
<template>
    <div class="header_content">
        <div class="color1 fs--24 font-bold">{{ userInfo.companyName }}</div>
        <div class="flex a-center j-between">
            <div @click="userInfoShow = true" class="flex a-center mr--55 shrink0 pointer">
                <div class="mr--24 fs--20 font-bold shrink0 color2">{{ userInfo.userName }}</div>
                <img @click="$emit('edit')" src="../assets/img/bianji@2x.png" class="w--23 h--23" />
            </div>
            <img @click="logOutShow = true" src="../assets/img/tuichu@2x.png" class="w--40 h--40 shrink0 pointer" />
        </div>
        <el-dialog v-if="logOutShow" :visible.sync="logOutShow" :show-close="false" width="518px"
            top="51px"></el-dialog>
        <UserInfoComponent :show="userInfoShow" @close="userInfoShow = false" />
    </div>
</template>

<script>
import UserInfoComponent from '@/component/userInfo.vue'
export default {
    components: {
        UserInfoComponent
    },
    props: {},
    data() {
        return {
            userInfo: JSON.parse(localStorage.getItem('userInfo')),
            logOutShow: false,
            userInfoShow: false
        };
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { },
    methods: {},
};
</script>
<style scoped lang="less">
.header_content {
    width: 100%;
    height: 90px;
    background: #014099;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 35px;
}

.color1 {
    color: #FFFFFF;
}

.color2 {
    color: #EDEDF3;
}

::v-deep .el-dialog {
    border-radius: 8px;

    .el-dialog__header {
        display: none !important;
    }

    .el-dialog__body {
        padding: 0 !important;

    }
}
</style>

 src/component/userInfo.vue

New file
@@ -0,0 +1,189 @@
<template>
    <el-dialog :visible.sync="show" :show-close="false" width="80%" top="51px" :close-on-click-modal="false">
        <div class="content">
            <el-form label-position="left" label-width="105px" :model="form" :rules="rules">
                <div class="title">个人信息</div>
                <div class="company">所属公司：成都喜望软件有限公司</div>
                <el-row :gutter="90" class="companyForm">
                    <el-col :span="6.5">
                        <el-form-item label="姓名:">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6.5"><el-form-item label="手机号:" label-width="120px">
                            <el-input v-model="form.region"></el-input>
                        </el-form-item></el-col>
                    <el-col :span="6.5"><el-form-item label="邮箱:">
                            <el-input v-model="form.type"></el-input>
                        </el-form-item></el-col>
                </el-row>
                <div class="company" style="margin-top: 6px;">其他邮箱
                    <div class="btn"><img src="@/assets/add.png" alt="">新增邮箱</div>
                </div>
                <el-row :gutter="90" class="companyForm">
                    <el-col :span="6.5">
                        <el-form-item label="邮箱:" prop="email">
                            <el-input v-model="form.email"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16"><el-form-item label="备注:" label-width="120px">
                            <div style="display: flex;align-items: center;"><el-input v-model="form.region"></el-input>
                                <img style="width: 19px;height: 21px;cursor: pointer;margin-left: 26px;"
                                    src="@/assets/delete.png" alt="">
                            </div>
                        </el-form-item></el-col>

                </el-row>
                <div class="company" style="margin-top: 6px;">常用收件信息
                    <div class="btn"><img src="@/assets/add.png" alt="">新增收件人</div>
                </div>
                <el-row :gutter="90" class="companyForm">
                    <el-col :span="6.5">
                        <el-form-item label="收件人姓名:">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6.5"><el-form-item label="收件人手机号:" label-width="120px">
                            <el-input v-model="form.region"></el-input>
                        </el-form-item></el-col>
                    <el-col :span="6.5"><el-form-item label="收件人邮箱:">
                            <el-input v-model="form.type"></el-input>
                        </el-form-item></el-col>
                    <el-col :span="20" style="padding-right: 73px;"><el-form-item label="收件人地址:">
                            <el-input v-model="form.type"></el-input>
                        </el-form-item></el-col>
                    <el-col :span="20" style="padding-right: 73px;position: relative;"><el-form-item label="备注:">
                            <div style="display: flex;align-items: center;"><el-input type="textarea" :rows="3"
                                    v-model="form.region"></el-input>
                                <img style="width: 19px;height: 21px;cursor: pointer;position: absolute;right: -175px;"
                                    src="@/assets/delete.png" alt="">
                            </div>
                        </el-form-item></el-col>
                </el-row>
            </el-form>
            <div class="btns">
                <el-button @click="$emit('close')">关闭</el-button>
                <el-button type="primary">保存</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    props: ['show'],
    data() {
        return {
            form: {
                name: '',
                region: '',
                type: '',
                email: ''
            },
            rules: {
                email: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
            }
        };
    },
    watch: {
        show(val) {
            if (val) {
                console.log(this.$store.state.userInfo, '111');
            }
        }
    }
};
</script>

<style lang="less" scoped>
.content {
    .title {
        padding: 31px 0;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        color: #3B3F56;
        line-height: 27px;
    }

    .company {
        font-weight: bold;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #3B3F56;
        line-height: 24px;
        margin-left: 38px;
        padding-right: 50px;

        .btn {
            width: 151px;
            height: 50px;
            border-radius: 4px;
            background: #014099;
            font-size: 16px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            cursor: pointer;

            img {
                width: 20px;
                height: 20px;
                margin-right: 13px;
            }
        }
    }

    .companyForm {
        margin-top: 32px;
        border-bottom: 1px solid rgba(151, 151, 151, 0.12);
        padding-left: 38px;
    }

    .btns {
        display: flex;
        justify-content: center;
        margin-top: 32px;
        padding-bottom: 33px;

        .el-button {
            width: 190px;
            height: 50px;
            font-size: 20px;

        }

        .el-button--primary {
            background-color: #014099;
            border-color: #014099;
        }
    }
}

/deep/ .el-dialog {
    border-radius: 8px;

    .el-dialog__header {
        display: none !important;
    }

    .el-dialog__body {
        padding: 0 !important;

    }
}

/deep/ .el-form {
    .el-form-item__label {
        font-size: 16px;
        color: #3B3F56;
        font-weight: 500;
    }
}
</style>

 src/config/baseurl.js

New file
@@ -0,0 +1,14 @@
const apiConfig = {
    // 开发环境
    development: {
        baseURL: "http://47.108.239.173:2020/00001_api/webhook",
        secretKEY: ''
    },
    // 生产环境
    production: {
        baseURL: "http://47.108.239.173:2020/00001_api/webhook",
        secretKEY: ''
    },
};

export default apiConfig[process.env.NODE_ENV];

 src/layouts/components/AppContent.vue

@@ -1,5 +1,3 @@
<template>
  <div>
    <router-view />
  </div>
</template>

 src/layouts/index.vue

@@ -1,15 +1,6 @@
<template>
  <div style="height: 100%;">
    <!-- 判断是否在空白页打开 -->
    <template v-if="!isOneself">
      <div class="app-wrapper">
      </div>
    </template>
    <!-- 如果在空白页打开则不显示框架 -->
    <template v-else>
      <AppContent />
    </template>
  </div>
<template>
  <router-view />
</template>

<script>
@@ -17,8 +8,6 @@
export default {
  data() {
    return {
      // 默认页面在框架内显示
      isOneself: false,
      // 获取当前页面名称
      nowRouteName: '',
    }
@@ -29,8 +18,6 @@
  mounted() {
    // 设置标题
    this.setNowRouteName(this.$route)
    // 初始化加载一次判断是否在空白页打开
    this.isOneself = this.$route.meta.oneself
  },
  methods: {
    // 获取当前页面标题
@@ -42,8 +29,6 @@
    // 监听route变化
    $route: function (newVal) {
      this.setNowRouteName(newVal)
      // 判断页面是否在空白页打开
      this.isOneself = newVal.meta.oneself
    },
  },
}

 src/router/index.js

@@ -27,12 +27,16 @@
    component: Layouts,
    children: [
      {
        path: "/home",
        meta: {
          title: "首页",
        },
        component: () => import("../view/Home"),
      },
      {
        path: "/login",
        meta: {
          title: "登录",
          oneself: true,
          hide: true,
          privilege: 'login'
        },
        component: () => import("../view/Login"),
      },
@@ -51,9 +55,22 @@
];

const router = new VueRouter({
  mode: "history",
  mode: "hash",
  base: process.env.BASE_URL,
  routes,
});

// 前置路由拦截器
router.beforeEach((to, from, next) => {
  // 没有登录并且要去的页面不是登录页面，强制跳转到登录
  if (!localStorage.getItem('extra') && to.path !== '/login') {
    next('/login');
  } else {
    if (to.path === '/login') {
      localStorage.clear();
    }
    next();
  }
});

export default router;

 src/store/index.js

@@ -4,10 +4,15 @@

const store = new Vuex.Store({
  state: {
    userInfo: {} || JSON.parse(sessionStorage.getItem('userInfo'))
  },
  mutations: {
    SET_USERINFO(state, userInfo) {
      state.userInfo = userInfo
    }
  },
  actions: {

  }
})


 src/utils/basics.less

@@ -1,4 +1,12 @@
each(range(300), {
    .w--@{value} {
        width: (@value * 1px);
    }

    .h--@{value} {
        height: (@value * 1px);
    }

    .fs--@{value} {
        font-size: (@value * 1px);
    }

 src/utils/request.js

@@ -1,4 +1,6 @@
import axios from 'axios'
import CryptoJS from 'crypto-js';
import apiConfig from '@/config/baseurl'

import {
  Message
@@ -6,7 +8,7 @@


const service = axios.create({
  baseURL: `http://192.168.110.34:8081`,
  baseURL: apiConfig.baseURL,
  withCredentials: false, // 当跨域请求时发送cookie
  timeout: 30000, // request timeout
})
@@ -14,7 +16,18 @@
// 请求拦截
service.interceptors.request.use(
  config => {
    config['headers']['Authorization'] = `${localStorage.getItem('token')}`
    const env = process.env.NODE_ENV; //development  production
    let { url } = config;
    if (env === 'production') {
      url = url.replace(/.$/, '0');
      config.url = url;
    }

    const nowTime = Date.now()
    const sign = CryptoJS.HmacSHA1(nowTime, apiConfig.secretKEY).toString(CryptoJS.enc.Base64)

    config['headers']['timestamp'] = nowTime
    config['headers']['sign'] = sign
    if (config.method == 'get') {
      if (!config.params) config.params = {};
      config.params = {
@@ -41,19 +54,19 @@
      return
    }
    const res = response;
    if (res.data.code == 200) {
    if (res.data.status == 0) {
      if (!res.data) {
        return Promise.resolve({})
      }
      return Promise.resolve(res.data)
    } else {
      if (res.data.code == 103 || res.data.code == 401) {
      if (res.data.status == 103 || res.data.status == 401) {
        Message({
          message: res.data.msg || '登录已过期，请重新登录',
          type: 'warning',
          duration: 2000
        })
        window.location.replace('/Login');
        window.location.replace('/login');
        return Promise.reject(res.data)
      }
      Message({

 src/view/Home.vue

New file
@@ -0,0 +1,283 @@
<template>
    <div>
        <Header />
        <UserInfo :show="showUserInfo" @close="showUserInfo = false" />
        <div class="search-box">
            <div class="title-card">
                <div class="title-left">
                    订单列表
                </div>
                <div class="title-right">
                    <span class="order-agress">下单须知</span>
                    <div class="line"></div>
                    <span class="add-ord">添加订单</span>
                </div>
            </div>
            <div class="search-form">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <div class="flex a-center justify-between flex-wrap">
                        <el-form-item label="订单编号：" prop="date" class="unset_m" style="margin-left: 15px">
                            <el-input style="width: 230px;" v-model="searchForm.input" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="集装箱号：" prop="date" class="unset_m">
                            <el-input style="width: 230px;" v-model="searchForm.input" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="提单号：" prop="date" class="unset_m">
                            <el-input style="width: 230px;" v-model="searchForm.input" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="收件人邮箱：" prop="date" class="unset_m">
                            <el-input style="width: 230px;" v-model="searchForm.input" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="订单状态：" prop="date" class="unset_m">
                            <el-select style="width: 230px;" :popper-append-to-body="false" v-model="searchForm.typeId"
                                placeholder="请选择">
                                <el-option v-for="item in options" placeholder="请输入" :key="item.id" :label="item.label"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="收件人地址：" prop="date" class="unset_m1"
                            style="margin-bottom: unset !important;">
                            <el-input style="width: 230px;" v-model="searchForm.input" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="DO文件是否上传：" prop="date" class="unset_m1"
                            style="margin-bottom: unset !important;">
                            <el-select style="width: 230px;" :popper-append-to-body="false" v-model="searchForm.typeId"
                                placeholder="请选择">
                                <el-option v-for="item in option1" placeholder="请输入" :key="item.id" :label="item.label"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="width: 570px;">
                        </el-form-item>
                        <div class="flex a-center">
                            <el-button type="default" class="reset" @click="reset">重置</el-button>
                            <el-button type="primary" class="search">搜索</el-button>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
        <div class="table-box">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column prop="date" label="订单编号" align="center">
                </el-table-column>
                <el-table-column prop="name" label="集装箱号" align="center">
                </el-table-column>
                <el-table-column prop="address" label="提单号" align="center">
                </el-table-column>
                <el-table-column prop="address" label="收件人邮箱" align="center">
                </el-table-column>
                <el-table-column prop="address" label="收件人地址" align="center">
                </el-table-column>
                <el-table-column prop="address" label="预计到达时间" align="center">
                </el-table-column>
                <el-table-column prop="address" label="预计送柜日期" align="center">
                </el-table-column>
                <el-table-column prop="address" label="实际送货日期" align="center">
                </el-table-column>
                <el-table-column prop="address" label="DO文件是否上传" align="center">
                </el-table-column>
                <el-table-column prop="address" label="订单状态" align="center">
                </el-table-column>
                <el-table-column prop="address" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleClick(scope.row)">查看</el-button>
                        <el-button type="text" @click="handleClick(scope.row)">编辑</el-button>
                        <el-button type="text" @click="handleClick(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import Header from '@/component/Header.vue'
export default {
    name: "Home",
    components: {
        Header
    },
    data() {
        return {
            showUserInfo: false,
            searchForm: {

            },
            options: [
                {
                    id: 1,
                    label: '待到港'
                },
                {
                    id: 2,
                    label: '已到港'
                },
                {
                    id: 3,
                    label: '可提柜'
                },
                {
                    id: 4,
                    label: '预约中'
                },
                {
                    id: 5,
                    label: '预约完成'
                },
                {
                    id: 6,
                    label: '送柜中'
                },
                {
                    id: 7,
                    label: '送柜完成'
                },
                {
                    id: 8,
                    label: '反空'
                },
                {
                    id: 9,
                    label: '订单完成'
                },
                {
                    id: 10,
                    label: '已取消'
                }
            ],
            option1: [
                {
                    id: 1,
                    label: '是'
                },
                {
                    id: 2,
                    label: '否'
                }
            ],
        };
    },
    methods: {
        reset() {
            this.searchForm = {}
        }
    }
};
</script>
<style>
html {
    background-color: rgba(237, 237, 243, 1);
}
</style>
<style scoped lang="less">
.search-box {
    background-color: #fff;

    border-radius: 6px;
    min-height: 263px;
    margin-top: 16px;
    margin-left: 35px;
    margin-right: 35px;
    width: calc(100% - 70px);

    .title-card {
        padding: 0 23px;
        display: flex;
        justify-content: space-between;
        height: 75px;
        line-height: 75px;
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: bold;
        font-size: 20px;
        color: #3B3F56;
        border-bottom: 1px solid rgba(151, 151, 151, .25);

        .title-right {
            display: flex;
            align-items: center;

            .order-agress {
                font-family: SourceHanSansCN, SourceHanSansCN;
                font-weight: bold;
                font-size: 20px;
                color: #014099;
                cursor: pointer;
            }

            .line {
                width: 2px;
                height: 20px;
                margin: 0 10px;
                background-color: rgba(1, 64, 153, .8);
            }

            .add-ord {
                font-family: SourceHanSansCN, SourceHanSansCN;
                font-weight: bold;
                font-size: 20px;
                color: #014099;
                cursor: pointer;
            }
        }
    }

    .search-form {
        padding: 23px 23px 32px 17px;

        .reset {
            width: 190px;
            height: 50px;
            background: #FFFFFF;
            border-radius: 4px;
            border: 2px solid #D2D2D2;
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 500;
            font-size: 20px;
            color: rgba(0, 0, 0, .81);
        }

        .search {
            width: 190px;
            height: 50px;
            background: #014099;
            border-radius: 4px;
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 500;
            font-size: 20px;
            color: #FFFFFF;
        }

        ::v-deep {
            .el-form-item__label {
                font-size: 16px;
                color: rgba(59, 63, 86, .8);
            }

            .el-input__inner {
                height: 50px;
                font-size: 16px;
            }

            .el-form-item {
                margin-left: unset;
                margin-right: unset;
                margin-bottom: 32px;
            }



        }
    }
}

.table-box {
    margin-top: 16px;
    margin-left: 35px;
    margin-right: 35px;
    width: calc(100% - 70px);
    border-radius: 6px;
}
</style>

 src/view/Login.vue

@@ -1,23 +1,173 @@
<template>
    <div class="content">
        1
        <div class="login_box">
            <img src="../assets/img/logo@2x.png" class="w--255 h--95 mt--57" />
            <div class="my--33 fs--28 lh--28 font-bold color1">客户登录</div>
            <div class="flex a-center px--14 py--19 text_box">
                <img src="../assets/img/youxiang@2x.png" class="w--20 h--15 mr--25 shrink0" />
                <el-input v-model="account" placeholder="请输入邮箱" />
            </div>
            <div class="flex a-center mt--16 px--14 py--19 text_box">
                <img src="../assets/img/mima@2x.png" class="w--18 h--20 mr--26 shrink0" />
                <el-input show-password v-model="pwd" placeholder="请输入密码" />
            </div>
            <div class="flex a-center mt--16 pl--14 text_box">
                <img src="../assets/img/yanzhengma@2x.png" class="w--18 h--20 mr--26 shrink0" />
                <el-input v-model="code" placeholder="请输入验证码" />
                <div class="code pointer">{{ codeStr }}</div>
            </div>
            <div @click="loginFun" class="mt--53 fs--18 lh--27 font-bold py--18 px--158 br--6 pointer bgcolor1">登录</div>
        </div>
    </div>
</template>

<script>
import { generateVerificationCode } from '@/utils/utils';
import { login } from './login'
import CryptoJS from 'crypto-js';
export default {
    components: {},
    props: {},
    data() {
        return {
            account: 'c106@264ej217.com.cn',
            pwd: '123456',
            code: '',
            codeStr: '',
        };
    },
    computed: {},
    watch: {},
    created() {},
    created() {
        this.codeStr = generateVerificationCode()
    },
    mounted() { },
    methods: {},
    methods: {
        loginFun() {
            if (!this.account) {
                this.$message({
                    message: '请输入邮箱',
                    type: 'warning'
                });
                return
            }
            const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
            if (!emailPattern.test(this.account)) {
                this.$message({
                    message: '请输入有效的邮箱地址',
                    type: 'warning'
                });
                return;
            }
            if (!this.pwd) {
                this.$message({
                    message: '请输入密码',
                    type: 'warning'
                });
                return
            }
            if (!this.code) {
                this.$message({
                    message: '请输入验证码',
                    type: 'warning'
                });
                return
            }
            if (!this.codeStr.match(new RegExp(this.code, "i"))) {
                this.$message({
                    message: '验证码错误',
                    type: 'warning'
                });
                this.codeStr = generateVerificationCode()
                return
            }
            login({
                account: this.account,
                pwd: CryptoJS.HmacMD5(this.pwd, 'password').toString(
                    CryptoJS.enc.Hex,
                ),
                type: 2
            }).then((result) => {
                localStorage.setItem('extra', result.data.extra);
                localStorage.setItem('userInfo', JSON.stringify(result.data));
                this.$store.commit('SET_USERINFO', result.data);
                this.$router.push({ path: '/home' });
            }).catch(() => {
                this.code = ''
                this.codeStr = generateVerificationCode()
            });
        }
    },
};
</script>
<style scoped lang="less">
.bgcolor1 {
    background: #014099;
    color: #FFFFFF;
}

.color1 {
    color: #3B3F56;
}

.content {
    position: relative;
    background-image: url("../assets/img/loginBg.png");
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
}

.login_box {
    position: absolute;
    top: 50%;
    right: 178px;
    transform: translateY(-50%);
    width: 535px;
    height: 612px;
    background: #FFFFFF;
    border-radius: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .text_box {
        width: 352px;
        background: #F9F9F9;
        border-radius: 6px;
        border: 1px solid #DFDFDF;

        .code {
            padding: 19px 0;
            text-align: center;
            flex-shrink: 0;
            width: 80px;
            height: 100%;
            background: #014099;
            border-radius: 6px;
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 16px;
        }
    }


    ::v-deep .el-input {
        .el-input__inner {
            background-color: transparent;
            border: unset;
            padding: 0;
            height: unset;
            line-height: 16px;
        }

        .el-input__inner::placeholder {
            font-size: 16px;
            font-weight: 400;
        }

        .el-input__icon {
            line-height: unset;
        }
    }
}
</style>

 src/view/login.js

New file
@@ -0,0 +1,7 @@
import axios from '@/utils/request';


//登录
export const login = (data) => {
    return axios.post('/zj0FFk5wx4S05X-zj1pJ2B2g2y0Xb-1', data)
}