From d765d3a8c24d9d22115ab2fe33942bcb08676273 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期四, 07 八月 2025 17:03:07 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/molecularDatabase
---
src/views/detailsPage/index.vue | 308 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 308 insertions(+), 0 deletions(-)
diff --git a/src/views/detailsPage/index.vue b/src/views/detailsPage/index.vue
new file mode 100644
index 0000000..c166db0
--- /dev/null
+++ b/src/views/detailsPage/index.vue
@@ -0,0 +1,308 @@
+<template>
+ <page>
+ <div class="detailsPage">
+ <div class="detailsPage-box">
+ <div class="details-result">
+ {{ t('message.compoundSummary') }}
+ </div>
+ <div class="details-main" v-for="(item, index) in pageData.list" :key="index">
+ <div class="details-name">{{ item.name }}</div>
+ <div class="details-box">
+ <div class="details-box-left">
+ <div class="left-item">
+ <div class="left-item-title">{{ t('message.ID') }}</div>
+ <div class="left-item-content">{{ item.ID }}</div>
+ </div>
+ <div class="left-item">
+ <div class="left-item-title">{{ t('message.MolecularFormula') }}</div>
+ <div class="left-item-content">{{ item.MolecularFormula }}</div>
+ </div>
+ <div class="left-item">
+ <div class="left-item-title">{{ t('message.MolecularWeight') }}</div>
+ <div class="left-item-content">{{ item.MolecularWeight }}</div>
+ </div>
+ <div class="left-item">
+ <div class="left-item-title">{{ t('message.Smiles') }}</div>
+ <div class="left-item-content">{{ item.Smiles }}</div>
+ </div>
+ <div class="left-item">
+ <div class="left-item-title">{{ t('message.XLogP3') }}</div>
+ <div class="left-item-content">{{ item.XLogP3 }}</div>
+ </div>
+ <div class="left-item">
+ <div class="left-item-title">{{ t('message.HydrogenBondDonorCount') }}</div>
+ <div class="left-item-content">{{ item.HydrogenBondDonorCount }}</div>
+ </div>
+ <div class="left-item">
+ <div class="left-item-title">{{ t('message.HydrogenBondAcceptorCount') }}</div>
+ <div class="left-item-content">{{ item.HydrogenBondAcceptorCount }}</div>
+ </div>
+ <div class="left-item">
+ <div class="left-item-title">{{ t('message.FormalCharge') }}</div>
+ <div class="left-item-content">{{ item.FormalCharge }}</div>
+ </div>
+ <div class="left-item">
+ <div class="left-item-title">{{ t('message.PubmedID') }}</div>
+ <div class="left-item-content">{{ item.PubmedID }}</div>
+ </div>
+ <div class="left-item">
+ <div class="left-item-title">{{ t('message.Pubmedlink') }}</div>
+ <div class="left-item-content">{{ item.Pubmedlink }}</div>
+ </div>
+ </div>
+ <div class="details-box-right">
+ <div class="right-img2D">
+ <img :src="item.img2D" alt="">
+ <div>2D</div>
+ </div>
+ <div class="right-img3D">
+ <img :src="item.img3D" alt="">
+ <div>3D</div>
+ </div>
+ </div>
+ </div>
+ <div class="details-others">
+ <div v-for="(citem, dindex) in item.content" :key="dindex">
+ <div class="others-box-title">
+ <div class="title-icon"></div>
+ <div class="title-text">{{ citem.name }}</div>
+ </div>
+ <div class="others-box-content">
+ <div class="content-download">
+ <img v-if="citem.type == 'Conformer'" src="../../assets/images/details/getImage.png"
+ alt="">
+ <div v-if="citem.type == 'Conformer'" class="content-text">{{ t('message.GetImage')
+ }}</div>
+ <img src="../../assets/images/details/download.png" alt="">
+ <div class="content-text">{{ t('message.download') }}</div>
+ </div>
+ <div class="content-main">
+ <iframe class="message-text-iframe" ref="iframeRef" :src="citem.iframeSrc"
+ frameborder="0"></iframe>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </page>
+</template>
+
+<script setup lang="ts">
+import { inject, reactive } from 'vue'
+import { useI18n } from 'vue-i18n';
+const { locale, t } = useI18n();
+import type { details } from '@/types/details'
+import img2D from '../../assets/images/serachList/2D.png'
+import img3D from '../../assets/images/serachList/3D.png'
+const pageData = reactive<details>({
+ list: [
+ {
+ name: 'Aspirin',
+ ID: "224456FRET",
+ XLogP3: "1.2",
+ FormalCharge: "123",
+ img2D: img2D,
+ img3D: img3D,
+ HydrogenBondDonorCount: "1",
+ HydrogenBondAcceptorCount: "4",
+ PubmedID: "0",
+ Pubmedlink: "https://pubchem.ncbi.nlm.nih.gov/compound/#CID#",
+ content: [
+ {
+ name: "Charge Distribution",
+ type: "text",
+ },
+ {
+ name: "Herbs Containing This Ingredient",
+ type: "text",
+ },
+ {
+ name: "2D Structure",
+ type: "Conformer",
+ },
+ {
+ name: "3D Conformer",
+ type: "Conformer",
+ iframeSrc: "11",
+ },
+ ]
+ },
+ ]
+})
+
+
+</script>
+
+<style lang="less" scoped>
+.detailsPage {
+ border-top: 1px solid #D9D9D9;
+ background-color: #ecf9f6;
+}
+
+.detailsPage-box {
+ width: 63%;
+ margin: 0 auto;
+ padding: 0 0 25px 0;
+
+ .details-result {
+ padding: 23px 0;
+ }
+
+ .details-name {
+ font-family: Inter, Inter;
+ font-weight: 500;
+ font-size: 48px;
+ }
+
+ .details-box {
+ width: 100%;
+ background: #FFFFFF;
+ border-radius: 10px 10px 10px 10px;
+ padding: 19px 27px 45px 27px;
+ margin-top: 20px;
+ margin-bottom: 24px;
+ display: flex;
+ }
+
+ .details-box-left {
+ width: 70%;
+ position: relative;
+
+ .left-item {
+ width: 100%;
+ display: flex;
+ margin-bottom: 22px;
+
+ }
+
+
+ .left-item-title {
+ width: 35%;
+ font-family: Inter, Inter;
+ font-weight: 400;
+ font-size: 13px;
+ color: #385B53;
+ }
+
+ .left-item-content {
+ font-family: Inter, Inter;
+ font-weight: 400;
+ font-size: 13px;
+ color: #000;
+ }
+ }
+
+ .details-box-left::after {
+ content: '';
+ /* 浼厓绱犲繀椤昏缃� content 灞炴�� */
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 1px;
+ /* 杈规鐨勫搴� */
+ height: 100%;
+ /* 涓庣埗鍏冪礌绛夐珮 */
+
+ /* 鐩存帴璁剧疆鑳屾櫙涓烘笎鍙� */
+ background: linear-gradient(180deg,
+ rgba(255, 255, 255, 0),
+ rgba(184, 184, 184, 1),
+ rgba(255, 255, 255, 0));
+ }
+
+ .details-box-right {
+ width: 30%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
+
+ .right-img2D {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ }
+
+ .right-img3D {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ }
+
+ .details-others {
+ width: 100%;
+ background: #FFFFFF;
+ border-radius: 10px 10px 10px 10px;
+ padding: 19px 27px 45px 27px;
+ margin-top: 20px;
+ margin-bottom: 24px;
+
+
+ .others-box-title {
+ display: flex;
+ align-items: center;
+
+ .title-icon {
+ display: block;
+ width: 5px;
+ height: 33px;
+ background: linear-gradient(180deg, #5AB546 0%, #01644C 100%);
+ border-radius: 0px 0px 0px 0px;
+ margin-right: 10px;
+
+ }
+
+ .title-text {
+ font-family: Inter, Inter;
+ font-weight: normal;
+ font-size: 20px;
+ color: #333;
+ }
+ }
+
+ .others-box-content {
+ margin-top: 37px;
+ width: 100%;
+
+ .content-download {
+ width: 100%;
+ display: flex;
+ justify-content: end;
+ align-items: center;
+ background-color: #F0F0F0;
+ border-radius: 5px 5px 0px 0px;
+ padding: 7px 21px;
+ cursor: pointer;
+
+ img {
+ height: 24px;
+ }
+
+ .content-text {
+ margin-right: 10px
+ }
+
+ }
+
+ .content-main {
+ width: 100%;
+ height: 282px;
+ border: 1px solid #EBEBEB;
+ border-radius: 0px 0px 5px 5px;
+ margin-bottom: 20px;
+ }
+ }
+
+
+
+
+ }
+
+
+
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.1