From 29a02350b873fa6339a7535fa929697fec9a8f84 Mon Sep 17 00:00:00 2001
From: mh-two-thousand-and-two <17391232786@163.com>
Date: 星期三, 03 四月 2024 18:44:07 +0800
Subject: [PATCH] 三
---
pages/knowledgeBase/knowledgeBase.vue | 730 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 705 insertions(+), 25 deletions(-)
diff --git a/pages/knowledgeBase/knowledgeBase.vue b/pages/knowledgeBase/knowledgeBase.vue
index 845fb0d..01e0c17 100644
--- a/pages/knowledgeBase/knowledgeBase.vue
+++ b/pages/knowledgeBase/knowledgeBase.vue
@@ -1,50 +1,202 @@
<template>
<view>
<!-- 椤堕儴 -->
- <headNav />
+ <headNav text="涓浗鍖诲浜虹墿鐭ヨ瘑搴�"/>
<!-- 鎼滅储 -->
- <view class="" style="margin: 20rpx 0;">
- <luanqing-search class="search_bar" @onSearch="onSearch"></luanqing-search>
+ <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">
+ <!-- 鐑棬鎼滅储 -->
+ <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'}">
+ <!--
+ <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" :key="item.id" style="color: #5879a4;">
{{item.name}}
</li>
</ul>
</view>
- <uni-row class="demo-uni-row" style="padding: 0 30rpx; ">
- <uni-col :span="5" >
- <view class="demo-uni-col dark" style="padding: 20rpx;border: 2px solid #e0e0e0;">
- <h3 style="padding-left: 20rpx;">{{profession.title}}</h3>
- <ul style="margin-top: 10rpx;">
+ <!-- 楂樼骇鎼滅储 -->
+ <view class="advancedSeaTrue" v-if="isAdvancedSearch" style="padding: 0 230rpx; margin-bottom: 10rpx;">
+ <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; ">
+ <uni-col :span="5" class="fbox">
+ <!-- 鑱屼笟 -->
+ <view class="demo-uni-col zhiye dark box boox"
+ style="margin-bottom: 40rpx;background-color: #fff; border: 2rpx solid #e0e0e0;">
+ <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 === index ? '#d6e3f4' :'','borderRadius': profession.index === index ? '60rpx' :''}" v-for="(item,index) in profession.list" :key="index" style="padding:0 20rpx;">
+ <li class="flex"
+ :style="{'background':profession.index === index ? '#d6e3f4' :'','borderRadius': profession.index === index ? '60rpx' :''}"
+ v-for="(item,index) in profession.list" :key="index" style="padding:0 20rpx;">
<view class="">{{item.name}}</view>
<view class="">{{item.number}}</view>
</li>
</ul>
- <view class="flex flex-center">
- <view class="" style="font-size: 25rpx;color: #C1D3EA;">鏀惰捣 ^</view>
- <!-- <view class="">鏇村</view> -->
+ <view class="flex flex-center toggleButton1">
+ <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 === index ? '#d6e3f4' :'','borderRadius': dynasty.index === index ? '60rpx' :''}"
+ v-for="(item,index) in dynasty.list" :key="index" style="padding:0 20rpx;">
+ <view class="">{{item.name}}</view>
+ <view class="">{{item.number}}</view>
+ </li>
+ </ul>
+ <view class="flex flex-center toggleButton1">
+ <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;">
+ <view class="">{{ index+1 + '. ' +item.name}}</view>
+ <view class="">{{item.number}}</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>
</uni-col>
- <uni-col :span="19" style="padding-left: 20rpx;">
- <view class="demo-uni-col light" style="border: 1px solid #000;">
- bbb
+ <uni-col :span="19" class="rightList">
+ <view class="demo-uni-col light fbox1"
+ style=" background-color: #fff;border: 1px solid #e0e0e0;padding: 10rpx 20rpx;">
+ <view class="flex lightTop" style="margin:10rpx 0">
+ <view class="" style="color: #2C2C2C;">鍏�1374鏉�</view>
+ <el-button>涓嬭浇</el-button>
+ </view>
+ <el-table :data="tableData" class="lightBo" style="width: 100%">
+ <el-table-column prop="serialNumber" label="搴忓彿" width="110"></el-table-column>
+ <el-table-column prop="name" label="濮撳悕"></el-table-column>
+ <el-table-column prop="another" label="鍒悕"></el-table-column>
+ <el-table-column prop="gender" label="鎬у埆" width="70"></el-table-column>
+ <el-table-column prop="epoch" label="鏃舵湡"></el-table-column>
+ <el-table-column prop="year" label="鐢熷勾" width="130"></el-table-column>
+ <el-table-column prop="death" label="鍗掑勾" width="130"></el-table-column>
+ <el-table-column prop="nativePlace" label="绫嶈疮"></el-table-column>
+ <el-table-column prop="socialIdentity" label="绀句細韬唤"></el-table-column>
+ <el-table-column prop="officialPosition" label="瀹樿亴"></el-table-column>
+ </el-table>
</view>
</uni-col>
</uni-row>
+ <div class="abox"></div>
+ <Footer1 />
</view>
</template>
<script>
+ import Footer1 from '@/components/footer/footer'
+ import MyForm from '@/components/form/form.vue'
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: 'occupation',
+ options: [{
+ label: '鍖诲',
+ value: '1'
+ },
+ {
+ label: '涓栧',
+ value: '2'
+ }
+ ]
+ },
+ {
+ type: 'input',
+ label: '鑱屽畼',
+ name: 'officials',
+ value: ''
+ },
+ {
+ type: 'select',
+ label: '鎬у埆',
+ value: '',
+ name: 'sex',
+ options: [{
+ label: '鐢�',
+ value: '鐢�'
+ },
+ {
+ label: '濂�',
+ value: '濂�'
+ }
+ ]
+ },
+ {
+ type: 'input',
+ label: '鏃舵湡',
+ name: 'time',
+ value: ''
+ },
+ {
+ type: 'input',
+ label: '鏈烘瀯',
+ name: 'institution',
+ value: ''
+ }
+ ]
+ },
// 鐑棬鎼滅储
hot: [{
id: 1,
@@ -60,34 +212,129 @@
bgColor: false
}, ],
// 鑱屼笟
-
profession: {
title: '鑱屼笟',
- index:0,
+ index: 0,
list: [{
name: '鍏ㄩ儴',
id: 1,
- number:829
+ number: 829
},
{
name: '鍖诲',
id: 2,
- number:90
+ number: 90
}, {
name: '涓栧尰',
id: 3,
- number:81
+ number: 81
}, {
name: '瀹环鍖�',
id: 4,
- number:83
+ number: 83
},
]
- }
+ },
+ // 灞曞紑鍜屾敹缂╃殑鎸夐挳闇�瑕�
+ activeBox: null,
+ // 涓栦唬
+ dynasty: {
+ title: '鏃舵湡',
+ index: 0,
+ list: [{
+ name: '鍏ㄩ儴',
+ id: 1,
+ number: 829
+ },
+ {
+ name: '鍞�',
+ id: 2,
+ number: 90
+ }, {
+ name: '瀹�',
+ id: 3,
+ number: 81
+ }, {
+ name: '鍏�',
+ id: 4,
+ number: 83
+ },
+ ]
+ },
+ // 鏉ユ簮
+ source: {
+ title: '鏉ユ簮',
+ list: [{
+ name: '涓浗K灏忓埗搴旇枦鍏�',
+ id: 1
+ }, {
+ name: '涓尰鍖讳簨澶т細',
+ id: 2
+ }, {
+ name: '涓浗鍖讳腑鍒跺害鐮旂┒',
+ id: 3
+ }, ]
+ },
+ tableData: [{
+ serialNumber: 1,
+ name: '鐜嬪皬铏�',
+ another: '灏忚檸',
+ gender: '鐢�',
+ epoch: '鍞愪唬',
+ year: 1234,
+ death: 1332,
+ nativePlace: '娌冲寳',
+ socialIdentity: '涓栧尰',
+ officialPosition: '闄㈠垽'
+ }, {
+ serialNumber: 2,
+ name: '鐜媤灏忚檸',
+ another: 'w灏忚檸',
+ gender: 'w鐢�',
+ epoch: '鍞恮浠�',
+ year: 1234,
+ death: 1332,
+ nativePlace: '娌冲寳',
+ socialIdentity: '涓栧尰',
+ officialPosition: '闄㈠垽'
+ }, {
+ serialNumber: 1,
+ name: '鐜嬪皬铏�',
+ another: '灏忚檸',
+ gender: '鐢�',
+ epoch: '鍞愪唬',
+ year: 1234,
+ death: 1332,
+ nativePlace: '娌冲寳',
+ socialIdentity: '涓栧尰',
+ officialPosition: '闄㈠垽'
+ }]
}
},
+ mounted() {
+ // 淇敼涓ゆ鐨勯珮搴︿繚鎸佷竴鑷�
+ var box1Height = document.querySelector('.fbox').offsetHeight;
+ document.querySelector('.fbox1').style.height = box1Height + 'px';
+ },
methods: {
+ 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';
+ }
+ })
+ },
+ onSubmit(val) {
+ console.log(val);
+ },
onSearch(val) {
+
console.log(val);
},
// 鐑棬鎼滅储
@@ -103,12 +350,445 @@
})
},
+ // 灞曞紑鏀剁缉
+ shrinkClick(box) {
+ console.log(box);
+ if (this.activeBox === box) {
+ this.activeBox = null;
+ } else {
+ this.activeBox = box;
+ }
+ }
}
}
</script>
<style>
+ .abox{
+ height: 1rem;
+ }
+ @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;
+ }
+ }
+
+ .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 {
+ 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 {
+ padding: .1rem .09rem;
+
+ h3 {
+ font-size: .14rem;
+ }
+ }
+
+ ::v-deep .el-table th,
+ ::v-deep .el-table td {
+ text-align: center;
+ }
+
+ ::v-deep .has-gutter tr>th {
+ background-color: #DDE8F6 !important;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.1