<template>
|
<div class="indexPage">
|
<div class="contentBox logoBox">
|
<div class="logo">
|
<img
|
@click="
|
() => {
|
$router.push({
|
path: '/home',
|
});
|
}
|
"
|
src="@/assets/images/yinpian/home/image-2@2x.png"
|
/>
|
<img
|
style="width: 200px; height: 44px"
|
src="@/assets/images/yinpian/home/sylogo.svg"
|
/>
|
</div>
|
<div class="searchBox">
|
<div class="loginInfoBox">
|
<div v-if="!userInfo" class="loginBtnBox">
|
<a
|
@click="
|
() => {
|
// $router.push({
|
// path: '/register',
|
// });
|
}
|
"
|
>注册</a
|
>
|
|
|
<a
|
@click="
|
() => {
|
// $router.push({
|
// path: '/login',
|
// query: {
|
// redirectPath: $route.fullPath,
|
// },
|
// });
|
}
|
"
|
>登录</a
|
>
|
</div>
|
<div v-else class="userInfoBox">
|
<el-dropdown @command="handleCommand">
|
<span style="cursor: pointer">欢迎您，{{ userInfo.name }}！</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item
|
icon="el-icon-user"
|
command="gotoPersonalCenter"
|
>个人中心</el-dropdown-item
|
>
|
<el-dropdown-item icon="el-icon-switch-button" command="logout"
|
>退出登录</el-dropdown-item
|
>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="contentBox homeContent">
|
<div class="homeTitle">中药饮片在线学习与机器视觉识别平台</div>
|
<div class="subTitle">
|
<p>
|
中药饮片在线学习与机器视觉识别平台是中药饮片在线学习与机器视觉识别平台是借助互联网和机器视觉技术，为中药饮片在线交
|
</p>
|
<p>
|
互式学习、识别与鉴定等提供服务的平台，涵盖中药饮片数据库查询、在线学习、机器视觉识别等功能。
|
</p>
|
</div>
|
<div class="searchBox">
|
<div class="searchText">中药饮片数据库</div>
|
<div class="searchInput">
|
<el-input
|
style="border: none"
|
v-model="searchValue"
|
placeholder="请输入内容"
|
></el-input>
|
</div>
|
<div class="searchBtn">
|
<i class="el-icon-search"></i>
|
<span>检索</span>
|
</div>
|
</div>
|
<div class="cardBox">
|
<div @click="$router.push({ path: '/home/search' })" class="database">中药饮片数据库</div>
|
<el-popover placement="bottom" trigger="hover">
|
<popover />
|
<div slot="reference" class="learningSystem">中药饮片学习系统</div>
|
</el-popover>
|
|
<div class="recognitionSystem">饮片视觉识别系统</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
import popover from "./popover.vue";
|
export default {
|
computed: {
|
...mapState(["userInfo"]),
|
},
|
components: {
|
popover,
|
},
|
name: "home",
|
data() {
|
return {
|
bannerList: [],
|
informationData: [],
|
noticeData: [],
|
honorData: [],
|
menuData: [],
|
bookListData: [],
|
bookListTotal: 0,
|
bookListLoading: true,
|
showMenuIndex: 0,
|
searchValue: "",
|
};
|
},
|
|
methods: {
|
//点击轮播图跳转
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@import "@/assets/css/theme.less";
|
.indexPage {
|
min-width: 1220px;
|
background-color: #fff;
|
background-image: url("@/assets/images/yinpian/home/home_bg.png");
|
|
.logoBox {
|
padding: 25px 0;
|
overflow: hidden;
|
max-width: 1200px !important;
|
display: flex;
|
justify-content: space-between;
|
margin: 0 auto;
|
.logo {
|
height: 66px;
|
display: flex;
|
align-items: center;
|
img {
|
height: 100%;
|
cursor: pointer;
|
}
|
}
|
.searchBox {
|
width: 670px;
|
float: right;
|
padding-right: 10px;
|
line-height: 66px;
|
display: flex;
|
justify-content: end;
|
.searchItem {
|
width: 120px;
|
vertical-align: initial;
|
}
|
.searchBtn {
|
width: auto;
|
background: #144941;
|
color: #fff;
|
padding: 0 20px;
|
height: 40px;
|
}
|
}
|
}
|
|
.homeContent {
|
padding: 100px 0;
|
text-align: center;
|
.homeTitle {
|
font-size: 36px;
|
color: #01644c;
|
font-weight: 700;
|
}
|
.subTitle {
|
line-height: 29px;
|
margin-top: 30px;
|
}
|
}
|
.searchBox {
|
margin-top: 50px;
|
display: flex;
|
justify-content: space-between;
|
.searchText {
|
font-size: 18px;
|
background: url("@/assets/images/yinpian/home/yinpianshujuku.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
width: 180px;
|
height: 60px;
|
text-align: center;
|
line-height: 60px;
|
}
|
.searchInput {
|
width: 700px;
|
height: 60px;
|
background: url("@/assets/images/yinpian/home/search_fill.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
padding: 0 20px;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.searchBtn {
|
font-size: 18px;
|
color: #fff;
|
background: url("@/assets/images/yinpian/home/search.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
width: 180px;
|
height: 60px;
|
text-align: center;
|
line-height: 60px;
|
}
|
}
|
.cardBox {
|
margin-top: 50px;
|
display: flex;
|
justify-content: space-between;
|
}
|
}
|
.database,
|
.learningSystem,
|
.recognitionSystem {
|
width: 380px;
|
height: 130px;
|
line-height: 130px;
|
font-size: 24px;
|
color: #01644c;
|
cursor: pointer;
|
}
|
.database {
|
background: url("@/assets/images/yinpian/home/shujuku.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
}
|
.learningSystem {
|
background: url("@/assets/images/yinpian/home/xuexixitong_bg.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
}
|
.recognitionSystem {
|
background: url("@/assets/images/yinpian/home/shijueshibie_Bg.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
}
|
</style>
|
<style>
|
.searchInput .el-input__inner {
|
height: 50px;
|
line-height: 50px;
|
border: 0;
|
}
|
</style>
|
