2024.6.15 山东大学项目实训纪实

数据库精选-前端代码

<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>-->
<!--      &lt;!&ndash;    第一行&ndash;&gt;-->
<!--    </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>

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值