|
|
|
@ -1,7 +1,108 @@ |
|
|
|
<template>SoftHardwareDetail</template> |
|
|
|
<template> |
|
|
|
<div class="wrap"> |
|
|
|
<div class="hardware_detail_container" id="hardware_detail_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> |
|
|
|
</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> |
|
|
|
export default {} |
|
|
|
<script setup> |
|
|
|
import { ref, onMounted } from 'vue' |
|
|
|
import { handleScreenAuto } from '@/common/utils' |
|
|
|
import Card from './Card' |
|
|
|
const showEmpty = ref(false) |
|
|
|
onMounted(() => { |
|
|
|
handleScreenAuto(showEmpty, '#hardware_detail_container') |
|
|
|
window.onresize = handleScreenAuto(showEmpty, '#hardware_detail_container') |
|
|
|
}) |
|
|
|
</script> |
|
|
|
|
|
|
|
<style></style> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.wrap { |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
background: $common_bg; |
|
|
|
position: relative; |
|
|
|
.hardware_detail_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: 52px 0 24px 0; |
|
|
|
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 173px; |
|
|
|
display: grid; |
|
|
|
justify-content: space-evenly; |
|
|
|
grid-template-columns: repeat(5, 1fr); |
|
|
|
grid-template-rows: repeat(3, 1fr); |
|
|
|
row-gap: 37px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
maochaoying
2 years ago
