maochaoying
2 years ago
13 changed files with 272 additions and 78 deletions
-
7src/components/CaseCard/index.vue
-
21src/components/LeftNav/index.vue
-
16src/views/Index/components/CaseDetails/index.vue
-
0src/views/Index/components/MechanicalControl/index.vue
-
107src/views/Index/components/MechanicalDrive/Card/index.vue
-
111src/views/Index/components/MechanicalDrive/index.vue
-
0src/views/Index/components/ReadWidely/index.vue
-
16src/views/Index/components/SoftHardwareDetail/Card/index.vue
-
0src/views/Index/components/WebOfThing/index.vue
-
32src/views/Index/index.vue
@ -1,7 +0,0 @@ |
|||
<template>case card</template> |
|||
|
|||
<script> |
|||
export default {} |
|||
</script> |
|||
|
|||
<style></style> |
|||
@ -1,21 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<ul> |
|||
<li>1</li> |
|||
<li>2</li> |
|||
<li>3</li> |
|||
<li>4</li> |
|||
<li>5</li> |
|||
<li>6</li> |
|||
<li>7</li> |
|||
<li>8</li> |
|||
<li>9</li> |
|||
</ul> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default {} |
|||
</script> |
|||
|
|||
<style></style> |
|||
@ -1,19 +1,9 @@ |
|||
<template> |
|||
<div class="page_padding_top"> |
|||
<div> |
|||
<h1>我们的案例</h1> |
|||
<p>line</p> |
|||
</div> |
|||
<div class="flex_center"> |
|||
<LeftNav /> |
|||
<CaseCard /> |
|||
</div> |
|||
<div class="case_detail_container">case de</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import LeftNav from 'cpns/LeftNav' |
|||
import CaseCard from 'cpns/CaseCard' |
|||
</script> |
|||
<script setup></script> |
|||
|
|||
<style scoped lang="scss"></style> |
|||
<style lang="scss" scoped></style> |
|||
@ -0,0 +1,107 @@ |
|||
<template> |
|||
<div class="dian_container"> |
|||
<img :src="getImgSrc()" alt="" class="img" /> |
|||
<div class="btn">{{ title }}</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import A1 from '@/assets/img/cicruit/1.png' |
|||
import A2 from '@/assets/img/cicruit/2.png' |
|||
import A3 from '@/assets/img/cicruit/3.png' |
|||
import A4 from '@/assets/img/cicruit/4.png' |
|||
import A5 from '@/assets/img/cicruit/5.png' |
|||
import A6 from '@/assets/img/cicruit/6.png' |
|||
import A7 from '@/assets/img/cicruit/7.png' |
|||
import A8 from '@/assets/img/cicruit/8.png' |
|||
import A9 from '@/assets/img/cicruit/9.png' |
|||
import A10 from '@/assets/img/cicruit/10.png' |
|||
import A11 from '@/assets/img/cicruit/11.png' |
|||
import A12 from '@/assets/img/cicruit/12.png' |
|||
import A13 from '@/assets/img/cicruit/13.png' |
|||
import A14 from '@/assets/img/cicruit/14.png' |
|||
import A15 from '@/assets/img/cicruit/15.png' |
|||
const props = defineProps({ |
|||
title: String, |
|||
i: String, |
|||
}) |
|||
const getImgSrc = () => { |
|||
if (props.i == '1') { |
|||
return A1 |
|||
} |
|||
if (props.i == '2') { |
|||
return A2 |
|||
} |
|||
if (props.i == '3') { |
|||
return A3 |
|||
} |
|||
if (props.i == '4') { |
|||
return A4 |
|||
} |
|||
if (props.i == '5') { |
|||
return A5 |
|||
} |
|||
if (props.i == '6') { |
|||
return A6 |
|||
} |
|||
if (props.i == '7') { |
|||
return A7 |
|||
} |
|||
if (props.i == '8') { |
|||
return A8 |
|||
} |
|||
if (props.i == '9') { |
|||
return A9 |
|||
} |
|||
if (props.i == '10') { |
|||
return A10 |
|||
} |
|||
if (props.i == '11') { |
|||
return A11 |
|||
} |
|||
if (props.i == '12') { |
|||
return A12 |
|||
} |
|||
if (props.i == '13') { |
|||
return A13 |
|||
} |
|||
if (props.i == '14') { |
|||
return A14 |
|||
} |
|||
if (props.i == '15') { |
|||
return A15 |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.dian_container { |
|||
width: 291px; |
|||
height: 195px; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
.img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.btn { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
width: 100%; |
|||
height: 50px; |
|||
background: #283fe7; |
|||
opacity: 0.5; |
|||
font-size: 18px; |
|||
font-family: 'SourceHanSans'; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
padding: 0 21px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,111 @@ |
|||
<template> |
|||
<div class="wrap"> |
|||
<div class="mechanical_drive_container" id="mechanical_drive_container"> |
|||
<div class="empty" v-if="showEmpty"></div> |
|||
<div class="contract_title"> |
|||
<p class="line"></p> |
|||
<p class="title"><span class="blue_font">机械传动</span>专家</p> |
|||
<p class="detail"> |
|||
我们精通气动、液动、电动等各种传动机构，完成机械所需的各种动作 |
|||
</p> |
|||
</div> |
|||
<div class="content_main"> |
|||
<Card title="全自动AI缠绕打包机器人" i="1" /> |
|||
<Card title="动车底部巡检" i="2" /> |
|||
<Card title="自动荧光免疫分析仪" i="3" /> |
|||
<Card title="国网照明巡检摄像头" i="4" /> |
|||
<Card title="剧本杀" i="5" /> |
|||
<Card title="水下20米AI图像识别相机" i="6" /> |
|||
<Card title="受电弓压力检测" i="7" /> |
|||
<Card title="智慧医美视频拍照系统" i="8" /> |
|||
<Card title="水处理设备" i="9" /> |
|||
<Card title="消毒拉杆箱" i="10" /> |
|||
<Card title="光伏智能接线盒" i="11" /> |
|||
<Card title="智能灯杆" i="12" /> |
|||
<Card title="微型光度计" i="13" /> |
|||
<Card title="臭氧发生器" i="14" /> |
|||
<Card title="智能猫眼" i="15" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, onMounted } from 'vue' |
|||
import { handleScreenAuto } from '@/common/utils' |
|||
import Card from './Card' |
|||
const showEmpty = ref(false) |
|||
onMounted(() => { |
|||
handleScreenAuto(showEmpty, '#mechanical_drive_container') |
|||
window.onresize = handleScreenAuto(showEmpty, '#mechanical_drive_container') |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.wrap { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background: $common_bg; |
|||
position: relative; |
|||
.mechanical_drive_container { |
|||
width: 100%; |
|||
height: 100%; |
|||
.empty { |
|||
min-height: 90px; |
|||
} |
|||
.contract_title { |
|||
z-index: 99; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
font-family: 'SourceHanSans'; |
|||
background-size: 100% 100%; |
|||
padding: 71px; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
white-space: nowrap; |
|||
.line { |
|||
width: 39px; |
|||
height: 5px; |
|||
background: #283fe7; |
|||
border-radius: 3px; |
|||
margin-bottom: 12px; |
|||
} |
|||
.img { |
|||
position: absolute; |
|||
top: 47%; |
|||
left: 50%; |
|||
transform: translateX(-50%) translateY(-50%); |
|||
width: 295px; |
|||
height: 35px; |
|||
z-index: 9; |
|||
} |
|||
.title { |
|||
font-size: 30px; |
|||
font-weight: bold; |
|||
color: #000000; |
|||
margin-bottom: 21px; |
|||
z-index: 10; |
|||
.blue_font { |
|||
color: $theme_color; |
|||
} |
|||
} |
|||
.detail { |
|||
font-size: 18px; |
|||
font-weight: 300; |
|||
color: #646a73; |
|||
font-family: 'SourceHanSansLight'; |
|||
} |
|||
} |
|||
.content_main { |
|||
padding: 0 99px; |
|||
display: grid; |
|||
justify-content: space-evenly; |
|||
grid-template-columns: repeat(5, 1fr); |
|||
grid-template-rows: repeat(3, 1fr); |
|||
row-gap: 37px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue