第二次提交

mh-two-thousand-and-two

2024-03-29 d27fbd63d7840787d7f3ca5333b6e24dc3a860d4

第二次提交

 App.vue

@@ -20,6 +20,7 @@
    @import '@/static/customicons.css';
    // è®¾ç½®æ•´ä¸ªé¡¹ç›®çš„背景色
    @import '@/static/initialize.css';

    page {
        background-color: #f5f5f5;
    }
@@ -30,5 +31,4 @@
        color: #333;
        padding: 10px;
    }
	
</style>

 TCM_CharacterLibrary

New file
@@ -0,0 +1 @@
Subproject commit bd37b0a842b37ab5e0eb016b82cd757c0cc7da2d

 components/advancedSearch/advancedSearch.vue

New file
@@ -0,0 +1,137 @@
<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>
        </view>
        <!-- é«˜çº§æœç´¢ -->
        <view class="" v-if="isAdvancedSearch" style="padding: 0 1.24rem; margin-bottom: .18rem;">
            <view style="background-color: #fff;padding: .29rem;" class="">
                <h3>高级搜索</h3>
                <MyForm @submit="onSubmit" :from="from" />
            </view>
        </view>
    </view>
</template>

<script>
    import MyForm from '@/components/form/form.vue'
    export default {
        props:{
            isAvancedTrue:{
                type:Boolean,
                default(){
                    return true
                }
            },isSearchTrue:{
                type:Boolean,
                default(){
                    return true
                }
            },buttonText:{
                type:String,
                default(){
                    return '搜索'
                }
            },
			
        },
        components: {
            MyForm
        },
        name: "advancedSearch",
        data() {
            return {
                // é«˜çº§æœç´¢æ˜¾ç¤º
                isAdvancedSearch: false,
                // é«˜çº§æœç´¢
                from: {
                    from: [{
                            type: 'input',
                            label: '姓名',
                            name: 'name',
                            value: ''
                        },
                        {
                            type: 'select',
                            label: '性别',
                            value: '',
                            name: 'sex',
                            options: [{
                                    label: '男',
                                    value: '男'
                                },
                                {
                                    label: '女',
                                    value: '女'
                                }
                            ]
                        },
                        {
                            type: 'input',
                            label: '联系',
                            name: 'phone',
                            value: ''
                        },
                        {
                            type: 'input',
                            label: '证件',
                            name: 'idNumber',
                            value: ''
                        },
                        {
                            type: 'select',
                            label: '状态',
                            name: 'state',
                            value: '',
                            options: [{
                                    label: '未申请',
                                    value: '未申请'
                                },
                                {
                                    label: '已申请',
                                    value: '已申请'
                                },
                                {
                                    label: '已删除',
                                    value: '已删除'
                                }
                            ]
                        }
                    ]
                },

            };
        },
        methods: {
            isAvancedClick() {
                this.isAdvancedSearch = !this.isAdvancedSearch
                //     this.$nextTick(() => {

                //         var box1Height = document.querySelector('.fbox').offsetHeight;
                //         // let box2Height= document.querySelector('.fbox1').style.height = box1Height + 'px';
                //         let box2Height = document.querySelector('.fbox1').offsetHeight
                //         console.log(box1Height, box2Height);
                //         if (box1Height <= box2Height) {
                //             document.querySelector('.fbox1').style.height = box1Height + 'px';
                //         }
                //     })
            },
            onSearch(val) {
                this.$emit('onSearch',val)
                console.log(val);
            },
            onSubmit(val) {
                console.log(val);
            },
        }
    }
</script>

<style>
.search_bar{
    width: 5rem;
    height: .36rem;
}
</style>

 components/footer/footer.vue

New file
@@ -0,0 +1,46 @@
<template>
    <view class="BottomColumn flex flex-center">
        <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;">
                <view class="">
                    92017中国中医科学院中医药信息研究所版权所有京ICP备业方安大业方业方
                </view>
                <view class="">地址:北京市东城区东直门内南小街16号邮编:100700
                    ç”µè¯:8610-64089611Email:tcmbase@126.com</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name:"footer",
        data() {
            return {
				
            };
        }
    }
</script>

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

        .Bbar {
            img {
                width: 60rpx;
                height: 60rpx;
                border-radius: 50%;
            }
        }
    }
</style>

 components/form/form.vue

New file
@@ -0,0 +1,63 @@
<template class="">
    <div>
        <el-form size="mini" :inline="true" style="padding: 30rpx 30rpx 10rpx 30rpx" :model="from"
            class="row demo-form-inline col-xs-12">
            <el-row :gutter="10">
                <el-form-item style="width: 30%;" v-for="(item, i) in from.from" :key="i" :label="item.label">
                        <el-input v-if="item.type === 'input'" v-model="item.value"
                            :placeholder="item.label"></el-input>
                        <el-select v-else-if="item.type === 'select'" v-model="item.value" :placeholder="item.label">
                            <el-option v-for="(option, optionIndex) in item.options" :key="optionIndex"
                                :label="option.label" :value="option.value"></el-option>
                        </el-select>
                </el-form-item>
                <!-- å…¶ä»–表单项省略 -->
                <!-- <el-form-item style="display:block; "> -->
                    <view class="flex flex-center">

                        <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>
                    </view>
                <!-- </el-form-item> -->
            </el-row>
        </el-form>
    </div>
</template>
<script>
    export default {
        props: ['from'],
        methods: {
            handleSubmit() {
                this.$message({
                    message: '查询成功',
                    type: 'success'
                })
                const result = this.from.from.reduce((obj, item) => {
                    obj[item.name] = item.value
                    return obj
                }, {})
                // æäº¤é€»è¾‘
                this.$emit('submit', result) // å‘送 submit äº‹ä»¶ï¼Œå¹¶å°†è¡¨å•æ•°æ®ä½œä¸ºå‚数传递给父组件
            },
            handleReset() {
                this.from.from.forEach(item => {
                    item.value = ''
                })
                // é‡ç½®é€»è¾‘
                // this.$emit('reset') // å‘送 reset äº‹ä»¶ç»™çˆ¶ç»„件
            }
        }
    }
</script>

<style scoped>
    .el-form--inline .el-form-item {
        margin-right: 0;
    }
    ::v-deep .el-form-item__content{
        width: 80%;
    }
    ::v-deep .el-form-item__content div{
        width: 100%;
    }
</style>

 components/headNav/headNav.vue

@@ -1,24 +1,27 @@
<template>
    <view>
        <view class="NavTop flex" :style="{backgroundImage: 'url('+ bg + ')'}">
            <view class="" @click="menuNav = !menuNav"><img src="../../static/中医人物知识库0201/三条杠.png" alt="" /></view>
            <view class="flex" style="font-size: 24rpx;letter-spacing: 5rpx;">
            <view class="" style="width: .34rem;height: .34rem;" @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: 26rpx;font-size: 30rpx;font-family: cursive;font-weight: 900;">中医医事制度
                <view class="" style="margin-left: .19rem;font-size: .24rem;font-family: cursive;font-weight: 900;">
                    ä¸­åŒ»åŒ»äº‹åˆ¶åº¦
                </view>
            </view> 
            <view class="NavTopr flex">
                <view class="search-container" style="">
                <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 style="background-color: #000;border-radius: 50%;margin-top: -4rpx;" class="search-logo"
                            @click="toggleSearch" src="@/static/image/search.png"></img>
                        <!-- <img  
                             src=""></img> -->
                            <view class="search-logo" @click="toggleSearch" style="background-color: #000;border-radius: 50%;margin-top: -4rpx;"></view>
                    </view>
                </view>
                <!-- <img style="border-radius: 50%;display: inline-block;" src="../../static/image/search.png" alt="" /> -->
                <img src="@/static/image/people.png" style="display: inline-block;" alt="" />
                <img src="@/static/image/question.png" alt="" />
                <img src="@/static/image/profile.svg" alt="" />
                <img src="@/static/image/quote.svg" style="margin-right: 0;" alt="" />
            </view>
        </view>
        <view class="mImage" :style="{backgroundImage: 'url('+ bg1 + ')'}"></view>
@@ -26,7 +29,7 @@
            <!-- èƒŒæ™¯ -->
            <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: 90rpx 0;">
                <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>
                <el-menu default-active="1" active-text-color="#ffffff" class="el-menu-vertical-demo"
@@ -146,18 +149,18 @@
    .NavTop {
        /* background: url(@/static/image/topBg.png); */
        background-size: 100% 100%;
        padding: 25rpx;
        padding: .16rem .24rem;
        color: #fff !important;

        img {
            width: 30rpx;
            height: 30rpx;
            width: .1rem;
            height: .1rem;
            vertical-align: middle;
        }

        .logo {
            width: 40rpx;
            height: 40rpx;
            width: .32rem;
            height: .32rem;
            background: url(@/static/image/logo.png) 0 0 no-repeat;
            background-size: 100% 100%;
        }
@@ -166,7 +169,9 @@
            vertical-align: top;

            img {
                margin-right: 20rpx;
                width: .34rem;
                height: .34rem;
                margin-right: .30rem;
                vertical-align: middle;
            }
        }
