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"> <div class="about_text">
{{ aboutContent }} {{ aboutContent }}
</div> </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"> <el-col :span="6" v-for="(numItem,numIndex) in numList" :key="numIndex" class="num_title">
<p> <p>
<b>{{ numItem.num }}</b> <b class="num_bold">{{ numItem.num }}</b>
<span>{{ numItem.units }}</span> <span>{{ numItem.units }}</span>
</p> </p>
<p>{{ numItem.title }}</p> <p>{{ numItem.title }}</p>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="10" style="padding: 0 5% "> <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"> <div class="imgAndText">
<a :href="imgTextItem.href"> <a :href="imgTextItem.href">
<span class="pic"> <span class="pic">
<img :src="imgTextItem.src" alt=""/> <img :src="imgTextItem.src" alt=""/>
</span> </span>
<div class="img_box"> <span class="img_box">
<div class="img_innerBox"> <span class="img_innerBox">
<div class="about_en"> <span class="its">
<span class="about_en">
<span>{{ imgTextItem.boldText }}</span> <span>{{ imgTextItem.boldText }}</span>
<span>{{ imgTextItem.enText }}</span> <span>{{ imgTextItem.enText }}</span>
</div> </span>
<span class="line"></span> <span class="line"></span>
<span class="about_cn">{{ imgTextItem.cnTitle }}</span> <span class="about_cn">{{ imgTextItem.cnTitle }}</span>
</div> </span>
</div> </span>
</span>
</a> </a>
</div> </div>
</el-col> </el-col>
@ -138,7 +141,7 @@ export default {
line-height: 28.8px; line-height: 28.8px;
} }
b { .num_bold {
color: #444; color: #444;
line-height: 46px; line-height: 46px;
margin: 0 4px 0 0; margin: 0 4px 0 0;
@ -146,7 +149,9 @@ export default {
font-family: arial; font-family: arial;
font-weight: normal; font-weight: normal;
} }
.num_title:last-child {
border: none;
}
.num_title { .num_title {
font-size: 14px; font-size: 14px;
color: #666666; 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 { .imgAndText {
display: block; display: block;
margin: 0 15px; margin: 0 15px;
@ -172,7 +191,6 @@ export default {
.pic { .pic {
display: inline-block; display: inline-block;
width: 100%;
overflow: hidden; overflow: hidden;
img { img {
@ -187,34 +205,45 @@ export default {
left: 0; left: 0;
width: 100%; width: 100%;
background-color: rgba(32, 31, 37, 0.5); background-color: rgba(32, 31, 37, 0.5);
.img_innerBox { .img_innerBox {
width: 100%; display: block;
display: inline-block;
padding: 20px 30px; padding: 20px 30px;
.about_en{
color: #e0c9aa; .its {
font-size: 22px; display: inline-block;
float: left; width: 100%;
text-transform: uppercase;
font-family: arial; .about_en {
span:first-child{ color: #e0c9aa;
font-weight: bold; font-size: 22px;
margin-right: 10px; 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;
} }
} }
} }