From d27fbd63d7840787d7f3ca5333b6e24dc3a860d4 Mon Sep 17 00:00:00 2001
From: mh-two-thousand-and-two <17391232786@163.com>
Date: 星期五, 29 三月 2024 18:43:30 +0800
Subject: [PATCH] 第二次提交
---
pages/knowledgeBase/knowledgeBase.vue | 309 +++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 287 insertions(+), 22 deletions(-)
diff --git a/pages/knowledgeBase/knowledgeBase.vue b/pages/knowledgeBase/knowledgeBase.vue
index 845fb0d..959e3e1 100644
--- a/pages/knowledgeBase/knowledgeBase.vue
+++ b/pages/knowledgeBase/knowledgeBase.vue
@@ -3,48 +3,184 @@
<!-- 椤堕儴 -->
<headNav />
<!-- 鎼滅储 -->
- <view class="" style="margin: 20rpx 0;">
+ <view class="flex flex-center" style="margin: 20rpx 0;">
<luanqing-search class="search_bar" @onSearch="onSearch"></luanqing-search>
+ <view class="" @click="isAvancedClick"
+ style="color:#244A7B ;font-size: 20rpx;margin-left: 60rpx;cursor: pointer;">楂樼骇鎼滅储 锕�</view>
</view>
- <view class="flex flex-center">
+ <!-- 鐑棬鎼滅储 -->
+ <view class="flex flex-center" 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="margin: 0 10rpx;color: #5879a4;font-size: 20rpx;">
{{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="" v-if="isAdvancedSearch" style="padding: 0 230rpx; margin-bottom: 10rpx;">
+ <view style="background-color: #fff;padding: 20rpx;" class="">
+ <h3>楂樼骇鎼滅储</h3>
+ <MyForm @submit="onSubmit" :from="from" />
+ </view>
+ </view>
+ <uni-row class="demo-uni-row flex flex-items-start" style="padding: 0 230rpx; ">
+ <uni-col :span="5" class="fbox">
+ <!-- 鑱屼笟 -->
+ <view class="demo-uni-col dark box"
+ style="margin-bottom: 40rpx;background-color: #fff; padding: 20rpx;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="toggleButton" style="font-size: 25rpx;color: #C1D3EA;" @click="shrinkClick('a')">
+ {{ activeBox !== 'a' ? '鏇村 锕�' : '鏀惰捣 锔�' }}
+ </view>
</view>
</view>
+ <!-- 涓栦唬 -->
+ <view class="demo-uni-col dark box"
+ style="background-color: #fff;padding: 20rpx;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">
+ <view class="toggleButton" style="font-size: 25rpx;color: #C1D3EA;" @click="shrinkClick('b')">
+ {{ activeBox !== 'b' ? '鏇村 锕�' : '鏀惰捣 锔�' }}
+ </view>
+ </view>
+ </view>
+ <!-- 鏉ユ簮 -->
+ <view v-if="!isAdvancedSearch" class="demo-uni-col dark box"
+ style="height: 250rpx;background-color: #fff;padding: 20rpx;border: 2rpx solid #e0e0e0;">
+ <h3>{{source.title}}</h3>
+ <ul style="margin-top: 10rpx;" :class="{ 'b': activeBox === 'b'?'b':'' }">
+ <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
+ <li class="flex" v-for="(item,index) in source.list" :key="index"
+ style="padding:0 20rpx;color: #244A7B;font-size: 24rpx;">
+ <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" style="padding-left: 20rpx; ">
+ <view class="demo-uni-col light fbox1"
+ style=" background-color: #fff;border: 1px solid #e0e0e0;padding: 10rpx 20rpx;">
+ <view class="flex" style="margin:10rpx 0">
+ <view class="" style="color: #2C2C2C;">鍏�1374鏉�</view>
+ <el-button size="mini">涓嬭浇</el-button>
+ </view>
+ <el-table :data="tableData" size="mini" style="width: 100%">
+ <el-table-column prop="serialNumber" label="搴忓彿" width="70"></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="鎬у埆"></el-table-column>
+ <el-table-column prop="epoch" label="鏃朵唬"></el-table-column>
+ <el-table-column prop="year" label="鐢熷勾" width="70"></el-table-column>
+ <el-table-column prop="death" label="鍗掑勾" width="70"></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>
+ <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: 'select',
+ label: '鎬у埆',
+ value: '',
+ name: 'sex',
+ options: [{
+ label: '鐢�',
+ value: '鐢�'
+ },
+ {
+ label: '濂�',
+ value: '濂�'
+ }
+ ]
+ },
+ {
+ type: 'input',
+ label: '鑱旂郴',
+ name: 'phone',
+ value: ''
+ },
+ {
+ type: 'input',
+ label: '璇佷欢',
+ name: 'idNumber',
+ value: ''
+ },
+ {
+ type: 'select',
+ label: '鐘舵��',
+ name: 'state',
+ value: '',
+ options: [{
+ label: '鏈敵璇�',
+ value: '鏈敵璇�'
+ },
+ {
+ label: '宸茬敵璇�',
+ value: '宸茬敵璇�'
+ },
+ {
+ label: '宸插垹闄�',
+ value: '宸插垹闄�'
+ }
+ ]
+ }
+ ]
+ },
// 鐑棬鎼滅储
hot: [{
id: 1,
@@ -60,34 +196,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,6 +334,15 @@
})
},
+ // 灞曞紑鏀剁缉
+ shrinkClick(box) {
+ console.log(box);
+ if (this.activeBox === box) {
+ this.activeBox = null;
+ } else {
+ this.activeBox = box;
+ }
+ }
}
}
</script>
@@ -111,4 +351,29 @@
* {
box-sizing: border-box;
}
+
+ .a {
+ height: 200px;
+ }
+
+ .b {
+ height: 100px;
+ }
+
+ .box {
+ transition: height 0.3s;
+ /* 娣诲姞杩囨浮鏁堟灉 */
+ overflow: hidden;
+ /* 閬垮厤鍐呭婧㈠嚭 */
+
+ }
+
+ ::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