|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="project-box">
|
|
|
+ <div class="project-box" style="display: none;">
|
|
|
<el-row style="padding-bottom: 16px">
|
|
|
<el-input placeholder="请输入关键字" style="width: 240px" clearable @keyup.enter.native="ChangeKeyWord(keyWord)" v-model="keyWord">
|
|
|
<i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="ChangeKeyWord(keyWord)"></i>
|
|
@@ -7,14 +7,18 @@
|
|
|
<el-button style="float: right" @click="addProject">添加项目</el-button>
|
|
|
</el-row>
|
|
|
<div class="saga-brand-group">
|
|
|
- <el-row :gutter="12">
|
|
|
+ <el-row :gutter="16">
|
|
|
<el-col :span="6" v-for="item in projectList" :key="item.id">
|
|
|
- <el-card shadow="always" :body-style="{ padding: '0px' }">
|
|
|
- <el-image style="width: 100%; height: 187px" src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
|
|
|
- <div style="padding: 14px">
|
|
|
- <div class="bottom clearfix">
|
|
|
- <time class="time">{{ item.name }}</time>
|
|
|
+ <el-card shadow="always" class="project-card" :body-style="{ padding: '0px' }">
|
|
|
+ <el-image style="width: 100%; height: 187px" :src="item.url">
|
|
|
+ <div slot="error" class="image-slot">
|
|
|
+ <i class="iconfont icon-wandajituan"></i>
|
|
|
</div>
|
|
|
+ </el-image>
|
|
|
+ <div style="padding: 16px">
|
|
|
+ <span class="project-name" :title="item.name">{{ item.name }}</span>
|
|
|
+ <span class="iconfont icon-shanchu"></span>
|
|
|
+ <span class="iconfont icon-bianji"></span>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
@@ -35,7 +39,7 @@ export default class extends Vue {
|
|
|
private projectList: any = [
|
|
|
{
|
|
|
id: "1",
|
|
|
- name: "龙岗万达",
|
|
|
+ name: "龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达",
|
|
|
logo: "",
|
|
|
},
|
|
|
{
|
|
@@ -95,7 +99,46 @@ export default class extends Vue {
|
|
|
overflow-y: auto;
|
|
|
overflow-x: hidden;
|
|
|
::v-deep .el-col {
|
|
|
- margin-bottom: 12px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .project-card {
|
|
|
+ ::v-deep .image-slot {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #075fa9;
|
|
|
+ }
|
|
|
+ .project-name {
|
|
|
+ display: inline-block;
|
|
|
+ width: calc(100% - 50px);
|
|
|
+ cursor: text;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .icon-bianji {
|
|
|
+ display: none;
|
|
|
+ float: right;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-shanchu {
|
|
|
+ display: none;
|
|
|
+ float: right;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .project-card:hover {
|
|
|
+ .icon-bianji {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-shanchu {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.saga-brand-list {
|
|
@@ -171,4 +214,14 @@ export default class extends Vue {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+::v-deep .icon-wandajituan {
|
|
|
+ font-size: 60px;
|
|
|
+ margin: auto;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+@media screen and (max-width: 1000px) {
|
|
|
+ ::v-deep .icon-wandajituan {
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|