| | |
| | | <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="Ttop flex flex-center flex-wrap" style="flex-direction: column"> |
| | | <view ></view> |
| | | <view ref="Rtop"> |
| | | <text class="login"></text> |
| | | <text |
| | | style=" |
| | | <text style=" |
| | | font-size: 0.36rem; |
| | | letter-spacing: 4rpx; |
| | | vertical-align: middle; |
| | | font-family: cursive; |
| | | font-weight: bold; |
| | | " |
| | | >中国历代医学人物知识库</text |
| | | > |
| | | ">中国历代医学人物知识库</text> |
| | | </view> |
| | | <view></view> |
| | | </view> |
| | | <el-card> |
| | | <!-- 用户登录 v-if="isLogin"--> |
| | | <view |
| | | class="LoginTop" |
| | | style=" |
| | | <view class="LoginTop" style=" |
| | | display: flex; |
| | | justify-content: space-between; |
| | | margin-bottom: 0.47rem; |
| | | align-items: center; |
| | | " |
| | | > |
| | | "> |
| | | <!-- <view style="color: #244A7B;padding-bottom: .47rem;font-size: .3rem;font-weight: bold;">用户登录</view> --> |
| | | <view class="LoginBg"></view> |
| | | <view > </view> |
| | | </view> |
| | | |
| | | <el-form |
| | | :hide-required-asterisk="true" |
| | | ref="formLogin1" |
| | | label-position="top" |
| | | :rules="rules1" |
| | | :model="loginData" |
| | | > |
| | | <el-form :hide-required-asterisk="true" ref="formLogin1" label-position="top" :rules="rules1" |
| | | :model="loginData"> |
| | | <el-form-item label="登录账号" prop="loginID"> |
| | | <input v-model="loginData.loginID" @confirm="Login('formLogin1')"></input> |
| | | </el-form-item> |
| | |
| | | <input type="password" v-model="loginData.pass" @confirm="Login('formLogin1')"></input> |
| | | </el-form-item> |
| | | <el-form-item class="btn"> |
| | | <el-button |
| | | class="font-family" |
| | | style=" |
| | | <el-button class="font-family" style=" |
| | | margin-top: 0.47rem; |
| | | font-weight: 900; |
| | | font-size: 0.3rem; |
| | |
| | | background-color: #244a7b; |
| | | color: #fff; |
| | | padding: 0.16rem; |
| | | " |
| | | size="medium" |
| | | @click="Login('formLogin1')" |
| | | >登录</el-button |
| | | > |
| | | " size="medium" @click="Login('formLogin1')">登录</el-button> |
| | | </el-form-item> |
| | | <view |
| | | |
| | | style="display: flex; font-size: 0.14rem; color: #244a7b" |
| | | > |
| | | <view |
| | | |
| | | style="display: inline-block; cursor: pointer" |
| | | @click="forgetPass" |
| | | >忘记密码 |
| | | <view style="display: flex; font-size: 0.14rem; color: #244a7b"> |
| | | <view style="display: inline-block; cursor: pointer" @click="forgetPass">忘记密码 |
| | | </view> |
| | | <view style="display: inline-block; margin: 0 20rpx"> |
| | | | |
| | | </view> |
| | | <view |
| | | |
| | | style="display: inline-block; cursor: pointer" |
| | | @click="quickRegister" |
| | | >快速注册 |
| | | <view style="display: inline-block; cursor: pointer" @click="quickRegister">快速注册 |
| | | </view> |
| | | </view> |
| | | </el-form> |
| | |
| | | background: url(@/static/image/bg1.png); |
| | | width: 100vw; |
| | | height: 100vh; |
| | | |
| | | color: #fff; |
| | | } |
| | | |
| | | .repository { |
| | | .container .repository { |
| | | width: 100% !important; |
| | | /* margin-top: 19px; */ |
| | | /* height: 68%; */ |
| | |
| | | justify-content: space-around; |
| | | align-items: center; |
| | | |
| | | .Ttop { |
| | | |
| | | } |
| | | |
| | | .container .repository .Ttop { |
| | | margin-top: 0.38rem; |
| | | margin-bottom: 1.22rem; |
| | | } |
| | | |
| | | .r-top { |
| | | .container .repository .r-top { |
| | | font-size: 40rpx !important; |
| | | margin: 10rpx 0; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .login { |
| | |
| | | padding: 0 20px; |
| | | text-align: center; |
| | | |
| | | li { |
| | | |
| | | } |
| | | |
| | | .secretary li { |
| | | background-color: #fff; |
| | | color: black; |
| | | height: 600rpx; |
| | |
| | | /* padding: 58rpx 128rpx 88rpx; */ |
| | | text-align: center; |
| | | background: #ebf4ff; |
| | | } |
| | | } |
| | | |
| | | .Bbottom { |
| | |
| | | margin-bottom: 0.19rem; |
| | | " |
| | | > |
| | | <el-checkbox v-model="checked" style="margin-right: 0.06rem;"></el-checkbox> |
| | | <el-checkbox |
| | | v-model="checked" |
| | | style="margin-right: 0.06rem" |
| | | ></el-checkbox> |
| | | 用户注册即代表同意 |
| | | <span |
| | | class="cursor" |
| | |
| | | { |
| | | name: "地域图谱", |
| | | id: 4 |
| | | }, |
| | | } |
| | | // { |
| | | // name: "中医医事制度", |
| | | // id: 5 |
| | |
| | | async Login(formName) { |
| | | if(!this.checked) { |
| | | this.$message({ |
| | | message: '请勾选同意服务条款、用户隐私保护和个人信息条款', |
| | | type: 'warning' |
| | | message: "请勾选同意服务条款、用户隐私保护和个人信息条款", |
| | | type: "warning" |
| | | }); |
| | | return false; |
| | | } |
| | |
| | | height: 100vh; |
| | | |
| | | color: #fff; |
| | | |
| | | .repository { |
| | | } |
| | | .container .repository { |
| | | width: 100% !important; |
| | | /* margin-top: 19px; */ |
| | | /* height: 68%; */ |
| | |
| | | flex-direction: column; |
| | | justify-content: space-around; |
| | | align-items: center; |
| | | |
| | | .Ttop { |
| | | } |
| | | .container .repository .Ttop { |
| | | margin-top: 0.38rem; |
| | | margin-bottom: 1.22rem; |
| | | } |
| | | |
| | | .r-top { |
| | | .container .repository .r-top { |
| | | font-size: 40rpx !important; |
| | | margin: 10rpx 0; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .login { |
| | |
| | | padding: 0 20px; |
| | | text-align: center; |
| | | |
| | | li { |
| | | } |
| | | .secretary li { |
| | | background-color: #fff; |
| | | color: black; |
| | | height: 600rpx; |
| | |
| | | /* padding: 58rpx 128rpx 88rpx; */ |
| | | text-align: center; |
| | | background: #ebf4ff; |
| | | } |
| | | } |
| | | |
| | | .Bbottom { |
| | |
| | | background-color: #0c274c; |
| | | padding: 25rpx; |
| | | color: #fff !important; |
| | | |
| | | img { |
| | | } |
| | | .NavTop img { |
| | | width: 30rpx; |
| | | height: 30rpx; |
| | | vertical-align: middle; |
| | | } |
| | | |
| | | .NavTopr { |
| | | .NavTop .NavTopr { |
| | | img { |
| | | margin-right: 10rpx; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .mImage { |
| | | width: 100%; |
| | | height: 40rpx; |
| | | |
| | | img { |
| | | vertical-align: top; |
| | | } |
| | | .mImage img { |
| | | vertical-align: top; |
| | | } |
| | | |
| | | .centre { |
| | | padding-left: 1.23rem; |
| | | padding-right: 1.17rem; |
| | | align-items: stretch; |
| | | |
| | | .CLeft { |
| | | } |
| | | .centre .CLeft { |
| | | width: 2.4rem; |
| | | flex-direction: column; |
| | | margin-right: 0.2rem; |
| | | .institution { |
| | | } |
| | | .centre .CLeft .institution { |
| | | width: 100%; |
| | | border: 1px solid #000; |
| | | padding: 20rpx; |
| | | } |
| | | .institution2 { |
| | | .centre .CLeft .institution2 { |
| | | margin: 20rpx 0; |
| | | } |
| | | .institution3 { |
| | | .centre .CLeft .institution3 { |
| | | flex-grow: 1; |
| | | } |
| | | } |
| | | |
| | | .CRight { |
| | | .centre .CRight { |
| | | flex: 1; |
| | | border: 1px solid #c1d3ea; |
| | | box-sizing: border-box; |
| | | overflow: hidden; |
| | | padding: 0.1rem 0.2rem; |
| | | } |
| | | } |
| | | |
| | | .CommodityList { |
| | |
| | | align-content: flex-start; |
| | | /* padding: 20rpx 20rpx 0 20rpx; */ |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | > .rightList { |
| | | .CommodityList .rightList { |
| | | width: 49%; |
| | | margin-bottom: 20rpx; |
| | | } |
| | | |
| | | .box-card { |
| | | .CommodityList .rightList .box-card { |
| | | overflow: visible; |
| | | } |
| | | } |
| | | } |
| | | |
| | | /* ::v-deep .el-card__body{ |
| | |
| | | right: 0; |
| | | top: 0; |
| | | z-index: 99999 !important; |
| | | > div { |
| | | } |
| | | |
| | | .dialog div { |
| | | height: 100%; |
| | | margin: 0 !important; |
| | | position: fixed; |
| | | right: 0; |
| | | top: 86px; |
| | | } |
| | | |
| | | > :nth-child(1) { |
| | | .dialog div:nth-child(1) { |
| | | display: none; |
| | | } |
| | | |
| | | > :nth-child(2) { |
| | | .dialog div:nth-child(2) { |
| | | padding: 0; |
| | | } |
| | | } |
| | | } |
| | | |
| | | ::v-deep .el-dialog .el-dialog__body { |
| | |
| | | width: 100%; |
| | | height: 1.94rem; |
| | | color: #000; |
| | | |
| | | img { |
| | | } |
| | | .detailImage img { |
| | | position: absolute; |
| | | width: 100%; |
| | | height: 100%; |
| | | vertical-align: top; |
| | | } |
| | | } |
| | | |
| | | /* 搜索按钮 */ |
| | |
| | | min-height: 2rem !important; |
| | | position: relative; |
| | | border: 1px solid #c1d3ea !important; |
| | | |
| | | ul { |
| | | } |
| | | .boox ul { |
| | | margin-top: 0.16rem !important; |
| | | } |
| | | |
| | | h3 { |
| | | .boox h3 { |
| | | font-size: 0.14rem; |
| | | margin-left: 0.1rem; |
| | | } |
| | | |
| | | li { |
| | | .boox li { |
| | | height: 0.3rem; |
| | | line-height: 0.3rem; |
| | | padding: 0 0.2rem !important; |
| | |
| | | font-size: 0.14rem; |
| | | } |
| | | |
| | | .toggleButton1 { |
| | | .boox .toggleButton1 { |
| | | position: absolute; |
| | | bottom: 0.1rem !important; |
| | | left: 40% !important; |
| | | } |
| | | |
| | | .toggleButton { |
| | | .boox .toggleButton { |
| | | font-size: 0.14rem !important; |
| | | } |
| | | } |
| | | |
| | | .paixu { |
| | |
| | | padding: 0.14rem 0.2rem 0.23rem; |
| | | |
| | | /* position: relative; */ |
| | | .biecheng { |
| | | } |
| | | .rightList .desBox .biecheng { |
| | | height: 0.24rem; |
| | | /* line-height: .24rem; */ |
| | | font-size: 0.12rem; |
| | |
| | | margin-bottom: 0.12rem; |
| | | } |
| | | |
| | | .describe { |
| | | .rightList .desBox .describe { |
| | | position: absolute; |
| | | bottom: 0.1rem; |
| | | left: 0; |
| | |
| | | height: 0.49rem; |
| | | line-height: 0.24rem; |
| | | font-size: 0.12rem; |
| | | } |
| | | } |
| | | |
| | | .nullBox { |
| | |
| | | height: 0.4rem !important; |
| | | line-height: 0.4rem !important; |
| | | } |
| | | } |
| | | |
| | | ::v-deep .el-table__body .cell { |
| | | font-size: 0.14rem !important; |
| | | height: 0.4rem !important; |
| | | line-height: 0.4rem !important; |
| | | } |
| | | } |
| | | |
| | | /* --------------- */ |
| | |
| | | .BoxRight { |
| | | width: 70%; |
| | | } |
| | | |
| | | |
| | | |
| | | /* 个人小传 ------------------*/ |
| | | ::v-deep .el-dialog__header { |
| | |
| | | background-color: #0c274c; |
| | | padding: 15rpx 25rpx; |
| | | color: #fff !important; |
| | | |
| | | } |
| | | .NavTop img { |
| | | width: 30rpx; |
| | |
| | | .mImage { |
| | | width: 100%; |
| | | height: 30rpx; |
| | | |
| | | } |
| | | .mImage img { |
| | | vertical-align: top; |
| | |
| | | color: #000; |
| | | align-items: flex-start; |
| | | padding: 0.18rem 0.24rem; |
| | | |
| | | } |
| | | .Midde view { |
| | | color: #000; |
| | |
| | | |
| | | .yinyong { |
| | | font-size: 0.12rem; |
| | | |
| | | } |
| | | .yinyong img { |
| | | width: 0.12rem; |
| | |
| | | /* 右侧 */ |
| | | .rightList { |
| | | padding-left: 0.2rem !important; |
| | | |
| | | .light { |
| | | } |
| | | .rightList .light { |
| | | padding: 0.1rem 0.2rem !important; |
| | | } |
| | | |
| | | .lightTop { |
| | | .rightList .lightTop { |
| | | font-size: 0.14rem !important; |
| | | } |
| | | |
| | | .el-button { |
| | | .rightList .el-button { |
| | | font-size: 0.12rem !important; |
| | | padding: 0.05rem 0.18rem !important; |
| | | } |
| | | |
| | | .lightBo { |
| | | .rightList .lightBo { |
| | | font-size: 0.14rem !important; |
| | | } |
| | | |
| | | .lightBo .is-leaf { |
| | | .rightList .lightBo .is-leaf { |
| | | background-color: #c1d3ea !important; |
| | | color: #2c2c2c !important; |
| | | font-weight: 400; |
| | | } |
| | | |
| | | .lightBo .is-leaf .cell { |
| | | .rightList .lightBo .is-leaf .cell { |
| | | height: 0.3rem !important; |
| | | line-height: 0.3rem !important; |
| | | } |
| | | |
| | | .el-table__body-wrapper .el-table__row { |
| | | .rightList .el-table__body-wrapper .el-table__row { |
| | | height: 0.46rem !important; |
| | | line-height: 0.46rem !important; |
| | | } |
| | | .el-table__body-wrapper .el-table__row .cell { |
| | | .rightList .el-table__body-wrapper .el-table__row .cell { |
| | | height: 0.3rem !important; |
| | | line-height: 0.3rem !important; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 2560px) and (max-width: 3840px) { |
| | |
| | | .hotSearch { |
| | | font-size: 0.12rem !important; |
| | | margin-bottom: 0.19rem !important; |
| | | } |
| | | |
| | | li { |
| | | .hotSearch li { |
| | | font-size: 0.12rem !important; |
| | | margin: 0 0.1rem; |
| | | } |
| | | } |
| | | |
| | | .advancedSeaTrue, |
| | |
| | | padding: 0.1rem 0.09rem; |
| | | min-height: 2rem !important; |
| | | position: relative; |
| | | |
| | | ul { |
| | | } |
| | | .boox ul { |
| | | margin-top: 0.16rem !important; |
| | | } |
| | | |
| | | h3 { |
| | | .boox h3 { |
| | | font-size: 0.14rem; |
| | | margin-left: 0.1rem; |
| | | } |
| | | |
| | | li { |
| | | .boox li { |
| | | height: 0.3rem; |
| | | line-height: 0.3rem; |
| | | padding: 0 0.2rem !important; |
| | |
| | | border-radius: 0.3rem !important; |
| | | } |
| | | |
| | | .toggleButton1 { |
| | | .boox .toggleButton1 { |
| | | position: absolute; |
| | | bottom: 0.1rem !important; |
| | | left: 40% !important; |
| | | } |
| | | |
| | | .toggleButton { |
| | | .boox .toggleButton { |
| | | font-size: 0.14rem !important; |
| | | } |
| | | } |
| | | |
| | | .zhongjianleft { |
| | |
| | | /* 右侧 */ |
| | | .rightList { |
| | | padding-left: 0.2rem !important; |
| | | |
| | | .light { |
| | | } |
| | | .rightList .light { |
| | | padding: 0.1rem 0.2rem !important; |
| | | } |
| | | |
| | | .lightTop { |
| | | .rightList .lightTop { |
| | | font-size: 0.14rem !important; |
| | | } |
| | | |
| | | .el-button { |
| | | .rightList .el-button { |
| | | font-size: 0.12rem !important; |
| | | padding: 0.05rem 0.18rem !important; |
| | | } |
| | | |
| | | .lightBo { |
| | | .rightList .lightBo { |
| | | font-size: 0.14rem !important; |
| | | } |
| | | |
| | | .is-leaf { |
| | | .rightList .lightBo .is-leaf { |
| | | background-color: #c1d3ea !important; |
| | | color: #2c2c2c !important; |
| | | font-weight: 400; |
| | | } |
| | | |
| | | .cell { |
| | | .rightList .lightBo .is-leaf .cell { |
| | | height: 0.3rem !important; |
| | | line-height: 0.3rem !important; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .el-table__body-wrapper { |
| | | .el-table__row { |
| | | .rightList .el-table__body-wrapper .el-table__row { |
| | | height: 0.46rem !important; |
| | | line-height: 0.46rem !important; |
| | | |
| | | .cell { |
| | | } |
| | | .rightList .el-table__body-wrapper .el-table__row .cell { |
| | | height: 0.3rem !important; |
| | | line-height: 0.3rem !important; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | .hotSearch { |
| | | font-size: 0.12rem !important; |
| | | margin-bottom: 0.19rem !important; |
| | | } |
| | | |
| | | li { |
| | | .hotSearch li { |
| | | font-size: 0.12rem !important; |
| | | margin: 0 0.1rem; |
| | | } |
| | | } |
| | | .advancedSeaTrue1 { |
| | | border: 1px solid #c1d3ea; |
| | |
| | | padding: 0.1rem 0.09rem; |
| | | min-height: 2rem !important; |
| | | position: relative; |
| | | |
| | | ul { |
| | | } |
| | | .boox ul { |
| | | margin-top: 0.16rem !important; |
| | | margin-bottom: 0.2rem !important; |
| | | } |
| | | |
| | | h3 { |
| | | .boox h3 { |
| | | font-size: 0.14rem; |
| | | margin-left: 0.1rem; |
| | | } |
| | | |
| | | li { |
| | | .boox li { |
| | | height: 0.3rem; |
| | | line-height: 0.3rem; |
| | | padding: 0 0.2rem !important; |
| | |
| | | border-radius: 0.3rem !important; |
| | | } |
| | | |
| | | .toggleButton1 { |
| | | .boox .toggleButton1 { |
| | | position: absolute; |
| | | bottom: 0.1rem !important; |
| | | left: 40% !important; |
| | | } |
| | | |
| | | .toggleButton { |
| | | .boox .toggleButton { |
| | | font-size: 0.14rem !important; |
| | | } |
| | | } |
| | | |
| | | .zhongjianleft { |
| | |
| | | .rightList { |
| | | width: 100%; |
| | | padding-left: 0.2rem !important; |
| | | |
| | | .light { |
| | | } |
| | | .rightList .light { |
| | | padding: 0.1rem 0.2rem !important; |
| | | } |
| | | |
| | | .lightTop { |
| | | .rightList .lightTop { |
| | | font-size: 0.14rem !important; |
| | | } |
| | | |
| | | .el-button { |
| | | .rightList .el-button { |
| | | font-size: 0.12rem !important; |
| | | padding: 0.05rem 0.18rem !important; |
| | | } |
| | | |
| | | .lightBo { |
| | | .rightList .lightBo { |
| | | font-size: 0.14rem !important; |
| | | |
| | | .is-leaf { |
| | | } |
| | | .rightList .lightBo .is-leaf { |
| | | background-color: #c1d3ea !important; |
| | | color: #2c2c2c !important; |
| | | font-weight: 400; |
| | | } |
| | | |
| | | .cell { |
| | | .rightList .lightBo .is-leaf .cell { |
| | | height: 0.3rem !important; |
| | | line-height: 0.3rem !important; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .el-table__body-wrapper { |
| | | .el-table__row { |
| | | .rightList .el-table__body-wrapper .el-table__row { |
| | | height: 0.46rem !important; |
| | | line-height: 0.46rem !important; |
| | | } |
| | | |
| | | .cell { |
| | | .rightList .el-table__body-wrapper .el-table__row .cell { |
| | | height: 0.3rem !important; |
| | | line-height: 0.3rem !important; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | .hotSearch { |
| | | font-size: 0.12rem; |
| | | margin-bottom: 0.19rem; |
| | | } |
| | | |
| | | li { |
| | | .hotSearch li { |
| | | font-size: 0.12rem; |
| | | margin: 0 0.1rem; |
| | | &.active { |
| | | } |
| | | .hotSearch li.active { |
| | | color: #027edc !important; |
| | | font-weight: bold; |
| | | } |
| | | } |
| | | } |
| | | |
| | | /* .a { |
| | | height: 2rem; |
| | | } |
| | | |
| | | .b { |
| | | height: 100px; |
| | | } */ |
| | | |
| | | .box { |
| | | transition: height 0.3s; |
| | |
| | | min-height: 2rem !important; |
| | | position: relative; |
| | | border: 1px solid #c1d3ea !important; |
| | | |
| | | ul { |
| | | } |
| | | .boox ul { |
| | | margin-top: 0.16rem !important; |
| | | } |
| | | |
| | | h3 { |
| | | .boox h3 { |
| | | font-size: 0.14rem; |
| | | margin-left: 0.1rem; |
| | | } |
| | | |
| | | li { |
| | | .boox li { |
| | | height: 0.3rem; |
| | | line-height: 0.3rem; |
| | | padding: 0 0.2rem !important; |
| | |
| | | font-size: 0.14rem; |
| | | } |
| | | |
| | | .toggleButton1 { |
| | | .boox .toggleButton1 { |
| | | position: absolute; |
| | | bottom: 0.1rem !important; |
| | | left: 40% !important; |
| | | } |
| | | |
| | | .toggleButton { |
| | | .boox .toggleButton { |
| | | font-size: 0.14rem !important; |
| | | } |
| | | } |
| | | |
| | | ::v-deep .el-table th, |
| | |
| | | <view class="relative"> |
| | | <headNav :idIndex="idIndex" text="历代人物" /> |
| | | <view class="Midde flex"> |
| | | <el-button class="MiddeBack flex flex-center" @click="goBack">返回</el-button> |
| | | <view style="width: 70%;" class="flex flex-center flex-column"> |
| | | <view 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> |
| | | <el-button class="MiddeBack flex flex-center" @click="goBack" |
| | | >返回</el-button |
| | | > |
| | | <view style="width: 70%" class="flex flex-center flex-column"> |
| | | <view style="font-weight: bold; font-size: 0.2rem">李时珍</view> |
| | | <ul class="flex" style="line-height: 1.2; margin: 0.15rem 0"> |
| | | <li |
| | | v-for="item in 4" |
| | | style=" |
| | | background-color: #fff; |
| | | padding: 0 0.08rem; |
| | | border: 0.01rem solid #000; |
| | | border-radius: 0.1rem; |
| | | font-size: 0.12rem; |
| | | text-align: center; |
| | | margin-right: 0.15rem; |
| | | " |
| | | > |
| | | VSDS |
| | | </li> |
| | | </ul> |
| | | <view class="fz font-family" |
| | | style="font-size: .13rem;font-weight: normal;line-height: .2rem;letter-spacing: .03rem;"> |
| | | <view |
| | | class="fz font-family" |
| | | style=" |
| | | font-size: 0.13rem; |
| | | font-weight: normal; |
| | | line-height: 0.2rem; |
| | | letter-spacing: 0.03rem; |
| | | " |
| | | > |
| | | 李时珍(1518年-1593年),字: |
| | | 东璧,时人谓之:李东璧。号濒湖,晚年自号濒湖山人,湖北薪州(今湖北省黄冈市薪春县薪州镇)人,汉族,生于明武宗正德十三年(公元1518年),卒于神宗万历二十二年(公元1593年)。是中国明代与万密斋齐名的医学家、药物学家、博物学家、著述家。李时珍对道家医学的继承是多方面的,曾参考历代有关医药及其学术书籍八百余种,结合自身经验和调查研究,历时27年编成《本草纲目》一书,是我国古代药物学的总结性巨著,在国内外均有很高的评价,已有几种文字的译本或节译本,其著有《濒湖脉学》 |
| | | </view> |
| | | <view class="flex" style="width: 100%;margin: .25rem 0 .15rem 0;"> |
| | | <view class="flex" style="width: 100%; margin: 0.25rem 0 0.15rem 0"> |
| | | <view > |
| | | <!-- <el-button style="padding: 10rpx;" size="mini" icon="el-icon-folder-add">收藏</el-button> --> |
| | | <el-button style="padding: .05rem .085rem;" class="yinyong flex"> |
| | | <img src="@/static/image/yinyong.png" alt="" />引用</el-button> |
| | | <el-button style="padding: 0.05rem 0.085rem" class="yinyong flex"> |
| | | <img src="@/static/image/yinyong.png" alt="" />引用</el-button |
| | | > |
| | | </view> |
| | | <view style="font-size: .12rem;color: #244A7B;" @click="ProfileClick">阅读更多></view> |
| | | <view style="font-size: 0.12rem; color: #244a7b" @click="ProfileClick" |
| | | >阅读更多></view |
| | | > |
| | | </view> |
| | | </view> |
| | | <view style="width: 5%;"></view> |
| | | <view style="width: 5%"></view> |
| | | </view> |
| | | <el-row style="padding: 0 1.2rem 0;padding-top: .24rem;"> |
| | | <el-row style="padding: 0 1.2rem 0; padding-top: 0.24rem"> |
| | | <!-- 左侧 --> |
| | | <el-col :span="5" class="BoxLeft" style="padding-right: .2rem;width: 2.8rem;"> |
| | | <el-col |
| | | :span="5" |
| | | class="BoxLeft" |
| | | style="padding-right: 0.2rem; width: 2.8rem" |
| | | > |
| | | <div class="grid-content bg-purple-dark flex flex-column"> |
| | | <el-card class="box-card" style="width: 100%;height: 2.06rem;"> |
| | | <div class="clearfix flex" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;"> |
| | | <span style="margin-left: .12rem;font-size: .14rem;font-weight: 900;">关系图谱</span> |
| | | <el-card class="box-card" style="width: 100%; height: 2.06rem"> |
| | | <div |
| | | class="clearfix flex" |
| | | style=" |
| | | font-weight: 900; |
| | | font-size: 0.14rem; |
| | | padding-bottom: 0.1rem; |
| | | " |
| | | > |
| | | <span |
| | | style=" |
| | | margin-left: 0.12rem; |
| | | font-size: 0.14rem; |
| | | font-weight: 900; |
| | | " |
| | | >关系图谱</span |
| | | > |
| | | <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0;" type="text"></el-button> --> |
| | | <img src="@/static/image/fangda.png" @click="fangdaClick(1)" |
| | | style="width: .18rem;height: .18rem;" alt="" /> |
| | | <img |
| | | src="@/static/image/fangda.png" |
| | | @click="fangdaClick(1)" |
| | | style="width: 0.18rem; height: 0.18rem" |
| | | alt="" |
| | | /> |
| | | </div> |
| | | <view id="relation" style="height: 1.51rem;width: 100%;"></view> |
| | | <view id="relation" style="height: 1.51rem; width: 100%"></view> |
| | | </el-card> |
| | | <el-card class="box-card" style="width: 100%;height: 2.06rem; margin: .26rem 0;"> |
| | | <div class="clearfix flex" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;"> |
| | | <el-card |
| | | class="box-card" |
| | | style="width: 100%; height: 2.06rem; margin: 0.26rem 0" |
| | | > |
| | | <div |
| | | class="clearfix flex" |
| | | style=" |
| | | font-weight: 900; |
| | | font-size: 0.14rem; |
| | | padding-bottom: 0.1rem; |
| | | " |
| | | > |
| | | <span>时空地图</span> |
| | | <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text"></el-button> --> |
| | | <img src="@/static/image/fangda.png" @click="fangdaClick(2)" |
| | | style="width: .18rem;height: .18rem;" alt="" /> |
| | | <img |
| | | src="@/static/image/fangda.png" |
| | | @click="fangdaClick(2)" |
| | | style="width: 0.18rem; height: 0.18rem" |
| | | alt="" |
| | | /> |
| | | </div> |
| | | <view id="spaceTime" style="height: 1.51rem;width: 100%;position: relative;"></view> |
| | | <view |
| | | id="spaceTime" |
| | | style="height: 1.51rem; width: 100%; position: relative" |
| | | ></view> |
| | | </el-card> |
| | | <el-card style="width: 100%;height: 2.06rem;"> |
| | | <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;"> |
| | | <el-card style="width: 100%; height: 2.06rem"> |
| | | <div |
| | | class="clearfix" |
| | | style=" |
| | | font-weight: 900; |
| | | font-size: 0.14rem; |
| | | padding-bottom: 0.1rem; |
| | | " |
| | | > |
| | | <span>来源</span> |
| | | </div> |
| | | <ul class="font-family" style="height: 300rpx;font-size: .12rem;line-height: .3rem;"> |
| | | <ul |
| | | class="font-family" |
| | | style="height: 300rpx; font-size: 0.12rem; line-height: 0.3rem" |
| | | > |
| | | <li>1.《明史·卷二百九十九·列作品. p52</li> |
| | | <li>2.《进(本草纲目)疏》 p52</li> |
| | | </ul> |
| | |
| | | </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;"> |
| | | <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: 0.14rem; |
| | | padding-bottom: 0.1rem; |
| | | " |
| | | > |
| | | <span>基础信息</span> |
| | | </div> |
| | | <!-- 基础信息 --> |
| | | <cc-defineTable :tableData="tableArr"></cc-defineTable> |
| | | </el-card> |
| | | <el-card class="box-card" style=" min-height: 1.91rem; margin: .2rem 0;"> |
| | | <el-card |
| | | class="box-card" |
| | | style="min-height: 1.91rem; margin: 0.2rem 0" |
| | | > |
| | | <el-tabs ref="tabs" v-model="activeName" @tab-click="handleClick"> |
| | | <el-tab-pane label="代表著作" data-id="1" name="representative"> |
| | | <Table1 :data="tableData" :columns="tableColumns" /> |
| | |
| | | <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-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;"> |
| | | <el-card style="margin-bottom: 0.2rem"> |
| | | <div |
| | | class="clearfix" |
| | | style=" |
| | | font-weight: 900; |
| | | font-size: 0.14rem; |
| | | padding-bottom: 0.1rem; |
| | | " |
| | | > |
| | | <span>相关附表/图像</span> |
| | | </div> |
| | | <view class="flex"> |
| | | <el-image v-for="item in 4" :key="item" style="width: 2.05rem; height: 1.4rem" |
| | | <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> |
| | | fit="fill" |
| | | ></el-image> |
| | | </view> |
| | | </el-card> |
| | | <el-card class="box-card"> |
| | | <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;"> |
| | | <div |
| | | class="clearfix" |
| | | style=" |
| | | font-weight: 900; |
| | | font-size: 0.14rem; |
| | | padding-bottom: 0.1rem; |
| | | " |
| | | > |
| | | <span>相关附表/图像</span> |
| | | </div> |
| | | <ul class="font-family" style="font-size: .13rem;line-height: 2;"> |
| | | <ul class="font-family" style="font-size: 0.13rem; line-height: 2"> |
| | | <li> |
| | | [1|刘炜,谢蓉,张磊,等.向人文研究的国家数据基础设施建设[J|.中国图书馆学报,2016,42(5):29-39. |
| | | </li> |
| | |
| | | [2|周晨.国际数字人文研究特征与知识结构|J图书馆论坛2017.37(4):1-8. |
| | | </li> |
| | | <li> |
| | | [3]傅德华,于翠艳,李春博,关于创建“20 世纪中国人物传记资料全文数据库治的构想[川,中国者引,2009,714):24-26. |
| | | [3]傅德华,于翠艳,李春博,关于创建“20 |
| | | 世纪中国人物传记资料全文数据库治的构想[川,中国者引,2009,714):24-26. |
| | | </li> |
| | | <li> |
| | | [4|于翠艳,傅德华,李春博,关于“20世纪中国人物传记资料全文数据库治的进展与困惑[J1.中国常引,2012.10111:20-22 |
| | |
| | | |
| | | <!-- 个人小传 --> |
| | | <el-dialog :visible.sync="isProfile"> |
| | | <view class="ProfileNav flex flex-center"> |
| | | 个人小传 |
| | | </view> |
| | | <view style="padding: .44rem .3rem;min-height: 7.32rem;"> |
| | | <view class="ProfileNav flex flex-center"> 个人小传 </view> |
| | | <view style="padding: 0.44rem 0.3rem; min-height: 7.32rem"> |
| | | <view |
| | | style="margin-bottom: .2rem; background-color: #F0F0F0;padding: .18rem .1rem .1rem .27rem;font-size: .12rem;line-height: .24rem;font-weight: 400;"> |
| | | <view style="color: #2C2C2C;"> |
| | | style=" |
| | | margin-bottom: 0.2rem; |
| | | background-color: #f0f0f0; |
| | | padding: 0.18rem 0.1rem 0.1rem 0.27rem; |
| | | font-size: 0.12rem; |
| | | line-height: 0.24rem; |
| | | font-weight: 400; |
| | | " |
| | | > |
| | | <view style="color: #2c2c2c"> |
| | | 蕙展丁丑同里日岩额序先考月池翁著《四彭酸明》八卷,皆精指奥室,茂犀未能疯造,珍因撮粹想菜,僵撰此唐,以便智睛,服指南。世之雷病雨家,咸以服焉首务,不知派乃四能之末,谓之巧者雨。上士欲舍其全,非四不可。 |
| | | </view> |
| | | <view class="flex"> |
| | | <view ></view> |
| | | <view style="font-weight: 700;color: #2C2C2C;">——《奇八服考》P 3</view> |
| | | <view style="font-weight: 700; color: #2c2c2c" |
| | | >——《奇八服考》P 3</view |
| | | > |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </el-dialog> |
| | | |
| | | |
| | | |
| | | <!-- 返回顶部 --> |
| | | <el-col style="position: absolute;bottom: 1rem;left:1.2rem ;"> |
| | | <el-button style="width: .50rem;height: .50rem;font-size: .3rem;" icon="el-icon-top" circle |
| | | @click="scrollToTop"></el-button> |
| | | <el-col style="position: absolute; bottom: 1rem; left: 1.2rem"> |
| | | <el-button |
| | | style="width: 0.5rem; height: 0.5rem; font-size: 0.3rem" |
| | | icon="el-icon-top" |
| | | circle |
| | | @click="scrollToTop" |
| | | ></el-button> |
| | | </el-col> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import * as echarts from 'echarts'; |
| | | import 'echarts/extension/bmap/bmap'; |
| | | import { |
| | | loadBMap |
| | | } from "@/static/map.js" |
| | | import Table1 from '@/components/table1/table1.vue' |
| | | import * as echarts from "echarts"; |
| | | import "echarts/extension/bmap/bmap"; |
| | | import { loadBMap } from "@/static/map.js"; |
| | | import Table1 from "@/components/table1/table1.vue"; |
| | | export default { |
| | | components: { |
| | | Table1 |
| | |
| | | // 小传 |
| | | isProfile: false, |
| | | // 关系图谱 |
| | | activeName: 'representative', |
| | | activeName: "representative", |
| | | // 基础信息 |
| | | tableArr: [{ |
| | | 'list': [{ |
| | | 'name': '别名', |
| | | 'value': '李东璧、药圣、李三七' |
| | | tableArr: [ |
| | | { |
| | | list: [ |
| | | { |
| | | name: "别名", |
| | | value: "李东璧、药圣、李三七" |
| | | }, |
| | | { |
| | | 'name': '字', |
| | | 'value': '东璧' |
| | | name: "字", |
| | | value: "东璧" |
| | | }, |
| | | { |
| | | 'name': '号', |
| | | 'value': '频湖山人' |
| | | name: "号", |
| | | value: "频湖山人" |
| | | }, |
| | | { |
| | | 'name': '所处时期', |
| | | 'value': '明朝' |
| | | name: "所处时期", |
| | | value: "明朝" |
| | | }, |
| | | { |
| | | 'name': '民族', |
| | | 'value': '166g' |
| | | name: "民族", |
| | | value: "166g" |
| | | } |
| | | ] |
| | | |
| | | }, |
| | | { |
| | | 'list': [{ |
| | | 'name': '籍贯', |
| | | 'value': '黄州府薪州 (今湖北省薪春县)' |
| | | list: [ |
| | | { |
| | | name: "籍贯", |
| | | value: "黄州府薪州 (今湖北省薪春县)" |
| | | }, |
| | | { |
| | | 'name': '性别', |
| | | 'value': '男' |
| | | name: "性别", |
| | | value: "男" |
| | | }, |
| | | { |
| | | 'name': '职官', |
| | | 'value': '太医院判' |
| | | name: "职官", |
| | | value: "太医院判" |
| | | }, |
| | | { |
| | | 'name': '流派', |
| | | 'value': '医经学派' |
| | | name: "流派", |
| | | value: "医经学派" |
| | | }, |
| | | { |
| | | 'name': '学术特点', |
| | | 'value': '考古证今、穷究物理' |
| | | name: "学术特点", |
| | | value: "考古证今、穷究物理" |
| | | } |
| | | ] |
| | | } |
| | | ], |
| | | // 代表著作 |
| | | tableColumns: [{ |
| | | prop: 'worksName', |
| | | label: '作品名' |
| | | tableColumns: [ |
| | | { |
| | | prop: "worksName", |
| | | label: "作品名" |
| | | }, |
| | | { |
| | | prop: 'works', |
| | | label: '作品' |
| | | prop: "works", |
| | | label: "作品" |
| | | }, |
| | | { |
| | | prop: 'literature', |
| | | label: '文献关系' |
| | | prop: "literature", |
| | | label: "文献关系" |
| | | }, |
| | | { |
| | | prop: 'epoch', |
| | | label: '著作时期' |
| | | }, { |
| | | prop: 'category', |
| | | label: '类别' |
| | | prop: "epoch", |
| | | label: "著作时期" |
| | | }, |
| | | { |
| | | prop: "category", |
| | | label: "类别" |
| | | } |
| | | // { type: 'button', action: 'edit', label: 'Edit' } |
| | | ], |
| | | tableData: [{ |
| | | worksName: '本草纲目', |
| | | works: '李二牛', |
| | | literature: '作者', |
| | | epoch: '现代', |
| | | category: '中医学', |
| | | tableData: [ |
| | | { |
| | | worksName: "本草纲目", |
| | | works: "李二牛", |
| | | literature: "作者", |
| | | epoch: "现代", |
| | | category: "中医学", |
| | | id: 1 |
| | | }, { |
| | | worksName: '本草纲目', |
| | | works: '李二牛', |
| | | literature: '作者', |
| | | epoch: '现代', |
| | | category: '中医学', |
| | | }, |
| | | { |
| | | worksName: "本草纲目", |
| | | works: "李二牛", |
| | | literature: "作者", |
| | | epoch: "现代", |
| | | category: "中医学", |
| | | id: 1 |
| | | |
| | | }] |
| | | } |
| | | ] |
| | | }; |
| | | }, |
| | | onLoad(options) { |
| | | this.idIndex = options.id |
| | | this.idIndex = options.id; |
| | | }, |
| | | mounted() { |
| | | |
| | | // 关系图谱 |
| | | this.relation() |
| | | this.relation(); |
| | | // 时空地图 |
| | | loadBMap('5USVDAhhS4ssz44HLq3gNPZai7naXf4Q').then(() => { |
| | | this.spaceTime() |
| | | }) |
| | | loadBMap("5USVDAhhS4ssz44HLq3gNPZai7naXf4Q").then(() => { |
| | | this.spaceTime(); |
| | | }); |
| | | this.$nextTick(() => { |
| | | // 获取第一个选项卡的 DOM 元素 |
| | | const firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar'); |
| | | firstTab.style.transform = 'translateX(' + '-.2rem' + ')' |
| | | const firstTab = this.$refs.tabs.$el.querySelector( |
| | | ".el-tabs__active-bar" |
| | | ); |
| | | firstTab.style.transform = "translateX(" + "-.2rem" + ")"; |
| | | }); |
| | | |
| | | |
| | | // 监听窗口大小变化 |
| | | window.addEventListener('resize', this.relation); |
| | | window.addEventListener("resize", this.relation); |
| | | }, |
| | | methods: { |
| | | // 放大地图跳转 |
| | | fangdaClick(index) { |
| | | if (index == 1) { |
| | | uni.navigateTo({ |
| | | url: '/pages/character/index' |
| | | }) |
| | | url: "/pages/character/index" |
| | | }); |
| | | } else if (index == 2) { |
| | | uni.navigateTo({ |
| | | url: '/pages/characterMap/characterMap' |
| | | }) |
| | | url: "/pages/characterMap/characterMap" |
| | | }); |
| | | } |
| | | }, |
| | | // 小传 |
| | | ProfileClick() { |
| | | this.isProfile = !this.isProfile |
| | | this.isProfile = !this.isProfile; |
| | | }, |
| | | // 返回上一页 |
| | | goBack() { |
| | |
| | | }); |
| | | }, |
| | | handleClick(tab) { |
| | | let index = tab.$attrs['data-id'] - 1 |
| | | let index = tab.$attrs["data-id"] - 1; |
| | | this.$nextTick(() => { |
| | | let firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar'); |
| | | let firstTab = this.$refs.tabs.$el.querySelector( |
| | | ".el-tabs__active-bar" |
| | | ); |
| | | if (index == 0) { |
| | | firstTab.style.transform = 'translateX(-' + .2 + 'rem)' |
| | | firstTab.style.transform = "translateX(-" + 0.2 + "rem)"; |
| | | } else if (index == 1) { |
| | | firstTab.style.transform = 'translateX(' + .85 * index + 'rem)' |
| | | firstTab.style.transform = "translateX(" + 0.85 * index + "rem)"; |
| | | } else if (index == 2) { |
| | | firstTab.style.transform = 'translateX(' + .93 * index + 'rem)' |
| | | firstTab.style.transform = "translateX(" + 0.93 * index + "rem)"; |
| | | } else if (index == 3) { |
| | | firstTab.style.transform = 'translateX(' + .95 * index + 'rem)' |
| | | firstTab.style.transform = "translateX(" + 0.95 * index + "rem)"; |
| | | } else if (index == 4) { |
| | | firstTab.style.transform = 'translateX(' + .97 * index + 'rem)' |
| | | firstTab.style.transform = "translateX(" + 0.97 * index + "rem)"; |
| | | } else { |
| | | let firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar'); |
| | | firstTab.style.transform = 'translateX(' + '-.2' + 'rem)' |
| | | let firstTab = this.$refs.tabs.$el.querySelector( |
| | | ".el-tabs__active-bar" |
| | | ); |
| | | firstTab.style.transform = "translateX(" + "-.2" + "rem)"; |
| | | } |
| | | }) |
| | | }); |
| | | }, |
| | | // 关系图谱 |
| | | relation() { |
| | | var chartDom = document.getElementById('relation'); |
| | | var chartDom = document.getElementById("relation"); |
| | | var myChart = echarts.init(chartDom); |
| | | |
| | | // 假设您有节点名称和它们之间的关系数据 |
| | | var nodes = ['李时珍', '成就', '传承', '亲友', '著作']; |
| | | var relationships = [{ |
| | | source: '李时珍', |
| | | target: '成就' |
| | | var nodes = ["李时珍", "成就", "传承", "亲友", "著作"]; |
| | | var relationships = [ |
| | | { |
| | | source: "李时珍", |
| | | target: "成就" |
| | | }, |
| | | { |
| | | source: '李时珍', |
| | | target: '传承' |
| | | source: "李时珍", |
| | | target: "传承" |
| | | }, |
| | | { |
| | | source: '李时珍', |
| | | target: '亲友' |
| | | source: "李时珍", |
| | | target: "亲友" |
| | | }, |
| | | { |
| | | source: '李时珍', |
| | | target: '著作' |
| | | }, |
| | | source: "李时珍", |
| | | target: "著作" |
| | | } |
| | | // 其他关系... |
| | | ]; |
| | | |
| | |
| | | target: targetIndex |
| | | }); |
| | | } |
| | | |
| | | }); |
| | | let FontSize = 12; // 字体大小 |
| | | let BorderWidth = 2; // 边框大小 |
| | | let SymbolSize = 80; // 尺寸距离 |
| | | // 不同尺寸下修改echarts的字体 |
| | | if (window.innerWidth > 2560 && window.innerWidth <= 3840) { |
| | | FontSize = 28 |
| | | BorderWidth = 5 |
| | | SymbolSize = 100 |
| | | FontSize = 28; |
| | | BorderWidth = 5; |
| | | SymbolSize = 100; |
| | | } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) { |
| | | FontSize = 28 |
| | | BorderWidth = 4 |
| | | SymbolSize = 90 |
| | | FontSize = 28; |
| | | BorderWidth = 4; |
| | | SymbolSize = 90; |
| | | } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) { |
| | | FontSize = 18 |
| | | BorderWidth = 4 |
| | | SymbolSize = 70 |
| | | FontSize = 18; |
| | | BorderWidth = 4; |
| | | SymbolSize = 70; |
| | | } |
| | | // 根据nodes动态生成节点数据 |
| | | var nodeData = nodes.map(function(node, index) { |
| | |
| | | itemStyle: { |
| | | color: getColorByIndex(index), // 可以根据索引设置不同的颜色 |
| | | borderWidth: BorderWidth, |
| | | borderColor: getColorByIndex(index + 1), |
| | | borderColor: getColorByIndex(index + 1) |
| | | } |
| | | }; |
| | | }); |
| | | // 设置颜色 |
| | | function getColorByIndex(index) { |
| | | var colors = ['#ecf4ff', '#dd9795', '#f1edbe', '#ecf4ff', '#c5dbd8']; // 可以根据实际情况设置颜色数组 |
| | | var colors = ["#ecf4ff", "#dd9795", "#f1edbe", "#ecf4ff", "#c5dbd8"]; // 可以根据实际情况设置颜色数组 |
| | | return colors[index % colors.length]; |
| | | } |
| | | |
| | |
| | | option = { |
| | | tooltip: {}, |
| | | animationDurationUpdate: 1500, |
| | | animationEasingUpdate: 'quinticInOut', |
| | | series: [{ |
| | | type: 'graph', |
| | | layout: 'none', |
| | | animationEasingUpdate: "quinticInOut", |
| | | series: [ |
| | | { |
| | | type: "graph", |
| | | layout: "none", |
| | | symbolSize: SymbolSize, // 调整节点大小 |
| | | label: { |
| | | show: true, |
| | | color: 'black', // 设置节点文字颜色为黑色 |
| | | fontSize: FontSize, // 设置文字大小 |
| | | color: "black", // 设置节点文字颜色为黑色 |
| | | fontSize: FontSize // 设置文字大小 |
| | | }, |
| | | edgeSymbol: ['circle'], |
| | | edgeSymbol: ["circle"], |
| | | edgeSymbolSize: [4, 10], |
| | | edgeLabel: { |
| | | fontSize: 40 |
| | | }, |
| | | data: nodeData, |
| | | links: [{ |
| | | links: [ |
| | | { |
| | | source: 0, |
| | | target: 1, |
| | | symbolSize: [5, 20] |
| | | }, |
| | | { |
| | | source: 'Node 2', |
| | | target: 'Node 1' |
| | | source: "Node 2", |
| | | target: "Node 1" |
| | | }, |
| | | { |
| | | source: 'Node 1', |
| | | target: 'Node 3' |
| | | source: "Node 1", |
| | | target: "Node 3" |
| | | }, |
| | | { |
| | | source: 'Node 2', |
| | | target: 'Node 3' |
| | | source: "Node 2", |
| | | target: "Node 3" |
| | | }, |
| | | { |
| | | source: 'Node 2', |
| | | target: 'Node 4' |
| | | source: "Node 2", |
| | | target: "Node 4" |
| | | }, |
| | | { |
| | | source: 'Node 1', |
| | | target: 'Node 4' |
| | | source: "Node 1", |
| | | target: "Node 4" |
| | | } |
| | | ], |
| | | lineStyle: { |
| | |
| | | width: 2, |
| | | curveness: 0 |
| | | } |
| | | }] |
| | | } |
| | | ] |
| | | }; |
| | | |
| | | // 将生成的连接线添加到echarts图表的option中 |
| | |
| | | }, |
| | | // 时空地图 |
| | | spaceTime() { |
| | | var chartDom = document.getElementById('spaceTime'); |
| | | var chartDom = document.getElementById("spaceTime"); |
| | | var myChart = echarts.init(chartDom); |
| | | var option; |
| | | |
| | | const data = [{ |
| | | name: '海门', |
| | | const data = [ |
| | | { |
| | | name: "海门", |
| | | value: 9 |
| | | }, |
| | | { |
| | | name: '金昌', |
| | | name: "金昌", |
| | | value: 19 |
| | | }, |
| | | { |
| | | name: '泉州', |
| | | name: "泉州", |
| | | value: 21 |
| | | }, |
| | | { |
| | | name: '衢州', |
| | | name: "衢州", |
| | | value: 177 |
| | | }, |
| | | { |
| | | name: '廊坊', |
| | | name: "廊坊", |
| | | value: 193 |
| | | }, |
| | | { |
| | | name: '菏泽', |
| | | name: "菏泽", |
| | | value: 194 |
| | | }, |
| | | { |
| | | name: '合肥', |
| | | name: "合肥", |
| | | value: 229 |
| | | }, |
| | | { |
| | | name: '武汉', |
| | | name: "武汉", |
| | | value: 273 |
| | | }, |
| | | { |
| | | name: '大庆', |
| | | name: "大庆", |
| | | value: 279 |
| | | } |
| | | ]; |
| | |
| | | }; |
| | | option = { |
| | | tooltip: { |
| | | trigger: 'item' |
| | | trigger: "item" |
| | | }, |
| | | bmap: { |
| | | center: [104.114129, 37.550339], |
| | | zoom: 1, |
| | | roam: true, |
| | | mapStyle: { |
| | | styleJson: [{ |
| | | featureType: 'water', |
| | | elementType: 'all', |
| | | styleJson: [ |
| | | { |
| | | featureType: "water", |
| | | elementType: "all", |
| | | stylers: { |
| | | color: '#d1d1d1' |
| | | color: "#d1d1d1" |
| | | } |
| | | }, |
| | | { |
| | | featureType: 'land', |
| | | elementType: 'all', |
| | | featureType: "land", |
| | | elementType: "all", |
| | | stylers: { |
| | | color: '#f3f3f3' |
| | | color: "#f3f3f3" |
| | | } |
| | | }, |
| | | { |
| | | featureType: 'manmade', |
| | | elementType: 'all', |
| | | featureType: "manmade", |
| | | elementType: "all", |
| | | stylers: { |
| | | color: '#d1d1d1' |
| | | color: "#d1d1d1" |
| | | } |
| | | }, |
| | | { |
| | | featureType: 'local', |
| | | elementType: 'all', |
| | | featureType: "local", |
| | | elementType: "all", |
| | | stylers: { |
| | | color: '#d1d1d1' |
| | | color: "#d1d1d1" |
| | | } |
| | | }, |
| | | { |
| | | featureType: 'arterial', |
| | | elementType: 'labels', |
| | | featureType: "arterial", |
| | | elementType: "labels", |
| | | stylers: { |
| | | visibility: 'off' |
| | | visibility: "off" |
| | | } |
| | | }, |
| | | { |
| | | featureType: 'boundary', |
| | | elementType: 'all', |
| | | featureType: "boundary", |
| | | elementType: "all", |
| | | stylers: { |
| | | color: '#fefefe' |
| | | color: "#fefefe" |
| | | } |
| | | }, |
| | | { |
| | | featureType: 'building', |
| | | elementType: 'all', |
| | | featureType: "building", |
| | | elementType: "all", |
| | | stylers: { |
| | | color: '#d1d1d1' |
| | | color: "#d1d1d1" |
| | | } |
| | | }, |
| | | { |
| | | featureType: 'label', |
| | | elementType: 'labels.text.fill', |
| | | featureType: "label", |
| | | elementType: "labels.text.fill", |
| | | stylers: { |
| | | color: '#999999' |
| | | color: "#999999" |
| | | } |
| | | } |
| | | ] |
| | | } |
| | | }, |
| | | series: [{ |
| | | name: 'pm2.5', |
| | | type: 'scatter', |
| | | coordinateSystem: 'bmap', |
| | | series: [ |
| | | { |
| | | name: "pm2.5", |
| | | type: "scatter", |
| | | coordinateSystem: "bmap", |
| | | data: convertData(data), |
| | | symbolSize: function(val) { |
| | | return val[2] / 10; |
| | |
| | | enabled: false |
| | | }, |
| | | label: { |
| | | formatter: '{b}', |
| | | position: 'right', |
| | | formatter: "{b}", |
| | | position: "right", |
| | | show: false |
| | | }, |
| | | emphasis: { |
| | |
| | | } |
| | | }, |
| | | { |
| | | name: 'Top 5', |
| | | type: 'effectScatter', |
| | | coordinateSystem: 'bmap', |
| | | name: "Top 5", |
| | | type: "effectScatter", |
| | | coordinateSystem: "bmap", |
| | | data: convertData( |
| | | data |
| | | .sort(function(a, b) { |
| | |
| | | encode: { |
| | | value: 2 |
| | | }, |
| | | showEffectOn: 'render', |
| | | showEffectOn: "render", |
| | | rippleEffect: { |
| | | brushType: 'stroke' |
| | | brushType: "stroke" |
| | | }, |
| | | label: { |
| | | formatter: '{b}', |
| | | position: 'right', |
| | | formatter: "{b}", |
| | | position: "right", |
| | | show: true |
| | | }, |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | | shadowColor: '#333' |
| | | shadowColor: "#333" |
| | | }, |
| | | emphasis: { |
| | | scale: true |
| | |
| | | ] |
| | | }; |
| | | |
| | | |
| | | option && myChart.setOption(option); |
| | | |
| | | }, |
| | | |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style> |
| | | /* Table1表格里面的数据 */ |
| | | ::v-deep .is-leaf { |
| | | .cell { |
| | | font-size: .14rem !important; |
| | | height: .4rem !important; |
| | | line-height: .4rem !important; |
| | | font-size: 0.14rem !important; |
| | | height: 0.4rem !important; |
| | | line-height: 0.4rem !important; |
| | | } |
| | | } |
| | | |
| | | ::v-deep .el-table__body { |
| | | .cell { |
| | | font-size: .14rem !important; |
| | | height: .4rem !important; |
| | | line-height: .4rem !important; |
| | | font-size: 0.14rem !important; |
| | | height: 0.4rem !important; |
| | | line-height: 0.4rem !important; |
| | | } |
| | | } |
| | | |
| | | /* --------------- */ |
| | | |
| | | .BoxLeft ::v-deep.el-card__body { |
| | | padding: .1rem .11rem !important; |
| | | padding: 0.1rem 0.11rem !important; |
| | | } |
| | | |
| | | ::v-deep .el-tabs__content { |
| | | line-height: 1; |
| | | } |
| | | |
| | | |
| | | /* 个人小传 ------------------*/ |
| | | ::v-deep .el-dialog__header { |
| | |
| | | height: 0.7rem; |
| | | background: url(@/static/image/ProfileBg.png); |
| | | background-size: 100% 100%; |
| | | font-size: .24rem; |
| | | color: #2C2C2C; |
| | | font-size: 0.24rem; |
| | | color: #2c2c2c; |
| | | font-weight: bold; |
| | | } |
| | | |
| | | /* ------------------- */ |
| | | |
| | | |
| | | img { |
| | | width: 100%; |
| | |
| | | background-color: #0c274c; |
| | | padding: 15rpx 25rpx; |
| | | color: #fff !important; |
| | | |
| | | img { |
| | | } |
| | | .NavTop img { |
| | | width: 30rpx; |
| | | height: 30rpx; |
| | | vertical-align: middle; |
| | | } |
| | | |
| | | .NavTopr { |
| | | .NavTop .NavTopr { |
| | | img { |
| | | margin-right: 10rpx; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .mImage { |
| | | width: 100%; |
| | | height: 30rpx; |
| | | |
| | | img { |
| | | vertical-align: top; |
| | | } |
| | | .mImage img { |
| | | vertical-align: top; |
| | | } |
| | | |
| | | .Midde { |
| | |
| | | background-size: 100% 100%; |
| | | color: #000; |
| | | align-items: flex-start; |
| | | padding: .18rem .24rem ; |
| | | |
| | | view { |
| | | padding: 0.18rem 0.24rem; |
| | | } |
| | | .Midde view { |
| | | color: #000; |
| | | } |
| | | |
| | | .MiddeBack { |
| | | .Midde .MiddeBack { |
| | | width: 0.6rem; |
| | | height: 0.24rem; |
| | | font-size: .12rem; |
| | | font-size: 0.12rem; |
| | | padding: 0; |
| | | border: 1px solid #9E9E9E; |
| | | } |
| | | border: 1px solid #9e9e9e; |
| | | } |
| | | |
| | | .yinyong { |
| | | font-size: .12rem; |
| | | |
| | | img { |
| | | width: .12rem; |
| | | height: .1rem; |
| | | vertical-align: top; |
| | | margin-right: .03rem; |
| | | font-size: 0.12rem; |
| | | } |
| | | .yinyong img { |
| | | width: 0.12rem; |
| | | height: 0.1rem; |
| | | vertical-align: top; |
| | | margin-right: 0.03rem; |
| | | } |
| | | |
| | | .el-dialog__wrapper { |
| | | background: rgba(0, 0, 0, .3); |
| | | background: rgba(0, 0, 0, 0.3); |
| | | } |
| | | |
| | | .fz { |
| | |
| | | display: -webkit-box; |
| | | -webkit-line-clamp: 4; |
| | | -webkit-box-orient: vertical; */ |
| | | color: #2C2C2C; |
| | | color: #2c2c2c; |
| | | } |
| | | |
| | | ::v-deep .el-card__body { |
| | | padding: .1rem !important; |
| | | padding: 0.1rem !important; |
| | | } |
| | | |
| | | /* echart地图水印 */ |
| | |
| | | } |
| | | |
| | | ::v-deep .el-tabs__nav { |
| | | margin-bottom: .1rem !important; |
| | | |
| | | margin-bottom: 0.1rem !important; |
| | | } |
| | | |
| | | ::v-deep .el-tabs__nav-scroll { |
| | |
| | | |
| | | ::v-deep .el-tabs__item { |
| | | width: 1rem; |
| | | font-size: .14rem; |
| | | line-height: .4rem; |
| | | height: .4rem; |
| | | font-size: 0.14rem; |
| | | line-height: 0.4rem; |
| | | height: 0.4rem; |
| | | } |
| | | |
| | | ::v-deep .el-tabs__header { |
| | |
| | | ::v-deep .el-tabs__active-bar { |
| | | /* 设置滚动条宽度 */ |
| | | width: 1rem !important; |
| | | height: .03rem !important; |
| | | background-color: #597AA5; |
| | | height: 0.03rem !important; |
| | | background-color: #597aa5; |
| | | transform: translateX(-20px); |
| | | /* margin-top: .09rem; */ |
| | | } |
| | | |
| | | ::v-deep .el-tabs__active-bar { |
| | | top: .37rem !important; |
| | | top: 0.37rem !important; |
| | | } |
| | | |
| | | ::v-deep .el-table::before { |
| | |
| | | } |
| | | |
| | | .BoxRight ::v-deep.el-card__body { |
| | | padding: .2rem .14rem !important; |
| | | |
| | | padding: 0.2rem 0.14rem !important; |
| | | } |
| | | |
| | | .BoxRight .box-card { |
| | | margin-bottom: .2rem !important; |
| | | margin-bottom: 0.2rem !important; |
| | | } |
| | | </style> |
| | |
| | | <template> |
| | | <view > |
| | | <headNav :idIndex="idIndex" :searchBg="false" text="家学传承" bg="/static/image/topBg1.png" |
| | | bg1="/static/image/line1.png" /> |
| | | <headNav |
| | | :idIndex="idIndex" |
| | | :searchBg="false" |
| | | text="家学传承" |
| | | bg="/static/image/topBg1.png" |
| | | bg1="/static/image/line1.png" |
| | | /> |
| | | |
| | | <view class="flex" style="padding: .24rem 1.21rem ;background-color: #f0f0f0;"> |
| | | <view |
| | | class="flex" |
| | | style="padding: 0.24rem 1.21rem; background-color: #f0f0f0" |
| | | > |
| | | <view class="flex"> |
| | | <el-button class="MiddeBack flex flex-center" @click="goBack">返回</el-button> |
| | | <h3 style="margin-left: .22rem;font-size: .28erm;font-weight: 500;">邵登瀛</h3> |
| | | <el-button class="MiddeBack flex flex-center" @click="goBack" |
| | | >返回</el-button |
| | | > |
| | | <h3 style="margin-left: 0.22rem; font-size: 0.28erm; font-weight: 500"> |
| | | 邵登瀛 |
| | | </h3> |
| | | </view> |
| | | <ul class="flex Lists"> |
| | | <li style="background-color: #DA7A2B;color: #fff;">世医传承</li> |
| | | <li @click="ListClick" style="background-color: #fff;color: #DA7A2B;" >世医传承</li> |
| | | <li style="background-color: #da7a2b; color: #fff">世医传承</li> |
| | | <li @click="ListClick" style="background-color: #fff; color: #da7a2b"> |
| | | 世医传承 |
| | | </li> |
| | | </ul> |
| | | <view style="width: 1rem;"></view> |
| | | <view style="width: 1rem"></view> |
| | | </view> |
| | | <!-- echarts图 --> |
| | | <div class="barChart" ref="barChart"></div> |
| | |
| | | // 标题顶部栏需要的东西 |
| | | idIndex: 0, |
| | | activeIndex: 1 |
| | | } |
| | | }; |
| | | }, |
| | | onLoad(options) { |
| | | this.idIndex = options.id |
| | | this.idIndex = options.id; |
| | | }, |
| | | mounted() { |
| | | // 初始化 echarts |
| | |
| | | let Distance = 10; |
| | | // 不同尺寸下修改echarts的字体 |
| | | if (window.innerWidth > 2560 && window.innerWidth <= 3840) { |
| | | FontSize = 28 |
| | | BorderWidth = 5 |
| | | SymbolSize = 100 |
| | | Distance = 33 |
| | | FontSize = 28; |
| | | BorderWidth = 5; |
| | | SymbolSize = 100; |
| | | Distance = 33; |
| | | } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) { |
| | | FontSize = 28 |
| | | BorderWidth = 4 |
| | | SymbolSize = 90 |
| | | Distance = 22 |
| | | FontSize = 28; |
| | | BorderWidth = 4; |
| | | SymbolSize = 90; |
| | | Distance = 22; |
| | | } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) { |
| | | FontSize = 18 |
| | | BorderWidth = 4 |
| | | SymbolSize = 70 |
| | | Distance = 22 |
| | | FontSize = 18; |
| | | BorderWidth = 4; |
| | | SymbolSize = 70; |
| | | Distance = 22; |
| | | } |
| | | |
| | | let option = { |
| | | title: { |
| | | text: [""], |
| | | text: [""] |
| | | }, |
| | | backgroundColor: { |
| | | type: 'image', |
| | | image: '/static/image/WMBg.png', |
| | | repeat: 'repeat-x', // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat' |
| | | size: '100% 100%', // 背景图片的尺寸,可以是百分比或者像素 |
| | | position: 'center center' // 背景图片的位置,可以是 top, bottom, middle 或者百分比 |
| | | type: "image", |
| | | image: "/static/image/WMBg.png", |
| | | repeat: "repeat-x", // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat' |
| | | size: "100% 100%", // 背景图片的尺寸,可以是百分比或者像素 |
| | | position: "center center" // 背景图片的位置,可以是 top, bottom, middle 或者百分比 |
| | | }, |
| | | tooltip: {}, |
| | | animationDurationUpdate: 1500, |
| | | animationEasingUpdate: "quinticInOut", |
| | | series: [{ |
| | | series: [ |
| | | { |
| | | type: "graph", |
| | | layout: "none", |
| | | symbolSize: SymbolSize + 20, |
| | |
| | | roam: false, |
| | | label: { |
| | | show: true, |
| | | color: 'black', // 设置节点文字颜色为黑色 |
| | | fontSize: FontSize, // 设置文字大小 |
| | | color: "black", // 设置节点文字颜色为黑色 |
| | | fontSize: FontSize // 设置文字大小 |
| | | }, |
| | | edgeSymbol: ["circle", "arrow"], |
| | | edgeSymbolSize: [4, 10], |
| | |
| | | formatter: function(params) { |
| | | // params.data 是边的数据对象,你可以在这里定义关系名 |
| | | // 例如,你可以根据 source 和 target 的名称来定义关系名 |
| | | return params.data.relationName || |
| | | "父子"; // 如果定义了 relationName 则显示它,否则显示“父子” |
| | | }, |
| | | return params.data.relationName || "父子"; // 如果定义了 relationName 则显示它,否则显示“父子” |
| | | } |
| | | }, |
| | | //各个节点 |
| | | data: [{ |
| | | data: [ |
| | | { |
| | | name: "薛雪", |
| | | x: 300, |
| | | y: 300, |
| | | itemStyle: { |
| | | color: "#F8E2D7", |
| | | borderColor: "#F3AA78", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }, |
| | | { |
| | | name: "邵登瀛", |
| | |
| | | itemStyle: { |
| | | color: "#F8E2D7", |
| | | borderColor: "#F3AA78", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }, |
| | | { |
| | | name: "邵鲁瞻", |
| | |
| | | itemStyle: { |
| | | color: "#F8E2D7", |
| | | borderColor: "#F3AA78", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }, |
| | | { |
| | | name: "邵春泉", |
| | |
| | | itemStyle: { |
| | | color: "#F8E2D7", |
| | | borderColor: "#F3AA78", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }, |
| | | { |
| | | name: "徐锦", |
| | |
| | | itemStyle: { |
| | | color: "#DCE7EB", |
| | | borderColor: "#5F81A4", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }, |
| | | { |
| | | name: "邵丙扬", |
| | |
| | | itemStyle: { |
| | | color: "#F8E2D7", |
| | | borderColor: "#F3AA78", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }, |
| | | { |
| | | name: "冯桂芬", |
| | |
| | | itemStyle: { |
| | | color: "#DCE7EB", |
| | | borderColor: "#5F81A4", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }, |
| | | { |
| | | name: "李鸿章", |
| | |
| | | itemStyle: { |
| | | color: "#E1E1E1", |
| | | borderColor: "#888888", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }, |
| | | { |
| | | name: "邵景尧", |
| | |
| | | itemStyle: { |
| | | color: "#F8E2D7", |
| | | borderColor: "#F3AA78", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }, |
| | | { |
| | | name: "邵景康", |
| | |
| | | itemStyle: { |
| | | color: "#F8E2D7", |
| | | borderColor: "#F3AA78", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }, |
| | | { |
| | | name: "鲍昇", |
| | |
| | | itemStyle: { |
| | | color: "#DCE7EB", |
| | | borderColor: "#5F81A4", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }, |
| | | { |
| | | name: "文龙", |
| | |
| | | itemStyle: { |
| | | color: "#DCE7EB", |
| | | borderColor: "#5F81A4", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }, |
| | | { |
| | | name: "傅庆贻", |
| | |
| | | itemStyle: { |
| | | color: "#DCE7EB", |
| | | borderColor: "#5F81A4", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }, |
| | | { |
| | | name: "成允", |
| | |
| | | itemStyle: { |
| | | color: "#DCE7EB", |
| | | borderColor: "#5F81A4", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }, |
| | | { |
| | | name: "胡玉坦", |
| | |
| | | itemStyle: { |
| | | color: "#DCE7EB", |
| | | borderColor: "#5F81A4", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }, |
| | | { |
| | | name: "裕禄", |
| | |
| | | itemStyle: { |
| | | color: "#DCE7EB", |
| | | borderColor: "#5F81A4", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }, |
| | | { |
| | | name: "陆乃昔", |
| | |
| | | itemStyle: { |
| | | color: "#DCE7EB", |
| | | borderColor: "#5F81A4", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }, |
| | | { |
| | | name: "刘传祺", |
| | |
| | | itemStyle: { |
| | | color: "#DCE7EB", |
| | | borderColor: "#5F81A4", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }, |
| | | { |
| | | name: "邵诚", |
| | |
| | | itemStyle: { |
| | | color: "#DCE7EB", |
| | | borderColor: "#5F81A4", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }, |
| | | { |
| | | name: "曾国藩", |
| | |
| | | itemStyle: { |
| | | color: "#E1E1E1", |
| | | borderColor: "#888888", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }, |
| | | { |
| | | name: "曾国藩01", |
| | |
| | | itemStyle: { |
| | | color: "#E1E1E1", |
| | | borderColor: "#888888", |
| | | borderWidth: "3", |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | }, |
| | | { |
| | | name: "曾国藩02", |
| | |
| | | itemStyle: { |
| | | color: "#E1E1E1", |
| | | borderColor: "#888888", |
| | | borderWidth: "3", |
| | | }, |
| | | }, |
| | | borderWidth: "3" |
| | | } |
| | | } |
| | | ], |
| | | //关系连接 |
| | | links: [{ |
| | | links: [ |
| | | { |
| | | source: "薛雪", |
| | | target: "邵登瀛", |
| | | relationName: "师徒", |
| | | hasArrow: "true", |
| | | hasArrow: "true" |
| | | }, |
| | | { |
| | | source: "邵登瀛", |
| | | target: "邵鲁瞻", |
| | | relationName: "父子", |
| | | relationName: "父子" |
| | | }, |
| | | { |
| | | source: "邵鲁瞻", |
| | | target: "邵春泉", |
| | | relationName: "父子", |
| | | relationName: "父子" |
| | | }, |
| | | { |
| | | source: "邵春泉", |
| | | target: "邵丙扬", |
| | | relationName: "叔侄", |
| | | relationName: "叔侄" |
| | | }, |
| | | //曲线 |
| | | { |
| | |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | curveness: -0.2, |
| | | }, |
| | | curveness: -0.2 |
| | | } |
| | | }, |
| | | { |
| | | source: "邵丙扬", |
| | | target: "邵景尧", |
| | | relationName: "父子", |
| | | relationName: "父子" |
| | | }, |
| | | { |
| | | source: "邵丙扬", |
| | | target: "邵景康", |
| | | relationName: "父子", |
| | | relationName: "父子" |
| | | }, |
| | | //曲线 |
| | | { |
| | |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | curveness: -0.2, |
| | | }, |
| | | curveness: -0.2 |
| | | } |
| | | }, |
| | | //曲线 |
| | | { |
| | |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | curveness: 0.2, |
| | | }, |
| | | curveness: 0.2 |
| | | } |
| | | }, |
| | | //曲线 |
| | | { |
| | |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | curveness: -0.2, |
| | | }, |
| | | curveness: -0.2 |
| | | } |
| | | }, |
| | | { |
| | | source: "邵景尧", |
| | | target: "邵景康", |
| | | relationName: "兄弟", |
| | | relationName: "兄弟" |
| | | }, |
| | | { |
| | | source: "邵景康", |
| | | target: "邵景尧", |
| | | relationName: "兄弟", |
| | | relationName: "兄弟" |
| | | }, |
| | | { |
| | | source: "邵景尧", |
| | |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | curveness: -0.2, |
| | | }, |
| | | curveness: -0.2 |
| | | } |
| | | }, |
| | | { |
| | | source: "邵景尧", |
| | |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | curveness: 0.2, |
| | | }, |
| | | curveness: 0.2 |
| | | } |
| | | }, |
| | | { |
| | | source: "邵景尧", |
| | |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | curveness: -0.1, |
| | | }, |
| | | curveness: -0.1 |
| | | } |
| | | }, |
| | | { |
| | | source: "邵景尧", |
| | |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | curveness: -0.2, |
| | | }, |
| | | curveness: -0.2 |
| | | } |
| | | }, |
| | | { |
| | | source: "邵景尧", |
| | |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | curveness: -0.2, |
| | | }, |
| | | curveness: -0.2 |
| | | } |
| | | }, |
| | | { |
| | | source: "邵景尧", |
| | |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | curveness: -0.2, |
| | | }, |
| | | curveness: -0.2 |
| | | } |
| | | }, |
| | | { |
| | | source: "邵景尧", |
| | |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | curveness: -0.2, |
| | | }, |
| | | curveness: -0.2 |
| | | } |
| | | }, |
| | | { |
| | | source: "邵景尧", |
| | |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | curveness: -0.2, |
| | | }, |
| | | curveness: -0.2 |
| | | } |
| | | }, |
| | | { |
| | | source: "邵景尧", |
| | |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | curveness: -0.2, |
| | | }, |
| | | curveness: -0.2 |
| | | } |
| | | }, |
| | | { |
| | | source: "成允", |
| | |
| | | relationName: "同僚", |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | }, |
| | | color: "#6584B1" |
| | | } |
| | | }, |
| | | { |
| | | source: "胡玉坦", |
| | |
| | | relationName: "同僚", |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | }, |
| | | color: "#6584B1" |
| | | } |
| | | }, |
| | | { |
| | | source: "裕禄", |
| | |
| | | relationName: "同僚", |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | }, |
| | | color: "#6584B1" |
| | | } |
| | | }, |
| | | { |
| | | source: "陆乃昔", |
| | |
| | | relationName: "同僚", |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | }, |
| | | color: "#6584B1" |
| | | } |
| | | }, |
| | | { |
| | | source: "刘传祺", |
| | |
| | | relationName: "同僚", |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | }, |
| | | color: "#6584B1" |
| | | } |
| | | }, |
| | | { |
| | | source: "成允", |
| | |
| | | relationName: "同僚", |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | }, |
| | | color: "#6584B1" |
| | | } |
| | | }, |
| | | { |
| | | source: "成允", |
| | |
| | | relationName: "同僚", |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | }, |
| | | color: "#6584B1" |
| | | } |
| | | }, |
| | | { |
| | | source: "成允", |
| | |
| | | relationName: "同僚", |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | }, |
| | | color: "#6584B1" |
| | | } |
| | | }, |
| | | { |
| | | source: "傅庆贻", |
| | |
| | | relationName: "同僚", |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | }, |
| | | color: "#6584B1" |
| | | } |
| | | }, |
| | | { |
| | | source: "邵诚", |
| | |
| | | relationName: "同僚", |
| | | symbol: ["none", "none"], |
| | | lineStyle: { |
| | | color: "#6584B1", |
| | | }, |
| | | }, |
| | | color: "#6584B1" |
| | | } |
| | | } |
| | | ], |
| | | lineStyle: { |
| | | color: "#000000", |
| | | opacity: 0.9, |
| | | width: 2, |
| | | curveness: 0, |
| | | }, |
| | | }, ], |
| | | curveness: 0 |
| | | } |
| | | } |
| | | ] |
| | | }; |
| | | //进行渲染 |
| | | myChart.setOption(option); |
| | |
| | | // 返回按钮 |
| | | goBack() { |
| | | this.$router.go(-1); |
| | | }, |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | <style scoped> |
| | | .Lists { |
| | | li { |
| | | .Lists li { |
| | | /* background-color: #e4ebf3; |
| | | border: 1rpx solid #5778a2; |
| | | padding: 5rpx 10rpx; |
| | | font-size: 18rpx; */ |
| | | width: 0.96rem; |
| | | height: .3rem; |
| | | border: 1px solid #DA7A2B; |
| | | line-height: .3rem; |
| | | height: 0.3rem; |
| | | border: 1px solid #da7a2b; |
| | | line-height: 0.3rem; |
| | | text-align: center; |
| | | font-size: .14rem; |
| | | font-size: 0.14rem; |
| | | } |
| | | } |
| | | |
| | | .MiddeBack { |
| | | width: 0.6rem; |
| | | height: 0.24rem; |
| | | font-size: .12rem; |
| | | font-size: 0.12rem; |
| | | padding: 0; |
| | | |
| | | } |
| | | .barChart { |
| | | width: 100vw; |
| | |
| | | font-size: 14px; |
| | | height: 44px; |
| | | line-height: 44px; |
| | | // sdsd |
| | | // justify-content: center; |
| | | .uni-tab-item { |
| | | flex: 1; |
| | | // width: 20% !important; |
| | | height: 100%; |
| | | text-align: center; |
| | | box-sizing: border-box; |
| | |
| | | </template> |
| | | |
| | | <style lang="scss" scoped> |
| | | // // 穿透隔离css |
| | | // ::v-deep input { |
| | | // height: 100rpx; |
| | | |
| | | // &:active { |
| | | // background: rgba(0, 0, 0, .02); |
| | | // } |
| | | // } |
| | | .jc-form-item { |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | } |
| | | ::v-deep .content { |
| | | border-radius: 0 !important; |
| | | // border: 1px solid #7d8ea5 !important; |
| | | } |
| | | ::v-deep .button-item { |
| | | width: 100% !important; |
| | |
| | | width: 100%; |
| | | border-bottom: 1px #f5f5f5 solid; |
| | | box-sizing: border-box; |
| | | // padding: 15upx; |
| | | border-radius: 35rpx; |
| | | font-size: $uni-font-size-base; |
| | | background: #fff; |