clay
/
ceramic
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

邓洁 : 关于我们区样式初步完成

This commit is contained in:
邓洁 2023-05-05 15:48:49 +08:00
parent 5c61997edf
commit ecc57c95b3
1 changed files with 66 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/components/AboutUs.vue
View File

@ -11,32 +11,35 @@
<div class="about_text">
{{ aboutContent }}
</div>
<el-row :gutter="20" style="padding: 0 4% ">
<el-row :gutter="20" style="padding: 0 4%;margin-bottom: 50px">
<el-col :span="6" v-for="(numItem,numIndex) in numList" :key="numIndex" class="num_title">
<p>
<b>{{ numItem.num }}</b>
<b class="num_bold">{{ numItem.num }}</b>
<span>{{ numItem.units }}</span>
</p>
<p>{{ numItem.title }}</p>
</el-col>
</el-row>
<el-row :gutter="10" style="padding: 0 5% ">
<el-col :span="8" v-for="(imgTextItem,imgTextIndex) in imgTextList" :key="imgTextIndex">
<el-col :span="8" v-for="(imgTextItem,imgTextIndex) in imgTextList" :key="imgTextIndex"
:class="'culture_'+imgTextIndex">
<div class="imgAndText">
<a :href="imgTextItem.href">
<span class="pic">
<img :src="imgTextItem.src" alt=""/>
</span>
<div class="img_box">
<div class="img_innerBox">
<div class="about_en">
<span class="img_box">
<span class="img_innerBox">
<span class="its">
<span class="about_en">
<span>{{ imgTextItem.boldText }}</span>
<span>{{ imgTextItem.enText }}</span>
</div>
</span>
<span class="line"></span>
<span class="about_cn">{{ imgTextItem.cnTitle }}</span>
</div>
</div>
</span>
</span>
</span>
</a>
</div>
</el-col>
@ -138,7 +141,7 @@ export default {
line-height: 28.8px;
}
b {
.num_bold {
color: #444;
line-height: 46px;
margin: 0 4px 0 0;
@ -146,7 +149,9 @@ export default {
font-family: arial;
font-weight: normal;
}
.num_title:last-child {
border: none;
}
.num_title {
font-size: 14px;
color: #666666;
@ -158,6 +163,20 @@ export default {
}
}
.culture_1 {
.img_box {
position: absolute;
bottom: auto !important;
top: 0;
}
}
.imgAndText:hover {
img {
transform: scale(1.2);
}
}
.imgAndText {
display: block;
margin: 0 15px;
@ -172,7 +191,6 @@ export default {
.pic {
display: inline-block;
width: 100%;
overflow: hidden;
img {
@ -187,34 +205,45 @@ export default {
left: 0;
width: 100%;
background-color: rgba(32, 31, 37, 0.5);
.img_innerBox {
width: 100%;
display: inline-block;
display: block;
padding: 20px 30px;
.about_en{
color: #e0c9aa;
font-size: 22px;
float: left;
text-transform: uppercase;
font-family: arial;
span:first-child{
font-weight: bold;
margin-right: 10px;
.its {
display: inline-block;
width: 100%;
.about_en {
color: #e0c9aa;
font-size: 22px;
float: left;
text-transform: uppercase;
line-height: 39.6px;
font-family: arial;
span:first-child {
font-weight: bold;
margin-right: 10px;
}
}
.line {
clear: both;
width: 50px;
height: 1px;
float: left;
margin: 3px 0;
background-color: #e2c9ab;
}
.about_cn {
color: #e0c9aa;
clear: both;
float: left;
font-size: 18px;
line-height: 32px;
}
}
.line{
clear: both;
width: 50px;
height: 1px;
float: left;
margin: 3px 0;
background-color: #e2c9ab;
}
.about_cn{
color: #e0c9aa;
clear: both;
float: left;
font-size: 18px;
}
}
}