mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-11 20:06:47 +08:00
feat:模板库样式;关卡改版
This commit is contained in:
BIN
src/assets/images/leveladd/edit.png
Normal file
BIN
src/assets/images/leveladd/edit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 410 B |
@@ -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%;
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user