lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：新增景区页面

Browse Source
This commit is contained in:
zjc
2024-12-17 18:18:07 +08:00
parent 5e5ce522db
commit 1108aafed4
22 changed files with 1061 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/components/Correspondence/index.vue Normal file
View File

@@ -0,0 +1,166 @@
<template>
<div class="box-4-content">
<div class="top-box">
<div class="title">融合通信</div>
<div class="icon-box flex">
<div class="item"><img src="/src/assets/images/r-icon-1.png" alt="" /> 白帝城 </div>
<div class="item"><img src="/src/assets/images/r-icon-2.png" alt="" />三峡之颠</div>
<div class="item"><img src="/src/assets/images/r-icon-3.png" alt="" />龙桥河</div>
<div class="item"><img src="/src/assets/images/r-icon-4.png" alt="" />消防队</div>
<div class="item"><img src="/src/assets/images/r-icon-5.png" alt="" />文旅城</div>
<div class="item"><img src="/src/assets/images/r-icon-6.png" alt="" />交通城</div>
</div>
</div>
<div class="bom-box">
<div class="title">
<span>最近联系</span>
</div>
<table class="table">
<tr class="tr-th">
<th>人员姓名</th>
<th>部门</th>
<th>职位</th>
<th>时间</th>
</tr>
<tr class="tr-td">
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
</tr>
<tr class="tr-td">
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
</tr>
<tr class="tr-td">
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
</tr>
<tr class="tr-td">
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
</tr>
</table>
</div>
</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.box-4-content {
width: vw(260);
height: vh(1060);
background-image: url('/src/assets/images/rt-bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
margin-top: vh(10);
margin-left: vw(10);
position: relative;
z-index: 999;
.bom-box {
.table {
width: 100%;
margin-top: vh(5);
.tr-th {
background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
border-radius: 0px 0px 0px 0px;
// border: 1px solid;
border-image: linear-gradient(180deg, rgba(0, 150, 255, 0), rgba(0, 150, 255, 1)) 1 1;
font-weight: 400;
font-size: vw(12);
color: #0096ff;
line-height: vh(14);
text-align: left;
font-style: normal;
text-transform: none;
th {
padding: vw(5);
}
}
.tr-td {
font-weight: 400;
font-size: vw(14);
color: #f1f7ff;
line-height: vh(16);
text-align: left;
font-style: normal;
text-transform: none;
td {
padding: vh(5) vw(10);
}
}
.tr-td:nth-child(odd) {
background: linear-gradient(90deg, rgba(0, 150, 255, 0) 0%, rgba(0, 150, 255, 0.22) 100%);
}
}
.title {
background-image: url('/src/assets/images/nav-l-t-bg.png');
background-size: 100% 100%;
span {
margin-left: vw(30);
font-weight: 800;
font-size: vw(15);
line-height: vh(26);
text-align: center;
font-style: normal;
text-transform: none;
background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
}
}
.top-box {
width: 100%;
height: vh(500);
.icon-box {
font-weight: 400;
font-size: vw(14);
color: #ffffff;
line-height: vh(16);
flex-wrap: wrap;
margin-left: vw(20);
.item {
margin-top: vh(40);
margin-right: vh(20);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&:nth-child(3n) {
margin-right: 0;
}
& > img {
width: vw(54);
height: vh(60);
}
}
}
.title {
font-weight: 800;
font-size: vw(16);
line-height: vh(26);
text-align: center;
font-style: normal;
text-transform: none;
background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
}
}
</style>