maochaoying
/
pc-metal
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

路径变化

master
maochaoying 2 years ago
parent
3785ce07ba
commit
5d765ec198
6 changed files with 163 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/design/bottom/code.png
  2. 2
      src/components/CustomerService/index.vue
  3. 20
      src/components/MetalPlate/Bottom/NewBottomMetal.vue
  4. 20
      src/components/MetalPlate/Bottom/NewBottomWhiteMetal.vue
  5. 139
      src/components/MetalPlate/LinkCard/index.vue
  6. 3
      src/views/MetalPlate/index.vue

BIN
src/assets/design/bottom/code.png
View File

Side by Side Swipe Overlay

Before

Width: 119  |  Height: 119  |  Size: 22 KiB

After

Width: 769  |  Height: 769  |  Size: 73 KiB

2
src/components/CustomerService/index.vue
View File

@ -99,7 +99,7 @@
</template>
<script setup>
import CodePng from '@/assets/design/bottom/code1.png'
import CodePng from '@/assets/design/bottom/code.png'
import { useRoute } from 'vue-router'
const route = useRoute()

20
src/components/MetalPlate/Bottom/NewBottomMetal.vue
View File

@ -38,18 +38,18 @@
<span>商务咨询：</span>
<p class="phone">
<span>1</span>
<span>8</span>
<span>7</span>
<span>0</span>
<span>1</span>
<span>0</span>
<span>1</span>
<span>2</span>
<span>6</span>
<span>5</span>
<span>6</span>
<span>2</span>
<span>4</span>
<span>9</span>
<span>6</span>
<span>2</span>
<span>2</span>
<span>9</span>
<span>0</span>
</p>
<span>| 佟老师</span>
<span>| 杨老师</span>
</div>
</div>
</div>
@ -58,7 +58,7 @@
<div class="title">电子邮箱 ｜ E-mail</div>
<div class="info_text mb">
<p>商务邮箱：info@iflytop.com</p>
<p>招聘邮箱：info@iflytop.com</p>
<p>招聘邮箱：hr@iflytop.com</p>
</div>
<div class="title">我们的位置 ｜ Position</div>
<div class="info_text">

20
src/components/MetalPlate/Bottom/NewBottomWhiteMetal.vue
View File

@ -38,18 +38,18 @@
<span>商务咨询：</span>
<p class="phone">
<span>1</span>
<span>8</span>
<span>7</span>
<span>0</span>
<span>1</span>
<span>0</span>
<span>1</span>
<span>2</span>
<span>6</span>
<span>5</span>
<span>6</span>
<span>2</span>
<span>4</span>
<span>9</span>
<span>6</span>
<span>2</span>
<span>2</span>
<span>9</span>
<span>0</span>
</p>
<span>| 佟老师</span>
<span>| 杨老师</span>
</div>
</div>
</div>
@ -58,7 +58,7 @@
<div class="title">电子邮箱 ｜ E-mail</div>
<div class="info_text mb">
<p>商务邮箱：info@iflytop.com</p>
<p>招聘邮箱：info@iflytop.com</p>
<p>招聘邮箱：hr@iflytop.com</p>
</div>
<div class="title">我们的位置 ｜ Position</div>
<div class="info_text">

139
src/components/MetalPlate/LinkCard/index.vue
View File

@ -0,0 +1,139 @@
<template>
<div class="link_card_container">
<div class="card mr" @click="toPage('/')">
<img class="bg_img" :src="BG" alt="" />
<div class="modal">
<h1 class="title">整机开发</h1>
<div class="btn">
<p class="text">立即前往</p>
<img :src="Arrow" class="icon" alt="" />
</div>
<p class="en">Complete machine</p>
</div>
</div>
<div class="card" @click="toPage('/pc/hardware')">
<img class="bg_img" :src="BG" alt="" />
<div class="modal">
<h1 class="title">软硬件定制</h1>
<div class="btn">
<p class="text">立即前往</p>
<img :src="Arrow" class="icon" alt="" />
</div>
<p class="en">Hardware</p>
</div>
</div>
</div>
</template>
<script setup>
import BG from '@/assets/design/link/1.png'
import Arrow from '@/assets/design/link/arrow.png'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const toPage = (path, p) => {
window.location.href = `http://iflytop.com${path}`
}
</script>
<style lang="scss" scoped>
@keyframes btnAnimation {
0% {
transform: translateX(0);
}
25% {
transform: translateX(25px);
}
75% {
transform: translateX(-25px);
}
100% {
transform: translateX(0);
}
}
.link_card_container {
padding: 0 190px;
padding-bottom: 120px;
display: flex;
align-items: center;
justify-content: center;
.card {
flex: 1;
height: 420px;
position: relative;
cursor: pointer;
.bg_img {
width: 100%;
height: auto;
object-fit: cover;
}
.modal {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.86);
padding-left: 98px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
.title {
font-family: AlibabaPuHuiTi;
font-size: 76px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.06em;
color: #f6f6f6;
}
.btn {
margin-top: 18px;
margin-bottom: 20px;
border-radius: 324px;
padding: 11px 24px;
background: #2a4ee1;
display: flex;
align-items: center;
justify-content: center;
.text {
font-family: Source Han Sans CN;
font-size: 16px;
font-weight: normal;
line-height: normal;
letter-spacing: 0.1em;
color: #ffffff;
margin-right: 15px;
}
.icon {
width: 19px;
height: 4px;
}
}
.en {
font-family: Poppins;
font-size: 30px;
font-weight: 500;
line-height: normal;
letter-spacing: 0em;
color: #ffffff;
}
}
&:hover {
.modal {
.btn {
animation-name: btnAnimation;
animation-duration: 1s;
}
}
}
}
.mr {
margin-right: 20px;
}
}
</style>

3
src/views/MetalPlate/index.vue
View File

@ -18,6 +18,8 @@
<FactoryEnvironment />
<HeaderLine title="合作客户" />
<Partner />
<HeaderLine title="不止于此" />
<LinkCard />
</div>
<NewBottomMetal />
</div>
@ -37,6 +39,7 @@ import CheckEquipment from 'cpns/MetalPlate/CheckEquipment'
import CncSample from 'cpns/MetalPlate/CncSample'
import HandPlate from 'cpns/MetalPlate/HandPlate'
import MetalPlateProcess from 'cpns/MetalPlate/MetalPlateProcess'
import LinkCard from 'cpns/MetalPlate/LinkCard'
onMounted(() => {
if (location.href.indexOf('#sheet-metal') != -1) {

Write Preview
Loading…
Cancel
Save