<template>
|
<view>
|
<!-- 顶部 -->
|
<headNav idIndex="0" text="中国医学人物知识库" />
|
<!-- 搜索 -->
|
<view class="flex flex-center Search">
|
<!-- <luanqing-search class="search_bar" @onSearch="onSearch"></luanqing-search> -->
|
<advancedSearch
|
@onSearch="onSearch"
|
placehold="输入姓名/别名/时期/传主职业搜索"
|
:isAvancedTrue="false"
|
:keyword="keywords"
|
/>
|
<view
|
class="advancedSea"
|
@click="isAvancedClick"
|
style="color: #244a7b; cursor: pointer"
|
>高级搜索 ∨</view
|
>
|
</view>
|
<!-- 热门搜索 -->
|
<view
|
class="flex flex-center hotSearch"
|
style="font-size: 20rpx; margin: 10rpx 0"
|
>
|
热门搜索：
|
<ul class="flex" style="margin-right: 10rpx">
|
<li
|
v-for="item in hot"
|
@click="hotSearchClick(item)"
|
:key="item.id"
|
class="cursor"
|
style="color: #5879a4"
|
>
|
{{ item.name }}
|
</li>
|
</ul>
|
</view>
|
<!-- 高级搜索 -->
|
<view
|
class="advancedSeaTrue"
|
v-if="isAdvancedSearch"
|
style="padding: 0 230rpx; margin-bottom: 0.18rem"
|
>
|
<view
|
style="background-color: #fff; padding: 20rpx"
|
class="advancedSeaTrue1"
|
>
|
<h3>高级搜索</h3>
|
<MyForm @submit="onSubmit" @reset="resetForm" :from="from" />
|
</view>
|
</view>
|
<uni-row
|
class="demo-uni-row zhushuju flex flex-items-start"
|
style="padding: 0 230rpx"
|
>
|
<!-- 左侧 -->
|
<view class="fbox2" style="width: 2.6rem">
|
<!-- 职业 -->
|
<view
|
class="demo-uni-col zhiye dark box boox"
|
style="
|
width: 2.6rem;
|
margin-bottom: 40rpx;
|
background-color: #fff;
|
border: 2rpx solid #e0e0e0;
|
min-height: 2rem;
|
"
|
>
|
<h3>{{ profession.title }}</h3>
|
<ul
|
style="margin-top: 10rpx"
|
:class="{ a: activeBox === 'a' ? 'a' : '' }"
|
>
|
<li
|
class="flex"
|
:style="{
|
background: profession.index === item.tagId ? '#d6e3f4' : '',
|
borderRadius: profession.index === item.tagId ? '60rpx' : '',
|
display: index + 1 > professionIndex ? 'none' : 'flex',
|
}"
|
v-for="(item, index) in profession.list"
|
:key="index"
|
style="padding: 0 20rpx; line-height: 0.3rem; height: 0.3rem"
|
@click="handInstitCLick(item, 'a')"
|
>
|
<view class="">{{ item.tagName }}</view>
|
<view class="">{{ item.count }}</view>
|
</li>
|
</ul>
|
<view v-if="profession.list.length - 1 > 3" class="flex flex-center">
|
<view
|
class="toggleButton"
|
style="color: #244a7b"
|
@click="shrinkClick('a', '职业')"
|
>
|
{{ activeBox !== "a" ? "更多 ∨" : "收起 ∧" }}
|
</view>
|
</view>
|
</view>
|
<!-- 时期 -->
|
<view
|
class="demo-uni-col dark box boox zhongjianleft"
|
style="background-color: #fff; border: 2rpx solid #e0e0e0"
|
:style="{ marginBottom: isAdvancedSearch === true ? '0' : '40rpx' }"
|
>
|
<h3>{{ dynasty.title }}</h3>
|
<ul
|
style="margin-top: 10rpx"
|
:class="{ b: activeBox === 'b' ? 'b' : '' }"
|
>
|
<!-- background-color: #d6e3f4;border-radius: 60rpx; -->
|
<li
|
class="flex"
|
:style="{
|
background: dynasty.index === item.dynastyId ? '#d6e3f4' : '',
|
borderRadius: dynasty.index === item.dynastyId ? '60rpx' : '',
|
display: index + 1 > dynastyIndex ? 'none' : 'flex',
|
}"
|
v-for="(item, index) in dynasty.list"
|
:key="index"
|
style="padding: 0 20rpx"
|
@click="handInstitCLick(item, 'b')"
|
>
|
<view class="">{{ item.dynastyName }}</view>
|
<view class="">{{ item.count }}</view>
|
</li>
|
</ul>
|
<view v-if="dynasty.list.length - 1 > 3" class="flex flex-center">
|
<view
|
class="toggleButton"
|
style="color: #244a7b"
|
@click="shrinkClick('b', '时期')"
|
>
|
{{ activeBox !== "b" ? "更多 ∨" : "收起 ∧" }}
|
</view>
|
</view>
|
</view>
|
<!-- 来源 -->
|
<view
|
v-if="!isAdvancedSearch"
|
class="demo-uni-col dark box boox"
|
style="
|
/* height: 250rpx; */
|
background-color: #fff;
|
border: 2rpx solid #e0e0e0;
|
"
|
>
|
<h3>{{ source.title }}</h3>
|
<ul
|
class="laiyuan"
|
style="margin-top: 10rpx"
|
:class="{ b: activeBox === 'b' ? 'b' : '' }"
|
>
|
<!-- background-color: #d6e3f4;border-radius: 60rpx; -->
|
<li
|
class="flex liClick"
|
v-for="(item, index) in source.list"
|
:key="index"
|
style="padding: 0 20rpx; color: #244a7b"
|
@click="handInstitCLick(item, 'c')"
|
>
|
<view class="">{{ index + 1 + ". " + item.source }}</view>
|
</li>
|
</ul>
|
<!-- <view class="flex flex-center">
|
<view class="toggleButton" style="font-size: 25rpx;color: #C1D3EA;" @click="shrinkClick('b')">
|
{{ activeBox !== 'b' ? '更多 ∨' : '收起 ∧' }}
|
</view>
|
</view> -->
|
</view>
|
</view>
|
<!-- 右侧 -->
|
<view
|
class="rightList demo-uni-col light fbox3 relative flex flex-column flex-grow: 1;"
|
style="
|
width: 100%;
|
margin-left: 0.2rem;
|
background-color: #fff;
|
border: 1px solid #c1d3ea;
|
padding: 10rpx 20rpx;
|
"
|
>
|
<view class="flex lightTop" style="width: 100%; margin: 0.1rem 0">
|
<view class="" style="color: #2c2c2c">共{{ total }}条</view>
|
<el-button size="small" @click="exportClick">下载</el-button>
|
</view>
|
<el-table :data="tableData" class="lightBo" style="width: 100%">
|
<el-table-column prop="id" label="序号" width="110"></el-table-column>
|
<el-table-column prop="personName" label="姓名"></el-table-column>
|
<el-table-column prop="personAlias" label="别名"></el-table-column>
|
<el-table-column
|
prop="gender"
|
label="性别"
|
width="70"
|
></el-table-column>
|
<el-table-column prop="period" label="时期"></el-table-column>
|
<el-table-column
|
prop="birthYear"
|
label="生年"
|
width="130"
|
></el-table-column>
|
<el-table-column
|
prop="deathYear"
|
label="卒年"
|
width="130"
|
></el-table-column>
|
<el-table-column prop="nativePlace" label="籍贯"></el-table-column>
|
<el-table-column
|
prop="socialDistinction"
|
label="社会身份"
|
></el-table-column>
|
<el-table-column prop="official" label="官职"></el-table-column>
|
</el-table>
|
<!-- 分页 -->
|
<el-row class="fenye">
|
<el-pagination
|
class="paging flex"
|
:current-page="CurrentPage"
|
:total="total"
|
:page-size="pageSize"
|
@current-change="CurrentChange"
|
@prev-click="PrevClick"
|
@next-click="NextClick"
|
prev-text="上一页"
|
next-text="下一页"
|
background
|
layout="prev, pager, next"
|
>
|
</el-pagination>
|
</el-row>
|
</view>
|
</uni-row>
|
<div class="abox"></div>
|
<Footer1 />
|
</view>
|
</template>
|
|
<script>
|
import Footer1 from "@/components/footer/footer";
|
import MyForm from "@/components/form/form.vue";
|
// 下载需要导入的依赖
|
import ExportJsonExcel from "js-export-excel";
|
import {
|
getPDataStatistics,
|
getPDownload,
|
getPList,
|
getHotSearch,
|
getPersonList,
|
} from "@/api/index.js";
|
export default {
|
components: {
|
Footer1,
|
MyForm,
|
},
|
data() {
|
return {
|
// 高级搜索显示
|
isAdvancedSearch: false,
|
// 高级搜索
|
from: {
|
from: [
|
{
|
type: "input",
|
label: "姓名",
|
name: "name",
|
value: "",
|
},
|
{
|
type: "input",
|
label: "别名",
|
name: "alias",
|
value: "",
|
},
|
{
|
type: "input",
|
label: "籍贯",
|
name: "nativePlace",
|
value: "",
|
},
|
{
|
type: "select",
|
label: "职业",
|
value: "",
|
name: "tagId",
|
options: [
|
{
|
label: "医家",
|
value: "1",
|
},
|
{
|
label: "世家",
|
value: "2",
|
},
|
],
|
},
|
{
|
type: "input",
|
label: "职官",
|
name: "official",
|
value: "",
|
},
|
{
|
type: "select",
|
label: "性别",
|
value: "",
|
name: "genderType",
|
options: [
|
{
|
label: "未指明",
|
value: "UNKNOWN",
|
},
|
{
|
label: "男",
|
value: "MALE",
|
},
|
{
|
label: "女",
|
value: "WOMAN",
|
},
|
],
|
},
|
{
|
type: "input",
|
label: "时期",
|
name: "dynasty",
|
value: "",
|
},
|
{
|
type: "input",
|
label: "机构",
|
name: "institution",
|
value: "",
|
},
|
],
|
},
|
|
// 热门搜索
|
hot: [],
|
// 职业
|
profession: {
|
title: "职业",
|
index: 0,
|
id: 0,
|
list: [],
|
},
|
// 现在多少条职业数据
|
professionIndex: 4,
|
// 展开和收缩的按钮需要
|
activeBox: null,
|
// 时期
|
dynasty: {
|
title: "时期",
|
id: "",
|
index: "",
|
list: [],
|
},
|
// 现在多少条时期数据
|
dynastyIndex: 4,
|
// 来源
|
source: {
|
title: "来源",
|
index: 0,
|
id: 0,
|
list: [],
|
},
|
// 表格的数组
|
tableData: [],
|
// 分页的总数
|
total: 100,
|
// 当前页
|
CurrentPage: 1,
|
// 一页显示多少条数据
|
pageSize: 10,
|
dataTable: [],
|
option: {},
|
keywords: "",
|
submitData: {
|
name: "",
|
alias: "",
|
nativePlace: "",
|
tagId: "",
|
official: "",
|
genderType: "",
|
},
|
};
|
},
|
onLoad(options) {
|
console.log(options.keyword);
|
this.onSearch({ text: options.keyword });
|
},
|
mounted() {
|
this.getStatistics();
|
},
|
methods: {
|
//重置搜索结果
|
resetForm() {
|
this.onSearch("");
|
},
|
// ExportJsonExcel实例
|
Ture() {
|
// 创建ExportJsonExcel实例对象
|
let toExcel = new ExportJsonExcel(this.option);
|
// 调用保存方法
|
toExcel.saveExcel();
|
},
|
// 下载按钮
|
async exportClick() {
|
const dataList = this.tableData;
|
console.log(this.keywords, "keywords");
|
let Obj = {
|
keywords: "", //搜索框检索
|
// keywords: this.keywords, //搜索框检索
|
name: this.submitData.name, //姓名
|
alias: this.submitData.alias, //别名
|
nativePlace: this.submitData.nativePlace, //机关
|
tagId: this.profession.id !== 0 ? Number(this.profession.id) : null, //职业id
|
official: this.submitData.official, //职官
|
genderType:
|
this.submitData.genderType !== "" ? this.submitData.genderType : null, //性别
|
dynasty: this.dynasty.id !== "" ? Number(this.dynasty.id) : null, //朝代id
|
institution: "", //机构
|
bookId: null, //来源id
|
page: 1,
|
pageSize: 1,
|
};
|
console.log(Obj, "Obj");
|
// // 搜索
|
await getPDownload(Obj).then((res) => {
|
console.log(res, "exportClick");
|
// if (res.success) {
|
// console.log(res, "搜索接口");
|
// this.tableData = res.list;
|
// // 总数量
|
// this.total = res.npage.totalCount;
|
// }
|
});
|
let dataTable = []; // dataTable代表excel文件中的数据内容
|
if (dataList) {
|
for (let i in dataList) {
|
let obj = {
|
序号: dataList[i].id,
|
姓名: dataList[i].personName,
|
别名: dataList[i].personAlias,
|
性别: dataList[i].gender,
|
时期: dataList[i].period,
|
生年: dataList[i].birthYear,
|
卒年: dataList[i].deathYear,
|
籍贯: dataList[i].nativePlace,
|
社会身份: dataList[i].socialDistinction,
|
官职: dataList[i].official,
|
};
|
|
dataTable.push(obj); // 设置excel每列获取的数据源
|
}
|
}
|
this.option.fileName = "中医医学人物知识库"; //excel文件名
|
//excel文件数据
|
this.option.datas = [
|
{
|
// excel文件的数据源
|
sheetData: dataTable,
|
// excel文件sheet的表名
|
sheetName: "sheet",
|
// excel文件表头名
|
sheetHeader: [
|
"序号",
|
"姓名",
|
"别名",
|
"性别",
|
"别名",
|
"时期",
|
"生年",
|
"卒年",
|
"籍贯",
|
"社会身份",
|
"官职",
|
],
|
// excel文件列名
|
sheetFilter: [
|
"序号",
|
"姓名",
|
"别名",
|
"性别",
|
"别名",
|
"时期",
|
"生年",
|
"卒年",
|
"籍贯",
|
"社会身份",
|
"官职",
|
],
|
// columnWidths: ['10', '10', '20'] //excel列宽度设置
|
},
|
];
|
this.Ture();
|
},
|
// 接口
|
async getStatistics() {
|
// 热门搜索
|
await getHotSearch().then((res) => {
|
console.log(res, "热门搜索");
|
this.hot = Object.keys(res.object).map((key) => {
|
return {
|
id: parseInt(key),
|
name: res.object[key],
|
};
|
});
|
});
|
// 右侧职业、时期、来源的数据
|
await getPDataStatistics().then((res) => {
|
console.log(res, "接口成功sdsdfsdsfs");
|
let totalCount1 = res.object.occupationStatistic.details.reduce(
|
(total, item) => total + item.count,
|
0
|
);
|
let totalCount2 = res.object.dynastyStatistic.details.reduce(
|
(total, item) => total + item.count,
|
0
|
);
|
// 职业
|
this.profession.list = [
|
{ count: totalCount1, tagName: "全部", tagId: 0 },
|
...res.object.occupationStatistic.details,
|
];
|
// 高级搜索里面的职业--------------------------------------------------
|
// 找到职业字段在 from 对象中的索引
|
const professionIndex = this.from.from.findIndex(
|
(field) => field.label === "职业"
|
);
|
// 如果找到了职业字段
|
if (professionIndex !== -1) {
|
// 将 profession.list 转换为 options 格式
|
const options = this.profession.list.map((item) => ({
|
label: item.tagName,
|
value: item.tagId.toString(), // 将 id 转换为字符串，确保与 value 类型一致
|
}));
|
|
// 更新职业字段的 options 属性
|
this.$set(this.from.from[professionIndex], "options", options);
|
}
|
// --------------------------------------------------
|
this.profession.index = this.profession.list[0].tagId;
|
// 时期
|
this.dynasty.list = [
|
{ count: totalCount2, dynastyName: "全部", dynastyId: "" },
|
...res.object.dynastyStatistic.details,
|
];
|
// 来源
|
this.source.list = res.object.sourceStatistic.details;
|
this.source.index = this.source.list[0].bookId;
|
});
|
},
|
// 热门搜索
|
hotSearchClick(item) {
|
this.onSearch({ text: item.name });
|
console.log(item, "热门搜索");
|
},
|
// 左侧的机构统计等等按钮
|
handInstitCLick(item, name) {
|
// this.dynasty.id = 0;
|
// this.source.id = 0;
|
// this.profession.id = 0;
|
// this.CurrentPage = 1;
|
if (name == "a") {
|
this.profession.index = item.tagId;
|
this.profession.id = item.tagId;
|
this.CurrentPage = 1;
|
} else if (name == "b") {
|
this.dynasty.index = item.dynastyId;
|
this.dynasty.id = item.dynastyId;
|
this.CurrentPage = 1;
|
console.log(item);
|
} else if (name == "c") {
|
this.source.index = item.bookId;
|
this.source.id = item.bookId;
|
this.CurrentPage = 1;
|
console.log("来源");
|
}
|
this.onSearch("");
|
|
console.log(item, name);
|
},
|
isAvancedClick() {
|
this.isAdvancedSearch = !this.isAdvancedSearch;
|
this.$nextTick(() => {
|
var box1Height = document.querySelector(".fbox").offsetHeight;
|
// let box2Height= document.querySelector('.fbox1').style.height = box1Height + 'px';
|
let box2Height = document.querySelector(".fbox1").offsetHeight;
|
if (box1Height <= box2Height) {
|
document.querySelector(".fbox1").style.height = box1Height + "px";
|
}
|
});
|
},
|
// 高级搜索
|
async onSubmit(val) {
|
console.log(val);
|
this.profession.index = Number(val.tagId);
|
this.profession.id = Number(val.tagId);
|
const currentDynasty = this.dynasty.list.find(
|
(f) => f.dynastyName == val.dynasty
|
);
|
if (currentDynasty) {
|
this.dynasty.index = currentDynasty.dynastyId;
|
this.dynasty.id = currentDynasty.dynastyId;
|
}
|
this.submitData = val;
|
this.CurrentPage = 1;
|
let Obj = {
|
keywords: "", //搜索框检索
|
name: val.name, //姓名
|
alias: val.alias, //别名
|
nativePlace: val.nativePlace, //机关
|
tagId: val.tagId !== "" ? Number(val.tagId) : null, //职业id
|
official: val.official, //职官
|
genderType: val.genderType !== "" ? val.genderType : null, //性别
|
dynasty: val.dynasty, //朝代id
|
dynastyId: this.dynasty.id, //朝代id
|
institution: val.institution, //机构
|
bookId: null, //来源id
|
page: this.CurrentPage,
|
pageSize: this.pageSize,
|
};
|
// // 搜索
|
await getPersonList(Obj).then((res) => {
|
console.log(res);
|
if (res.success) {
|
console.log(res, "搜索接口");
|
this.tableData = res.list;
|
// 总数量
|
this.total = res.npage.totalCount;
|
}
|
});
|
console.log(val);
|
},
|
// 基础搜索
|
async onSearch(val) {
|
this.keywords = val.text;
|
let Obj = {
|
keywords: val.text, //搜索框检索
|
name: "", //姓名
|
alias: "", //别名
|
nativePlace: "", //机关
|
tagId: this.profession.id, //职业id
|
official: "", //职官
|
genderType: null, //性别
|
dynasty: null, //朝代id
|
dynastyId: this.dynasty.id, //朝代id
|
institution: "", //机构
|
bookId: this.source.id, //来源id
|
page: this.CurrentPage,
|
pageSize: this.pageSize,
|
};
|
console.log(Obj, "ObjObjObj");
|
// // 搜索
|
await getPersonList(Obj).then((res) => {
|
if (res.success) {
|
console.log(res, "搜索接口");
|
this.tableData = res.list;
|
// 总数量
|
this.total = res.npage.totalCount;
|
}
|
});
|
// console.log(val, '士大夫但是');
|
},
|
// 热门搜索
|
HotClick(id) {
|
this.hot.forEach((item) => {
|
if (item.id === id) {
|
console.log(item.id === id);
|
item.bgColor = true;
|
} else {
|
console.log(item.id === id);
|
item.bgColor = false;
|
}
|
});
|
},
|
// 展开收缩
|
shrinkClick(box, name) {
|
console.log(box);
|
console.log(this.dynasty.list);
|
|
// this.activeBox = this.activeBox === 'a' ? null : 'a';
|
if (name == "职业") {
|
console.log("职业");
|
this.professionIndex =
|
this.professionIndex < this.profession.list.length
|
? this.profession.list.length
|
: 4;
|
this.dynastyIndex = 4;
|
this.activeBox = this.activeBox === "a" ? null : "a";
|
} else {
|
console.log("时期");
|
this.dynastyIndex =
|
this.dynastyIndex < this.dynasty.list.length
|
? this.dynasty.list.length
|
: 4;
|
this.professionIndex = 4;
|
this.activeBox = this.activeBox === "b" ? null : "b";
|
}
|
},
|
// 分页当前页触发事件
|
CurrentChange(val) {
|
if (this.CurrentPage != val) {
|
this.CurrentPage = val;
|
console.log("当前页", val);
|
this.onSearch("");
|
}
|
},
|
// 上一页
|
PrevClick(val) {
|
if (this.CurrentPage != val) {
|
this.CurrentPage = val;
|
// console.log('上一页', val);
|
// console.log(this.CurrentPage);
|
this.onSearch("");
|
}
|
},
|
// 下一页
|
NextClick(val) {
|
if (this.CurrentPage != val) {
|
// console.log('下一页',val);
|
this.CurrentPage = val;
|
// console.log(this.CurrentPage);
|
this.onSearch("");
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
/* 表头 */
|
::v-deep .el-table__header {
|
margin-bottom: 0.02rem;
|
}
|
|
::v-deep .has-gutter tr > th {
|
background-color: #dde8f6 !important;
|
font-weight: normal;
|
}
|
|
::v-deep .el-table__header th {
|
height: 0.3rem;
|
line-height: 0.3rem;
|
font-size: 0.14rem;
|
color: #2c2c2c;
|
/* 表头文字颜色为白色，增加对比度 */
|
margin-bottom: 0.02rem !important;
|
}
|
|
::v-deep .el-table::before {
|
border: 0;
|
background-color: #fff;
|
}
|
|
/* 表格 */
|
::v-deep .el-table__body td {
|
height: 0.3rem;
|
line-height: 0.3rem;
|
font-size: 0.14rem;
|
color: #2c2c2c !important;
|
font-weight: normal;
|
}
|
|
.abox {
|
height: 1rem;
|
}
|
|
/* 分页 */
|
.paging ::v-deep .btn-prev,
|
.paging ::v-deep .btn-next {
|
border: 0;
|
}
|
|
.paging ::v-deep .btn-prev span,
|
.paging ::v-deep .btn-next span {
|
font-size: 0.12rem;
|
height: 0.3rem;
|
line-height: 0.3rem;
|
background-color: #fff;
|
color: #9e9e9e;
|
text-align: center;
|
border: 1px solid #9e9e9e;
|
padding: 0 0.1rem;
|
}
|
|
.paging ::v-deep .el-pager li {
|
font-size: 0.1rem;
|
width: 0.28rem;
|
height: 0.3rem;
|
line-height: 0.3rem;
|
background-color: #fff;
|
color: #9e9e9e;
|
text-align: center;
|
border: 1px solid #9e9e9e;
|
}
|
|
/* -------------- */
|
/* 右侧 */
|
.rightList {
|
padding-left: 0.2rem !important;
|
|
.light {
|
padding: 0.1rem 0.2rem !important;
|
}
|
|
.lightTop {
|
font-size: 0.14rem !important;
|
}
|
|
.el-button {
|
font-size: 0.12rem !important;
|
padding: 0.05rem 0.18rem !important;
|
}
|
|
.lightBo {
|
font-size: 0.14rem !important;
|
|
.is-leaf {
|
background-color: #c1d3ea !important;
|
color: #2c2c2c !important;
|
font-weight: 400;
|
|
.cell {
|
height: 0.3rem !important;
|
line-height: 0.3rem !important;
|
}
|
}
|
}
|
|
.el-table__body-wrapper {
|
.el-table__row {
|
height: 0.46rem !important;
|
line-height: 0.46rem !important;
|
|
.cell {
|
height: 0.3rem !important;
|
line-height: 0.3rem !important;
|
}
|
}
|
}
|
}
|
|
@media screen and (min-width: 2560px) and (max-width: 3840px) {
|
/* 搜索 */
|
.Search {
|
margin: 0.35rem 0 0.16rem !important;
|
font-size: 0.12rem !important;
|
}
|
|
.Search ::v-deep .advancedSea {
|
font-size: 0.12rem !important;
|
margin-left: 0.35rem;
|
}
|
|
.Search ::v-deep .flex-center {
|
height: 80% !important;
|
}
|
|
.hotSearch {
|
font-size: 0.12rem !important;
|
margin-bottom: 0.19rem !important;
|
|
li {
|
font-size: 0.12rem !important;
|
margin: 0 0.1rem;
|
}
|
}
|
|
.advancedSeaTrue,
|
.zhushuju {
|
padding: 0 1.24rem !important;
|
}
|
|
.advancedSeaTrue1 {
|
padding: 0.08rem 0.19rem !important;
|
font-size: 0.14rem !important;
|
}
|
|
/* Form组件里面的样式 */
|
::v-deep .el-row {
|
display: flex;
|
flex-wrap: wrap;
|
margin-top: 0.1rem !important;
|
}
|
|
::v-deep .el-form-item {
|
display: flex !important;
|
flex-wrap: wrap !important;
|
margin-bottom: 0.18rem !important;
|
}
|
|
::v-deep .el-form-item__label {
|
font-size: 0.14rem !important;
|
height: 0.3rem !important;
|
display: flex !important;
|
align-items: center !important;
|
}
|
|
::v-deep .el-input__inner {
|
font-size: 0.14rem !important;
|
height: 0.3rem !important;
|
}
|
|
::v-deep .Formbtn {
|
width: 100% !important;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.el-button {
|
width: 0.7rem !important;
|
height: 0.3rem !important;
|
font-size: 0.12rem;
|
}
|
}
|
|
/* —————————————————————— */
|
/* 左边的 */
|
.boox {
|
padding: 0.1rem 0.09rem;
|
min-height: 2rem !important;
|
position: relative;
|
|
ul {
|
margin-top: 0.16rem !important;
|
}
|
|
h3 {
|
font-size: 0.14rem;
|
margin-left: 0.1rem;
|
}
|
|
li {
|
height: 0.3rem;
|
line-height: 0.3rem;
|
padding: 0 0.2rem !important;
|
margin: 0.05rem 0 !important;
|
border-radius: 0.3rem !important;
|
}
|
|
.toggleButton1 {
|
position: absolute;
|
bottom: 0.1rem !important;
|
left: 40% !important;
|
}
|
|
.toggleButton {
|
font-size: 0.14rem !important;
|
}
|
}
|
|
.zhongjianleft {
|
margin: 0.27rem 0 !important;
|
}
|
|
.laiyuan {
|
min-height: 2rem !important;
|
overflow: auto;
|
}
|
|
/* ———————————————————— */
|
::v-deep .uni-input-placeholder {
|
font-size: 0.14rem;
|
height: 100%;
|
display: flex;
|
align-content: center;
|
align-items: center;
|
}
|
|
::v-deep .ffff {
|
border-radius: 0.3rem !important;
|
height: 0.36rem !important;
|
}
|
|
::v-deep .widget_button {
|
border-radius: inherit !important;
|
margin-right: 0.02rem !important;
|
background-color: #597aa5;
|
}
|
|
/* 右侧 */
|
.rightList {
|
padding-left: 0.2rem !important;
|
|
.light {
|
padding: 0.1rem 0.2rem !important;
|
}
|
|
.lightTop {
|
font-size: 0.14rem !important;
|
}
|
|
.el-button {
|
font-size: 0.12rem !important;
|
padding: 0.05rem 0.18rem !important;
|
}
|
|
.lightBo {
|
font-size: 0.14rem !important;
|
|
.is-leaf {
|
background-color: #c1d3ea !important;
|
color: #2c2c2c !important;
|
font-weight: 400;
|
|
.cell {
|
height: 0.3rem !important;
|
line-height: 0.3rem !important;
|
}
|
}
|
}
|
|
.el-table__body-wrapper {
|
.el-table__row {
|
height: 0.46rem !important;
|
line-height: 0.46rem !important;
|
|
.cell {
|
height: 0.3rem !important;
|
line-height: 0.3rem !important;
|
}
|
}
|
}
|
}
|
}
|
|
@media screen and (min-width: 1366px) and (max-width: 1920px) {
|
/* 搜索 */
|
.Search {
|
margin: 0.35rem 0 0.16rem !important;
|
font-size: 0.12rem !important;
|
}
|
|
.Search ::v-deep .advancedSea {
|
font-size: 0.12rem !important;
|
margin-left: 0.35rem;
|
}
|
|
.Search ::v-deep .flex-center {
|
height: 80% !important;
|
}
|
|
.hotSearch {
|
font-size: 0.12rem !important;
|
margin-bottom: 0.19rem !important;
|
|
li {
|
font-size: 0.12rem !important;
|
margin: 0 0.1rem;
|
}
|
}
|
.advancedSeaTrue1 {
|
border: 1px solid #c1d3ea;
|
}
|
.advancedSeaTrue,
|
.zhushuju {
|
padding: 0 1.24rem !important;
|
}
|
|
.advancedSeaTrue1 {
|
padding: 0.08rem 0.19rem !important;
|
font-size: 0.14rem !important;
|
}
|
|
/* Form组件里面的样式 */
|
::v-deep .el-row {
|
display: flex;
|
flex-wrap: wrap;
|
margin-top: 0.1rem !important;
|
}
|
|
::v-deep .el-form-item {
|
display: flex !important;
|
flex-wrap: wrap !important;
|
margin-bottom: 0.18rem !important;
|
}
|
|
::v-deep .el-form-item__label {
|
font-size: 0.14rem !important;
|
height: 0.3rem !important;
|
display: flex !important;
|
align-items: center !important;
|
}
|
|
::v-deep .el-input__inner {
|
font-size: 0.14rem !important;
|
height: 0.3rem !important;
|
}
|
|
::v-deep .Formbtn {
|
width: 100% !important;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.el-button {
|
width: 0.7rem !important;
|
height: 0.3rem !important;
|
font-size: 0.12rem;
|
}
|
}
|
|
/* —————————————————————— */
|
/* 左边的 */
|
.boox {
|
padding: 0.1rem 0.09rem;
|
min-height: 2rem !important;
|
position: relative;
|
|
ul {
|
margin-top: 0.16rem !important;
|
margin-bottom: 0.2rem !important;
|
}
|
|
h3 {
|
font-size: 0.14rem;
|
margin-left: 0.1rem;
|
}
|
|
li {
|
height: 0.3rem;
|
line-height: 0.3rem;
|
padding: 0 0.2rem !important;
|
margin: 0.05rem 0 !important;
|
border-radius: 0.3rem !important;
|
}
|
|
.toggleButton1 {
|
position: absolute;
|
bottom: 0.1rem !important;
|
left: 40% !important;
|
}
|
|
.toggleButton {
|
font-size: 0.14rem !important;
|
}
|
}
|
|
.zhongjianleft {
|
margin: 0.27rem 0 !important;
|
}
|
|
.laiyuan {
|
min-height: 2rem !important;
|
overflow: auto;
|
}
|
|
/* ———————————————————— */
|
::v-deep .uni-input-placeholder {
|
font-size: 0.14rem;
|
height: 100%;
|
display: flex;
|
align-content: center;
|
align-items: center;
|
}
|
|
::v-deep .ffff {
|
border-radius: 0.3rem !important;
|
height: 0.36rem !important;
|
}
|
|
::v-deep .widget_button {
|
border-radius: inherit !important;
|
margin-right: 0.02rem !important;
|
background-color: #597aa5;
|
}
|
|
/* -------------------- */
|
/* 右侧 */
|
.rightList {
|
width: 100%;
|
padding-left: 0.2rem !important;
|
|
.light {
|
padding: 0.1rem 0.2rem !important;
|
}
|
|
.lightTop {
|
font-size: 0.14rem !important;
|
}
|
|
.el-button {
|
font-size: 0.12rem !important;
|
padding: 0.05rem 0.18rem !important;
|
}
|
|
.lightBo {
|
font-size: 0.14rem !important;
|
|
.is-leaf {
|
background-color: #c1d3ea !important;
|
color: #2c2c2c !important;
|
font-weight: 400;
|
|
.cell {
|
height: 0.3rem !important;
|
line-height: 0.3rem !important;
|
}
|
}
|
}
|
|
.el-table__body-wrapper {
|
.el-table__row {
|
height: 0.46rem !important;
|
line-height: 0.46rem !important;
|
|
.cell {
|
height: 0.3rem !important;
|
line-height: 0.3rem !important;
|
}
|
}
|
}
|
}
|
}
|
|
* {
|
box-sizing: border-box;
|
}
|
|
.hotSearch {
|
font-size: 0.12rem;
|
margin-bottom: 0.19rem;
|
|
li {
|
font-size: 0.12rem;
|
margin: 0 0.1rem;
|
}
|
}
|
|
/* .a {
|
height: 2rem;
|
}
|
|
.b {
|
height: 100px;
|
} */
|
|
.box {
|
transition: height 0.3s;
|
/* 添加过渡效果 */
|
overflow: hidden;
|
/* 避免内容溢出 */
|
}
|
|
/* 左边的 */
|
.boox {
|
width: 100%;
|
padding: 0.1rem 0.09rem;
|
min-height: 2rem !important;
|
position: relative;
|
border: 1px solid #c1d3ea !important;
|
|
ul {
|
margin-top: 0.16rem !important;
|
}
|
|
h3 {
|
font-size: 0.14rem;
|
margin-left: 0.1rem;
|
}
|
|
li {
|
height: 0.3rem;
|
line-height: 0.3rem;
|
padding: 0 0.2rem !important;
|
margin: 0.05rem 0 !important;
|
border-radius: 0.3rem !important;
|
font-size: 0.14rem;
|
}
|
|
.toggleButton1 {
|
position: absolute;
|
bottom: 0.1rem !important;
|
left: 40% !important;
|
}
|
|
.toggleButton {
|
font-size: 0.14rem !important;
|
}
|
}
|
|
::v-deep .el-table th,
|
::v-deep .el-table td {
|
text-align: center;
|
}
|
</style>
|
