三

mh-two-thousand-and-two

2024-04-03 29a02350b873fa6339a7535fa929697fec9a8f84

三

 TCM_CharacterLibrary

File was deleted

 components/advancedSearch/advancedSearch.vue

@@ -1,9 +1,8 @@
<template>
    <view  style="height: 100% ;">
        <view class="flex flex-center" style="margin: 20rpx 0;">
            <luanqing-search class="search_bar" @onSearch="onSearch" :buttonText="buttonText" :isSearchTrue="isSearchTrue"></luanqing-search>
            <view class="" v-if="isAvancedTrue" @click="isAvancedClick"
                style="color:#244A7B ;font-size: .12rem;margin-left: .31rem;cursor: pointer;">高级搜索 ï¹€</view>
            <luanqing-search class="search_bar" @onSearch="onSearch" :buttonText="buttonText" :isSearchTrue="isSearchTrue" :placehold="placehold"></luanqing-search>
            <view class="advancedSea" v-if="isAvancedTrue" @click="isAvancedClick" style="color:#244A7B ;font-size: .12rem;margin-left: .31rem;cursor: pointer;">高级搜索 ï¹€</view>
        </view>
        <!-- é«˜çº§æœç´¢ -->
        <view class="" v-if="isAdvancedSearch" style="padding: 0 1.24rem; margin-bottom: .18rem;">
