首页静态效果完成
zjlnb666
4 weeks ago
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 496 KiB |
|
After Width: | Height: | Size: 64 KiB |
|
After Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 127 KiB |
|
After Width: | Height: | Size: 173 KiB |
|
After Width: | Height: | Size: 102 KiB |
|
After Width: | Height: | Size: 604 KiB |
@ -0,0 +1,210 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="productDisplay">
|
||||
<p class="p">产品展示</p>
|
||||
<div class="prodList" >
|
||||
<div class="type-row">
|
||||
<div>
|
||||
<div class="title">PH-AIMIC01</div>
|
||||
<div class="name">AI会议圆阵麦克风</div>
|
||||
<div class="more">了解更多</div>
|
||||
</div>
|
||||
<div class="img">
|
||||
<img src="@/assets/img/product.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="type-row">
|
||||
<div>
|
||||
<div class="title">PH-AIMIC01</div>
|
||||
<div class="name">AI会议圆阵麦克风</div>
|
||||
<div class="more">了解更多</div>
|
||||
</div>
|
||||
<div class="img">
|
||||
<img src="@/assets/img/product1.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="type-col">
|
||||
<div>
|
||||
<div class="title">PH-AIMIC01</div>
|
||||
<div class="name">AI会议圆阵麦克风</div>
|
||||
<div class="more">了解更多</div>
|
||||
</div>
|
||||
<div class="img">
|
||||
<img src="@/assets/img/product2.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="type-short">
|
||||
<div>
|
||||
<div class="title">PH-AIMIC01</div>
|
||||
<div class="name">AI会议圆阵麦克风</div>
|
||||
<div class="more">了解更多</div>
|
||||
</div>
|
||||
<div class="img">
|
||||
<img src="@/assets/img/product4.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="more-produce">
|
||||
更多产品
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.productDisplay{
|
||||
padding: 60px 40.31px;
|
||||
.p{
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
line-height: 100%;
|
||||
color: #000000;
|
||||
}
|
||||
.prodList{
|
||||
& >div{
|
||||
flex-grow: 1;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
& .more{
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
transform: scale(1.01);
|
||||
}
|
||||
}
|
||||
margin-top: 40px;
|
||||
height: 565px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
justify-content: space-between;
|
||||
.type-row{
|
||||
padding:40px 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-radius: 20px;
|
||||
width: 730px;
|
||||
height: 273px;
|
||||
background-image: url("@/assets/img/productBg.png");
|
||||
.title{
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 1em;
|
||||
color: #fff;
|
||||
}
|
||||
.name{
|
||||
margin-top: 30px;
|
||||
font-weight: 500;
|
||||
font-size: 26px;
|
||||
line-height: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
.more{
|
||||
width: 118px;
|
||||
height: 38px;
|
||||
text-align: center;
|
||||
border: 1px solid #FFFFFF7D;
|
||||
border-radius: 66px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 38px;
|
||||
margin-top: 70px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
}
|
||||
.type-col{
|
||||
padding: 30px;
|
||||
border-radius: 20px;
|
||||
width: 375px;
|
||||
height: 557px;
|
||||
background-image: url("@/assets/img/productBg1.png");
|
||||
.title{
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
.name{
|
||||
margin-top: 30px;
|
||||
font-weight: 500;
|
||||
font-size: 26px;
|
||||
line-height: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
.more{
|
||||
width: 118px;
|
||||
height: 38px;
|
||||
text-align: center;
|
||||
border: 1px solid #FFFFFF7D;
|
||||
border-radius: 66px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 38px;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 30px;
|
||||
color: #fff;
|
||||
}
|
||||
.img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.type-short{
|
||||
padding: 30px;
|
||||
border-radius: 20px;
|
||||
width: 375px;
|
||||
height: 464px;
|
||||
background-image: url("@/assets/img/productBg1.png");
|
||||
.title{
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
.name{
|
||||
margin-top: 30px;
|
||||
font-weight: 500;
|
||||
font-size: 26px;
|
||||
line-height: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
.more{
|
||||
width: 118px;
|
||||
height: 38px;
|
||||
text-align: center;
|
||||
border: 1px solid #FFFFFF7D;
|
||||
border-radius: 66px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 38px;
|
||||
margin: 50px 0 30px 0;
|
||||
color: #fff;
|
||||
}
|
||||
.img{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.more-produce{
|
||||
background: #191919;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
width: 367px;
|
||||
height: 67px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border:1px solid #DEDEDE;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,35 @@
|
||||
<script setup>
|
||||
import {reactive} from "vue";
|
||||
|
||||
const swiperItem=reactive([
|
||||
{
|
||||
src:'/src/assets/image/轮播图2.png'
|
||||
},
|
||||
{
|
||||
src:'/src/assets/image/轮播图2.png'
|
||||
},
|
||||
{
|
||||
src:'/src/assets/image/轮播图2.png'
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="block text-center swiper" m="t-4">
|
||||
<el-carousel trigger="click" height="852px" :arrow="'never'" indicator-position :autoplay="true">
|
||||
<el-carousel-item v-for="(item,index) in swiperItem" :key="index">
|
||||
<img :src=item.src :alt=index>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.swiper{
|
||||
height:852px;
|
||||
.el-carousel{
|
||||
--el-carousel-indicator-height:12.53px;
|
||||
--el-carousel-indicator-width:203.69px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,20 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="header">
|
||||
<img src="@/assets/img/tc-top.png" alt="">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.header{
|
||||
height: 618px;
|
||||
img{
|
||||
width:100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
</style>
|
||||