180 行
5.0 KiB
HTML
可执行文件
180 行
5.0 KiB
HTML
可执行文件
<!--[1.1.96]-->
|
|
<style>
|
|
html, body {
|
|
background-color: rgb(246, 248, 249);
|
|
font-size: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.add {
|
|
padding: 8px 10px;
|
|
border-radius: 5px;
|
|
background-color: #009688;
|
|
color: white;
|
|
font-size: 14px;
|
|
display: inline-block;
|
|
margin: 25px 25px 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.add:hover {
|
|
background-color: #099688;
|
|
}
|
|
|
|
.new-list {
|
|
margin-bottom: 20px;
|
|
border: 1px solid #e6e6e6;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.list_title {
|
|
background-color: #f5f5f5;
|
|
color: black;
|
|
font-size: 18px;
|
|
border-bottom: 1px solid #e6e6e6;
|
|
line-height: 60px;
|
|
border-radius: 5px 5px 0 0;
|
|
text-indent: 15px;
|
|
}
|
|
.class_manager{
|
|
float: right;
|
|
color: #999;
|
|
font-size: 14px;
|
|
padding-right: 20px;
|
|
cursor: pointer;
|
|
}
|
|
.class_manager:hover{
|
|
color: #009688;
|
|
}
|
|
|
|
.list_detail {
|
|
background-color: white;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.list_con {
|
|
box-sizing: border-box;
|
|
width: 320px;
|
|
height: 140px;
|
|
border: 2px solid #d9d9d9;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
margin: 20px;
|
|
}
|
|
|
|
.list_left {
|
|
box-sizing: border-box;
|
|
padding: 18px 14px 14px;
|
|
width: 244px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.list_img_con {
|
|
width: 104px;
|
|
height: 104px;
|
|
box-sizing: border-box;
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
border: 1px solid #d9d9d9;
|
|
}
|
|
|
|
.list_img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.list_text {
|
|
box-sizing: border-box;
|
|
width: 110px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.list_text > span:nth-child(1) {
|
|
font-size: 18px;
|
|
line-height: 36px;
|
|
font-weight: 400;
|
|
color: black;
|
|
}
|
|
|
|
.list_text > span:nth-child(2) {
|
|
padding-top: 5px;
|
|
font-size: 15px;
|
|
color: #666666;
|
|
word-break: break-all;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.list_right {
|
|
width: 72px;
|
|
height: 100%;
|
|
border-left: 1px dashed #d9d9d9;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.have {
|
|
box-sizing: border-box;
|
|
display: block;
|
|
width: 48px;
|
|
height: 48px;
|
|
text-align: center;
|
|
line-height: 48px;
|
|
border-radius: 50%;
|
|
font-size: 14px;
|
|
margin-top: 70px;
|
|
}
|
|
.have1{
|
|
border: 1px solid #f66e4e;
|
|
color: #f66e4e;
|
|
}
|
|
.have2{
|
|
border: 1px solid #ccc;
|
|
color: #ccc;
|
|
}
|
|
</style>
|
|
<div class="new-box">
|
|
<volist name="list" id="li">
|
|
<div class="new-list">
|
|
<div class="list_title">{$li['class_name']}</div>
|
|
<div class="list_detail">
|
|
<volist name="li['list']" id="ch">
|
|
<div class="list_con">
|
|
<div class="list_left">
|
|
<div class="list_img_con">
|
|
<img class="list_img" src="{$ch['icon_url']}">
|
|
</div>
|
|
<div class="list_text">
|
|
<span>{$ch['plug_name']}</span>
|
|
<span>{$ch['information']}</span>
|
|
</div>
|
|
</div>
|
|
<div class="list_right">
|
|
<if condition="$ch['a_status'] AND ($ch['a_status'] eq 1)">
|
|
<span class="have have1">已开启</span>
|
|
<else/>
|
|
<span class="have have2">未开启</span>
|
|
</if>
|
|
</div>
|
|
</div>
|
|
</volist>
|
|
</div>
|
|
</div>
|
|
</volist>
|
|
</div> |