Commit effa6354 authored by 姬鋆屾's avatar 姬鋆屾

Merge branch 'reg' of http://gitlab.scsmile.cn/zxf/smart_gov_platform into reg

parents a3ab04bd c8bda477
......@@ -31,40 +31,36 @@
</div>
</div>
<!-- 主体 -->
<div class="main flex">
<div class="main ">
<div
class="left flex flexc aic jcc"
class="info flex aic jcc"
:style="{
background: filterItem('10', 0),
background: filterItem('10', 0)
? filterItem('10', 0)
: `url(${require('@/assets/img/info_bg.png')})`,
}"
>
<img src="../../../../assets/img/peopo.jpeg" />
<p>姓名:XXX</p>
<p>部门:审批部</p>
<p>编号:001</p>
<div
class="left-btn"
:style="{
backgroundImage: `linear-gradient(${filterItem(
'8',
0
)}, ${filterItem('7', 0)})`,
}"
>
回归
<div class="flex1">
<p>
<span class="mr25">XXX</span>
<span>001</span>
</p>
<p>审批部</p>
<div class="left-btn flex aic jcc">
回归
</div>
</div>
</div>
<div class="right flex1 flex flexwrap jcb acb">
<div
class="right-item"
v-for="(v, i) in filterNav('4')"
:key="v.id"
:class="{ border: !filterItem('4', i) }"
:style="{
background: filterItem('4', i),
}"
></div>
</div>
<div
class="item"
v-for="(v, i) in filterNav('4')"
:key="v.id"
:class="{ border: !filterItem('4', i) }"
:style="{
background: filterItem('4', i),
}"
></div>
</div>
<!-- 尾部 -->
<div class="footer flex jcc aic">
......@@ -209,7 +205,7 @@ export default {
.header-title {
h1 {
font-size: 30px;
color: #0866e8;
color: #fff;
margin: 0px;
margin-left: 10px;
font-weight: 600;
......@@ -223,39 +219,46 @@ export default {
.main {
height: 350px;
margin-top: 20px;
.left {
padding: 0px 30px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
.border {
border: 1px dashed #ececec;
}
.info {
grid-column: 1 / span 2;
width: 100%;
height: 100%;
width: 280px;
margin-right: 20px;
background: rgba(255, 255, 255, 0.8);
border-radius: 10px;
font-weight: 600;
padding: 10px;
padding-right: 120px;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 100% 100% !important;
border-radius: 4px;
img {
width: 100px;
margin-right: 20px;
}
.left-btn {
width: 150px;
height: 40px;
text-align: center;
line-height: 40px;
color: #fff;
background-image: linear-gradient(#bbe0ee, #adc0f1);
width: 100%;
height: 50px;
background: linear-gradient(0deg, #2a7cf6, #32baf0);
border-radius: 6px;
font-size: 22px;
font-weight: 500;
color: #ffffff;
}
}
.right {
.item {
width: 100%;
height: 100%;
.right-item {
width: 49%;
height: 100px;
border-radius: 6px;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 100% 100% !important;
}
.border {
border: 1px dashed #ececec;
}
border-radius: 4px;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 100% 100% !important;
color: #ffffff;
}
}
.footer {
......
......@@ -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 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
>
</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
>{{ 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>
</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" 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">
<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>
</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