@@ -174,7 +179,7 @@

    .mImage {
        width: 100%;
        height: 30rpx;
        height: .2rem;
        /* background-image: url(@/static/image/line.png); */
        background-size: cover;
        /* èƒŒæ™¯å›¾ç‰‡è¦†ç›–整个元素 */
@@ -230,13 +235,15 @@
    }

    .search-logo {
        width: 30rpx;
        width: .34rem;
        /* logo图标的宽度 */
        height: 30rpx;
        height: .34rem;
        /* logo图标的高度 */
        margin-left: 10rpx;
        /* ä¸Žè¾“入框之间的间距 */
        cursor: pointer;
        background-image: url(@/static/image/search.svg);
        background-size: 100% 100%;
    }

    .leftListBg {
@@ -260,29 +267,37 @@
    ::v-deep .el-menu .is-active {
        background-color: #244A7B !important;
        border-radius: 30px;

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

    .el-menu-item {
        line-height: 40px;
        height: 40px;
        margin: 20rpx 0;
        height: .34rem;
        font-size: .16rem;
        text-align: center;
        font-weight: 500;
        margin:  .13rem .14rem !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        span {
            vertical-align: top;
        }
    }
    ::v-deep .el-dialog__body{
        padding-top: 0 !important;
    }

    ::v-deep .el-dialog {
        margin-top: 0 !important;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 500rpx;
        width: 2.51rem;
    }

    ::v-deep .el-dialog__header{
        display: none;
    }

    /* ::v-deep .el-menu-vertical-demo */
</style>

 components/header/header.vue

File was deleted

 components/table1/table1.vue

@@ -1,8 +1,8 @@
<template>
  <div>
    <el-table  :max-height="height" :data="data" border>
    <el-table  :max-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">
        <template slot-scope="scope" class="font-family">
          <template v-if="column.type === 'image'">
            <el-image :src="scope.row[column.prop]" alt="加载失败"></el-image>
          </template>
@@ -87,15 +87,29 @@
  height: 70px;
}
/* è¡¨å¤´ */
::v-deep .el-table__header{
    margin-bottom: .02rem;
}
::v-deep .el-table__header th {
  background-color: #5879a4;
    height: .3rem;
    line-height: .3rem;
    font-size: .14rem;
  background-color: #597AA5;
  color: white; /* è¡¨å¤´æ–‡å­—颜色为白色，增加对比度 */
  margin-bottom: .02rem !important;
}
/* è¡¨æ ¼ */
::v-deep .el-table__body td {
    background-color: #ebf3fe;
 color: #000;
    background-color:#DDE8F6;
    height: .3rem;
    line-height: .3rem;
    font-size: .14rem;
 color: #2C2C2C !important;
 border-bottom: .02rem solid #fff;
}
/* ::v-deep .el-table__body    {
    border-bottom: .02rem solid #fff !important;
} */
::v-deep .el-table .el-table__cell{
    font-size: 9px;
    padding: 0;

 package-lock.json

@@ -1,5 +1,5 @@
{
  "name": "antd-demo",
  "name": "TCM_CharacterLibrary",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {

 pages.json

@@ -1,5 +1,14 @@
{
    "pages": [ {
    "pages": [ 
        {
            "path" : "pages/Login/Login",
            "style" : 
            {
                "navigationBarTitleText" : "",
                "enablePullDownRefresh" : false,
                "navigationStyle": "custom"
            }
        },{
        "path": "pages/index/index",
        "style": {
            // "navigationBarTitleText": "uni-app",
@@ -76,6 +85,43 @@
            "enablePullDownRefresh" : false,
            "navigationStyle": "custom"
        }
    },
    {
        "path" : "pages/characterRelation/characterRelation",
        "style" : 
        {
            "navigationBarTitleText" : "",
            "enablePullDownRefresh" : false,
            "navigationStyle": "custom"
        }
    },
    {
        "path" : "pages/characterMap/characterMap",
        "style" : 
        {
            "navigationBarTitleText" : "",
            "enablePullDownRefresh" : false,
            "navigationStyle": "custom"
        }
    },
	
    {
        "path" : "pages/Register/Register",
        "style" : 
        {
            "navigationBarTitleText" : "",
            "enablePullDownRefresh" : false,
            "navigationStyle": "custom"
        }
    },
    {
        "path" : "pages/forgetPass/forgetPass",
        "style" : 
        {
            "navigationBarTitleText" : "",
            "enablePullDownRefresh" : false,
            "navigationStyle": "custom"
        }
    }],
    "globalStyle": {
        "navigationStyle": "custom"

 pages/Login/Login.vue

New file
@@ -0,0 +1,562 @@
<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>
                <!-- ç”¨æˆ·ç™»å½•   v-if="isLogin"-->
                <view class="LoginTop"
                    style="display: flex; justify-content: space-between;margin-bottom: .47rem;align-items: center;">
                    <!-- <view style="color: #244A7B;padding-bottom: .47rem;font-size: .3rem;font-weight: bold;">用户登录</view> -->
                    <view class="LoginBg"></view>
                    <view class=""> </view>
                </view>
                <el-form :hide-required-asterisk="true" ref="formLogin1" label-position="top" :rules="rules1"
                    :model="loginData">
                    <el-form-item label="登录账号" prop="loginID">
                        <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-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>
                    </el-form-item>
                    <view class="" style="display: flex;font-size: .14rem;color: #244A7B;">
                        <view class="" style="display: inline-block;cursor: pointer;" @click="forgetPass">忘记密码
                        </view>
                        <view class="" style="display: inline-block;margin: 0 20rpx;"> | </view>
                        <view class="" style="display: inline-block;cursor: pointer;" @click="quickRegister">快速注册
                        </view>
                    </view>
                </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.registerData.checkPass !== '') {
                        this.$nextTick(() => {
                            this.$refs.formLogin.validateField('checkPass');
                        });
                    }
                    callback();
                }
            };
            // ç¡®è®¤å¯†ç 
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.registerData.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                // ç”¨æˆ·æ³¨å†Œ
                isRegister: false,
                // ç”¨æˆ·ç™»å½•
                isLogin: true,
                // ä¿®æ”¹å¯†ç 
                isAmendPass: false,
                // é‡ç½®å¯†ç 
                isResetPass: false,
                // æ³¨å†Œç”¨æˆ·è´¦å·çš„校验
                rules: {
                    loginID: [{
                        required: true,
                        message: '请输入登录账号',
                        trigger: 'blur'
                    }],
                    pass: [{
                            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'
                        }
                    ]
                },
                rules1: {
                    loginID: [{
                        required: true,
                        message: '请输入登录账号',
                        trigger: 'blur'
                    }],
                    pass: [{
                            required: true,
                            message: '请输入密码',
                            trigger: 'blur'
                        },
                        {
                            min: 6,
                            max: 12,
                            message: '密码长度在 6 åˆ° 12 ä¸ªå­—符',
                            trigger: 'blur'
                        }
                    ],
                },

                // ç™»å½•æ³¨å†Œæ¡†
                loginTrue: true,
                Rtop1: 0,
                value: 'sdfdsf',
                // æ³¨å†Œç”¨æˆ·å¯¹åº”的数据
                registerData: {
                    loginID: '',
                    pass: '',
                    checkPass: '',
                    cellphoneORmailbox: '',
                    verifyCode: ''
                },
                // ç™»å½•ç”¨æˆ·è´¦å·
                loginData: {
                    // è´¦å·
                    loginID: '',
                    pass: ''
                },
                // é‡ç½®å¯†ç 
                resetDataPass: {
                    cellphoneORmailbox: '',
                    verifyCode: "",
                    newPass: "",
                    checkPass: ""
                },
                // ä¿®æ”¹å¯†ç 
                amendDataPass: {
                    loginID: '',
                    originalPass: "",
                    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: {
            // åˆ—表项跳转
            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
                    })
                }

            },
            // å¿˜è®°å¯†ç 
            forgetPass() {
                uni.redirectTo({
                    url: '/pages/forgetPass/forgetPass'
                })
            },
            // å¿«é€Ÿæ³¨å†Œ
            quickRegister() {
                uni.redirectTo({
                    url: '/pages/Register/Register'
                })
            },
            // éªŒè¯ç æ ¡éªŒ
            validateVerificationCode(rule, value, callback) {
                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.redirectTo({
                            url: '/pages/index/index'
                        })
                    } else {
                        console.log('error submit!!失败');
                        return false;
                    }
                });
            },
            // ç”¨æˆ·æ³¨å†Œ
            Login1(formName) {
                console.log('用户注册的登录按钮');
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!成功');
                    } else {
                        console.log('error submit!!失败');
                        return false;
                    }
                });
            },
            // å¿˜è®°å¯†ç 
            Login2(formName) {
                console.log('忘记密码的登录按钮');
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!成功');
                    } else {
                        console.log('error submit!!失败');
                        return false;
                    }
                });
            }
        }
    }
</script>

<style scoped>
    @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;
        }
    }

	

    .LoginBg {
        width: 1.2rem;
        height: .37rem;
        background: url(@/static/image/用户登录.png) no-repeat 0 0;
        background-size: 100% 100%;
        margin-bottom: .47rem;
    }


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

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

    .btn>>>.el-form-item__content {
        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 {
        /* 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 {}

    ::v-deep .el-form-item__label {
        padding: 0;
        color: #244A7B;
        font-size: .14rem;
        font-weight: 500;
    }

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

    .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/Register/Register.vue

New file
@@ -0,0 +1,555 @@
<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>
            <!-- æ³¨å†Œç”¨æˆ· v-if="isRegister"-->
            <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="formLogin" label-position="right" :rules="rules"
                    :model="registerData">
                    <el-form-item label="登录账号" prop="loginID">
                        <el-input v-model="registerData.loginID" placeholder="由字母或数字组合3-15个字符组成"></el-input>
                    </el-form-item>
                    <el-form-item label="登录密码" prop="pass">
                        <el-input type="password" v-model="registerData.pass"
                            placeholder="字母、数字或特殊符号组成(6-10)个字符"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" v-model="registerData.checkPass" placeholder="必须与密码一致"></el-input>
                    </el-form-item>
                    <el-form-item label="手机/邮箱" prop="cellphoneORmailbox">
                        <el-input v-model="registerData.cellphoneORmailbox" placeholder="请填写正确的手机或电子邮箱地址"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="verifyCode">
                        <view class="verifyCode relative">
                            <el-input v-model="registerData.verifyCode" placeholder="请输入验证码"></el-input>
                            <view @click="verifyCodeClick" class=""
                                style="position: absolute;right: 0%;top: 0%;color: #244A7B;font-size: .14rem;font-weight: 500;">
                                èŽ·å–验证码</view>
                        </view>
                    </el-form-item>
                    <el-form-item class="btn" style="margin-bottom: .09rem;">
                        <el-button class="font-family"
                            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=""
                        style="font-size: .12rem;color: #9E9E9E;font-weight: 500; text-align: center;line-height: normal;margin-bottom: .19rem;">
                        ç”¨æˆ·æ³¨å†Œå³ä»£è¡¨åŒæ„ã€ŠæœåŠ¡æ¡æ¬¾ã€‹å’Œã€Šç”¨æˆ·éšç§ä¿æŠ¤å’Œä¸ªäººä¿¡æ¯æ¡æ¬¾ã€‹</view>
                </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.registerData.checkPass !== '') {
                        this.$nextTick(() => {
                            this.$refs.formLogin.validateField('checkPass');
                        });
                    }
                    callback();
                }
            };
            // ç¡®è®¤å¯†ç 
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.registerData.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                // ç”¨æˆ·æ³¨å†Œ
                isRegister: false,
                // ç”¨æˆ·ç™»å½•
                isLogin: true,
                // ä¿®æ”¹å¯†ç 
                isAmendPass: false,
                // é‡ç½®å¯†ç 
                isResetPass: false,
                // æ³¨å†Œç”¨æˆ·è´¦å·çš„校验
                rules: {
                    loginID: [{
                        required: true,
                        message: '请输入登录账号',
                        trigger: 'blur'
                    }],
                    pass: [{
                            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',
                // æ³¨å†Œç”¨æˆ·å¯¹åº”的数据
                registerData: {
                    loginID: '',
                    pass: '',
                    checkPass: '',
                    cellphoneORmailbox: '',
                    verifyCode: ''
                },
                // ç™»å½•ç”¨æˆ·è´¦å·
                loginData: {
                    // è´¦å·
                    loginID: '',
                    pass: ''
                },
                // é‡ç½®å¯†ç 
                resetDataPass: {
                    cellphoneORmailbox: '',
                    verifyCode: "",
                    newPass: "",
                    checkPass: ""
                },
                // ä¿®æ”¹å¯†ç 
                amendDataPass: {
                    loginID: '',
                    originalPass: "",
                    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) {
                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;
                    }
                });
            },
            // ç”¨æˆ·æ³¨å†Œ
            Login1(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>
    @media screen and (min-width: 1366px){
        ::v-deep .el-card{
            top: 60% !important;
        }
    }
    @media screen and (min-width: 1920px){
        ::v-deep .el-card{
            top: 80% !important;
        }
		
    }/* 
    åœ¨å±å¹•å®½åº¦è¶…过 1440px æ—¶çš„样式设置 */
    @media screen and (min-width: 1441px) {
        ::v-deep .el-card {
            top: 80% !important;
        }
        .BottomColumn{
            padding: .10rem 0;
        }
        .LoginTop{
            margin-bottom: .17rem !important; 
        }
        .btn   ::v-deep .el-button{
            margin-top: 0.1rem !important;
                font-size: 0.3rem !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;
        }
    }
	

    .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: .175rem .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;
        font-size: .14rem;
    }

    ::v-deep .el-form-item__error {
        /* display: none; */
        font-size: .12rem;
    }

    ::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;
        display: flex;
            align-items: center;
            text-align: right;
    }

    ::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