@@ -35,7 +34,9 @@
                    return '搜索'
                }
            },
			
            placehold:{
                type:String
            }
        },
        components: {
            MyForm

 components/footer/footer.vue

@@ -1,13 +1,13 @@
<template>
    <view class="BottomColumn flex flex-center">
    <view class="BottomColumn flex flex-center" :style="{'position':isLocation==true?'fixed':'','marginTop':isMarginTop+'rem'}">
        <view class="Bbar flex">
            <img style="display: block;margin-right: .22rem;width: .52rem;height: .52rem;" src="@/static/image/logo.png" alt="" srcset="" />
            <view class="font-family" style="color: #2C2C2C; font-size: .14rem;line-height: normal;font-weight: 600;">
            <img style="display: block;margin-right: .22rem;width: .4rem;height: .4rem;" src="@/static/image/logo.png"
                alt="" srcset="" />
            <view class="font-family" style="color: #2C2C2C; font-size: .12rem;line-height: 1.5;">
                <view class="">
                    92017中国中医科学院中医药信息研究所版权所有京ICP备业方安大业方业方
                    Â©2017 ä¸­å›½ä¸­åŒ»ç§‘学院中医药信息研究所版权所有 äº¬ICP备********号
                </view>
                <view class="">地址:北京市东城区东直门内南小街16号邮编:100700
                    ç”µè¯:8610-64089611Email:tcmbase@126.com</view>
                <view class="">地址：北京市东城区东直门内南小街16号 é‚®ç¼–：100700 ç”µè¯ï¼š8610-64089611 Email: tcmbase@126.com</view>
            </view>
        </view>
    </view>
@@ -16,6 +16,20 @@
<script>
    export default {
        name:"footer",
        props: {
            isLocation: {
                type: Boolean,
                default () {
                    return true
                }
            },
            isMarginTop: {
                type: Number,
                default () {
                    return 0
                }
            },
        },
        data() {
            return {
                
@@ -26,15 +40,19 @@

<style scoped>
.BottomColumn {
        position: fixed;
        left: 0px;
        /* position: sticky;
    top: 0; */
        /* position: fixed; */
        /* left: 0px; */
        bottom: 0px;
        z-index: 999999999999999999999999999999999999999999;
        padding: .19rem 0;
        width: 100%;
        background-color: #e6eff8;
        font-size: 10px;
        color: #000;

        /* margin-top: 1rem; */
        .Bbar {
            img {
                width: 60rpx;

 components/form/form.vue

@@ -13,7 +13,7 @@
                </el-form-item>
                <!-- å…¶ä»–表单项省略 -->
                <!-- <el-form-item style="display:block; "> -->
                    <view class="flex flex-center">
                    <view class="flex flex-center Formbtn">

                        <el-button style="background-color: #244A7B;color: #fff;" size="mini" @click="handleSubmit">提交</el-button>
                        <el-button type="info" plain size="mini" @click="handleReset">重置</el-button>

 components/headNav/headNav.vue

@@ -1,26 +1,34 @@
<template>
    <view>
    <view class="headNav">
        <view class="NavTop flex" :style="{backgroundImage: 'url('+ bg + ')'}">
            <view class="" style="width: .34rem;height: .34rem;" @click="menuNav = !menuNav"><img
            <view class="" style="width: .34rem;height: .34rem;margin-right: 3rem;" @click="menuNav = !menuNav"><img
                    style="width: 100%;height: 100%;" src="../../static/中医人物知识库0201/三条杠.png" alt="" /></view>
            <view class="flex" style="letter-spacing: 5rpx;">
                <view class="logo"></view>
                <view class="" style="margin-left: .19rem;font-size: .24rem;font-family: cursive;font-weight: 900;">
                    ä¸­åŒ»åŒ»äº‹åˆ¶åº¦
                    {{text}}
                </view>
            </view>
            <view class="NavTopr flex">
                <view class="search-container" style="margin-right: .30rem;">
                <!-- <view class="search-container" style="margin-right: .30rem;">
                    <view :class="{ 'expanded': isExpanded ,'search-bar':isExpanded}">
                        <input v-if="isExpanded" type="text" @blur="InputBlur" class="search-input"
                            v-model="searchInput" placeholder="请输入搜索内容" />
                        <!-- <img  
                             src=""></img> -->
                            <view class="search-logo" @click="toggleSearch" style="background-color: #000;border-radius: 50%;margin-top: -4rpx;"></view>
                        <view class="search-logo" @click="toggleSearch"
                            style="background-color: #000;border-radius: 50%;margin-top: -4rpx;"></view>
                    </view>
                </view> -->
                <view class="flex searchCss" :style="{'backgroundColor': isExpanded==true?'#fff':''}"
                    style="overflow: hidden; border-radius: .5rem; width: 2.33rem;margin-right: .30rem;justify-content: flex-end;">
                    <input :style="{'display': isExpanded == true ? 'block' : 'none'}" type="text"
                        style="flex: 1; background-color: #fff; font-size: .13rem;" @blur="InputBlur"
                        class="search-input" v-model="searchInput" placeholder="请输入搜索内容" />
                    <view class="search-logo" @click="toggleSearch"
                        :style="{'backgroundColor':searchBg==true?'#244A7B':'#DA7A2B'}"
                        style="background-color: #000;border-radius: 50%;margin-top: -4rpx;"></view>
                </view>
                <!-- <img style="border-radius: 50%;display: inline-block;" src="../../static/image/search.png" alt="" /> -->
                <img src="@/static/image/profile.svg" alt="" />
                <img @click="changePassword" src="@/static/image/profile.svg" alt="" />
                <img src="@/static/image/quote.svg" style="margin-right: 0;" alt="" />
            </view>
        </view>
@@ -29,28 +37,29 @@
            <!-- èƒŒæ™¯ -->
            <img class="leftListBgImage" src="@/static/image/leftListBg.png" alt="" />
            <view class="" style="position: relative;z-index: 999;">
                <view class="flex" style="justify-content: center;margin: .52rem 0 .46rem 0;">
                    <img src="@/static/image/logo.png" style="width: 100rpx;height: 100rpx;"></img>
                <view class="flex flex-center LeftLogo">
                    <!-- <img src="@/static/image/logo.png" ></img> -->
                    <view class="img"></view>
                </view>
                <el-menu default-active="1" active-text-color="#ffffff" class="el-menu-vertical-demo"
                <el-menu :default-active="idIndex" active-text-color="#ffffff" class="el-menu-vertical-demo"
                    @select="handleSelect">
                    <el-menu-item index="1" style=" border-radius: 30px;">
                    <el-menu-item index="0">
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <el-menu-item index="2">
                    <el-menu-item index="1">
                        <span slot="title">中医人物数据库</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                    <el-menu-item index="2">
                        <span slot="title">世医医家数据库</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                    <el-menu-item index="3">
                        <span slot="title">中医医学流派</span>
                    </el-menu-item>
                    <el-menu-item index="5">
                    <el-menu-item index="4">
                        <span slot="title">中医地域图谱</span>
                    </el-menu-item>
                    <el-menu-item index="6">
                        <span slot="title">中医地域图谱</span>
                    <el-menu-item index="5">
                        <span slot="title">中医医事制度</span>
                    </el-menu-item>
                </el-menu>
            </view>
@@ -67,6 +76,18 @@
    export default {
        name: "headNav",
        props: {
            text:{
                type:String,
                default () {
                    return '标题'
                }
            },
            searchBg :{
                type: Boolean,
                default () {
                    return true
                }
            },
            bg: {
                type: String,
                default () {
@@ -77,6 +98,12 @@
                type: String,
                default () {
                    return '/static/image/line.png'
                }
            },
            idIndex: {
                type: String,
                default () {
                    return '1'
                }
            }
        },
@@ -89,35 +116,41 @@
            };
        },
        methods: {
            // ä¿®æ”¹å¯†ç 
            changePassword() {
                uni.navigateTo({
                    url: '/pages/changePassword/changePassword'
                })
            },
            aaa() {
                console.log('ss');
            },
            handleSelect(index) {
                console.log(index);
                if (index === '1') {
                    // uni.navigateTo({
                    //   url: '/pages/index/index'
                    // });
                if (index === '0') {
                    uni.navigateTo({
                        url: '/pages/index/index?id=' + 0
                    });
                } else if (index === '1') {
                    uni.navigateTo({
                        url: '/pages/repository/repository?id=' + 1
                    });
                } else if (index === '2') {
                    // uni.navigateTo({
                    //   url: '/pages/option2Page'
                    // });
                    uni.navigateTo({
                      url: '/pages/zhongyi/zhongyi?id='+2
                    });
                } else if (index === '3') {
                    // uni.navigateTo({
                    //   url: '/pages/option3Page'
                    // });
                    uni.navigateTo({
                        url: '/pages/dataDisplay/dataDisplay?id=' + 3
                    });
                } else if (index === '4') {
                    // uni.navigateTo({
                    //   url: '/pages/option3Page'
                    // });
                    uni.navigateTo({
                        url: '/pages/territory/territory?id=' + 4
                    });
                } else if (index === '5') {
                    // uni.navigateTo({
                    //   url: '/pages/option3Page'
                    // });
                } else if (index === '6') {
                    // uni.navigateTo({
                    //   url: '/pages/option3Page'
                    // });
                    uni.navigateTo({
                        url: '/pages/TcmSystem/TcmSystem?id=' + 5
                    });
                }
            },
            // æœç´¢æ¡†çš„的移出
@@ -128,7 +161,7 @@
            },
            // åˆ‡æ¢æœç´¢æ¡†çš„展开和收起状态  
            toggleSearch() {
                console.log(this.searchInput);
                // console.log('撒旦范德萨发生的',this.searchInput);
                this.isExpanded = !this.isExpanded;
                this.$nextTick(() => {
                    if (this.searchInput.trim() !== '') {
@@ -146,8 +179,60 @@
</script>

<style scoped>
    .LeftLogo {
        width: 100%;
        margin: .52rem 0 .5rem;

        .img {
            width: .52rem;
            height: .52rem;
            background-image: url(@/static/image/logo3.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            /* image-rendering: pixelated; */
        }
    }

    @media screen and (min-width:2560px)and (max-width:3840px) {

        ::v-deep .el-menu .is-active {
            background-color: #244A7B !important;
            border-radius: .5rem;

        }

        .LeftLogo .img {
            background-image: url(@/static/image/logo4.png);
        }
    }

    @media screen and (min-width:1366px) and (max-width:1920px) {

        ::v-deep .el-menu .is-active {
            background-color: #244A7B !important;
            border-radius: .5rem;

        }

        .LeftLogo .img {
            background-image: url(@/static/image/logo.png);
        }
    }

    ::v-deep .uni-input-placeholder {
        padding-left: .05rem;
    }

    .headNav {
        /* ç²˜æ€§å®šä½ */
        position: sticky;
        top: 0;
        z-index: 9999999999999999999999999999999999999999999999 !important;
    }

    .NavTop {
        /* background: url(@/static/image/topBg.png); */

        background-size: 100% 100%;
        padding: .16rem .24rem;
        color: #fff !important;
@@ -266,20 +351,22 @@

    ::v-deep .el-menu .is-active {
        background-color: #244A7B !important;
        border-radius: 30px;
        border-radius: .5rem;

        /* padding: 0 .14rem !important; */
    }

    .el-menu-item {
        height: .34rem;
        line-height: .3rem;
        font-size: .16rem;
        text-align: center;
        font-weight: 500;
        margin:  .13rem .14rem !important;
        display: flex;
        /*     display: flex;
        justify-content: center;
        align-items: center;
        align-items: center; */
        text-align: left;
        padding-left: .4rem !important;
    }

    ::v-deep .el-dialog__body {

 components/table1/table1.vue

@@ -1,6 +1,6 @@
<template>
  <div>
    <el-table  :max-height="height" :data="data" >
    <el-table  :min-height="height" :data="data" >
      <el-table-column min-width="110"  :sort-method="sortAge" v-for="column in columns" :key="column.prop" :label="column.label" header-align="center">
        <template slot-scope="scope" class="font-family">
          <template v-if="column.type === 'image'">

 pages.json

@@ -122,6 +122,15 @@
            "enablePullDownRefresh" : false,
            "navigationStyle": "custom"
        }
    },
    {
        "path" : "pages/changePassword/changePassword",
        "style" : 
        {
            "navigationBarTitleText" : "",
            "enablePullDownRefresh" : false,
            "navigationStyle": "custom"
        }
    }],
    "globalStyle": {
        "navigationStyle": "custom"

 pages/AcademicHistory/AcademicHistory.vue

@@ -1,50 +1,39 @@
<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>
    <!-- é¡¶éƒ¨å¯¼èˆª -->
    <headNav :idIndex="idIndex"  text="历代学术流派"/>
        <view class="Midde flex">
            <view class="MiddeBack">返回</view>
            <!-- <view class="MiddeBack">返回</view> -->
            <el-button class="MiddeBack flex flex-center" @click="goBack">返回</el-button>
            <view class="flex flex-center flex-column">
                <view class="" style="font-weight: 900;margin-bottom:20rpx ;">河间图谱</view>
                <view class="" style="font-weight: 900;margin-bottom:.2rem ;font-size: .26rem;line-height: 1;">河间图谱
                </view>
                <ul class="flex Lists">
                    <li class="flex">
                        <view class=""
                            style="margin-right: 10rpx; width: 20rpx;height: 20rpx;border-radius: 50%;background-color: #5e7ea5;">
                        </view>
                        <view class="">幅度萨芬</view>
                    <li @click="ListClick" style="background-color: #fff;color: #597AA5;">
                        æ’’地方
                    </li>
                    <li class="flex">
                        <view class=""
                            style="margin-right: 10rpx; width: 20rpx;height: 20rpx;border-radius: 50%;background-color: #5e7ea5;">
                        </view>
                        <view class="">幅度萨芬</view>
                    <!-- /pages/AcademicHistory/AcademicHistory -->
                    <li style="background-color: #597AA5;color: #fff;">
                        æ’’地方
                    </li>
                    <li class="flex">
                        <view class=""
                            style="margin-right: 10rpx; width: 20rpx;height: 20rpx;border-radius: 50%;background-color: #5e7ea5;">
                        </view>
                        <view class="">幅度萨芬</view>
                    </li>
                    <li class="flex">
                        <view class=""
                            style="margin-right: 10rpx; width: 20rpx;height: 20rpx;border-radius: 50%;background-color: #5e7ea5;">
                        </view>
                        <view class="">幅度萨芬</view>
                    </li>

                </ul>
            </view>
            <view class=""></view>
        </view>
        <view class="flex flex-center" style="width: 100%; margin: .2rem 0;">
            <ul class="flex">
                <li style="" class="school1" v-for="(item,index) in dynasty" :key="item.id">
                    <view class="flex flex-center font-family school"
                        style="font-weight: 500; border-radius: .3rem; padding: .06rem .15rem; color: #2C2C2C; font-size: .12rem; margin-top: .03rem;margin-right: .1rem;background-color: #fff;">
                        <view class="" :style="{background:item.color}"
                            style="margin-right: .07rem; width: .12rem;height: .12rem;border-radius: 50%;"></view>
                        <view class="" style="color: #2C2C2C;font-size: .12rem;">{{item.name}}</view>
                    </view>
                </li>
            </ul>
        </view>
        <view class="Bottom">
            <view id="main" style="width: 100vw; height: 500px;"></view>
            <view id="main" style="width: 100vw; height: 5rem;"></view>
        </view>
    </view>
</template>
@@ -54,127 +43,324 @@
    export default {
        data() {
            return {

                // æ ‡é¢˜é¡¶éƒ¨æ éœ€è¦çš„东西
                idIndex:0,
                dynasty: [{
                    name: '代表人物',
                    color: '#597AA5',
                    id: 1
                }, {
                    name: '重要医家',
                    color: '#DA7A2B',
                    id: 2
                }, {
                    name: '关系文献',
                    color: '#9E9E9E',
                    id: 3
                }]
            }
        },
        onLoad(options) {
            this.idIndex = options.id
            console.log('optionsoptionsoptions',options.id);
        },
        methods: {
            goBack() {
                // uuni.redirectTo();
                uni.redirectTo({
                    url: '/pages/index/index'
                })
            },
            ListClick() {
                uni.navigateTo({
                    url: '/pages/interchannel/interchannel?id='+this.idIndex
                })
            },
            innt() {
                this.$nextTick(() => {
                    var chartDom = document.getElementById('main'); // èŽ·å–HTML中的元素，此处假设有一个id为'main'的元素作为图表容器
                    var myChart = echarts.init(chartDom); // åˆå§‹åŒ–echarts实例，并将其与图表容器绑定
                    var option; // å®šä¹‰å˜é‡option来存储图表的配置项
                    // var chartDom = document.getElementById('main'); // èŽ·å–HTML中的元素，此处假设有一个id为'main'的元素作为图表容器
                    // var myChart = echarts.init(chartDom); // åˆå§‹åŒ–echarts实例，并将其与图表容器绑定
                    // var option; // å®šä¹‰å˜é‡option来存储图表的配置项

                    option = {
                        // title: {
                        //   text: 'Basic Graph' // å›¾è¡¨æ ‡é¢˜ä¸º'Basic Graph'
                    // option = {
                    //     // title: {
                    //     //   text: 'Basic Graph' // å›¾è¡¨æ ‡é¢˜ä¸º'Basic Graph'
                    //     // },
                    //     tooltip: {}, // é¼ æ ‡æ‚¬åœæ—¶æ˜¾ç¤ºçš„提示框
                    //     animationDurationUpdate: 1500, // æ•°æ®æ›´æ–°æ—¶çš„动画时长
                    //     animationEasingUpdate: 'quinticInOut', // æ•°æ®æ›´æ–°æ—¶çš„动画效果
                    //     series: [{
                    //         type: 'graph', // å›¾è¡¨ç±»åž‹ä¸º'graph'
                    //         layout: 'none', // å›¾è¡¨å¸ƒå±€æ–¹å¼ä¸º'none'，即节点位置由x和y坐标指定
                    //         symbolSize: 150, // èŠ‚点的大小
                    //         roam: false, // æ˜¯å¦å¼€å¯æ¼«æ¸¸ï¼Œå³å¯ä»¥æ‹–动和缩放图表
                    //         label: {
                    //             show: true, // æ˜¯å¦æ˜¾ç¤ºèŠ‚点上的标签
                    //             textStyle: {
                    //                 fontSize: 32, // è®¾ç½®å­—体大小为12
                    //             }
                        // },
                        tooltip: {}, // é¼ æ ‡æ‚¬åœæ—¶æ˜¾ç¤ºçš„提示框
                        animationDurationUpdate: 1500, // æ•°æ®æ›´æ–°æ—¶çš„动画时长
                        animationEasingUpdate: 'quinticInOut', // æ•°æ®æ›´æ–°æ—¶çš„动画效果
                        series: [{
                            type: 'graph', // å›¾è¡¨ç±»åž‹ä¸º'graph'
                            layout: 'none', // å›¾è¡¨å¸ƒå±€æ–¹å¼ä¸º'none'，即节点位置由x和y坐标指定
                            symbolSize: 50, // èŠ‚点的大小
                            roam: false, // æ˜¯å¦å¼€å¯æ¼«æ¸¸ï¼Œå³å¯ä»¥æ‹–动和缩放图表
                            label: {
                                show: true // æ˜¯å¦æ˜¾ç¤ºèŠ‚点上的标签
                            },
                            edgeSymbol: ['circle', 'arrow'], // è¾¹çš„起始和结束箭头样式
                            edgeSymbolSize: [4, 10], // è¾¹çš„起始和结束箭头大小
                            edgeLabel: {
                                fontSize: 20 // è¾¹çš„标签字体大小
                            },
                            data: [{
                                    name: '金元四大家', // èŠ‚点1的名称
                                    x: 1230, // èŠ‚点1的x坐标
                                    y: 250, // èŠ‚点1的y坐标
                                    itemStyle: {
                                        color: 'red' // èŠ‚点1的背景颜色
                                    },
                                    label: {
                                        color: 'black' // èŠ‚点1的字体颜色
                                    }
                                },
                                {
                                    name: '刘完素', // èŠ‚点2的名称
                                    x: 800, // èŠ‚点2的x坐标
                                    y: 300 // èŠ‚点2的y坐标
                                },
                                {
                                    name: '傷寒直格', // èŠ‚点3的名称
                                    x: 550, // èŠ‚点3的x坐标
                                    y: 360 // èŠ‚点3的y坐标
                                },
                                {
                                    name: '张仲景', // èŠ‚点4的名称
                                    x: 700, // èŠ‚点4的x坐标
                                    y: 200 // èŠ‚点4的y坐标
                                },
                                {
                                    name: '三消論', // èŠ‚点4的名称
                                    x: 750, // èŠ‚点4的x坐标
                                    y: 500 // èŠ‚点4的y坐标
                                },
                            ],
                            links: [ // è¾¹çš„连接关系
                                {
                                    source: '金元四大家', // è¾¹çš„起始节点索引为0，即节点1
                                    target: '刘完素', // è¾¹çš„结束节点索引为1，即节点2
                                    symbolSize: [5, 20], // è¾¹çš„起始和结束箭头大小
                                    label: {
                                        show: true, // æ˜¯å¦æ˜¾ç¤ºè¾¹çš„标签
                                        formatter: '包含',
                                    },
                                    lineStyle: {
                                        width: 5, // è¾¹çš„宽度
                                        curveness: 0.2 // è¾¹çš„曲度
                    //         edgeSymbol: ['circle', 'arrow'], // è¾¹çš„起始和结束箭头样式
                    //         edgeSymbolSize: [10, 10], // è¾¹çš„起始和结束箭头大小
                    //         edgeLabel: {
                    //             fontSize: 40, // è¾¹çš„标签字体大小

                                    }
                    //         },
                    //         data: [{
                    //                 name: '金元四大家', // èŠ‚点1的名称
                    //                 x: 1230, // èŠ‚点1的x坐标
                    //                 y: 250, // èŠ‚点1的y坐标
                    //                 itemStyle: {
                    //                     color: 'red', // èŠ‚点1的背景颜色
                    //                 },
                    //                 label: {
                    //                     color: 'black' // èŠ‚点1的字体颜色
                    //                 }
                    //             },
                    //             {
                    //                 name: '刘完素', // èŠ‚点2的名称
                    //                 x: 800, // èŠ‚点2的x坐标
                    //                 y: 300 // èŠ‚点2的y坐标
                    //             },
                    //             {
                    //                 name: '傷寒直格', // èŠ‚点3的名称
                    //                 x: 550, // èŠ‚点3的x坐标
                    //                 y: 360 // èŠ‚点3的y坐标
                    //             },
                    //             {
                    //                 name: '张仲景', // èŠ‚点4的名称
                    //                 x: 700, // èŠ‚点4的x坐标
                    //                 y: 200 // èŠ‚点4的y坐标
                    //             },
                    //             {
                    //                 name: '三消論', // èŠ‚点4的名称
                    //                 x: 750, // èŠ‚点4的x坐标
                    //                 y: 500 // èŠ‚点4的y坐标
                    //             },
                    //         ],
                    //         links: [ // è¾¹çš„连接关系
                    //             {
                    //                 source: '金元四大家', // è¾¹çš„起始节点索引为0，即节点1
                    //                 target: '刘完素', // è¾¹çš„结束节点索引为1，即节点2
                    //                 symbolSize: [5, 20], // è¾¹çš„起始和结束箭头大小
                    //                 label: {
                    //                     show: true, // æ˜¯å¦æ˜¾ç¤ºè¾¹çš„标签
                    //                     formatter: '包含',
                    //                 },
                    //                 lineStyle: {
                    //                     width: 5, // è¾¹çš„宽度
                    //                     curveness: 0.2 // è¾¹çš„曲度

                    //                 }
                    //             },
                    //             {
                    //                 source: '刘完素', // è¾¹çš„起始节点为'Node 2'
                    //                 target: '傷寒直格', // è¾¹çš„结束节点为'Node 1'
                    //                 label: {
                    //                     show: true, // æ˜¯å¦æ˜¾ç¤ºè¾¹çš„标签
                    //                     formatter: '出版物'
                    //                 },
                    //                 lineStyle: {
                    //                     curveness: 0.2, // è¾¹çš„曲度

                    //                 }
                    //             },
                    //             {
                    //                 source: '刘完素', // è¾¹çš„起始节点为'Node 1'
                    //                 target: '张仲景', // è¾¹çš„结束节点为'Node 3'
                    //                 label: {
                    //                     show: true, // æ˜¯å¦æ˜¾ç¤ºè¾¹çš„标签
                    //                     formatter: '评论'
                    //                 },
                    //                 lineStyle: {
                    //                     curveness: 0.2 // è¾¹çš„曲度
                    //                 }
                    //             },
                    //             {
                    //                 source: '刘完素', // è¾¹çš„起始节点为'Node 2'
                    //                 target: '三消論', // è¾¹çš„结束节点为'Node 3'
                    //                 label: {
                    //                     show: true, // æ˜¯å¦æ˜¾ç¤ºè¾¹çš„标签
                    //                     formatter: '出版物'
                    //                 },
                    //                 lineStyle: {
                    //                     curveness: 0.2 // è¾¹çš„曲度
                    //                 }
                    //             }
                    //         ],
                    //         lineStyle: {
                    //             opacity: 0.9, // è¾¹çš„透明度
                    //             width: 2, // è¾¹çš„宽度
                    //             curveness: 0 // è¾¹çš„曲度
                    //         },
                    //         textStyle: {
                    //             fontSize: 14 // è®¾ç½®å…¨å±€æ–‡å­—的字体大小
                    //         },
                    //     }]
                    // };

                    // option && myChart.setOption(option); // å°†é…ç½®é¡¹åº”用于图表实例
                    // console.log(myChart);

                    var chartDom = document.getElementById('main');
                    var myChart = echarts.init(chartDom);
                    // å‡è®¾æ‚¨æœ‰èŠ‚点名称和它们之间的关系数据
                    var nodes = ['刘完素', '张仲景', '金元四大家', '三消论', '伤寒直格'];
                    var relationships = [{
                            source: '金元四大家',
                            target: '刘完素',
                            relation: '姻亲'
                        }, {
                            source: '刘完素',
                            target: '张仲景',
                            relation: ''
                                },
                                {
                                    source: '刘完素', // è¾¹çš„起始节点为'Node 2'
                                    target: '傷寒直格', // è¾¹çš„结束节点为'Node 1'
                                    label: {
                                        show: true, // æ˜¯å¦æ˜¾ç¤ºè¾¹çš„标签
                                        formatter: '出版物'
                                    },
                                    lineStyle: {
                                        curveness: 0.2 // è¾¹çš„曲度
                                    }
                            source: '刘完素',
                            target: '伤寒直格',
                            relation: ''
                                },
                                {
                                    source: '刘完素', // è¾¹çš„起始节点为'Node 1'
                                    target: '张仲景', // è¾¹çš„结束节点为'Node 3'
                            source: '刘完素',
                            target: '三消论',
                            relation: ''
                        },
                        // å…¶ä»–关系...
                    ];

                    let FontSize = 12; // å­—体大小
                    let BorderWidth = 2; // è¾¹æ¡†å¤§å°
                    let SymbolSize = 80; // å°ºå¯¸è·ç¦»
                    let Distance = 10
                    // ä¸åŒå°ºå¯¸ä¸‹ä¿®æ”¹echarts的字体
                    if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
                        FontSize = 28
                        BorderWidth = 5
                        SymbolSize = 100
                        Distance = 33
                    } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
                        FontSize = 28
                        BorderWidth = 4
                        SymbolSize = 90
                        Distance = 22
                    } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
                        FontSize = 18
                        BorderWidth = 4
                        SymbolSize = 70
                        Distance = 22
                    }
                    // æ ¹æ®å…³ç³»æ•°æ®ç”Ÿæˆè¿žæŽ¥çº¿
                    var links = [];
                    relationships.forEach(function(relationship) {
                        // console.log(relationship,'relationship');
                        var sourceIndex = nodes.indexOf(relationship.source);
                        var targetIndex = nodes.indexOf(relationship.target);
                        var linkObject = {
                            source: sourceIndex,
                            target: targetIndex
                        };
                        if (relationship.relation !== '') {
                            linkObject.label = {
                                show: true,
                                formatter: function(params) {
                                    return relationship.relation;
                                },
                                color: '#2C2C2C',
                                fontSize: FontSize - 2,
                                backgroundColor: 'rgba(255, 255, 255, 1)',
                                padding: [11, 20],
                                borderRadius:300,
                                position: 'middle',
                                z: 10,
                                distance: -(Distance + 1),
                            }
                        }
                        links.push(linkObject);
                        // if (sourceIndex !== -1 && targetIndex !== -1) {
                        //     links.push({
                        //         source: sourceIndex,
                        //         target: targetIndex,
                        //         label: {
                        //             show: true,
                        //             formatter: function(params) { // ä½¿ç”¨å‡½æ•°åŠ¨æ€ç”Ÿæˆæ ‡ç­¾å†…容
                        //                 // console.log(params.data, 'aaaaaaaaaaaa');
                        //                 return relationships.find(rel => rel.source === nodes[
                        //                         params.data
                        //                         .source] && rel.target === nodes[params
                        //                         .data.target])
                        //                     .relation;
                        //             }, // è®¾ç½®å…³ç³»æ ‡ç­¾å†…容为"Child-Parent"
                        //             color: '#2C2C2C',
                        //             fontSize: FontSize - 2,
                        //             backgroundColor: 'rgba(255, 255, 255, 1)',
                        //             padding: [11, 20],
                        //             position: 'middle', // è®¾ç½®æ ‡ç­¾æ–‡æœ¬åœ¨çº¿çš„中间位置上居中显示
                        //             // bottom: -(FontSize+10),
                        //             z: 10, // è®¾ç½®æ ‡ç­¾çš„z轴高度，使其比连接线更高
                        //             // offset: [0, 15] ,// å¾€ä¸‹ç§»åŠ¨ 10 åƒç´ 
                        //             distance: -(Distance + 1), // å°†æ ‡ç­¾æ”¾ç½®åœ¨è¿žæŽ¥çº¿ä¸Š
                        //         }
                        //     });
                        // }
                    });
                    // æ ¹æ®nodes动态生成节点数据
                    var nodeData = nodes.map(function(node, index) {
                        return {
                            name: node,
                            x: Math.random() * 1000, // è®¾ç½®éšæœºx坐标位置
                            y: Math.random() * 600, // è®¾ç½®éšæœºy坐标位置
                            itemStyle: {
                                color: getColorByIndex(index), // å¯ä»¥æ ¹æ®ç´¢å¼•è®¾ç½®ä¸åŒçš„颜色
                                borderWidth: BorderWidth + 3,
                                borderColor: getColorByIndex(index + 1),
                                borderRadius: 30,
                            },
                            symbolSize: SymbolSize + 50
                        };
                    });
                    // è®¾ç½®é¢œè‰²
                    function getColorByIndex(index) {
                        var colors = ['#ecf4ff', '#dd9795', '#f1edbe', '#ecf4ff', '#c5dbd8']; // å¯ä»¥æ ¹æ®å®žé™…情况设置颜色数组
                        return colors[index % colors.length];
                    }
                    var option;
                    option = {
                        backgroundColor: {
                            type: 'image',
                            image: '/static/image/characterRelationBg.png',
                            repeat: 'repeat-x', // æ˜¯å¦å¹³é“ºï¼Œå¯ä»¥æ˜¯ 'repeat-x', 'repeat-y', 'no-repeat'
                            size: '100% 100%', // èƒŒæ™¯å›¾ç‰‡çš„尺寸，可以是百分比或者像素
                            position: 'center center' // èƒŒæ™¯å›¾ç‰‡çš„位置，可以是 top, bottom, middle æˆ–者百分比
                        },
                        tooltip: {},
                        animationDurationUpdate: 1500,
                        animationEasingUpdate: 'quinticInOut',
                        series: [{
                            type: 'graph',
                            layout: 'none',
                            symbolSize: SymbolSize, // è°ƒæ•´èŠ‚点大小
                                    label: {
                                        show: true, // æ˜¯å¦æ˜¾ç¤ºè¾¹çš„标签
                                        formatter: '评论'
                                show: true,
                                color: 'black', // è®¾ç½®èŠ‚点文字颜色为黑色
                                fontSize: FontSize, // è®¾ç½®æ–‡å­—大小
                                    },
                            // edgeSymbol: ['circle'],
                            // edgeSymbolSize: [4, 10],
                            edgeSymbol: ['circle', 'arrow'], // è¾¹çš„起始和结束箭头样式
                            edgeSymbolSize: [20, 20], // è¾¹çš„起始和结束箭头大小
                            data: nodeData,
                            links: links,
                                    lineStyle: {
                                        curveness: 0.2 // è¾¹çš„曲度
                                    }
                                },
                                {
                                    source: '刘完素', // è¾¹çš„起始节点为'Node 2'
                                    target: '三消論', // è¾¹çš„结束节点为'Node 3'
                                    label: {
                                        show: true, // æ˜¯å¦æ˜¾ç¤ºè¾¹çš„标签
                                        formatter: '出版物'
                                    },
                                    lineStyle: {
                                        curveness: 0.2 // è¾¹çš„曲度
                                    }
                                }
                            ],
                            lineStyle: {
                                opacity: 0.9, // è¾¹çš„透明度
                                width: 2, // è¾¹çš„宽度
                                curveness: 0 // è¾¹çš„曲度
                                opacity: 0.9,
                                width: 2,
                                curveness: 0.3
                            }
                        }]
                    };

                    option && myChart.setOption(option); // å°†é…ç½®é¡¹åº”用于图表实例
                    console.log(myChart);
                    // å°†ç”Ÿæˆçš„连接线添加到echarts图表的option中
                    option.series[0].links = links;
                    option && myChart.setOption(option);
                })
            }
        },
@@ -206,26 +392,42 @@
        }
    }


    .Midde {
        background-color: #d1d6dc;
        /* background-color: #d1d6dc; */
        background-image: url(@/static/image/学派Bg.png);
        background-size: 100% 100%;
        color: #000;
        padding: 40rpx;
        padding: .18rem .23rem 0;
        align-items: flex-start;
        height: 1.43rem;

        view {

            color: #000;
        }

        .MiddeBack {
            width: 0.6rem;
            height: 0.24rem;
            font-size: .12rem;
            padding: 0;

        }

        .Lists {
            li {
                /* min-width: 50rpx; */
                border-radius: 40rpx;
                background-color: #fff;
                padding: 0 10rpx;
                font-size: 18rpx;
                margin: 0 20rpx;
                width: 0.96rem;
                height: .3rem;
                border: 1px solid #597AA5;
                line-height: .3rem;
                text-align: center;
                font-size: .14rem;
            }
        }
    }

    .school1 {
        margin: 0 .2rem;
    }
</style>

 pages/Login/Login.vue

@@ -24,12 +24,12 @@
                        <el-input v-model="loginData.loginID"></el-input>
                    </el-form-item>
                    <el-form-item label="登录密码" prop="pass">
                        <el-input v-model="loginData.pass"></el-input>
                        <el-input type="password" v-model="loginData.pass"></el-input>
                    </el-form-item>
                    <el-form-item class="btn">
                        <el-button class="font-family"
                            style="margin-top: .47rem; font-weight:900;font-size: .3rem; width: 100%;background-color:#244A7B;color: #fff;padding: .16rem;"
                            size="medium" @click="Login('formLogin1')">登录</el-button>
                            size="medium" @click="Login('formLogin1')">注册</el-button>
                    </el-form-item>
                    <view class="" style="display: flex;font-size: .14rem;color: #244A7B;">
                        <view class="" style="display: inline-block;cursor: pointer;" @click="forgetPass">忘记密码
@@ -328,22 +328,78 @@
</script>

<style scoped>
    @media screen and (min-width: 1441px) {
    @media screen and (max-width:1366px) {
        ::v-deep .el-card {
            top: 60% !important;
            top: 50% !important;
        }
        ::v-deep .el-input__inner{
            height: .44rem;
        }
        ::v-deep .el-card {
            padding: .2rem 0 !important;
        }
        ::v-deep .el-form-item__error {
            font-size: .13rem !important;
        }

        .LoginBg{
            margin: 0 !important;
        }
        .hua{
            height: 5rem !important;
        }
    }
    @media screen and (min-width:1366px) and (max-width:1920px) {
        ::v-deep .el-card__body{
            padding: 0 .58rem !important;
        }
        ::v-deep .el-card {
            top: 80% !important;
        }
        ::v-deep .el-input__inner{
            height: .44rem;
        }
        ::v-deep .el-card {
            padding: .25rem 0 !important;
        }
        .LoginBg{
            margin: 0 !important;
        }
        .hua{
            height: 5rem !important;
        }
    }
    ::v-deep .el-form-item__error {
            font-size: .13rem !important;
        }
    @media screen and (min-width: 1920px) and (max-width:2560px){
        ::v-deep .el-card {
            top: 80% !important;
        }
        ::v-deep .el-card {
            padding: .25rem .4rem !important;
        }
        ::v-deep .el-card__body {
            /* top: 90% !important; */
            padding:  0 !important;
        }
        ::v-deep .el-input__inner{
            height: .44rem;
        }
::v-deep .el-form-item__error {
        font-size: .13rem;
    }
        .BottomColumn {
            padding: .10rem 0;
        }

        .LoginTop {
        /* .LoginTop {
            margin-bottom: .17rem !important;
        }
        } */

        .btn ::v-deep .el-button {
            margin-top: 0.1rem !important;
            font-size: 0.2rem !important;
            margin-top: 0.3rem !important;
            /* font-size: 0.2rem !important; */
            width: 100%;
            padding: 0.12rem !important;
        }
@@ -364,7 +420,42 @@
            height: 2.5rem !important;
        }
    }
    @media screen and (min-width:2560px)and (max-width:3840px) {
        .LoginBg{
            margin: 0 !important;
        }
        ::v-deep .el-card {
            top: 85% !important;
        }
        ::v-deep .el-input__inner{
            height: .4rem !important;
            font-size: .14rem;
        }
        ::v-deep .el-input__inner{
            height: .44rem;
        }
        .hua {
            height: 4rem !important;
        }

    }
/* å°äºŽ */
    @media screen and (max-width:2560px) {
    /*     ::v-deep .el-input__inner{
            height: .44rem;
        }
        ::v-deep .el-card {
            padding: .25rem .58rem !important;
        }
        ::v-deep .el-card__body {
            top: 90% !important;
            padding:  0 !important;
        }
        .hua{
            height: 5rem !important;
        }
         */
    }
    

    .LoginBg {
@@ -392,15 +483,12 @@
        margin-left: 0 !important;
    }

    /*     ::v-deep .el-form-item__label {
	
		
    } */

    ::v-deep .el-input__inner {
        border: none;
        border-bottom: 1px solid #2d476a;
        border-radius: 0;
		
    }

    ::v-deep .el-form-item__error {
@@ -415,7 +503,6 @@
        border-color: #2d476a !important;
    }

    ::v-deep .el-form-item__label {}

    ::v-deep .el-form-item__label {
        padding: 0;
@@ -425,7 +512,7 @@
    }

    ::v-deep .el-form-item {
        margin-bottom: .22rem;
        margin-bottom: .25rem;
    }

    .ss1 {

 pages/Register/Register.vue

@@ -39,7 +39,7 @@
                    <el-form-item label="验证码" prop="verifyCode">
                        <view class="verifyCode relative">
                            <el-input v-model="registerData.verifyCode" placeholder="请输入验证码"></el-input>
                            <view @click="verifyCodeClick" class=""
                            <view @click="verifyCodeClick" class="yzm"
                                style="position: absolute;right: 0%;top: 0%;color: #244A7B;font-size: .14rem;font-weight: 500;">
                                èŽ·å–验证码</view>
                        </view>
@@ -49,7 +49,7 @@
                            style="margin-top: .22rem; font-weight:900;font-size: .3rem; width: 100%;background-color:#244A7B;color: #fff;padding: .16rem;"
                            size="medium" @click="Login('formLogin')">注册</el-button>
                    </el-form-item>
                    <view class=""
                    <view class="asdf"
                        style="font-size: .12rem;color: #9E9E9E;font-weight: 500; text-align: center;line-height: normal;margin-bottom: .19rem;">
                        ç”¨æˆ·æ³¨å†Œå³ä»£è¡¨åŒæ„ã€ŠæœåŠ¡æ¡æ¬¾ã€‹å’Œã€Šç”¨æˆ·éšç§ä¿æŠ¤å’Œä¸ªäººä¿¡æ¯æ¡æ¬¾ã€‹</view>
                </el-form>
@@ -308,9 +308,175 @@
    }
</script>
<style scoped>
    @media screen and (min-width: 1366px){
    @media screen and (max-width:1366px) {
        ::v-deep .el-card {
            top: 50% !important;
        }

        ::v-deep .el-input__inner {
            height: .44rem;
        }

        ::v-deep .el-card {
            padding: .2rem 0 !important;
        }

        .LoginBg {
            margin: 0 !important;
        }

        .hua {
            height: 5rem !important;
        }
    }

    @media screen and (min-width:1366px) and (max-width:1920px) {
        ::v-deep .el-card__body {
            padding: 0 .58rem !important;
        }

        ::v-deep .el-card {
            top: 80% !important;
        }

        ::v-deep .el-input__inner {
            height: .44rem;
        }

        ::v-deep .el-card {
            padding: .25rem 0 !important;
        }

        .LoginBg {
            margin: 0 !important;
        }

        .hua {
            height: 5rem !important;
        }
    }

    @media screen and (min-width: 1920px) and (max-width:2560px) {
        ::v-deep .el-card {
            top: 80% !important;
        }

        ::v-deep .el-card {
            padding: .25rem .4rem !important;
        }

        ::v-deep .el-card__body {
            /* top: 90% !important; */
            padding: 0 !important;
        }

        ::v-deep .el-input__inner {
            height: .44rem;
        }

        ::v-deep .el-form-item__error {
            font-size: .13rem;
        }

        .BottomColumn {
            padding: .10rem 0;
        }

        /* .LoginTop {
                margin-bottom: .17rem !important;
            } */

        .btn ::v-deep .el-button {
            margin-top: 0.3rem !important;
            /* font-size: 0.2rem !important; */
            width: 100%;
            padding: 0.12rem !important;
        }

        .LoginBg {
            height: .3rem !important;
        }

        .hua {
            height: 4rem !important;
        }

        .fff {
            height: 3.5rem !important;
        }

        .rrr {
            height: 2.5rem !important;
        }
    }

    @media screen and (min-width:2560px)and (max-width:3840px) {
        .LoginBg {
            margin: 0 !important;
            height: .3rem !important;
        }

        ::v-deep .el-card {
            top: 70% !important;
            padding: 0 !important;
        }

        ::v-deep .el-card__body {
            padding: .25rem .5rem !important;
        }

        ::v-deep .el-form {
            padding-left: .1rem !important;
        }

        ::v-deep .el-form-item__error {
            font-size: .13rem !important;
        }

        ::v-deep .el-input__inner {
            height: .35rem !important;
        }

        .hua {
            height: 4rem !important;
        }

        .LoginTop {
            margin-bottom: .25rem !important;
        }

        .yzm {
            top: 15% !important;
        }

        .fff {
            width: 2.4rem !important;
            height: 4rem !important;
        }

        .rrr {
            width: 2rem !important;
        }

        .btn ::v-deep .el-button {
            margin-top: 0.2rem !important;
            /*         font-size: 0.2rem !important;
                width: 100%;
                padding: 0.12rem !important; */
        }

        .asdf {
            margin-bottom: .1rem !important;
        }

    }

    /* @media screen and (max-width: 1366px){
        ::v-deep .el-card{
            top: 60% !important;
        }
        .LoginTop{
            margin-bottom: .2rem !important;
        }
    }
    @media screen and (min-width: 1920px){
@@ -318,9 +484,11 @@
            top: 80% !important;
        }
        
    }/* 
		
    } */
    /* 
    åœ¨å±å¹•å®½åº¦è¶…过 1440px æ—¶çš„样式设置 */
    @media screen and (min-width: 1441px) {
    /* @media screen and (min-width: 1441px) {
        ::v-deep .el-card {
            top: 80% !important;
        }
@@ -346,7 +514,7 @@
        }.rrr{
            height: 2.5rem !important;
        }
    }
    } */
    

    .LoginBg {
@@ -354,6 +522,7 @@
        height: .37rem;
        background: url(@/static/image/用户注册.png) no-repeat 0 0;
        background-size: 100% 100%;
        /* border: 10px solid red; */

    }


 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>
            <!-- å·¦ -->
            <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>
                <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>
                    <view class="flex flex-center toggleButton1">
                        <view class="toggleButton" style="color: #244A7B;" @click="shrinkClick('a')">
                            {{ activeBox !== 'a' ? '更多  ï¹€' : '收起  ï¸¿' }}
                        </view>
                    </view>
                </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>
                <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>
                    <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 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>
            <!-- å³ -->
            <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>
                <view style="flex-grow: 1;" class="flex CommodityList">
                    <view class="" v-for="item in CommodityList" :key="item" style="height:28% ;">
                <!-- </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 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=""
                                style="font-weight: 600; font-size: 20rpx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
                                    <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,8 +718,9 @@

    .detailImage {
        width: 100%;
        height: 450rpx;
        height: 1.94rem;
        color: #000;

        img{
            position: absolute;
            width: 100%;
@@ -418,4 +728,247 @@
            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>

 pages/changePassword/changePassword.vue

New file
@@ -0,0 +1,596 @@
<template>
    <view class="container flex flex-center" style="align-items: flex-start;">
        <view class="repository relative">
            <view class="Ttop flex flex-center flex-wrap" style="flex-direction: column;">
                <view class=""></view>
                <view class="" ref="Rtop">
                    <text class="login"></text>
                    <text
                        style="font-size: .36rem;letter-spacing: 4rpx;vertical-align: middle;font-family: cursive;font-weight: bold;">中国医学人物知识库</text>
                </view>
                <view></view>
            </view>
            <!-- é‡ç½®å¯†ç  -->
            <el-card>
                <view class="LoginTop"
                    style="display: flex; justify-content: space-between;margin-bottom: .47rem;align-items: center;">
                    <!-- <view class="" style="color: #244A7B;padding-bottom: .47rem;font-size: .3rem;font-weight: bold;">用户注册</view> -->
                    <view class="LoginBg"></view>
                    <view class="" @click="BacktoLogin"
                        style="cursor: pointer;font-size: .14rem;color: #244A7B;font-weight: normal;">
                        è¿”回登录
                    </view>
                </view>
                <el-form :hide-required-asterisk="true" ref="formLogin2" label-position="right" :rules="rules"
                    :model="amendDataPass">
                    <el-form-item label="登录账号" prop="loginID">
                        <el-input v-model="amendDataPass.loginID"></el-input>
                    </el-form-item>
                    <el-form-item label="原密码" prop="rawPass">
                        <el-input v-model="amendDataPass.rawPass"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPass">
                        <el-input v-model="amendDataPass.newPass"></el-input>
                    </el-form-item>
                    <el-form-item label="确认新密码" prop="checkPass">
                        <el-input v-model="amendDataPass.checkPass"></el-input>
                    </el-form-item>
                    <el-form-item class="btn">
                        <el-button class="font-family"
                            style="margin-top: 30rpx; font-weight:900;font-size: 30rpx; width: 100%;background-color: #244a7b;color: #fff;padding: 30rpx;"
                            size="medium" @click="Login2('formLogin2')">修改</el-button>
                    </el-form-item>
                </el-form>
            </el-card>

        </view>
        <view class="hua"></view>
        <!-- åº•éƒ¨äººç‰©èƒŒæ™¯å›¾å·¦ä¾§ -->
        <view class="fff"></view>
        <!-- åº•éƒ¨èŠ±çš„背景图右侧 -->
        <view class="rrr"></view>

        <Footer1 />
    </view>
</template>

<script>
    import {
        nextTick
    } from "vue";
    import Footer1 from '@/components/footer/footer.vue'
    export default {
        components: {
            Footer1
        },
        data() {
            // æ–°å¯†ç 
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.amendDataPass.checkPass !== '') {
                        this.$refs.formLogin2.validateField('checkPass');
                    }
                    callback();
                }
            };
            // ç¡®è®¤
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.amendDataPass.newPass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                // ç”¨æˆ·æ³¨å†Œ
                isRegister: false,
                // ç”¨æˆ·ç™»å½•
                isLogin: true,
                // ä¿®æ”¹å¯†ç 
                isAmendPass: false,
                // é‡ç½®å¯†ç 
                isResetPass: false,
                // æ³¨å†Œç”¨æˆ·è´¦å·çš„校验
                rules: {
                    loginID: [{
                        required: true,
                        message: '请输入登录账号',
                        trigger: 'blur'
                    }],
                    rawPass: [{
                            required: true,
                            message: '请输入原始密码',
                            trigger: 'blur'
                        },
                        {
                            min: 6,
                            max: 12,
                            message: '密码长度在 6 åˆ° 12 ä¸ªå­—符',
                            trigger: 'blur'
                        }
                    ],
                    newPass: [{
                            required: true,
                            message: '请输入新密码',
                            trigger: 'blur'
                        },
                        {
                            min: 6,
                            max: 12,
                            message: '密码长度在 6 åˆ° 12 ä¸ªå­—符',
                            trigger: 'blur'
                        },
                        {
                            validator: validatePass,
                            trigger: 'blur'
                        }
                    ],
                    checkPass: [{
                        validator: validatePass2,
                        trigger: 'blur'
                    }],
                    cellphoneORmailbox: [{
                            required: true,
                            message: '请输入邮箱地址',
                            trigger: 'blur'
                        },
                        {
                            type: 'email',
                            message: '请输入正确的邮箱地址',
                            trigger: ['blur', 'change']
                        }
                    ],
                    verifyCode: [{
                            required: true,
                            message: '请输入验证码',
                            trigger: 'blur'
                        },
                        {
                            validator: (rule, value, callback) => this.validateVerificationCode(rule, value, callback),
                            trigger: 'blur'
                        }
                    ]
                },
                // ç™»å½•æ³¨å†Œæ¡†
                loginTrue: true,
                Rtop1: 0,
                value: 'sdfdsf',
                // ä¿®æ”¹å¯†ç 
                amendDataPass: {
                    loginID: '',
                    rawPass: "",
                    newPass: "",
                    checkPass: ""
                },
                // ä¹¦ç±æ•°æ®
                listData: [{
                        name: '历代医家传记库',
                        id: 1,
                    }, {
                        name: '世医医家库',
                        id: 2,
                    }, {
                        name: '医学学术流派',
                        id: 3,
                    }, {
                        name: '中国地域医谱',
                        id: 4,
                    }, {
                        name: '中国医事制度',
                        id: 5,
                    },

                ]
            }
        },
        onLoad() {
            uni.getSystemInfo({
                success: function(info) {
                    // console.log('屏幕的宽度：' + info.windowWidth);
                    // console.log('屏幕的高度：' + info.windowHeight);
                }
            });
        },
        mounted() {
            this.getElementWidth();
        },
        methods: {
            // å·²æœ‰è´¦å·ï¼Ÿè¿”回登录
            BacktoLogin() {
                uni.redirectTo({
                    url: '/pages/Login/Login'
                })
            },
            // èŽ·å–验证码
            verifyCodeClick() {
                console.log('获取验证码');
            },
            // åˆ—表项跳转
            listDataClick(item) {
                console.log(item);
                // åœ¨å½“前页面设置全局变量
                // uni.setStorageSync('globalData', { id: 123, name: 'example' });
                if (item.id == 1) {
                    uni.navigateTo({
                        url: '/pages/repository/repository?id=' + item.id
                    })
                } else if (item.id == 2) {
                    console.log(item.name);
                    // uni.navigateTo({
                    //     url:'/pages/repository/repository?id='+item.id
                    // })
                } else if (item.id == 3) {
                    uni.navigateTo({
                        url: '/pages/dataDisplay/dataDisplay?id=' + item.id
                    })
                } else if (item.id == 4) {
                    uni.navigateTo({
                        url: '/pages/territory/territory?id=' + item.id
                    })
                } else if (item.id == 5) {
                    uni.navigateTo({
                        url: '/pages/TcmSystem/TcmSystem?id=' + item.id
                    })
                }
            },
            // éªŒè¯ç æ ¡éªŒ
            validateVerificationCode(rule, value, callback) {
                console.log(value)
                if (value !== '123456') {
                    callback(new Error('验证码错误'));
                } else {
                    callback();
                }
            },
            getElementWidth() {
                this.$nextTick(() => {
                    var width = this.$refs.Rtop.$el.clientWidth;
                    this.Rtop1 = width + 50;
                    console.log('Element width:', width);
                })
            },
            // ç”¨æˆ·ç™»å½•
            Login(formName) {
                console.log('用户登录的登录按钮');
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!成功');
                        uni.navigateTo({
                            url: '/pages/Login/Login'
                        })
                    } else {
                        console.log('error submit!!失败');
                        return false;
                    }
                });
            },
            // å¿˜è®°å¯†ç 
            Login2(formName) {
                console.log('忘记密码的登录按钮');
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!成功');
                        uni.redirectTo({
                            url: '/pages/Login/Login'
                        })
                    } else {
                        console.log('error submit!!失败');
                        return false;
                    }
                });
            }
        }
    }
</script>
<style scoped>
    /* 
    åœ¨å±å¹•å®½åº¦è¶…过 1440px æ—¶çš„样式设置 */
    /* @media screen and (min-width: 1441px) {
        ::v-deep .el-card {
            top: 60% !important;
        }
        .BottomColumn{
            padding: .10rem 0;
        }
        .LoginTop{
            margin-bottom: .17rem !important; 
        }
        .btn   ::v-deep .el-button{
            margin-top: 0.1rem !important;
                font-size: 0.2rem !important;
                width: 100%;
                padding: 0.12rem !important;
        }
        .LoginBg{
            height: .3rem !important;
        }
        .hua{
            height: 4rem !important;
        }.fff{
            height: 3.5rem !important;
        }.rrr{
            height: 2.5rem !important;
        }
    }
     */
    @media screen and (min-width:2560px)and (max-width:3840px) {
        .LoginBg {
            margin: 0 !important;
            height: .3rem !important;
        }

        ::v-deep .el-card {
            top: 90% !important;
            padding: 0 !important;
        }

        ::v-deep .el-card__body {
            padding: .25rem .5rem !important;
        }

        ::v-deep .el-form {
            padding-left: .1rem !important;
        }

        ::v-deep .el-form-item__error {
            font-size: .13rem !important;
        }

        ::v-deep .el-input__inner {
            height: .35rem !important;
            font-size: .14rem;
        }

        ::v-deep .el-form-item__label {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-right: .2rem !important;
            width: .7rem;
        }

        .hua {
            height: 4rem !important;
        }

        .LoginTop {
            margin-bottom: .4rem !important;
        }

        .yzm {
            top: 15% !important;
        }

        .fff {
            width: 2.4rem !important;
            height: 4rem !important;
        }

        .rrr {
            width: 2rem !important;
        }

        .btn {
            margin-bottom: .1rem !important;
        }

        .btn ::v-deep .el-button {
            margin-top: 0.2rem !important;
            font-size: 0.2rem !important;
            width: 100%;
            padding: 0.12rem !important;

            span {
                font-weight: bold !important;
            }
        }

        .asdf {
            margin-bottom: .1rem !important;
        }

    }

    .LoginBg {
        width: 1.2rem;
        height: .37rem;
        background: url(@/static/image/修改密码.png) no-repeat 0 0;
        background-size: 100% 100%;

    }


    ::v-deep .el-card {
        border-radius: 0;
        width: 5.42rem;
        /* height: 5.65rem; */
        position: absolute;
        top: 80%;
    }

    ::v-deep .el-card__body {
        padding: .26rem .58rem;
    }

    .btn>>>.el-form-item__content {
        margin-left: 0 !important;

    }

    ::v-deep .el-form-item__content {
        margin-left: 0 !important;
        flex: 1;
    }

    ::v-deep .el-input__inner {
        border: none;
        border-bottom: 1px solid #2d476a;
        border-radius: 0;
        padding: 0;
        height: .4rem;
        line-height: .4rem;
    }

    ::v-deep .el-form-item__error {
        /* display: none; */
    }

    ::v-deep .input.invalid:focus {
        border-color: #2d476a !important;
    }

    ::v-deep .el-input__inner:invalid {
        border-color: #2d476a !important;
    }


    ::v-deep .el-form-item__label {
        min-width: .6rem;
        padding: 0;
        color: #244A7B;
        font-size: .14rem;
        font-weight: 500;
        margin-right: .29rem;
    }

    ::v-deep .el-form-item {
        margin-bottom: .22rem;
        display: flex;
    }

    .ss1 {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 40rpx;
        height: 40rpx;
        background-size: 100% 100%;
    }

    .s1 {
        background-image: url(@/static/image/search.png);

    }

    .s2 {
        background-image: url(@/static/image/question.png);
    }

    .s3 {
        background-image: url(@/static/image/question.png);
    }

    .container {
        background: url(@/static/image/bg1.png);
        width: 100vw;
        height: 100vh;

        color: #fff;

        .repository {
            width: 100% !important;
            /* margin-top: 19px; */
            /* height: 68%; */
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            .Ttop {
                margin-top: .38rem;
                margin-bottom: 1.22rem;
            }

            .r-top {
                font-size: 40rpx !important;
                margin: 10rpx 0;
            }
        }

    }

    .login {
        width: .52rem;
        height: .52rem;
        display: inline-block;
        vertical-align: middle;
        margin-right: .19rem;
        background: url(@/static/image/logo.png) no-repeat 0 0;
        background-size: 100% 100%;
    }

    .rrr {
        position: absolute;
        right: .53rem;
        bottom: .36rem;
        width: 2.5rem;
        height: 3.07rem;
        opacity: 1;
        background: url(@/static/image/bg4.png);
        background-size: 100% 100%;
    }

    .hua {
        width: 13.81rem;
        height: 5.965rem;
        position: absolute;
        background: url(@/static/image/bg3.png) no-repeat 0 0;
        background-size: 100% 100%;
    }

    /* åº•éƒ¨äººç‰©èƒŒæ™¯å›¾  */
    .fff {
        background: url(@/static/image/bg2.png) no-repeat 0 0;
        background-size: 100% 100%;
        width: 2.74rem;
        height: 4.52rem;
        position: fixed;
        bottom: 0;
        z-index: 9999999999999;
        left: 0;
    }

    ::v-deep .uni-easyinput__content {
        border-radius: 30rpx !important;
        /* height: 52rpx; */
    }


    .secretary {
        width: 1300rpx !important;
        height: 50rpx;
        /* height: 80%; */
        /* flex-wrap: wrap; */
        padding: 0 20px;
        text-align: center;




        li {
            background-color: #fff;
            color: black;
            height: 600rpx;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            align-items: center;
            border: 1rpx solid #fff;
            padding: 50rpx 65rpx;
            /*             padding: 58rpx 128rpx 88rpx; */
            text-align: center;
            background: #EBF4FF;
        }
    }



    .Bbottom {
        display: flex;
        justify-content: center;

    }
</style>

 pages/characterMap/characterMap.vue

@@ -1,6 +1,7 @@
<template>
    <view>
        <headNav />
        <el-button class="getBack" @click="getBack">返回</el-button>
        <view class="" style="position: relative;">
            <!-- åœ°å›¾ -->
            <view id="spaceTime" style="height: 90vh;width: 100%;position: relative;"></view>
@@ -23,12 +24,15 @@
                <img style="width: 100%;height: 2rem;"
                    src="https://img0.baidu.com/it/u=1845740325,2917001370&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1711731600&t=0b208ab46e1d33aa81ac31dd6bf627be"
                    alt="" />
                <view class="" style="border: 1px solid ; position: absolute;bottom: 0; width: 80%;left: 10%;">
                    <!-- <div style="text-align: center; margin-bottom: 20px;">{{currentYear}}</div>
                    <el-slider v-model="sliderValue" :min="1900" :step="10" :max="2000" :show-stops="true"
                        @change="handleSliderChange"></el-slider> -->
                        <input type="range" min="0" max="100" v-model="sliderValue">
                </view>
                <div class="box" style="width: 80%;">
                    <span class="span" :style="{'marginLeft': spanML+'rem'}">{{span}}å¹´</span>
                    <div class="scales">
                        <view v-for="(item,index) in yearArr" @click="scaleClick(index)" class="scale"
                            :data-index="index"></view>
                    </div>
                    <div class="MX"></div>
                    <div class="cursor" :style="{'marginLeft': cursorML+'rem'}"></div>
                </div>
            </el-dialog>
        </view>
    </view>
@@ -44,23 +48,89 @@
    export default {
        data() {
            return {
                menuNav: true,
                menuNav: false,
                sliderValue: 2024,
                currentYear: 2024,
                sliderValue: 50
                sliderValue: 50,
                MX: document.querySelector(".MX"),
                box: document.querySelector(".box"),
                span: '',
                yearArr: [],
                yearIndex: 0,
                spanML: 0,
                cursorML: -.05
            }
        },

        mounted() {

            // æ—¶ç©ºåœ°å›¾
            loadBMap('5USVDAhhS4ssz44HLq3gNPZai7naXf4Q').then(() => {
                this.spaceTime()
            })
            this.$nextTick(() => {
                this.aaa()
            })
        },
        methods: {
            // è¿”回按钮
            getBack() {
                uni.navigateBack();
            },
            aaa() {
                // æ¸²æŸ“母线
                this.addArr()
            },
            addArr(start = 894, end = 900) {
                for (let i = start; i <= end; i++) {
                    this.yearArr.push(i)
                }
                this.span = this.yearArr[0]
                this.$nextTick(() => {
                    // this.creatMX(this.yearArr.length - 1)
                    // this.creatScale(this.yearArr)
                })
            },
            creatMX(len) {
                console.log(len);
                let width = len * 50 + 10
                // this.MX.style.width = `${width}px`
                // this.scales.style.width = `${width}px`
                // console.log(this.box.style.width);
            },
            creatScale() {
                // for (let i = 0; i < this.yearArr.length; i++) {
                //     let scale = document.createElement("div")
                //     scale.className = "scale"
                //     scale.setAttribute("index", i)
                //     scale.addEventListener("click", this.scaleClick)
                //     scales.appendChild(scale)
                // }
                // console.log(arr[0]);

            },

            handleSliderChange(value) {
                this.currentYear = value;
            },
            scaleClick(i) {
                // let i = Number(this.getAttribute("data-index"))
                console.log(i, this.cursorML);

                if (i > this.yearIndex) {

                    this.cursorML += (i - this.yearIndex + +('0.0' + this.yearIndex)) / 1.9
                    // this.spanML += 50 * (i - this.yearIndex)
                    console.log((i - this.yearIndex + 0.2), 'aaaa');

                } else {
                    this.cursorML -= (this.yearIndex - i) / 2 + 0.04
                    // this.spanML -= 50 * (this.yearIndex - i)
                    console.log(this.yearIndex, i, 'bbbb');
                }
                this.yearIndex = i
            },
            // ________________________
            // æ—¶ç©ºåœ°å›¾
            spaceTime() {
                var chartDom = document.getElementById('spaceTime');
@@ -100,7 +170,7 @@
                        value: 273
                    },
                    {
                        name: 'sss大庆',
                        name: '啊三大矿及说到底是封建士大夫大师傅就',
                        value: 279
                    }
                ];
@@ -132,7 +202,7 @@
                    èæ³½: [115.480656, 35.23375],
                    åˆè‚¥: [117.27, 31.86],
                    æ­¦æ±‰: ['你好', 30.52],
                    sss大庆: [125.03, 46.58]
                    å•Šä¸‰å¤§çŸ¿åŠè¯´åˆ°åº•æ˜¯å°å»ºå£«å¤§å¤«å¤§å¸ˆå‚…å°±: [125.03, 46.58]
                };
                const convertData = function(data) {
                    var res = [];
@@ -215,8 +285,7 @@
                            ]
                        }
                    },
                    series: [
                        {
                    series: [{
                            type: 'effectScatter',
                            coordinateSystem: 'bmap',
                            data: convertData(
@@ -243,8 +312,8 @@
                                padding: [4, 8],
                                formatter: function(params) { // ä½¿ç”¨å‡½æ•°åŠ¨æ€ç”Ÿæˆæ ‡ç­¾å†…容
                                // è®¾ç½®æ–‡å­—多少个后面显示省略号
                                  if (params.data.name.length > 3) {
                                    return params.data.name.substring(0, 3) + '...';
                                if (params.data.name.length > 6) {
                                    return params.data.name.substring(0, 6) + '...';
                                  } else {
                                    return params.data.name;
                                  }
@@ -261,29 +330,108 @@
                                scale: true
                            },
                            zlevel: 1
                        }
                    ]
                    }]
                };
                let menuNav1 = this.menuNav
                let menuNav2 = this.menuNav
                // è®¾ç½®ç‚¹å‡»äº‹ä»¶ç›‘听
                myChart.on('click', function(params) {
                myChart.on('click', (params) => {
                    // menuNav2 = !menuNav1
                    // console.log(menuNav);
                    if (params.componentType === 'series') {

                        var dataName = params.data.name; // èŽ·å–点击的数据名称
                        var dataValue = params.data.value; // èŽ·å–点击的数据值
                        // åœ¨è¿™é‡Œå¯ä»¥æ ¹æ®éœ€è¦å¤„理点击事件，比如弹出对应数据的详细信息等操作
                        console.log('点击了', dataName, '数据，数值为', dataValue);
                        // console.log('点击了', dataName, '数据，数值为', dataValue);
                        // è¿™é‡Œå¯ä»¥ç¼–写触发时间获取对应数据信息的逻辑
                        this.spaceTimeArr(params)
                    }
                })

                option && myChart.setOption(option);

            },

            // æ—¶ç©ºåœ°å›¾ç‚¹å‡»æ—¶èŽ·å–的数据
            spaceTimeArr(Arr) {
                // ä¿®æ”¹ Vue ç»„件的数据，例如显示菜单导航
                this.menuNav = !this.menuNav
                // æ—¶ç©ºåœ°å›¾çš„数据
                console.log(Arr);
            }
        }
    }
</script>

<style scoped>
    .getBack {
        position: fixed;
        width: .6rem;
        height: .24rem;
        top: 1rem;
        left: .24rem;
        z-index: 99999;
        font-size: .12rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2C2C2C;
        border-color: #9E9E9E;
        border-radius: 0;
        font-weight: 700;
    }

    .box {
        position: absolute;
        bottom: 10%;
        left: 50%;
        height: .3rem;
        transform: translate(-50%, -50%);
    }

    .MX {
        height: 20px;
        background-color: #ccc;
    }

    .scale {
        width: 3px;
        height: 50px;
        background-color: #ccc;
        cursor: pointer;
    }

    .scales {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .span {
        font-size: 25px;
        color: rgb(0, 68, 255);
        margin-left: -34px;
    }

    .cursor {
        position: relative;
        width: 25px;
        height: 30px;
        background-color: rgb(0, 68, 255);
        margin-top: 30px;
        margin-left: -12.5px;
    }

    .cursor:before {
        content: "";
        position: absolute;
        top: -20px;
        width: 0;
        height: 0;
        border-left: 13px solid transparent;
        border-right: 13px solid transparent;
        border-bottom: 20px solid rgb(0, 68, 255);
    }

    ::v-deep .particulars {
        position: absolute !important;
        top: 0;
@@ -314,5 +462,4 @@
        position: relative;
        height: 100%;
    }

</style>

 pages/characterRelation/characterRelation.vue

@@ -3,14 +3,13 @@
        <headNav />
        <!-- é«˜çº§æœç´¢ -->
        <view style="margin: .35rem 0 .16rem 0; ">
            <advancedSearch />
            <advancedSearch placehold="输入姓名/别名/朝代/传主职业搜索"/>
        </view>
        <!-- çƒ­é—¨æœç´¢ -->
        <view class="flex flex-center" style="font-size: .1rem;color: #2C2C2C;">
        <view class="flex flex-center hotSearch">
            çƒ­é—¨æœç´¢ï¼š
            <ul class="flex" style="margin-right: 10rpx;">
                <li v-for="item in hot" :key="item.id"
                    style="color: #244A7B; margin: 0 .1rem;color: #5879a4;font-size: .12rem;">
                <li v-for="item in hot" :key="item.id" style="">
                    {{item.name}}
                </li>
            </ul>
@@ -148,6 +147,27 @@
                    // å…¶ä»–关系...
                ];

                let FontSize = 12; // å­—体大小
                let BorderWidth = 2; // è¾¹æ¡†å¤§å°
                let SymbolSize = 80; // å°ºå¯¸è·ç¦»
                let Distance = 10
                // ä¸åŒå°ºå¯¸ä¸‹ä¿®æ”¹echarts的字体
                if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
                    FontSize = 28
                    BorderWidth = 5
                    SymbolSize = 100
                    Distance = 33
                } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
                    FontSize = 28
                    BorderWidth = 4
                    SymbolSize = 90
                    Distance = 22
                } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
                    FontSize = 18
                    BorderWidth = 4
                    SymbolSize = 70
                    Distance = 22
                }
                // æ ¹æ®å…³ç³»æ•°æ®ç”Ÿæˆè¿žæŽ¥çº¿
                var links = [];
                relationships.forEach(function(relationship) {
@@ -166,15 +186,15 @@
                                        .relation;
                                }, // è®¾ç½®å…³ç³»æ ‡ç­¾å†…容为"Child-Parent"
                                color: '#2C2C2C',
                                fontSize: 12,
                                fontSize: FontSize - 2,
                                backgroundColor: 'rgba(255, 255, 255, 1)',
                                padding: [3, 8],
                                borderRadius: 30,
                                position: 'middle', // è®¾ç½®æ ‡ç­¾æ–‡æœ¬åœ¨çº¿çš„中间位置上居中显示
                                bottom: -10,
                                // bottom: -(FontSize+10),
                                z: 10, // è®¾ç½®æ ‡ç­¾çš„z轴高度，使其比连接线更高
                                // offset: [0, 15] ,// å¾€ä¸‹ç§»åŠ¨ 10 åƒç´ 
                                distance: -12, // å°†æ ‡ç­¾æ”¾ç½®åœ¨è¿žæŽ¥çº¿ä¸Š
                                distance: -(Distance + 1), // å°†æ ‡ç­¾æ”¾ç½®åœ¨è¿žæŽ¥çº¿ä¸Š
                            }
                        });
                    }
