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/TcmSystem/TcmSystem.vue | 817 ++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 685 insertions(+), 132 deletions(-)
diff --git a/pages/TcmSystem/TcmSystem.vue b/pages/TcmSystem/TcmSystem.vue
index cad04c4..7692e83 100644
--- a/pages/TcmSystem/TcmSystem.vue
+++ b/pages/TcmSystem/TcmSystem.vue
@@ -1,144 +1,122 @@
<template>
<view>
- <view class="NavTop flex">
- <view class=""><img src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" /></view>
- <view class="">涓尰鍖讳簨鍒跺害</view>
- <view class="NavTopr">
- <img src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" />
- <img src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" />
- <img src="../../static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" />
- </view>
- </view>
- <view class="mImage">
- <img src="https://img0.baidu.com/it/u=3838093562,4126749835&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710522000&t=a986064700deada5ec74d05e02abd8b5"
- alt="" />
- </view>
- <view class="flex flex-center" style="flex-direction: column;">
- <view class="search">
- <next-search-more :selectValue="selectValue">
+ <headNav :idIndex="idIndex" text="涓尰鍖讳簨鍒跺害"/>
+ <view class="flex flex-center sousuo" style="flex-direction: column;">
+ <view class="search1">
+ <next-search-more @search="onSearch" placeholder="鎼滅储鑱屽畼/鏈烘瀯" :selectValue="selectValue">
</next-search-more>
</view>
- <view class="flex">
+ <view class="flex remen">
鐑棬鎼滅储锛�
<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 .05rem;color: #244A7B;">
{{item.name}}
</li>
</ul>
</view>
</view>
<view class="centre flex">
- <view class="CLeft flex">
- <ul class="institution">
- <view class="" style="font-weight: 700;padding-bottom: 6rpx;">鏈烘瀯缁熻10</view>
- <li v-for="ietm1 in 7" :key="item1" class="flex">
- <view class="">item</view>
- <view class="">112</view>
- </li>
- </ul>
- <ul class="institution institution2">
- <view class="" style="font-weight: 700;padding-bottom: 6rpx;">鏈烘瀯缁熻10</view>
- <li v-for="ietm1 in 4" :key="item1" class="flex">
- <view class="">item</view>
- <view class="">112</view>
- </li>
- </ul>
- <ul class="institution institution3 ">
- <view class="" style="font-weight: 700;padding-bottom: 6rpx;">鏈烘瀯缁熻10</view>
- <li v-for="ietm1 in 1 " :key="item1" class="flex">
- <view class="">item</view>
- <view class="">112</view>
- </li>
- </ul>
- </view>
- <view class="CRight flex flex-column relative">
- <el-row style="height: 50rpx;width: 100%;">
- <view class="flex">
- <view class="">鍏眥{total}}鏉�</view>
- <view class="">
- <uni-data-select style="width: 250rpx;" v-model="rankVal" :localdata="rank" :clear="false"
- @change="selectChange">
- </uni-data-select>
+ <!-- 宸� -->
+ <view class="CLeft flex fbox">
+ <!-- 鑱屼笟 -->
+ <view class="demo-uni-col MargB box boox" :class="{ 'a': activeBox === 'a'?'a':'' }"
+ style="background-color: #fff; border: 2rpx solid #e0e0e0;">
+ <h3>{{institution.title}} ({{institution.list.length}}) </h3>
+ <ul style="margin-top: 10rpx;">
+ <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
+ <li class="flex"
+ :style="{'background':institution.index === index ? '#DDE8F6' :'','borderRadius': institution.index === index ? '60rpx' :''}"
+ v-for="(item,index) in institution.list" style="padding:0 20rpx;color: #2C2C2C;">
+ <view class="">{{item.name}}</view>
+ <view class="">{{item.number}}</view>
+ </li>
+ </ul>
+ <view class="flex flex-center toggleButton1">
+ <view class="toggleButton" style="color: #244A7B;" @click="shrinkClick('a')">
+ {{ activeBox !== 'a' ? '鏇村 锕�' : '鏀惰捣 锔�' }}
</view>
</view>
- </el-row>
- <view style="flex-grow: 1;" class="flex CommodityList">
- <view class="" v-for="item in CommodityList" :key="item" style="height:28% ;">
+ </view>
+ <!-- 鑱屽畼缁熻锛�10锛� -->
+ <view class="demo-uni-col MargB dark box boox" :class="{ 'b': activeBox === 'b'?'b':'' }"
+ style="background-color: #fff; border: 2rpx solid #e0e0e0;">
+ <h3>{{officials.title}} ({{officials.list.length}}) </h3>
+ <ul style="margin-top: 10rpx;">
+ <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
+ <li class="flex"
+ :style="{'background':officials.index === index ? '#DDE8F6' :'','borderRadius': officials.index == index ? '10rem' :''}"
+ v-for="(item,index) in officials.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: #244A7B;" @click="shrinkClick('b')">
+ {{ activeBox !== 'b' ? '鏇村 锕�' : '鏀惰捣 锔�' }}
+ </view>
+ </view>
+ </view>
+ <!-- 鏉ユ簮锛�5锛� -->
+ <view class="demo-uni-col dark box boox" style="background-color: #fff; border: 2rpx solid #e0e0e0;">
+ <h3>{{source.title}} ({{source.list.length}}) </h3>
+ <ul style="margin-top: 10rpx;">
+ <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
+ <li class="flex" v-for="(item,index) in source.list" style="padding:0 20rpx;color: #244A7B;">
+ <view class="">{{index+1}}.{{item.name}}</view>
+ <!-- <view class="">{{item.number}}</view> -->
+ </li>
+ </ul>
+ </view>
+ </view>
+ <!-- 鍙� -->
+ <view class="CRight fbox1 flex flex-column relative">
+ <!-- <el-row style="height: 50rpx;width: 100%;"> -->
+ <view class="flex" style="width: 100%;margin-bottom: .3rem;">
+ <view class="" style="font-size: .14rem;color: #2C2C2C;font-weight: 400;">鍏眥{total}}鏉�</view>
+ <view class="paixu">
+ <el-select v-model="rankVal" placeholder="鎸夋彁鍚嶆帓搴�">
+ <el-option v-for="(item,index) in rank" :key="item" :label="item.text"
+ :value="item.value"></el-option>
+ <!-- <el-option label="鍖哄煙浜�" value="beijing"></el-option> -->
+ </el-select>
+ </view>
+ </view>
+ <!-- </el-row> flex-grow: 1;-->
+ <view style="" class="flex CommodityList">
+ <view class="rightList" @click="ListClick" v-for="item in CommodityList" :key="item">
<el-card class="box-card" style="height: 100%;">
- <view class="flex flex-start">
- <view class=""
- style="background-color: #5879a4;text-align: right;transform:translateX(-50rpx);color: #fff;padding:0 10rpx 0 50rpx;">
+ <view class="flex flex-start RightListTop">
+ <view class="Topzhiwei"
+ style="background-color: #5879a4;text-align: right;;color: #fff;"
+ :style="{background:item.color}">
{{item.post}}
</view>
- <view class="" style="margin-right: 20rpx;">{{item.name}}</view>
- <view class=""
+ <view class="TopName">{{item.name}}</view>
+ <view class="TopDynasty"
style="border: 1px solid #d4d4d4;font-weight:500;padding: 0 10rpx;border-radius: 10rpx;">
{{item.dynasty}}
</view>
</view>
- <view class=""
- style="background-color: #f6f6f6;padding: 5rpx 10rpx;color: #777777; margin: 15rpx 0;">
- {{item.anotherNamer}}
- </view>
- <view class=""
- style="font-weight: 600; font-size: 20rpx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
- {{item.content}}
+ <view class="desBox" style="padding: .14rem .2rem .23rem;">
+ <view class="biecheng">
+ <view class="flex" title="sdfsdf"> 鍒О锛�
+ <view class="BeyondHiding1" style="width: .75rem;line-height: 1;">涓�</view>
+ </view>
+ <view class="flex " style="">鏉ユ簮:
+ <view class="BeyondHiding1" style="margin-left: .1rem;line-height: 1">
+ 涓尰鍖讳簨澶у叏
+ </view>
+ </view>
+ </view>
+ <view class="describe font-family BeyondHiding2">
+ {{item.content}}
+ </view>
</view>
</el-card>
</view>
</view>
- <!-- 寮瑰嚭灞� -->
- <el-dialog title="" class="dialog" :visible.sync="dialogVisible" width="40%">
- <!-- 鍙栨秷閿� -->
- <view class="" @click="dialogVisible=false"
- style="padding: 20rpx;position: absolute;left: 0;top: 0;font-size: 40rpx;z-index: 999;">X</view>
- <view class="flex" style="height: 100%;flex-direction: column;">
- <view class="detailImage" style="position: relative;">
- <img style="opacity: .5;" src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1710608400&t=42d653b0f525a8de1d45825ea8b45f66"
- alt="" />
- <view class=" flex flex-column " style="height: 100%;justify-content: center; position: relative;z-index: 999;">
- <view class="" style="font-size: 40rpx;font-weight: 900;">寰″尰</view>
- <view class="" style="font-size: 20rpx;font-weight: 800; border: 2rpx solid #000;margin: 30rpx 0;background-color: #fff;border-radius: 10rpx;padding: 0 10rpx;">寰″尰</view>
- <ul class="flex">
- <li v-for="item in 3" style="background-color: #fff;color: #415c7a; border: 2rpx solid #415c7a;border-radius: 30rpx;padding: 0 15rpx;margin-right: 10rpx;" >ssdf</li>
- </ul>
- </view>
- </view>
- <view class="" style="width: 80%; height: 100%;position: relative;">
- <view class=" flex flex-content"
- style=" box-shadow: 4px 4px 8px #888; background-color: #fff; width: 100%;left: 0; position: relative;top: -50rpx;padding: 30rpx 0; ">
- <view class="">鍝佺骇: <span>浜屽搧</span> </view>
- <view class="">鍝佺骇: <span>浜屽搧</span> </view>
- <view class="">鍝佺骇: <span>浜屽搧</span> </view>
- </view>
- <view class="" style="background-color: #f4f4f4;font-weight: 700;padding: 10rpx;">
- 鐩稿叧鎻忚堪
- </view>
- <view class="" style="font-size: 23rpx;font-weight: 600;margin: 30rpx 0;">鎸夋懇鍗氬＋鏄彜浠ｅお鍖荤讲鑱岀О锛岃礋璐ｆ帉绠℃寜鎽╂楠ㄤ笓涓氱殑鏁欐巿鑰冩牳锛屽畼闃跺湪浠庝節鍝佷笅[1]銆傛寜鎽╁崥澹紝闅嬩唬璁句簩浜猴紝鍝佷綅涓嶈銆傚攼浠ｈ涓�浜猴紝瀹橀樁涓轰粠涔濆搧涓嬶紝鎸夋懇鍗氬＋璐熻矗鎺岀鎸夋懇銆佹楠ㄤ笓涓氱殑鏁欏锛屼笅璁炬寜鎽╁笀銆佹寜鎽╁伐绛変綔涓哄姪鎵嬨��</view>
- <view class="" style="background-color: #f4f4f4;font-weight: 700;padding: 10rpx;">
- 鐩稿叧鎻忚堪
- </view>
- <view class="" style="font-size: 23rpx;font-weight: 600;margin: 30rpx 0;">鎸夋懇鍗氬＋鏄彜浠ｅお鍖荤讲鑱岀О锛岃礋璐ｆ帉绠℃寜鎽╂楠ㄤ笓涓氱殑鏁欐巿鑰冩牳锛屽畼闃跺湪浠庝節鍝佷笅[1]銆傛寜鎽╁崥澹紝闅嬩唬璁句簩浜猴紝鍝佷綅涓嶈銆傚攼浠ｈ涓�浜猴紝瀹橀樁涓轰粠涔濆搧涓嬶紝鎸夋懇鍗氬＋璐熻矗鎺岀鎸夋懇銆佹楠ㄤ笓涓氱殑鏁欏锛屼笅璁炬寜鎽╁笀銆佹寜鎽╁伐绛変綔涓哄姪鎵嬨��</view>
- </view>
- <view class="flex" style="padding: 20rpx; box-sizing: border-box; width: 100%;margin-bottom: 2rpx;">
- <el-button class="flex">
- <view class="flex">
- <view class="" style="margin-right: 40rpx;">涓婁竴鏉�</view>
- <view class="">鏈烘瀯: 澶尰闄� </view>
- </view>
- </el-button>
- <el-button class="flex">
- <view class="flex">
- <view class="" style="margin-right: 40rpx;">鏈烘瀯: 澶尰闄� </view>
- <view class="" >涓嬩竴鏉�</view>
- </view>
- </el-button>
- </view>
- </view>
- </el-dialog>
<!-- 鍒嗛〉 -->
- <el-row style="height: 50rpx;position: absolute;bottom: 50rpx;">
+ <el-row class="fenye" style="position: absolute;bottom: .1rem;">
<el-pagination class="paging" :current-page="CurrentPage" :total="total" :page-size="6"
@current-change="CurrentChange" @prev-click="PrevClick" @next-click="NextClick" prev-text="涓婁竴椤�"
next-text="涓嬩竴椤�" background layout="prev, pager, next">
@@ -147,21 +125,158 @@
</el-row>
</view>
</view>
+ <!-- 寮瑰嚭灞� -->
+ <el-dialog title="" class="dialog" :visible.sync="dialogVisible" width="40%">
+ <!-- 鍙栨秷閿� -->
+ <view class=""
+ style="padding: .16rem;position: absolute;z-index: 9999999999999999999999999999999999999999; left: 0;top: 0;">
+ <img @click="dialogVisible=false" src="@/static/image/X.png" alt="" style="width: 100%;height: 100%;"
+ sizes="" srcset="" />
+ </view>
+ <view class="flex" style="position: relative; height: 100%;flex-direction: column;">
+ <view class="detailImage" style="position: relative;">
+ <img src="@/static/image/personageBg.png" alt="" />
+ <view class=" flex flex-column "
+ style="height: 100%;justify-content: flex-start; position: relative;z-index: 999;">
+ <view class="creatureXinxi1">寰″尰</view>
+ <view class="creatureXinxi2">
+ 鍞愭湞</view>
+ <ul class="flex creatureXinxi3">
+ <li v-for="item in 4">JSF</li>
+ </ul>
+ </view>
+ </view>
+ <view class="" style="width: 80%; height: 100%;position: relative;">
+ <view class="pinji flex ">
+ <view class="">鍝佺骇: <span> 浜屽搧</span> </view>
+ <view class="">鍒悕: <span> 浜�</span> </view>
+ <view class="">鏉ユ簮: <span> 涓浗鍘嗕唬鍖诲杈炲吀</span> </view>
+ </view>
+ <view class="">
+ <view class=""
+ style="font-size: .14rem;color: #2C2C2C; background-color: #F0F0F0;font-weight: 700;padding-left: .18rem;height: .34rem;line-height: .34rem;">
+ 鐩稿叧鎻忚堪
+ </view>
+ <view class="" style="font-size: .1rem;color: #2C2C2C;margin: .1rem 0 .19rem;line-height: 2.3;">
+ 鎸夋懇鍗氬＋鏄彜浠ｅお鍖荤讲鑱岀О锛岃礋璐ｆ帉绠℃寜鎽╂楠ㄤ笓涓氱殑鏁欐巿鑰冩牳锛屽畼闃跺湪浠庝節鍝佷笅[1]銆傛寜鎽╁崥澹紝闅嬩唬璁句簩浜猴紝鍝佷綅涓嶈銆傚攼浠ｈ涓�浜猴紝瀹橀樁涓轰粠涔濆搧涓嬶紝鎸夋懇鍗氬＋璐熻矗鎺岀鎸夋懇銆佹楠ㄤ笓涓氱殑鏁欏锛屼笅璁炬寜鎽╁笀銆佹寜鎽╁伐绛変綔涓哄姪鎵嬨��
+ </view>
+ <view class=""
+ style="font-size: .14rem;color: #2C2C2C; background-color: #F0F0F0;font-weight: 700;padding-left: .18rem;height: .34rem;line-height: .34rem;">
+ 澶囨敞
+ </view>
+ <view class="" style="font-size: .1rem;color: #2C2C2C;margin: .1rem 0 .19rem;line-height: 2.3;">
+ 鎸夋懇鍗氬＋鏄彜浠ｅお鍖荤讲鑱岀О锛岃礋璐ｆ帉绠℃寜鎽╂楠ㄤ笓涓氱殑鏁欐巿鑰冩牳锛屽畼闃跺湪浠庝節鍝佷笅銆�
+ </view>
+ </view>
+ </view>
+ <view class="flex detailsBtn">
+ <el-button class="flex btn-prev">
+ <view class="flex">
+ <view class="" style="margin-right: 40rpx;">涓婁竴鏉�</view>
+ <view class="btn-prev-L">鏈烘瀯: 澶尰闄� </view>
+ </view>
+ </el-button>
+ <view class="">
+ 102/329
+ </view>
+ <el-button class="flex btn-next">
+ <view class="flex">
+ <view class="" style="margin-right: 40rpx;">鏈烘瀯: 澶尰闄� </view>
+ <view class="btn-prev-R">涓嬩竴鏉�</view>
+ </view>
+ </el-button>
+ </view>
+ </view>
+ </el-dialog>
-
+ <Footer1 :isLocation="false" :isMarginTop="0.5"/>
</view>
</template>
<script>
+ import Footer1 from '@/components/footer/footer.vue'
export default {
+ components: {
+ Footer1
+ },
data() {
return {
+
+ // 鏈烘瀯缁熻
+ institution: {
+ title: '鏈烘瀯缁熻',
+ index: 0,
+ list: [{
+ name: '鍏ㄩ儴',
+ id: 1,
+ number: 829
+ },
+ {
+ name: '鍖诲',
+ id: 2,
+ number: 90
+ }, {
+ name: '涓栧尰',
+ id: 3,
+ number: 81
+ }, {
+ name: '瀹环鍖�',
+ id: 4,
+ number: 83
+ },
+ ]
+ },
+ // 鑱屽畼缁熻
+ officials: {
+ 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: '鏉ユ簮',
+ index: 0,
+ list: [{
+ name: '涓浗鍖讳簨鍒跺害杈炲吀',
+ id: 1,
+ },
+ {
+ name: '涓尰鍖讳簨澶у叏',
+ id: 2,
+ }, {
+ name: '涓浗鍖讳簨鍒跺害鐮旂┒',
+ id: 3,
+ }
+ ]
+ },
+ // 灞曞紑鍜屾敹缂╃殑鎸夐挳闇�瑕�
+ activeBox: null,
+ // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
+ idIndex: 0,
// 寮瑰嚭灞�
- dialogVisible: true,
+ dialogVisible: false,
// 鎼滅储鐨勪笅鎷夊垪琛�
selectValue: [{
value: 0,
- text: '鏄惁'
+ text: '鍖讳簨鍒跺害'
}, {
value: 1,
text: '11sd1'
@@ -169,6 +284,7 @@
value: 2,
text: '11sdsd1'
}],
+
// 鐑棬鎼滅储
hot: [{
id: 1,
@@ -188,7 +304,7 @@
// 鎺掑簭涓嬫媺鑿滃崟
rank: [{
value: 0,
- text: '鎺掑簭'
+ text: '鎸夋彁鍚嶆帓搴�'
}, {
value: 1,
text: '鎺掑簭s'
@@ -199,14 +315,25 @@
id: 1,
post: '鏈烘瀯',
name: '澶尰闄�',
+ color: '#597AA5',
dynasty: '鍞愭湞',
anotherNamer: '鍒О----------',
- content: '鍐呭++++++++++++++++++++++++++++++'
+ content: '鍙や唬鍖荤枟鏈烘瀯鍚嶇О锛屽お鍖婚櫌鍚嶇О濮嬩簬閲戜唬锛屾壙琚簬鍞愬畫鐨勫お鍖荤讲銆佸お鍖诲眬锛屼互鍚庡巻浠ｅ潎绔嬫湁澶尰闄㈡満鏋勫巻浠ｅ潎绔嬫湁澶尰闄㈡満鏋�'
},
{
id: 2,
+ post: '鑱屽畼',
+ name: '澶尰闄�',
+ dynasty: '鍞愭湞',
+ color: '#DA7A2B',
+ anotherNamer: '鍒О----------',
+ content: '鍙や唬鍖荤枟鏈烘瀯鍚嶇О锛屽お鍖婚櫌鍚嶇О濮嬩簬閲戜唬锛屽彜浠ｅ尰鐤楁満鏋勫悕绉帮紝澶尰闄㈠悕绉板浜庨噾浠ｏ紝鍙や唬鍖荤枟鏈烘瀯鍚嶇О锛屽お鍖婚櫌鍚嶇О濮嬩簬閲戜唬锛屽彜浠ｅ尰鐤楁満鏋勫悕绉帮紝澶尰闄㈠悕绉板浜庨噾浠ｏ紝鍙や唬鍖荤枟鏈烘瀯鍚嶇О锛屽お鍖婚櫌鍚嶇О濮嬩簬閲戜唬锛�'
+ },
+ {
+ id: 3,
post: '鏈烘瀯',
name: '澶尰闄�',
+ color: '#597AA5',
dynasty: '鍞愭湞',
anotherNamer: '鍒О----------',
content: '鍐呭++++++++++++++++++++++++++++++'
@@ -215,6 +342,25 @@
id: 3,
post: '鏈烘瀯',
name: '澶尰闄�',
+ color: '#597AA5',
+ dynasty: '鍞愭湞',
+ anotherNamer: '鍒О----------',
+ content: '鍐呭++++++++++++++++++++++++++++++'
+ },
+ {
+ id: 3,
+ post: '鏈烘瀯',
+ name: '澶尰闄�',
+ color: '#597AA5',
+ dynasty: '鍞愭湞',
+ anotherNamer: '鍒О----------',
+ content: '鍐呭++++++++++++++++++++++++++++++'
+ },
+ {
+ id: 3,
+ post: '鏈烘瀯',
+ name: '澶尰闄�',
+ color: '#597AA5',
dynasty: '鍞愭湞',
anotherNamer: '鍒О----------',
content: '鍐呭++++++++++++++++++++++++++++++'
@@ -227,7 +373,35 @@
}
},
+ mounted() {
+ // 淇敼涓ゆ鐨勯珮搴︿繚鎸佷竴鑷�
+ var box1Height = document.querySelector('.fbox').offsetHeight;
+ console.log(box1Height, 'box1Height');
+ document.querySelector('.fbox1').style.height = box1Height + 'px';
+ },
+ onLoad(options) {
+ this.idIndex = options.id
+ console.log('optionsoptionsoptions', options.id);
+ },
methods: {
+ // 灞曞紑鏀剁缉
+ shrinkClick(box) {
+ console.log(box);
+ if (this.activeBox === box) {
+ console.log('sdfs');
+ this.activeBox = null;
+ } else {
+ this.activeBox = box;
+ }
+ },
+ // list鏁扮粍
+ ListClick() {
+ this.dialogVisible = !this.dialogVisible
+ },
+ // 鎼滅储鎸夐挳
+ onSearch(val) {
+ console.log(val);
+ },
// 鐑棬鎼滅储
HotClick(id) {
this.hot.forEach(item => {
@@ -275,7 +449,104 @@
}
</script>
-<style>
+<style scoped>
+
+ @media screen and (min-width:2560px)and (max-width:3840px) {
+
+ ::v-deep .search {
+ height: .36rem;
+ border-radius: .5rem !important;
+ align-items: center;
+ border-color: #597AA5 !important;
+ }
+ }
+ @media screen and (min-width:1366px) and (max-width:1920px){
+ ::v-deep .search {
+ height: .36rem;
+ border-radius: .5rem !important;
+ align-items: center;
+ border-color: #597AA5 !important;
+ }
+ }
+
+ /* 涓汉淇℃伅 */
+ .creatureXinxi1 {
+ font-size: .24rem;
+ font-weight: 700;
+ line-height: 1;
+ margin-top: .29rem;
+ }
+
+ .creatureXinxi2 {
+ /* width: .24rem; */
+ height: .17rem;
+ line-height: 1;
+ font-size: .12rem;
+ font-weight: 600;
+ background-color: #fff;
+ padding: .02rem .04rem;
+ margin: .15rem 0;
+ color: #2C2C2C;
+ border: 1px solid #2C2C2C;
+ border-radius: 2px;
+ }
+
+ .creatureXinxi3 li {
+ height: .16rem;
+ line-height: .16rem;
+ background-color: #fff;
+ padding: 0 .08rem;
+ margin: 0 .07rem;
+ font-size: .12rem;
+ color: #2C2C2C;
+ border: 1px solid #2C2C2C;
+ border-radius: .3rem;
+ }
+
+ /* --------- */
+ /* 鍝佺骇 */
+ .pinji {
+ box-shadow: 2px 0px 3px #888;
+ background-color: #fff;
+ width: 100%;
+ /* height: .6rem;
+ line-height: .6rem; */
+ font-size: .14rem;
+ padding: .19rem .28rem .21rem;
+ left: 0;
+ position: relative;
+ top: -.25rem;
+ color: #2C2C2C;
+ }
+
+ /* 涓汉淇℃伅鐨勬寜閽� */
+ .detailsBtn {
+ padding: .2rem;
+ width: 100%;
+ margin-bottom: 2rpx;
+ position: absolute;
+ bottom: 0;
+ }
+
+ .detailsBtn .btn-prev,
+ .detailsBtn .btn-next {
+ font-size: .14rem;
+ /* padding: .14rem .1rem; */
+ border: 1px solid #9E9E9E;
+ border-radius: 5px;
+ /* height: .32rem; */
+ line-height: .32rem;
+ }
+ .detailsBtn .btn-prev-L,.detailsBtn .btn-prev-R{
+ border-left: 1px solid #9E9E9E;
+ padding-left: .1rem;
+ }
+ .detailsBtn>:nth-child(2) {
+ font-size: .14rem;
+ color: #2C2C2C;
+ }
+
+ /* ------ */
img {
width: 100%;
height: 100%;
@@ -308,24 +579,28 @@
}
}
- .search {
- width: 50%;
- }
+
.centre {
- padding: 0 30rpx;
+ padding-left: 1.23rem;
+ padding-right: 1.17rem;
/* border: 1px solid #000; */
- height: 70vh;
+ /* height: 70vh; */
/* overflow: hidden; */
align-items: flex-start;
+ position: relative;
+ z-index: 1;
.CLeft {
+ width: 2.6rem;
height: 100%;
vertical-align: top;
flex-direction: column;
+ justify-content: flex-start;
+ margin-right: .2rem;
.institution {
- width: 300rpx;
+ width: 100%;
border: 1px solid #000;
padding: 20rpx;
@@ -341,13 +616,16 @@
}
.CRight {
- margin-left: 20rpx;
+ /* margin-left: 20rpx; */
+ width: 100%;
height: 100%;
flex-grow: 1;
- border: 1px solid #000;
+ border: 1px solid #c1d3ea;
box-sizing: border-box;
overflow: hidden;
padding: 10rpx 30rpx;
+ padding: .1rem .2rem;
+ background-color: #fff;
}
}
@@ -359,7 +637,7 @@
align-items: flex-start;
flex-wrap: wrap;
align-content: flex-start;
- padding: 20rpx 20rpx 0 20rpx;
+ /* padding: 20rpx 20rpx 0 20rpx; */
justify-content: space-between;
>view {
@@ -375,15 +653,46 @@
/* ::v-deep .el-card__body{
padding: 30rpx;
} */
+ /* 鍒嗛〉 */
.paging {
display: flex;
align-items: center;
}
+ .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: .12rem;
+ width: .28rem;
+ height: .3rem;
+ line-height: .3rem;
+ background-color: #fff;
+ color: #9E9E9E;
+ text-align: center;
+ border: 1px solid #9E9E9E;
+ }
+
+ /* ------------ */
.dialog {
position: fixed;
right: 0;
top: 0;
+ z-index: 9999999999999999999999999999999999999999999 !important;
>div {
height: 100%;
@@ -409,13 +718,257 @@
.detailImage {
width: 100%;
- height: 450rpx;
+ height: 1.94rem;
color: #000;
- img{
+
+ img {
position: absolute;
width: 100%;
height: 100%;
vertical-align: top;
}
}
+
+
+ /* 鎼滅储鎸夐挳 */
+ .sousuo {
+ margin: .35rem 0 .19rem;
+ }
+
+ .search1 {
+ width: 5rem;
+
+ }
+
+ ::v-deep .search {
+ height: .36rem;
+ border-radius: .3rem;
+ align-items: center;
+ border-color: #597AA5 !important;
+ }
+
+ ::v-deep .search .content {
+ height: 100% !important;
+ border: 0;
+ }
+
+ ::v-deep .search .uni-input-placeholder {
+ font-size: .14rem;
+ }
+
+ ::v-deep .search .uni-icons {
+ font-size: .14rem !important;
+ color: #244A7B !important;
+ }
+
+ ::v-deep .search .uni-input-input,
+ ::v-deep .search .uni-select__input-box {
+ font-size: .14rem;
+ line-height: 1;
+ }
+
+ ::v-deep .xiala {
+ width: 20% !important;
+ text-align: center;
+ }
+
+ ::v-deep .uni-select__input-text {
+ color: #244A7B;
+ }
+
+ ::v-deep .next-search-more .search {
+ border: 2px solid #597AA5 !important;
+ }
+
+ ::v-deep .next-search-more .search .content {
+ border-left: 1px solid #597AA5 !important;
+ }
+
+ .search1 ::v-deep .btnn {
+ /* border: 10px solid red; */
+ width: .74rem !important;
+ height: .3rem;
+ line-height: .3rem;
+ text-align: center;
+ font-size: .14rem;
+ background-color: #597AA5;
+ border-radius: .5rem;
+ color: #fff;
+ margin-right: .03rem;
+ }
+
+ .search1 ::v-deep .icon-del {
+ font-size: .24rem !important;
+ }
+
+ .search1 ::v-deep .uni-select__selector-item {
+ position: relative;
+ z-index: 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 !important;
+
+ display: flex;
+ justify-content: center;
+ font-size: .14rem;
+ height: .3rem;
+ line-height: .3rem;
+ }
+
+ /* ------------- */
+ /* 鐑棬鎼滅储 */
+ .remen {
+ font-size: .12rem;
+ margin-top: .1rem;
+ color: #2C2C2C;
+ }
+
+ /* --------- */
+
+ /* .boox {
+ width: 100%;
+ padding: .1rem .09rem;
+
+ h3 {
+ font-size: .14rem;
+ }
+ } */
+ .MargB {
+ margin-bottom: .2rem;
+ }
+
+ /* 宸﹁竟鐨� */
+ .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;
+ }
+ }
+
+ .a,
+ .b {
+ min-height: 3rem !important;
+ }
+
+ .paixu {
+ /* margin-right: .3rem;
+ height: .24rem; */
+ }
+
+ .paixu ::v-deep .el-input__icon {
+ font-size: .12rem;
+ line-height: .24rem;
+ margin-right: .05rem;
+ }
+
+
+ .paixu ::v-deep .el-input__inner {
+ width: 1.09rem;
+ font-size: .12rem;
+ padding-left: .15rem;
+ height: .24rem;
+ line-height: .24rem;
+ color: #2C2C2C;
+ border-color: #9E9E9E;
+ }
+
+ .el-select-dropdown__item {
+ font-size: .12rem;
+ height: .2rem;
+ line-height: .2rem;
+ }
+
+ .rightList {
+ height: 1.6rem;
+ position: relative;
+ overflow: hidden;
+ margin-bottom: .2rem !important;
+ }
+
+ .rightList ::v-deep .el-card__body {
+ padding: 0;
+ }
+
+ .rightList .RightListTop {
+ margin: .14rem 0;
+ font-size: .14rem;
+ height: .24rem;
+ line-height: .24rem;
+ display: flex;
+ }
+
+ .rightList .RightListTop .Topzhiwei {
+ width: .52rem;
+ margin-right: .08rem;
+ padding-right: .05rem;
+ }
+
+ .rightList .RightListTop .TopName {
+ font-weight: 700;
+ color: #2C2C2C;
+ margin-right: .17rem;
+ }
+
+ .rightList .RightListTop .TopDynasty {
+ width: .34rem;
+ height: .19rem;
+ font-size: .12rem;
+ line-height: .19rem;
+ text-align: center;
+ border-color: #9E9E9E;
+ color: #9E9E9E;
+ }
+
+ .rightList .desBox {
+ padding: .14rem .2rem .23rem;
+
+ /* position: relative; */
+ .biecheng {
+ height: .24rem;
+ /* line-height: .24rem; */
+ font-size: .12rem;
+ padding-left: .1rem;
+ background-color: #F0F0F0;
+ display: flex;
+ align-items: center;
+ margin-bottom: .12rem;
+ }
+
+ .describe {
+ position: absolute;
+ bottom: .1rem;
+ left: 0;
+ /* width: 100%; */
+ padding: 0 .23rem;
+ height: .49rem;
+ line-height: .24rem;
+ font-size: .12rem;
+ }
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.1