Skip to content

O
office-web-js
Commit acc839ed by qinjianhui
Options

feat: 首页

parent 8d5bd92f
Showing with 445 additions and 21 deletions
package-lock.json
......@@ -3622,6 +3622,21 @@
"entities": "^2.0.0"
}
},
"dom7": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
"integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
"requires": {
"ssr-window": "^2.0.0"
},
"dependencies": {
"ssr-window": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
"integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
}
}
},
"domelementtype": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz",
......@@ -7314,6 +7329,11 @@
"integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
"dev": true
},
"ssr-window": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
"integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
},
"ssri": {
"version": "8.0.1",
"resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
......@@ -7448,6 +7468,15 @@
}
}
},
"swiper": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-5.2.0.tgz",
"integrity": "sha512-pGyQ7+X7ndp6r6L0Wb+vjX5xaORdKws5mLucjen3yJrZYv9M18dd13xmSjPB8isgWVbwaFL7UxXvu8ojcfjajg==",
"requires": {
"dom7": "^2.1.3",
"ssr-window": "^1.0.1"
}
},
"table": {
"version": "6.8.1",
"resolved": "https://registry.npmmirror.com/table/-/table-6.8.1.tgz",
......@@ -7759,6 +7788,11 @@
"csstype": "^3.1.0"
}
},
"vue-awesome-swiper": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
"integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ=="
},
"vue-eslint-parser": {
"version": "8.3.0",
"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
......
package.json
......@@ -9,7 +9,9 @@
},
"dependencies": {
"core-js": "^3.8.3",
"swiper": "^5.2.0",
"vue": "^2.6.14",
"vue-awesome-swiper": "^4.1.1",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
},
......
src/components/HomePageFooter.vue
......@@ -5,7 +5,7 @@
<li
v-for="(l, i) in links"
:key="i"
class="footer-link-item footer-title"
class="footer-link-item footer-title underline-title"
:class="{ active: isRouteActive(l) }"
>
<router-link
......@@ -25,7 +25,7 @@
</div>
<div class="footer-right">
<div class="footer-mp">
<div class="footer-title">公众号</div>
<div class="footer-title underline-title">公众号</div>
<img
class="footer-mp-qrcode"
src="~@/assets/mp-qrcode.png"
......@@ -113,23 +113,6 @@ $primary-color: #e28e39;
transition: 0.3s;
}
.footer-title {
position: relative;
padding-bottom: 15px;
white-space: nowrap;
&::after {
content: '';
position: absolute;
top: 100%;
left: 0;
display: block;
width: 2em;
height: 3px;
background-color: $primary-color;
}
}
.footer-text {
margin-top: 20px;
color: #999;
......
src/styles/common.scss 0 → 100644
$primary-color: #e28e39;
.underline-title {
position: relative;
padding-bottom: 15px !important;
white-space: nowrap;
&::after {
content: '';
position: absolute;
top: 100%;
left: 0;
display: block;
width: 2em;
height: 2px;
background-color: $primary-color;
}
}
.fill-parent {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
.hover-hl {
overflow: visible;
.hover-hl-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.hover-hl-hidden {
opacity: 0;
transition: 0.3s;
}
&::before {
content: "";
display: block;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: 0.3s;
background-color: $primary-color;
z-index: 0;
}
&:hover {
&::before {
transform: translate(16px, 16px);
opacity: 0.8;
}
.hover-hl-hidden {
opacity: 1;
}
}
}
\ No newline at end of file
src/styles/icon.scss 0 → 100644
.icon-arrow-left {
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==);
}
\ No newline at end of file
src/styles/index.scss
html, body {
@import './icon.scss';
@import './common.scss';
html,
body {
margin: 0;
padding: 0;
}
......
src/views/Home/IndexPage.vue
<template>
<div class="index-page">首页</div>
<div class="index-page">
<div class="slides">
<Swiper ref="swiper" :options="swiperOptions">
<SwiperSlide v-for="(s, i) in slides" :key="i">
<router-link class="slide-item" :to="s.route">
<img class="slide-item-img" :src="s.img" :alt="s.title" />
</router-link>
</SwiperSlide>
</Swiper>
<div class="slides-switchers">
<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 class="intro-video-wrapper">
<div class="intro-wrapper">
<div class="intro-text">
<h3 class="intro-title underline-title">晶闪介绍</h3>
<h4 class="intro-sub-title">成为全球领先的跨境电商品牌集团</h4>
<div class="intro-content">
<p>
西安晶闪网络科技有限公司成立于2015年，公司总部位于西安，主要致力于跨境电子商务领域，取名晶闪，晶致时尚，闪耀光芒。目前主要业务涵盖时装、美体、鞋装、泳衣等，并有自己的工厂和上百家合作的供应商。
</p>
<p>
公司运营及客服部门设在西安市高新区，工厂和仓库设在广州番禺，涉及的外贸平台有速卖通，亚马逊，Facebook以及自建站等多个平台，晶闪聚集了一群有梦想、有朝气、有理想、有抱负的80、90敢拼敢打的精英团队，公司领导层多为80后，和员工有更多共同语言，公司气氛和谐、积极向上。公司秉承“上善若水，德以佑人”的经营理念，坚持“客户至上、诚实守信、团队协作、拼搏进取”的价值观，坚持“传递真诚”的服务理念，为客户提供优质的产品批发及生产服务。
</p>
</div>
</div>
</div>
</div>
<div class="services-intro">
<div class="left-image">
<img src="~@/assets/index/clothing.jpg" alt="Clothing" />
</div>
<div class="services-intro-text">
<h3 class="services-intro-title underline-title">让时尚更普惠</h3>
<h4 class="services-intro-sub-title">让中国制造覆盖更多国家与地区</h4>
<div class="services-intro-content">
晶闪科技经营业务涉及种类繁多，以服装，鞋子为主，根据目标客群的特质，立足于欧美市场的快时尚女装品牌，以欧美度假风、休闲棉麻风等为主开发方向，为用户提供多种选择；严格把控产品整体风格和质量，为其挑选性价比高、个性化的产品，让中国制造覆盖更多国家与地区。
</div>
</div>
<div class="right-image">
<img src="~@/assets/index/shoes.jpg" alt="Shoes" />
</div>
</div>
<div class="news-report">
<h2 class="underline-title news-report-title">新闻报道</h2>
<div class="news-wrapper">
<div v-for="(n, i) in news" :key="i" class="news-item">
<div class="news-item-content fill-parent">
<img class="news-img" :src="n.img" :alt="n.title" />
<div class="news-summary fill-parent hover-hl">
<div class="hover-hl-content">
<div class="underline-title"></div>
<h4 class="news-title">{{ n.title }}</h4>
<div class="news-brief hover-hl-hidden">{{ n.brief }}</div>
<a class="news-link hover-hl-hidden" href="javascript:;"
>查看全文 +</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import ImgSlide1 from '@/assets/index/slide-1.jpg'
import ImgSlide2 from '@/assets/index/slide-2.jpg'
import ImgSlide3 from '@/assets/index/slide-3.jpg'
import ImgSlide4 from '@/assets/index/slide-4.jpg'
import ImgNews1 from '@/assets/index/news-1.png'
import ImgNews2 from '@/assets/index/news-2.jpg'
export default {
name: 'IndexPage',
components: { Swiper, SwiperSlide },
data() {
return {
swiperOptions: {},
slides: [
{ img: ImgSlide1, title: '111', route: '/about' },
{ img: ImgSlide2, title: '222', route: '/join-us' },
{ img: ImgSlide3, title: '333', route: '/' },
{ img: ImgSlide4, title: '444', route: '/' },
],
news: [
{
img: ImgNews1,
title: '2023晶闪科技春季校园招聘正式启动',
brief: '2023晶闪科技春季校园招聘正式启动！',
},
{
img: ImgNews2,
title: '携手并进·筑梦未来丨2023年晶闪科技供应商大会',
brief:
'2022年，我们回归初心；2023年，我们展望未来。让我们在这新的一年里，携手共进，筑梦未来！',
},
],
}
},
computed: {
swiper() {
return this.$refs.swiper.$swiper
},
},
methods: {
slideJump(delta) {
let index = (this.swiper.activeIndex + delta) % this.slides.length
if (index < 0) {
index += this.slides.length
}
this.swiper.slideTo(index, 600)
},
},
}
</script>
<style lang="scss" scoped>
$primary-color: #e28e39;
.slides {
position: relative;
}
.slide-item {
display: block;
width: 100%;
font-size: 0;
}
.slide-item-img {
width: 100%;
}
.slides-switchers {
position: absolute;
bottom: 30px;
left: 200px;
z-index: 1;
display: flex;
}
.slides-switcher {
display: block;
width: 40px;
height: 40px;
&:not(:last-child) {
margin-right: 8px;
}
}
.slides-switcher-next {
width: 40px;
height: 40px;
transform: rotate(180deg);
}
.intro-video-wrapper {
background-image: url(~@/assets/index/second-bg.jpg);
padding-top: 46.87%;
position: relative;
}
.intro-wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #fff;
padding: 0 12%;
display: flex;
align-items: center;
}
.intro-title {
font-size: 36px;
font-weight: normal;
margin: 0;
padding: 0;
}
.intro-sub-title {
font-size: 18px;
font-weight: normal;
margin: 10px 0 0;
padding: 0;
}
.intro-content {
width: 400px;
font-size: 16px;
color: #999;
line-height: 30px;
margin-top: 10px;
}
.services-intro {
display: flex;
font-size: 0;
.left-image,
.services-intro-text,
.right-image {
flex: 1;
overflow: hidden;
}
img {
width: 100%;
}
}
.services-intro-text {
background-color: $primary-color;
color: #fff;
padding: 60px 30px 0 30px;
.underline-title::after {
background-color: #fff;
}
}
.services-intro-title {
font-size: 36px;
margin: 0;
padding: 0;
font-weight: normal;
}
.services-intro-sub-title {
font-size: 18px;
margin: 18px 0 18px;
padding: 0;
font-weight: normal;
}
.services-intro-content {
line-height: 30px;
font-size: 16px;
}
.news-report {
background-image: url(~@/assets/index/news-bg.jpg);
color: #fff;
padding: 50px 0;
display: flex;
align-items: center;
flex-direction: column;
overflow: hidden;
}
.news-report-title {
margin: 0;
padding: 0;
font-size: 36px;
font-weight: normal;
width: 70%;
max-width: 1400px;
}
.news-wrapper {
width: 70%;
max-width: 1400px;
display: flex;
margin-top: 30px;
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.news-item {
flex: 1;
padding-top: 36%;
position: relative;
}
.news-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-summary {
.underline-title {
margin-bottom: 20px;
&::after {
background-color: #fff;
}
}
.hover-hl-content {
padding: 8%;
}
}
.news-title {
font-size: 18px;
margin: 0;
font-weight: normal;
margin-bottom: 30px;
}
.news-link {
position: absolute;
right: 30px;
bottom: 30px;
color: #fff;
text-decoration: none;
cursor: pointer;
}
</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