@@ -189,7 +209,7 @@
                        y: Math.random() * 600, // è®¾ç½®éšæœºy坐标位置
                        itemStyle: {
                            color: getColorByIndex(index), // å¯ä»¥æ ¹æ®ç´¢å¼•è®¾ç½®ä¸åŒçš„颜色
                            borderWidth: 2,
                            borderWidth: BorderWidth,
                            borderColor: getColorByIndex(index + 1)
                        }
                    };
@@ -201,6 +221,19 @@
                }
                var option;
                option = {
                    title: {
                        // text: '书中最常提到的100位人物',
                        subtext: '书中最常提到的100位人物',
                        left: 'center',
                        top: FontSize + 10,
                        // textStyle: {
                        //     fontSize: FontSize // è®¾ç½®æ ‡é¢˜æ–‡å­—大小为 18px
                        // },
                        subtextStyle: {
                            fontSize: FontSize ,// è®¾ç½®å‰¯æ ‡é¢˜æ–‡å­—大小为 14px
                            color:'#2C2C2C'
                        }
                    },
                    backgroundColor: {
                        type: 'image',
                        image: '/static/image/characterRelationBg.png',
@@ -214,11 +247,11 @@
                    series: [{
                        type: 'graph',
                        layout: 'none',
                        symbolSize: 40, // è°ƒæ•´èŠ‚点大小
                        symbolSize: SymbolSize, // è°ƒæ•´èŠ‚点大小
                        label: {
                            show: true,
                            color: 'black', // è®¾ç½®èŠ‚点文字颜色为黑色

                            fontSize: FontSize, // è®¾ç½®æ–‡å­—大小
                        },
                        edgeSymbol: ['circle'],
                        edgeSymbolSize: [4, 10],
@@ -240,10 +273,40 @@
        mounted() {
            // å…³ç³»å›¾è°±
            this.relation()

            // ç›‘听窗口大小变化
            window.addEventListener('resize', this.relation);
        }
    }
</script>

<style>
    @media screen and (min-width:2560px)and (max-width:3840px) {}

    @media screen and (min-width:1366px) and (max-width:1920px) {}

    ::v-deep .uni-input-placeholder {
        line-height: 1;
        font-size: .12rem;
    }

    ::v-deep .ffff {
        border-radius: .5rem;
    }

    ::v-deep .widget_button {
        border-radius: .5rem;
        margin: .02rem;
    }

    .hotSearch {
        font-size: .12rem;
        color: #2C2C2C;

        li {
            color: #244A7B;
            margin: 0 .1rem;
            color: #244A7B;
        }
    }
</style>

 pages/dataDisplay/dataDisplay.vue

@@ -1,21 +1,22 @@
<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="" />
        <!-- é¡¶éƒ¨å¯¼èˆª -->
        <headNav :idIndex="idIndex" text="历代学术流派"/>
    <!-- å­¦æ´¾ -->
        <view class="flex flex-center" style="width: 100%; margin: .2rem 0;">
            <ul class="flex">
                <li style="" v-for="(item,index) in dynasty" :key="item.id">
                    <view @click="SchoolClick(item.id)" class="flex flex-center font-family school"
                        :style="{'marginRight': index === dynasty.length - 1 ? '0' : '0.03rem'}"
                        style="font-weight: 500; border-radius: .3rem; padding: .06rem .15rem; color: #2C2C2C; font-size: .12rem; margin-top: .03rem;margin-right: .1rem;background-color: #fff;">
                        <view class="" :style="{background:item.color}" style="margin-right: .07rem; width: .12rem;height: .12rem;border-radius: 50%;"></view>
                        <view class="" style="color: #2C2C2C;font-size: .12rem;">{{item.name}}</view>
            </view>
                </li>
            </ul>
        </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="">
            <view id="line-chart" style="width: 100vw;height: 500px;"></view>
        <view class="" style="background-color: #fff;">
            <view id="line-chart" style="width: 100vw;"></view>
        </view>
    </view>
</template>
@@ -26,6 +27,42 @@
    export default {
        data() {
            return {
                // æ ‡é¢˜é¡¶éƒ¨æ éœ€è¦çš„东西
                idIndex:0,
                // æœä»£
                dynasty: [{
                    name: '医经学派',
                    color: '#90BBD8',
                    id: 1
                }, {
                    name: '经方学派',
                    color: '#EDD28B',
                    id: 2
                }, {
                    name: '伤寒学派',
                    color: '#CF746D',
                    id: 3
                },{
                    name: '河间学派',
                    color: '#9CC27A',
                    id: 4
                }, {
                    name: '攻邪学派',
                    color: '#5B6CB9',
                    id:5
                }, {
                    name: '滋阴学派',
                    color: '#8860A8',
                    id: 6
                }, {
                    name: '易水学派',
                    color: '#DE8E66',
                    id: 7
                }, {
                    name: '温补学派',
                    color: '#7FAC8C',
                    id: 8
                }],
                chartData: [{
                    name: '你好',
                    values: [30, 10, 100, 400, 30, 70]
@@ -35,7 +72,18 @@
                }]
            }
        }, 
        onLoad(options) {
            this.idIndex = options.id
            console.log('optionsoptionsoptions',options.id);
        },
        methods: {
            // 
            SchoolClick(id){
                console.log(id);
                uni.navigateTo({
                    url:'/pages/interchannel/interchannel?id='+this.idIndex
                })
            },
            renderChart() {
                const chart = echarts.init(document.getElementById('line-chart'));
                const xAxisData = ['1950', '1955', '1960', '1965', '1970', '1975', '123'];
@@ -65,17 +113,39 @@
                });

                const option = {
                    legend: {
                        data: this.chartData.map(item => item.name),
                    },
                    // legend: {
                    //     data: this.chartData.map(item => item.name),
                    // },
                    zoom: 8,// è¿™é‡Œå¯ä»¥æ ¹æ®éœ€è¦è°ƒæ•´ç¼©æ”¾çº§åˆ«
					
                    xAxis: {
                        type: 'category',
                        data: xAxisData,
                        axisLabel: {
                              fontSize: 32 // è®¾ç½® x è½´ä¸Šæ–‡å­—的字体大小为 12 åƒç´ 
                            },
                             axisLine: {
                                  lineStyle: {
                                    width: 4 // è®¾ç½®x轴线条宽度为2像素
                                  }
                                }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                              fontSize: 32 // è®¾ç½® x è½´ä¸Šæ–‡å­—的字体大小为 12 åƒç´ 
                            },
                             axisLine: {
                                  lineStyle: {
                                    width: 10 // è®¾ç½®x轴线条宽度为2像素
                                  }
                                }
                    },
                    series: series,
                     // å…¶ä»–配置项...
                      textStyle: {
                        fontSize: 30 // è®¾ç½®å…¨å±€æ–‡å­—的字体大小
                      },
                };

                chart.setOption(option);
@@ -91,7 +161,9 @@
    view {
        color: #fff;
    }
    .school{

    }
    .bag {
        height: 100vh;
        background-color: #fff;
@@ -122,4 +194,7 @@
            vertical-align: top;
        }
    }
    #line-chart{
        height: 6rem;
    }
</style>

 pages/forgetPass/forgetPass.vue

@@ -21,15 +21,15 @@
                        è¿”回登录
                    </view>
                </view>
                <el-form :hide-required-asterisk="true" ref="formLogin2" label-position="left" 
                    :rules="rules" :model="resetDataPass">
                <el-form :hide-required-asterisk="true" ref="formLogin2" label-position="right" :rules="rules"
                    :model="resetDataPass">
                    <el-form-item label="手机/邮箱" prop="cellphoneORmailbox">
                        <el-input v-model="resetDataPass.cellphoneORmailbox"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="verifyCode">
                        <view class="verifyCode relative">
                            <el-input v-model="resetDataPass.verifyCode" ></el-input>
                            <view @click="verifyCodeClick" class=""
                            <view @click="verifyCodeClick" class="yzm"
                                style="position: absolute;right: 0%;top: 0%;color: #244A7B;font-size: .14rem;font-weight: 500;">
                                èŽ·å–验证码</view>
                        </view>
@@ -37,13 +37,13 @@
                    <el-form-item label="新密码" prop="pass">
                        <el-input v-model="resetDataPass.newPass"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                    <el-form-item label="确认新密码" prop="checkPass">
                        <el-input v-model="resetDataPass.checkPass"></el-input>
                    </el-form-item>
                    <el-form-item class="btn">
                        <el-button class="font-family"
                            style="margin-top: 30rpx; font-weight:900;font-size: 30rpx; width: 100%;background-color: #244a7b;color: #fff;padding: 30rpx;"
                            size="medium" @click="Login2('formLogin2')">确定</el-button>
                            size="medium" @click="Login2('formLogin2')">重置密码</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
@@ -305,7 +305,7 @@
<style scoped>
    /* 
    åœ¨å±å¹•å®½åº¦è¶…过 1440px æ—¶çš„样式设置 */
    @media screen and (min-width: 1441px) {
    /* @media screen and (min-width: 1441px) {
        ::v-deep .el-card {
            top: 60% !important;
        }
@@ -332,6 +332,84 @@
            height: 2.5rem !important;
        }
    }
     */
    @media screen and (min-width:2560px)and (max-width:3840px) {
        .LoginBg {
            margin: 0 !important;
            height: .3rem !important;
        }

        ::v-deep .el-card {
            top: 90% !important;
            padding: 0 !important;
        }

        ::v-deep .el-card__body {
            padding: .25rem .5rem !important;
        }

        ::v-deep .el-form {
            padding-left: .1rem !important;
        }

        ::v-deep .el-form-item__error {
            font-size: .13rem !important;
        }

        ::v-deep .el-input__inner {
            height: .35rem !important;
            font-size: .14rem;
        }

        ::v-deep .el-form-item__label {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-right: .2rem !important;
            width: .7rem;
        }

        .hua {
            height: 4rem !important;
        }

        .LoginTop {
            margin-bottom: .4rem !important;
        }

        .yzm {
            top: 15% !important;
        }

        .fff {
            width: 2.4rem !important;
            height: 4rem !important;
        }

        .rrr {
            width: 2rem !important;
        }

        .btn {
            margin-bottom: .1rem !important;
        }

        .btn ::v-deep .el-button {
            margin-top: 0.2rem !important;
            font-size: 0.2rem !important;
            width: 100%;
            padding: 0.12rem !important;

            span {
                font-weight: bold !important;
            }
        }

        .asdf {
            margin-bottom: .1rem !important;
        }

    }

    .LoginBg {
        width: 1.2rem;

 pages/index/index.vue

@@ -19,7 +19,7 @@
                </view>

                <!-- é«˜çº§æœç´¢ -->
                <view v-if="isSearchTrue" style="margin: .35rem 0 .16rem 0; height: .52rem;">
                <view v-if="isSearchTrue" class="Search" style="margin: .35rem 0 .16rem 0; height: .52rem;">
                    <advancedSearch @onSearch="onSearch" :isAvancedTrue="false" :isSearchTrue="false" />
                </view>
            </view>
@@ -36,6 +36,7 @@
                    </li>
                </ul>
            </view>
			
        </view>
        <view class="hua"></view>
        <!-- åº•éƒ¨äººç‰©èƒŒæ™¯å›¾å·¦ä¾§ -->
@@ -141,9 +142,9 @@
                    })
                } else if (item.id == 2) {
                    console.log(item.name);
                    // uni.navigateTo({
                    //     url:'/pages/repository/repository?id='+item.id
                    // })
                    uni.navigateTo({
                        url:'/pages/zhongyi/zhongyi?id='+item.id
                    })
                } else if (item.id == 3) {
                    uni.navigateTo({
                        url: '/pages/dataDisplay/dataDisplay?id=' + item.id
@@ -190,7 +191,7 @@
<style scoped>
    /*
    åœ¨å±å¹•å®½åº¦è¶…过 1440px æ—¶çš„样式设置 */
    @media screen and (min-width: 1441px) {
    /* @media screen and (min-width: 1441px) {
        ::v-deep .el-card {
            top: 60% !important;
        }
@@ -232,7 +233,157 @@
        .rrr {
            height: 2.5rem !important;
        }
    } */
@media screen and (min-width:2560px)and (max-width:3840px){
    .Ttop{
        margin-bottom: .7rem !important;
        margin-top: .3rem !important;
    }
    .login{
        width: .52rem !important;
        height: .52rem !important;
    }
    .LoginBg{
        margin: 0 !important;
        height: .3rem !important;
    }
	
    ::v-deep .Bbar img{
        width: .52rem !important;
        height: .52rem !important;
    }
	
    ::v-deep .el-card {
        top: 90% !important;
        padding: 0 !important;
    }
    ::v-deep .el-card__body{
        padding: .25rem .5rem !important;
    }
    .Search ::v-deep .flex-center{
        height: 80% !important;
    }
    ::v-deep .searchBg{
        width: .35rem;
        height: .35rem;
        margin-right: .03rem;
    }
    ::v-deep .ffff{
        border-radius: .3rem !important;
    }
    ::v-deep .searchBg{
            border-radius: inherit !important;
    }
    ::v-deep .uni-input-placeholder{
        font-size: .14rem;
            height: 100%;
            display: flex;
            align-content: center;
            align-items: center;
    }
    ::v-deep .el-form{
        padding-left: .1rem !important;
    }
    ::v-deep .el-form-item__error{
        font-size: .13rem !important;
    }
    ::v-deep .el-input__inner{
        height: .35rem !important;
        font-size: .14rem;
    }
    ::v-deep .el-form-item__label {
        display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-right: .2rem !important;
            width: .7rem;
    }
	
	
    .secretary li{
        width: 1.3rem !important;
        height: 4rem !important;
        span{
            width: .5rem !important;
            height: 70% !important;
            font-size: 0.25rem !important;
        }
    }
    .hua {
        height: 5rem !important;
    }
    .LoginTop{
        margin-bottom: .4rem !important;
    }
    .yzm{
        top: 15% !important;
    }
    .fff{
        width: 2.4rem !important;
    height: 4rem !important;
    }
    .rrr{
        width: 2rem !important;
    }
    .btn{
        margin-bottom: .1rem !important;
    }
    .btn ::v-deep .el-button {
        margin-top: 0.2rem !important;
        font-size: 0.2rem !important;
        width: 100%;
        padding: 0.12rem !important;
        span{
            font-weight: bold !important; 
        }
    }
    .asdf{
        margin-bottom:  .1rem !important;
    }
}
@media screen and (min-width:1366px) and (max-width:1920px){
    .Ttop{
        margin-bottom: .6rem !important;
    }
    ::v-deep .uni-input-placeholder{
        font-size: .14rem;
            height: 100%;
            display: flex;
            align-content: center;
            align-items: center;
    }
    .secretary li{
        width: 1.3rem !important;
        height: 4rem !important;
        span{
            width: .5rem !important;
            height: 70% !important;
            font-size: 0.25rem !important;
        }
    }
    /* é«˜çº§æœç´¢ */
    .Search ::v-deep .flex-center{
        height: 80% !important;
    }
    ::v-deep .searchBg{
        width: .35rem;
        height: .35rem;
        margin-right: .03rem;
    }
	
    .fff{
        width: 2.4rem !important;
    height: 4rem !important;
    }
    .rrr{
        width: 2rem !important;
    }
    .hua {
        height: 4rem !important;
    }
} 



    .btn>>>.el-form-item__content {
        margin-left: 0 !important;
@@ -324,11 +475,11 @@
    }

    .login {
        width: 102rpx;
        height: 102rpx;
        width: .52rem;
        height: .52rem;
        display: inline-block;
        vertical-align: middle;
        margin-right: 20rpx;
        margin-right: .2rem;
        background: url(@/static/image/logo.png) no-repeat 0 0;
        background-size: 100% 100%;
    }

 pages/interchannel/interchannel.vue

@@ -1,24 +1,17 @@
<template>
    <view class="bag ">
        <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>
    <!-- é¡¶éƒ¨å¯¼èˆª -->
    <headNav  :idIndex="idIndex" text="历代学术流派"/>
        <view class="Midde flex">
            <view class="MiddeBack">返回</view>
            <!-- <view class="MiddeBack">返回</view> -->
            <el-button class="MiddeBack flex flex-center" @click="goBack">返回</el-button>
            <view class="flex flex-center flex-column">
                <view class="" style="font-weight: 900;margin-bottom:20rpx ;">河间图谱</view>
                <view class="" style="font-weight: 900;margin-bottom:.2rem ;font-size: .26rem;line-height: 1;">河间图谱
                </view>
                <ul class="flex Lists">
                    <li v-for="item in secretary "
                        :style="{background:item.istrue?'#5879a4':'#e5ecf4',color:item.istrue?'#fff':'#889fbd'}"
                        class="flex" @click="ListClick(item.id)">
                        {{item.name}}
                    </li>
                    <li style="background-color: #597AA5;color: #fff;">学派介绍</li>
                    <!-- /pages/AcademicHistory/AcademicHistory -->
                    <li @click="ListClick" style="background-color: #fff;color: #597AA5;" >学派图谱</li>
                </ul>
            </view>
            <view class=""></view>
@@ -42,13 +35,14 @@
            <view class="Bottom_Bot" style="color: #d1d1d1    ;">
                <view class="">
                    <!-- <csr-tab :tabList="tabList" :value="0"></csr-tab> -->
                    <csr-tab :value.sync="swiperIndex" :tabList="tabSwiperList"></csr-tab>
                    <view class="flex flex-center csrTab1">
                        <csr-tab class="csrTab" :value.sync="swiperIndex" :tabList="tabSwiperList"></csr-tab>
                    </view>
                    <swiper :current="swiperIndex" duration="300" :circular="true" indicator-color="rgba(255,255,255,0)"
                        indicator-active-color="rgba(255,255,255,0)" class="Swiper">
                        <!-- @change="swiperChange" -->
                        <swiper-item  v-for="(swiper,index) in tabSwiperList" :key="index">
                            <view class="swiperList"
                                style="background-color: #FFFFFF;text-align: left;color: #000;">
                            <view class="swiperList" style="background-color: #FFFFFF;text-align: left;color: #000;">
                                {{swiper.content}}
                            </view>
                        </swiper-item>
@@ -65,6 +59,8 @@
    export default {
        data() {
            return {
                // æ ‡é¢˜é¡¶éƒ¨æ éœ€è¦çš„东西
                idIndex:0,
                swiperIndex: 0,
                tabSwiperList: [{
                    TabControl: `标题1`,
@@ -90,14 +86,6 @@
                    id: 2,
                    name: '幅度s萨芬',
                    istrue: false
                }, {
                    id: 3,
                    name: '幅度s萨芬',
                    istrue: false
                }, {
                    id: 4,
                    name: '幅度s萨芬',
                    istrue: false
                }],
                tabList: [{
                    name: '士大夫',
@@ -108,9 +96,22 @@
                }, ]
            }
        },
        methods: {
        onLoad(options) {
            this.idIndex = options.id
            console.log('optionsoptionsoptions',options.id);
        },
        methods: { // è¿”回上一页
            goBack() {
                // uuni.redirectTo();
                uni.redirectTo({
                    url: '/pages/index/index'
                })
            },
            ListClick(event) {
                console.log(event);
                uni.navigateTo({
                    url: '/pages/AcademicHistory/AcademicHistory?id='+this.idIndex
                })
                this.secretary.forEach(item => {
                    if (item.id === event) {
                        item.istrue = true;
@@ -128,6 +129,9 @@
</script>

<style scoped>
    * {
        box-sizing: border-box;
    }

    view {
        color: #fff;
@@ -156,39 +160,69 @@
    }

    .Midde {
        background-color: #d1d6dc;
        /* background-color: #d1d6dc; */
        background-image: url(@/static/image/学派Bg.png);
        background-size: 100% 100%;
        color: #000;
        padding: 40rpx;
        padding: .18rem .23rem 0;
        align-items: flex-start;
        height: 1.43rem;

        view {

            color: #000;
        }

        .MiddeBack {
            width: 0.6rem;
            height: 0.24rem;
            font-size: .12rem;
            padding: 0;

        }

        .Lists {
            li {
                background-color: #e4ebf3;
                /* background-color: #e4ebf3;
                border: 1rpx solid #5778a2;
                padding: 5rpx 10rpx;
                font-size: 18rpx;
                font-size: 18rpx; */
                width: 0.96rem;
                height: .3rem;
                border: 1px solid #597AA5;
                line-height: .3rem;
                text-align: center;
                font-size: .14rem;
            }
        }
    }

    .Bottom {
        padding: 40rpx;
        padding: .39rem 1.21rem !important;

        .Bottom_top {
            justify-content: flex-start;
            align-items: flex-end;
            /* align-items: flex-end; */
            align-items: flex-start;
            padding: 0 1.59rem;

            .BBimage {
                width: 4.05rem;
                height: 1.93rem;
                margin-right: .49rem;
            }

            .author {
                color: #000;
                padding-left: 100rpx;
                /* padding-left: 100rpx; */

                li {
                    padding: 5rpx 0;
                    /* padding: 5rpx 0;
                     */
                    line-height: .22rem;
                    font-size: .14rem;
                    margin-top: .05rem;
                    color: #2C2C2C;
                }
            }
        }
@@ -207,10 +241,63 @@

    }

    .Swiper {}
    .Bottom_Bot {
        margin-top: .39rem;
    }

    .csrTab1 {
        border-bottom: 2px solid #9E9E9E;
        margin-bottom: .3rem;
    }

    .csrTab {
        width: 40%;
        height: .4rem;
        /* line-height: .3rem; */
        font-size: .14rem;
        display: flex;

    }

    .Swiper {
        padding: 0 1.25rem;
        height: 2rem;

    }

    .csrTab ::v-deep .uni-tab-bar {
        border: 0 !important;
        height: .02rem;
        background-color:#597AA5;
    }

    .csrTab ::v-deep .uni-tab-item {
        color: #9E9E9E !important;
        font-weight: 700;
        height: .4rem;
    }

    .csrTab ::v-deep .uni-tab-active {
        color: #597AA5 !important;
    }

    .swiperList {
        /* flex: 1; */
        /* min-height: 500rpx; */
        line-height: .28rem;
        font-size: .14rem;
        color: #2C2C2C;
    }
@media screen and (min-width:2560px)and (max-width:3840px){
    /* .csrTab ::v-deep .uni-tab-bar {
        border: 0.015rem solid #597AA5 !important;
    } */
}
	
    @media screen and (min-width:1366px) and (max-width:1920px){
    /*     .csrTab ::v-deep .uni-tab-bar {
            border: 0 !important;
            height: .02rem;
            background-color:#597AA5;
			
        } */
    }
</style>

 pages/knowledgeBase/knowledgeBase.vue

@@ -1,15 +1,15 @@
<template>
    <view>
        <!-- é¡¶éƒ¨ -->
        <headNav />
        <headNav text="中国医学人物知识库"/>
        <!-- æœç´¢ -->
        <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 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" style="font-size: 20rpx;margin: 10rpx 0;">
        <view class="flex flex-center hotSearch" style="font-size: 20rpx;margin: 10rpx 0;">
            çƒ­é—¨æœç´¢ï¼š
            <ul class="flex" style="margin-right: 10rpx;">
                <!-- 
@@ -17,23 +17,23 @@
                     :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;">
                <li v-for="item in hot" :key="item.id" style="color: #5879a4;">
                    {{item.name}}
                </li>
            </ul>
        </view>
        <!-- é«˜çº§æœç´¢ -->
        <view class="" v-if="isAdvancedSearch" style="padding: 0 230rpx; margin-bottom: 10rpx;">
            <view style="background-color: #fff;padding: 20rpx;" class="">
        <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 flex flex-items-start" style="padding: 0 230rpx; ">
        <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 dark box"
                    style="margin-bottom: 40rpx;background-color: #fff; padding: 20rpx;border: 2rpx solid #e0e0e0;">
                <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; -->
@@ -44,15 +44,16 @@
                            <view class="">{{item.number}}</view>
                        </li>
                    </ul>
                    <view class="flex flex-center">
                        <view class="toggleButton" style="font-size: 25rpx;color: #C1D3EA;" @click="shrinkClick('a')">
                    <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"
                    style="background-color: #fff;padding: 20rpx;border: 2rpx solid #e0e0e0;" :style="{'marginBottom': isAdvancedSearch ===true ? '0': '40rpx'}">
                <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; -->
@@ -63,20 +64,20 @@
                            <view class="">{{item.number}}</view>
                        </li>
                    </ul>
                    <view class="flex flex-center">
                        <view class="toggleButton" style="font-size: 25rpx;color: #C1D3EA;" @click="shrinkClick('b')">
                    <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"
                    style="height: 250rpx;background-color: #fff;padding: 20rpx;border: 2rpx solid #e0e0e0;">
                <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 style="margin-top: 10rpx;" :class="{ 'b': activeBox === 'b'?'b':'' }">
                    <ul class="laiyuan" 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;">
                        <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>
@@ -87,21 +88,21 @@
                    </view> -->
                </view>
            </uni-col>
            <uni-col :span="19" style="padding-left: 20rpx; ">
            <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" style="margin:10rpx 0">
                    <view class="flex lightTop" style="margin:10rpx 0">
                        <view class="" style="color: #2C2C2C;">共1374条</view>
                        <el-button size="mini">下载</el-button>
                        <el-button>下载</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 :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="性别"></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="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>
@@ -109,6 +110,7 @@
                </view>
            </uni-col>
        </uni-row>
        <div class="abox"></div>
        <Footer1 />
    </view>
</template>
@@ -134,6 +136,39 @@
                            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: '',
@@ -150,34 +185,15 @@
                        },
                        {
                            type: 'input',
                            label: '联系',
                            name: 'phone',
                            label: '时期',
                            name: 'time',
                            value: ''
                        },
                        {
                            type: 'input',
                            label: '证件',
                            name: 'idNumber',
                            label: '机构',
                            name: 'institution',
                            value: ''
                        },
                        {
                            type: 'select',
                            label: '状态',
                            name: 'state',
                            value: '',
                            options: [{
                                    label: '未申请',
                                    value: '未申请'
                                },
                                {
                                    label: '已申请',
                                    value: '已申请'
                                },
                                {
                                    label: '已删除',
                                    value: '已删除'
                                }
                            ]
                        }
                    ]
                },
@@ -223,7 +239,7 @@
                activeBox: null,
                // ä¸–代
                dynasty: {
                    title: '世代',
                    title: '时期',
                    index: 0,
                    list: [{
                            name: '全部',
@@ -348,12 +364,403 @@
</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: 200px;
        height: 2rem;
    }

    .b {
@@ -368,6 +775,14 @@

    }

    .boox {
        padding: .1rem .09rem;

        h3 {
            font-size: .14rem;
        }
    }

    ::v-deep .el-table th,
    ::v-deep .el-table td {
        text-align: center;

 pages/repository/repository.vue

@@ -1,8 +1,8 @@
<template>
    <view class="relative">
        <headNav />
        <headNav :idIndex="idIndex" text="中医人物数据库" />
        <view class="Midde flex">
            <el-button class="MiddeBack" size="mini" @click="goBack">返回</el-button>
            <el-button class="MiddeBack flex flex-center" @click="goBack">返回</el-button>
            <view style="width: 70%;" class="flex flex-center flex-column">
                <view class="" style="font-weight: bold;font-size: .20rem;">李时珍</view>
                <ul class="flex" style="line-height: 1.2;margin: .15rem 0 ;">
@@ -18,30 +18,35 @@
                <view class="flex" style="width: 100%;margin: .25rem 0 .15rem 0;">
                    <view class="">
                        <!-- <el-button style="padding: 10rpx;" size="mini" icon="el-icon-folder-add">收藏</el-button> -->
                        <el-button style="padding: .05rem .085rem;" size="mini" icon="el-icon-set-up">引用</el-button>
                        <el-button style="padding: .05rem .085rem;" class="yinyong flex">
                            <img src="@/static/image/yinyong.png" alt="" />引用</el-button>
                    </view>
                    <view class="" style="font-size: .12rem;color: #244A7B;">阅读更多></view>
                    <view class="" style="font-size: .12rem;color: #244A7B;" @click="ProfileClick">阅读更多></view>
                </view>
            </view>
            <view class="" style="width: 5%;"></view>
        </view>
        <el-row style="padding: 0 1.2rem 0;padding-top: .24rem;">
            <!-- å·¦ä¾§ -->
            <el-col :span="5" style="padding-right: .2rem;width: 2.8rem;">
            <el-col :span="5" class="BoxLeft" style="padding-right: .2rem;width: 2.8rem;">
                <div class="grid-content bg-purple-dark flex flex-column">
                    <el-card class="box-card" style="width: 100%;height: 2.06rem;">
                        <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                            <span style="margin-left: .12rem;">关系图谱</span>
                            <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text"></el-button>
                        <div class="clearfix flex" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                            <span style="margin-left: .12rem;font-size: .14rem;font-weight: 900;">关系图谱</span>
                            <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0;" type="text"></el-button> -->
                            <img src="@/static/image/fangda.png" @click="fangdaClick(1)"
                                style="width: .18rem;height: .18rem;" alt="" />
                        </div>
                        <view id="relation" style="height: 1.51rem;width: 100%;"></view>
                    </el-card>
                    <el-card class="box-card" style="width: 100%;height: 2.06rem; margin: .26rem 0;">
                        <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                        <div class="clearfix flex" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                            <span>时空地铁</span>
                            <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text"></el-button>
                            <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text"></el-button> -->
                            <img src="@/static/image/fangda.png" @click="fangdaClick(2)"
                                style="width: .18rem;height: .18rem;" alt="" />
                        </div>
                        <view id="spaceTime" style="height: 300rpx;width: 100%;position: relative;"></view>
                        <view id="spaceTime" style="height: 1.51rem;width: 100%;position: relative;"></view>
                    </el-card>
                    <el-card style="width: 100%;height: 2.06rem;">
                        <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
@@ -64,7 +69,7 @@
                        <!-- åŸºç¡€ä¿¡æ¯  -->
                        <cc-defineTable :tableData="tableArr"></cc-defineTable>
                    </el-card>
                    <el-card class="box-card" style=" min-height: 1.91rem; margin: 20rpx 0;">
                    <el-card class="box-card" style=" min-height: 1.91rem; margin: .2rem 0;">
                        <el-tabs ref="tabs" v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="代表著作" data-id="1" name="representative">
                                <Table1 :data="tableData" :columns="tableColumns" />
@@ -92,7 +97,7 @@
                        <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                            <span>相关附表/图像</span>
                        </div>
                        <ul class="font-family" style="font-size: .12rem;line-height: 2;">
                        <ul class="font-family" style="font-size: .13rem;line-height: 2;">
                            <li>
                                [1|刘炜,谢蓉,张磊,等.向人文研究的国家数据基础设施建设[J|.中国图书馆学报,2016,42(5):29-39.
                            </li>
@@ -120,7 +125,8 @@
                ä¸ªäººå°ä¼ 
            </view>
            <view class="" style="padding: .44rem .3rem;min-height: 7.32rem;"  >
                <view class="" style="margin-bottom: .2rem; background-color: #F0F0F0;padding: .18rem .1rem .1rem .27rem;font-size: .12rem;line-height: .24rem;font-weight: 400;">
                <view class=""
                    style="margin-bottom: .2rem; background-color: #F0F0F0;padding: .18rem .1rem .1rem .27rem;font-size: .12rem;line-height: .24rem;font-weight: 400;">
                    <view class="" style="color: #2C2C2C;">
                        è•™å±•ä¸ä¸‘同里日岩额序先考月池翁著《四彭酸明》八卷，皆精指奥室，茂犀未能疯造，珍因撮粹想菜，僵撰此唐，以便智睛，服指南。世之雷病雨家，咸以服焉首务，不知派乃四能之末，谓之巧者雨。上士欲舍其全，非四不可。
                    </view>
@@ -135,8 +141,9 @@


        <!-- è¿”回顶部 -->
        <el-col style="position: absolute;bottom: 1.44rem;left:1.20rem ;">
            <el-button icon="el-icon-download" circle @click="scrollToTop"></el-button>
        <el-col style="position: absolute;bottom: 1rem;left:1.2rem ;">
            <el-button style="width: .4935rem;height: .4935rem;font-size: .3rem;" icon="el-icon-download" circle
                @click="scrollToTop"></el-button>
        </el-col>
    </view>
</template>
@@ -154,7 +161,11 @@
        },
        data() {
            return {
                isProfile: true,
                // æ ‡é¢˜é¡¶éƒ¨æ éœ€è¦çš„东西
                idIndex: 0,
                // -------
                // å°ä¼ 
                isProfile: false,
                // å…³ç³»å›¾è°±
                activeName: 'representative',
                // åŸºç¡€ä¿¡æ¯
@@ -246,6 +257,10 @@
                }]
            }
        },
        onLoad(options) {
            this.idIndex = options.id
            console.log('optionsoptionsoptions', options.id);
        },
        mounted() {

            // å…³ç³»å›¾è°±
@@ -257,11 +272,34 @@
            this.$nextTick(() => {
                // èŽ·å–第一个选项卡的 DOM å…ƒç´ 
                const firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar');
                firstTab.style.transform = 'translateX(' + '-20px' + ')'
                firstTab.style.transform = 'translateX(' + '-.2rem' + ')'
                console.log(firstTab);
            });


            // ç›‘听窗口大小变化
            window.addEventListener('resize', this.relation);
        },
        methods: {
            // æ”¾å¤§åœ°å›¾è·³è½¬
            fangdaClick(index) {
                console.log(index);
                if (index == 1) {
                    console.log('跳转关系地图');
                    uni.navigateTo({
                        url: '/pages/characterRelation/characterRelation'
                    })
                } else if (index == 2) {
                    uni.navigateTo({
                        url: '/pages/characterMap/characterMap'
                    })
                    console.log('跳转时空地图');
                }
            },
            // å°ä¼ 
            ProfileClick() {
                this.isProfile = !this.isProfile
            },
            // è¿”回上一页
            goBack() {
                uni.navigateBack();
@@ -277,12 +315,21 @@
            handleClick(tab) {
                let index = tab.$attrs['data-id'] - 1
                this.$nextTick(() => {
                    if (index != 0) {
                        let firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar');
                        firstTab.style.transform = 'translateX(' + 100 * index + 'px)'
                    if (index == 0) {
                        console.log('sss');
                        firstTab.style.transform = 'translateX(-' + .2 + 'rem)'
                    } else if (index == 1) {
                        firstTab.style.transform = 'translateX(' + .85 * index + 'rem)'
                    } else if (index == 2) {
                        firstTab.style.transform = 'translateX(' + .93 * index + 'rem)'
                    } else if (index == 3) {
                        firstTab.style.transform = 'translateX(' + .95 * index + 'rem)'
                    } else if (index == 4) {
                        firstTab.style.transform = 'translateX(' + .97 * index + 'rem)'
                    } else {
                        let firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar');
                        firstTab.style.transform = 'translateX(' + '-20' + 'px)'
                        firstTab.style.transform = 'translateX(' + '-.2' + 'rem)'
                    }
                    // console.log(firstTab);
                })
@@ -291,6 +338,7 @@
            relation() {
                var chartDom = document.getElementById('relation');
                var myChart = echarts.init(chartDom);

                // å‡è®¾æ‚¨æœ‰èŠ‚点名称和它们之间的关系数据
                var nodes = ['李时珍', '成就', '传承', '亲友', '著作'];
                var relationships = [{
@@ -326,6 +374,23 @@

                });
                console.log(links);
                let FontSize = 12; // å­—体大小
                let BorderWidth = 2; // è¾¹æ¡†å¤§å°
                let SymbolSize = 80; // å°ºå¯¸è·ç¦»
                // ä¸åŒå°ºå¯¸ä¸‹ä¿®æ”¹echarts的字体
                if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
                    FontSize = 28
                    BorderWidth = 5
                    SymbolSize = 100
                } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
                    FontSize = 28
                    BorderWidth = 4
                    SymbolSize = 90
                } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
                    FontSize = 18
                    BorderWidth = 4
                    SymbolSize = 70
                }
                // æ ¹æ®nodes动态生成节点数据
                var nodeData = nodes.map(function(node, index) {
                    return {
@@ -333,7 +398,9 @@
                        x: Math.random() * 1000, // è®¾ç½®éšæœºx坐标位置
                        y: Math.random() * 600, // è®¾ç½®éšæœºy坐标位置
                        itemStyle: {
                            color: getColorByIndex(index) // å¯ä»¥æ ¹æ®ç´¢å¼•è®¾ç½®ä¸åŒçš„颜色
                            color: getColorByIndex(index), // å¯ä»¥æ ¹æ®ç´¢å¼•è®¾ç½®ä¸åŒçš„颜色
                            borderWidth: BorderWidth,
                            borderColor: getColorByIndex(index + 1),
                        }
                    };
                });
@@ -342,6 +409,7 @@
                    var colors = ['#ecf4ff', '#dd9795', '#f1edbe', '#ecf4ff', '#c5dbd8']; // å¯ä»¥æ ¹æ®å®žé™…情况设置颜色数组
                    return colors[index % colors.length];
                }

                var option;
                option = {
                    tooltip: {},
@@ -350,15 +418,16 @@
                    series: [{
                        type: 'graph',
                        layout: 'none',
                        symbolSize: 40, // è°ƒæ•´èŠ‚点大小
                        symbolSize: SymbolSize, // è°ƒæ•´èŠ‚点大小
                        label: {
                            show: true,
                            color: 'black' // è®¾ç½®èŠ‚点文字颜色为黑色
                            color: 'black', // è®¾ç½®èŠ‚点文字颜色为黑色
                            fontSize: FontSize, // è®¾ç½®æ–‡å­—大小
                        },
                        edgeSymbol: ['circle'],
                        edgeSymbolSize: [4, 10],
                        edgeLabel: {
                            fontSize: 20
                            fontSize: 40
                        },
                        data: nodeData,
                        links: [{
@@ -626,6 +695,35 @@
</script>

<style>
    /* Table1表格里面的数据 */
    ::v-deep .is-leaf {
        .cell {
            font-size: .14rem !important;
            height: .4rem !important;
            line-height: .4rem !important;
        }
    }

    ::v-deep .el-table__body {
        .cell {
            font-size: .14rem !important;
            height: .4rem !important;
            line-height: .4rem !important;
        }
    }

    /* --------------- */
    @media screen and (min-width:2560px)and (max-width:3840px) {}

    .BoxLeft ::v-deep.el-card__body {
        padding: .1rem .11rem !important;
    }

    ::v-deep .el-tabs__content {
        line-height: 1;
    }


    /* ä¸ªäººå°ä¼  ------------------*/
    ::v-deep .el-dialog__header {
        display: none;
@@ -634,6 +732,7 @@
    ::v-deep .el-dialog__body {
        padding: 0;
    }

    ::v-deep .el-dialog__wrapper{
        z-index: 999999999999999 !important;
    }
@@ -690,9 +789,8 @@
    .Midde {
        background-color: #dbeafd;
        color: #000;
        /* padding: 5rpx 40rpx 0; */
        padding: .24rem .18rem;
        align-items: flex-start;
        padding: .18rem .24rem ;

        view {
            color: #000;
@@ -701,9 +799,26 @@
        .MiddeBack {
            width: 0.6rem;
            height: 0.24rem;
            font-size: .12rem;
            padding: 0;
            border: 1px solid  #9E9E9E;
        }
    }

    .yinyong {
        font-size: .12rem;

        img {
            width: .12rem;
            height: .1rem;
            vertical-align: top;
            margin-right: .03rem;
        }
    }

    .el-dialog__wrapper {
        background: rgba(0, 0, 0, .3);
    }

    .fz {
        /* line-height: 1.3;
@@ -734,7 +849,7 @@
    }

    ::v-deep .el-tabs__nav {
        margin-bottom: .2rem !important;
        margin-bottom: .1rem !important;

    }

@@ -746,8 +861,8 @@
    ::v-deep .el-tabs__item {
        width: 1rem;
        font-size: .14rem;
        line-height: 40rpx;
        height: 40rpx;
        line-height: .4rem;
        height: .4rem;
    }

    ::v-deep .el-tabs__header {
@@ -764,7 +879,7 @@
    }

    ::v-deep .el-tabs__active-bar {
        top: .3rem !important;
        top: .37rem !important;
    }

    ::v-deep .el-table::before {
@@ -773,6 +888,7 @@

    .BoxRight ::v-deep.el-card__body {
        padding: .2rem .14rem !important;

    }

    .BoxRight .box-card {

 pages/territory/territory.vue

@@ -1,8 +1,37 @@
<template>
    <view>
        <!-- é¡¶éƒ¨å¯¼èˆª -->
        <headNav />
        <view id="main" style="width: 100vw;height: 1000rpx;position: relative;"></view>
        <headNav :idIndex="idIndex" text="中医地域医谱"/>
        <view class="flex flex-center" style="width: 100%; margin: .2rem 0 .34rem;justify-content: flex-start;">
            <advancedSearch class="Search" placehold="输入姓名/别名/朝代/传主职业搜索" @onSearch="onSearch" :isAvancedTrue="false" />
            <ul class="flex">
                <li style="" v-for="(item,index) in dynasty" :key="item.id">
                    <view @click="SchoolClick(item.id)" class="flex flex-center font-family school"
                        :style="{'marginRight': index === dynasty.length - 1 ? '0' : '0.03rem'}"
                        style="font-weight: 500; border-radius: .3rem; padding: .06rem .15rem; color: #2C2C2C; font-size: .12rem; margin-top: .03rem;margin-right: .1rem;background-color: #fff;">
                        <view class="" :style="{background:item.color}"
                            style="margin-right: .07rem; width: .12rem;height: .12rem;border-radius: 50%;"></view>
                        <view class="" style="color: #2C2C2C;font-size: .12rem;">{{item.name}}</view>
                    </view>
                </li>
            </ul>
        </view>
        <view id="main" style="width: 100vw;position: relative;"></view>
        <!-- æœä»£ -->
        <view class="flex flex-center" style="width: 100%; position: fixed;bottom: .33rem;left: 0;">
            <ul class="flex">
                <li @click="dynastyBottomClick(item.id)" v-for="(item,index) in dynasty1" :key="item.id">
                    <view class="flex flex-center" style="height: .35rem; background-color: #fff; color:#244A7B ;">
                        {{item.coord}}
                    </view>
                    <view class="flex flex-center font-family"
                        style="padding: .05rem .19rem; height: .3rem;line-height: .3rem; color: #fff; font-size: .14rem; margin-top: .03rem;margin-right: .03rem;background-color: #597AA5;"
                        :style="{'marginRight': index === dynasty1.length - 1 ? '0' : '0.03rem','background':dynasty1Color==item.id?'#244A7B':'#597AA5'}">
                        {{item.name}}
                    </view>
                </li>
            </ul>
        </view>
    </view>
</template>
<!-- <script src="https://api.map.baidu.com/api?v=3.0&ak=5USVDAhhS4ssz44HLq3gNPZai7naXf4Q&callback=initializeMap"></script> -->
@@ -16,11 +45,108 @@
    export default {
        data() {
            return {
				
                // ä¸‹é¢çš„朝代1 
                dynasty1Color:1,
                dynasty1: [{
                    name: '夏朝',
                    coord: '2070BC',
                    id: 1
                }, {
                    name: '商朝',
                    id: 2,
                    coord: '1600BC',
                }, {
                    name: '西周',
                    id: 3,
                    coord: '1600BC'
                }, {
                    name: '春秋战国',
                    id: 4,
                    coord: '770BC'
                }, {
                    name: '秦朝',
                    id: 5,
                    coord: '221BC'
                }, {
                    name: '汉朝',
                    id: 6,
                    coord: '202BC'
                }, {
                    name: '三国两晋南北朝',
                    id: 7,
                    coord: '184'
                }, {
                    name: '隋朝',
                    id: 8,
                    coord: '581'
                }, {
                    name: '唐朝',
                    id: 9,
                    coord: '618'
                }, {
                    name: '五代十国',
                    id: 10,
                    coord: '907'
                }, {
                    name: '辽夏金',
                    id: 11,
                    coord: '907'
                }, {
                    name: '宋朝',
                    id: 12,
                    coord: '960'
                }, {
                    name: '元朝',
                    id: 13,
                    coord: '1271'
                }, {
                    name: '明朝',
                    id: 14,
                    coord: '1368'
                }, {
                    name: '清朝',
                    id: 15,
                    coord: '1636'
                }],
                // æ ‡é¢˜é¡¶éƒ¨æ éœ€è¦çš„东西
                idIndex: 0,
                // æœä»£
                dynasty: [{
                    name: '夏朝',
                    color: '#90BBD8',
                    id: 1
                }, {
                    name: '商朝',
                    color: '#EDD28B',
                    id: 2
                }, {
                    name: '西周',
                    color: '#CF746D',
                    id: 3
                }, {
                    name: '秦朝',
                    color: '#9CC27A',
                    id: 4
                }, {
                    name: '汉朝',
                    color: '#5B6CB9',
                    id: 5
                }, {
                    name: '隋朝',
                    color: '#8860A8',
                    id: 6
                }, {
                    name: '唐朝',
                    color: '#DE8E66',
                    id: 7
                }],
                
            }
        },

        onLoad(options) {
            this.idIndex = options.id
            console.log('optionsoptionsoptions', options.id);
        },
        mounted() {
            console.log('ss');
            // this.$nextTick(() => {
@@ -30,6 +156,14 @@
            // })
        },
        methods: {
            // ç‚¹å‡»ä¸‹é¢çš„朝代按钮
            dynastyBottomClick(id) {
                console.log(id);
                this.dynasty1Color= id
            },
            onSearch(val) {
                console.log(val);
            },
            innt() {
                this.$nextTick(() => {

@@ -1010,16 +1144,16 @@
                            // sublink: 'http://www.pm25.in',
                            left: 'center'
                        },
                        legend: {
                            icon: 'image://https://img2.baidu.com/it/u=2771395776,2060749722&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710694800&t=c85f997454c2a2b3f2e7919ba9c194a3'
                        },
                        // legend: {
                        //     icon: 'image://https://img2.baidu.com/it/u=2771395776,2060749722&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710694800&t=c85f997454c2a2b3f2e7919ba9c194a3'
                        // },
                        // color:['#000'],
                        tooltip: {
                            trigger: 'item'
                        },
                        bmap: {
                            center: [104.114129, 37.550339],
                            zoom: 5,
                            // center: [104.114129, 37.550339],
                            zoom: 4, // è¿™é‡Œå¯ä»¥æ ¹æ®éœ€è¦è°ƒæ•´ç¼©æ”¾çº§åˆ«
                            roam: true,
                            mapStyle: {
                                styleJson: [{
@@ -1211,4 +1345,84 @@
        box-sizing: border-box;
    }

    /* åœ°å›¾ä¸Šçš„左下角 */
    ::v-deep .anchorBL {
        display: none;
    }

    @media screen and (min-width:2560px)and (max-width:3840px) {
        .Search {
            /* width: 30%; */
            justify-content: flex-end;
            margin-right: .26rem;
            width: 4rem;
        }

        .Search ::v-deep .ffff {
            width: 3rem;
            height: .36rem;
            padding: .01rem;
            border-radius: .3rem !important;
        }

        .Search ::v-deep .widget_button {
            width: 1rem;
            /* height: .3rem; */
            font-size: .14rem;
            padding: 0;
            border-radius: .3rem !important;
        }

        .Search ::v-deep .widget_style {
            display: flex;
            justify-content: flex-end;
        }

        .Search ::v-deep .uni-input-placeholder {
            font-size: .13rem;
            /* height: 100%; */
            line-height: 1;
        }

        .Search ::v-deep .uni-input-input {
            margin-left: .19rem;
        }
    }

    #main {
        height: 6.2rem;
    }

    .Search {
        /* width: 30%; */
        justify-content: flex-end;
        margin-right: .26rem;
        width: 4rem;
    }

    .Search ::v-deep .ffff {
        width: 3rem;
        height: .36rem;
        padding: .01rem;
    }

    .Search ::v-deep .widget_button {
        width: 1rem;
        /* height: .3rem; */
        font-size: .14rem;
        padding: 0;
        background-color: #597AA5;
    }

    .Search ::v-deep .widget_style {
        display: flex;
        justify-content: flex-end;
    }

    .Search ::v-deep .uni-input-placeholder {
        font-size: .13rem;
        /* height: 100%; */
        line-height: 1;
        margin-left: .19rem;
    }
</style>

 pages/zhongyi/zhongyi.vue

@@ -1,139 +1,647 @@
<template>
    <el-container>
        <!-- å¤´éƒ¨ -->
        <el-header>
            <view style="
        display: flex;
        height: 50px;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        background-color: #C98A49;
      ">
                <view class="header-one" style="padding-left: 1.5%; ">
                    <i class="el-icon-s-unfold" style="font-size: 24px;"></i>
    <view class="">
        <headNav :idIndex="idIndex" :searchBg="false" text="中医世医传承数据库" bg="/static/image/topBg1.png"
            bg1="/static/image/line1.png" />

        <view class="flex" style="padding: 0 1.21rem ;">
            <view class="flex">
                    <el-button class="MiddeBack flex flex-center" @click="goBack">返回</el-button>
                <h3>邵登瀛</h3>
                </view>
                <view class="header-two" style="font-size: 20px; color: aliceblue">
                    ä¸­åŒ»ä¸–医传承数据库
            <ul class="flex Lists">
                <li style="background-color: #597AA5;color: #fff;">世医传承</li>
                <!-- /pages/AcademicHistory/AcademicHistory -->
                <li @click="ListClick" style="background-color: #fff;color: #597AA5;" >世医传承</li>
            </ul>
            <view class="" style="width: 1rem;"></view>
                </view>
                <view class="header-three">
                    <view>
                        <i class="el-icon-search" style="font-size: 24px; "></i>
                        <i class="el-icon-question" style="font-size: 24px;"></i>
                        <i class="el-icon-user-solid" style="font-size: 24px;"></i>
        <!-- echarts图 -->
        <div class="barChart" ref="barChart"></div>
                    </view>
                </view>
            </view>
            <view class="huawenimg">
            </view>
        </el-header>
        <!-- ä¸»ä½“部分 -->
        <el-main>
            <view style="
          display: flex;
          justify-content: center;
          border-bottom: 1px solid gray;">
                <view style="display: flex; justify-content: flex-start; margin-right: auto">
                    <el-button class="button" @click="hideNodesAndLinks()">返回</el-button>
                </view>
                <!-- æ·»åŠ ä¸€ä¸ªflex容器来包裹el-menu，并设置其flex属性以占据剩余空间 -->
                <view style="display: flex; justify-content: center; flex: 1;">
                    <!-- è¿™é‡Œæ˜¯èœå•çš„切换 -->
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                        @select="handleSelect">
                        <el-menu-item index="1" class="small-menu-item">
                            <router-link to="zhongyione" class="router-link-active">
                                ä¸–医传承</router-link>
                        </el-menu-item>
                        <el-menu-item index="2" class="small-menu-item">
                            <router-link to="zhongyitwo" class="router-link-active">
                                ä¸–医文化</router-link></el-menu-item>
                    </el-menu>
                </view>
            </view>
            <router-view>
            </router-view>
        </el-main>
    </el-container>
</template>
<script>
    import * as echarts from "echarts";
    export default {
        data() {
            return {
                // æ ‡é¢˜é¡¶éƒ¨æ éœ€è¦çš„东西
                idIndex: 0,
                activeIndex:1
            }
        },
        onLoad(options) {
            this.idIndex = options.id
            console.log('optionsoptionsoptions', options.id);
        },
        mounted() {
            // åˆå§‹åŒ– echarts
            this.initBarChart();
        },
        methods: {
            initBarChart() {
                // WMBg
                //通过 $ref è¿›è¡ŒæŒ‚è½½
                let myChart = echarts.init(this.$refs.barChart);

                let FontSize = 12; // å­—体大小
                let BorderWidth = 2; // è¾¹æ¡†å¤§å°
                let SymbolSize = 80; // å°ºå¯¸è·ç¦»
                let Distance = 10;
                // ä¸åŒå°ºå¯¸ä¸‹ä¿®æ”¹echarts的字体
                if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
                    FontSize = 28
                    BorderWidth = 5
                    SymbolSize = 100
                    Distance = 33
                } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
                    FontSize = 28
                    BorderWidth = 4
                    SymbolSize = 90
                    Distance = 22
                } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
                    FontSize = 18
                    BorderWidth = 4
                    SymbolSize = 70
                    Distance = 22
                }

                let option = {
                    title: {
                        text: [""],
                    },
                    backgroundColor: {
                        type: 'image',
                        image: '/static/image/WMBg.png',
                        repeat: 'repeat-x', // æ˜¯å¦å¹³é“ºï¼Œå¯ä»¥æ˜¯ 'repeat-x', 'repeat-y', 'no-repeat'
                        size: '100% 100%', // èƒŒæ™¯å›¾ç‰‡çš„尺寸，可以是百分比或者像素
                        position: 'center center' // èƒŒæ™¯å›¾ç‰‡çš„位置，可以是 top, bottom, middle æˆ–者百分比
                    },
                    tooltip: {},
                    animationDurationUpdate: 1500,
                    animationEasingUpdate: "quinticInOut",
                    series: [{
                        type: "graph",
                        layout: "none",
                        symbolSize: SymbolSize + 20,
                        //是否允许用户拖动图片
                        roam: false,
                        label: {
                            show: true,
                            color: 'black', // è®¾ç½®èŠ‚点文字颜色为黑色
                            fontSize: FontSize, // è®¾ç½®æ–‡å­—大小
                        },
                        edgeSymbol: ["circle", "arrow"],
                        edgeSymbolSize: [4, 10],

                        edgeLabel: {
                            show: true,
                            fontSize: FontSize, //更改两者关系的字体
                            position: "middle",
                            //这里设置关系文字是否和线段重叠
                            //   padding: [0, 0], // è°ƒæ•´å†…边距以确保标签与线段紧密贴合
                            // verticalAlign: 'middle', // è®¾ç½®æ–‡æœ¬çš„垂直对齐方式为居中
                            formatter: function(params) {
                                // params.data æ˜¯è¾¹çš„数据对象，你可以在这里定义关系名
                                // ä¾‹å¦‚，你可以根据 source å’Œ target çš„名称来定义关系名
                                return params.data.relationName ||
                                    "父子"; // å¦‚果定义了 relationName åˆ™æ˜¾ç¤ºå®ƒï¼Œå¦åˆ™æ˜¾ç¤ºâ€œçˆ¶å­â€
                            },
                        },
                        //各个节点
                        data: [{
                                name: "薛雪",
                                x: 300,
                                y: 300,
                                itemStyle: {
                                    color: "#F8E2D7",
                                    borderColor: "#F3AA78",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "邵登瀛",
                                x: 400,
                                y: 300,
                                itemStyle: {
                                    color: "#F8E2D7",
                                    borderColor: "#F3AA78",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "邵鲁瞻",
                                x: 500,
                                y: 300,
                                itemStyle: {
                                    color: "#F8E2D7",
                                    borderColor: "#F3AA78",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "邵春泉",
                                x: 600,
                                y: 300,
                                itemStyle: {
                                    color: "#F8E2D7",
                                    borderColor: "#F3AA78",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "徐锦",
                                x: 650,
                                y: 400,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "邵丙扬",
                                x: 700,
                                y: 300,
                                itemStyle: {
                                    color: "#F8E2D7",
                                    borderColor: "#F3AA78",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "冯桂芬",
                                x: 720,
                                y: 400,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "李鸿章",
                                x: 740,
                                y: 500,
                                itemStyle: {
                                    color: "#E1E1E1",
                                    borderColor: "#888888",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "邵景尧",
                                x: 800,
                                y: 200,
                                itemStyle: {
                                    color: "#F8E2D7",
                                    borderColor: "#F3AA78",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "邵景康",
                                x: 800,
                                y: 400,
                                itemStyle: {
                                    color: "#F8E2D7",
                                    borderColor: "#F3AA78",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "鲍昇",
                                x: 750,
                                y: 100,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "文龙",
                                x: 850,
                                y: 100,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "傅庆贻",
                                x: 950,
                                y: 50,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "成允",
                                x: 950,
                                y: 100,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "胡玉坦",
                                x: 950,
                                y: 150,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "裕禄",
                                x: 950,
                                y: 200,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "陆乃昔",
                                x: 950,
                                y: 250,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "刘传祺",
                                x: 950,
                                y: 300,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "邵诚",
                                x: 950,
                                y: 350,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "曾国藩",
                                x: 1050,
                                y: 200,
                                itemStyle: {
                                    color: "#E1E1E1",
                                    borderColor: "#888888",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "曾国藩01",
                                x: 1050,
                                y: 50,
                                itemStyle: {
                                    color: "#E1E1E1",
                                    borderColor: "#888888",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "曾国藩02",
                                x: 1050,
                                y: 350,
                                itemStyle: {
                                    color: "#E1E1E1",
                                    borderColor: "#888888",
                                    borderWidth: "3",
                                },
                            },
                        ],
                        //关系连接
                        links: [{
                                source: "薛雪",
                                target: "邵登瀛",
                                relationName: "师徒",
                                hasArrow: "true",
                            },
                            {
                                source: "邵登瀛",
                                target: "邵鲁瞻",
                                relationName: "父子",
                            },
                            {
                                source: "邵鲁瞻",
                                target: "邵春泉",
                                relationName: "父子",
                            },
                            {
                                source: "邵春泉",
                                target: "邵丙扬",
                                relationName: "叔侄",
                            },
                            //曲线
                            {
                                source: "邵春泉",
                                target: "徐锦",
                                relationName: "朋友",
                                //这里设置为不带箭头
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.2,
                                },
                            },
                            {
                                source: "邵丙扬",
                                target: "邵景尧",
                                relationName: "父子",
                            },
                            {
                                source: "邵丙扬",
                                target: "邵景康",
                                relationName: "父子",
                            },
                            //曲线
                            {
                                source: "邵丙扬",
                                target: "冯桂芬",
                                relationName: "朋友",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.2,
                                },
                            },
                            //曲线
                            {
                                source: "邵丙扬",
                                target: "鲍昇",
                                relationName: "师徒",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: 0.2,
                                },
                            },
                            //曲线
                            {
                                source: "冯桂芬",
                                target: "李鸿章",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.2,
                                },
                            },
                            {
                                source: "邵景尧",
                                target: "邵景康",
                                relationName: "兄弟",
                            },
                            {
                                source: "邵景康",
                                target: "邵景尧",
                                relationName: "兄弟",
                            },
                            {
                                source: "邵景尧",
                                target: "鲍昇",
                                relationName: "姻亲",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.2,
                                },
                            },
                            {
                                source: "邵景尧",
                                target: "文龙",
                                relationName: "朋友",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: 0.2,
                                },
                            },
                            {
                                source: "邵景尧",
                                target: "傅庆贻",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.1,
                                },
                            },
                            {
                                source: "邵景尧",
                                target: "成允",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.2,
                                },
                            },
                            {
                                source: "邵景尧",
                                target: "胡玉坦",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.2,
                                },
                            },
                            {
                                source: "邵景尧",
                                target: "裕禄",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.2,
                                },
                            },
                            {
                                source: "邵景尧",
                                target: "陆乃昔",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.2,
                                },
                            },
                            {
                                source: "邵景尧",
                                target: "刘传祺",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.2,
                                },
                            },
                            {
                                source: "邵景尧",
                                target: "邵诚",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.2,
                                },
                            },
                            {
                                source: "成允",
                                target: "曾国藩",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                },
                            },
                            {
                                source: "胡玉坦",
                                target: "曾国藩",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                },
                            },
                            {
                                source: "裕禄",
                                target: "曾国藩",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                },
                            },
                            {
                                source: "陆乃昔",
                                target: "曾国藩",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                },
                            },
                            {
                                source: "刘传祺",
                                target: "曾国藩",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                },
                            },
                            {
                                source: "成允",
                                target: "曾国藩",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                },
                            },
                            {
                                source: "成允",
                                target: "曾国藩",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                },
                            },
                            {
                                source: "成允",
                                target: "曾国藩",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                },
                            },
                            {
                                source: "傅庆贻",
                                target: "曾国藩01",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                },
                            },
                            {
                                source: "邵诚",
                                target: "曾国藩02",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                },
                            },
                        ],
                        lineStyle: {
                            color: "#000000",
                            opacity: 0.9,
                            width: 2,
                            curveness: 0,
                        },
                    }, ],
                };
                //进行渲染
                myChart.setOption(option);
            },
            // è¿”回按钮 
            goBack() {
                // uuni.redirectTo();
                uni.redirectTo({
                    url: '/pages/index/index'
                })
            },
        }
    }
</script>
<style scoped>
    .huawenimg {
        display: flex;
        width: 100%;
        height: 20px;
        background-image: url('https://img2.baidu.com/it/u=4259428193,1811830338&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710954000&t=bf5d6b76e71d6e508efef90cf933ea05');
        background-repeat: repeat-x;
        /* æ°´å¹³å¹³é“º */
        background-size: auto 100%;
        /* è®¾ç½®èƒŒæ™¯å›¾ç‰‡é«˜åº¦ä¸Žå®¹å™¨ä¸€è‡´ï¼Œå®½åº¦è‡ªé€‚应 */
        border-bottom: 2px solid #C98A49;
        /* è®¾ç½®æ©™è‰²çš„下边框，宽度为2px */
    .Lists {
        li {
            /* background-color: #e4ebf3;
            border: 1rpx solid #5778a2;
            padding: 5rpx 10rpx;
            font-size: 18rpx; */
            width: 0.96rem;
            height: .3rem;
            border: 1px solid #597AA5;
            line-height: .3rem;
            text-align: center;
            font-size: .14rem;
    }

    /* ç»™è¿”回按钮设置样式 */
    .button {
        border: none !important;
        /* å–消边框 */
        color: #C98A49 !important;
        /* å­—体颜色 */
        background-color: transparent !important;
        ;
        /* è®¾ç½®èƒŒæ™¯ä¸ºé€æ˜Ž */
    }
    .MiddeBack {
        width: 0.6rem;
        height: 0.24rem;
        font-size: .12rem;
        padding: 0;

    .small-menu-item {
        border-bottom: 1px solid #EA7A28 !important;
        /* æ©™è‰²çš„边框 */
        font-size: 15px !important;
        /* è°ƒæ•´å­—体大小 */
        padding: 0px 5px 0px 0px !important;
        /* è°ƒæ•´å†…边距 */
        margin: 0px 0px 0px 0px !important;
        /* å…¶ä»–你想要的样式 */
    }

    /* è®¾ç½®el-menu的背景颜色为透明 */
    .el-menu-demo {
        border-bottom: 1px solid #EA7A28 !important;
        /* æ©™è‰²çš„边框 */
        background-color: transparent !important;
        /* ä½¿ç”¨!important来确保覆盖默认样式 */
    }

    /* ä¼ªç±»ï¼ˆé¼ æ ‡é€‰ä¸­æ—¶çš„样式） */
    .el-menu-item:hover {
        /* å½“鼠标悬停在菜单项上时 */
        background-color: #EA7A28 !important;
        /* è®¾ç½®èƒŒæ™¯è‰²ä¸ºæ©™è‰²ï¼Œå¹¶ä½¿ç”¨ !important æ¥ç¡®ä¿è¦†ç›–其他样式 */
        color: white !important;
        ;
        /* å¯èƒ½è¿˜éœ€è¦è®¾ç½®æ–‡æœ¬é¢œè‰²ä»¥ç¡®ä¿å¯è¯»æ€§ */
    }

    /* è®¾ç½®el-menu-item在选中时的背景颜色为橙色 */
    .el-menu-item.is-active {
        color: #FDFCFD !important;
        ;
        background-color: #EA7A28 !important;
        /* ä½¿ç”¨!important来确保覆盖默认样式 */
        border-bottom: 1px solid #EA7A28 !important;
        /* åœ¨åº•éƒ¨æ·»åŠ æ©™è‰²çš„边框 */
    }

    /* å¦‚果你希望链接在被选中时也有橙色背景，你可能还需要覆盖router-link的样式 */
    .router-link-active.is-active {
        color: #FDFCFD !important;
        /* ä½¿ç”¨!important来确保覆盖默认样式 */
        /* background-color: #EA7A28 !important;  */
    .barChart {
        width: 100vw;
        height: 80vh;
    }
</style>

 static/image/WMBg.png

 static/image/X.png

 static/image/fangda.png

 static/image/logo2.png

 static/image/logo3.png

 static/image/logo4.png

 static/image/personageBg.png

 static/image/yinyong.png

 static/image/ÐÞ¸ÄÃÜÂë.png

 static/image/ѧÅÉBg.png

 static/initialize.css

@@ -3,6 +3,7 @@
        padding: 0;
        box-sizing: border-box;
    }

    html {
        font-size: calc(100 * 100vw / 1440) !important;
        /* font-size: 10px; */
@@ -11,6 +12,7 @@
    body {
        font-size: .16rem !important;
    }

    .flex {
        display: flex;
        align-items: center;
@@ -45,9 +47,11 @@
    .flex-start {
        justify-content: flex-start
    }

    .flex-content{
        justify-content: space-around;
    }

    .flex-items-start{
        align-items: flex-start;
    }
@@ -56,10 +60,39 @@
        position: relative;
        z-index: 99999 !important;
    }

    /* å­—体宋体 */
    .font-family{
        font-family: å®‹ä½“;
    }

    /* è¶…出隐藏1 */
    .BeyondHiding1 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* è¶…出隐藏2 */
    .BeyondHiding2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* è®¾ç½®è¦æ˜¾ç¤ºçš„行数 */
        -webkit-box-orient: vertical;
        /* è®¾ç½®æ˜¾ç¤ºæ–¹å¼ä¸ºåž‚直方向 */
        overflow: hidden;
        /* éšè—è¶…出的内容 */
    }
    /* è¶…出隐藏3 */
    .BeyondHiding3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        /* è®¾ç½®è¦æ˜¾ç¤ºçš„行数 */
        -webkit-box-orient: vertical;
        /* è®¾ç½®æ˜¾ç¤ºæ–¹å¼ä¸ºåž‚直方向 */
        overflow: hidden;
        /* éšè—è¶…出的内容 */
    }

    ul {
        list-style: none;
    }