Skip to content

O
offical_web
Commit b3b59b92 by qinjianhui
Options

feat: 移动端适配

parent 4dbbdab9
Showing with 562 additions and 112 deletions
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/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>登录</span>
<span style="margin: 0 5px">|</span>
<span>注册</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
},
},
}
</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,42 @@ export default { ...@@ -139,4 +139,42 @@ 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: calc(100vh - 33vw - 60px);
}
.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,7 @@ ...@@ -56,7 +51,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' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>高效采购生产</h4> <h4>高效采购生产</h4>
...@@ -98,7 +93,7 @@ ...@@ -98,7 +93,7 @@
<h4 style="text-align: center"> <h4 style="text-align: center">
各仓库库存状况一目了然，解决库存难管理问题 各仓库库存状况一目了然，解决库存难管理问题
</h4> </h4>
<div class="card-inner-content"> <div class="card-inner-content" >
<div class="left"> <div class="left">
<img src="../../assets/images/warehouse/kc.png" /> <img src="../../assets/images/warehouse/kc.png" />
</div> </div>
...@@ -115,7 +110,7 @@ ...@@ -115,7 +110,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' : ''">
<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 +169,7 @@ ...@@ -174,7 +169,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' : ''">
<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 +224,7 @@ ...@@ -229,7 +224,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' : ''">
<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 +254,7 @@ ...@@ -259,7 +254,7 @@
</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 +290,7 @@ ...@@ -295,7 +290,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' : ''">
<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 +345,7 @@ ...@@ -350,7 +345,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' : ''">
<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 +377,7 @@ ...@@ -382,7 +377,7 @@
</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,13 +399,13 @@ ...@@ -404,13 +399,13 @@
<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;">
...@@ -452,7 +447,7 @@ ...@@ -452,7 +447,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' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>跟踪号</h4> <h4>跟踪号</h4>
...@@ -526,15 +521,16 @@ export default { ...@@ -526,15 +521,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 +695,97 @@ export default { ...@@ -699,4 +695,97 @@ 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;
}
.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/price/pricePage.vue
...@@ -374,7 +374,7 @@ export default { ...@@ -374,7 +374,7 @@ export default {
border-right: solid 1px #eee; border-right: solid 1px #eee;
} }
</style> </style>
<style> <style scoped>
.price-container .fs-20 { .price-container .fs-20 {
font-size: 20px; font-size: 20px;
} }
...@@ -420,4 +420,36 @@ export default { ...@@ -420,4 +420,36 @@ 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;
}
}
</style> </style>
src/views/register.vue
...@@ -9,42 +9,46 @@ ...@@ -9,42 +9,46 @@
</div> </div>
<div class="login_content"> <div class="login_content">
<h2 style="text-align: center;font-weight: 400;color: #4a4c6d;">用户注册</h2> <h2 style="text-align: center; font-weight: 400; color: #4a4c6d">
用户注册
</h2>
<el-form <el-form
size="medium" size="medium"
:model="registerForm" :model="registerForm"
:rules="rules" :rules="rules"
ref="registerForm" ref="registerForm"
:inline="true"
class="login_form"> class="login_form">
<el-form-item prop="email" label=""> <el-form-item prop="email" label="">
<el-input <el-input
v-model="registerForm.email" v-model="registerForm.email"
prefix-icon="el-icon-postcard" prefix-icon="el-icon-postcard"
style="width: 300px;"
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;" <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'"
@click="verCode">
{{ codeCountDown === 0 ? '获取验证码' : `${codeCountDown}秒` }}
</el-button>
</div>
</div>
</el-form-item> </el-form-item>
<el-form-item prop="password" label=""> <el-form-item prop="password" label="">
<el-input <el-input
type="password" type="password"
v-model="registerForm.password" v-model="registerForm.password"
prefix-icon="el-icon-lock" prefix-icon="el-icon-lock"
style="width: 300px;"
placeholder="请输入密码" placeholder="请输入密码"
autocomplete="off"></el-input> autocomplete="off"></el-input>
</el-form-item> </el-form-item>
...@@ -53,7 +57,6 @@ ...@@ -53,7 +57,6 @@
type="password" type="password"
prefix-icon="el-icon-lock" prefix-icon="el-icon-lock"
v-model="registerForm.checkPass" v-model="registerForm.checkPass"
style="width: 300px;"
placeholder="请再次输入密码" placeholder="请再次输入密码"
autocomplete="off"></el-input> autocomplete="off"></el-input>
</el-form-item> </el-form-item>
...@@ -61,14 +64,12 @@ ...@@ -61,14 +64,12 @@
<el-input <el-input
v-model="registerForm.companyName" v-model="registerForm.companyName"
prefix-icon="el-icon-s-home" prefix-icon="el-icon-s-home"
style="width: 300px;"
placeholder="请输入公司名称"></el-input> placeholder="请输入公司名称"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="job" label=""> <el-form-item prop="job" label="">
<el-input <el-input
v-model="registerForm.job" v-model="registerForm.job"
prefix-icon="el-icon-s-order" prefix-icon="el-icon-s-order"
style="width: 300px;"
placeholder="请输入职务"></el-input> placeholder="请输入职务"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -79,7 +80,7 @@ ...@@ -79,7 +80,7 @@
<a class="link" href="/protocol" target="_blank">九猫ERP条款与协议</a> <a class="link" href="/protocol" target="_blank">九猫ERP条款与协议</a>
</span> </span>
</div> </div>
<div style="text-align: center; padding: 0 20px"> <div style="text-align: center;">
<button class="register-btn" type="primary" @click="onRegister"> <button class="register-btn" type="primary" @click="onRegister">
立即注册 立即注册
</button> </button>
...@@ -218,14 +219,11 @@ export default { ...@@ -218,14 +219,11 @@ export default {
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;
...@@ -238,16 +236,11 @@ export default { ...@@ -238,16 +236,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 {
...@@ -306,8 +299,7 @@ export default { ...@@ -306,8 +299,7 @@ export default {
.logo { .logo {
position: absolute; position: absolute;
top: 60px; top: 7%;
left: 80px; left: 8%;
} }
</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