<template>
|
<view class="container flex flex-center" style="align-items: flex-start">
|
<view class="repository relative">
|
<view class="flex Ttop flex-column" style="width: 100%">
|
<view class="flex" style="width: 100%">
|
<view style="padding-left: 4rem"></view>
|
<view
|
class="flex flex-center flex-wrap"
|
style="width: 100%; flex-direction: column"
|
>
|
<view></view>
|
<view ref="Rtop">
|
<text class="login"></text>
|
<text
|
style="
|
font-size: 0.36rem;
|
letter-spacing: 4rpx;
|
vertical-align: middle;
|
font-family: cursive;
|
font-weight: bold;
|
"
|
>中国历代医学人物知识库</text
|
>
|
</view>
|
</view>
|
<view class="flex relative" style="height: 0.5rem">
|
<!-- 小搜索图片 -->
|
<view
|
class="flex searchCss"
|
:style="{ backgroundColor: isExpanded == true ? '#fff' : '' }"
|
style="
|
border-radius: 0.5rem;
|
height: 75%;
|
width: 2.33rem;
|
margin-right: 0.3rem;
|
justify-content: flex-end;
|
"
|
>
|
<!-- overflow: hidden; -->
|
<input
|
:style="{ display: isExpanded == true ? 'block' : 'none' }"
|
@confirm="toggleSearch"
|
type="text"
|
style="
|
margin-left: 0.16rem;
|
color: #2c2c2c;
|
flex: 1;
|
background-color: #fff;
|
font-size: 0.13rem;
|
"
|
class="search-input"
|
v-model="searchInput"
|
placeholder="请输入搜索内容"
|
/>
|
<view
|
class="search-logo"
|
@click="toggleSearch"
|
style="background-color: #244a7b; border-radius: 50%"
|
></view>
|
</view>
|
<el-dropdown
|
trigger="click"
|
@command="handleCommand"
|
style="margin-right: 0.3rem"
|
>
|
<view @click="iconClick(2)" class="s2 ss1"></view>
|
<el-dropdown-menu v-if="isCommand" slot="dropdown">
|
<el-dropdown-item command="1">修改密码</el-dropdown-item>
|
<el-dropdown-item command="2">退出登录</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
<view
|
@click="iconClick(item + 2)"
|
v-for="item in 1"
|
:key="item"
|
:class="'s' + (item + 2)"
|
class="ss1 cursor"
|
style="margin-right: 0.3rem"
|
>
|
</view>
|
</view>
|
</view>
|
<!-- 高级搜索 -->
|
<view
|
v-if="isSearchTrue"
|
class="Search"
|
style="margin: 0.35rem 0 0.16rem 0; height: 0.52rem"
|
>
|
<advancedSearch
|
@onSearch="onSearch"
|
placehold=""
|
:isAvancedTrue="false"
|
:isSearchTrue="false"
|
/>
|
</view>
|
</view>
|
<view class="Bbottom">
|
<!-- 选项卡 -->
|
<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: 0.36rem;
|
display: inline-block;
|
font-size: 0.32rem;
|
overflow: hidden;
|
height: 80%;
|
line-height: 1.5;
|
"
|
>{{ item.name }}</span
|
>
|
<view
|
class="detailBtn flex flex-content"
|
style="
|
width: 0.5rem;
|
height: 0.5rem;
|
border-radius: 50%;
|
background-color: #244a7b;
|
"
|
>
|
<image
|
style="width: 40%; height: 20%"
|
src="@/static/image/eResize.png"
|
mode=""
|
></image>
|
</view>
|
</li>
|
</ul>
|
</view>
|
</view>
|
<view class="hua"></view>
|
<!-- 底部人物背景图左侧 -->
|
<view class="fff"></view>
|
<!-- 底部花的背景图右侧 -->
|
<view class="rrr"></view>
|
<Footer1 />
|
</view>
|
</template>
|
|
<script>
|
import { nextTick } from "vue";
|
import { getlogout } from "@/api/index.js";
|
import Footer1 from "@/components/footer/footer.vue";
|
export default {
|
components: {
|
Footer1,
|
},
|
data() {
|
return {
|
isCommand: true,
|
// 搜索的显示
|
isSearchTrue: true,
|
isExpanded: false, // 控制搜索框是否展开
|
searchInput: "", //小图标的搜索框
|
// 登录注册框
|
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: 6,
|
},
|
{
|
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();
|
// this.$store.commit('set_id',1)
|
},
|
methods: {
|
// 搜索
|
onSearch(val) {
|
uni.navigateTo({
|
url: "/pages/knowledgeBase/knowledgeBase?keyword=" + val.text,
|
});
|
},
|
// 搜索
|
// 切换搜索框的展开和收起状态
|
toggleSearch() {
|
this.isExpanded = !this.isExpanded;
|
this.$nextTick(() => {
|
if (this.searchInput.trim() !== "") {
|
uni.navigateTo({
|
url:
|
"/pages/knowledgeBase/knowledgeBase?keyword=" + this.searchInput,
|
});
|
}
|
this.searchInput = "";
|
});
|
},
|
// 列表项跳转
|
listDataClick(item) {
|
// 在当前页面设置全局变量
|
// uni.setStorageSync('globalData', { id: 123, name: 'example' });
|
if (item.id == 1) {
|
uni.navigateTo({
|
// url: '/pages/character/detail?id=' + item.id
|
url: "/pages/character/index?id=" + item.id,
|
});
|
} else if (item.id == 2) {
|
uni.navigateTo({
|
url: "/pages/inherit/index?id=" + item.id,
|
});
|
// uni.navigateTo({
|
// url: '/pages/shiyiHome/shiyiHome'
|
// })
|
} else if (item.id == 3) {
|
uni.navigateTo({
|
url: "/pages/academicGenres/index?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,
|
});
|
} else if (item.id == 6) {
|
uni.navigateTo({
|
url: "/pages/academicSchools/index",
|
});
|
}
|
},
|
|
// 验证码校验
|
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;
|
});
|
},
|
iconClick(index) {
|
// 搜索的显示
|
if (index == 1) {
|
// this.isSearchTrue = !this.isSearchTrue
|
} else if (index == 2) {
|
// 检查 localStorage 中是否存在 token
|
if (localStorage.getItem("access_token")) {
|
// token 存在
|
this.isCommand = true;
|
} else {
|
// token 不存在
|
this.isCommand = false;
|
uni.navigateTo({
|
url: "/pages/Login/Login",
|
});
|
}
|
} else if (index == 3) {
|
console.log("帮助");
|
}
|
},
|
// 修改获取退出按钮
|
handleCommand(int) {
|
if (int == 1) {
|
uni.navigateTo({
|
url: "/pages/changePassword/changePassword",
|
});
|
} else if (int == 2) {
|
uni.showModal({
|
// 询问用户是否退出登录
|
title: "退出登录",
|
content: "您确定要退出登录吗?",
|
success: (res) => {
|
if (res.confirm) {
|
// 退出接口
|
getlogout().then((res) => {
|
//确定退出拿到token并清除token
|
let TOKEN = uni.getStorageSync("缓存名称");
|
uni.clearStorageSync();
|
//退出成功！并跳转到其他页面
|
this.$message.success("退出成功");
|
uni.reLaunch({
|
url: "/pages/Login/Login",
|
});
|
});
|
}
|
},
|
});
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.search-logo {
|
width: 0.34rem;
|
/* logo图标的宽度 */
|
height: 0.34rem;
|
/* logo图标的高度 */
|
margin-left: 10rpx;
|
/* 与输入框之间的间距 */
|
cursor: pointer;
|
background-image: url(@/static/image/search.svg);
|
background-size: 100% 100%;
|
}
|
|
/*
|
在屏幕宽度超过 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;
|
}
|
} */
|
@media screen and (min-width: 2560px) and (max-width: 3840px) {
|
.Ttop {
|
margin-bottom: 0.7rem !important;
|
margin-top: 0.3rem !important;
|
}
|
|
.login {
|
width: 0.52rem !important;
|
height: 0.52rem !important;
|
}
|
|
.LoginBg {
|
margin: 0 !important;
|
height: 0.3rem !important;
|
}
|
|
::v-deep .Bbar img {
|
width: 0.52rem !important;
|
height: 0.52rem !important;
|
}
|
|
::v-deep .el-card {
|
top: 90% !important;
|
padding: 0 !important;
|
}
|
|
::v-deep .el-card__body {
|
padding: 0.25rem 0.5rem !important;
|
}
|
|
.Search ::v-deep .flex-center {
|
height: 80% !important;
|
}
|
|
::v-deep .searchBg {
|
width: 0.35rem;
|
height: 0.35rem;
|
margin-right: 0.03rem;
|
}
|
|
::v-deep .ffff {
|
border-radius: 0.3rem !important;
|
}
|
|
::v-deep .searchBg {
|
border-radius: inherit !important;
|
}
|
|
::v-deep .uni-input-placeholder {
|
font-size: 0.14rem;
|
height: 100%;
|
display: flex;
|
align-content: center;
|
align-items: center;
|
}
|
|
::v-deep .el-form {
|
padding-left: 0.1rem !important;
|
}
|
|
::v-deep .el-form-item__error {
|
font-size: 0.13rem !important;
|
}
|
|
::v-deep .el-input__inner {
|
height: 0.35rem !important;
|
font-size: 0.14rem;
|
}
|
|
::v-deep .el-form-item__label {
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
margin-right: 0.2rem !important;
|
width: 0.7rem;
|
}
|
|
.secretary li {
|
width: 1.3rem !important;
|
height: 4rem !important;
|
|
span {
|
width: 0.5rem !important;
|
height: 70% !important;
|
font-size: 0.25rem !important;
|
}
|
}
|
|
.hua {
|
height: 5rem !important;
|
}
|
|
.LoginTop {
|
margin-bottom: 0.4rem !important;
|
}
|
|
.yzm {
|
top: 15% !important;
|
}
|
|
.fff {
|
width: 2.4rem !important;
|
height: 4rem !important;
|
}
|
|
.rrr {
|
width: 2rem !important;
|
}
|
|
.btn {
|
margin-bottom: 0.1rem !important;
|
}
|
|
.btn ::v-deep .el-button {
|
margin-top: 0.2rem !important;
|
font-size: 0.2rem !important;
|
width: 100%;
|
padding: 0.12rem !important;
|
|
span {
|
font-weight: bold !important;
|
}
|
}
|
|
.asdf {
|
margin-bottom: 0.1rem !important;
|
}
|
}
|
|
@media screen and (min-width: 1366px) {
|
.Ttop {
|
margin-bottom: 0.6rem !important;
|
}
|
|
::v-deep .uni-input-placeholder {
|
font-size: 0.14rem;
|
height: 100%;
|
display: flex;
|
align-content: center;
|
align-items: center;
|
}
|
|
.secretary li {
|
width: 1.3rem !important;
|
height: 4rem !important;
|
|
span {
|
width: 0.5rem !important;
|
height: 70% !important;
|
font-size: 0.25rem !important;
|
}
|
}
|
|
/* 高级搜索 */
|
.Search ::v-deep .flex-center {
|
height: 80% !important;
|
}
|
|
.Search ::v-deep .ffff {
|
opacity: 0.8;
|
}
|
|
.Search ::v-deep .ffff:focus-within {
|
opacity: 1;
|
}
|
|
::v-deep .searchBg {
|
width: 0.35rem;
|
height: 0.35rem;
|
margin-right: 0.03rem;
|
}
|
|
.fff {
|
width: 2.4rem !important;
|
height: 4rem !important;
|
}
|
|
.rrr {
|
width: 2rem !important;
|
}
|
}
|
|
.btn >>> .el-form-item__content {
|
margin-left: 0 !important;
|
}
|
|
::v-deep .el-form-item__label {
|
color: #244a7b;
|
}
|
|
::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 {
|
padding: 0;
|
}
|
|
::v-deep .el-form-item__label {
|
color: #2d476a;
|
}
|
|
::v-deep .el-form-item {
|
margin-bottom: 32rpx;
|
}
|
|
.ss1 {
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
width: 0.34rem;
|
height: 0.34rem;
|
background-size: 100% 100%;
|
}
|
|
.s1 {
|
background-image: url(@/static/image/search.svg);
|
}
|
|
.s2 {
|
background-image: url(@/static/image/profile.svg);
|
}
|
|
.s3 {
|
background-image: url(@/static/image/quote.svg);
|
margin-right: 0.59rem !important;
|
}
|
|
.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: 0.38rem;
|
margin-bottom: 1.22rem;
|
}
|
|
.r-top {
|
font-size: 40rpx !important;
|
margin: 10rpx 0;
|
}
|
}
|
}
|
|
.login {
|
width: 0.52rem;
|
height: 0.52rem;
|
display: inline-block;
|
vertical-align: middle;
|
margin-right: 0.2rem;
|
background: url(@/static/image/logo.png) no-repeat 0 0;
|
background-size: 100% 100%;
|
}
|
|
.rrr {
|
position: absolute;
|
right: 0.53rem;
|
bottom: 0.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;
|
width: 1.6rem;
|
height: 4.8rem;
|
display: flex;
|
justify-content: center;
|
flex-direction: column;
|
align-items: center;
|
text-align: center;
|
background: #ebf4ff;
|
font-weight: 600;
|
margin: 0 0.21rem;
|
cursor: pointer;
|
}
|
}
|
|
::v-deep .cleanupBtn {
|
right: 52px !important;
|
}
|
|
.secretary li .detailBtn {
|
transition: translate 0.3s;
|
}
|
.secretary li .detailBtn:hover {
|
translate: 0 -5px;
|
}
|
</style>
|
