我的测评样式

This commit is contained in:
zhaofang
2022-11-11 16:48:35 +08:00
parent 75c4da6077
commit dc94551e8d

View File

@@ -4,37 +4,37 @@
</Remark> -->
<div style="padding:10px 0px 12px 22px">
<el-row>
<el-col :span="24">
<el-col :span="24" style="margin-bottom:20px">
<span class="uc-center-page" style="margin-right:90px">我的测评</span>
<el-input clearable placeholder="搜索名称" class="uc-input" v-model="keyword"></el-input>
<el-button type="primary" icon="el-icon-search" class="search-btn" @click="getData()">搜索</el-button>
<el-button type="primary" icon="el-icon-refresh-right" class="search-btn" @click="reset">重置</el-button>
</el-col>
<el-col :span="8" v-for="(item,index) in testList" :key="index">
<el-col :span="6" v-for="(item,index) in testList" :key="index">
<!-- @click="textdetail(item)" -->
<div style="text-align: center;">
<div style="text-align: center;margin-top: 40px;">
<!-- @click="jumpRouter(item)" -->
<section>
<!-- <section> -->
<!-- <div @click="hasPermission(item)">
</div> -->
<a :href="hasPermission(item)" target="_blank">
<img :src="getItem(item)" />
<h5 class="ceping-tit one-line-ellipsis" v-html="$keywordActiveShow(item.title,keyword)"></h5>
<span class="ceping-conent">完成时间{{item.date}}</span>
<img style="width: 150px;height: 200px;" :src="getItem(item)" />
<p class="ceping-tit one-line-ellipsis" v-html="$keywordActiveShow(item.title,keyword)"></p>
<p class="ceping-conent">完成时间{{item.date}}</p>
</a>
</section>
<!-- </section> -->
</div>
</el-col>
</el-row>
<div v-if="testList.length > 0 " style="height:150px; text-align: center; margin-top: 10px; " >
<div v-if="testList.length > 0 " style="height:150px; text-align: center; margin-top: 50px; " >
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[9, 18, 27, 36]"
:page-sizes="[8, 16, 24, 36]"
:current-page="page"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
@@ -61,7 +61,7 @@
testList:'',
total:0,
chaturl:'',
size:9,
size:8,
page:1,
}
},
@@ -144,13 +144,16 @@
}
.ceping-tit{
color: #333;
font-size: 17px;
line-height: 40px;
margin-top: 19px;
font-size: 18px;
font-weight: 600;
color: #333333;
}
.ceping-conent{
font-size: #666;
font-size: 13px;
font-size: 14px;
margin-top: 10px;
}
.fenye{
@@ -175,47 +178,47 @@
.el-col:nth-of-type(){
}
.el-col:not(:first-child){
position: relative;
padding: 20px;
padding-left: 40px;
border-radius: 4px;
>div{
// width: 85%;
padding-bottom:100%;
cursor: pointer;
position: relative;
// box-shadow: 2px 2px 2px #888888;
// box-shadow:0px 0px 2px #888888;
border-radius: 4px;
section{
border-radius: 4px;
position: absolute;
left: 40%;
top: 50%;
// width: 96%;
// height: 78%;
transform: translate(-50%,-50%);
// background: #f1f5fc;
// marin:0 auto;
// padding: 10px;
border-box: box-sizing;
display: flex;
flex-direction: column;
justify-content: space-between;
img{
width: 194px;
height: 109px;
}
span{
// color:#303133;
// font-size: 12px;
}
h5{
margin: 0;
}
}
}
}
// .el-col:not(:first-child){
// position: relative;
// padding: 20px;
// padding-left: 40px;
// border-radius: 4px;
// >div{
// // width: 85%;
// padding-bottom:100%;
// cursor: pointer;
// position: relative;
// // box-shadow: 2px 2px 2px #888888;
// // box-shadow:0px 0px 2px #888888;
// border-radius: 4px;
// section{
// border-radius: 4px;
// position: absolute;
// left: 40%;
// top: 50%;
// // width: 96%;
// // height: 78%;
// transform: translate(-50%,-50%);
// // background: #f1f5fc;
// // marin:0 auto;
// // padding: 10px;
// border-box: box-sizing;
// display: flex;
// flex-direction: column;
// justify-content: space-between;
// img{
// width: 194px;
// height: 109px;
// }
// span{
// // color:#303133;
// // font-size: 12px;
// }
// h5{
// margin: 0;
// }
// }
// }
// }
}
</style>