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

perf: 修改集中屏皮肤模板

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