Compare commits
3 Commits
7d543eb202
...
a8fd561f41
| Author | SHA1 | Date |
|---|---|---|
zjlnb666
|
a8fd561f41 | 3 weeks ago |
|
zjlnb666
|
dbd969faa4 | 3 weeks ago |
|
zjlnb666
|
a7d79754d3 | 3 weeks ago |
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 536 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
@ -0,0 +1,79 @@
|
||||
<script setup>
|
||||
import { defineProps, defineEmits, ref } from 'vue'
|
||||
const props = defineProps({
|
||||
src: {
|
||||
type: String,
|
||||
default:'#'
|
||||
},
|
||||
label:{
|
||||
type: String,
|
||||
default:'---------'
|
||||
},
|
||||
name:{
|
||||
type: String,
|
||||
default:'-----'
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="item">
|
||||
<div class="image">
|
||||
<img :src=src alt="">
|
||||
</div>
|
||||
<div>
|
||||
<p>{{label}}</p>
|
||||
<p>
|
||||
<span>
|
||||
{{name}}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.item{
|
||||
width: 417px;
|
||||
height: 528px;
|
||||
box-shadow: 0px 6px 20.6px 0px #9CA2A240;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
.image{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow-block: hidden;
|
||||
height: 300px;
|
||||
align-items: center;
|
||||
}
|
||||
p{
|
||||
text-align: center;
|
||||
}
|
||||
& p:nth-child(1){
|
||||
font-weight: 500;
|
||||
font-size: 26px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0.06em;
|
||||
color: #333333;
|
||||
}
|
||||
& p:nth-child(2){
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0.06em;
|
||||
color: #999999;
|
||||
margin-top: 30px;
|
||||
span{
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background: #F2F2F2;
|
||||
border: 1px solid #FFFFFF;
|
||||
border-radius: 69px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,46 @@
|
||||
<script setup>
|
||||
import {defineProps} from 'vue'
|
||||
const props=defineProps({
|
||||
itemName:{
|
||||
type:String,
|
||||
default:'文件名称'
|
||||
},
|
||||
url:{
|
||||
type:String,
|
||||
default:'地址错误'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="service-item">
|
||||
<div class="text">{{itemName}}</div>
|
||||
<a class="download hover-effect">下载</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.service-item {
|
||||
box-shadow: 0 6px 25.4px 0 #C1C6C740;
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 1205px;
|
||||
.download{
|
||||
color: #AEAEAE;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.text{
|
||||
font-weight: 400;
|
||||
font-size: 30px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0.06em;
|
||||
color: #333333;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,134 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import ProductItem from "@/components/product/productItem.vue";
|
||||
import img1 from '../assets/img/product-item1.png'
|
||||
import img2 from '../assets/img/product-item2.png'
|
||||
import img3 from '../assets/img/product-item3.png'
|
||||
import img4 from '../assets/img/product-item4.png'
|
||||
import img5 from '../assets/img/product-item5.png'
|
||||
import img6 from '../assets/img/product-item6.png'
|
||||
const middleware=[
|
||||
{
|
||||
label:'圆形阵列麦克风开发板',
|
||||
name:'PH-MOS01',
|
||||
src:img1
|
||||
},
|
||||
{
|
||||
label:'反馈抑制模块',
|
||||
name:'PH-MOS02',
|
||||
src:img2
|
||||
},
|
||||
{
|
||||
label:'指向性调节模块',
|
||||
name:'PH-MOS03',
|
||||
src:img3
|
||||
},
|
||||
]
|
||||
const productList=[
|
||||
{
|
||||
label:'AI会议圆阵麦克风',
|
||||
name:'PH-AIMIC01',
|
||||
src:img4
|
||||
},
|
||||
{
|
||||
label:'高速流数据加解密BOX',
|
||||
name:'PH-AB12',
|
||||
src:img5
|
||||
},
|
||||
{
|
||||
label:'超融合会议一体机',
|
||||
name:'PH-ML04',
|
||||
src:img6
|
||||
},
|
||||
{
|
||||
label:'强声音箱',
|
||||
name:'PH-QS01',
|
||||
src:img6
|
||||
},
|
||||
]
|
||||
|
||||
const activeName = ref('first')
|
||||
|
||||
const handleClick = (tab, event) => {
|
||||
console.log(tab, event)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="header">
|
||||
<img src="@/assets/img/product-top.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-tabs v-model="activeName" class="demo-tabs product-tab" @tab-click="handleClick">
|
||||
<el-tab-pane label="音频中间件" name="first">
|
||||
<ProductItem
|
||||
v-for="item in middleware"
|
||||
:label="item.label"
|
||||
:name="item.name"
|
||||
:src="item.src"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="音视频产品" name="second">
|
||||
<ProductItem
|
||||
v-for="item in productList"
|
||||
:label="item.label"
|
||||
:name="item.name"
|
||||
:src="item.src"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.header{
|
||||
img{
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.el-tabs{
|
||||
--el-color-primary: #282828;
|
||||
--el-text-color-primary: #D3BEBE;
|
||||
--el-color-black:#D3BEBE;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<style lang="less">
|
||||
.product-tab{
|
||||
.el-tabs__content {
|
||||
width: 1331px;
|
||||
margin:20px auto 50px;
|
||||
color: #6b778c;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
padding: 20px;
|
||||
.el-tab-pane{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
&::after{
|
||||
content:'';
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-tabs__nav-scroll{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.el-tabs__item{
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0.06em;
|
||||
margin:20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue