Skip to content

G
gs1
Commit 9808dd52 by 林家欣
Options

修改首页焦点图样式

parent 8ef8d465
Showing with 83 additions and 42 deletions
src/views/Home/index.vue
<template>
<div class="home">
<!-- Banner图 -->
<div id="banner" class="banner carousel slide" data-bs-ride="carousel">
<div
id="banner"
class="banner carousel slide"
data-bs-ride="carousel"
>
<div class="carousel-indicators">
<button
type="button"
......@@ -26,56 +30,71 @@
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img
<!-- <img
src="../../assets/image/home/banner.png"
class="d-block w-100"
alt="..."
/>
/> -->
<div class="carousel-caption">
<div class="container">
<div class="carousel-title">商品条码</div>
<div class="row">
<p class="col-lg-7 carousel-note">
商品条码发展到现在，已经完全构成了一套成熟的技术体系（全球统一编码标识系统，简称GS1系统），不仅有编码，还有自动识别技术和数据交换。目前，这套体系已经在商业零售、加工制造、物流配送、电子商务等经济领域得到了成功应用。近年来，随着信息技术与智能手机的日益发展，更是扩展到了数据传输、产品质量和消费者安全服务等领域。
</p>
<div class="col-lg-8 carousel-caption-left">
<div class="carousel-title">商品条码</div>
<p class="carousel-note">
商品条码发展到现在，已经完全构成了一套成熟的技术体系（全球统一编码标识系统，简称GS1系统），不仅有编码，还有自动识别技术和数据交换。目前，这套体系已经在商业零售、加工制造、物流配送、电子商务等经济领域得到了成功应用。近年来，随着信息技术与智能手机的日益发展，更是扩展到了数据传输、产品质量和消费者安全服务等领域。
</p>
<button class="carousel-btn">了解更多</button>
</div>
<div class="col-4 carousel-caption-right d-lg-block">
<img src="../../assets/image/home/banner2.jpg" alt="" />
</div>
</div>
<button class="carousel-btn">了解更多</button>
</div>
</div>
</div>
<div class="carousel-item">
<img
<!-- <img
src="../../assets/image/home/banner.png"
class="d-block w-100"
alt="..."
/>
/> -->
<div class="carousel-caption">
<div class="container">
<div class="carousel-title">商品条码2</div>
<div class="row">
<p class="col-lg-7 carousel-note">
商品条码发展到现在，已经完全构成了一套成熟的技术体系（全球统一编码标识系统，简称GS1系统），不仅有编码，还有自动识别技术和数据交换。目前，这套体系已经在商业零售、加工制造、物流配送、电子商务等经济领域得到了成功应用。近年来，随着信息技术与智能手机的日益发展，更是扩展到了数据传输、产品质量和消费者安全服务等领域。
</p>
<div class="col-lg-8 carousel-caption-left">
<div class="carousel-title">商品条码2</div>
<p class="carousel-note">
商品条码发展到现在，已经完全构成了一套成熟的技术体系（全球统一编码标识系统，简称GS1系统），不仅有编码，还有自动识别技术和数据交换。目前，这套体系已经在商业零售、加工制造、物流配送、电子商务等经济领域得到了成功应用。近年来，随着信息技术与智能手机的日益发展，更是扩展到了数据传输、产品质量和消费者安全服务等领域。
</p>
<button class="carousel-btn">了解更多</button>
</div>
<div class="col-4 carousel-caption-right d-lg-block">
<img src="../../assets/image/home/banner2.jpg" alt="" />
</div>
</div>
<button class="carousel-btn">了解更多</button>
</div>
</div>
</div>
<div class="carousel-item">
<img
<!-- <img
src="../../assets/image/home/banner.png"
class="d-block w-100"
alt="..."
/>
/> -->
<div class="carousel-caption">
<div class="container">
<div class="carousel-title">商品条码3</div>
<div class="row">
<p class="col-lg-7 carousel-note">
商品条码发展到现在，已经完全构成了一套成熟的技术体系（全球统一编码标识系统，简称GS1系统），不仅有编码，还有自动识别技术和数据交换。目前，这套体系已经在商业零售、加工制造、物流配送、电子商务等经济领域得到了成功应用。近年来，随着信息技术与智能手机的日益发展，更是扩展到了数据传输、产品质量和消费者安全服务等领域。
</p>
<div class="col-lg-8 carousel-caption-left">
<div class="carousel-title">商品条码3</div>
<p class="carousel-note">
商品条码发展到现在，已经完全构成了一套成熟的技术体系（全球统一编码标识系统，简称GS1系统），不仅有编码，还有自动识别技术和数据交换。目前，这套体系已经在商业零售、加工制造、物流配送、电子商务等经济领域得到了成功应用。近年来，随着信息技术与智能手机的日益发展，更是扩展到了数据传输、产品质量和消费者安全服务等领域。
</p>
<button class="carousel-btn">了解更多</button>
</div>
<div class="col-4 carousel-caption-right d-lg-block">
<img src="../../assets/image/home/banner2.jpg" alt="" />
</div>
</div>
<button class="carousel-btn">了解更多</button>
</div>
</div>
</div>
......@@ -1205,6 +1224,7 @@ export default {
height: 420px;
.carousel-item {
height: 100%;
background: #f26335;
}
img {
height: 100%;
......@@ -1217,25 +1237,44 @@ export default {
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
.carousel-title {
color: #ffffff;
line-height: 60px;
font-size: 50px;
// justify-content: center;
padding: 0;
.container {
height: 100%;
.row {
height: 100%;
}
}
.carousel-note {
font-size: 16px;
color: #ffffff;
line-height: 24px;
margin: 30px 0;
.carousel-caption-left {
display: flex;
flex-direction: column;
justify-content: center;
.carousel-title {
color: #ffffff;
line-height: 60px;
font-size: 50px;
}
.carousel-note {
font-size: 16px;
color: #ffffff;
line-height: 24px;
margin: 30px 0;
}
.carousel-btn {
width: 112px;
height: 37px;
background: #0e2c6b;
border-radius: 4px;
font-size: 16px;
color: #ffffff;
}
}
.carousel-btn {
width: 112px;
height: 37px;
background: #0e2c6b;
border-radius: 4px;
font-size: 16px;
color: #ffffff;
.carousel-caption-right {
display: none;
img {
width: 100%;
height: 100%;
}
}
}
}
......@@ -1475,7 +1514,7 @@ export default {
margin-top: 20px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #0E2C6B;
color: #0e2c6b;
}
}
}
......@@ -1526,7 +1565,7 @@ export default {
.spqqsfz-cate-right {
cursor: pointer;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-family: PingFangSC-Regular, PingFang SC;
}
}
.spqqsfz-cont {
......@@ -1561,6 +1600,8 @@ export default {
justify-content: space-around;
.row {
color: #ffffff;
// padding: 0;
margin: 0;
&:nth-child(1) {
font-size: 24px;
}
......@@ -1609,7 +1650,7 @@ export default {
font-size: 22px;
padding: 15px 0 15px 20px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500
font-weight: 500;
}
.djwh-tp {
img {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment