jialong.yu
/
FE_official
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

样式修复

Browse Source
master
yujialong 3 years ago
parent 6b8196ed4b
commit db82905e0a
4 changed files with 70 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/img/index/about1.png
  2. BIN
      src/assets/img/index/about2.png
  3. 11
      src/pages/about/list/index.vue
  4. 92
      src/pages/index/list/index.vue

BIN
src/assets/img/index/about1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 800 KiB

After

Width:  |  Height:  |  Size: 300 KiB

BIN
src/assets/img/index/about2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 368 KiB

11
src/pages/about/list/index.vue
Unescape View File

@ -27,7 +27,7 @@
</div> </div>
<div class="culture"> <div class="culture">
<div class="inner"> <div class="inner">
<h6 class="i-title">企业文化</h6> <h6 class="i-title wow fadeInDown">企业文化</h6>
<p class="en">CORPORATE CULTURE</p> <p class="en">CORPORATE CULTURE</p>
<ul class="list"> <ul class="list">
<li class="wow fadeInDown" data-wow-delay="0.5s"> <li class="wow fadeInDown" data-wow-delay="0.5s">
@ -50,7 +50,7 @@
</div> </div>
<div class="progress"> <div class="progress">
<div class="inner"> <div class="inner">
<h6 class="i-title">发展历程</h6> <h6 class="i-title wow fadeInDown">发展历程</h6>
<p class="en">MILESTONE</p> <p class="en">MILESTONE</p>
<ul class="list"> <ul class="list">
<li> <li>
@ -186,12 +186,12 @@ export default {
.inner { .inner {
position: relative; position: relative;
width: 1200px; width: 1200px;
padding: 87px 0 67px; padding: 107px 0 87px;
margin: 0 auto; margin: 0 auto;
} }
.en { .en {
position: absolute; position: absolute;
top: 60px; top: 80px;
left: 50%; left: 50%;
width: 100%; width: 100%;
text-align: center; text-align: center;
@ -238,7 +238,7 @@ export default {
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
height: 153px; height: 153px;
margin-top: -220px; margin-top: -240px;
color: #fff; color: #fff;
background: url(../../../assets/img/about/about2.png) 0 0/cover no-repeat; background: url(../../../assets/img/about/about2.png) 0 0/cover no-repeat;
.inner { .inner {
@ -260,6 +260,7 @@ export default {
} }
.list{ .list{
display: flex; display: flex;
margin: 80px 0 20px;
li{ li{
width: 33.33%; width: 33.33%;
padding: 50px 35px 74px; padding: 50px 35px 74px;

92
src/pages/index/list/index.vue
Unescape View File

@ -4,15 +4,15 @@
<el-carousel height="688px" autoplay :interval="5000"> <el-carousel height="688px" autoplay :interval="5000">
<el-carousel-item> <el-carousel-item>
<div class="bg banner-bg1"></div> <div class="bg banner-bg1"></div>
<img class="text wow fadeInLeft" src="@/assets/img/index/banner1-text.png" alt=""> <img class="text wow fadeInUp" data-wow-duration="2.5s" src="@/assets/img/index/banner1-text.png" alt="">
</el-carousel-item> </el-carousel-item>
<el-carousel-item> <el-carousel-item>
<div class="bg banner-bg2"></div> <div class="bg banner-bg2"></div>
<img class="text wow fadeInLeft" src="@/assets/img/index/banner2-text.png" alt=""> <img class="text text2 wow fadeInLeft" data-wow-delay="2s" src="@/assets/img/index/banner2-text.png" alt="">
</el-carousel-item> </el-carousel-item>
<el-carousel-item> <el-carousel-item>
<div class="bg banner-bg3"></div> <div class="bg banner-bg3"></div>
<img class="text wow fadeInLeft" src="@/assets/img/index/banner3-text.png" alt=""> <img class="text text3 wow fadeInLeft" src="@/assets/img/index/banner3-text.png" alt="">
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
@ -44,11 +44,12 @@
</div> </div>
<!-- 关于我们 --> <!-- 关于我们 -->
<div class="about" id="part1"> <div class="about" id="part1">
<div class="desc wow fadeInDown"> <div class="inner">
<h6 class="i-title wow fadeInDown">关于我们</h6> <h6 class="a-title wow fadeInDown">关于我们</h6>
<p class="en">ABOUT US</p> <p class="a-en">ABOUT US</p>
<div class="text">深圳或然科技有限公司核心团队组建于2019年。公司致力于采用业界领先的信息化技术和过硬的软件研发能力服务于教育产业，利用我司技术优势将区块链、云计算、大数据、人工智能等行业前沿技术与教育产业进行深度融合，为客户提供功能先进、运行高效且便于使用的产业数字化综合解决方案。</div> <div class="a-gene wow fadeInLeft" data-wow-delay=".5s">成为教育产业数字化的推动者<br>成就百万教育</div>
</div> <div class="text wow fadeInRight" data-wow-delay=".4s">深圳或然科技有限公司核心团队组建于2019年。公司致力于采用业界领先的信息化技术和过硬的软件研发能力服务于教育产业，利用我司技术优势将区块链、云计算、大数据、人工智能等行业前沿技术与教育产业进行深度融合，为客户提供功能先进、运行高效且便于使用的产业数字化综合解决方案。</div>
</div>
</div> </div>
<!-- 我们的服务 --> <!-- 我们的服务 -->
<div class="service" id="part3"> <div class="service" id="part3">
@ -59,8 +60,8 @@
<div class="service-pic"> <div class="service-pic">
<img src="@/assets/img/index/service.png" alt=""> <img src="@/assets/img/index/service.png" alt="">
<div class="text"> <div class="text">
<p class="s-title">为院校信息化与数字化提供一站式综合解决方案</p> <p class="s-title wow fadeInLeft">为院校信息化与数字化提供一站式综合解决方案</p>
<ul class="service-list"> <ul class="service-list wow fadeInRight">
<li>实现产业互联，数据互通</li> <li>实现产业互联，数据互通</li>
<li>发展教育云和边缘计算，推动教育产业数字化</li> <li>发展教育云和边缘计算，推动教育产业数字化</li>
<li>依托大数据，促进教育产业智能化升级</li> <li>依托大数据，促进教育产业智能化升级</li>
@ -92,7 +93,7 @@
<div class="inner"> <div class="inner">
<h6 class="i-title wow fadeInDown">我们的产品</h6> <h6 class="i-title wow fadeInDown">我们的产品</h6>
<p class="en">OUR PRODUCTS</p> <p class="en">OUR PRODUCTS</p>
<div class="pics"> <div class="pics" style="margin-top: 110px">
<div class="pro-bg1"> <div class="pro-bg1">
<img src="@/assets/img/index/pro-bg1-1.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.6s"> <img src="@/assets/img/index/pro-bg1-1.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.6s">
<img src="@/assets/img/index/pro-bg1-2.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.7s"> <img src="@/assets/img/index/pro-bg1-2.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.7s">
@ -358,7 +359,7 @@ export default {
show: false, show: false,
focus: 'item', focus: 'item',
itemStyle:{ itemStyle:{
color: '#fff' color: '#f9e638'
} }
}, },
tooltip:{ tooltip:{
@ -515,25 +516,45 @@ export default {
color: #5A6B7E; color: #5A6B7E;
} }
.about { .about {
padding: 130px 0 150px; padding: 130px 0 200px;
background: url(../../../assets/img/index/about1.png) 0 0/100% 100% no-repeat; background: url(../../../assets/img/index/about2.png) (bottom right)/auto no-repeat,
.en { url(../../../assets/img/index/about1.png) 0 0/cover no-repeat;
top: 27px; .inner {
color: #B6C4D9; padding: 0;
} }
.desc{ .a-title {
z-index: 2;
position: relative; position: relative;
width: 1000px; font-size: 30px;
padding: 50px 100px 30px; color: #fff;
margin: 0 auto; &:after {
text-align: center; content: '';
background: rgba(255,255,255,0.7); position: absolute;
border-radius: 20px; left: 0;
bottom: -10px;
width: 30px;
height: 4px;
background-color: #fff;
}
}
.a-en {
position: absolute;
top: -21px;
font-size: 46px;
color: #B6C4D9;
opacity: .7;
}
.a-gene {
margin: 50px 0 30px;
font-size: 34px;
line-height: 58px;
color: #fff;
} }
.text { .text {
font-size: 16px; width: 800px;
color: #202020; font-size: 18px;
line-height: 33px; line-height: 33px;
color: #fff;
} }
} }
.adv{ .adv{
@ -677,7 +698,7 @@ export default {
background-color: #fff; background-color: #fff;
.list{ .list{
display: flex; display: flex;
margin: 40px 0 80px; margin: 40px 0 110px;
li{ li{
width: 33.33%; width: 33.33%;
padding: 50px 35px; padding: 50px 35px;
@ -891,7 +912,7 @@ export default {
color: #0B1D30; color: #0B1D30;
} }
.desc{ .desc{
font-size: 14px; font-size: 15px;
color: #0B1D30; color: #0B1D30;
line-height: 28px; line-height: 28px;
} }
@ -1019,4 +1040,19 @@ export default {
} }
} }
} }
@media(max-width: 1730px) {
.wrap .banner .text {
left: 100px;
}
}
@media(max-width: 1470px) {
.wrap .banner {
.text2, .text3 {
width: 500px;
}
.text {
left: 50px;
}
}
}
</style> </style>
Write Preview
Loading…
Cancel
Save