maochaoying
/
mobile-hardware
generated from maochaoying/dreamworks-mobile
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

软硬件研发

master
maochaoying 2 years ago
parent
5f82a01ac4
commit
f6a160e086
12 changed files with 27 additions and 450 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      index.html
  2. 147
      src/components/Bottom.bak.vue
  3. 6
      src/components/Bottom.vue
  4. 4
      src/components/HeadLine.vue
  5. 13
      src/components/SubNavigation.vue
  6. 17
      src/components/Top.vue
  7. 84
      src/pages/Hardware.bak.vue
  8. 54
      src/pages/Industry.vue
  9. 47
      src/pages/index.bak.vue
  10. 95
      src/pages/index.vue
  11. 4
      src/router/index.js
  12. 2
      vite.config.js

2
index.html
View File

@ -6,7 +6,7 @@
<meta name="format-detection" content="telephone=yes" /> <meta name="format-detection" content="telephone=yes" />
<link rel="shortcut icon" href="./logo.ico" /> <link rel="shortcut icon" href="./logo.ico" />
<meta name="x5-fullscreen" content="true" /> <meta name="x5-fullscreen" content="true" />
<title>产品梦工厂</title>
<title>产品梦工厂 - 软硬件研发</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

147
src/components/Bottom.bak.vue
View File

