feat:模板库样式;关卡改版

This commit is contained in:
dongwug
2022-10-24 18:33:07 +08:00
parent 7626334d04
commit 93590e8d5e
3 changed files with 62 additions and 109 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 410 B

View File

@@ -9,17 +9,22 @@
</div> </div>
<div class="maincon" style="background-color: #fff"> <div class="maincon" style="background-color: #fff">
<div class="item" v-for="item in level" :key="item.id"> <div class="item" v-for="item in level" :key="item.id">
<div class="itemle"> <div class="items1">
<div class="tit">{{ item.tit }}</div> <div class="box_left">
<div class="script"><span style="font-size: 12px; color: #ffffff;">说明</span></div>
<div class="imgIcon"></div>
</div>
<div class="box_right">
<div class="imgIcon"></div>
</div>
</div>
<div class="items2">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
</div> </div>
<div class="itemri"> <!-- <div class="itemle">
<img src="../../assets/images/leveladd/z1.png" /> <div class="tit">{{ item.tit }}</div>
<img <div class="name">{{ item.name }}</div>
style="margin-top: 40px" </div> -->
src="../../assets/images/leveladd/z2.png"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -238,19 +243,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="talk">
<img class="im" src="../../assets/images/leveladd/gan.png" />
<div class="xu">
<span class="yi">已选择</span>
<div style="width: 5px; display: inline-block"></div>
<span class="th">3</span>
<div style="width: 5px; display: inline-block"></div>
<span class="yi"></span>
<span class="zon">总数</span>
<span class="yi">5</span>
<span class="yi"></span>
</div>
</div>
<div class="tableBox"> <div class="tableBox">
<a-table <a-table
style="border: 1px solid #f2f6fe" style="border: 1px solid #f2f6fe"
@@ -266,18 +258,6 @@
onChange: onSelectChange, onChange: onSelectChange,
}" }"
/> />
<div class="pa">
<a-pagination
showSizeChanger="true"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize"
:current="currentPage"
:total="tableDataTotal"
class="pagination"
/>
</div>
</div> </div>
<!-- 无数据样式 --> <!-- 无数据样式 -->
<div class="notable" :style="{ display: stm_hs ? 'block' : 'none' }"> <div class="notable" :style="{ display: stm_hs ? 'block' : 'none' }">
@@ -1071,41 +1051,57 @@ export default {
.item { .item {
width: 171px; width: 171px;
height: 83px; height: 83px;
display: flex; background: rgba(255, 182, 78,.1);
background: rgba(255, 182, 78, 0.1);
border: 1px solid #ffb64e; border: 1px solid #ffb64e;
opacity: 0.45; opacity: 0.45;
border-radius: 8px; border-radius: 8px;
margin-bottom: 17px; margin-bottom: 16px;
align-items: center; align-items: center;
position: relative; padding: 16px;
.itemle { opacity: .5;
margin-left: 17px; .items1{
.tit { margin-bottom: 12px;
color: black; display: flex;
// color: red; align-items: center;
font-size: 14px; .box_left{
margin-bottom: 8px; width:140px;
font-weight: bold; display: flex;
white-space: nowrap; align-items: center;
text-overflow: ellipsis; .script{
overflow: hidden; display: flex;
width: 100px; justify-content: center;
align-items: center;
width: 56px;
height: 24px;
background: #FFB64E;
border-radius: 6px;
margin-right: 12px;
white-space: nowrap;
}
.imgIcon{
width: 14px;
height: 14px;
background-image: url(@/assets/images/leveladd/edit.png);
background-size: 100% 100%;
}
} }
.name { .box_right{
font-size: 14px; .imgIcon{
color: #878b92; width: 14px;
white-space: nowrap; height: 14px;
text-overflow: ellipsis; background-image: url(@/assets/images/leveladd/z1.png);
overflow: hidden; background-size: 100% 100%;
width: 100px; }
} }
} }
.itemri { .items2{
display: flex; .name{
flex-direction: column; width: 100px;
position: absolute; overflow: hidden;
right: 16px; text-overflow: ellipsis;
white-space: nowrap;
font-weight: bold;
}
} }
} }
} }
@@ -1264,7 +1260,6 @@ export default {
} }
} }
.boom { .boom {
position: relative;
width: 100%; width: 100%;
flex: 1; flex: 1;
background-color: #fff; background-color: #fff;
@@ -1329,40 +1324,8 @@ export default {
} }
} }
} }
.talk {
margin-top: 24px;
margin-bottom: 11px;
width: 100%;
height: 50px;
background: #f5faff;
border: 1px solid #4ea6ff;
// opacity: 0.22;
display: flex;
align-items: center;
.im {
width: 14px;
height: 15px;
margin-left: 27px;
}
.xu {
height: 100%;
line-height: 50px;
margin-left: 13px;
.yi {
color: #4f5156;
font-size: 14px;
}
.zon {
color: #999ba3;
font-size: 14px;
margin-left: 34px;
}
.th {
color: #4ea6ff;
}
}
}
.tableBox { .tableBox {
margin-top: 21px;
margin-bottom: 80px; margin-bottom: 80px;
.classify { .classify {
margin-left: 10px !important; margin-left: 10px !important;
@@ -1388,16 +1351,6 @@ export default {
> td { > td {
background: #f6f9fd; background: #f6f9fd;
} }
.pa {
left: 0;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: center;
position: absolute;
bottom: 20px;
}
} }
.notable { .notable {
width: 100%; width: 100%;

View File

@@ -151,7 +151,7 @@ export default defineComponent({
<div class="nselect"> <div class="nselect">
<div class="ops2"> <div class="ops2">
<router-link to="/libraryadd"> <router-link to="/libraryadd">
<div class="jc">查看</div> <div class="jc">查看 <span style="color:#E9E9E9;margin-left:8px;">|</span></div>
</router-link> </router-link>
</div> </div>
<div class="ops3"> <div class="ops3">
@@ -164,11 +164,11 @@ export default defineComponent({
{value.status === "未发布" ? ( {value.status === "未发布" ? (
<div class="nselect"> <div class="nselect">
<div class="ops1"> <div class="ops1">
<div class="jc">发布 |</div> <div class="jc">发布<span style="color:#E9E9E9;margin-left:8px;">|</span></div>
</div> </div>
<div class="ops2"> <div class="ops2">
<router-link to="/libraryadd"> <router-link to="/libraryadd">
<div class="jc">查看</div> <div class="jc">查看<span style="color:#E9E9E9;margin-left:8px;">|</span></div>
</router-link> </router-link>
</div> </div>
<div class="ops3"> <div class="ops3">