New file
@@ -0,0 +1,318 @@
<template>
    <view>
        <headNav />
        <view class="" style="position: relative;">
            <!-- åœ°å›¾ -->
            <view id="spaceTime" style="height: 90vh;width: 100%;position: relative;"></view>
            <!-- è¯¦æƒ… -->
            <el-dialog class="particulars" :visible.sync="menuNav" :modal="false">
                <view class="font-family" style="font-size: .26rem;padding-top: .16rem;font-weight: bold;">李时珍</view>
                <ul
                    style="border-bottom: .01rem solid #D8D8D8; padding:  .16rem 0; font-size: .14rem;font-weight: 400;line-height: .28rem;">
                    <li>出生于蕲州</li>
                    <li>1518å¹´07月03日 è•²å·žï¼ˆä»Šæ¹–北蕲州镇）</li>
                </ul>
                <ul style="margin: .31rem 0 .11rem 0; font-size: .14rem;font-weight: 400;line-height: .28rem;">
                    <li>活动名称：撰写《本草纲目》</li>
                    <li>活动地点：浙江省 </li>
                    <li>活动区间：浙江省杭州市 </li>
                    <li>活动描述：撰写《本草纲目》 </li>
                    <li>参与人员：李时珍 </li>
                    <li>来源组成：撰写《本草纲目》</li>
                </ul>
                <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>
            </el-dialog>
        </view>
    </view>
</template>

<script>
    import * as echarts from 'echarts';
    import 'echarts/extension/bmap/bmap';
    import {
        loadBMap
    } from "../../static/map.js"

    export default {
        data() {
            return {
                menuNav: true,
                sliderValue: 2024,
                currentYear: 2024,
                sliderValue: 50
            }
        },
        mounted() {

            // æ—¶ç©ºåœ°å›¾
            loadBMap('5USVDAhhS4ssz44HLq3gNPZai7naXf4Q').then(() => {
                this.spaceTime()
            })
        },
        methods: {
            handleSliderChange(value) {
                this.currentYear = value;
            },
            // æ—¶ç©ºåœ°å›¾
            spaceTime() {
                var chartDom = document.getElementById('spaceTime');
                var myChart = echarts.init(chartDom);
                var option;

                const data = [{
                        name: '海门',
                        value: 9
                    },
                    {
                        name: '金昌',
                        value: 19
                    },
                    {
                        name: '泉州',
                        value: 21
                    },
                    {
                        name: '衢州',
                        value: 177
                    },
                    {
                        name: '廊坊',
                        value: 193
                    },
                    {
                        name: '菏泽',
                        value: 194
                    },
                    {
                        name: '合肥',
                        value: 229
                    },
                    {
                        name: '武汉',
                        value: 273
                    },
                    {
                        name: 'sss大庆',
                        value: 279
                    }
                ];
                const geoCoordMap = {
                    æµ·é—¨: [121.15, 31.89],
                    é„‚尔多斯: [109.781327, 39.608266],
                    æ‹›è¿œ: [120.38, 37.35],
                    å¹³é¡¶å±±: [113.29, 33.75],
                    é‚¢å°: [114.48, 37.05],
                    å¾·å·ž: [116.29, 37.45],
                    æµŽå®: [116.59, 35.38],
                    è†å·ž: [112.239741, 30.335165],
                    å®œæ˜Œ: [111.3, 30.7],
                    ä¹‰ä¹Œ: [120.06, 29.32],
                    ä¸½æ°´: [119.92, 28.45],
                    æ´›é˜³: [112.44, 34.7],
                    ç§¦çš‡å²›: [119.57, 39.95],
                    æ ªæ´²: [113.16, 27.83],
                    çŸ³å®¶åº„: [114.48, 38.03],
                    èŽ±èŠœ: [117.67, 36.19],
                    å¸¸å¾·: [111.69, 29.05],
                    ä¿å®š: [115.48, 38.85],
                    æ¹˜æ½­: [112.91, 27.87],
                    é‡‘华: [119.64, 29.12],
                    å²³é˜³: [113.09, 29.37],
                    é•¿æ²™: [113, 28.21],
                    è¡¢å·ž: [118.88, 28.97],
                    å»ŠåŠ: [116.7, 39.53],
                    èæ³½: [115.480656, 35.23375],
                    åˆè‚¥: [117.27, 31.86],
                    æ­¦æ±‰: ['你好', 30.52],
                    sss大庆: [125.03, 46.58]
                };
                const convertData = function(data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value)
                            });
                        }
                    }
                    return res;
                };
                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    bmap: {
                        center: [104.114129, 37.550339], // è°ƒæ•´åœ°å›¾ä¸­å¿ƒç‚¹ä½ç½®
                        zoom: 6, // è®¾ç½®åœ°å›¾ç¼©æ”¾çº§åˆ«
                        roam: true,
                        mapStyle: {
                            styleJson: [{
                                    featureType: 'water',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#d1d1d1'
                                    }
                                },
                                {
                                    featureType: 'land',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#f3f3f3'
                                    }
                                },
                                {
                                    featureType: 'manmade',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#d1d1d1'
                                    }
                                },
                                {
                                    featureType: 'local',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#d1d1d1'
                                    }
                                },
                                {
                                    featureType: 'arterial',
                                    elementType: 'labels',
                                    stylers: {
                                        visibility: 'off'
                                    }
                                },
                                {
                                    featureType: 'boundary',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#fefefe'
                                    }
                                },
                                {
                                    featureType: 'building',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#d1d1d1'
                                    }
                                },
                                {
                                    featureType: 'label',
                                    elementType: 'labels.text.fill',
                                    stylers: {
                                        color: '#999999'
                                    }
                                }
                            ]
                        }
                    },
                    series: [
                        {
                            type: 'effectScatter',
                            coordinateSystem: 'bmap',
                            data: convertData(
                                data
                                .sort(function(a, b) {
                                    return b.value - a.value;
                                })
                                .slice(0, 6)
                            ),
                            symbolSize: function(val) {
                                return val[2] / 10;
                            },
                            encode: {
                                value: 2
                            },
                            showEffectOn: 'render',
                            rippleEffect: {
                                brushType: 'stroke'
                            },
                            label: {
                                formatter: '{b}',
                                position: 'bottom',
                                backgroundColor: 'rgba(255, 255, 255, 1)',
                                padding: [4, 8],
                                formatter: function(params) { // ä½¿ç”¨å‡½æ•°åŠ¨æ€ç”Ÿæˆæ ‡ç­¾å†…容
                                // è®¾ç½®æ–‡å­—多少个后面显示省略号
                                  if (params.data.name.length > 3) {
                                    return params.data.name.substring(0, 3) + '...';
                                  } else {
                                    return params.data.name;
                                  }
                                },
                                show: true,
                                fontSize: 12,
                                borderRadius: 30,
                            },
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: '#333'
                            },
                            emphasis: {
                                scale: true
                            },
                            zlevel: 1
                        }
                    ]
                };
                // è®¾ç½®ç‚¹å‡»äº‹ä»¶ç›‘听
                myChart.on('click', function(params) {
                    if (params.componentType === 'series') {
                        var dataName = params.data.name; // èŽ·å–点击的数据名称
                        var dataValue = params.data.value; // èŽ·å–点击的数据值
                        // åœ¨è¿™é‡Œå¯ä»¥æ ¹æ®éœ€è¦å¤„理点击事件，比如弹出对应数据的详细信息等操作
                        console.log('点击了', dataName, '数据，数值为', dataValue);
                        // è¿™é‡Œå¯ä»¥ç¼–写触发时间获取对应数据信息的逻辑
                    }
                })

                option && myChart.setOption(option);

            },

        }
    }
</script>

<style scoped>
    ::v-deep .particulars {
        position: absolute !important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: auto;
        margin: 0;
    }

    .particulars ::v-deep .el-dialog {
        margin: 0 !important;
        position: absolute;
        right: 0;
        top: 0;
        width: 4rem;
        height: 100%;

    }

    .particulars ::v-deep .el-dialog__header {
        display: none;
    }

    .particulars ::v-deep .el-dialog__body {
        padding: .26rem .23rem .26rem .27rem;
        color: #2C2C2C !important;
        position: relative;
        height: 100%;
    }

</style>

 pages/characterRelation/characterRelation.vue

New file
@@ -0,0 +1,249 @@
<template>
    <view>
        <headNav />
        <!-- é«˜çº§æœç´¢ -->
        <view style="margin: .35rem 0 .16rem 0; ">
            <advancedSearch />
        </view>
        <!-- çƒ­é—¨æœç´¢ -->
        <view class="flex flex-center" style="font-size: .1rem;color: #2C2C2C;">
            çƒ­é—¨æœç´¢ï¼š
            <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;">
                    {{item.name}}
                </li>
            </ul>
        </view>
        <!-- å…³ç³»è¡¨åœ°å›¾ -->
        <view id="relation" style="margin-top: .2rem; height: 70vh;width: 100%;"></view>
        <!-- æœä»£ -->
        <view class="flex flex-center" style="width: 100%; position: fixed;bottom: .33rem;left: 0;">
            <ul class="flex">
                <li style="" v-for="(item,index) in dynasty" :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="{'marginRight': index === dynasty.length - 1 ? '0' : '0.03rem'}"
                        style="padding: .05rem .19rem; color: #fff; font-size: .14rem; margin-top: .03rem;margin-right: .03rem;background-color: #597AA5;">
                        {{item.name}}
                    </view>
                </li>
            </ul>
        </view>
    </view>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        data() {
            return {
                // æœä»£
                dynasty: [{
                    name: '夏朝',
                    coord: '2070BC',
                    id: 1
                }, {
                    name: '商朝',
                    id: 2,
                    coord: '1600BC',
                }, {
                    name: '西周',
                    id: 3,
                    coord: '1600BC'
                }, {
                    name: '春秋战国',
                    id: 4,
                    coord: '770BC'
                }, {
                    name: '秦朝',
                    id: 4,
                    coord: '221BC'
                }, {
                    name: '汉朝',
                    id: 5,
                    coord: '202BC'
                }, {
                    name: '三国两晋南北朝',
                    id: 6,
                    coord: '184'
                }, {
                    name: '隋朝',
                    id: 7,
                    coord: '581'
                }, {
                    name: '唐朝',
                    id: 8,
                    coord: '618'
                }, {
                    name: '五代十国',
                    id: 9,
                    coord: '907'
                }, {
                    name: '辽夏金',
                    id: 10,
                    coord: '907'
                }, {
                    name: '宋朝',
                    id: 11,
                    coord: '960'
                }, {
                    name: '元朝',
                    id: 12,
                    coord: '1271'
                }, {
                    name: '明朝',
                    id: 13,
                    coord: '1368'
                }, {
                    name: '清朝',
                    id: 14,
                    coord: '1636'
                }],
                // çƒ­é—¨æœç´¢
                hot: [{
                    id: 1,
                    name: '李时珍',
                    bgColor: false
                }, {
                    id: 2,
                    name: '李时珍2',
                    bgColor: false
                }, {
                    id: 3,
                    name: '李时珍3',
                    bgColor: false
                }, ],
            }
        },
        methods: {
            // å…³ç³»å›¾è°±
            relation() {
                var chartDom = document.getElementById('relation');
                var myChart = echarts.init(chartDom);
                // å‡è®¾æ‚¨æœ‰èŠ‚点名称和它们之间的关系数据
                var nodes = ['李时珍', '成就', '传承', '亲友', '著作'];
                var relationships = [{
                        source: '李时珍',
                        target: '成就',
                        relation: '好友'
                    },
                    {
                        source: '李时珍',
                        target: '传承',
                        relation: '好1友'
                    },
                    {
                        source: '李时珍',
                        target: '亲友',
                        relation: '好2友'
                    },
                    {
                        source: '李时珍',
                        target: '著作',
                        relation: '好2友'
                    },
                    // å…¶ä»–关系...
                ];

                // æ ¹æ®å…³ç³»æ•°æ®ç”Ÿæˆè¿žæŽ¥çº¿
                var links = [];
                relationships.forEach(function(relationship) {
                    var sourceIndex = nodes.indexOf(relationship.source);
                    var targetIndex = nodes.indexOf(relationship.target);
                    console.log(sourceIndex, targetIndex);
                    if (sourceIndex !== -1 && targetIndex !== -1) {
                        links.push({
                            source: sourceIndex,
                            target: targetIndex,
                            label: {
                                show: true,
                                formatter: function(params) { // ä½¿ç”¨å‡½æ•°åŠ¨æ€ç”Ÿæˆæ ‡ç­¾å†…容
                                    return relationships.find(rel => rel.source === nodes[params.data
                                            .source] && rel.target === nodes[params.data.target])
                                        .relation;
                                }, // è®¾ç½®å…³ç³»æ ‡ç­¾å†…容为"Child-Parent"
                                color: '#2C2C2C',
                                fontSize: 12,
                                backgroundColor: 'rgba(255, 255, 255, 1)',
                                padding: [3, 8],
                                borderRadius: 30,
                                position: 'middle', // è®¾ç½®æ ‡ç­¾æ–‡æœ¬åœ¨çº¿çš„中间位置上居中显示
                                bottom: -10,
                                z: 10, // è®¾ç½®æ ‡ç­¾çš„z轴高度，使其比连接线更高
                                // offset: [0, 15] ,// å¾€ä¸‹ç§»åŠ¨ 10 åƒç´ 
                                distance: -12, // å°†æ ‡ç­¾æ”¾ç½®åœ¨è¿žæŽ¥çº¿ä¸Š
                            }
                        });
                    }

                });
                console.log(links);
                // æ ¹æ®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: 2,
                            borderColor: getColorByIndex(index + 1)
                        }
                    };
                });
                // è®¾ç½®é¢œè‰²
                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: 40, // è°ƒæ•´èŠ‚点大小
                        label: {
                            show: true,
                            color: 'black', // è®¾ç½®èŠ‚点文字颜色为黑色

                        },
                        edgeSymbol: ['circle'],
                        edgeSymbolSize: [4, 10],
                        data: nodeData,
                        links: links,
                        lineStyle: {
                            opacity: 0.9,
                            width: 2,
                            curveness: 0.3
                        }
                    }]
                };

                // å°†ç”Ÿæˆçš„连接线添加到echarts图表的option中
                option.series[0].links = links;
                option && myChart.setOption(option);
            },
        },
        mounted() {
            // å…³ç³»å›¾è°±
            this.relation()
        }
    }
