Skip to content

O
office-web-js
Commit 0d0fc6f0 by qinjianhui
Options

fix: 移动端适配

parent 48fafe41
Showing with 230 additions and 129 deletions
package-lock.json
......@@ -1969,6 +1969,49 @@
"webpack-merge": "^5.7.3",
"webpack-virtual-modules": "^0.4.2",
"whatwg-fetch": "^3.6.2"
},
"dependencies": {
"@vue/vue-loader-v15": {
"version": "npm:vue-loader@15.10.1",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.1.tgz",
"integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
"dev": true,
"requires": {
"@vue/component-compiler-utils": "^3.1.0",
"hash-sum": "^1.0.2",
"loader-utils": "^1.1.0",
"vue-hot-reload-api": "^2.3.0",
"vue-style-loader": "^4.1.0"
},
"dependencies": {
"hash-sum": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
"integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
"dev": true
}
}
},
"json5": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
"dev": true,
"requires": {
"minimist": "^1.2.0"
}
},
"loader-utils": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^1.0.1"
}
}
}
},
"@vue/cli-shared-utils": {
......@@ -2133,47 +2176,6 @@
}
}
},
"@vue/vue-loader-v15": {
"version": "npm:vue-loader@15.10.1",
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
"integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
"dev": true,
"requires": {
"@vue/component-compiler-utils": "^3.1.0",
"hash-sum": "^1.0.2",
"loader-utils": "^1.1.0",
"vue-hot-reload-api": "^2.3.0",
"vue-style-loader": "^4.1.0"
},
"dependencies": {
"hash-sum": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
"integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
"dev": true
},
"json5": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
"dev": true,
"requires": {
"minimist": "^1.2.0"
}
},
"loader-utils": {
"version": "1.4.2",
"resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^1.0.1"
}
}
}
},
"@vue/web-component-wrapper": {
"version": "1.3.0",
"resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
......
src/components/HeaderNavMobile.vue
......@@ -142,7 +142,7 @@ export default {
.header-nav-mobile-items {
box-sizing: border-box;
width: 300px;
width: 260px;
height: 100%;
background-color: #000;
margin: 0;
......
src/views/Home/AboutPage.vue
......@@ -5,21 +5,16 @@
<img src="~@/assets/about/03.jpg" />
</div>
<div class="joshine-history">
<img src="~@/assets/about/01.jpg" />
<div class="joshine-history-wrapper">
<div class="joshine-history-center">
<div class="progress">发展历程</div>
<div class="progress-line"></div>
<div class="history-wrapper">
<div
class="singleHistory"
v-for="(item, index) in history"
:key="index"
>
<div class="timeLine">{{ item.time }}</div>
<div class="description">{{ item.des }}</div>
</div>
</div>
<div class="progress">发展历程</div>
<div class="progress-line"></div>
<div class="history-wrapper">
<div
class="singleHistory"
v-for="(item, index) in history"
:key="index"
>
<div class="timeLine">{{ item.time }}</div>
<div class="description">{{ item.des }}</div>
</div>
</div>
</div>
......@@ -165,44 +160,31 @@ export default {
}
.joshine-history {
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
height: 45vw;
min-height: 45vw;
max-height: 45vw;
position: relative;
}
.joshine-history img {
width: 100%;
height: 100%;
background-color: #222222;
background-image: url(~@/assets/about/01.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center bottom;
padding: 0 5%;
}
.joshine-about-banner img {
width: 100%;
}
.joshine-history-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
margin: 0 auto;
}
.history-wrapper {
flex: 1;
overflow: hidden auto;
padding-bottom: 40px;
}
.joshine-history-center {
width: 80%;
height: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
overflow: hidden;
}
.progress {
font-size: 38px;
font-weight: 500;
......@@ -278,18 +260,48 @@ export default {
display: block;
width: 40px;
height: 40px;
&:not(:last-child) {
margin-right: 8px;
}
}
.slides-switcher-prev {
left: -100px;
left: calc(-10% + 20px);
}
.slides-switcher-next {
transform: rotate(180deg);
right: -100px;
right: calc(-10% + 20px);
}
@media screen and (max-width: 1000px) {
.about-joshine {
font-size: 30px;
white-space: nowrap;
}
.joshine-history {
max-height: unset;
}
.singleHistory {
.timeLine {
font-size: 14px;
}
.description {
font-size: 14px;
}
}
.slides-switcher {
width: 30px;
height: 30px;
}
.slides-switcher-prev {
left: -10%;
}
.slides-switcher-next {
right: -10%;
}
}
</style>
src/views/Home/ColorfulPage.vue
......@@ -20,7 +20,7 @@
<div
v-if="activeCategory"
class="articles-list"
:class="`articles-list-${activeCategory.layout}`"
:class="`articles-list-${$isMobile ? 'grid' : activeCategory.layout}`"
>
<article v-for="(a, i) in articlesList" :key="i" class="article-item">
<div class="article-img">
......@@ -351,4 +351,33 @@ export default {
height: 20px;
margin-right: 8px;
}
@media screen and (max-width: 1000px) {
.articles-area {
width: 90%;
flex-direction: column;
}
.article-categories {
width: auto;
margin-right: 0;
margin-bottom: 20px;
align-self: stretch;
flex-direction: row;
justify-content: center;
}
.article-category {
padding: 10px 22px;
&:not(:last-child) {
border-right: none;
border-bottom: solid 1px #dfdfdf;
}
}
.articles-list-grid {
grid-template-columns: 1fr;
}
}
</style>
src/views/Home/ContactPage.vue
......@@ -66,7 +66,7 @@ export default {
data() {
return {
center: [107.925367, 31.217453],
zoom: 5,
zoom: 4,
locations: [
{
......@@ -106,7 +106,7 @@ export default {
},
mapBack() {
this.locationIndex = -1
this.zoom = 5
this.zoom = 4
this.center = [107.925367, 31.217453]
},
},
......@@ -192,4 +192,47 @@ export default {
top: 20px;
left: 20px;
}
@media screen and (max-width: 1000px) {
.select-tip {
padding-right: 0;
justify-content: center;
font-size: 16px;
padding: 20px 0;
}
.map {
flex: unset;
height: 70vw;
}
.map-wrapper {
flex-direction: column;
}
.location-info {
padding: 20px 50px;
}
.location-city {
margin-bottom: 20px;
font-size: 16px;
}
.location-prop {
font-size: 14px;
.label {
margin-bottom: 8px;
}
.value {
margin-bottom: 8px;
}
&:not(:last-child) {
margin-bottom: 10px;
}
}
}
</style>
src/views/Home/CulturePage.vue
......@@ -11,7 +11,7 @@
<div class="manage-idea hover-hl">
<div class="manage-text hover-hl-content">
<div class="idea">经营理念</div>
<div>客户至上 以人为本</div>
<div class="idea-des">客户至上 以人为本</div>
</div>
<img src="~@/assets/culture/02.jpg" />
......@@ -31,29 +31,29 @@
<div class="value-title">企业价值观</div>
<div class="value-content">
<div class="value-pic">
<div class="valuePicTitle">诚信正直</div>
<div class="valuePicContent">
<div class="value-pic-title">诚信正直</div>
<div class="value-pic-content">
严格遵守公司制度，做到言行如一，实事求是；遇到利益诱惑时能坚持原则，以公司利益为先，不凭借职位之便谋取私利
</div>
<img src="~@/assets/culture/04.jpg" />
</div>
<div class="value-pic">
<div class="valuePicTitle">开放分享</div>
<div class="valuePicContent">
<div class="value-pic-title">开放分享</div>
<div class="value-pic-content">
积极探索和学习新的市场、技术和产品知识，以开放的胸怀对待新理念和不同意见，相互尊重，相互信任，相互分享，营造良好的学习氛围和搭建信息共享平台。
</div>
<img src="~@/assets/culture/05.jpg" />
</div>
<div class="value-pic">
<div class="valuePicTitle">拥抱变化</div>
<div class="valuePicContent">
<div class="value-pic-title">拥抱变化</div>
<div class="value-pic-content">
以积极主动的心态拥抱公司的变革和新的商业模式，学习借鉴成功经验，持续创新，不断挑战自我，改善自我，超越自我。
</div>
<img src="~@/assets/culture/06.jpg" />
</div>
<div class="value-pic">
<div class="valuePicTitle">快速行动</div>
<div class="valuePicContent">
<div class="value-pic-title">快速行动</div>
<div class="value-pic-content">
快速有效整合现有资源，不因害怕承担责任或过度追求完美而延缓行动，确保在规定时限内以较高的质量完成任务，达到更加卓越的业务结果。
</div>
<img src="~@/assets/culture/07.jpg" />
......@@ -108,7 +108,6 @@ export default {
.manage-idea .manage-text {
font-size: 1.66vw;
color: #fff;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
......@@ -127,7 +126,6 @@ export default {
.idea-content .content-text {
font-size: 1.66vw;
color: #fff;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
......@@ -189,7 +187,7 @@ export default {
width: 100%;
}
.value-pic .valuePicTitle {
.value-pic .value-pic-title {
position: absolute;
top: 50%;
left: 50%;
......@@ -200,29 +198,29 @@ export default {
transition: all 0.8s;
}
.value-pic:hover .valuePicTitle {
.value-pic:hover .value-pic-title {
top: 5.2vw;
}
.value-pic:hover .valuePicContent {
.value-pic:hover .value-pic-content {
top: 6.3vw;
opacity: 1;
}
.valuePicContent {
.value-pic-content {
position: absolute;
text-align: center;
top: 6.8vw;
opacity: 0;
padding: 0 2.1vw;
font-size: 0.8vw;
font-family: lantingxh;
line-height: 1.3vw;
font-weight: 200;
color: #fff;
transition: all 0.8s;
}
.manage-text .idea-des,
.content-text .idea-des {
font-size: 1.4vw;
font-weight: 400;
......@@ -235,11 +233,27 @@ export default {
background-color: #eb8820;
padding: 1.66vw;
}
.manage-idea .manage-text {
font-size: 1.5vw;
.manage-idea,
.idea-content {
&::before {
display: none;
}
}
.content-text .idea-des {
font-size: 1.3vw;
.manage-idea .manage-text,
.idea-content .content-text {
font-size: 20px;
.idea-des {
font-size: inherit;
}
.idea::after {
top: 30px;
width: 2em;
height: 2px;
}
}
.value-content {
......@@ -251,14 +265,16 @@ export default {
bottom: -2px !important;
}
.valuePicTitle {
.value-pic-title {
top: 7.8vw !important;
font-size: 16px !important;
}
.valuePicContent {
.value-pic-content {
top: 13.8vw !important;
line-height: 4.8vw;
opacity: 1 !important;
font-size: 14px !important;
}
}
</style>
src/views/Home/JoinUsPage.vue
......@@ -9,8 +9,10 @@
<div class="value-content">
<div class="value-pic" v-for="(item, index) in welfares" :key="index">
<img :src="item.imgage" />
<div class="value-pic-title">{{ item.title }}</div>
<div class="value-pic-content">{{ item.msg }}</div>
<div class="value-pic-text cover-parent">
<div class="value-pic-title">{{ item.title }}</div>
<div class="value-pic-content">{{ item.msg }}</div>
</div>
</div>
</div>
<div class="job-wrapper">
......@@ -451,39 +453,36 @@ export default {
}
}
.value-pic-text {
display: flex;
flex-direction: column;
justify-content: center;
}
.value-pic-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 28px;
font-weight: 500;
color: #fff;
transition: all 0.8s;
text-align: center;
}
.value-pic-content {
position: absolute;
text-align: center;
width: 100%;
top: 134px;
opacity: 0;
padding: 0 45px;
font-size: 15.2px;
font-family: lantingxh;
line-height: 36px;
font-weight: 200;
color: #fff;
transition: all 0.8s;
}
.value-pic:hover .value-pic-title {
top: 90px;
transform: translateY(36px);
}
.value-pic:hover .value-pic-content {
top: 120px;
opacity: 1;
transform: translateY(0);
}
.job-header {
......@@ -651,16 +650,16 @@ input::placeholder {
}
.value-pic-title {
top: 50px;
font-size: 16px;
margin-bottom: 20px;
}
.value-pic-content {
top: 70px;
opacity: 1;
line-height: 18px;
font-size: 12px;
font-size: 14px;
padding: 0 20px;
transform: translateY(0);
}
.value-pic:hover .value-pic-content {
......
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