@ -1,147 +0,0 @@
<template>
<div
:class="
isDrag
? isHard
? 'bottom_container drag h_bottom'
: 'bottom_container drag'
: isHard
? 'bottom_container h_bottom'
: 'bottom_container'
"
>
<div class="online">
<img class="img1" :src="A1" alt="" />
<span class="text1">在线咨询</span>
</div>
<div class="phone">
<div :class="isHard ? 'box hard' : 'box'" @click="toPhone">
<img class="img3" :src="A2" alt="" />
<span class="text2">拨打电话</span>
</div>
</div>
<div class="online copy" @click="addWeChat" data-clipboard-text="CPMGC007">
<img class="img2" :src="A3" alt="" /> <span class="text1">添加微信</span>
</div>
</div>
</template>
<script setup>
import A1 from '@/static/img/bottom/kefu.png'
import A2 from '@/static/img/bottom/phone.png'
import A3 from '@/static/img/bottom/wechat.png'
import { useRoute } from 'vue-router'
import { showSuccessToast, showFailToast } from 'vant'
import { ref, onMounted } from 'vue'
import Clipboard from 'clipboard'
const route = useRoute()
const props = defineProps({
isDrag: {
type: Boolean,
},
})
const addWeChat = () => {
// 弹窗显示微信号复制成功 CPMGC007
let clipboard = new Clipboard('.copy')
clipboard.on('success', e => {
showSuccessToast('微信号复制成功')
// 释放内存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
showFailToast('该浏览器不支持自动复制')
// 释放内存
clipboard.destroy()
})
}
const toPhone = () => {
window.location.href = 'tel:13717892018'
}
const isHard = ref(false)
onMounted(() => {
if (route.path.indexOf('/hardware') != -1) {
isHard.value = true
}
})
</script>
<style lang="scss" scoped>
.bottom_container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: $bottom-height;
background: #ffa18e;
z-index: 100;
display: flex;
box-sizing: border-box;
align-items: center;
justify-content: space-between;
padding: 0 35px;
.online {
display: flex;
align-items: center;
white-space: nowrap;
box-sizing: border-box;
.img1 {
width: 14px;
height: 14px;
margin-right: 6px;
}
.img2 {
width: 16px;
height: 13px;
margin-right: 6px;
}
.text1 {
font-size: 9px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #ffffff;
}
}
.phone {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
.box {
width: 110px;
height: $bottom-height;
background: linear-gradient(90deg, #f98222, #f94622);
border-radius: 16px;
display: flex;
align-items: center;
.img3 {
width: 24px;
height: 24px;
margin-left: 4px;
margin-right: 11px;
}
.text2 {
font-size: 13px;
font-family: Alibaba PuHuiTi;
font-weight: 500;
color: #ffffff;
}
}
.hard {
background: linear-gradient(90deg, #2beec3, #74fddf);
}
}
}
.drag {
opacity: 0.3;
transition-property: all;
transition-duration: 0.7s;
animation-fill-mode: forwards;
}
.h_bottom {
background: #14e1b4;
}
</style>

6
src/components/Bottom.vue
View File

@ -30,13 +30,7 @@ const props = defineProps({
}) })
const getData = () => { const getData = () => {
if (route.path.indexOf('/hardware') != -1) {
return BottomBackground3 return BottomBackground3
}
if (route.path.indexOf('/industry') != -1) {
return BottomBackground2
}
return BottomBackground
} }
const addWeChat = () => { const addWeChat = () => {

4
src/components/HeadLine.vue
View File

@ -2,9 +2,7 @@
<div class="headline_container"> <div class="headline_container">
<h2 class="title_h2"> <h2 class="title_h2">
{{ flip ? title : '' }} {{ flip ? title : '' }}
<span :class="theme ? 'theme theme_color' : 'theme'">{{
themeTitle
}}</span>
<span class="theme theme_color">{{ themeTitle }}</span>
{{ !flip ? title : '' }} {{ !flip ? title : '' }}
</h2> </h2>
<!-- <div class="scale"> <!-- <div class="scale">

13
src/components/SubNavigation.vue
View File

@ -18,8 +18,8 @@
<div class="btn" @click="toPage('/contact')">联系我们</div> <div class="btn" @click="toPage('/contact')">联系我们</div>
<div class="btn" @click="toPage('/recruit')">招贤纳士</div> <div class="btn" @click="toPage('/recruit')">招贤纳士</div>
<div class="btn" @click="toPage('/factory')">工厂展示</div> <div class="btn" @click="toPage('/factory')">工厂展示</div>
<div class="btn" @click="toPage('/hardware')">软硬件研发</div>
<!-- <div class="btn" @click="toPage('/product')">产品研发</div> -->
<div class="btn" @click="toPage('/design')">工业设计</div>
<div class="btn" @click="toPage('/metal')">加工生产</div>
</div> </div>
</div> </div>
</div> </div>
@ -41,7 +41,16 @@ const toPage = path => {
const origin = window.location.origin const origin = window.location.origin
const pathname = window.location.pathname const pathname = window.location.pathname
const p = `${origin}${pathname}#${path}` const p = `${origin}${pathname}#${path}`
if (path == '/design') {
window.location.href = 'https://iflytop.com/mobile/design/#/'
return
}
if (path == '/metal') {
window.location.href = 'https://iflytop.com/mobile/metal/#/'
return
}
window.location.href = p window.location.href = p
drawer.value = false
} }
const hidePanel = event => { const hidePanel = event => {

17
src/components/Top.vue
View File

@ -30,12 +30,8 @@
<div class="btn" @click="toPage('/contact')">联系我们</div> <div class="btn" @click="toPage('/contact')">联系我们</div>
<div class="btn" @click="toPage('/recruit')">招贤纳士</div> <div class="btn" @click="toPage('/recruit')">招贤纳士</div>
<div class="btn" @click="toPage('/factory')">工厂展示</div> <div class="btn" @click="toPage('/factory')">工厂展示</div>
<div
class="btn"
@click="toPage(`${isHard ? '/industry' : '/hardware'}`)"
>
{{ isHard ? '工业设计' : '软硬件研发' }}
</div>
<div class="btn" @click="toPage('/design')">工业设计</div>
<div class="btn" @click="toPage('/metal')">加工生产</div>
<!-- <div class="btn" @click="toPage('/product')">产品研发</div> --> <!-- <div class="btn" @click="toPage('/product')">产品研发</div> -->
</div> </div>
</div> </div>
@ -76,7 +72,16 @@ const toPage = path => {
const origin = window.location.origin const origin = window.location.origin
const pathname = window.location.pathname const pathname = window.location.pathname
const p = `${origin}${pathname}#${path}` const p = `${origin}${pathname}#${path}`
if (path == '/design') {
window.location.href = 'https://iflytop.com/mobile/design/#/'
return
}
if (path == '/metal') {
window.location.href = 'https://iflytop.com/mobile/metal/#/'
return
}
window.location.href = p window.location.href = p
drawer.value = false
} }
const hidePanel = event => { const hidePanel = event => {

84
src/pages/Hardware.bak.vue
View File

@ -1,84 +0,0 @@
<template>
<div class="hardware_home_container">
<Swiper page="hardware" />
<CaseShow />
<div class="img_wrap">
<img :src="Hard" class="img" alt="" />
</div>
<HeadLine
title="合作过的"
themeTitle="芯片原厂"
:flip="true"
line1="医疗企业 互联网公司 智能硬件公司 科研院所 工业自动化企业"
/>
<img :src="Chip" class="img" alt="" />
<img :src="Wu" class="img" alt="" />
<!-- <Track /> -->
<HeadLine
title="专家"
themeTitle="电机控制"
line1="自主研发电机驱动器，让控制更加精准"
/>
<div class="img_wrap">
<img :src="Dian" class="img" alt="" />
<div class="gif_wrap">
<img :src="Gif2" class="left_img" alt="" />
<img :src="SAccelerate" class="right_img" alt="" />
</div>
<div class="gif_wrap">
<img :src="Gif1" class="left_img" alt="" />
<img :src="TAccelerate" class="right_img" alt="" />
</div>
</div>
<AboutUs />
<Cooperation />
</div>
</template>
<script setup>
import Swiper from 'cpns/Swiper'
import CaseShow from 'cpns/CaseShow'
import Hard from '@/static/img/hardware/hardware.png'
import Chip from '@/static/img/hardware/chip.png'
import HeadLine from 'cpns/HeadLine'
import Track from 'cpns/Track'
import Wu from '@/static/img/hardware/wulianwang.png'
import Dian from '@/static/img/hardware/dianji.png'
import AboutUs from 'cpns/AboutUs.vue'
import Cooperation from 'cpns/Cooperation'
import Bottom from 'cpns/Bottom'
import SAccelerate from '@/static/img/hardware/s-accelerate.png'
import TAccelerate from '@/static/img/hardware/t-accelerate.png'
import Gif1 from '@/static/img/hardware/1.gif'
import Gif2 from '@/static/img/hardware/2.gif'
</script>
<style lang="scss" scoped>
.hardware_home_container {
background: #f5f5f5;
max-width: 100vw;
overflow: hidden;
.img_wrap {
padding: 0 7px;
.gif_wrap {
display: flex;
align-items: center;
margin-bottom: 5px;
border-radius: 3px;
overflow: hidden;
.left_img {
width: 133px;
height: 67px;
}
.right_img {
width: 63%;
height: 67px;
}
}
}
.img {
width: 100%;
height: auto;
}
}
</style>

54
src/pages/Industry.vue
View File

@ -1,54 +0,0 @@
<template>
<div class="industry_container">
<div class="top_wrap"><Top /></div>
<img :src="Home1" class="bg" alt="" />
<NewTrack />
<Card :caseList="getData()" :classify="trackStore.industryTab" />
<img :src="Home2" class="bg" alt="" />
</div>
</template>
<script setup>
import Top from 'cpns/Top'
import HeadLine from 'cpns/HeadLine'
import Home1 from '@/static/img/newpage/abc.png'
import NewTrack from 'cpns/NewTrack'
import Home2 from '@/static/img/newpage/home2.png'
import Card from 'cpns/Card'
import { caseList as homeList } from '@/mock'
import { useRoute } from 'vue-router'
import { useTrackStore } from '@/store'
import { caseList } from '@/mock/case_detail'
const route = useRoute()
const trackStore = useTrackStore()
const getData = () => {
// 根据激活tab展示产品
if (trackStore.industryTab == 0) {
return homeList
}
return caseList[parseInt(trackStore.industryTab)]
}
</script>
<style lang="scss" scoped>
.industry_container {
max-width: 100vw;
overflow: hidden;
padding-bottom: 12px;
background: #f6f6f6;
.top_wrap {
position: absolute;
left: 0;
top: 0;
right: 0;
width: 100%;
height: 47px;
z-index: 200;
}
.bg {
width: 100vw;
height: auto;
}
}
</style>

47
src/pages/index.bak.vue
View File

@ -1,47 +0,0 @@
<template>
<div class="home_container">
<Swiper />
<CaseShow />
<Hardware />
<MechanicalDrive />
<!-- <Track /> -->
<OneStop />
<AboutUs />
<!-- <News /> -->
<Cooperation />
<Awards />
</div>
</template>
<script setup>
import Swiper from 'cpns/Swiper'
import CaseShow from 'cpns/CaseShow'
import Hardware from 'cpns/Hardware'
import MechanicalDrive from 'cpns/MechanicalDrive'
import AboutUs from 'cpns/AboutUs'
import Track from 'cpns/Track'
import OneStop from 'cpns/OneStop'
import News from 'cpns/News'
import Cooperation from 'cpns/Cooperation'
import Awards from 'cpns/Awards'
import { ref } from 'vue'
// const isDrag = ref(false)
// const handlePress = e => {
// // 背景虚化
// isDrag.value = true
// }
// const handleRelease = e => {
// // 背景实体化
// isDrag.value = false
// }
</script>
<style lang="scss" scoped>
.home_container {
background: #f5f5f5;
max-width: 100vw;
overflow: hidden;
}
</style>

95
src/pages/index.vue
View File

@ -1,95 +0,0 @@
<template>
<div class="home_container">
<div class="img_wrap">
<img :src="HomeBackground" class="bg" alt="" />
<div class="btn1" @click="toPage('/industry')"></div>
<div class="btn2" @click="toPage('/hardware')"></div>
<div class="btn3" @click="toPage('/case-show')"></div>
<div class="btn4" @click="toPage('/factory')"></div>
<div class="btn5" @click="toPage('/recruit')"></div>
<div class="btn6" @click="toPage('/contact')"></div>
</div>
<div class="top_wrap"><Top :newpage="true" /></div>
</div>
</template>
<script setup>
import HomeBackground from '@/static/img/newpage/home.png'
import { useRouter } from 'vue-router'
import Top from 'cpns/Top'
const router = useRouter()
const toPage = path => {
router.push(path)
}
</script>
<style lang="scss" scoped>
.home_container {
max-width: 100vw;
overflow: hidden;
background: #f6f6f6;
padding-bottom: 12px;
.top_wrap {
position: absolute;
left: 0;
top: 0;
right: 0;
width: 100%;
height: 47px;
z-index: 200;
}
.img_wrap {
position: relative;
.bg {
width: 100vw;
height: auto;
}
.btn1 {
position: absolute;
left: 2vw;
bottom: 60vw;
width: 47vw;
height: 27vw;
}
.btn2 {
position: absolute;
right: 2vw;
bottom: 60vw;
width: 47vw;
height: 27vw;
}
.btn3 {
position: absolute;
left: 2vw;
bottom: 31vw;
width: 47vw;
height: 27vw;
}
.btn4 {
position: absolute;
right: 2vw;
bottom: 31vw;
width: 47vw;
height: 27vw;
}
.btn5 {
position: absolute;
left: 2vw;
bottom: 2vw;
width: 47vw;
height: 27vw;
}
.btn6 {
position: absolute;
right: 2vw;
bottom: 2vw;
width: 47vw;
height: 27vw;
}
}
}
</style>

4
src/router/index.js
View File

@ -14,16 +14,14 @@ const Industry = () => import('@/pages/Industry')
// 配置路由信息 // 配置路由信息
const routes = [ const routes = [
{ path: '/', component: Home },
{ path: '/', component: Hardware },
{ path: '/detail', component: Detail }, { path: '/detail', component: Detail },
{ path: '/industry', component: Industry },
{ path: '/recruit', component: Recruit }, { path: '/recruit', component: Recruit },
{ path: '/contact', component: Contact }, { path: '/contact', component: Contact },
{ path: '/hardware-case', component: HardwareCase }, { path: '/hardware-case', component: HardwareCase },
{ path: '/company', component: Company }, { path: '/company', component: Company },
{ path: '/case-show', component: CaseShow }, { path: '/case-show', component: CaseShow },
{ path: '/product', component: Product }, { path: '/product', component: Product },
{ path: '/hardware', component: Hardware },
{ path: '/code', component: QRCode }, { path: '/code', component: QRCode },
{ path: '/factory', component: Factory }, { path: '/factory', component: Factory },
] ]

2
vite.config.js
View File

@ -18,7 +18,7 @@ export default defineConfig({
host: '0.0.0.0', host: '0.0.0.0',
}, },
plugins: [vue()], plugins: [vue()],
base: '/mobile/',
base: '/mobile/hardware/',
//配置sass //配置sass
css: { css: {
preprocessorOptions: { preprocessorOptions: {

Write Preview
Loading…
Cancel
Save