<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" />
|
<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" :key="item.id" @tap="HotClick(item.id)" style="margin: 0 10rpx;"
|
:style="{color:item.bgColor==true?'#5879a4':'#000'}">
|
{{item.name}}
|
</li>-->
|
<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: .18rem;">
|
<view style="background-color: #fff;padding: 20rpx;" class="advancedSeaTrue1">
|
<h3>高级搜索</h3>
|
<MyForm @submit="onSubmit" :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':'' }">
|
<!-- background-color: #d6e3f4;border-radius: 60rpx; -->
|
<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: .3rem;height: .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: #C1D3EA;" @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: #C1D3EA;" @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: .2rem; background-color: #fff;border: 1px solid #C1D3EA;padding: 10rpx 20rpx;">
|
<view class="flex lightTop" style="width: 100%; margin:.1rem 0">
|
<view class="" style="color: #2C2C2C;">共1374条</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" style="position: absolute;bottom: .1rem;">
|
<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
|
} 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: 0,
|
index: 0,
|
list: []
|
},
|
// 现在多少条时期数据
|
dynastyIndex: 4,
|
// 来源
|
source: {
|
title: '来源',
|
index: 0,
|
id: 0,
|
list: []
|
},
|
// 表格的数组
|
tableData: [],
|
// 分页的总数
|
total: 100,
|
// 当前页
|
CurrentPage: 1,
|
// 一页显示多少条数据
|
pageSize: 6,
|
dataTable: [],
|
option: {}
|
}
|
},
|
onLoad(options) {
|
this.onSearch({text:options.name})
|
},
|
mounted() {
|
// 修改两次的高度保持一致
|
var box1Height = document.querySelector('.fbox2').offsetHeight;
|
document.querySelector('.fbox3').style.height = box1Height + (box1Height / 18) + 'px';
|
console.log(box1Height, 'box1Height');
|
this.getStatistics()
|
// 默认先调用搜索一次
|
this.onSearch('')
|
},
|
methods: {
|
// ExportJsonExcel实例
|
Ture() {
|
// 创建ExportJsonExcel实例对象
|
let toExcel = new ExportJsonExcel(this.option);
|
// 调用保存方法
|
toExcel.saveExcel();
|
},
|
// 下载按钮
|
exportClick() {
|
const dataList = this.tableData;
|
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 = [
|
...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 = [
|
...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
|
console.log(box1Height, box2Height);
|
if (box1Height <= box2Height) {
|
document.querySelector('.fbox1').style.height = box1Height + 'px';
|
}
|
})
|
},
|
// 高级搜索
|
async onSubmit(val) {
|
console.log(val);
|
this.CurrentPage = 1
|
let Obj = {
|
"keywords": '', //搜索框检索
|
"name": val.name, //姓名
|
"alias": val.alias, //别名
|
"nativePlace": val.nativePlace, //机关
|
"tagId": val.tagId !== '' ? val.tagId : null, //职业id
|
"official": val.official, //职官
|
"genderType": val.genderType !== '' ? val.genderType : null, //性别
|
"dynasty": val.dynasty, //朝代id
|
"dynastyId": null, //朝代id
|
"institution": val.institution, //机构
|
"bookId": null, //来源id
|
"page": this.CurrentPage,
|
"pageSize": this.pageSize
|
}
|
// // 搜索
|
await getPList(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) {
|
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
|
}
|
// // 搜索
|
await getPList(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: .02rem;
|
}
|
|
::v-deep .has-gutter tr>th {
|
background-color: #DDE8F6 !important;
|
font-weight: normal;
|
|
}
|
|
::v-deep .el-table__header th {
|
height: .3rem;
|
line-height: .3rem;
|
font-size: .14rem;
|
color: #2C2C2C;
|
/* 表头文字颜色为白色，增加对比度 */
|
margin-bottom: .02rem !important;
|
}
|
|
::v-deep .el-table::before {
|
border: 0;
|
background-color: #fff;
|
}
|
|
/* 表格 */
|
::v-deep .el-table__body td {
|
height: .3rem;
|
line-height: .3rem;
|
font-size: .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: .12rem;
|
height: .3rem;
|
line-height: .3rem;
|
background-color: #fff;
|
color: #9E9E9E;
|
text-align: center;
|
border: 1px solid #9E9E9E;
|
padding: 0 .1rem;
|
}
|
|
.paging ::v-deep .el-pager li {
|
font-size: .1rem;
|
width: .28rem;
|
height: .3rem;
|
line-height: .3rem;
|
background-color: #fff;
|
color: #9E9E9E;
|
text-align: center;
|
border: 1px solid #9E9E9E;
|
}
|
|
/* -------------- */
|
/* 右侧 */
|
.rightList {
|
padding-left: .2rem !important;
|
|
.light {
|
padding: .1rem .2rem !important;
|
}
|
|
.lightTop {
|
font-size: .14rem !important;
|
}
|
|
.el-button {
|
font-size: .12rem !important;
|
padding: .05rem .18rem !important;
|
}
|
|
.lightBo {
|
font-size: .14rem !important;
|
|
.is-leaf {
|
background-color: #C1D3EA !important;
|
color: #2C2C2C !important;
|
font-weight: 400;
|
|
.cell {
|
|
height: .3rem !important;
|
line-height: .3rem !important;
|
}
|
}
|
}
|
|
.el-table__body-wrapper {
|
.el-table__row {
|
height: .46rem !important;
|
line-height: .46rem !important;
|
|
.cell {
|
|
height: .3rem !important;
|
line-height: .3rem !important;
|
}
|
}
|
|
}
|
}
|
|
@media screen and (min-width:2560px)and (max-width:3840px) {
|
|
/* 搜索 */
|
.Search {
|
margin: .35rem 0 .16rem !important;
|
font-size: .12rem !important;
|
}
|
|
.Search ::v-deep .advancedSea {
|
font-size: .12rem !important;
|
margin-left: .35rem;
|
}
|
|
.Search ::v-deep .flex-center {
|
height: 80% !important;
|
}
|
|
.hotSearch {
|
font-size: .12rem !important;
|
margin-bottom: .19rem !important;
|
|
li {
|
font-size: .12rem !important;
|
margin: 0 .1rem;
|
}
|
}
|
|
.advancedSeaTrue,
|
.zhushuju {
|
padding: 0 1.24rem !important;
|
}
|
|
.advancedSeaTrue1 {
|
padding: .08rem .19rem !important;
|
font-size: .14rem !important;
|
}
|
|
/* Form组件里面的样式 */
|
::v-deep .el-row {
|
display: flex;
|
flex-wrap: wrap;
|
margin-top: .1rem !important;
|
}
|
|
::v-deep .el-form-item {
|
display: flex !important;
|
flex-wrap: wrap !important;
|
margin-bottom: .18rem !important;
|
}
|
|
::v-deep .el-form-item__label {
|
font-size: .14rem !important;
|
height: .3rem !important;
|
display: flex !important;
|
align-items: center !important;
|
}
|
|
::v-deep .el-input__inner {
|
font-size: .14rem !important;
|
height: .3rem !important;
|
}
|
|
::v-deep .Formbtn {
|
width: 100% !important;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.el-button {
|
width: .7rem !important;
|
height: .3rem !important;
|
font-size: .12rem;
|
|
}
|
}
|
|
/* —————————————————————— */
|
/* 左边的 */
|
.boox {
|
padding: .1rem .09rem;
|
min-height: 2rem !important;
|
position: relative;
|
|
ul {
|
margin-top: .16rem !important;
|
}
|
|
h3 {
|
font-size: .14rem;
|
margin-left: .1rem;
|
}
|
|
li {
|
height: .3rem;
|
line-height: .3rem;
|
padding: 0 .2rem !important;
|
margin: .05rem 0 !important;
|
border-radius: .3rem !important;
|
|
}
|
|
.toggleButton1 {
|
position: absolute;
|
bottom: .1rem !important;
|
left: 40% !important;
|
}
|
|
.toggleButton {
|
font-size: .14rem !important;
|
}
|
}
|
|
.zhongjianleft {
|
margin: .27rem 0 !important;
|
}
|
|
.laiyuan {
|
min-height: 2rem !important;
|
}
|
|
/* ———————————————————— */
|
::v-deep .uni-input-placeholder {
|
font-size: .14rem;
|
height: 100%;
|
display: flex;
|
align-content: center;
|
align-items: center;
|
}
|
|
::v-deep .ffff {
|
border-radius: .3rem !important;
|
height: .36rem !important;
|
}
|
|
::v-deep .widget_button {
|
border-radius: inherit !important;
|
margin-right: .02rem !important;
|
background-color: #597AA5;
|
}
|
|
|
|
/* 右侧 */
|
.rightList {
|
padding-left: .2rem !important;
|
|
.light {
|
padding: .1rem .2rem !important;
|
}
|
|
.lightTop {
|
font-size: .14rem !important;
|
}
|
|
.el-button {
|
font-size: .12rem !important;
|
padding: .05rem .18rem !important;
|
}
|
|
.lightBo {
|
font-size: .14rem !important;
|
|
.is-leaf {
|
background-color: #C1D3EA !important;
|
color: #2C2C2C !important;
|
font-weight: 400;
|
|
.cell {
|
|
height: .3rem !important;
|
line-height: .3rem !important;
|
}
|
}
|
}
|
|
.el-table__body-wrapper {
|
.el-table__row {
|
height: .46rem !important;
|
line-height: .46rem !important;
|
|
.cell {
|
|
height: .3rem !important;
|
line-height: .3rem !important;
|
}
|
}
|
|
}
|
}
|
}
|
|
@media screen and (min-width:1366px) and (max-width:1920px) {
|
|
/* 搜索 */
|
.Search {
|
margin: .35rem 0 .16rem !important;
|
font-size: .12rem !important;
|
}
|
|
.Search ::v-deep .advancedSea {
|
font-size: .12rem !important;
|
margin-left: .35rem;
|
}
|
|
.Search ::v-deep .flex-center {
|
height: 80% !important;
|
}
|
|
.hotSearch {
|
font-size: .12rem !important;
|
margin-bottom: .19rem !important;
|
|
li {
|
font-size: .12rem !important;
|
margin: 0 .1rem;
|
}
|
}
|
.advancedSeaTrue1{
|
border: 1px solid #C1D3EA;
|
}
|
.advancedSeaTrue,
|
.zhushuju {
|
padding: 0 1.24rem !important;
|
}
|
|
.advancedSeaTrue1 {
|
padding: .08rem .19rem !important;
|
font-size: .14rem !important;
|
}
|
|
/* Form组件里面的样式 */
|
::v-deep .el-row {
|
display: flex;
|
flex-wrap: wrap;
|
margin-top: .1rem !important;
|
}
|
|
::v-deep .el-form-item {
|
display: flex !important;
|
flex-wrap: wrap !important;
|
margin-bottom: .18rem !important;
|
}
|
|
::v-deep .el-form-item__label {
|
font-size: .14rem !important;
|
height: .3rem !important;
|
display: flex !important;
|
align-items: center !important;
|
}
|
|
::v-deep .el-input__inner {
|
font-size: .14rem !important;
|
height: .3rem !important;
|
}
|
|
::v-deep .Formbtn {
|
width: 100% !important;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.el-button {
|
width: .7rem !important;
|
height: .3rem !important;
|
font-size: .12rem;
|
|
}
|
}
|
|
/* —————————————————————— */
|
/* 左边的 */
|
.boox {
|
padding: .1rem .09rem;
|
min-height: 2rem !important;
|
position: relative;
|
|
ul {
|
margin-top: .16rem !important;
|
margin-bottom: .2rem !important;
|
}
|
|
h3 {
|
font-size: .14rem;
|
margin-left: .1rem;
|
}
|
|
li {
|
height: .3rem;
|
line-height: .3rem;
|
padding: 0 .2rem !important;
|
margin: .05rem 0 !important;
|
border-radius: .3rem !important;
|
|
}
|
|
.toggleButton1 {
|
position: absolute;
|
bottom: .1rem !important;
|
left: 40% !important;
|
}
|
|
.toggleButton {
|
font-size: .14rem !important;
|
}
|
}
|
|
.zhongjianleft {
|
margin: .27rem 0 !important;
|
}
|
|
.laiyuan {
|
min-height: 2rem !important;
|
}
|
|
/* ———————————————————— */
|
::v-deep .uni-input-placeholder {
|
font-size: .14rem;
|
height: 100%;
|
display: flex;
|
align-content: center;
|
align-items: center;
|
}
|
|
::v-deep .ffff {
|
border-radius: .3rem !important;
|
height: .36rem !important;
|
}
|
|
::v-deep .widget_button {
|
border-radius: inherit !important;
|
margin-right: .02rem !important;
|
background-color: #597AA5;
|
}
|
|
/* -------------------- */
|
/* 右侧 */
|
.rightList {
|
width: 100%;
|
padding-left: .2rem !important;
|
|
.light {
|
padding: .1rem .2rem !important;
|
}
|
|
.lightTop {
|
font-size: .14rem !important;
|
}
|
|
.el-button {
|
font-size: .12rem !important;
|
padding: .05rem .18rem !important;
|
}
|
|
.lightBo {
|
font-size: .14rem !important;
|
|
.is-leaf {
|
background-color: #C1D3EA !important;
|
color: #2C2C2C !important;
|
font-weight: 400;
|
|
.cell {
|
|
height: .3rem !important;
|
line-height: .3rem !important;
|
}
|
}
|
}
|
|
.el-table__body-wrapper {
|
.el-table__row {
|
height: .46rem !important;
|
line-height: .46rem !important;
|
|
.cell {
|
|
height: .3rem !important;
|
line-height: .3rem !important;
|
}
|
}
|
|
}
|
}
|
}
|
|
* {
|
box-sizing: border-box;
|
}
|
|
.hotSearch {
|
font-size: .12rem;
|
margin-bottom: .19rem;
|
|
li {
|
font-size: .12rem;
|
margin: 0 .1rem;
|
}
|
}
|
|
/* .a {
|
height: 2rem;
|
}
|
|
.b {
|
height: 100px;
|
} */
|
|
.box {
|
transition: height 0.3s;
|
/* 添加过渡效果 */
|
overflow: hidden;
|
/* 避免内容溢出 */
|
|
}
|
|
/* 左边的 */
|
.boox {
|
width: 100%;
|
padding: .1rem .09rem;
|
min-height: 2rem !important;
|
position: relative;
|
border: 1px solid #c1d3ea !important;
|
|
ul {
|
margin-top: .16rem !important;
|
}
|
|
h3 {
|
font-size: .14rem;
|
margin-left: .1rem;
|
}
|
|
li {
|
height: .3rem;
|
line-height: .3rem;
|
padding: 0 .2rem !important;
|
margin: .05rem 0 !important;
|
border-radius: .3rem !important;
|
font-size: .14rem;
|
}
|
|
.toggleButton1 {
|
position: absolute;
|
bottom: .1rem !important;
|
left: 40% !important;
|
}
|
|
.toggleButton {
|
font-size: .14rem !important;
|
}
|
}
|
|
::v-deep .el-table th,
|
::v-deep .el-table td {
|
text-align: center;
|
}
|
</style>
|