</script>

<style>

</style>

 pages/forgetPass/forgetPass.vue

New file
@@ -0,0 +1,534 @@
<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="left" 
                    :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=""
                                style="position: absolute;right: 0%;top: 0%;color: #244A7B;font-size: .14rem;font-weight: 500;">
                                èŽ·å–验证码</view>
                        </view>
                    </el-form-item>
                    <el-form-item label="新密码" prop="pass">
                        <el-input v-model="resetDataPass.newPass"></el-input>
                    </el-form-item>
                    <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>
                    </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.registerData.checkPass !== '') {
                        this.$nextTick(() => {
                            this.$refs.formLogin.validateField('checkPass');
                        });
                    }
                    callback();
                }
            };
            // ç¡®è®¤å¯†ç 
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.registerData.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                // ç”¨æˆ·æ³¨å†Œ
                isRegister: false,
                // ç”¨æˆ·ç™»å½•
                isLogin: true,
                // ä¿®æ”¹å¯†ç 
                isAmendPass: false,
                // é‡ç½®å¯†ç 
                isResetPass: false,
                // æ³¨å†Œç”¨æˆ·è´¦å·çš„校验
                rules: {
                    loginID: [{
                        required: true,
                        message: '请输入登录账号',
                        trigger: 'blur'
                    }],
                    pass: [{
                            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',
                // æ³¨å†Œç”¨æˆ·å¯¹åº”的数据
                registerData: {
                    loginID: '',
                    pass: '',
                    checkPass: '',
                    cellphoneORmailbox: '',
                    verifyCode: ''
                },
                // ç™»å½•ç”¨æˆ·è´¦å·
                loginData: {
                    // è´¦å·
                    loginID: '',
                    pass: ''
                },
                // é‡ç½®å¯†ç 
                resetDataPass: {
                    cellphoneORmailbox: '',
                    verifyCode: "",
                    newPass: "",
                    checkPass: ""
                },
                // ä¿®æ”¹å¯†ç 
                amendDataPass: {
                    loginID: '',
                    originalPass: "",
                    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;
        }
    }

    .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/index/index.vue

@@ -1,153 +1,40 @@
<template>
    <view class="container flex flex-center" style="align-items: flex-start;">
        <view class="repository relative" style="margin-top: 38rpx;">
            <view class="Ttop flex flex-center flex-wrap" style="flex-direction: column;">
                <view class="r-top flex flex-center" style="width: 100%;justify-content: space-around;">
                    <view class="" style="width: 5%;"></view>
        <view class="repository relative">
            <view class="flex Ttop flex-column" style="width: 100%;">
                <view class="flex" style="width: 100%;">
                    <view class="" style="width: 2.5rem;"></view>
                    <view class=" flex flex-center flex-wrap" style="width: 100%; flex-direction: column;">
                        <view class=""></view>
                    <view class="" ref="Rtop">
                        <!-- <uni-icons type="heart-filled" size="26" style="margin-right: 18rpx;"></uni-icons> -->
                        <text class="login"></text>
                        <text
                            style="font-size: 72rpx;font-weight: normal;letter-spacing: 4rpx;vertical-align: middle;font-family: cursive;font-weight: bold;">中国医学人物知识库</text>
                                style="font-size: .36rem;letter-spacing: 4rpx;vertical-align: middle;font-family: cursive;font-weight: bold;">中国医学人物知识库</text>
                    </view>
                    <view class="flex" >
                        <view v-if="!loginTrue" v-for="item in 3" :key="item" :class="'s'+item" class="ss1" style="margin: 0 10rpx;">
                    </view>
                    <view class="flex" style="height: .5rem;">
                        <view @click="iconClick(item)" v-for="item in 3" :key="item" :class="'s'+item" class="ss1" style="margin-right:  .3rem;">
                        </view>
                    </view>
                </view>
                <view v-if="!loginTrue" class="rbottom " :style="{width:Rtop1+'px'}">
                    <uni-easyinput class="search1 uni-mt-12" suffixIcon="search" v-model="value" placeholder="按照姓名搜索"
                        @iconClick="iconClick"></uni-easyinput>

                <!-- é«˜çº§æœç´¢ -->
                <view v-if="isSearchTrue" style="margin: .35rem 0 .16rem 0; height: .52rem;">
                    <advancedSearch @onSearch="onSearch" :isAvancedTrue="false" :isSearchTrue="false" />
                </view>
            </view>
            <view class="Bbottom relative">
            <view class="Bbottom ">
                <!-- é€‰é¡¹å¡ -->
                <ul v-if="!loginTrue" class="secretary  flex relative">
                    <li v-for="(item,index) in listData" :key="item">
                <ul class="secretary  flex ">
                    <li @click="listDataClick(item)" v-for="(item,index) in listData" :key="index">
                        <span class="font-family"
                            style="font-weight: 700;color: #2C2C2C; width: 36px;display: inline-block; font-size: 45rpx;overflow: hidden;height: 80%;line-height: 1.5;">{{item.name}}</span>
                            style="font-weight: 700;color: #2C2C2C; width: 36px;display: inline-block; font-size: .32rem;overflow: hidden;height: 80%;line-height: 1.5;">{{item.name}}</span>
                        <view class="flex flex-content"
                            style="width: 80rpx;height: 80rpx;border-radius: 50%;background-color: #244A7B;">
                            style="width: .5rem;height: .5rem;border-radius: 50%;background-color: #244A7B;">
                            <image style="width: 40%;height: 20%;" src="@/static/image/eResize.png" mode=""></image>
                        </view> 
                    </li>
                </ul>
                <!-- æ³¨å†Œç”¨æˆ· v-if="isRegister"-->
                <el-card  v-if="isRegister" style="position: absolute;top: -500rpx;padding: 30rpx;width: 900rpx;" >
                    <view class="" style="display: flex; justify-content: space-between;">
                        <h2 style="color: #244a7b;padding-bottom: 20rpx;">用户注册</h2>
                        <view class="" @click="isRegister= !isRegister,isLogin=!isLogin" style="cursor: pointer;font-size: 20rpx;color: #244a7b;">
                            å·²æœ‰è´¦å·ï¼Ÿè¿”回登录
                        </view>
                    </view>
                    <el-form :hide-required-asterisk="true" ref="formLogin" label-position="left" :rules="rules"
                        label-width="80px" :model="registerData">
                        <el-form-item label="登录账号" prop="loginID">
                            <el-input v-model="registerData.loginID"></el-input>
                        </el-form-item>
                        <el-form-item label="登录密码" prop="pass">
                            <el-input type="password" v-model="registerData.pass"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="checkPass">
                            <el-input type="password" v-model="registerData.checkPass"></el-input>
                        </el-form-item>
                        <el-form-item label="手机/邮箱" prop="cellphoneORmailbox">
                            <el-input v-model="registerData.cellphoneORmailbox"></el-input>
                        </el-form-item>
                        <el-form-item label="验证码" prop="verifyCode">
                            <el-input v-model="registerData.verifyCode"></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="Login1('formLogin')">登录</el-button>
                        </el-form-item>
                        <view class=""
                            style="font-size: 17rpx;color: #9E9E9E;text-align: center;line-height: 1;margin-bottom: 20rpx;">
                            ç”¨æˆ·æ³¨å†Œå³ä»£è¡¨åŒæ„ã€ŠæœåŠ¡æ¡æ¬¾ã€‹å’Œã€Šç”¨æˆ·éšç§ä¿æŠ¤å’Œä¸ªäººä¿¡æ¯æ¡æ¬¾ã€‹</view>
                    </el-form>
                </el-card>
                <!-- ç”¨æˆ·ç™»å½•  v-if="isLogin"-->
                <el-card  v-if="isLogin" style="position: absolute;top: -500rpx;padding: 30rpx;width: 900rpx;">
                    <view class="" style="display: flex; justify-content: space-between;">
                        <h2 style="color: #244a7b;padding-bottom: 20rpx;">用户登录</h2>
                        <view class=""> </view>
                    </view>
                    <el-form :hide-required-asterisk="true" ref="formLogin1" label-position="top" label-width="80px" :rules="rules1"
                        :model="loginData">
                        <el-form-item label="登录账号" prop="loginID">
                            <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-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="Login('formLogin1')">登录</el-button>
                        </el-form-item>
                        <view class="" style="display: flex;font-size: 20rpx;">
                            <view class="" style="display: inline-block;cursor: pointer;" @click="forgetPass">忘记密码
                            </view>
                            <view class="" style="display: inline-block;margin: 0 20rpx;"> | </view>
                            <view class="" style="display: inline-block;cursor: pointer;" @click="quickRegister">快速注册
                            </view>
                        </view>
                    </el-form>
                </el-card>
                <!-- é‡ç½®å¯†ç  -->
                <el-card v-if="isResetPass" style="position: absolute;top: -500rpx;padding: 30rpx;width: 900rpx;">
                    <view class="" style="display: flex; justify-content: space-between;">
                        <h2 style="color: #244a7b;padding-bottom: 20rpx;">重置密码 </h2>
                        <view class=""> </view>
                    </view>
                    <el-form :hide-required-asterisk="true" ref="formLogin2" label-position="left" label-width="80px" :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">
                            <el-input v-model="resetDataPass.verifyCode"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码" prop="pass">
                            <el-input v-model="resetDataPass.newPass"></el-input>
                        </el-form-item>
                        <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>
                        </el-form-item>
                    </el-form>
                </el-card>
                <!-- ä¿®æ”¹å¯†ç  -->
                <!-- <el-card style="position: absolute;top: -500rpx;padding: 30rpx;width: 900rpx;">
                    <view class="" style="display: flex; justify-content: space-between;">
                        <h2 style="color: #244a7b;padding-bottom: 20rpx;">修改密码  </h2>
                        <view class="" > </view>
                    </view>
                    <el-form :hide-required-asterisk="true" ref="formLogin" label-position="left" label-width="80px" :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="pass">
                        <el-input v-model="amendDataPass.originalPass"></el-input>
                      </el-form-item>
                      <el-form-item label="新密码" prop="pass">
                        <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="Login('formLogin')">确定</el-button>
                      </el-form-item>
                    </el-form> 
                </el-card> -->
            </view>
        </view>
        <view class="hua"></view>
@@ -155,18 +42,8 @@
        <view class="fff"></view>
        <!-- åº•éƒ¨èŠ±çš„背景图右侧 -->
        <view class="rrr"></view>
        <view class="BottomColumn flex flex-center">
            <view class="Bbar flex">
                <img style="display: block;margin-right: 20rpx;" src="@/static/image/logo.png" alt="" srcset="" />
                <view class="font-family">
                    <view class="">
                        92017中国中医科学院中医药信息研究所版权所有京ICP备业方安大业方业方
                    </view>
                    <view class="">地址:北京市东城区东直门内南小街16号邮编:100700
                        ç”µè¯:8610-64089611Email:tcmbase@126.com</view>
                </view>
            </view>
        </view>

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

@@ -174,109 +51,14 @@
    import {
        nextTick
    } from "vue";
    import Footer1 from '@/components/footer/footer.vue'
    export default {
        data() {
            // å¯†ç 
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.registerData.checkPass !== '') {
                        this.$nextTick(() => {
                            this.$refs.formLogin.validateField('checkPass');
                        });
                    }
                    callback();
                }
            };
            // ç¡®è®¤å¯†ç 
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.registerData.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                // ç”¨æˆ·æ³¨å†Œ
                isRegister: false,
                // ç”¨æˆ·ç™»å½•
                isLogin: true,
                // ä¿®æ”¹å¯†ç 
                isAmendPass: false,
                // é‡ç½®å¯†ç 
                isResetPass: false,
                // æ³¨å†Œç”¨æˆ·è´¦å·çš„校验
                rules: {
                    loginID: [{
                        required: true,
                        message: '请输入登录账号',
                        trigger: 'blur'
                    }],
                    pass: [{
                            required: true,
                            message: '请输入密码',
                            trigger: 'blur'
        components: {
            Footer1
                        },
                        {
                            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'
                        }
                    ]
                },
                rules1: {
                    loginID: [{
                        required: true,
                        message: '请输入登录账号',
                        trigger: 'blur'
                    }],
                    pass: [{
                            required: true,
                            message: '请输入密码',
                            trigger: 'blur'
                        },
                        {
                            min: 6,
                            max: 12,
                            message: '密码长度在 6 åˆ° 12 ä¸ªå­—符',
                            trigger: 'blur'
                        }
                    ],
                },
				
        data() {return {
            // æœç´¢çš„显示
                isSearchTrue:true,
                // ç™»å½•æ³¨å†Œæ¡†
                loginTrue: true,
                Rtop1: 0,
@@ -342,18 +124,42 @@
            this.getElementWidth();
        },
        methods: {
            // å¿˜è®°å¯†ç 
            forgetPass() {
                this.isLogin = !this.isLogin
                this.isResetPass = !this.isResetPass
                console.log('忘记密码');
            onSearch(val){
                uni.navigateTo({
                    url:'/pages/knowledgeBase/knowledgeBase?name='+val
                })
                console.log('vv',val);
            },
            // å¿«é€Ÿæ³¨å†Œ
            quickRegister() {
                this.isLogin = !this.isLogin
                this.isRegister = !this.isRegister
                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) {
                if (value !== '123456') {
@@ -370,49 +176,64 @@
                    console.log('Element width:', width);
                })
            },
            // ç”¨æˆ·ç™»å½•
            Login(formName) {
                console.log('用户登录的登录按钮');
                this.isLogin=!this.isLogin
                this.loginTrue=!this.loginTrue
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!成功');
                    } else {
                        console.log('error submit!!失败');
                        return false;
            iconClick(index){
                console.log(index);
                // æœç´¢çš„显示
                if(index==1){
                    this.isSearchTrue = !this.isSearchTrue
                    }
                });
            },
            // ç”¨æˆ·æ³¨å†Œ
            Login1(formName) {
                console.log('用户注册的登录按钮');
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!成功');
                    } else {
                        console.log('error submit!!失败');
                        return false;
                    }
                });
            },
            // å¿˜è®°å¯†ç 
            Login2(formName) {
                console.log('忘记密码的登录按钮');
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!成功');
                    } 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;
        }
        .Ttop{
            margin-bottom: .6rem !important;
        }
        .secretary{
            li{
                height: 4.5rem !important;
            }
        }
        .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;
        }
    }

    .btn>>>.el-form-item__content {
        margin-left: 0 !important;
    }
