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

图片优化

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