Skip to content

O
offical_web
Commit 2c14bd3b by qinjianhui
Options

Merge branch 'dev' into 'master' 

Dev

See merge request !3
parents ae814214 a72043b7
Showing with 938 additions and 228 deletions
README.md
...@@ -618,4 +618,4 @@ erp_vue // ...@@ -618,4 +618,4 @@ erp_vue //
├─ vue.config.js // ├─ vue.config.js //
└─ vue_build.sh // └─ vue_build.sh //
``` ````
\ No newline at end of file \ No newline at end of file
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
...@@ -56,6 +56,8 @@ ...@@ -56,6 +56,8 @@
"less-loader": "^5.0.0", "less-loader": "^5.0.0",
"mockjs": "^1.1.0", "mockjs": "^1.1.0",
"prettier": "^2.2.1", "prettier": "^2.2.1",
"sass": "^1.58.3",
"sass-loader": "^10",
"stylus": "~0.54.7", "stylus": "~0.54.7",
"stylus-loader": "~3.0.2", "stylus-loader": "~3.0.2",
"uglifyjs-webpack-plugin": "~2.2.0", "uglifyjs-webpack-plugin": "~2.2.0",
......
src/assets/banner.jpg
src/assets/banner.jpg

673 KB | W: | H:

src/assets/banner.jpg

142 KB | W: | H:

src/assets/banner.jpg
src/assets/banner.jpg
src/assets/banner.jpg
src/assets/banner.jpg
  • 2-up
  • Swipe
  • Onion skin
src/assets/register.jpg
src/assets/register.jpg

287 KB | W: | H:

src/assets/register.jpg

95.7 KB | W: | H:

src/assets/register.jpg
src/assets/register.jpg
src/assets/register.jpg
src/assets/register.jpg
  • 2-up
  • Swipe
  • Onion skin
src/components/footer.vue
...@@ -30,7 +30,7 @@ export default { ...@@ -30,7 +30,7 @@ export default {
}, },
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.banner_footer { .banner_footer {
color: #fff; color: #fff;
background-color: #20222e; background-color: #20222e;
...@@ -59,4 +59,18 @@ export default { ...@@ -59,4 +59,18 @@ export default {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
@media screen and (max-width: 1100px) {
.banner_footer {
padding: 20px;
.bottom-text {
padding: 0;
}
.bottom-text > span {
margin-left: 0 !important;
line-height: 26px;
}
}
}
</style> </style>
src/components/head.vue
<template> <template>
<header class="header" :class="{ 'no-shadow': !shadow }"> <header class="header" :class="{ 'no-shadow': !shadow }">
<div class="container"> <headerNavMobile v-if="$isMobile" :nav="navbar"></headerNavMobile>
<div class="container" v-else>
<div class="logo"> <div class="logo">
<span class="logo_text"> <span class="logo_text">
<img src="../assets/logo.png" height="40px" /> <img src="../assets/logo.png" height="40px" />
...@@ -33,6 +34,8 @@ ...@@ -33,6 +34,8 @@
</template> </template>
<script> <script>
import headerNavMobile from './headerNavMobile.vue'
export default { export default {
props: { props: {
shadow: { type: Boolean }, shadow: { type: Boolean },
...@@ -40,6 +43,9 @@ export default { ...@@ -40,6 +43,9 @@ export default {
inject: { inject: {
scrollParent: 'scrollParent', scrollParent: 'scrollParent',
}, },
components: {
headerNavMobile,
},
data() { data() {
return { return {
navbar: [ navbar: [
...@@ -80,11 +86,14 @@ export default { ...@@ -80,11 +86,14 @@ export default {
.header { .header {
position: fixed; position: fixed;
z-index: 999; z-index: 999;
/* background: #0089ff; */
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
/* box-shadow: 0 2px 10px 0 rgb(0 39 98 / 66%); */ }
@media screen and (max-width: 1100px) {
.header {
position: sticky;
}
} }
.header.no-shadow { .header.no-shadow {
......
src/components/headerNavMobile.vue 0 → 100644
<template>
<div class="header-nav-mobile">
<div class="header-nav-mobile_trigger">
<a class="nav-icon icon-menu" href="javascript:;" @click="toggleShow"></a>
</div>
<div class="header-nav-mobile_logo">
<img src="../assets/logo.png" height="40px" />
</div>
<div class="header-nav-mobile_login">
<span @click="login">登录</span>
<span style="margin: 0 5px">|</span>
<span @click="register">注册</span>
</div>
<transition name="header-nav-mobile">
<div
v-show="showing"
class="header-nav-mobile-overlay"
@click="toggleShow">
<ul class="header-nav-mobile-items" @click.stop>
<li
v-for="(r, i) in nav"
:key="i"
class="header-nav-mobile-item"
:class="{ active: isRouteActive(r) }">
<router-link
class="header-nav-mobile-link"
:to="r.path"
@click.native="toggleShow">
{{ r.name }}
</router-link>
</li>
</ul>
</div>
</transition>
</div>
</template>
<script>
export default {
name: 'headerNavMobile',
data() {
return {
showing: false,
}
},
props: {
nav: {
type: Array,
},
},
methods: {
toggleShow() {
this.showing = !this.showing
},
isRouteActive(nav) {
const path = this.$route.path
if (nav.path === path) return true
},
login() {
this.$router.push('/login')
},
register() {
this.$router.push('/register')
},
},
}
</script>
<style scoped lang="scss">
.header-nav-mobile {
height: 50px;
background-color: #2f3032;
display: flex;
color: #fff;
align-items: center;
padding: 0 10px;
}
.header-nav-mobile_logo {
flex: 1;
height: 100%;
display: flex;
align-items: center;
}
.header-nav-mobile_logo img {
width: 100%;
object-fit: contain;
}
.header-nav-mobile_login {
flex: 1;
display: flex;
font-size: 12px;
margin-right: 10px;
justify-content: flex-end;
}
.header-nav-mobile_trigger {
flex: 1;
}
.nav-icon {
width: 25px;
height: 25px;
display: block;
}
.icon-menu {
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAcCAYAAAATFf3WAAAAyklEQVRYR+2WMQ6BQRCFvzmHgkaidgI3UEjcQUSBygV0NOIQhIQTcAK1kpM8GcV/gbHJSHb62fn2vZ2ZNUltYAN0yBUvYGmSTsAoF1tDc/4LwNwWJ7W2wbIKGFSgKhgUkKrgTxSU1M+46szs4ZtkDmyjNy2Uv3DAGzAoVCB67N0BJ8Ae0jWMgOm3iyX1AN/JmeJtZs86ZqKWVAWrglEFovn536CkLrDLOAeBmW+SCzCMWlEo/+qAB2BcqED02KMDtoB1xu8WsErfJB+rXD/DrYeGMwAAAABJRU5ErkJggg==);
}
.header-nav-mobile-enter-active,
.header-nav-mobile-leave-active {
transition: 0.3s;
}
.header-nav-mobile-enter,
.header-nav-mobile-leave-to {
transform: translateX(-300px);
}
.header-nav-mobile-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 99999;
}
.header-nav-mobile-items {
box-sizing: border-box;
width: 260px;
height: 100%;
background-color: #000;
margin: 0;
padding: 30px 20px;
}
.header-nav-mobile-item,
.header-nav-mobile-child {
list-style-type: none;
line-height: 50px;
letter-spacing: 4px;
&.active > .header-nav-mobile-link {
color: var(--primary-color);
}
}
.header-nav-mobile-item.active {
.header-nav-mobile-link {
position: relative;
&::after {
position: absolute;
top: 100%;
left: 0;
content: '';
display: block;
width: 80px;
height: 2px;
background-color: var(--primary-color);
}
}
}
.header-nav-mobile-item {
font-size: 16px;
color: #fff;
}
.header-nav-mobile-child {
font-size: 14px;
color: #999;
}
.header-nav-mobile-children {
margin: 0;
padding: 0;
}
.header-nav-mobile-link {
display: block;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
cursor: pointer;
border-bottom: solid 1px #2c2c2c;
}
.header-nav-mobile-item > .header-nav-mobile-link {
display: flex;
.expand-icon {
margin-left: auto;
margin-right: 20px;
}
}
.header-nav-mobile-child > .header-nav-mobile-link {
padding-left: 10px;
&::after {
display: none !important;
}
}
</style>
src/main.js
...@@ -17,6 +17,7 @@ import router from './router' ...@@ -17,6 +17,7 @@ import router from './router'
import './assets/css/root.css' import './assets/css/root.css'
import './assets/css/common.css' import './assets/css/common.css'
import './assets/css/index.css' import './assets/css/index.css'
import './styles/index.scss'
import moment from 'moment' import moment from 'moment'
import { filePath, zImgPath } from './utils/axios' import { filePath, zImgPath } from './utils/axios'
import './mork' import './mork'
...@@ -24,6 +25,12 @@ import _ from 'lodash' ...@@ -24,6 +25,12 @@ import _ from 'lodash'
Vue.config.performance = true Vue.config.performance = true
Vue.config.productionTip = process.env.NODE_ENV !== 'production' Vue.config.productionTip = process.env.NODE_ENV !== 'production'
const isMobile = () => window.innerWidth <= 1100
Vue.util.defineReactive(Vue.prototype, '$isMobile', isMobile())
window.addEventListener('resize', () => {
Vue.prototype.$isMobile = isMobile()
})
// 待优化 // 待优化
Vue.prototype.$moment = moment Vue.prototype.$moment = moment
// 待优化 // 待优化
......
src/styles/index.scss 0 → 100644
:root {
--primary-color:#f19240;
}
\ No newline at end of file
src/views/aboutus/aboutPage.vue
...@@ -139,4 +139,43 @@ export default { ...@@ -139,4 +139,43 @@ export default {
background: url(../../assets/images/banner-icon-04.png); background: url(../../assets/images/banner-icon-04.png);
background-size: 100% 100%; background-size: 100% 100%;
} }
@media screen and (max-width: 1100px) {
.image {
height: 33vw !important;
}
.text h2 {
font-size: 20px !important;
}
.text hr {
width: 80vw !important;
margin: 10px auto !important;
}
.text ul li:not(:last-child) {
margin-right: 20px !important;
}
.text li i {
width: 16px !important;
height: 16px !important;
}
.text li span {
font-size: 12px !important;
line-height: 16px !important;
}
.content-body {
margin-top: 20px;
height: unset;
padding-bottom: 20px;
}
.jomals-description {
width: 100vw;
padding: 0 20px;
font-size: 16px;
}
}
</style> </style>
src/views/demand/demandPage.vue
<template> <template>
<div class="demand-page"> <div class="demand-page">
<div ref="headerBanner" class="header-banner"> <div ref="headerBanner" class="header-banner">
<!-- <div class="image">
<img
src="../../assets/images/function/function.png"
style="width: 100%; height: 100%; object-fit: cover" />
</div> -->
<div class="image"> <div class="image">
<img <img
src="../../assets/images/banner-solution.jpg" src="../../assets/images/banner-solution.jpg"
...@@ -56,7 +51,9 @@ ...@@ -56,7 +51,9 @@
</div> </div>
<div class="t-row-2"> <div class="t-row-2">
<div class="card-inner"> <div class="card-inner">
<div class="card-inner-content"> <div
class="card-inner-content"
:style="$isMobile ? 'flex-direction:column-reverse' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>高效采购生产</h4> <h4>高效采购生产</h4>
...@@ -115,7 +112,9 @@ ...@@ -115,7 +112,9 @@
</div> </div>
<div class="t-row-2"> <div class="t-row-2">
<div class="card-inner"> <div class="card-inner">
<div class="card-inner-content"> <div
class="card-inner-content"
:style="$isMobile ? 'flex-direction:column-reverse' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>订单占用明细</h4> <h4>订单占用明细</h4>
...@@ -174,7 +173,9 @@ ...@@ -174,7 +173,9 @@
</div> </div>
<div class="t-row-2"> <div class="t-row-2">
<div class="card-inner"> <div class="card-inner">
<div class="card-inner-content"> <div
class="card-inner-content"
:style="$isMobile ? 'flex-direction:column-reverse' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>跨部门高效协同合作</h4> <h4>跨部门高效协同合作</h4>
...@@ -229,7 +230,9 @@ ...@@ -229,7 +230,9 @@
</div> </div>
<div class="t-row-2"> <div class="t-row-2">
<div class="card-inner"> <div class="card-inner">
<div class="card-inner-content"> <div
class="card-inner-content"
:style="$isMobile ? 'flex-direction:column-reverse' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>一体化管理</h4> <h4>一体化管理</h4>
...@@ -259,7 +262,9 @@ ...@@ -259,7 +262,9 @@
</div> </div>
<div class="t-row-4"> <div class="t-row-4">
<div class="card-inner"> <div class="card-inner">
<div class="card-inner-content"> <div
class="card-inner-content"
:style="$isMobile ? 'flex-direction:column-reverse' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>操作日志</h4> <h4>操作日志</h4>
...@@ -295,7 +300,9 @@ ...@@ -295,7 +300,9 @@
</div> </div>
<div class="t-row-2"> <div class="t-row-2">
<div class="card-inner"> <div class="card-inner">
<div class="card-inner-content"> <div
class="card-inner-content"
:style="$isMobile ? 'flex-direction:column-reverse' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>分批发货</h4> <h4>分批发货</h4>
...@@ -350,7 +357,9 @@ ...@@ -350,7 +357,9 @@
</div> </div>
<div class="t-row-2"> <div class="t-row-2">
<div class="card-inner"> <div class="card-inner">
<div class="card-inner-content"> <div
class="card-inner-content"
:style="$isMobile ? 'flex-direction:column-reverse' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>打单、验货以及称重一体化进行</h4> <h4>打单、验货以及称重一体化进行</h4>
...@@ -382,7 +391,9 @@ ...@@ -382,7 +391,9 @@
</div> </div>
<div class="t-row-4"> <div class="t-row-4">
<div class="card-inner"> <div class="card-inner">
<div class="card-inner-content"> <div
class="card-inner-content"
:style="$isMobile ? 'flex-direction:column-reverse' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>多站点库存数据打通</h4> <h4>多站点库存数据打通</h4>
...@@ -404,16 +415,24 @@ ...@@ -404,16 +415,24 @@
<img src="../../assets/images/fh/wl.png" /> <img src="../../assets/images/fh/wl.png" />
</div> </div>
<div class="right content-text-wrap"> <div class="right content-text-wrap">
<div class="content-text" style="margin-left: 40px"> <div
class="content-text"
:style="$isMobile ? 'margin-left: 0' : 'margin-left: 40px'">
<h4 <h4
style=" :style="`
font-size: 32px; ${$isMobile ? 'font-size: 22px' : 'font-size: 32px'}
font-weight: 100; font-weight: 100;
margin: 0; margin: 0;
"> `">
物流管理 物流管理
</h4> </h4>
<h5 style="font-size: 14px; margin-bottom: 16px; margin-top: 6px; font-weight: 100;"> <h5
style="
font-size: 14px;
margin-bottom: 16px;
margin-top: 6px;
font-weight: 100;
">
智能推荐优势物流商，物流轨迹实时查询 智能推荐优势物流商，物流轨迹实时查询
</h5> </h5>
<div class="text-des"> <div class="text-des">
...@@ -452,7 +471,9 @@ ...@@ -452,7 +471,9 @@
</div> </div>
<div class="t-row-2"> <div class="t-row-2">
<div class="card-inner"> <div class="card-inner">
<div class="card-inner-content"> <div
class="card-inner-content"
:style="$isMobile ? 'flex-direction:column-reverse' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>跟踪号</h4> <h4>跟踪号</h4>
...@@ -518,6 +539,32 @@ export default { ...@@ -518,6 +539,32 @@ export default {
methods: { methods: {
onScroll() { onScroll() {
const top = this.scrollParent().scrollTop const top = this.scrollParent().scrollTop
if (this.$isMobile) {
if (top >= this.$refs.headerBanner.offsetHeight - 30) {
this.$refs.feature.style.position = 'fixed'
this.$refs.feature.style.top = '50px'
this.$refs.feature.style.left = '0'
this.$refs.feature.style.right = '0'
this.$refs.feature.style.height = '40px'
this.$refs.feature.style.zIndex = '100'
} else {
this.$refs.feature.style.position = ''
this.$refs.feature.style.top = ''
this.$refs.feature.style.left = ''
this.$refs.feature.style.right = ''
this.$refs.feature.style.height = ''
this.$refs.feature.style.zIndex = ''
}
return
}
this.$refs.feature.style.position = ''
this.$refs.feature.style.top = ''
this.$refs.feature.style.left = ''
this.$refs.feature.style.right = ''
this.$refs.feature.style.height = ''
this.$refs.feature.style.zIndex = ''
if (top >= this.$refs.headerBanner.offsetHeight - 60) { if (top >= this.$refs.headerBanner.offsetHeight - 60) {
this.$refs.feature.classList.add('feature-scrolling') this.$refs.feature.classList.add('feature-scrolling')
} else { } else {
...@@ -526,15 +573,16 @@ export default { ...@@ -526,15 +573,16 @@ export default {
}, },
onChangePane(index) { onChangePane(index) {
this.active = index this.active = index
if (this.$isMobile) return
this.scrollParent().scrollTo({ this.scrollParent().scrollTo({
behavior: 'smooth', behavior: 'smooth',
top: this.$refs.headerBanner.offsetHeight - 60, top: this.$refs.headerBanner.offsetHeight - 0,
}) })
}, },
}, },
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.header-banner { .header-banner {
position: relative; position: relative;
} }
...@@ -699,4 +747,98 @@ export default { ...@@ -699,4 +747,98 @@ export default {
.card-inner-content .content-text .text-des p { .card-inner-content .content-text .text-des p {
margin-bottom: 12px; margin-bottom: 12px;
} }
@media screen and (max-width: 1100px) {
.text {
top: 20px !important;
left: 20px !important;
right: 20px !important;
}
.text h2 {
font-size: 20px !important;
margin-bottom: 10px !important;
}
.text p {
font-size: 12px !important;
}
.feature-list {
width: unset;
overflow-x: auto;
font-size: 14px;
transform: unset;
position: unset;
border-radius: 0;
transition: none;
}
.feature-item {
padding: 10px;
white-space: nowrap;
flex-shrink: 0;
}
.card-inner {
width: 100vw;
h3 {
font-size: 24px !important;
}
h4 {
font-size: 14px;
margin-bottom: 40px;
}
}
.card-inner-content {
flex-direction: column;
padding: 0 20px;
align-items: flex-start;
}
.t-row-1 {
padding-top: 40px;
padding-bottom: 50px;
}
.content-text-wrap {
margin-top: 20px;
}
.card-inner-content .content-text h4 {
line-height: 28px;
font-size: 22px;
text-align: left !important;
}
.card-inner-content .content-text p {
margin-bottom: 0px;
line-height: 12px;
font-size: 12px;
text-align: left !important;
}
.t-row-2 .t2 {
width: 100px;
left: 20px;
top: 80px;
}
.t-row-2 .t3 {
width: 70px;
left: 240px;
top: 75px;
}
.t-row-2 {
padding: 40px 0;
}
.t-row-3 {
padding: 40px 0;
}
}
</style> </style>
src/views/function/functionPage.vue
...@@ -30,9 +30,9 @@ ...@@ -30,9 +30,9 @@
</div> </div>
<div class="right content-text-wrap"> <div class="right content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4 style="text-align: center">图文定制</h4> <h4 :style="$isMobile ? 'text-align:left' : 'text-align: center'">图文定制</h4>
<div class="text-des"> <div class="text-des">
<p style="text-align: center"> <p :style="$isMobile ? 'text-align:left;font-size:14px' : 'text-align: center'">
支持客户图文定制，自动抓取客户设计的成品图和设计图 支持客户图文定制，自动抓取客户设计的成品图和设计图
</p> </p>
</div> </div>
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
</div> </div>
<div class="t-row-2"> <div class="t-row-2">
<div class="card-inner"> <div class="card-inner">
<div class="card-inner-content"> <div class="card-inner-content" :style="$isMobile ? 'flex-direction: column-reverse;align-items: flex-start;' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>订单流程</h4> <h4>订单流程</h4>
...@@ -66,9 +66,9 @@ ...@@ -66,9 +66,9 @@
</div> </div>
<div class="right content-text-wrap"> <div class="right content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4 style="text-align: center">方便快捷出单、装箱</h4> <h4 :style="$isMobile ? 'text-align:left' : 'text-align: center'">方便快捷出单、装箱</h4>
<div class="text-des"> <div class="text-des">
<p style="text-align: center"> <p :style="$isMobile ? 'text-align:left;font-size:14px' : 'text-align: center'">
生产完成扫码，单件直接出面单，多件放入周转箱等待配齐 生产完成扫码，单件直接出面单，多件放入周转箱等待配齐
</p> </p>
</div> </div>
...@@ -91,8 +91,8 @@ ...@@ -91,8 +91,8 @@
</div> </div>
<div class="right content-text-wrap"> <div class="right content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4 style="text-align: center">一键创建生产单</h4> <h4 :style="$isMobile ? 'text-align:left' : 'text-align: center'">一键创建生产单</h4>
<div class="text-des text-des-2" style="margin-left:0"> <div class="text-des text-des-2" style="margin-left: 0">
<p style="text-align: center"> <p style="text-align: center">
操作简单明了，一健创建生产单 操作简单明了，一健创建生产单
</p> </p>
...@@ -104,11 +104,11 @@ ...@@ -104,11 +104,11 @@
</div> </div>
<div class="t-row-2"> <div class="t-row-2">
<div class="card-inner"> <div class="card-inner">
<div class="card-inner-content"> <div class="card-inner-content" :style="$isMobile ? 'flex-direction: column-reverse' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>批量发货一步到位</h4> <h4>批量发货一步到位</h4>
<div class="text-des" style="margin-left:0"> <div class="text-des" style="margin-left: 0">
<p>分配供应商，打印生产单，拣胚贴码</p> <p>分配供应商，打印生产单，拣胚贴码</p>
<p>工厂下载生产图进行压烫</p> <p>工厂下载生产图进行压烫</p>
<p>扫码验货进行生产完成，批量发货</p> <p>扫码验货进行生产完成，批量发货</p>
...@@ -135,7 +135,7 @@ ...@@ -135,7 +135,7 @@
</div> </div>
<div class="right content-text-wrap"> <div class="right content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4 style="text-align: center"> <h4 :style="$isMobile ? 'text-align:left' : 'text-align: center'">
根据库存和销量，自动下单给供应商 根据库存和销量，自动下单给供应商
</h4> </h4>
<div class="text-des"> <div class="text-des">
...@@ -160,22 +160,20 @@ ...@@ -160,22 +160,20 @@
<h3 style="text-align: center; font-size: 32px; font-weight: 100"> <h3 style="text-align: center; font-size: 32px; font-weight: 100">
精准可视化决策系统 精准可视化决策系统
</h3> </h3>
<h4 style="text-align: center">实时统计报表数据，洞察业务数据变化</h4> <h4 style="text-align: center">
<div class="card-inner-content"> 实时统计报表数据，洞察业务数据变化
</h4>
<div class="card-inner-content" :style="$isMobile ? 'flex-direction: column-reverse' : ''">
<div class="left"> <div class="left">
<div class="content-text"> <div class="content-text">
<h4> <h4>精准高效决策</h4>
精准高效决策
</h4>
<div class="text-des" style="margin-left: 0"> <div class="text-des" style="margin-left: 0">
<p> <p>订单处理、店铺发货报表数据分析，业务情况了如指掌</p>
订单处理、店铺发货报表数据分析，业务情况了如指掌
</p>
<p>产品销售报表数据分析，让公司管理有数据可循</p> <p>产品销售报表数据分析，让公司管理有数据可循</p>
<p>利润统计、开发业绩统计报表分析，更懂您的利润</p>
<p> <p>
利润统计、开发业绩统计报表分析，更懂您的利润 物流费用和物流状态报表数据分析，为降低产品成本提供依据
</p> </p>
<p>物流费用和物流状态报表数据分析，为降低产品成本提供依据</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -195,7 +193,7 @@ export default { ...@@ -195,7 +193,7 @@ export default {
name: 'functionPage', name: 'functionPage',
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.header-banner { .header-banner {
position: relative; position: relative;
} }
...@@ -385,4 +383,66 @@ export default { ...@@ -385,4 +383,66 @@ export default {
.text-des-2 { .text-des-2 {
margin-left: 0; margin-left: 0;
} }
</style>
\ No newline at end of file @media screen and (max-width: 1100px) {
.card-inner {
width: 100%;
padding: 0 20px;
}
.card-inner-content {
flex-direction: column;
align-items: flex-start;
}
.text {
top: 20px;
left: 20px;
right: 20px;
h2 {
font-size: 20px;
}
p {
font-size: 12px;
}
}
.t-row-1 {
padding-top: 30px;
padding-bottom: 40px;
}
.card-inner h3 {
font-size: 24px !important;
}
.card-inner h4 {
margin-bottom: 20px;
}
.card-inner-content .content-text h4 {
font-size: 22px;
line-height: 30px;
}
.t-row-2,
.t-row-4,
.t-row-3 {
padding: 30px 0;
}
.content-text {
margin-top: 40px;
}
.text-des {
margin-left: 0;
}
.text-des p {
margin-bottom: 0;
font-size: 14px;
}
}
</style>
src/views/home.vue
...@@ -34,27 +34,6 @@ export default { ...@@ -34,27 +34,6 @@ export default {
this.$el.removeEventListener('scroll', this.onScroll) this.$el.removeEventListener('scroll', this.onScroll)
}, },
methods: { methods: {
submitForm(e) {
e.preventDefault()
this.$refs.ruleForm.validate((valid) => {
if (valid) {
const hash = md5.create()
hash.update(this.ruleForm.password)
const passwordHash = hash.hex()
let url = `business/user/login`
post(url, {
email: this.ruleForm.email,
password: passwordHash,
}).then((res) => {
if (res.code === 200) {
this.ruleForm = {}
this.$router.push('/contact')
}
})
}
})
},
onScroll() { onScroll() {
const top = this.$el.scrollTop const top = this.$el.scrollTop
if (top === 0) { if (top === 0) {
......
src/views/homePage/index.vue
...@@ -4,15 +4,24 @@ ...@@ -4,15 +4,24 @@
<el-carousel <el-carousel
class="banner-images-inner" class="banner-images-inner"
:interval="5000" :interval="5000"
height="33.333vw"> arrow="always"
:height="$isMobile ? '40vw' : '33.333vw'">
<el-carousel-item v-for="(item, index) in bannerImages" :key="index"> <el-carousel-item v-for="(item, index) in bannerImages" :key="index">
<img class="images" :src="item.image" style="width: 100vw" /> <img
class="images"
:src="item.image"
style="width: 100vw; height: 100%; object-fit: cover" />
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
<product-intro /> <product-intro />
<div class="docking-platform"> <div class="docking-platform">
<h2 style="text-align: center; padding: 20px">对接平台</h2> <h2
:style="`text-align: center; padding: 20px; font-size: ${
$isMobile ? '18px' : '24px'
}`">
对接平台
</h2>
<div class="platforms"> <div class="platforms">
<div class="platform-item"><img src="../../assets/logo1.jpg" /></div> <div class="platform-item"><img src="../../assets/logo1.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo2.jpg" /></div> <div class="platform-item"><img src="../../assets/logo2.jpg" /></div>
...@@ -92,13 +101,25 @@ export default { ...@@ -92,13 +101,25 @@ export default {
@media screen and (max-width: 1440px) { @media screen and (max-width: 1440px) {
.platforms { .platforms {
grid-template-columns: repeat(9, 1fr); grid-template-columns: repeat(6, 1fr);
} }
} }
@media screen and (max-width: 1000px) { @media screen and (max-width: 1100px) {
.docking-platform {
padding: 0 20px 40px;
}
.platforms { .platforms {
grid-template-columns: repeat(6, 1fr); grid-template-columns: repeat(3, 1fr);
}
.platform-item {
padding: 10px !important;
}
.home-page::v-deep .el-carousel__indicators {
display: none;
} }
} }
......
src/views/login.vue
<template> <template>
<div> <div class="login-page">
<div class="login_bg"> <div class="login_bg">
<div class="logo"> <div class="logo">
<div> <a href="/">
<a href="/"> <span class="logo_text">
<span class="logo_text"> <img src="../assets/logo1.png" height="40px" v-if="$isMobile" />
<img src="../assets/logo.png" height="40px" /> <img src="../assets/logo.png" height="40px" v-else />
</span> </span>
</a> </a>
</div>
<div class="banner_text">
<div>智能化订单处理</div>
<div style="margin-left: 20px">数字化供采平台</div>
<div style="margin-left: 20px">多维度数据分析</div>
</div>
</div> </div>
</div>
<div class="login_content"> <div :class="$isMobile ? 'login-mobile' : ''">
<h2 style="text-align: center; font-weight: 400">用户登录</h2> <div :class="$isMobile ? 'login-content-mobile' : 'login_content'">
<h2
style="
text-align: center;
font-weight: 400;
color: #4a4c6d;
margin-bottom: 40px;
">
欢迎登录
</h2>
<el-form <el-form
size="medium" size="medium"
:model="ruleForm" :model="ruleForm"
...@@ -45,21 +48,22 @@ ...@@ -45,21 +48,22 @@
:class="{ eyes: true, open: !showPwd, close: showPwd }"></i> :class="{ eyes: true, open: !showPwd, close: showPwd }"></i>
</el-input> </el-input>
</el-form-item> </el-form-item>
<!-- <div class="forget-password"> <div class="forget-password">
<span style="cursor: pointer" @click="forgetPassword"> <span style="cursor: pointer" @click="forgetPassword">
忘记密码 忘记密码?
</span> </span>
</div> --> </div>
<div style="text-align: center"> <div style="text-align: center">
<button class="login-btn" @click="submitForm">登录</button> <button class="login-btn" @click="submitForm">登录</button>
</div> </div>
<div style="margin-top: 20px; font-size: 14px; text-align: center"> <div style="margin-top: 40px; font-size: 14px; text-align: center">
还没有账号？ 还没有账号？
<router-link class="link" to="register">马上注册</router-link> <router-link class="link" to="register">马上注册</router-link>
</div> </div>
</el-form> </el-form>
</div> </div>
</div> </div>
<div <div
class="modal" class="modal"
:style="isShowModal ? 'display: block' : 'display: none'"> :style="isShowModal ? 'display: block' : 'display: none'">
...@@ -69,7 +73,7 @@ ...@@ -69,7 +73,7 @@
<el-form-item <el-form-item
prop="email" prop="email"
label="" label=""
:rules="[{ required: true, message: '请输入邮箱' }]"> :rules="[{ required: true, message: '请输入邮箱', type: 'email' }]">
<el-input <el-input
v-model="forgetForm.email" v-model="forgetForm.email"
prefix-icon="el-icon-postcard" prefix-icon="el-icon-postcard"
...@@ -102,27 +106,52 @@ ...@@ -102,27 +106,52 @@
</div> </div>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
prop="newPassword" prop="password"
:rules="[{ required: true, message: '请输入新密码' }]"> :rules="[{ required: true, message: '请输入新密码' }]">
<el-input <el-input
v-model="forgetForm.newPassword" v-model="forgetForm.password"
placeholder="请输入新密码" placeholder="请输入新密码"
clearable :type="showNewPwd ? 'text' : 'password'"
prefix-icon="el-icon-lock" prefix-icon="el-icon-lock"
style="background-color: #fff" /> style="background-color: #fff">
<i
@click="showNewPwd = !showNewPwd"
slot="suffix"
:class="{
eyes: true,
open: !showNewPwd,
close: showNewPwd,
}"></i>
</el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
prop="confirmNewPassword" prop="confirmNewPassword"
:rules="[{ required: true, message: '请再次输入新密码' }]"> :rules="[
{
validator: validatePass,
trigger: 'blur',
},
]">
<el-input <el-input
v-model="forgetForm.confirmNewPassword" v-model="forgetForm.confirmNewPassword"
placeholder="请再次输入新密码" placeholder="请再次输入新密码"
clearable :type="showAgNewPwd ? 'text' : 'password'"
prefix-icon="el-icon-lock" prefix-icon="el-icon-lock"
style="background-color: #fff" /> style="background-color: #fff">
<i
@click="showAgNewPwd = !showAgNewPwd"
slot="suffix"
:class="{
eyes: true,
open: !showAgNewPwd,
close: showAgNewPwd,
}"></i>
</el-input>
</el-form-item> </el-form-item>
<el-form-item style="margin-bottom: 10px"> <el-form-item style="margin-bottom: 10px">
<el-button class="reset-password" round @click="resetPassword">重置密码</el-button> <el-button class="reset-password" round @click="resetPassword">
重置密码
</el-button>
</el-form-item> </el-form-item>
<div style="font-size: 14px"> <div style="font-size: 14px">
<span>无需重置</span> <span>无需重置</span>
...@@ -133,7 +162,9 @@ ...@@ -133,7 +162,9 @@
</span> </span>
</div> </div>
</el-form> </el-form>
<i class="el-icon-circle-close" @click="isShowModal = false"></i> <i
class="el-icon-circle-close close-icon"
@click="isShowModal = false"></i>
</div> </div>
</div> </div>
</div> </div>
...@@ -147,6 +178,15 @@ export default { ...@@ -147,6 +178,15 @@ export default {
components: {}, components: {},
data() { data() {
return { return {
validatePass: (rule, value, callback) => {
if (!value) {
callback(new Error('请再次输入密码'))
} else if (value !== this.forgetForm.password) {
callback(new Error('两次输入密码不一致'))
} else {
callback()
}
},
isShowModal: false, isShowModal: false,
ruleForm: { ruleForm: {
password: '', password: '',
...@@ -167,6 +207,8 @@ export default { ...@@ -167,6 +207,8 @@ export default {
password: [{ required: true, message: '请输入密码', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
}, },
showPwd: false, showPwd: false,
showNewPwd: false,
showAgNewPwd: false,
} }
}, },
computed: { computed: {
...@@ -204,6 +246,7 @@ export default { ...@@ -204,6 +246,7 @@ export default {
forgetPassword() { forgetPassword() {
this.isShowModal = true this.isShowModal = true
this.forgetForm = {} this.forgetForm = {}
this.codeCountDown = 0
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.forgetForm.clearValidate() this.$refs.forgetForm.clearValidate()
}) })
...@@ -215,6 +258,24 @@ export default { ...@@ -215,6 +258,24 @@ export default {
} catch { } catch {
return return
} }
try {
const hash = md5.create()
hash.update(this.forgetForm.password)
const passwordHash = hash.hex()
post('business/user/restPassword', {
password: passwordHash,
email: this.forgetForm.email,
code: this.forgetForm.code,
}).then((res) => {
if (res.code === 200) {
this.$message.success('密码修改成功')
this.isShowModal = false
}
})
} catch (e) {
console.error(e)
}
}, },
submitForm(e) { submitForm(e) {
e.preventDefault() e.preventDefault()
...@@ -241,6 +302,28 @@ export default { ...@@ -241,6 +302,28 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
.login-mobile {
margin: 20px;
border-radius: 6px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
background-color: #fff;
top: 50%;
left: 0;
right: 0;
position: absolute;
transform: translateY(-50%);
}
.login-content-mobile {
padding: 20px;
}
.login-page {
position: relative;
width: 100%;
height: 100vh;
image-rendering: -webkit-optimize-contrast;
background: url(../assets/banner.jpg) left / cover no-repeat;
}
.reset-password { .reset-password {
width: 100%; width: 100%;
background-image: linear-gradient( background-image: linear-gradient(
...@@ -251,6 +334,16 @@ export default { ...@@ -251,6 +334,16 @@ export default {
); );
color: #fff; color: #fff;
} }
.login_form::v-deep .el-form-item {
margin-bottom: 40px;
}
.login_form::v-deep .el-input__inner {
height: 42px;
line-height: 42px;
}
.get-code-button:disabled:hover { .get-code-button:disabled:hover {
background-color: #d0d2d8; background-color: #d0d2d8;
color: #666; color: #666;
...@@ -297,7 +390,7 @@ export default { ...@@ -297,7 +390,7 @@ export default {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.forget-form i { .forget-form .close-icon {
position: fixed; position: fixed;
top: -30px; top: -30px;
right: -28px; right: -28px;
...@@ -306,11 +399,8 @@ export default { ...@@ -306,11 +399,8 @@ export default {
cursor: pointer; cursor: pointer;
} }
.logo { .logo {
position: absolute;
display: flex; display: flex;
align-items: center; align-items: center;
left: 4%;
top: 7%;
} }
.logo_text { .logo_text {
display: inline-block; display: inline-block;
...@@ -323,16 +413,12 @@ export default { ...@@ -323,16 +413,12 @@ export default {
margin-left: 40px; margin-left: 40px;
} }
.login_bg { .login_bg {
width: 100%; position: absolute;
height: 100vh; left: 7%;
position: relative; top: 7%;
image-rendering: -webkit-optimize-contrast;
background: url(../assets/banner.jpg) left / cover no-repeat;
background-color: #b3e2fe;
background-size: 50% auto;
} }
.login_content { .login_content {
padding: 30px; padding: 70px 40px;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
position: absolute; position: absolute;
top: 50%; top: 50%;
...@@ -344,13 +430,12 @@ export default { ...@@ -344,13 +430,12 @@ export default {
} }
.login_form { .login_form {
padding: 24px 0;
width: 330px; width: 330px;
border-radius: 6px; border-radius: 6px;
} }
.forget-password { .forget-password {
margin-bottom: 16px; margin-bottom: 40px;
text-align: right; text-align: right;
font-size: 14px; font-size: 14px;
color: #006eff; color: #006eff;
...@@ -358,13 +443,13 @@ export default { ...@@ -358,13 +443,13 @@ export default {
.login-btn { .login-btn {
width: 100%; width: 100%;
height: 38px; height: 42px;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
background: #006eff; background: #006eff;
box-shadow: 0 4px 8px 0 rgb(26 90 216 / 32%); box-shadow: 0 4px 8px 0 rgb(26 90 216 / 32%);
border-radius: 4px; border-radius: 4px;
font-size: 16px; font-size: 18px;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
} }
...@@ -383,4 +468,35 @@ export default { ...@@ -383,4 +468,35 @@ export default {
.eyes.close { .eyes.close {
background: url('../assets/eyes-closed.png') no-repeat center / cover; background: url('../assets/eyes-closed.png') no-repeat center / cover;
} }
.login-page::v-deep .el-input__inner::-ms-reveal,
.login-page::v-deep .el-input__inner::-ms-clear {
display: none;
}
@media screen and (max-width: 1100px) {
.login-page {
background: none;
background-color: #edf0f5;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.login_bg {
position: unset;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.login_form {
width: unset;
border-radius: 0;
}
.forget-form {
width: 84vw;
padding: 20px;
}
}
</style> </style>
src/views/price/pricePage.vue
...@@ -66,7 +66,15 @@ export default { ...@@ -66,7 +66,15 @@ export default {
class: 'h-2x', class: 'h-2x',
valueClass: 'fs-20 fw-b', valueClass: 'fs-20 fw-b',
}, },
{ label: '收费方式', value: 'chargeType' }, {
label: '收费方式',
value: (d) => {
d = d.chargeType
if (Array.isArray(d)) return d.map((e) => `<p>${e}</p>`).join('')
return d
},
valueClass: 'list',
},
{ {
label: '价格', label: '价格',
value: (d) => { value: (d) => {
...@@ -105,7 +113,7 @@ export default { ...@@ -105,7 +113,7 @@ export default {
{ {
name: '试用版', name: '试用版',
chargeType: '免费3个月或3000单', // 收费方式 chargeType: ['免费3个月', '或3000单'], // 收费方式
price: 0, // 价格 price: 0, // 价格
accountsCount: 10, // 账号数量 accountsCount: 10, // 账号数量
rechargeAmount: '赠送', // 充值金额 rechargeAmount: '赠送', // 充值金额
...@@ -224,6 +232,9 @@ export default { ...@@ -224,6 +232,9 @@ export default {
if (typeof value === 'boolean') { if (typeof value === 'boolean') {
return `<span class="${value ? 'yes' : 'no'}"></span>` return `<span class="${value ? 'yes' : 'no'}"></span>`
} }
if (typeof value === 'number') {
value = `${value}`
}
if (typeof value === 'string') { if (typeof value === 'string') {
value = value.replaceAll( value = value.replaceAll(
/((\d+)(\.\d+)?)/g, /((\d+)(\.\d+)?)/g,
...@@ -327,12 +338,13 @@ export default { ...@@ -327,12 +338,13 @@ export default {
user-select: none; user-select: none;
overflow: hidden; overflow: hidden;
font-size: 16px; font-size: 16px;
--item-height: 40px;
} }
.price-column, .price-column,
.price-value { .price-value {
box-sizing: border-box; box-sizing: border-box;
height: 40px; height: var(--item-height);
padding: 0 30px; padding: 0 30px;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -365,8 +377,7 @@ export default { ...@@ -365,8 +377,7 @@ export default {
.price-item:hover { .price-item:hover {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
border-radius: 8px; border-radius: 8px;
background-color: #0085fc; background-color: #a0cfff;
color: #fff;
border-right: none; border-right: none;
} }
...@@ -374,7 +385,7 @@ export default { ...@@ -374,7 +385,7 @@ export default {
border-right: solid 1px #eee; border-right: solid 1px #eee;
} }
</style> </style>
<style> <style scoped lang="scss">
.price-container .fs-20 { .price-container .fs-20 {
font-size: 20px; font-size: 20px;
} }
...@@ -384,16 +395,16 @@ export default { ...@@ -384,16 +395,16 @@ export default {
} }
.price-container .h-2x { .price-container .h-2x {
height: 80px; height: calc(var(--item-height) * 2);
} }
.price-container .h-3x { .price-container .h-3x {
height: 120px; height: calc(var(--item-height) * 3);
} }
.price-container .number { .price-container::v-deep .number {
font-size: 1.2em;
margin: 0 4px; margin: 0 4px;
color: red;
} }
.price-container .list { .price-container .list {
...@@ -420,4 +431,79 @@ export default { ...@@ -420,4 +431,79 @@ export default {
background-size: 100%; background-size: 100%;
background-image: url("data:image/svg+xml,%0A%3Csvg width='23' height='22' viewBox='0 0 23 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.1735 5.25388L17.2461 6.32649C17.5846 6.66499 17.5846 7.21382 17.2461 7.55233L13.7974 11.0004L17.2461 14.4489C17.5846 14.7874 17.5846 15.3363 17.2461 15.6748L16.1735 16.7474C15.835 17.0859 15.2862 17.0859 14.9477 16.7474L11.4983 13.2974L8.05233 16.7461C7.71382 17.0846 7.16499 17.0846 6.82649 16.7461L5.75388 15.6735C5.41537 15.335 5.41537 14.7862 5.75388 14.4477L9.19907 11.0004L5.75388 7.55358C5.41537 7.21507 5.41537 6.66625 5.75388 6.32774L6.82649 5.25513C7.16499 4.91663 7.71382 4.91663 8.05233 5.25513L11.4983 8.70123L14.9477 5.25388C15.2862 4.91537 15.835 4.91537 16.1735 5.25388Z' fill='%23FF4930'/%3E%3C/svg%3E%0A"); background-image: url("data:image/svg+xml,%0A%3Csvg width='23' height='22' viewBox='0 0 23 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.1735 5.25388L17.2461 6.32649C17.5846 6.66499 17.5846 7.21382 17.2461 7.55233L13.7974 11.0004L17.2461 14.4489C17.5846 14.7874 17.5846 15.3363 17.2461 15.6748L16.1735 16.7474C15.835 17.0859 15.2862 17.0859 14.9477 16.7474L11.4983 13.2974L8.05233 16.7461C7.71382 17.0846 7.16499 17.0846 6.82649 16.7461L5.75388 15.6735C5.41537 15.335 5.41537 14.7862 5.75388 14.4477L9.19907 11.0004L5.75388 7.55358C5.41537 7.21507 5.41537 6.66625 5.75388 6.32774L6.82649 5.25513C7.16499 4.91663 7.71382 4.91663 8.05233 5.25513L11.4983 8.70123L14.9477 5.25388C15.2862 4.91537 15.835 4.91537 16.1735 5.25388Z' fill='%23FF4930'/%3E%3C/svg%3E%0A");
} }
@media screen and (max-width: 1100px) {
.image {
height: 33vw !important;
}
.text h2 {
font-size: 20px !important;
}
.text hr {
width: 80vw !important;
margin: 10px auto !important;
}
.text ul li:not(:last-child) {
margin-right: 20px !important;
}
.text li i {
width: 16px !important;
height: 16px !important;
}
.text li span {
font-size: 12px !important;
line-height: 16px !important;
}
.content-body {
padding: 40px 0 !important;
width: 100%;
overflow: hidden;
position: relative;
}
.price-container {
box-shadow: none;
overflow: auto hidden;
--item-height: 50px;
}
.price-columns {
position: sticky;
left: 0;
background-color: #fff;
}
.price-column {
width: 100px;
padding: 10px;
white-space: normal;
border-bottom: solid 1px #eee;
&:first-child {
border-top: solid 1px #eee;
}
}
.price-value {
border-bottom: solid 1px #eee;
padding: 0 10px;
&:first-child {
border-top: solid 1px #eee;
}
&::v-deep > p {
white-space: nowrap;
}
}
.price-item {
padding-bottom: 0;
}
}
</style> </style>
src/views/register.vue
...@@ -3,90 +3,97 @@ ...@@ -3,90 +3,97 @@
<div class="logo"> <div class="logo">
<a href="/"> <a href="/">
<span class="logo_text"> <span class="logo_text">
<img src="../assets/logo.png" height="40px" /> <img src="../assets/logo1.png" height="40px" v-if="$isMobile" />
<img src="../assets/logo.png" height="40px" v-else />
</span> </span>
</a> </a>
</div> </div>
<div>
<div class="login_content"> <div class="login_content">
<h2 style="text-align: center">用户注册</h2> <h2 style="text-align: center; font-weight: 400; color: #4a4c6d">
<el-form 用户注册
size="medium" </h2>
:model="registerForm" <el-form
:rules="rules" size="medium"
ref="registerForm" :model="registerForm"
:inline="true" :rules="rules"
class="login_form"> ref="registerForm"
<el-form-item prop="email" label=""> class="login_form">
<el-input <el-form-item prop="email" label="">
v-model="registerForm.email" <el-input
prefix-icon="el-icon-postcard" v-model="registerForm.email"
style="width: 300px; background: #fff" prefix-icon="el-icon-postcard"
placeholder="请输入邮箱"></el-input> placeholder="请输入邮箱"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code" label=""> <el-form-item prop="code" label="">
<el-input <div style="display: flex; gap: 20px">
v-model="registerForm.code" <div style="flex: 1">
style="width: 180px; background: #fff" <el-input
prefix-icon="el-icon-message" v-model="registerForm.code"
placeholder="请输入验证码"></el-input> prefix-icon="el-icon-message"
<el-button placeholder="请输入验证码"></el-input>
class="get-code-button" </div>
style="width: 112px" <div>
:disabled="getCodeDisabled" <el-button
:class="getCodeDisabled ? 'disabled' : 'code-btn'" class="get-code-button"
@click="verCode"> style="width: 112px"
{{ codeCountDown === 0 ? '获取验证码' : `${codeCountDown}秒` }} :disabled="getCodeDisabled"
</el-button> :class="getCodeDisabled ? 'disabled' : 'code-btn'"
</el-form-item> @click="verCode">
<el-form-item prop="password" label=""> {{
<el-input codeCountDown === 0 ? '获取验证码' : `${codeCountDown}秒`
type="password" }}
v-model="registerForm.password" </el-button>
prefix-icon="el-icon-lock" </div>
style="width: 300px; background: #fff" </div>
placeholder="请输入密码" </el-form-item>
autocomplete="off"></el-input> <el-form-item prop="password" label="">
</el-form-item> <el-input
<el-form-item prop="checkPass" label=""> type="password"
<el-input v-model="registerForm.password"
type="password" prefix-icon="el-icon-lock"
prefix-icon="el-icon-lock" placeholder="请输入密码"
v-model="registerForm.checkPass" autocomplete="off"></el-input>
style="width: 300px; background: #fff" </el-form-item>
placeholder="请再次输入密码" <el-form-item prop="checkPass" label="">
autocomplete="off"></el-input> <el-input
</el-form-item> type="password"
<el-form-item prop="companyName" label=""> prefix-icon="el-icon-lock"
<el-input v-model="registerForm.checkPass"
v-model="registerForm.companyName" placeholder="请再次输入密码"
prefix-icon="el-icon-s-home" autocomplete="off"></el-input>
style="width: 300px; background: #fff" </el-form-item>
placeholder="请输入公司名称"></el-input> <el-form-item prop="companyName" label="">
</el-form-item> <el-input
<el-form-item prop="job" label=""> v-model="registerForm.companyName"
<el-input prefix-icon="el-icon-s-home"
v-model="registerForm.job" placeholder="请输入公司名称"></el-input>
prefix-icon="el-icon-s-order" </el-form-item>
style="width: 300px; background: #fff" <el-form-item prop="job" label="">
placeholder="请输入职务"></el-input> <el-input
</el-form-item> v-model="registerForm.job"
</el-form> prefix-icon="el-icon-s-order"
<div class="agree-terms" :class="agreeAnimate ? 'agree-animate' : ''"> placeholder="请输入职务"></el-input>
<el-checkbox v-model="isRead" label="" :indeterminate="false" /> </el-form-item>
<span class="tos-link"> </el-form>
阅读并同意 <div class="agree-terms" :class="agreeAnimate ? 'agree-animate' : ''">
<a class="link" href="/protocol" target="_blank">九猫ERP条款与协议</a> <el-checkbox v-model="isRead" label="" :indeterminate="false" />
</span> <span class="tos-link">
</div> 阅读并同意
<div style="text-align: center; padding: 0 20px"> <a class="link" href="/protocol" target="_blank">
<button class="register-btn" type="primary" @click="onRegister"> 九猫ERP条款与协议
立即注册 </a>
</button> </span>
</div> </div>
<div style="margin-top: 20px; font-size: 14px; text-align: center"> <div style="text-align: center">
已有账号？ <button class="register-btn" type="primary" @click="onRegister">
<router-link class="link" to="/login">马上登录</router-link> 立即注册
</button>
</div>
<div style="margin-top: 20px; font-size: 14px; text-align: center">
已有账号？
<router-link class="link" to="/login">马上登录</router-link>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -210,18 +217,19 @@ export default { ...@@ -210,18 +217,19 @@ export default {
background: url(../assets/register.jpg) center / cover no-repeat; background: url(../assets/register.jpg) center / cover no-repeat;
} }
.login_bg::v-deep .el-input__inner {
background-color: #fff;
}
.el-form--inline .el-form-item { .el-form--inline .el-form-item {
margin-right: 0px; margin-right: 0px;
} }
.login_content { .login_content {
padding: 18px; padding: 40px;
background: rgba(255, 255, 255, 0.4); background: #fff;
backdrop-filter: blur(10px);
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 75%; left: 70%;
/* height: 600px; */
/* width: 600px; */
border-radius: 6px; border-radius: 6px;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
box-sizing: border-box; box-sizing: border-box;
...@@ -234,16 +242,11 @@ export default { ...@@ -234,16 +242,11 @@ export default {
} }
.login_form { .login_form {
padding: 20px 20px 0px 20px; padding: 20px 0px 0px 0px;
border-radius: 6px;
display: flex;
align-items: center;
flex-direction: column;
} }
.agree-terms { .agree-terms {
margin-bottom: 30px; margin-bottom: 30px;
margin-left: 20px;
} }
.get-code-button:disabled:hover { .get-code-button:disabled:hover {
...@@ -302,8 +305,27 @@ export default { ...@@ -302,8 +305,27 @@ export default {
.logo { .logo {
position: absolute; position: absolute;
top: 60px; top: 7%;
left: 80px; left: 8%;
} }
@media screen and (max-width: 1100px) {
.login_bg {
background: unset;
}
.logo {
position: unset;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.login_content {
position: unset;
transform: unset;
padding: 20px;
}
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment