Skip to content

O
office-web-js
Commit 6cd1367e by qinjianhui
Options

feat: 联系我们

parent 2b396377
Showing with 284 additions and 48 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",
......@@ -7788,6 +7790,21 @@
"picocolors": "^1.0.0"
}
},
"uppercamelcase": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/uppercamelcase/-/uppercamelcase-1.1.0.tgz",
"integrity": "sha512-C7YEMvhgrvTEKEEVqA7LXNID/1TvvIwYZqNIKLquS6y/MGSkRQAav9LnTTILlC1RqUM8eTVBOe1U/fnB652PRA==",
"requires": {
"camelcase": "^1.2.1"
},
"dependencies": {
"camelcase": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
"integrity": "sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g=="
}
}
},
"uri-js": {
"version": "4.4.1",
"resolved": "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz",
......@@ -7852,6 +7869,14 @@
"csstype": "^3.1.0"
}
},
"vue-amap": {
"version": "0.5.10",
"resolved": "https://registry.npmjs.org/vue-amap/-/vue-amap-0.5.10.tgz",
"integrity": "sha512-9ViNCev1vx32+zZ5RvF/TmUZNbwL9QrdA2/OnD2GlXMfQBkJy7D08Vb7379t6guqnopDPtWJ8K6gg72h9+4GUg==",
"requires": {
"uppercamelcase": "^1.1.0"
}
},
"vue-awesome-swiper": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
......
package.json
......@@ -13,6 +13,7 @@
"element-ui": "^2.15.12",
"swiper": "^5.2.0",
"vue": "^2.6.14",
"vue-amap": "^0.5.10",
"vue-awesome-swiper": "^4.1.1",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
......
src/styles/common.scss
$primary-color: #e28e39;
.text-center {
text-align: center;
}
.underline-title {
position: relative;
padding-bottom: 15px !important;
white-space: nowrap;
&.text-center {
&::after {
left: 50%;
transform: translateX(-50%);
}
}
&::after {
content: '';
position: absolute;
......@@ -63,7 +74,7 @@ $primary-color: #e28e39;
transform: translate(16px, 16px);
opacity: 0.8;
}
.hover-hl-content {
z-index: 101;
}
......
src/styles/icon.scss
.icon-arrow-left {
.icon-arrow-left-gold {
background-size: 100%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAAXNSR0IArs4c6QAAAtxJREFUeAHt3M9KG1EUx/G5IVakbtz230asbyDYB5BC132LYrFv0BcQC32CLt2LUChIoXTp2q1poNAUCnXRGjSdUabEo5zdOff8+QWiud7gyXw/TjYOKae7m7MGt2oFBtUmY/BVgWHf4cmbr6V/jO/yBfp3HpwB8q3ZCQBg88hvAkC+MTsBAGwe+U0AyDdmJwCAzSO/CQD5xuwEALB55DcBIN+YnQAANo/8JgDkG7MTAMDmkd8EgHxjdgIA2DzymwCQb8xOAACbR34TAPKN2Qn//yPGPsvx5mj/5dLieLxOD+F8YWn06NWnn/Tn2uvQAN8/bN2ffhuf/GlmD+fDlqZMlqcXa/M/q/U47FvQVfzJ2cnsrvjl3trKztGvWtHn54YE8BK/gwgH4Cl+OABv8UMBeIwfBsBr/BAAnuO7B/Ae3zVAhPhuAaLEdwkQKb47gGjxXQFEjO8GIGp8FwCR45sHiB7fNECG+GYBssQ3CZApvjmAbPFNAWSMbwYga3wTAJnjVwfIHr8qAOJ3+Zum2pVx08nv4/ZzcugVa3+XDV00dZ1I9mu964LK4HV7aDc+q6i9im3xrJy/lT1kW7+9GsDjnS+HpQxe3EK4nG2P9p69s5VJ7tVUA+gOCQgGLk3MjlD1DOhP7MwIJgAyvx2ZAciKYAogI4I5gGwIJgEyIZgFyIJgGiADgnmA6AguACIjuAGIiuAKICKCO4BoCC4BIiG4BYiC4BogAoJ7AO8IIQA8I4QB8IoQCsAjQjgAbwghATwhhAXoEYbDhefth/QdzN+by2b1x/uNp91zat+qXRuqdeAPtj9/bGd1d5O30GeAyeLkRQGABNFeAkC7OJkHABJEewkA7eJkHgBIEO0lALSLk3kAIEG0lwDQLk7mAYAE0V4CQLs4mQcAEkR7CQDt4mQeAEgQ7SUAtIuTeQAgQbSXANAuTuYBgATRXpbT3c0bn1ii/QKyz8MZUPkv4B9ziynbuPRX8gAAAABJRU5ErkJggg==);
}
.icon-arrow-left {
background-color: 100%;
background-position: center;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAYCAYAAAAh8HdUAAAAAXNSR0IArs4c6QAAAR9JREFUOBGNk89LAlEURiepTWD7Fm1cCCWYSolUYLgQEdy5659uoQtx4aKIUrEfaqkV4/lgHszq3vng8N54zzej8iaKMiaO4zwcZdSjCLkDSxjAgVtEasEPKCOwSwh3sAJlChfmUxDq8AnKAi69QiURVVDxyiuUkGayiX78jVcoIr3KJt9w7xUKSM+yyQbaXuEMaQLKDnpe4RRpLJv8Qd8saIj0Lpv8w4NbQMjBcSL+sj4le3vh7g0IT9NffGs3kiliLVX8Yt/IWrxG/gBFq30Kwl0R9VX1JEXnrRpm5oqYPtlzrstmIQwRm7AGReewFGbmiqiXT+dPeYNzsxCGiG3QOVReoBhm5orYhS0oQ1NOD5F7oNf+Mf25u6dwAocS9wBtet3NbWpoAAAAAElFTkSuQmCC);
}
.icon-thumb {
background-size: 100%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAbCAYAAABiFp9rAAAAAXNSR0IArs4c6QAAAdhJREFUSA3tlc9LAlEQx2c2UxKMrp6CwExNQ7cQ+gH9AfUHBOV/0SWoQwcpunbyaNHFjtWpgxB0qRWRIqhrIAiGQRD5Y18zarKK69s97K0HC++9efP97MzOzkOwOSLxZLjRaJ4KEMsI+AEI2fG5mYPnXK4+SmpslHHQpqqq97uuPxIkSjYXPT56VvVqzV2tlG8HzxvXinEhm381cIsgfgR4mPTgFAButH0EpGS+/FaWhxB6R1DBjKZpn+R4HZhPAMNlIpYjCsWXp4WANRL88Sq+S5nwoN0yqNmqb5MzZQ2uisV8bVBItrYMQiF2WAwRz2Wiw+yWQIGYmhRCBLmcqZRvhgnJ9qSg8MJShKLJsJAAOJP9L2ZAF1UN+ZuPRqvVMSK+T6AnbXbSqEORl6kSH1GBk9dS4Y59pBGRU5U+zIXbDSul0n3FDGTc75b7ptAhPxtL7LEN/97k7anAFdUbZvu9AyMmIVX163VI0Xc9pHS5KLJ1Wz/sCO0+04umlWnjOBhVgWBHFNmuNHV9CjYXihuy7ELpX3QU1I2s3aIcBRkT8A8yZsPW/D91ttJlPOxo6rgVMYybrKMg7ncM4k7uSK8zNlXi6Hxd9Lo3kx0YDNmnOyntSETDLr5fqlCe7ANE7CkAAAAASUVORK5CYII=);
......
src/views/Home/AboutPage.vue
......@@ -75,12 +75,12 @@
</SwiperSlide>
</Swiper>
<a
class="slides-switcher slides-switcher-prev icon-arrow-left"
class="slides-switcher slides-switcher-prev icon-arrow-left-gold"
href="javascript:;"
@click="slideJump(-1)"
></a>
<a
class="slides-switcher slides-switcher-next icon-arrow-left"
class="slides-switcher slides-switcher-next icon-arrow-left-gold"
href="javascript:;"
@click="slideJump(1)"
></a>
......
src/views/Home/ContactPage.vue
<template>
<div class="contact-page">联系我们</div>
<div class="contact-page">
<div class="main-image">
<img
class="cover-parent"
src="~@/assets/contact/main.jpg"
alt="联系我们"
/>
</div>
<div class="heading">
<h2 class="page-title underline-title text-center">联系我们</h2>
</div>
<div class="map-wrapper">
<div class="info-card">
<div v-if="location" class="location-info">
<div class="location-city">{{ location.city }}</div>
<div class="location-prop">
<div class="label">地址</div>
<div class="value">{{ location.address }}</div>
</div>
<div class="location-prop">
<div class="label">电话</div>
<div class="value">{{ location.tel }}</div>
</div>
<a
class="back-button icon-arrow-left"
href="javascript:;"
@click="mapBack"
></a>
</div>
<div v-else class="select-tip">点击地图了解更多</div>
</div>
<div class="map">
<el-amap vid="map" :center="center" :zoom="zoom">
<el-amap-marker
v-for="(m, i) in locations"
:key="i"
:position="[m.longitude, m.latitude]"
:title="m.address"
:label="{ content: m.city, offset: [20, 20] }"
:events="markerEvents"
/>
</el-amap>
</div>
</div>
</div>
</template>
<script>
import VueAMap from 'vue-amap'
import Vue from 'vue'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
// 高德的key
key: '',
// 插件集合
plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType'],
// 高德 sdk 版本，默认为 1.4.4
v: '1.4.4',
})
export default {
name: 'ContactPage',
data() {
return {
center: [107.925367, 31.217453],
zoom: 5,
locations: [
{
city: '西安',
address: '陕西省西安市雁塔区太白南路39号金石柏朗大厦1幢12101室',
tel: '029-1234567',
longitude: 108.903762,
latitude: 34.206739,
},
{
city: '广州',
address: '广东省广州市番禺区南村镇顺意坊大道东25-22仓',
tel: '029-1234567',
longitude: 113.362339,
latitude: 23.017031,
},
],
locationIndex: -1,
markerEvents: { click: this.onLocationClicked },
}
},
computed: {
location() {
return this.locations[this.locationIndex]
},
},
methods: {
onLocationClicked(e) {
const locationIndex = this.locations.findIndex(
(ee) => ee.city === e.target.getLabel().content
)
this.locationIndex = locationIndex
this.center = [this.location.longitude, this.location.latitude]
this.zoom = 15
},
mapBack() {
this.locationIndex = -1
this.zoom = 5
this.center = [107.925367, 31.217453]
},
},
}
</script>
<style lang="scss" scoped>
.main-image {
position: relative;
padding-top: 26.56%;
}
.heading {
display: flex;
flex-direction: column;
justify-content: center;
height: 150px;
background-color: #222;
}
.page-title {
margin: 0;
font-size: 32px;
font-weight: normal;
color: #fff;
}
.map-wrapper {
display: flex;
overflow: hidden;
}
.info-card {
position: relative;
flex: 1;
color: #fff;
background-color: #e28e39;
display: flex;
justify-content: center;
align-items: center;
}
.map {
flex: 1;
height: 40vw;
}
.select-tip {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
height: 100%;
padding-right: 100px;
font-size: 20px;
}
.location-city {
font-size: 20px;
margin-bottom: 40px;
}
.location-prop {
border-bottom: solid 1px #efefef;
.label {
margin-bottom: 20px;
}
.value {
margin-bottom: 20px;
}
&:not(:last-child) {
margin-bottom: 40px;
}
}
.back-button {
display: block;
width: 20px;
height: 20px;
position: absolute;
top: 20px;
left: 20px;
}
</style>
src/views/Home/IndexPage.vue
......@@ -10,12 +10,12 @@
</Swiper>
<div class="slides-switchers">
<a
class="slides-switcher slides-switcher-prev icon-arrow-left"
class="slides-switcher slides-switcher-prev icon-arrow-left-gold"
href="javascript:;"
@click="slideJump(-1)"
></a>
<a
class="slides-switcher slides-switcher-next icon-arrow-left"
class="slides-switcher slides-switcher-next icon-arrow-left-gold"
href="javascript:;"
@click="slideJump(1)"
></a>
......
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