|
|
@@ -19,6 +19,7 @@
|
|
|
<el-col :span="24" class="leftDown">
|
|
|
<el-col
|
|
|
:span="12"
|
|
|
+ :offset="6"
|
|
|
class="achieveList"
|
|
|
v-for="(item, index) in achieveList"
|
|
|
:key="index"
|
|
|
@@ -31,33 +32,6 @@
|
|
|
<el-col :span="24" class="name textOver">
|
|
|
{{ item.name }}
|
|
|
</el-col>
|
|
|
- <!-- <el-col :span="2" class="achieveListLeft">
|
|
|
- <span>
|
|
|
- a<br />c<br />h<br />i<br />e<br />v<br />e<br />m<br />e<br />n<br />t<br />s<br />s<br />u<br />p<br />e<br />r<br />m<br />a<br />r<br />k<br />e<br />t</span
|
|
|
- >
|
|
|
- </el-col>
|
|
|
- <el-col :span="22" class="achieveListRight">
|
|
|
- <el-col :span="24" class="company">
|
|
|
- <p class="textOver">{{ item.company }}</p>
|
|
|
- <p></p>
|
|
|
- <p></p>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6" class="achimage">
|
|
|
- <el-image v-if="item.image && item.image.length > 0" :src="item.image[0].url"></el-image>
|
|
|
- <el-image v-else :src="achievezb"></el-image>
|
|
|
- </el-col>
|
|
|
- <el-col :span="18" class="achname">
|
|
|
- {{ item.name }}
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" class="brief">
|
|
|
- {{ item.achievebrief || '暂无' }}
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" class="companyInfo">
|
|
|
- <p>企业网址：{{ item.companyweb || '暂无' }}</p>
|
|
|
- <p>联系人：{{ item.contacts || '暂无' }}</p>
|
|
|
- <p>电子邮箱：{{ item.email || '暂无' }}</p>
|
|
|
- </el-col>
|
|
|
- </el-col> -->
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
@@ -771,10 +745,12 @@ export default {
|
|
|
height: 450px;
|
|
|
.achieveList {
|
|
|
position: relative;
|
|
|
- height: 220px;
|
|
|
- margin: 0 0 5px 0;
|
|
|
- border: 1px dashed #ccc;
|
|
|
- padding: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 213px;
|
|
|
+ margin-top: 10px;
|
|
|
+ // margin: 0 0 5px 0;
|
|
|
+ // border: 1px dashed #ccc;
|
|
|
+ // padding: 5px;
|
|
|
// .achieveListLeft {
|
|
|
// text-align: center;
|
|
|
// background-color: #ec6c2d;
|
|
|
@@ -844,30 +820,85 @@ export default {
|
|
|
// }
|
|
|
// }
|
|
|
// }
|
|
|
- .achieveImage .el-image {
|
|
|
- width: 100%;
|
|
|
- height: 210px;
|
|
|
- overflow: hidden;
|
|
|
- border-radius: 5px;
|
|
|
+ .achieveImage {
|
|
|
+ // transition: all 0.4s linear;
|
|
|
+ .el-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 210px;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 5px;
|
|
|
+ transition: all 0.4s linear;
|
|
|
+ }
|
|
|
}
|
|
|
+ // .name {
|
|
|
+ // position: absolute;
|
|
|
+ // bottom: 0;
|
|
|
+ // width: 97%;
|
|
|
+ // height: 40px;
|
|
|
+ // line-height: 40px;
|
|
|
+ // background: #0085d25f;
|
|
|
+ // font-size: 16px;
|
|
|
+ // padding: 0 10px;
|
|
|
+ // color: #333;
|
|
|
+ // }
|
|
|
.name {
|
|
|
+ color: #fff;
|
|
|
+ width: 100%;
|
|
|
+ transform: translateY(-50%) scale(0);
|
|
|
position: absolute;
|
|
|
- bottom: 0;
|
|
|
- width: 97%;
|
|
|
+ top: 50%;
|
|
|
+ left: 0;
|
|
|
height: 40px;
|
|
|
+ text-align: center;
|
|
|
line-height: 40px;
|
|
|
- background: #0085d25f;
|
|
|
font-size: 16px;
|
|
|
- padding: 0 10px;
|
|
|
- color: #333;
|
|
|
+ z-index: 200;
|
|
|
+ transition: all 0.4s linear;
|
|
|
}
|
|
|
+ // .name {
|
|
|
+ // position: absolute;
|
|
|
+ // bottom: 0;
|
|
|
+ // width: 97%;
|
|
|
+ // height: 40px;
|
|
|
+ // line-height: 40px;
|
|
|
+ // background: #0085d25f;
|
|
|
+ // font-size: 16px;
|
|
|
+ // padding: 0 10px;
|
|
|
+ // color: #333;
|
|
|
+ // display: none;
|
|
|
+ // }
|
|
|
}
|
|
|
.achieveList:hover {
|
|
|
cursor: pointer;
|
|
|
- .name {
|
|
|
- color: #0085d2;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
+ // .name {
|
|
|
+ // color: #0085d2;
|
|
|
+ // font-weight: bold;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ .achieveList::before {
|
|
|
+ content: '';
|
|
|
+ background: linear-gradient(to left top, #e6e6fa, #b0c4de);
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 100;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ transition: all 0.4s linear;
|
|
|
+ }
|
|
|
+ .achieveList:hover::before {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ .achieveList:hover {
|
|
|
+ box-shadow: 3px 12px 15px rgba(0, 0, 0, 0.3);
|
|
|
+ }
|
|
|
+ .achieveList:hover .achieveImage .el-image {
|
|
|
+ transform: scale(1.2);
|
|
|
+ }
|
|
|
+ .achieveList:hover .name {
|
|
|
+ transform: translateY(-50%) scale(1);
|
|
|
+ font-weight: bolder;
|
|
|
}
|
|
|
}
|
|
|
}
|
