Compare commits
No commits in common. 'a8fd561f41449e3dafeca54d3a0d7488798945fb' and '7d543eb2020f508533b04f3ea2c241a3c792bd32' have entirely different histories.
a8fd561f41
...
7d543eb202
Binary file not shown.
|
Before Width: | Height: | Size: 145 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 188 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 536 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 124 KiB |
@ -1,79 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,134 +0,0 @@
|
|||||||
<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