提交 7d821e7e authored 作者: matian's avatar matian

图片优化

上级 df6c13d9
<template>
<div class="intr-content-box">
<img src="https://zws-imgs-pub.ezijing.com/static/public/e9de7416bef8822d5557afdfcda69f8a.png" alt="">
<img src="https://webapp-pub.ezijing.com/www/pc/home/banner.png" alt="" />
<div class="text-content">
<div class="title">{{ $t('about.project.title') }}</div>
<div class="text-intr" v-html="$t('about.project.text')"></div>
<div class="garish-content">
<div class="flex-box">
<div class="li w184">
<div class="col-txt">12<span>{{ $t('about.project.unit1') }}</span></div>
<div class="col-txt">
12<span>{{ $t('about.project.unit1') }}</span>
</div>
<div class="n-txt">{{ $t('about.project.itemText1') }}</div>
</div>
<div class="li w180">
<div class="col-txt">522<span>{{ $t('about.project.unit2') }}</span></div>
<div class="col-txt">
522<span>{{ $t('about.project.unit2') }}</span>
</div>
<div class="n-txt">{{ $t('about.project.itemText2') }}</div>
</div>
<div class="li w249">
......@@ -37,7 +41,10 @@
<div class="n-txt">{{ $t('about.project.itemText7') }}</div>
</div>
<div class="li w186">
<div class="col-txt"><span class="unit3Text">{{ $t('about.project.unit3Text') }}</span><span>{{ $t('about.project.unit3') }}+</span></div>
<div class="col-txt">
<span class="unit3Text">{{ $t('about.project.unit3Text') }}</span
><span>{{ $t('about.project.unit3') }}+</span>
</div>
<div class="n-txt">{{ $t('about.project.itemText8') }}</div>
</div>
</div>
......@@ -66,8 +73,7 @@
</template>
<script>
export default {
components: {
},
components: {},
data() {
return {
indexActive: 0
......@@ -81,119 +87,119 @@ export default {
}
</script>
<style lang="scss" scoped>
.intr-content-box{
.intr-content-box {
width: 1000px;
padding-bottom: 100px;
img{
img {
width: 100%;
display: block;
}
.text-content{
.text-content {
padding: 50px 64px 81px;
box-sizing: border-box;
background: #fff;
.title{
.title {
font-size: 22px;
font-weight: 500;
color: #424242;
margin-bottom: 15px;
}
.text-intr{
.text-intr {
font-size: 16px;
line-height: 32px;
color: #424242;
}
}
.garish-content{
.garish-content {
padding-top: 66px;
.flex-box{
.flex-box {
display: flex;
width: 800px;
margin: 0 auto;
&.mar-t-35{
&.mar-t-35 {
padding-top: 35px;
}
.li{
.li {
box-sizing: border-box;
padding-top: 6px;
// height: 70px;
border-right: 1px solid #C3C3C3;
&:last-child{
border-right: 1px solid #c3c3c3;
&:last-child {
border: none;
}
.col-txt{
.col-txt {
font-size: 36px;
font-weight: 500;
line-height: 30px;
color: #AA1941;
color: #aa1941;
text-align: center;
.unit3Text{
.unit3Text {
font-size: 36px;
}
span{
span {
font-size: 24px;
}
}
.n-txt{
.n-txt {
font-size: 16px;
font-family: auto;
// line-height: 34px;
text-align: center;
color: #666666;
}
&.w184{
&.w184 {
width: 184px;
}
&.w180{
&.w180 {
width: 180px;
}
&.w249{
&.w249 {
width: 249px;
}
&.w186{
&.w186 {
width: 186px;
}
&.w188{
&.w188 {
width: 188px;
}
}
}
}
.tab-content{
.tab-content {
padding-top: 80px;
.tab-nav{
.tab-nav {
display: flex;
justify-content: space-between;
.li{
.li {
width: 280px;
height: 150px;
box-sizing: border-box;
padding-top: 38px;
background: #FBFBFB;
background: #fbfbfb;
// margin-right: 16px;
cursor: pointer;
&.active{
background: #FFFFFF;
&.active {
background: #ffffff;
box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
position: relative;
&::after{
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8px;
background: #AA1941;
background: #aa1941;
}
}
.t1{
.t1 {
text-align: center;
line-height: 100%;
font-size: 24px;
font-weight: 500;
color: #AA1941;
color: #aa1941;
}
.t2{
.t2 {
font-size: 20px;
line-height: 100%;
color: #424242;
......@@ -203,9 +209,9 @@ export default {
}
}
}
.tab-con{
.tab-con {
width: 872px;
background: #FFFFFF;
background: #ffffff;
box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
box-sizing: border-box;
padding: 20px 48px;
......@@ -215,28 +221,28 @@ export default {
font-weight: 400;
line-height: 40px;
color: #333333;
::v-deep{
span{
::v-deep {
span {
color: rgba(170, 25, 65, 1);
font-size: 28px;
font-weight: bold;
}
}
&.tab-con2{
&::after{
&.tab-con2 {
&::after {
top: -15px;
left: 50%;
transform: translateX(-50%);
}
}
&.tab-con3{
&::after{
&.tab-con3 {
&::after {
top: -15px;
left: auto;
right: 140px;
}
}
&::after{
&::after {
content: '';
position: absolute;
top: -15px;
......
<template>
<div class="news-content-box">
<img
src="https://zws-imgs-pub.ezijing.com/static/public/a72ef577c9bae694c6bfc33e5bfc93af.png"
alt=""
class="banner"
/>
<img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" class="banner" />
<ul class="list-content">
<template v-for="(item, index) in listData">
<li :key="index">
......@@ -20,12 +16,7 @@
</template>
</ul>
<div class="pages-box">
<el-pagination
layout="prev, pager, next"
@current-change="handleCurrentChange"
:page-size="limit"
:total="total"
>
<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="limit" :total="total">
</el-pagination>
</div>
</div>
......@@ -158,7 +149,7 @@ export default {
}
}
}
.pages-box{
.pages-box {
display: flex;
padding-bottom: 50px;
background: #fff;
......
......@@ -2,11 +2,7 @@
<div class="news-content">
<tab />
<div class="news-content-box">
<img
src="https://zws-imgs-pub.ezijing.com/static/public/a72ef577c9bae694c6bfc33e5bfc93af.png"
alt=""
class="banner"
/>
<img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" alt="" class="banner" />
<ul class="list-content">
<template v-for="(item, index) in listData">
<li :key="index">
......@@ -82,7 +78,7 @@ export default {
}
</script>
<style lang="scss" scoped>
.pages-box{
.pages-box {
display: flex;
padding-bottom: 50px;
background: #fff;
......
......@@ -2,11 +2,7 @@
<div class="news-content">
<tab />
<div class="news-content-box">
<img
src="https://zws-imgs-pub.ezijing.com/static/public/a72ef577c9bae694c6bfc33e5bfc93af.png"
alt=""
class="banner"
/>
<img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" alt="" class="banner" />
<ul class="list-content">
<template v-for="(item, index) in listData">
<li :key="index">
......@@ -82,7 +78,7 @@ export default {
}
</script>
<style lang="scss" scoped>
.pages-box{
.pages-box {
display: flex;
padding-bottom: 50px;
background: #fff;
......
......@@ -2,11 +2,7 @@
<div class="news-content">
<tab />
<div class="news-content-box">
<img
src="https://zws-imgs-pub.ezijing.com/static/public/a72ef577c9bae694c6bfc33e5bfc93af.png"
alt=""
class="banner"
/>
<img src="https://webapp-pub.ezijing.com/www/pc/news/news.png" alt="" class="banner" />
<ul class="list-content">
<template v-for="(item, index) in listData">
<li :key="index">
......@@ -82,7 +78,7 @@ export default {
}
</script>
<style lang="scss" scoped>
.pages-box{
.pages-box {
display: flex;
padding-bottom: 50px;
background: #fff;
......
差异被折叠。
......@@ -5,7 +5,7 @@
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/solution.png'
: 'https://webapp-pub.ezijing.com/www/pc/pages-solution.png'
: 'https://webapp-pub.ezijing.com/www/pc/pages-solution1.png'
"
/>
</div>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论