maochaoying
/
mobile-design
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
2270013b5f
commit
78dc415b1a
11 changed files with 23 additions and 353 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. 8
      src/components/Bottom.vue
  3. 9
      src/components/SubNavigation.vue
  4. 16
      src/components/Top.vue
  5. 84
      src/pages/Hardware.bak.vue
  6. 95
      src/pages/Hardware.vue
  7. 10
      src/pages/HardwareCase.vue
  8. 47
      src/pages/index.bak.vue
  9. 95
      src/pages/index.vue
  10. 8
      src/router/index.js
  11. 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>

8
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
}
if (route.path.indexOf('/industry') != -1) {
return BottomBackground2
}
return BottomBackground
return BottomBackground2
} }
const addWeChat = () => { const addWeChat = () => {

9
src/components/SubNavigation.vue
View File

@ -19,6 +19,7 @@
<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('/hardware')">软硬件研发</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>
@ -41,6 +42,14 @@ 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 == '/hardware') {
window.location.href = 'https://iflytop.com/mobile/hardware/#/'
return
}
if (path == '/metal') {
window.location.href = 'https://iflytop.com/mobile/metal/#/'
return
}
window.location.href = p window.location.href = p
} }

16
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('/hardware')">软硬件研发</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,6 +72,14 @@ 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 == '/hardware') {
window.location.href = 'https://iflytop.com/mobile/hardware/#/'
return
}
if (path == '/metal') {
window.location.href = 'https://iflytop.com/mobile/metal/#/'
return
}
window.location.href = p window.location.href = p
} }

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>

95
src/pages/Hardware.vue
View File

@ -1,95 +0,0 @@
<template>
<div class="hardware_container">
<div class="top_wrap"><Top :hardLogo="true" /></div>
<img :src="Home1" class="bg" alt="" />
<NewTrack :hard="true" />
<Card :caseList="getData()" :classify="trackStore.hardwareTab" />
<HeadLine title="专家" themeTitle="电机控制" />
<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>
<img :src="Home2" class="bg" alt="" />
<img :src="Home5" class="bg" alt="" />
</div>
</template>
<script setup>
import Top from 'cpns/Top'
import HeadLine from 'cpns/HeadLine'
import Dian from '@/static/img/hardware/dianji.png'
import Home1 from '@/static/img/newpage/def.png'
import SAccelerate from '@/static/img/hardware/s-accelerate.png'
import TAccelerate from '@/static/img/hardware/t-accelerate.png'
import Home2 from '@/static/img/newpage/home4.png'
import Home5 from '@/static/img/newpage/home5.png'
import Card from 'cpns/Card'
import Gif1 from '@/static/img/hardware/1.gif'
import Gif2 from '@/static/img/hardware/2.gif'
import { hardCaseList as homeList } from '@/mock'
import { useTrackStore } from '@/store'
import NewTrack from 'cpns/NewTrack'
import { useRoute } from 'vue-router'
import { caseList } from '@/mock/case_detail'
const route = useRoute()
const trackStore = useTrackStore()
const getData = () => {
// 根据激活tab展示产品
if (trackStore.hardwareTab == 0) {
return homeList
}
return caseList[parseInt(trackStore.hardwareTab)]
}
</script>
<style lang="scss" scoped>
.hardware_container {
max-width: 100vw;
overflow: hidden;
padding-bottom: 12px;
background: #f6f6f6;
.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;
}
}
}
.top_wrap {
position: absolute;
left: 0;
top: 0;
right: 0;
width: 100%;
height: 47px;
z-index: 200;
}
.bg {
width: 100vw;
height: auto;
}
.img {
width: 100%;
height: auto;
}
}
</style>

10
src/pages/HardwareCase.vue
View File

@ -1,10 +0,0 @@
<template>
<div class="hardware_case_container">hardware case</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.hardware_case_container {
}
</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>

8
src/router/index.js
View File

@ -1,29 +1,23 @@
import { createRouter, createWebHashHistory } from 'vue-router' import { createRouter, createWebHashHistory } from 'vue-router'
const Home = () => import('@/pages')
const Detail = () => import('@/pages/Detail') const Detail = () => import('@/pages/Detail')
const Recruit = () => import('@/pages/Recruit') const Recruit = () => import('@/pages/Recruit')
const Contact = () => import('@/pages/Contact') const Contact = () => import('@/pages/Contact')
const HardwareCase = () => import('@/pages/HardwareCase')
const Company = () => import('@/pages/Company') const Company = () => import('@/pages/Company')
const CaseShow = () => import('@/pages/CaseShow') const CaseShow = () => import('@/pages/CaseShow')
const Product = () => import('@/pages/Product') const Product = () => import('@/pages/Product')
const Hardware = () => import('@/pages/Hardware')
const QRCode = () => import('@/pages/QRCode') const QRCode = () => import('@/pages/QRCode')
const Factory = () => import('@/pages/Factory') const Factory = () => import('@/pages/Factory')
const Industry = () => import('@/pages/Industry') const Industry = () => import('@/pages/Industry')
// 配置路由信息 // 配置路由信息
const routes = [ const routes = [
{ path: '/', component: Home },
{ path: '/', component: Industry },
{ 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: '/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/design/',
//配置sass //配置sass
css: { css: {
preprocessorOptions: { preprocessorOptions: {

Write Preview
Loading…
Cancel
Save