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

完成查询功能的前端显示

Browse Source
master
ynmlzdwsp 2 years 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> <div slot="error" class="image-slot background-image-error"></div>
</el-image> </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"> <div class="signature-wall myCenter my-animation-hideToShow">
<h1 class="playful"> <h1 class="playful">
<span v-for="(a, index) in $store.state.webInfo.webTitle" :key="index">{{a}}</span> <span v-for="(a, index) in $store.state.webInfo.webTitle" :key="index">{{a}}</span>
</h1> </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()"> <div class="printer" @click="getGuShi()">
<printer :printerInfo="printerInfo"> <printer :printerInfo="printerInfo">
@ -64,14 +81,34 @@
</div> </div>
</div> </div>
<articleList :articleList="articles"></articleList> <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 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>
<div v-else style="user-select: none"> <div style="user-select: none;text-align: center">
~~到底啦~~ ~~到底啦~~
</div> </div>
</div>
</template>
</div> </div>
</div> </div>
</div> </div>
@ -120,7 +157,13 @@
"author": "", "author": "",
"category": "" "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() { async getArticles() {
await this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination) 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) => { .then((res) => {
if (!this.$common.isEmpty(res.data)) { if (!this.$common.isEmpty(res.data)) {
this.articles = this.articles.concat(res.data.records); this.articles = this.articles.concat(res.data.records);
@ -414,6 +458,18 @@
box-shadow: 0 0 5px var(--themeBackground); 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) { @media screen and (max-width: 1100px) {
.recent-posts { .recent-posts {
width: 100%; width: 100%;

126
src/components/myAside.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save