Skip to content

S
smart_gov_platform
Commit e7c38927 authored by “yiyousong”'s avatar “yiyousong”
Browse files
Options

feat:添加集中显示屏竖版皮肤设置

parent f7692029
Hide whitespace changes
Inline Side-by-side
Showing with 205 additions and 0 deletions
base-manager-ui/admin/src/pages/basicset/surface/centralizeskin/CentralizeSkin.vue
View file @ e7c38927
......@@ -157,6 +157,122 @@
</div>
</div>
</div>
<!-- 集中显示屏 竖版 -->
<div
class="vertical-skin"
:id="conponentsId"
v-if="imageResolution === '2'"
:style="{
background: filterItem('1', 0),
}"
>
<!-- 头部 -->
<div class="header flex aic jcc">
<h1 :style="{ color: filterItem('2', 0) }">政务服务中心</h1>
</div>
<!-- 主体 -->
<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>
</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" 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>
<!-- banner -->
<div class="banner border flex aic jcc">banner</div>
</div>
<!-- 尾部 -->
<div class="footer flex aic jca">
<div class="footer-item flex flexc jcc aic">
<p :style="{ color: filterItem('5', 0) }">今日取号量</p>
<p class="footer-count" :style="{ color: filterItem('6', 0) }">
200次
</p>
</div>
<div class="footer-item flex flexc jcc aic">
<p :style="{ color: filterItem('5', 0) }">累计取号量</p>
<p class="footer-count" :style="{ color: filterItem('6', 0) }">
200次
</p>
</div>
<div class="footer-item flex flexc jcc aic">
<p :style="{ color: filterItem('5', 0) }">当前等待人数</p>
<p class="footer-count" :style="{ color: filterItem('6', 0) }">
200人
</p>
</div>
<div class="footer-item flex flexc jcc aic">
<p :style="{ color: filterItem('5', 0) }">评价等待时间</p>
<p class="footer-count" :style="{ color: filterItem('6', 0) }">
12分钟
</p>
</div>
</div>
</div>
<!-- 空数据显示 -->
<div class="empty flex aic jcc" v-else>
<a-empty
......@@ -255,6 +371,9 @@ export default {
</script>
<style lang="less" scoped>
.border {
border: 1px dashed #1890ff;
}
.centralize-across {
width: 1000px;
height: 562.5px;
......@@ -347,4 +466,90 @@ export default {
}
}
}
.vertical-skin {
height: 1000px;
width: 562px;
padding: 0px 10px;
background-image: linear-gradient(#26c5ff, #2c66ff);
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 100% 100% !important;
.header {
height: 80px;
h1 {
margin: 0px;
margin-left: 10px;
font-size: 30px;
font-weight: bold;
color: #fff;
}
}
.main {
width: 100%;
padding: 10px;
border-radius: 4px;
background-color: #fff;
.banner {
width: 100%;
height: 360px;
border-radius: 4px;
color: #1890ff;
}
.call-out {
width: 100%;
.call-out-item {
width: 100%;
height: 50px;
margin-bottom: 10px;
border-radius: 8px;
position: relative;
background-color: #ccc;
.call-out-item-title {
height: 100%;
width: 20%;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 16px;
border-radius: inherit;
}
.call-out-item-text {
height: 100%;
width: 80%;
line-height: 50px;
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;
span {
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;
}
}
}
}
.footer {
margin-top: 20px;
width: 100%;
color: #fff;
.footer-count {
font-size: 18px;
font-weight: 600;
}
}
}
</style>
\ No newline at end of file
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