@@ -454,22 +275,23 @@
    .ss1 {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 40rpx;
        height: 40rpx;
        width: .34rem;
        height: .34rem;
        background-size: 100% 100%;
    }

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

    }

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

    .s3 {
        background-image: url(@/static/image/question.png);
        background-image: url(@/static/image/quote.svg);
        margin-right: .59rem !important;
    }

    .container {
@@ -481,15 +303,16 @@

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

            .Ttop {
                /* width: 500rpx; */
                margin: -100px 0 40px 0;
                margin-top: .38rem;
                margin-bottom: 1.22rem;
            }

            .r-top {
@@ -512,18 +335,18 @@

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

    .hua {
        width: 95%;
        height: 60%;
        width: 13.81rem;
        height: 5.965rem;
        position: absolute;
        background: url(@/static/image/bg3.png) no-repeat 0 0;
        background-size: 100% 100%;
@@ -533,10 +356,10 @@
    .fff {
        background: url(@/static/image/bg2.png) no-repeat 0 0;
        background-size: 100% 100%;
        width: 400rpx;
        height: 600rpx;
        width: 2.74rem;
        height: 4.52rem;
        position: fixed;
        bottom: 130rpx;
        bottom: 0;
        z-index: 9999999999999;
        left: 0;
    }
@@ -548,54 +371,34 @@


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




        li {
            background-color: #fff;
            color: black;
            height: 600rpx;
            width: 1.6rem;
            height: 4.8rem;
            display: flex;
            justify-content: space-between;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            border: 1rpx solid #fff;
            padding: 50rpx 65rpx;
            /*             padding: 58rpx 128rpx 88rpx; */
            text-align: center;
            background: #EBF4FF;
            font-weight: 600;
            margin: 0 .21rem;
        }
    }

    .BottomColumn {
        position: fixed;
        left: 0px;
        bottom: 0px;
        padding: 20rpx 0;
        width: 100%;
        background-color: #e6eff8;
        font-size: 10px;
        color: #000;

        .Bbar {
            img {
                width: 60rpx;
                height: 60rpx;
                border-radius: 50%;
            }
        }
    }

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

    }
    } */
</style>

 pages/knowledgeBase/knowledgeBase.vue

@@ -3,48 +3,184 @@
        <!-- é¡¶éƒ¨ -->
        <headNav />
        <!-- æœç´¢ -->
        <view class="" style="margin: 20rpx 0;">
        <view class="flex flex-center" style="margin: 20rpx 0;">
            <luanqing-search class="search_bar" @onSearch="onSearch"></luanqing-search>
            <view class="" @click="isAvancedClick"
                style="color:#244A7B ;font-size: 20rpx;margin-left: 60rpx;cursor: pointer;">高级搜索 ï¹€</view>
        </view>
        <view class="flex flex-center">
        <!-- çƒ­é—¨æœç´¢ -->
        <view class="flex flex-center" style="font-size: 20rpx;margin: 10rpx 0;">
            çƒ­é—¨æœç´¢ï¼š
            <ul class="flex" style="margin-right: 10rpx;">
                <!-- 
                <li v-for="item in hot" :key="item.id" @tap="HotClick(item.id)" style="margin: 0 10rpx;"
                    :style="{color:item.bgColor==true?'#5879a4':'#000'}">
                     {{item.name}}
                 </li>-->
                <li v-for="item in hot" :key="item.id" style="margin: 0 10rpx;color: #5879a4;font-size: 20rpx;">
                    {{item.name}}
                </li>
            </ul>
        </view>
        <uni-row class="demo-uni-row" style="padding: 0 30rpx; ">
            <uni-col :span="5" >
                <view class="demo-uni-col dark" style="padding: 20rpx;border: 2px solid #e0e0e0;">
                    <h3 style="padding-left: 20rpx;">{{profession.title}}</h3>
                    <ul style="margin-top: 10rpx;">
        <!-- é«˜çº§æœç´¢ -->
        <view class="" v-if="isAdvancedSearch" style="padding: 0 230rpx; margin-bottom: 10rpx;">
            <view style="background-color: #fff;padding: 20rpx;" class="">
                <h3>高级搜索</h3>
                <MyForm @submit="onSubmit" :from="from" />
            </view>
        </view>
        <uni-row class="demo-uni-row flex flex-items-start" style="padding: 0 230rpx; ">
            <uni-col :span="5" class="fbox">
                <!-- èŒä¸š -->
                <view class="demo-uni-col dark box"
                    style="margin-bottom: 40rpx;background-color: #fff; padding: 20rpx;border: 2rpx solid #e0e0e0;">
                    <h3>{{profession.title}}</h3>
                    <ul style="margin-top: 10rpx;" :class="{ 'a': activeBox === 'a'?'a':'' }">
                        <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
                        <li class="flex" :style="{'background':profession.index === index ?  '#d6e3f4' :'','borderRadius': profession.index === index ?  '60rpx' :''}" v-for="(item,index) in profession.list"  :key="index" style="padding:0 20rpx;">
                        <li class="flex"
                            :style="{'background':profession.index === index ?  '#d6e3f4' :'','borderRadius': profession.index === index ?  '60rpx' :''}"
                            v-for="(item,index) in profession.list" :key="index" style="padding:0 20rpx;">
                            <view class="">{{item.name}}</view>
                            <view class="">{{item.number}}</view>
                        </li>
                    </ul>
                    <view class="flex flex-center">
                        <view class="" style="font-size: 25rpx;color: #C1D3EA;">收起 ^</view>
                        <!-- <view class="">更多</view> -->
                        <view class="toggleButton" style="font-size: 25rpx;color: #C1D3EA;" @click="shrinkClick('a')">
                            {{ activeBox !== 'a' ? '更多  ï¹€' : '收起  ï¸¿' }}
                    </view>
                    </view>
                </view>
                <!-- ä¸–代 -->
                <view class="demo-uni-col dark box"
                    style="background-color: #fff;padding: 20rpx;border: 2rpx solid #e0e0e0;" :style="{'marginBottom': isAdvancedSearch ===true ? '0': '40rpx'}">
                    <h3>{{dynasty.title}}</h3>
                    <ul style="margin-top: 10rpx;" :class="{ 'b': activeBox === 'b'?'b':'' }">
                        <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
                        <li class="flex"
                            :style="{'background':dynasty.index === index ?  '#d6e3f4' :'','borderRadius': dynasty.index === index ?  '60rpx' :''}"
                            v-for="(item,index) in dynasty.list" :key="index" style="padding:0 20rpx;">
                            <view class="">{{item.name}}</view>
                            <view class="">{{item.number}}</view>
                        </li>
                    </ul>
                    <view class="flex flex-center">
                        <view class="toggleButton" style="font-size: 25rpx;color: #C1D3EA;" @click="shrinkClick('b')">
                            {{ activeBox !== 'b' ? '更多  ï¹€' : '收起  ï¸¿' }}
                        </view>
                    </view>
                </view>
                <!-- æ¥æº -->
                <view v-if="!isAdvancedSearch" class="demo-uni-col dark box"
                    style="height: 250rpx;background-color: #fff;padding: 20rpx;border: 2rpx solid #e0e0e0;">
                    <h3>{{source.title}}</h3>
                    <ul style="margin-top: 10rpx;" :class="{ 'b': activeBox === 'b'?'b':'' }">
                        <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
                        <li class="flex" v-for="(item,index) in source.list" :key="index"
                            style="padding:0 20rpx;color: #244A7B;font-size: 24rpx;">
                            <view class="">{{ index+1 + '. '  +item.name}}</view>
                            <view class="">{{item.number}}</view>
                        </li>
                    </ul>
                    <!--     <view class="flex flex-center">
                        <view class="toggleButton" style="font-size: 25rpx;color: #C1D3EA;" @click="shrinkClick('b')">
                            {{ activeBox !== 'b' ? '更多  ï¹€' : '收起  ï¸¿' }}</view>
                    </view> -->
                </view>
            </uni-col>
            <uni-col :span="19" style="padding-left: 20rpx;">
                <view class="demo-uni-col light" style="border: 1px solid #000;">
                    bbb
                <view class="demo-uni-col light fbox1"
                    style=" background-color: #fff;border: 1px solid   #e0e0e0;padding: 10rpx 20rpx;">
                    <view class="flex" style="margin:10rpx 0">
                        <view class="" style="color: #2C2C2C;">共1374条</view>
                        <el-button size="mini">下载</el-button>
                    </view>
                    <el-table :data="tableData" size="mini" style="width: 100%">
                        <el-table-column prop="serialNumber" label="序号" width="70"></el-table-column>
                        <el-table-column prop="name" label="姓名"></el-table-column>
                        <el-table-column prop="another" label="别名"></el-table-column>
                        <el-table-column prop="gender" label="性别"></el-table-column>
                        <el-table-column prop="epoch" label="时代"></el-table-column>
                        <el-table-column prop="year" label="生年" width="70"></el-table-column>
                        <el-table-column prop="death" label="卒年" width="70"></el-table-column>
                        <el-table-column prop="nativePlace" label="籍贯"></el-table-column>
                        <el-table-column prop="socialIdentity" label="社会身份"></el-table-column>
                        <el-table-column prop="officialPosition" label="官职"></el-table-column>
                    </el-table>
                </view>
            </uni-col>
        </uni-row>
        <Footer1 />
    </view>
</template>

<script>
    import Footer1 from '@/components/footer/footer'
    import MyForm from '@/components/form/form.vue'
    export default {
        components: {
            Footer1,
            MyForm
        },
        data() {
            return {
                // é«˜çº§æœç´¢æ˜¾ç¤º
                isAdvancedSearch: false,
                // é«˜çº§æœç´¢
                from: {
                    from: [{
                            type: 'input',
                            label: '姓名',
                            name: 'name',
                            value: ''
                        },
                        {
                            type: 'select',
                            label: '性别',
                            value: '',
                            name: 'sex',
                            options: [{
                                    label: '男',
                                    value: '男'
                                },
                                {
                                    label: '女',
                                    value: '女'
                                }
                            ]
                        },
                        {
                            type: 'input',
                            label: '联系',
                            name: 'phone',
                            value: ''
                        },
                        {
                            type: 'input',
                            label: '证件',
                            name: 'idNumber',
                            value: ''
                        },
                        {
                            type: 'select',
                            label: '状态',
                            name: 'state',
                            value: '',
                            options: [{
                                    label: '未申请',
                                    value: '未申请'
                                },
                                {
                                    label: '已申请',
                                    value: '已申请'
                                },
                                {
                                    label: '已删除',
                                    value: '已删除'
                                }
                            ]
                        }
                    ]
                },
                // çƒ­é—¨æœç´¢
                hot: [{
                    id: 1,
@@ -60,7 +196,6 @@
                    bgColor: false
                }, ],
                // èŒä¸š
				
                profession: {
                    title: '职业',
                    index:0,
@@ -83,11 +218,107 @@
                            number:83
                        },
                    ]
                }
                },
                // å±•å¼€å’Œæ”¶ç¼©çš„按钮需要
                activeBox: null,
                // ä¸–代
                dynasty: {
                    title: '世代',
                    index: 0,
                    list: [{
                            name: '全部',
                            id: 1,
                            number: 829
                        },
                        {
                            name: '唐',
                            id: 2,
                            number: 90
                        }, {
                            name: '宋',
                            id: 3,
                            number: 81
                        }, {
                            name: '元',
                            id: 4,
                            number: 83
                        },
                    ]
                },
                // æ¥æº
                source: {
                    title: '来源',
                    list: [{
                        name: '中国K小制应薛典',
                        id: 1
                    }, {
                        name: '中医医事大会',
                        id: 2
                    }, {
                        name: '中国医中制度研究',
                        id: 3
                    }, ]
                },
                tableData: [{
                    serialNumber: 1,
                    name: '王小虎',
                    another: '小虎',
                    gender: '男',
                    epoch: '唐代',
                    year: 1234,
                    death: 1332,
                    nativePlace: '河北',
                    socialIdentity: '世医',
                    officialPosition: '院判'
                }, {
                    serialNumber: 2,
                    name: '王w小虎',
                    another: 'w小虎',
                    gender: 'w男',
                    epoch: '唐w代',
                    year: 1234,
                    death: 1332,
                    nativePlace: '河北',
                    socialIdentity: '世医',
                    officialPosition: '院判'
                }, {
                    serialNumber: 1,
                    name: '王小虎',
                    another: '小虎',
                    gender: '男',
                    epoch: '唐代',
                    year: 1234,
                    death: 1332,
                    nativePlace: '河北',
                    socialIdentity: '世医',
                    officialPosition: '院判'
                }]
            }
        },
        mounted() {
            // ä¿®æ”¹ä¸¤æ¬¡çš„高度保持一致
            var box1Height = document.querySelector('.fbox').offsetHeight;
            document.querySelector('.fbox1').style.height = box1Height + 'px';
        },
        methods: {
            isAvancedClick() {
                this.isAdvancedSearch = !this.isAdvancedSearch
                this.$nextTick(() => {

                    var box1Height = document.querySelector('.fbox').offsetHeight;
                    // let box2Height= document.querySelector('.fbox1').style.height = box1Height + 'px';
                    let box2Height = document.querySelector('.fbox1').offsetHeight
                    console.log(box1Height, box2Height);
                    if (box1Height <= box2Height) {
                        document.querySelector('.fbox1').style.height = box1Height + 'px';
                    }
                })
            },
            onSubmit(val) {
                console.log(val);
            },
            onSearch(val) {

                console.log(val);
            },
            // çƒ­é—¨æœç´¢
@@ -103,6 +334,15 @@
                })

            },
            // å±•å¼€æ”¶ç¼©
            shrinkClick(box) {
                console.log(box);
                if (this.activeBox === box) {
                    this.activeBox = null;
                } else {
                    this.activeBox = box;
                }
            }
        }
    }
</script>
@@ -111,4 +351,29 @@
    * {
        box-sizing: border-box;
    }

    .a {
        height: 200px;
    }

    .b {
        height: 100px;
    }

    .box {
        transition: height 0.3s;
        /* æ·»åŠ è¿‡æ¸¡æ•ˆæžœ */
        overflow: hidden;
        /* é¿å…å†…容溢出 */

    }

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

    ::v-deep .has-gutter tr>th {
        background-color: #DDE8F6 !important;
    }
</style>

 pages/repository/repository.vue

