Commit c8bda477 authored by “yiyousong”'s avatar “yiyousong”

perf: 修改集中屏皮肤模板

parent 9943c8cd
......@@ -25,105 +25,28 @@
<img src="../../../../assets/img/Banner.png" />
</div>
<div class="call-out flex1 flex flexc jcb">
<div class="call-out-item">
<div class="call-out-item-title">正在呼叫</div>
<div class="call-out-item-text call-out-item-text-1">
<span
class="call-out-item-code"
:style="{ color: filterItem('7', 0) }"
>A0004号</span
>
<span
class="call-out-item-code"
:style="{ color: filterItem('7', 0) }"
>03号窗口</span
>
</div>
</div>
<div class="call-out-item">
<div class="call-out-item-title">正在办理</div>
<div class="call-out-item-text call-out-item-text-2">
<span
class="call-out-item-code"
:style="{ color: filterItem('7', 0) }"
>A0004号</span
>
<span
class="call-out-item-code"
:style="{ color: filterItem('7', 0) }"
>03号窗口</span
>
</div>
</div>
<div class="call-out-item">
<div class="call-out-item-title">正在办理</div>
<div class="call-out-item-text call-out-item-text-2">
<span
class="call-out-item-code"
:style="{ color: filterItem('7', 0) }"
>A0004号</span
>
<span
class="call-out-item-code"
:style="{ color: filterItem('7', 0) }"
>03号窗口</span
>
</div>
</div>
<div class="call-out-item">
<div class="call-out-item-title">等待中</div>
<div class="call-out-item-text call-out-item-text-3">
<span
class="call-out-item-code"
:style="{ color: filterItem('7', 0) }"
>A0004号</span
>
<span
class="call-out-item-code"
:style="{ color: filterItem('7', 0) }"
>--</span
>
</div>
</div>
<div class="call-out-item">
<div class="call-out-item-title">等待中</div>
<div class="call-out-item-text call-out-item-text-3">
<span
class="call-out-item-code"
:style="{ color: filterItem('7', 0) }"
>A0004号</span
>
<span
class="call-out-item-code"
:style="{ color: filterItem('7', 0) }"
>--</span
<div class="call-out-item" v-for="(v, i) in itemList" :key="i">
<div
class="call-out-item-title"
:style="{
background: filterItem('8', 0),
color: filterItem('7', 0),
}"
>
{{ v.type }}
</div>
</div>
<div class="call-out-item">
<div class="call-out-item-title">等待中</div>
<div class="call-out-item-text call-out-item-text-3">
<div class="call-out-item-text ">
<span
class="call-out-item-code"
:style="{ color: filterItem('7', 0) }"
>A0004号</span
>{{ v.num }}</span
>
<span
class="call-out-item-code"
:style="{ color: filterItem('7', 0) }"
>--</span
>{{ v.window }}</span
>
</div>
</div>
......@@ -173,77 +96,38 @@
<!-- 主体 -->
<div class="main flex flexc aic jcb">
<div class="call-out flex flexc jcb">
<div class="call-out-item">
<div class="call-out-item-title">正在呼叫</div>
<div class="call-out-item-text call-out-item-text-1">
<span
class="call-out-item-code"
:style="{ color: filterItem('7', 0) }"
>A0004号</span
>
<span
class="call-out-item-code"
:style="{ color: filterItem('7', 0) }"
>03号窗口</span
>
</div>
</div>
<div class="call-out-item">
<div class="call-out-item-title">正在办理</div>
<div class="call-out-item-text call-out-item-text-2">
<span
class="call-out-item-code"
:style="{ color: filterItem('7', 0) }"
>A0004号</span
>
<span
class="call-out-item-code"
:style="{ color: filterItem('7', 0) }"
>03号窗口</span
<div class="call-out-item" v-for="(v, i) in itemList" :key="i">
<div
class="call-out-item-title"
:style="{
background: filterItem('8', 0),
color: filterItem('7', 0),
}"
>
{{ v.type }}
</div>
</div>
<div class="call-out-item">
<div class="call-out-item-title">正在办理</div>
<div class="call-out-item-text call-out-item-text-2">
<div class="call-out-item-text ">
<span
class="call-out-item-code"
:style="{ color: filterItem('7', 0) }"
>A0004号</span
>{{ v.num }}</span
>
<span
class="call-out-item-code"
:style="{ color: filterItem('7', 0) }"
>03号窗口</span
>{{ v.window }}</span
>
</div>
</div>
<div class="call-out-item" v-for="v in 4" :key="v">
<div class="call-out-item-title">等待中</div>
<div class="call-out-item-text call-out-item-text-3">
<span
class="call-out-item-code"
:style="{ color: filterItem('7', 0) }"
>A0004号</span
>
<span
class="call-out-item-code"
:style="{ color: filterItem('7', 0) }"
>--</span
>
</div>
</div>
<!-- 等待叫号 -->
<div class="wait flex aic jcc">
等待叫号区域
</div>
<!-- banner -->
<div class="banner border flex aic jcc">banner</div>
<div class="banner flex aic jcc"></div>
</div>
<!-- 尾部 -->
<div class="footer flex aic jca">
......@@ -272,6 +156,27 @@
</p>
</div>
</div>
<!-- 通知公告 -->
<div class="notice flex aic ">
<div
class="title_logo flex aic jcc"
:style="{
background: filterItem('17', 0),
color: filterItem('15', 0),
}"
>
公告logo
</div>
<div
class="text"
:style="{
background: filterItem('18', 0),
color: filterItem('16', 0),
}"
>
公告类容公告类容公告类容公告类容
</div>
</div>
</div>
<!-- 空数据显示 -->
<div class="empty flex aic jcc" v-else>
......@@ -309,6 +214,38 @@ export default {
data() {
return {
api: process.env.VUE_APP_API_IMG_URL,
itemList: [
{
type: "正在呼叫",
num: "A0004号",
window: "03号窗口",
},
{
type: "正在办理",
num: "A0004号",
window: "03号窗口",
},
{
type: "正在办理",
num: "A0004号",
window: "03号窗口",
},
{
type: "正在办理",
num: "A0004号",
window: "03号窗口",
},
{
type: "正在办理",
num: "A0004号",
window: "03号窗口",
},
{
type: "正在办理",
num: "A0004号",
window: "03号窗口",
},
],
};
},
methods: {
......@@ -400,6 +337,7 @@ export default {
padding: 10px;
margin-top: 20px;
border-radius: 10px;
.banner {
width: 40%;
height: 100%;
......@@ -410,22 +348,28 @@ export default {
}
}
.call-out {
height: 100%;
padding: 0px 10px;
width: 100%;
.call-out-item {
width: 100%;
height: 50px;
margin-bottom: 10px;
padding: 0px 10px;
border-radius: 8px;
position: relative;
background-color: #ccc;
background-color: #f3f3f3;
display: flex;
align-items: center;
justify-content: space-between;
.call-out-item-title {
height: 100%;
height: 60%;
width: 20%;
text-align: center;
line-height: 50px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
background-color: #cbdbf4;
font-weight: 600;
font-size: 16px;
border-radius: inherit;
border-radius: 20px;
}
.call-out-item-text {
height: 100%;
......@@ -434,9 +378,7 @@ export default {
font-size: 20px;
padding: 0px 20px;
border-radius: 12px 8px 8px 0px;
position: absolute;
top: 0px;
right: 0px;
color: #000;
font-weight: 600;
text-align: left;
......@@ -444,15 +386,6 @@ export default {
margin: 0px 10px;
}
}
.call-out-item-text-1 {
background-color: #fdf7f2;
}
.call-out-item-text-2 {
background-color: #f1f8fe;
}
.call-out-item-text-3 {
background-color: #f4f5f6;
}
}
}
}
......@@ -489,11 +422,18 @@ export default {
padding: 10px;
border-radius: 4px;
background-color: #fff;
.wait {
width: 100%;
height: 60px;
margin-bottom: 10px;
border: 1px dashed #ececec;
border-radius: 4px;
}
.banner {
width: 100%;
height: 360px;
height: 300px;
border-radius: 4px;
color: #1890ff;
background: url("~@/assets/img/jzp_banner.png") no-repeat center/100% 100%;
}
.call-out {
width: 100%;
......@@ -501,17 +441,23 @@ export default {
width: 100%;
height: 50px;
margin-bottom: 10px;
padding: 0px 10px;
border-radius: 8px;
position: relative;
background-color: #ccc;
background-color: #f3f3f3;
display: flex;
align-items: center;
justify-content: space-between;
.call-out-item-title {
height: 100%;
height: 60%;
width: 20%;
text-align: center;
line-height: 50px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
background-color: #cbdbf4;
font-weight: 600;
font-size: 16px;
border-radius: inherit;
border-radius: 20px;
}
.call-out-item-text {
height: 100%;
......@@ -520,9 +466,7 @@ export default {
font-size: 20px;
padding: 0px 20px;
border-radius: 12px 8px 8px 0px;
position: absolute;
top: 0px;
right: 0px;
color: #000;
font-weight: 600;
text-align: left;
......@@ -530,15 +474,6 @@ export default {
margin: 0px 10px;
}
}
.call-out-item-text-1 {
background-color: #fdf7f2;
}
.call-out-item-text-2 {
background-color: #f1f8fe;
}
.call-out-item-text-3 {
background-color: #f4f5f6;
}
}
}
}
......@@ -551,5 +486,19 @@ export default {
font-weight: 600;
}
}
.notice {
height: 60px;
color: #fff;
.title_logo {
height: inherit;
width: 100px;
margin-right: 10px;
border: 1px dashed #ececec;
}
.text {
font-size: 18px;
font-weight: 600;
}
}
}
</style>
......@@ -74,6 +74,10 @@ const attrType = [
{ key: "12", label: "底部背景" },
{ key: "13", label: "数据标题背景" },
{ key: "14", label: "数据背景" },
{ key: "15", label: "公告标题" },
{ key: "16", label: "公告内容" },
{ key: "17", label: "公告标题背景" },
{ key: "18", label: "公告内容背景" },
];
export default {
props: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment