master
夜笙歌
1 year ago
parent
7eca889f67
commit
15a4dd5dbe
@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="title">TEAM STYLE</div>
|
||||
<div class="subTitle">团队风貌</div>
|
||||
<div class="newsList">
|
||||
<div v-for="i in 6" class="newsItem">
|
||||
<div class="image">
|
||||
<el-image
|
||||
style="width: 100%;height: 100%"
|
||||
:src="banner"
|
||||
fit="contain"></el-image>
|
||||
</div>
|
||||
<div class="itemTitle">成立会议</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="learnMore">
|
||||
<el-button type="primary" plain>查看更多</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import banner from '@/assets/image/banner.png'
|
||||
|
||||
export default {
|
||||
name: 'ProductCenter',
|
||||
data() {
|
||||
return {
|
||||
banner,
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/style.less";
|
||||
|
||||
.content {
|
||||
width: 70vw;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 4.2vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 2.5vw;
|
||||
letter-spacing: 2px;
|
||||
color: #0003;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
margin-top: 0.4vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.9vw;
|
||||
letter-spacing: 2px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.newsList {
|
||||
width: 65vw;
|
||||
margin: 3.9vw auto 0;
|
||||
|
||||
.newsItem {
|
||||
display: inline-block;
|
||||
width: 32%;
|
||||
height: 17vw;
|
||||
margin: 0 2% 1.4vw 0;
|
||||
background-color: #f8f8f8;
|
||||
text-align: left;
|
||||
&:nth-child(3n){
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.image{
|
||||
width: 100%;
|
||||
height: 73%;
|
||||
}
|
||||
|
||||
.itemTitle{
|
||||
width: 100%;
|
||||
height: 27%;
|
||||
text-align: center;
|
||||
line-height: 4.3vw;
|
||||
font-size: 1.3vw;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div>
|
||||
<TitleGroup>
|
||||
<template slot="title">HIGH FREQUENCY RFID</template>
|
||||
<template slot="subTitle">高频RFID产品系列</template>
|
||||
</TitleGroup>
|
||||
<div class="tabs">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane name="1" label="高频RFID读头">
|
||||
<transition name="fade">
|
||||
<div v-if="activeName === '1'" style="position:relative;">
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="itemTitle">产品型号</div>
|
||||
<div class="itemCode">HW-RFR-050-B-003-B1204S</div>
|
||||
<div class="image">
|
||||
<el-image
|
||||
style="width: 100%; height: 100%"
|
||||
:src="banner"
|
||||
fit="contain"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="infos" v-for="i in 7">
|
||||
<div class="infoTitle">射频协议</div>
|
||||
<div class="infoNum">符合ISO/IEC 13.56MHZ</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="2" label="高频RFID一体机">
|
||||
<transition name="fade">
|
||||
<div v-if="activeName === '2'" style="position:relative;">
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="itemTitle">产品型号</div>
|
||||
<div class="itemCode">HW-RFR-050-B-003-B1204S</div>
|
||||
<div class="image">
|
||||
<el-image
|
||||
style="width: 100%; height: 100%"
|
||||
:src="banner"
|
||||
fit="contain"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="infos" v-for="i in 7">
|
||||
<div class="infoTitle">射频协议</div>
|
||||
<div class="infoNum">符合ISO/IEC 13.56MHZ</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="3" label="协议网关">
|
||||
<transition name="fade">
|
||||
<div v-if="activeName === '3'" style="position:relative;">
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="itemTitle">产品型号</div>
|
||||
<div class="itemCode">HW-RFR-050-B-003-B1204S</div>
|
||||
<div class="image">
|
||||
<el-image
|
||||
style="width: 100%; height: 100%"
|
||||
:src="banner"
|
||||
fit="contain"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="infos" v-for="i in 7">
|
||||
<div class="infoTitle">射频协议</div>
|
||||
<div class="infoNum">符合ISO/IEC 13.56MHZ</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="4" label="高频RFID圆环标签">
|
||||
<transition name="fade">
|
||||
<div v-if="activeName === '4'" style="position:relative;">
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="itemTitle">产品型号</div>
|
||||
<div class="itemCode">HW-RFR-050-B-003-B1204S</div>
|
||||
<div class="image">
|
||||
<el-image
|
||||
style="width: 100%; height: 100%"
|
||||
:src="banner"
|
||||
fit="contain"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="infos" v-for="i in 7">
|
||||
<div class="infoTitle">射频协议</div>
|
||||
<div class="infoNum">符合ISO/IEC 13.56MHZ</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TitleGroup from "@/components/TitleGroup";
|
||||
import banner from '@/assets/image/banner.png'
|
||||
|
||||
export default {
|
||||
name: 'HighFrequencyRFID',
|
||||
components: {
|
||||
TitleGroup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
banner,
|
||||
activeName: '1'
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/style.less";
|
||||
|
||||
.tabs {
|
||||
text-align: left;
|
||||
margin-top: 2.3vw;
|
||||
|
||||
/deep/ .el-tabs__header {
|
||||
margin: 0 20vw 15px;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__content {
|
||||
padding: 0 20vw;
|
||||
background-color: fade(@standard-color, 10);
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__nav-wrap::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__item {
|
||||
letter-spacing: 3px;
|
||||
padding: 0 2vw;
|
||||
height: 2.9vw;
|
||||
font-size: 1.6vw;
|
||||
}
|
||||
/deep/.el-tabs__item {
|
||||
line-height: 2.9vw;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__item.is-active {
|
||||
font-weight: 600;
|
||||
color: @standard-color;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__active-bar {
|
||||
height: 4px;
|
||||
background-color: @standard-color;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 2.2vw 0;
|
||||
|
||||
.left {
|
||||
width: 34%;
|
||||
height: 21.7vw;
|
||||
display: inline-block;
|
||||
box-shadow: 0 0 3px #0002;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
|
||||
.itemTitle {
|
||||
padding-top: 1.2vw;
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
.itemCode {
|
||||
margin-top: 0.2vw;
|
||||
font-size: 1.1vw;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 80%;
|
||||
margin-top: 1vw;
|
||||
margin-left: 10%;
|
||||
height: 15vw;
|
||||
background-color: cadetblue;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: 1%;
|
||||
width: 65%;
|
||||
height: 21.2vw;
|
||||
display: inline-block;
|
||||
box-shadow: 0 0 5px #0002;
|
||||
background-color: #fff;
|
||||
padding-top: 0.5vw;
|
||||
|
||||
.infos {
|
||||
width: 93%;
|
||||
margin: 0 auto;
|
||||
border-bottom: 1px dashed #0003;
|
||||
position: relative;
|
||||
height: 2.9vw;
|
||||
}
|
||||
|
||||
.infoTitle {
|
||||
position: absolute;
|
||||
width: 96%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 4%;
|
||||
text-align: left;
|
||||
font-size: 1vw;
|
||||
letter-spacing: 1px;
|
||||
color: #0009;
|
||||
line-height: 2.9vw;
|
||||
}
|
||||
|
||||
.infoNum {
|
||||
position: absolute;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 5%;
|
||||
text-align: right;
|
||||
font-size: 1vw;
|
||||
letter-spacing: 1.4px;
|
||||
color: #000;
|
||||
line-height: 2.9vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fade-enter-active {
|
||||
animation: fadeInRight;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
.fade-leave-active {
|
||||
animation: fadeOutLeft;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue