199 lines
5.6 KiB
Vue
199 lines
5.6 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-carousel :interval="4000" type="card" height="300px">
|
||
<el-carousel-item v-for="item in imagesArray" :key="item">
|
||
<el-image :src="item" ></el-image>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
<div class="idea_main">
|
||
<div class="idea_left">
|
||
<p class="title">上海干巷车镜实业有限公司</p>
|
||
<p class="sub_title">公司介绍</p>
|
||
<p class="desc">
|
||
上海干巷车镜实业有限公司是上海市高新技术企业、上海市文明单位、上海市优秀企业形象单位、国家汽车零部件出口基地企业。
|
||
公司创建于1958年，1970年开始生产汽车、摩托车后视镜。经过三十多年的艰苦创业和技术改造，现已成为国内专业生产各种型号汽车后视镜行业骨干企业。公司现有员工400多人。
|
||
公司主要生产汽车后视镜总成、汽车工程塑料件，汽车车身油漆件等零部件。
|
||
</p>
|
||
</div>
|
||
<div class="idea_right">
|
||
<el-image :src="imagesArray[0]" ></el-image>
|
||
</div>
|
||
</div>
|
||
<div class="intro_main">
|
||
<div class="title">我们的产品</div>
|
||
<div class="intro_context">
|
||
<div class="card">
|
||
<div class="card-wrap">
|
||
<el-image :src="imagesArray[0]" class="image"></el-image>
|
||
<div>
|
||
<p class="title">我们的产品</p>
|
||
<p class="card-context">
|
||
上海干巷车镜实业有限公司是上海市高新技术企业、上海市文明单位、上海市优秀企业形象单位、国家汽车零部件出口基地企业。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-wrap">
|
||
<el-image :src="imagesArray[0]" class="image"></el-image>
|
||
<div>
|
||
<p class="title">我们的产品</p>
|
||
<p class="card-context">
|
||
上海干巷车镜实业有限公司是上海市高新技术企业、上海市文明单位、上海市优秀企业形象单位、国家汽车零部件出口基地企业。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-wrap">
|
||
<el-image :src="imagesArray[0]" class="image"></el-image>
|
||
<div>
|
||
<p class="title">我们的产品</p>
|
||
<p class="card-context">
|
||
上海干巷车镜实业有限公司是上海市高新技术企业、上海市文明单位、上海市优秀企业形象单位、国家汽车零部件出口基地企业。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-wrap">
|
||
<el-image :src="imagesArray[0]" class="image"></el-image>
|
||
<div>
|
||
<p class="title">我们的产品</p>
|
||
<p class="card-context">
|
||
上海干巷车镜实业有限公司是上海市高新技术企业、上海市文明单位、上海市优秀企业形象单位、国家汽车零部件出口基地企业。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import logoImg1 from '@/assets/image/door/1.jpg'
|
||
import logoImg2 from '@/assets/image/door/2.jpg'
|
||
import logoImg3 from '@/assets/image/door/3.jpg'
|
||
import logoImg4 from '@/assets/image/door/4.jpg'
|
||
import logoImg5 from '@/assets/image/door/5.jpg'
|
||
export default {
|
||
name: 'index',
|
||
data() {
|
||
return {
|
||
imagesArray: [logoImg5, logoImg2, logoImg3, logoImg4, logoImg1],
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.el-carousel__item h3 {
|
||
color: #475669;
|
||
font-size: 14px;
|
||
opacity: 0.75;
|
||
line-height: 200px;
|
||
margin: 0;
|
||
}
|
||
|
||
.el-carousel__item:nth-child(2n) {
|
||
background-color: #99a9bf;
|
||
}
|
||
|
||
.el-carousel__item:nth-child(2n + 1) {
|
||
background-color: #d3dce6;
|
||
}
|
||
.idea_main {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.idea_left {
|
||
flex: 1;
|
||
padding: 5px;
|
||
.title {
|
||
font-weight: 700;
|
||
font-size: 32px;
|
||
position: relative;
|
||
bottom: 2px;
|
||
margin-left: 10px;
|
||
}
|
||
.sub_title {
|
||
font-size: 16px;
|
||
line-height: 1.5;
|
||
color: #646a73;
|
||
margin-top: 10px;
|
||
margin-left: 10px;
|
||
}
|
||
.desc {
|
||
overflow: hidden;
|
||
height: 120px;
|
||
width: calc(38.2vw - 50px);
|
||
font-size: 14px;
|
||
line-height: 30px;
|
||
color: #646a73;
|
||
margin-left: 10px;
|
||
}
|
||
.idea {
|
||
width: 38.2vw;
|
||
max-height: 500px;
|
||
padding-left: 50px;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
.idea_right {
|
||
flex: 1;
|
||
padding: 5px;
|
||
}
|
||
}
|
||
.intro_main {
|
||
overflow: hidden;
|
||
margin: 30px auto;
|
||
width: 80%;
|
||
|
||
.title {
|
||
color: #31285d;
|
||
font-weight: 600;
|
||
font-size: 20px;
|
||
line-height: 28px;
|
||
margin: 50px 450px;
|
||
}
|
||
.intro_context {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.card {
|
||
display: flex;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 32px;
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
box-shadow: 0 1px 60px 0 rgba(0, 0, 0, 0.05);
|
||
|
||
.image {
|
||
width: 150px;
|
||
height: 150px;
|
||
border-radius: 10px;
|
||
flex: 1;
|
||
}
|
||
.title {
|
||
margin: 14px 0;
|
||
color: #31285d;
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
flex: 1;
|
||
}
|
||
.card-context {
|
||
color: #646a73;
|
||
font-size: 16px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
line-height: 30px;
|
||
letter-spacing: 0.34px;
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
</style>
|