Skip to content

O
office-web-js
Commit b0524de0 by qinjianhui
Options

feat: 关于我们

parent 31457d45
Showing with 416 additions and 50 deletions
package-lock.json
......@@ -1969,49 +1969,6 @@
"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": {
......@@ -2176,6 +2133,47 @@
}
}
},
"@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",
......@@ -2518,6 +2516,14 @@
"lodash": "^4.17.14"
}
},
"async-validator": {
"version": "1.8.5",
"resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz",
"integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
"requires": {
"babel-runtime": "6.x"
}
},
"at-least-node": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
......@@ -2538,6 +2544,11 @@
"postcss-value-parser": "^4.2.0"
}
},
"babel-helper-vue-jsx-merge-props": {
"version": "2.0.3",
"resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
"integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
},
"babel-loader": {
"version": "8.3.0",
"resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.3.0.tgz",
......@@ -2589,6 +2600,27 @@
"@babel/helper-define-polyfill-provider": "^0.3.3"
}
},
"babel-runtime": {
"version": "6.26.0",
"resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
"integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
"requires": {
"core-js": "^2.4.0",
"regenerator-runtime": "^0.11.0"
},
"dependencies": {
"core-js": {
"version": "2.6.12",
"resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
},
"regenerator-runtime": {
"version": "0.11.1",
"resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
}
}
},
"balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
......@@ -3433,8 +3465,7 @@
"deepmerge": {
"version": "1.5.2",
"resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz",
"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
"dev": true
"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
},
"default-gateway": {
"version": "6.0.3",
......@@ -3709,6 +3740,19 @@
"integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==",
"dev": true
},
"element-ui": {
"version": "2.15.12",
"resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.12.tgz",
"integrity": "sha512-Y5FMT2BPOindU2GkDEQ5ZKUVxDawKONRNMh2eL3uBx1FOtvUJ+L6IxXLVsNxq4WnaX/UnVNgWXebl7DobygZMg==",
"requires": {
"async-validator": "~1.8.1",
"babel-helper-vue-jsx-merge-props": "^2.0.0",
"deepmerge": "^1.2.0",
"normalize-wheel": "^1.0.1",
"resize-observer-polyfill": "^1.5.0",
"throttle-debounce": "^1.0.1"
}
},
"emoji-regex": {
"version": "8.0.0",
"resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
......@@ -5846,6 +5890,11 @@
"integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
"dev": true
},
"normalize-wheel": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
"integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
},
"npm-run-path": {
"version": "2.0.2",
"resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz",
......@@ -6869,6 +6918,11 @@
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
"dev": true
},
"resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
},
"resolve": {
"version": "1.22.1",
"resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz",
......@@ -7604,6 +7658,11 @@
}
}
},
"throttle-debounce": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
"integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
},
"thunky": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/thunky/-/thunky-1.1.0.tgz",
......
package.json
......@@ -9,6 +9,7 @@
},
"dependencies": {
"core-js": "^3.8.3",
"element-ui": "^2.15.12",
"swiper": "^5.2.0",
"vue": "^2.6.14",
"vue-awesome-swiper": "^4.1.1",
......
src/components/element-ui.js 0 → 100644
import 'element-ui/lib/theme-chalk/index.css'
import { Row, Col, Input, Select } from 'element-ui'
const components = [Row, Col, Input, Select]
export default {
install(Vue) {
components.forEach((c) => Vue.use(c))
},
}
src/main.js
......@@ -2,11 +2,14 @@ import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from './components/element-ui'
import './styles/index.scss'
Vue.config.productionTip = false
Vue.use(ElementUI)
const title = document.title
router.afterEach((to) => {
if (to.meta?.title) {
......
src/styles/index.scss
......@@ -24,7 +24,7 @@ div {
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgba(221, 221, 221, 1);
background-color: transparent;
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
......@@ -34,5 +34,5 @@ div {
::-webkit-scrollbar-track {
border: none;
outline: none;
background-color: rgba(0, 0, 0, 0);
background-color: transparent;
}
\ No newline at end of file
src/views/Home/AboutPage.vue
<template>
<div class="about-page">关于</div>
<div class="about-page">
<div class="joshine-about-banner">
<div class="about-joshine">ABOUT JOSHINE</div>
<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>
</div>
</div>
<div class="joshine-achivement">
<div class="joshine-achivement-wrapper">
<div class="joshine-achivement-title underline-title">发展成果</div>
<div class="joshine-achivement-slides">
<Swiper ref="swiper">
<SwiperSlide>
<div class="joshine-prize-wrapper">
<ElRow class="prize-info" :gutter="30">
<ElCol class="price-item" :span="8"
><img src="~@/assets/about/04.png"
/></ElCol>
<ElCol class="price-item" :span="8"
><img src="~@/assets/about/05.png"
/></ElCol>
<ElCol class="price-item" :span="8"
><img src="~@/assets/about/08.jpg"
/></ElCol>
<ElCol class="price-item" :span="12"
><img src="~@/assets/about/06.jpg"
/></ElCol>
<ElCol class="price-item" :span="12"
><img src="~@/assets/about/07.jpg"
/></ElCol>
</ElRow>
</div>
</SwiperSlide>
<SwiperSlide>
<div
class="joshine-prize-wrapper"
style="filter: grayscale(1) blur(4px)"
>
<ElRow class="prize-info" :gutter="30">
<ElCol class="price-item" :span="8"
><img src="~@/assets/about/04.png"
/></ElCol>
<ElCol class="price-item" :span="8"
><img src="~@/assets/about/05.png"
/></ElCol>
<ElCol class="price-item" :span="8"
><img src="~@/assets/about/08.jpg"
/></ElCol>
<ElCol class="price-item" :span="12"
><img src="~@/assets/about/06.jpg"
/></ElCol>
<ElCol class="price-item" :span="12"
><img src="~@/assets/about/07.jpg"
/></ElCol>
</ElRow>
</div>
</SwiperSlide>
</Swiper>
<a
class="slides-switcher slides-switcher-prev icon-arrow-left"
href="javascript:;"
@click="slideJump(-1)"
></a>
<a
class="slides-switcher slides-switcher-next icon-arrow-left"
href="javascript:;"
@click="slideJump(1)"
></a>
</div>
</div>
</div>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
name: 'AboutPage',
components: { Swiper, SwiperSlide },
data() {
return {
history: [
{
time: 2022,
des: 'Q3拥有自己的品牌站，获得meta官方授权AA账户，公司主营产品类目进入业内TOP3，公司现有员工150人',
},
{
time: 2021,
des: '疫情中屹立不倒，自主研发的跨境电商综合服务平台获业内同行高度认可',
},
{
time: 2020,
des: '公司业绩爆发式增长，公司规模持续扩张',
},
{
time: 2019,
des: '致力于DTC品牌出海战略，并实现某一单品类业界TOP2',
},
{
time: 2018,
des: '锁定新市场大力扩张，高峰期日销万件商品',
},
{
time: 2017,
des: '完成A轮数千万级别融资，定位于“跨境快时尚互联网公司',
},
{
time: 2016,
des: '融资扩张获得业内机构投资',
},
{
time: 2015,
des: '晶闪科技（JOSHINE）成立',
},
],
}
},
computed: {
swiper() {
return this.$refs.swiper.$swiper
},
},
methods: {
slideJump(delta) {
let index = (this.swiper.activeIndex + delta) % this.swiper.slides.length
if (index < 0) {
index += this.swiper.slides.length
}
this.swiper.slideTo(index, 600)
},
},
}
</script>
<style lang="scss" scoped>
.joshine-about-banner {
font-size: 0px;
position: relative;
}
.about-joshine {
position: absolute;
font-size: 48px;
color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.joshine-history {
width: 100%;
height: 45vw;
position: relative;
}
.joshine-history img {
width: 100%;
height: 100%;
}
.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;
color: #e28e39;
padding-top: 30px;
}
.progress-line {
width: 70px;
height: 3px;
background: #f08917;
margin: 20px 0;
}
.historyWrapper {
overflow: auto;
height: 600px;
}
.singleHistory:not(:first-child) {
margin-top: 32px;
}
.timeLine {
font-size: 18px;
line-height: 22px;
font-weight: 500;
color: #fff;
margin-bottom: 8px;
}
.description {
color: #e28e39;
font-weight: 500;
font-family: lantingzh;
line-height: 27px;
font-size: 18px;
}
.joshine-achivement {
background: url('../../assets/about/02.jpg') no-repeat 50%;
background-size: cover;
}
.joshine-achivement-title {
font-size: 38px;
padding-top: 30px;
color: #fff;
margin-bottom: 20px;
}
.joshine-achivement-wrapper {
width: 80%;
margin: 0 auto;
}
.price-item {
margin-bottom: 30px;
img {
width: 100%;
}
}
.joshine-achivement-slides {
position: relative;
}
.slides-switcher {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block;
width: 40px;
height: 40px;
&:not(:last-child) {
margin-right: 8px;
}
}
.slides-switcher-prev {
left: -100px;
}
.slides-switcher-next {
transform: rotate(180deg);
right: -100px;
}
</style>
src/views/Home/IndexPage.vue
......@@ -126,9 +126,9 @@ export default {
},
methods: {
slideJump(delta) {
let index = (this.swiper.activeIndex + delta) % this.slides.length
let index = (this.swiper.activeIndex + delta) % this.swiper.slides.length
if (index < 0) {
index += this.slides.length
index += this.swiper.slides.length
}
this.swiper.slideTo(index, 600)
},
......
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