pvelz4hta
/
DDI2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成查询功能的前端显示

Browse Source
master
ynmlzdwsp 11 months ago
parent 2abbdcc641
commit 247f3fd0ea
2 changed files with 134 additions and 78 deletions
Show Stats Download Patch File Download Diff File

84
src/components/index.vue
Unescape View File

@ -19,21 +19,38 @@
<div slot="error" class="image-slot background-image-error"></div>
</el-image>
<div>
<!-- 输入框 -->
<el-input v-model="inputValue1" placeholder="请输入内容"></el-input>
<el-input v-model="inputValue2" placeholder="请输入内容"></el-input>
<!-- 点击按钮 -->
<el-button @click="handleClick">点击</el-button>
</div>
<!-- 首页文字 -->
<div class="signature-wall myCenter my-animation-hideToShow">
<h1 class="playful">
<span v-for="(a, index) in $store.state.webInfo.webTitle" :key="index">{{a}}</span>
</h1>
<!-- 搜索 -->
<div style="padding: 15px;border-radius: 10px;margin-top: 30px;animation: hideToShow 1s ease-in-out"
class="shadow-box background-opacity wow">
<div style="color: var(--lightGreen);font-size: 20px;font-weight: bold;margin-bottom: 10px">
查询DDI
</div>
<div style="display: flex">
<input class="ais-SearchBox-input" type="text"
v-model="articleSearch"
placeholder="请输入药品A名称" maxlength="32">
<div style="width: 10px"></div>
<input class="ais-SearchBox-input" type="text"
v-model="articleSearch"
placeholder="请输入药品B名称" maxlength="32">
<div class="ais-SearchBox-submit" @click="selectArticle()">
<svg style="margin-top: 3.5px;margin-left: 18px" viewBox="0 0 1024 1024" width="20" height="20">
<path
d="M51.2 508.8c0 256.8 208 464.8 464.8 464.8s464.8-208 464.8-464.8-208-464.8-464.8-464.8-464.8 208-464.8 464.8z"
fill="#51C492"></path>
<path
d="M772.8 718.4c48-58.4 76.8-132.8 76.8-213.6 0-186.4-151.2-337.6-337.6-337.6-186.4 0-337.6 151.2-337.6 337.6 0 186.4 151.2 337.6 337.6 337.6 81.6 0 156-28.8 213.6-76.8L856 896l47.2-47.2-130.4-130.4zM512 776c-149.6 0-270.4-121.6-270.4-271.2S363.2 233.6 512 233.6c149.6 0 271.2 121.6 271.2 271.2C782.4 654.4 660.8 776 512 776z"
fill="#FFFFFF"></path>
</svg>
</div>
</div>
</div>
<div class="printer" @click="getGuShi()">
<printer :printerInfo="printerInfo">
@ -64,14 +81,34 @@
</div>
</div>
<articleList :articleList="articles"></articleList>
<!-- <div class="pagination-wrap">-->
<!-- <div @click="pageArticles()" class="pagination" v-if="pagination.total !== articles.length">-->
<!-- 下一页-->
<!-- </div>-->
<!-- <div v-else style="user-select: none">-->
<!-- ~~到底啦~~-->
<!-- </div>-->
<!-- </div>-->
<template>
<div class="pagination-wrap">
<div @click="pageArticles()" class="pagination" v-if="pagination.total !== articles.length">
下一页
<el-table :data="tableData">
<el-table-column prop="drugA" label="药品A"></el-table-column>
<el-table-column prop="drugB" label="药品B"></el-table-column>
<el-table-column prop="interaction" label="相互作用效果"></el-table-column>
</el-table>
<!-- <div @click="pageArticles()" class="pagination" v-if="pagination.total !== articles.length">-->
<!-- 下一页-->
<!-- </div>-->
</div>
<div v-else style="user-select: none">
<div style="user-select: none;text-align: center">
~~到底啦~~
</div>
</div>
</template>
</div>
</div>
</div>
@ -120,7 +157,13 @@
"author": "",
"category": ""
},
articles: []
articles: [],
tableData: [
{ drugA: "丁螺环酮", drugB: "CYP3A4抑制药", interaction: '服用红霉素、咪唑类抗真菌药等CYP3A4抑制药后，再用本品可使其峰浓度升高，AUC增大' },
{ drugA: "丁螺环酮", drugB: "乙醇和其他中枢抑制药", interaction: '丁螺环酮的代谢加快，使其抗焦虑作用降低' },
{ drugA: "丁螺环酮", drugB: "伊曲康唑", interaction: '可使中枢抑制作用增强' },
{ drugA: "丁螺环酮", drugB: "利福平", interaction: '伊曲康唑通过抑制CYP3A4而减少丁螺环酮的首过效应, 增加其生物利用度' }
]
};
},
@ -180,6 +223,7 @@
async getArticles() {
await this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
// await this.$http.post("http://localhost:81" + "/system/table1/list", this.pagination)
.then((res) => {
if (!this.$common.isEmpty(res.data)) {
this.articles = this.articles.concat(res.data.records);
@ -414,6 +458,18 @@
box-shadow: 0 0 5px var(--themeBackground);
}
.ais-SearchBox-input {
padding: 0 14px;
height: 30px;
width: calc(100% - 50px);
outline: 0;
border: 2px solid var(--lightGreen);
border-right: 0;
border-radius: 40px;
color: var(--maxGreyFont);
background: var(--white);
}
@media screen and (max-width: 1100px) {
.recent-posts {
width: 100%;

126
src/components/myAside.vue
Unescape View File

@ -1,27 +1,27 @@
<template>
<div>
<!-- 网站信息 -->
<div class="card-content1 shadow-box background-opacity">
<el-avatar style="margin-top: 20px" class="user-avatar" :size="120" :src="webInfo.avatar"></el-avatar>
<div class="web-name">{{webInfo.webName}}</div>
<div class="web-info">
<div class="blog-info-box">
<span>文章</span>
<span class="blog-info-num">{{ $store.getters.articleTotal }}</span>
</div>
<div class="blog-info-box">
<span>分类</span>
<span class="blog-info-num">{{ sortInfo.length }}</span>
</div>
<div class="blog-info-box">
<span>访问量</span>
<span class="blog-info-num">{{ webInfo.historyAllCount }}</span>
</div>
</div>
<a class="collection-btn" @click="showTip()">
<i class="el-icon-star-off" style="margin-right: 2px"></i>朋友圈
</a>
</div>
<!-- <div class="card-content1 shadow-box background-opacity">-->
<!-- <el-avatar style="margin-top: 20px" class="user-avatar" :size="120" :src="webInfo.avatar"></el-avatar>-->
<!-- <div class="web-name">{{webInfo.webName}}</div>-->
<!-- <div class="web-info">-->
<!-- <div class="blog-info-box">-->
<!-- <span>文章</span>-->
<!-- <span class="blog-info-num">{{ $store.getters.articleTotal }}</span>-->
<!-- </div>-->
<!-- <div class="blog-info-box">-->
<!-- <span>分类</span>-->
<!-- <span class="blog-info-num">{{ sortInfo.length }}</span>-->
<!-- </div>-->
<!-- <div class="blog-info-box">-->
<!-- <span>访问量</span>-->
<!-- <span class="blog-info-num">{{ webInfo.historyAllCount }}</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- <a class="collection-btn" @click="showTip()">-->
<!-- <i class="el-icon-star-off" style="margin-right: 2px"></i>朋友圈-->
<!-- </a>-->
<!-- </div>-->
<!-- 搜索 -->
<div style="padding: 15px;border-radius: 10px;margin-top: 30px;animation: hideToShow 1s ease-in-out"
@ -32,7 +32,7 @@
<div style="display: flex">
<input class="ais-SearchBox-input" type="text"
v-model="articleSearch"
placeholder="搜索文章" maxlength="32">
placeholder="搜索药品" maxlength="32">
<div class="ais-SearchBox-submit" @click="selectArticle()">
<svg style="margin-top: 3.5px;margin-left: 18px" viewBox="0 0 1024 1024" width="20" height="20">
<path
@ -111,46 +111,46 @@
</div>
<!-- 赞赏 -->
<div class="shadow-box-mini background-opacity wow admire-box"
v-if="!$common.isEmpty(admires)">
<div style="font-weight: bold;margin-bottom: 20px">🧨赞赏名单</div>
<div>
<vue-seamless-scroll :data="admires" style="height: 200px;overflow: hidden">
<div v-for="(item, i) in admires"
style="display: flex;justify-content: space-between"
:key="i">
<div style="display: flex">
<el-avatar style="margin-bottom: 10px" :size="36" :src="item.avatar"></el-avatar>
<div style="margin-left: 10px;height: 36px;line-height: 36px;overflow: hidden;max-width: 80px">
{{ item.username }}
</div>
</div>
<div style="height: 36px;line-height: 36px">
{{ item.admire }}元
</div>
</div>
</vue-seamless-scroll>
</div>
<div class="admire-btn" @click="showAdmire()">
赞赏
</div>
</div>
<!-- 微信 -->
<el-dialog title="赞赏"
:visible.sync="showAdmireDialog"
width="25%"
:append-to-body="true"
destroy-on-close
center>
<div>
<div class="admire-image"></div>
<div>
<div class="admire-content">1. 感谢老铁送来的666</div>
<div class="admire-content">2. 申请通过后会加博客交流群，不需要加群或者退群后会定期清理好友（强迫症福利）</div>
</div>
</div>
</el-dialog>
<!-- <div class="shadow-box-mini background-opacity wow admire-box"-->
<!-- v-if="!$common.isEmpty(admires)">-->
<!-- <div style="font-weight: bold;margin-bottom: 20px">🧨赞赏名单</div>-->
<!-- <div>-->
<!-- <vue-seamless-scroll :data="admires" style="height: 200px;overflow: hidden">-->
<!-- <div v-for="(item, i) in admires"-->
<!-- style="display: flex;justify-content: space-between"-->
<!-- :key="i">-->
<!-- <div style="display: flex">-->
<!-- <el-avatar style="margin-bottom: 10px" :size="36" :src="item.avatar"></el-avatar>-->
<!-- <div style="margin-left: 10px;height: 36px;line-height: 36px;overflow: hidden;max-width: 80px">-->
<!-- {{ item.username }}-->
<!-- </div>-->
<!-- </div>-->
<!-- <div style="height: 36px;line-height: 36px">-->
<!-- {{ item.admire }}元-->
<!-- </div>-->
<!-- </div>-->
<!-- </vue-seamless-scroll>-->
<!-- </div>-->
<!-- <div class="admire-btn" @click="showAdmire()">-->
<!-- 赞赏-->
<!-- </div>-->
<!-- </div>-->
<!-- 微信 -->
<!-- <el-dialog title="赞赏"-->
<!-- :visible.sync="showAdmireDialog"-->
<!-- width="25%"-->
<!-- :append-to-body="true"-->
<!-- destroy-on-close-->
<!-- center>-->
<!-- <div>-->
<!-- <div class="admire-image"></div>-->
<!-- <div>-->
<!-- <div class="admire-content">1. 感谢老铁送来的666</div>-->
<!-- <div class="admire-content">2. 申请通过后会加博客交流群，不需要加群或者退群后会定期清理好友（强迫症福利）</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-dialog>-->
</div>
</template>
@ -159,7 +159,7 @@
export default {
components: {
vueSeamlessScroll
// vueSeamlessScroll
},
data() {
return {

Write Preview
Loading…
Cancel
Save