数据库精选-前端代码
<template >
<div >
<template>
<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>
<div class="container" >
<div class="header" style="margin: 0 auto; width: 1000px;">
<div class="left">
</div>
<p style="color:#2d2b2b; font-size: 30px">Database of Common Drugs</p>
<div class="right">
</div>
</div>
<div class="main" style="margin: auto; width: 1000px">
<div class="info">
<div class="login-wrapper">
<span class="line"></span>
<span class="login-text">Function Introduction</span>
<span class="line"></span>
</div>
<p style="margin-top: 10px">
Drug databases are very useful tools when it comes to information and data on commonly used drugs. A drug database is a system that organizes and stores drug-related information, which provides data on the detailed description, characteristics, uses, dosage, side effects, and so on of a drug. Drug databases are typically created and maintained by specialized pharmaceutical organizations, medical research organizations, or drug regulatory agencies. These databases collect, collate, and update drug-related data, enabling physicians, pharmacists, researchers, and patients to easily access accurate and comprehensive drug information.
</p>
</div>
</div>
<div class="line" style="margin-bottom: 20px;"></div>
</div>
<!-- <div style="margin-bottom: 20px;margin-top: 20px">-->
<!-- <p class="text-xs" >常用药物数据库</p>-->
<!-- <!– 第一行–>-->
<!-- </div>-->
<el-row :gutter="30">
<el-col :span="4" >
<div @click="toDetail(0)">
<database :message="listData[0]" :key="listData[0].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(1)">
<database :message="listData[1]" :key="listData[1].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(2)">
<database :message="listData[2]" :key="listData[2].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(3)">
<database :message="listData[3]" :key="listData[3].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(4)">
<database :message="listData[4]" :key="listData[4].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(5)">
<database :message="listData[5]" :key="listData[5].id"></database>
</div>
</el-col>
</el-row>
<el-row :gutter="30">
<el-col :span="4">
<div @click="toDetail(6)">
<database :message="listData[6]" :key="listData[6].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(7)">
<database :message="listData[7]" :key="listData[7].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(8)">
<database :message="listData[8]" :key="listData[8].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(9)">
<database :message="listData[9]" :key="listData[9].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(10)">
<database :message="listData[10]" :key="listData[10].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(11)">
<database :message="listData[11]" :key="listData[11].id"></database>
</div>
</el-col>
</el-row>
<el-row :gutter="30">
<el-col :span="4">
<div @click="toDetail(12)">
<database :message="listData[12]" :key="listData[12].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(13)">
<database :message="listData[13]" :key="listData[13].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(14)">
<database :message="listData[14]" :key="listData[14].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(15)">
<database :message="listData[15]" :key="listData[15].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(16)">
<database :message="listData[16]" :key="listData[16].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(17)">
<database :message="listData[17]" :key="listData[17].id"></database>
</div>
</el-col>
</el-row>
<el-row :gutter="30">
<el-col :span="4">
<div @click="toDetail(18)">
<database :message="listData[18]" :key="listData[18].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(19)">
<database :message="listData[19]" :key="listData[19].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(20)">
<database :message="listData[20]" :key="listData[20].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(21)">
<database :message="listData[21]" :key="listData[21].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(22)">
<database :message="listData[22]" :key="listData[22].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(23)">
<database :message="listData[23]" :key="listData[23].id"></database>
</div>
</el-col>
</el-row>
<el-row :gutter="30">
<el-col :span="4">
<div @click="toDetail(24)">
<database :message="listData[24]" :key="listData[24].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(25)">
<database :message="listData[25]" :key="listData[25].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(26)">
<database :message="listData[26]" :key="listData[26].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(27)">
<database :message="listData[27]" :key="listData[27].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(28)">
<database :message="listData[28]" :key="listData[28].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(29)">
<database :message="listData[29]" :key="listData[29].id"></database>
</div>
</el-col>
</el-row>
<el-row :gutter="30">
<el-col :span="4">
<div @click="toDetail(30)">
<database :message="listData[30]" :key="listData[30].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(31)">
<database :message="listData[31]" :key="listData[31].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(32)">
<database :message="listData[32]" :key="listData[32].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(33)">
<database :message="listData[33]" :key="listData[33].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(34)">
<database :message="listData[34]" :key="listData[34].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(35)">
<database :message="listData[35]" :key="listData[35].id"></database>
</div>
</el-col>
</el-row>
<el-row :gutter="30">
<el-col :span="4">
<div @click="toDetail(36)">
<database :message="listData[36]" :key="listData[36].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(37)">
<database :message="listData[37]" :key="listData[37].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(38)">
<database :message="listData[38]" :key="listData[38].id"></database>
</div>
</el-col>
<el-col :span="4">
<div @click="toDetail(39)">
<database :message="listData[39]" :key="listData[39].id"></database>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
const boxes = document.querySelectorAll('.box')
import Database from "@/views/front/database.vue";
export default {
name: "AllDatabase",
components: {Database},
data() {
return{
listData: [{}],
};
},
created() {
//请求分页查询数据
//这个地方跨域了,可以去后台设置跨域
this.load()
},
methods: {
load(){
console.log("111")
this.request.get("db/findall").then(res =>{
this.listData = res.data
console.log(this.listData)
})
console.log("222")
},
toDetail(id){
console.log("333333333")
sessionStorage.setItem('id',id)
this.$router.push('/front/dbdetails')
},
}
}
</script>
<style scoped>
.back{
background-color: rgba(130,130,130,.5);
}
.text-xs{
font-size:20px !important;
color: #6c757d !important;;
}
.css-ysrhmt {
border-radius: 2px;
overflow: hidden;
margin-top: 16px;
}
.container {
max-width: 100vw;
margin: auto;
}
.inner {
border-bottom: 1px solid rgba(155, 151, 151, 0.54);
margin: 50px auto;
width: 90%;
}
.header {
padding: 20px;
text-align: center;
}
.left {
border-top: 2px solid darkgreen; /* 控制横线的粗细、颜色和样式 */
width: 15%; /* 控制横线的长度 */
margin: 10px 340px auto; /* 控制横线的上下间距及水平居中 */
}
.right {
border-top: 2px solid darkgreen; /* 控制横线的粗细、颜色和样式 */
width: 15%; /* 控制横线的长度 */
margin: 10px 490px auto; /* 控制横线的上下间距及水平居中 */
}
.header h1 {
font-size: 36px;
color: #333;
}
.main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 40px;
text-align: center;
}
.info {
padding: 20px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(155, 151, 151, 0.54);
}
.info h2 {
font-size: 26px;
color: #333;
}
.el-card {
height: 350px;
}
.info p {
font-size: 8px;
line-height: 1.5;
color: #666;
}
.login-wrapper {
display: flex;
align-items: center; /* 垂直居中 */
text-align: center; /* 文字水平居中 */
}
.line {
flex: 1; /* 让横线自适应宽度,两边相等 */
height: 1px; /* 横线的高度 */
background-color: #d2d4d7; /* 使用文本颜色,保证与文本颜色一致 */
margin: 0 10px; /* 横线与文本间的间隔 */
}
div {
display: block;
unicode-bidi: isolate;
}
.css-kbccfo {
margin: 0px;
font-family: Roboto, Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 1.5rem;
line-height: 1.334;
letter-spacing: 0em;
display: flex;
-webkit-box-align: center;
align-items: center;
}
h5 {
display: block;
font-size: 0.83em;
margin-block-start: 1.67em;
margin-block-end: 1.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
unicode-bidi: isolate;
}
.css-1rr4qq7 {
flex: 1 1 0%;
}
.css-1ks37pz {
border-left: 6px solid rgb(246, 144, 61);
border-top-color: rgb(246, 144, 61);
border-right-color: rgb(246, 144, 61);
border-bottom-color: rgb(246, 144, 61);
background-color: rgb(16, 126, 100);
color: rgb(255, 255, 255);
padding: 8px 8px 8px 16px;
}
.css-kbccfo {
margin: 0px;
font-family: Roboto, Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 1.5rem;
line-height: 1.334;
letter-spacing: 0em;
display: flex;
-webkit-box-align: center;
align-items: center;
}
.css-vubbuv {
user-select: none;
width: 1em;
height: 1em;
display: inline-block;
fill: currentcolor;
flex-shrink: 0;
transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
font-size: 1.5rem;
}
svg:not(:root) {
overflow-clip-margin: content-box;
overflow: hidden;
}
.fp-enabled body, html.fp-enabled {
margin: 0;
padding: 0;
overflow: hidden;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
.fp-section {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.fp-slide {
float: left
}
.fp-slide, .fp-slidesContainer {
height: 100%;
display: block
}
.fp-slides {
z-index: 1;
height: 100%;
overflow: hidden;
position: relative;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout: fixed;
width: 100%
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%
}
.fp-slidesContainer {
float: left;
position: relative
}
.fp-controlArrow {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
position: absolute;
z-index: 4;
top: 50%;
cursor: pointer;
width: 0;
height: 0;
border-style: solid;
margin-top: -38px;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.fp-controlArrow.fp-prev {
left: 15px;
width: 0;
border-width: 38.5px 34px 38.5px 0;
border-color: transparent #fff transparent transparent
}
.fp-controlArrow.fp-next {
right: 15px;
border-width: 38.5px 0 38.5px 34px;
border-color: transparent transparent transparent #fff
}
.fp-scrollable {
overflow: hidden;
position: relative
}
.fp-scroller {
overflow: hidden
}
.iScrollIndicator {
border: 0 !important
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important
}
#fp-nav {
position: fixed;
z-index: 100;
top: 50%;
opacity: 1;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translate3d(0, -50%, 0)
}
#fp-nav.fp-right {
right: 17px
}
#fp-nav.fp-left {
left: 17px
}
.fp-slidesNav {
position: absolute;
z-index: 4;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0 !important;
right: 0;
margin: 0 auto !important
}
.fp-slidesNav.fp-bottom {
bottom: 17px
}
.fp-slidesNav.fp-top {
top: 17px
}
#fp-nav ul, .fp-slidesNav ul {
margin: 0;
padding: 0
}
#fp-nav ul li, .fp-slidesNav ul li {
display: block;
width: 14px;
height: 13px;
margin: 7px;
position: relative
}
.css-faujvq {
display: flex;
-webkit-box-align: center;
align-items: center;
padding: 6px;
text-align: center;
}
.fp-slidesNav ul li {
display: inline-block
}
#fp-nav ul li a, .fp-slidesNav ul li a {
display: block;
position: relative;
z-index: 1;
width: 100%;
height: 100%;
cursor: pointer;
text-decoration: none
}
.css-13ie2wa {
margin: 0px;
font-family: Roboto, Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 1.15rem;
line-height: 1.6;
letter-spacing: 0.0075em;
display: block;
}
#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span {
height: 12px;
width: 12px;
margin: -6px 0 0 -6px;
border-radius: 100%
}
#fp-nav ul li a span, .fp-slidesNav ul li a span {
border-radius: 50%;
position: absolute;
z-index: 1;
height: 4px;
width: 4px;
border: 0;
background: #333;
left: 50%;
top: 50%;
margin: -2px 0 0 -2px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out
}
#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span {
width: 10px;
height: 10px;
margin: -5px 0 0 -5px
}
#fp-nav ul li .fp-tooltip {
position: absolute;
top: -2px;
color: #fff;
font-size: 14px;
font-family: arial, helvetica, sans-serif;
white-space: nowrap;
max-width: 220px;
overflow: hidden;
display: block;
opacity: 0;
width: 0;
cursor: pointer
}
#fp-nav ul li:hover .fp-tooltip, #fp-nav.fp-show-active a.active + .fp-tooltip {
-webkit-transition: opacity .2s ease-in;
transition: opacity .2s ease-in;
width: auto;
opacity: 1
}
#fp-nav ul li .fp-tooltip.fp-right {
right: 20px
}
#fp-nav ul li .fp-tooltip.fp-left {
left: 20px
}
.fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell, .fp-auto-height.fp-section {
height: auto !important
}
.fp-responsive .fp-auto-height-responsive .fp-slide, .fp-responsive .fp-auto-height-responsive .fp-tableCell, .fp-responsive .fp-auto-height-responsive.fp-section {
height: auto !important
}
.line {
border-top: 1px solid lightgray;
}
</style>