generated from maochaoying/dreamworks-mobile
maochaoying
2 years ago
12 changed files with 27 additions and 450 deletions
-
2index.html
-
147src/components/Bottom.bak.vue
-
8src/components/Bottom.vue
-
4src/components/HeadLine.vue
-
13src/components/SubNavigation.vue
-
17src/components/Top.vue
-
84src/pages/Hardware.bak.vue
-
54src/pages/Industry.vue
-
47src/pages/index.bak.vue
-
95src/pages/index.vue
-
4src/router/index.js
-
2vite.config.js
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue