|
|
@@ -0,0 +1,259 @@
|
|
|
+<template>
|
|
|
+ <div class="archive-people">
|
|
|
+ <HeadMenu/>
|
|
|
+ <div class="people-content">
|
|
|
+ <div class="people-basic">
|
|
|
+ <div class="people-basic-title">
|
|
|
+ <SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>
|
|
|
+ <span class="main">张三丰</span>
|
|
|
+ <span class="tag">布控人员</span>
|
|
|
+ </div>
|
|
|
+ <div class="people-basic-sub">
|
|
|
+ <span>男</span>
|
|
|
+ <span class="line"/>
|
|
|
+ <span>25岁</span>
|
|
|
+ <span class="line"/>
|
|
|
+ <span>未婚</span>
|
|
|
+ </div>
|
|
|
+ <div class="people-basic-avatar">
|
|
|
+ <el-image>
|
|
|
+ <template #error>
|
|
|
+ <div class="image-slot">
|
|
|
+ <img src="@/assets/images/web/archive-people_avatar.png" alt="暂无图片"/>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
+ <div class="people-basic-cols">
|
|
|
+ <div class="cols-item">
|
|
|
+ <div class="label">文化程度</div>
|
|
|
+ <div class="value">本科</div>
|
|
|
+ </div>
|
|
|
+ <div class="cols-item">
|
|
|
+ <div class="label">身份证</div>
|
|
|
+ <div class="value">120120120120120120</div>
|
|
|
+ </div>
|
|
|
+ <div class="cols-item">
|
|
|
+ <div class="label">户籍地</div>
|
|
|
+ <div class="value">海南省陵水黎族自治县新村镇</div>
|
|
|
+ </div>
|
|
|
+ <div class="cols-item">
|
|
|
+ <div class="label">现住地址</div>
|
|
|
+ <div class="value">海南省陵水黎族自治县新村镇海南省陵水黎族自治县新村镇</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="people-list">
|
|
|
+ <el-tabs v-model="state.activeTab" class="people-list-tabs">
|
|
|
+ <el-tab-pane label="首页" name="index"/>
|
|
|
+ <el-tab-pane label="人员证件信息" name="list"/>
|
|
|
+ <el-tab-pane label="Task" name="fourth"/>
|
|
|
+ </el-tabs>
|
|
|
+ <div class="people-list-block">
|
|
|
+ <div class="people-list-block-title">
|
|
|
+ <SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>人员证件信息
|
|
|
+ </div>
|
|
|
+ <div class="people-list-block-page">
|
|
|
+ <CusTable
|
|
|
+ :page-num="state.query.page.pageNum"
|
|
|
+ :page-size="state.query.page.pageSize"
|
|
|
+ :total="state.query.result.total"
|
|
|
+ :data="state.query.result.data"
|
|
|
+ :table-head="state.query.tableHead"
|
|
|
+ @handlePage="onPage"
|
|
|
+ >
|
|
|
+ </CusTable>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import {getCurrentInstance, reactive} from "vue";
|
|
|
+
|
|
|
+const {proxy} = getCurrentInstance()
|
|
|
+const state: any = reactive({
|
|
|
+ activeTab: 'list',
|
|
|
+ query: {
|
|
|
+ loading: false,
|
|
|
+ page: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10
|
|
|
+ },
|
|
|
+ tableHead: [
|
|
|
+ {value: "indexName", label: "索引中文", fixed: 'left', width: 180},
|
|
|
+ {value: "indexTableName", label: "索引表名", fixed: 'left', width: 180, popover: true},
|
|
|
+ {value: "dataSource", label: "数据共享来源", width: 180},
|
|
|
+ {value: "dataOffer", label: "数据提供来源", width: 180},
|
|
|
+ {value: "shareMethod", label: "共享方式", width: 180},
|
|
|
+ {value: "shareCycle", label: "共享周期", width: 180},
|
|
|
+ {value: "pictureField", label: "图片字段", width: 180},
|
|
|
+ {value: "themeMode", label: "主题模式", width: 180},
|
|
|
+ {value: "pictureModeCardNum", label: "图模式卡片数", width: 180},
|
|
|
+ {value: "cardColumnNum", label: "卡片列数", width: 180},
|
|
|
+ {value: "columnModelNum", label: "列模式列数", width: 180},
|
|
|
+ {value: "num", label: "数据量", width: 180},
|
|
|
+ {value: "linkTypeNum", label: "关联分类数量", width: 180},
|
|
|
+ {value: "createTime", label: "创建时间", width: 180},
|
|
|
+ {value: "updateTime", label: "最后修改时间", width: 180},
|
|
|
+ {value: "remark", label: "备注", width: 200},
|
|
|
+ ],
|
|
|
+ form: {},
|
|
|
+ formReal: {},
|
|
|
+ result: {
|
|
|
+ total: 0,
|
|
|
+ data: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+const onPage = (pageNum, pageSize) => {}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.archive-people {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #F6F7FB;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .people-content {
|
|
|
+ flex: 1;
|
|
|
+ padding: 24px;
|
|
|
+ display: flex;
|
|
|
+ gap: 16px;
|
|
|
+ .people-basic {
|
|
|
+ width: 362px;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient( 180deg, rgba(var(--cus-main-color-rgb), 0.2) 0%, rgba(var(--cus-main-color-rgb),0) 100%), #FFFFFF;
|
|
|
+ box-shadow: 0px 2px 4px 0px rgba(46,129,255,0.2);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 16px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+ .people-basic-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ .main {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 21px;
|
|
|
+ color: var(--cus-main-color);
|
|
|
+ }
|
|
|
+ .tag {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 0 8px;
|
|
|
+ background: #f8e5e5;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 1px solid #FF5454;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #FF5454;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .people-basic-sub {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: var(--cus-text-color-2);
|
|
|
+ line-height: 16px;
|
|
|
+ gap: 10px;
|
|
|
+ .line {
|
|
|
+ width: 1px;
|
|
|
+ height: 10px;
|
|
|
+ background-color: var(--cus-text-color-4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .people-basic-avatar {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .people-basic-cols {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ row-gap: 12px;
|
|
|
+ .cols-item {
|
|
|
+ font-size: 14px;
|
|
|
+ min-width: 50%;
|
|
|
+ .label {
|
|
|
+ font-weight: bold;
|
|
|
+ color: var(--cus-text-color-1);
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ margin-top: 2px;
|
|
|
+ color: var(--cus-text-color-2);
|
|
|
+ text-align: justify;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .people-list {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ :deep(.people-list-tabs) {
|
|
|
+ width: 100%;
|
|
|
+ .el-tabs__header {
|
|
|
+ margin: 0;
|
|
|
+ height: 45px;
|
|
|
+ .el-tabs__nav-wrap {
|
|
|
+ height: 100%;
|
|
|
+ &:after {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .el-tabs__nav-prev, .el-tabs__nav-next {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .el-tabs__nav-scroll {
|
|
|
+ height: 100%;
|
|
|
+ .el-tabs__nav {
|
|
|
+ height: 100%;
|
|
|
+ .el-tabs__item {
|
|
|
+ height: 100%;
|
|
|
+ font-size: 16px;
|
|
|
+ color: var(--cus-text-color-2);
|
|
|
+ padding: 0 16px;
|
|
|
+ &.is-active {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ box-shadow: 0px 4px 10px 0px rgba(62,123,250,0.1);
|
|
|
+ border-radius: 8px 8px 0px 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .people-list-block {
|
|
|
+ flex: 1;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 0px 8px 8px 8px;
|
|
|
+ padding: 16px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 15px;
|
|
|
+ .people-list-block-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ color: var(--cus-text-color-1);
|
|
|
+ .svg-icon {
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .people-list-block-page {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
CzRger