@@ -1,66 +1,98 @@
<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="relative">
        <headNav />
        <view class="Midde flex">
            <view class="MiddeBack">返回</view>
            <el-button class="MiddeBack" size="mini" @click="goBack">返回</el-button>
            <view style="width: 70%;" class="flex flex-center flex-column">
                <view class="" style="font-weight: 900;margin-bottom:15rpx ;font-size: 30rpx;">李时珍</view>
                <ul class="flex" style="line-height: 1.2;">
                    <li v-for="item in 3"
                        style="font-size: 20rpx; background-color: #fff;color: #415c7a; border: 2rpx solid #415c7a;border-radius: 30rpx;padding: 0 15rpx;margin-right: 10rpx;">
                        ssdf</li>
                <view class="" style="font-weight: bold;font-size: .20rem;">李时珍</view>
                <ul class="flex" style="line-height: 1.2;margin: .15rem 0 ;">
                    <li v-for="item in 4"
                        style="background-color: #fff; padding: 0 .08rem ;  border: .01rem solid #000;border-radius:.1rem ;font-size: .12rem;text-align: center;margin-right: .15rem;">
                        VSDS</li>
                </ul>
                <view class="fz" style="font-size: 20rpx;margin: 20rpx 0;">
                    äº­æ—¶ç(1518å¹´-1593å¹´)，字:东雅，时人谓之:亭东脑。号渐湖，晚年自号湖湖山人，湖北新州(今湖北省黄冈市新春县酱州镇)人，汉族，生干明武宗正德十三年(公元1518å¹´)，卒于神崇万历二十二年(公元1593å¹´)。是中国明代与万密商齐名的医学家、药物学家、博物学家、著述家。李时珍对道家医学的體承是多方面的，曾参考历代有关医药及其学术书籍八百余种，结合自身经验和调查研究，历时27年编成《本草网目》一书，是我国古代药物学的总结性巨苦，在国内外均有很高的评价，已有儿种文字的译本或节译本，其若有《濒脉学》
                <view class="fz font-family"
                    style="font-size: .13rem;font-weight: normal;line-height: .2rem;letter-spacing: .03rem;">
                    æŽæ—¶ç(1518å¹´-1593å¹´)，字:
                    ä¸œç’§ï¼Œæ—¶äººè°“之:李东璧。号濒湖，晚年自号濒湖山人，湖北薪州(今湖北省黄冈市薪春县薪州镇)人，汉族，生于明武宗正德十三年(公元1518å¹´)，卒于神宗万历二十二年(公元1593å¹´)。是中国明代与万密斋齐名的医学家、药物学家、博物学家、著述家。李时珍对道家医学的继承是多方面的，曾参考历代有关医药及其学术书籍八百余种，结合自身经验和调查研究，历时27年编成《本草纲目》一书，是我国古代药物学的总结性巨著，在国内外均有很高的评价，已有几种文字的译本或节译本，其著有《濒湖脉学》
                </view>
                <view class="flex" style="width: 100%;">
                <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: 10rpx;" size="mini" icon="el-icon-set-up">引用</el-button>
                        <!-- <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>
                    </view>
                    <view class="" style="font-size: 20rpx;">阅读更多></view>
                    <view class="" style="font-size: .12rem;color: #244A7B;">阅读更多></view>
                </view>
            </view>
            <view class="" style="width: 5%;"></view>
        </view>
        <el-row style="padding: 30rpx 30rpx 0; ">
        <el-row style="padding: 0 1.2rem 0;padding-top: .24rem;">
            <!-- å·¦ä¾§ -->
            <el-col :span="6">
            <el-col :span="5" 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%;">
                        <div class="clearfix" style="font-weight: 700;">
                            <span>关系图谱</span>
                    <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>
                        <view id="relation" style="height: 200rpx;width: 100%;"></view>
                        <view id="relation" style="height: 1.51rem;width: 100%;"></view>
                    </el-card>
                    <el-card class="box-card" style="width: 100%; margin: 20rpx 0;">
                        <div class="clearfix" style="font-weight: 700;">
                    <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;">
                            <span>时空地铁</span>
                            <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text"></el-button>
                        </div>
                        <view id="spaceTime" style="height: 300rpx;width: 100%;position: relative;"></view>
                        <view class=""
                            style="line-height: 1.65; margin-top: 10rpx; background-color: #e9e9e9;padding-left: 10rpx;font-size: 20rpx;">
                            <view class="" style="padding-top: 10rpx ;font-weight: 800;">来源</view>
                            <view class="">1.《明史·卷二百九十九·列作品. p52</view>
                            <view class="">2.《进(本草纲目)疏》 p52</view>
                    </el-card>
                    <el-card style="width: 100%;height: 2.06rem;">
                        <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                            <span>来源</span>
                        </div>
                        <ul class="font-family" style="height: 300rpx;font-size: .12rem;line-height: .3rem;">
                            <li>1.《明史·卷二百九十九·列作品. p52</li>
                            <li>2.《进(本草纲目)疏》 p52</li>
                        </ul>
                    </el-card>
                </div>
            </el-col>
            <!-- å³ä¾§ -->
            <el-col :span="18" class="BoxRight">
                <div class="grid-content bg-purple-dark" style="width: 100%;">
                    <el-card class="box-card" style="padding: 0;">
                        <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                            <span>基础信息</span>
                        </div>
                        <!-- åŸºç¡€ä¿¡æ¯  -->
                        <cc-defineTable :tableData="tableArr"></cc-defineTable>
                    </el-card>
                    <el-card class="box-card" style=" min-height: 1.91rem; margin: 20rpx 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" />
                            </el-tab-pane>
                            <el-tab-pane label="亲属关系" data-id="2" name="family ">
                                äº²å±žå…³ç³»
                            </el-tab-pane>
                            <el-tab-pane label="师承关系" data-id="3" name="mentoring ">师承关系</el-tab-pane>
                            <el-tab-pane label="社会关系" data-id="4" name="society">社会关系</el-tab-pane>
                            <el-tab-pane label="活动年谱" data-id="5" name="activity">活动年谱</el-tab-pane>
                        </el-tabs>

                    </el-card>
                    <el-card style=" margin-bottom: .2rem ;">
                        <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                            <span>相关附表/图像</span>
                        </div>
                        <view class="flex">
                            <el-image v-for="item in 4" :key="item" style="width: 2.05rem; height: 1.4rem"
                                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                                fit="fill"></el-image>
                        </view>
                    </el-card>
                    <el-card class="box-card" style="width: 100%; line-height: 1.18;font-size: 21.5rpx;">
                        <ul>
                    <el-card class="box-card">
                        <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;">
                            <li>
                                [1|刘炜,谢蓉,张磊,等.向人文研究的国家数据基础设施建设[J|.中国图书馆学报,2016,42(5):29-39.
                            </li>
@@ -80,48 +112,32 @@
                    </el-card>
                </div>
            </el-col>
            <!-- å³ä¾§ -->
            <el-col :span="18" style="padding-left: 20rpx;">
                <div class="grid-content bg-purple-dark">
                    <el-card class="box-card">
                        <div class="clearfix" style="font-weight: 700;">
                            <span>关系图谱</span>
                        </div>
                        <!-- åŸºç¡€ä¿¡æ¯  -->
                        <cc-defineTable :tableData="tableArr"></cc-defineTable>
                    </el-card>
                    <el-card class="box-card" style=" height: 270rpx; margin: 20rpx 0;">
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="代表著作" name="representative">
                                <Table1 :data="tableData" :columns="tableColumns" />
                            </el-tab-pane>
                            <el-tab-pane label="亲属关系" name="family ">
                                äº²å±žå…³ç³»
                            </el-tab-pane>
                            <el-tab-pane label="师承关系" name="mentoring ">师承关系</el-tab-pane>
                            <el-tab-pane label="社会关系" name="society">社会关系</el-tab-pane>
                            <el-tab-pane label="活动年谱" name="activity">活动年谱</el-tab-pane>
                        </el-tabs>
                    </el-card>
                    <el-card style=" margin-bottom: 20rpx ;">
                        <div class="clearfix" style="font-weight: 700;">
                            <span>关系图谱</span>
                        </div>
                        <view class="flex">
                            <el-image v-for="item in 4" :key="item" style="width: 20%; height: 130rpx"
                                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                                fit="fill"></el-image>
                        </view>
                    </el-card>
                    <el-card>
                        <div class="clearfix" style="font-weight: 700;">
                            <span>相关附表/图像</span>
                        </div>
                        <Table1 :data="tableData" :columns="tableColumns" />
                    </el-card>
                </div>
            </el-col>
        </el-row>

        <!-- ä¸ªäººå°ä¼  -->
        <el-dialog :visible.sync="isProfile">
            <view class="ProfileNav flex flex-center">
                ä¸ªäººå°ä¼ 
            </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="color: #2C2C2C;">
                        è•™å±•ä¸ä¸‘同里日岩额序先考月池翁著《四彭酸明》八卷，皆精指奥室，茂犀未能疯造，珍因撮粹想菜，僵撰此唐，以便智睛，服指南。世之雷病雨家，咸以服焉首务，不知派乃四能之末，谓之巧者雨。上士欲舍其全，非四不可。
                    </view>
                    <view class="flex">
                        <view class=""></view>
                        <view class="" style="font-weight: 700;color: #2C2C2C;">——《奇八服考》P 3</view>
                    </view>
                </view>
            </view>
        </el-dialog>



        <!-- è¿”回顶部 -->
        <el-col style="position: absolute;bottom: 1.44rem;left:1.20rem ;">
            <el-button icon="el-icon-download" circle @click="scrollToTop"></el-button>
        </el-col>
    </view>
</template>

@@ -138,6 +154,7 @@
        },
        data() {
            return {
                isProfile: true,
                // å…³ç³»å›¾è°±
                activeName: 'representative',
                // åŸºç¡€ä¿¡æ¯
@@ -226,33 +243,105 @@
                    category: '中医学',
                    id: 1

                }, {
                    worksName: '本草纲目',
                    works: '李二牛',
                    literature: '作者',
                    epoch: '现代',
                    category: '中医学',
                    id: 1

                }]
            }
        },
        mounted() {

            // å…³ç³»å›¾è°±
            this.relation()
            // æ—¶ç©ºåœ°å›¾
            loadBMap('5USVDAhhS4ssz44HLq3gNPZai7naXf4Q').then(() => {
                this.spaceTime()
            })
            this.$nextTick(() => {
                // èŽ·å–第一个选项卡的 DOM å…ƒç´ 
                const firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar');
                firstTab.style.transform = 'translateX(' + '-20px' + ')'
                console.log(firstTab);
            });
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            // è¿”回上一页
            goBack() {
                uni.navigateBack();
            },
            // è¿”回顶部
            scrollToTop() {
                console.log('ss');
                window.scrollTo({
                    top: 0,
                    behavior: "smooth" // ä½¿ç”¨å¹³æ»‘滚动
                });
            },
            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)'
                    } else {
                        let firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar');
                        firstTab.style.transform = 'translateX(' + '-20' + 'px)'
                    }
                    // console.log(firstTab);
                })
            },
            // å…³ç³»å›¾è°±
            relation() {
                var chartDom = document.getElementById('relation');
                var myChart = echarts.init(chartDom);
                // å‡è®¾æ‚¨æœ‰èŠ‚点名称和它们之间的关系数据
                var nodes = ['李时珍', '成就', '传承', '亲友', '著作'];
                var relationships = [{
                        source: '李时珍',
                        target: '成就'
                    },
                    {
                        source: '李时珍',
                        target: '传承'
                    },
                    {
                        source: '李时珍',
                        target: '亲友'
                    },
                    {
                        source: '李时珍',
                        target: '著作'
                    },
                    // å…¶ä»–关系...
                ];

                // æ ¹æ®å…³ç³»æ•°æ®ç”Ÿæˆè¿žæŽ¥çº¿
                var links = [];
                relationships.forEach(function(relationship) {
                    var sourceIndex = nodes.indexOf(relationship.source);
                    var targetIndex = nodes.indexOf(relationship.target);
                    if (sourceIndex !== -1 && targetIndex !== -1) {
                        links.push({
                            source: sourceIndex,
                            target: targetIndex
                        });
                    }

                });
                console.log(links);
                // æ ¹æ®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) // å¯ä»¥æ ¹æ®ç´¢å¼•è®¾ç½®ä¸åŒçš„颜色
                        }
                    };
                });
                // è®¾ç½®é¢œè‰²
                function getColorByIndex(index) {
                    var colors = ['#ecf4ff', '#dd9795', '#f1edbe', '#ecf4ff', '#c5dbd8']; // å¯ä»¥æ ¹æ®å®žé™…情况设置颜色数组
                    return colors[index % colors.length];
                }
                var option;
                option = {
                    tooltip: {},
@@ -261,50 +350,17 @@
                    series: [{
                        type: 'graph',
                        layout: 'none',
                        symbolSize: 50,
                        // roam: true,
                        symbolSize: 40, // è°ƒæ•´èŠ‚点大小
                        label: {
                            show: true
                            show: true,
                            color: 'black' // è®¾ç½®èŠ‚点文字颜色为黑色
                        },
                        edgeSymbol: ['circle'],
                        edgeSymbolSize: [4, 10],
                        edgeLabel: {
                            fontSize: 20
                        },
                        data: [{
                                name: 'Node 1',
                                x: 300,
                                y: 300,
                                itemStyle: {
                                    color: 'yellow' // èŠ‚点背景色为黄色
                                }
                            },
                            {
                                name: 'Node 2',
                                x: 800,
                                y: 300,
                                itemStyle: {
                                    color: 'red' // èŠ‚点背景色为黄色
                                }
                            },
                            {
                                name: 'Node 3',
                                x: 550,
                                y: 100,
                                itemStyle: {
                                    color: 'blue' // èŠ‚点背景色为黄色
                                }
                            },
                            {
                                name: 'Node 4',
                                x: 550,
                                y: 500,
                                itemStyle: {
                                    color: 'green' // èŠ‚点背景色为绿色
                                }
                            }
                        ],
                        // links: [],
                        data: nodeData,
                        links: [{
                                source: 0,
                                target: 1,
@@ -339,11 +395,12 @@
                    }]
                };

                // å°†ç”Ÿæˆçš„连接线添加到echarts图表的option中
                option.series[0].links = links;
                option && myChart.setOption(option);
            },
            // æ—¶ç©ºåœ°å›¾
            spaceTime() {

                var chartDom = document.getElementById('spaceTime');
                var myChart = echarts.init(chartDom);
                var option;
@@ -351,38 +408,6 @@
                const data = [{
                        name: '海门',
                        value: 9
                    },
                    {
                        name: '鄂尔多斯',
                        value: 12
                    },
                    {
                        name: '招远',
                        value: 12
                    },
                    {
                        name: '舟山',
                        value: 12
                    },
                    {
                        name: '齐齐哈尔',
                        value: 14
                    },
                    {
                        name: '盐城',
                        value: 15
                    },
                    {
                        name: '赤峰',
                        value: 16
                    },
                    {
                        name: '青岛',
                        value: 18
                    },
                    {
                        name: '乳山',
                        value: 18
                    },
                    {
                        name: '金昌',
@@ -421,35 +446,6 @@
                    æµ·é—¨: [121.15, 31.89],
                    é„‚尔多斯: [109.781327, 39.608266],
                    æ‹›è¿œ: [120.38, 37.35],
                    èˆŸå±±: [122.207216, 29.985295],
                    ä¹Œé²æœ¨é½: [87.68, 43.77],
                    æž£åº„: [117.57, 34.86],
                    æ­å·ž: [120.19, 30.26],
                    æ·„博: [118.05, 36.78],
                    éžå±±: [122.85, 41.12],
                    æº§é˜³: [119.48, 31.43],
                    åº“尔勒: [86.06, 41.68],
                    å®‰é˜³: [114.35, 36.1],
                    å¼€å°: [114.35, 34.79],
                    æµŽå—: [117, 36.65],
                    å¾·é˜³: [104.37, 31.13],
                    æ¸©å·ž: [120.65, 28.01],
                    ä¹æ±Ÿ: [115.97, 29.71],
                    é‚¯éƒ¸: [114.47, 36.6],
                    ä¸´å®‰: [119.72, 30.23],
                    å…°å·ž: [103.73, 36.03],
                    æ²§å·ž: [116.83, 38.33],
                    ä¸´æ²‚: [118.35, 35.05],
                    å—å……: [106.110698, 30.837793],
                    å¤©æ´¥: [117.2, 39.13],
                    å¯Œé˜³: [119.95, 30.07],
                    æ³°å®‰: [117.13, 36.18],
                    è¯¸æš¨: [120.23, 29.71],
                    éƒ‘å·ž: [113.65, 34.76],
                    å“ˆå°”滨: [126.63, 45.75],
                    èŠåŸŽ: [115.97, 36.45],
                    èŠœæ¹–: [118.38, 31.33],
                    å”å±±: [118.02, 39.63],
                    å¹³é¡¶å±±: [113.29, 33.75],
                    é‚¢å°: [114.48, 37.05],
                    å¾·å·ž: [116.29, 37.45],
@@ -495,7 +491,7 @@
                    },
                    bmap: {
                        center: [104.114129, 37.550339],
                        zoom: 5,
                        zoom: 1,
                        roam: true,
                        mapStyle: {
                            styleJson: [{
@@ -510,62 +506,6 @@
                                    elementType: 'all',
                                    stylers: {
                                        color: '#f3f3f3'
                                    }
                                },
                                {
                                    featureType: 'railway',
                                    elementType: 'all',
                                    stylers: {
                                        visibility: 'off'
                                    }
                                },
                                {
                                    featureType: 'highway',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#fdfdfd'
                                    }
                                },
                                {
                                    featureType: 'highway',
                                    elementType: 'labels',
                                    stylers: {
                                        visibility: 'off'
                                    }
                                },
                                {
                                    featureType: 'arterial',
                                    elementType: 'geometry',
                                    stylers: {
                                        color: '#fefefe'
                                    }
                                },
                                {
                                    featureType: 'arterial',
                                    elementType: 'geometry.fill',
                                    stylers: {
                                        color: '#fefefe'
                                    }
                                },
                                {
                                    featureType: 'poi',
                                    elementType: 'all',
                                    stylers: {
                                        visibility: 'off'
                                    }
                                },
                                {
                                    featureType: 'green',
                                    elementType: 'all',
                                    stylers: {
                                        visibility: 'off'
                                    }
                                },
                                {
                                    featureType: 'subway',
                                    elementType: 'all',
                                    stylers: {
                                        visibility: 'off'
                                    }
                                },
                                {
@@ -676,6 +616,7 @@
                    ]
                };


                option && myChart.setOption(option);

            },
@@ -685,6 +626,31 @@
</script>

<style>
    /* ä¸ªäººå°ä¼  ------------------*/
    ::v-deep .el-dialog__header {
        display: none;
    }

    ::v-deep .el-dialog__body {
        padding: 0;
    }
    ::v-deep .el-dialog__wrapper{
        z-index: 999999999999999 !important;
    }

    .ProfileNav {
        width: 100%;
        height: 0.7rem;
        background: url(@/static/image/ProfileBg.png);
        background-size: 100% 100%;
        font-size: .24rem;
        color: #2C2C2C;
        font-weight: bold;
    }

    /* ------------------- */


    img {
        width: 100%;
        height: 100%;
@@ -724,29 +690,34 @@
    .Midde {
        background-color: #dbeafd;
        color: #000;
        padding: 5rpx 40rpx 0;
        /* padding: 5rpx 40rpx 0; */
        padding: .24rem .18rem;
        align-items: flex-start;

        view {
            color: #000;
        }


        .MiddeBack {
            width: 0.6rem;
            height: 0.24rem;
        }
    }


    .fz {
        line-height: 1.3;
        /* line-height: 1.3;
        height: 100rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        -webkit-box-orient: vertical; */
        color: #2C2C2C;
    }

    ::v-deep .el-card__body {
        padding: 10rpx !important;
        padding: .1rem !important;
    }

    /* echart地图水印 */
@@ -762,17 +733,49 @@
        background-color: transparent;
    }

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

    }

    ::v-deep .el-tabs__nav-scroll {
        display: flex;
        justify-content: center;
    }

    ::v-deep .el-tabs__item {
        font-size: 20rpx;
        width: 1rem;
        font-size: .14rem;
        line-height: 40rpx;
        height: 40rpx;
    }

    ::v-deep .el-tabs__header{
        margin: 0 0 10rpx;
    }

    ::v-deep .el-tabs__active-bar {
        /* è®¾ç½®æ»šåŠ¨æ¡å®½åº¦ */
        width: 1rem !important;
        height: .03rem !important;
        background-color: #597AA5;
        transform: translateX(-20px);
        /* margin-top: .09rem; */
    }

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

    ::v-deep .el-table::before {
        background-color: #fff !important;
    }

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

    .BoxRight .box-card {
        margin-bottom: .2rem !important;
    }
</style>

 pages/zhongyi/zhongyi.vue

@@ -2,7 +2,7 @@
    <el-container>
        <!-- å¤´éƒ¨ -->
        <el-header>
            <div style="
            <view style="
        display: flex;
        height: 50px;
        width: 100%;
@@ -10,34 +10,34 @@
        align-items: center;
        background-color: #C98A49;
      ">
                <div class="header-one" style="padding-left: 1.5%; ">
                <view class="header-one" style="padding-left: 1.5%; ">
                    <i class="el-icon-s-unfold" style="font-size: 24px;"></i>
                </div>
                <div class="header-two" style="font-size: 20px; color: aliceblue">
                </view>
                <view class="header-two" style="font-size: 20px; color: aliceblue">
                    ä¸­åŒ»ä¸–医传承数据库
                </div>
                <div class="header-three">
                    <div>
                </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>
                    </div>
                </div>
            </div>
            <div class="huawenimg">
            </div>
                    </view>
                </view>
            </view>
            <view class="huawenimg">
            </view>
        </el-header>
        <!-- ä¸»ä½“部分 -->
        <el-main>
            <div style="
            <view style="
          display: flex;
          justify-content: center;
          border-bottom: 1px solid gray;">
                <div style="display: flex; justify-content: flex-start; margin-right: auto">
                <view style="display: flex; justify-content: flex-start; margin-right: auto">
                    <el-button class="button" @click="hideNodesAndLinks()">返回</el-button>
                </div>
                </view>
                <!-- æ·»åŠ ä¸€ä¸ªflex容器来包裹el-menu，并设置其flex属性以占据剩余空间 -->
                <div style="display: flex; justify-content: center; flex: 1;">
                <view style="display: flex; justify-content: center; flex: 1;">
                    <!-- è¿™é‡Œæ˜¯èœå•çš„切换 -->
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                        @select="handleSelect">
@@ -49,8 +49,8 @@
                            <router-link to="zhongyitwo" class="router-link-active">
                                ä¸–医文化</router-link></el-menu-item>
                    </el-menu>
                </div>
            </div>
                </view>
            </view>
            <router-view>
            </router-view>
        </el-main>
@@ -58,7 +58,13 @@
</template>
<script>
    import * as echarts from "echarts";
    export default {}
    export default {
        data() {
            return {
                activeIndex:1
            }
        }
    }
</script>
<style scoped>
    .huawenimg {

 static/image/ProfileBg.png

 static/image/characterRelationBg.png

 static/image/logo.png

 static/image/profile.svg

New file
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><circle class="cls-1" cx="17" cy="14.73" r="6.23"/><path class="cls-1" d="M17,0A17,17,0,1,0,34,17,17,17,0,0,0,17,0Zm7.05,27.77A5.35,5.35,0,0,0,20,22.67a8.33,8.33,0,0,1-5.86,0,5.32,5.32,0,0,0-3.93,5.06H7.93a7.24,7.24,0,0,1,3.74-6.42,8.5,8.5,0,1,1,10.76-.09,7.26,7.26,0,0,1,3.89,6.51Z"/></g></g></svg>

 static/image/quote.svg

New file
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M17,0A17,17,0,1,0,34,17,17,17,0,0,0,17,0Zm1.4,27.65H15.49v-2.9H18.4Zm4.61-13a11.91,11.91,0,0,1-2.5,2.8,12,12,0,0,0-1.63,1.63,3.74,3.74,0,0,0-.57,1.21,10.22,10.22,0,0,0-.21,2.21H15.65v-.76a7.25,7.25,0,0,1,.42-2.61,5.91,5.91,0,0,1,1-1.66,18.08,18.08,0,0,1,1.84-1.77,8.45,8.45,0,0,0,1.7-1.88,3,3,0,0,0,.4-1.51,3.57,3.57,0,0,0-1.16-2.62A4,4,0,0,0,17,8.59a3.87,3.87,0,0,0-2.74,1,5.4,5.4,0,0,0-1.43,3.2l-2.65-.34A6.71,6.71,0,0,1,12.31,8a6.74,6.74,0,0,1,4.63-1.55,6.92,6.92,0,0,1,4.87,1.66,5.25,5.25,0,0,1,1.82,4A5.13,5.13,0,0,1,23,14.68Z"/></g></g></svg>

 static/image/search.svg

New file
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><circle class="cls-1" cx="15.95" cy="15.44" r="6.7"/><path class="cls-1" d="M17,0A17,17,0,1,0,34,17,17,17,0,0,0,17,0ZM16,24.82a9.39,9.39,0,1,1,9.39-9.38A9.38,9.38,0,0,1,16,24.82Zm9.79,2.95L22,24l1.87-1.89,3.75,3.76Z"/></g></g></svg>

 static/image/ËÑË÷.png

 static/image/Óû§×¢²á.png

 static/image/Óû§µÇ¼.png

 static/image/ÖØÖÃÃÜÂë.png

 static/initialize.css

@@ -1,9 +1,16 @@
    * {
        margin: 0%;
        padding: 0;
        /* box-sizing: border-box; */
        box-sizing: border-box;
    }
    html {
        font-size: calc(100 * 100vw / 1440) !important;
        /* font-size: 10px; */
    }

    body {
        font-size: .16rem !important;
    }
    .flex {
        display: flex;
        align-items: center;
@@ -41,6 +48,9 @@
    .flex-content{
        justify-content: space-around;
    }
    .flex-items-start{
        align-items: flex-start;
    }

    .relative {
        position: relative;