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-23 16:36:32 +08:00
parent 71f22af6ac
commit 1d301b2d8f
19 changed files with 347 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
src/components/Correspondence/index.vue
View File

@@ -3,56 +3,37 @@
<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 class="item"><img src="/src/assets/images/r-icon-1.png" />白帝城</div>
<div class="item"><img src="/src/assets/images/r-icon-2.png" />三峡之颠</div>
<div class="item"><img src="/src/assets/images/r-icon-3.png" />龙桥河</div>
<div class="item"><img src="/src/assets/images/r-icon-4.png" />消防队</div>
<div class="item"><img src="/src/assets/images/r-icon-5.png" />文旅城</div>
<div class="item"><img src="/src/assets/images/r-icon-6.png" />交通城</div>
</div>
</div>
<div class="bom-box">
<div class="title">
<span>最近联系</span>
<Title2 title="最近联系" />
<div class="table">
<div class="header">
<div>人员姓名</div>
<div>部门</div>
<div>职位</div>
<div>时间</div>
</div>
<div class="list">
<div class="item" v-for="(item, index) in 10" :key="index">
<div>January</div>
<div>消防队</div>
<div>消防员</div>
<div>消防员</div>
</div>
</div>
</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>
import { fitChartSize } from '@/utils/dataUtil'
const props = defineProps({
width: {
type: Number,
@@ -67,57 +48,73 @@
<style lang="scss" scoped>
.box-4-content {
width: vw(300);
height: vh(1060);
background-image: url('/src/assets/images/rt-bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
margin-top: vh(10);
margin-left: vw(10);
position: relative;
z-index: 999;
width: vw(300);
height: vh(1060);
background-image: url('@/assets/images/bg-1.png');
background-size: 100% 100%;
.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;
.header {
height: vh(28);
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);
display: flex;
background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
& > div {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
}
.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);
.list {
overflow-y: auto;
height: vh(490);
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: 'transparent'; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
.item {
height: vh(50);
font-weight: 400;
font-size: vw(14);
color: #f1f7ff;
display: flex;
&:nth-child(2n + 1) {
background: linear-gradient(
90deg,
rgba(0, 150, 255, 0) 0%,
rgba(0, 150, 255, 0.22) 100%
);
}
& > div {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap; /* 保证文本在一行内显示 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
}
}
}
.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;
@@ -143,11 +140,9 @@
color: #ffffff;
line-height: vh(16);
flex-wrap: wrap;
// margin-left: vw(20);
.item {
width:33.33%;
width: 33.33%;
margin-top: vh(40);
// margin-right: vh(20);
display: flex;
flex-direction: column;
align-items: center;
@@ -157,22 +152,21 @@
}
& > img {
width: vw(54);
height: vh(60);
height: auto;
}
}
}
.title {
font-weight: 800;
font-size: vw(16);
line-height: vh(26);
width: vw(260);
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;
line-height: vh(26);
margin-left: vw(32.5);
font-size: vw(16);
font-weight: 800;
color: #fff;
background-image: url('@/assets/images/title-1.png');
background-size: 100% 100%;
}
}
}