From c01376fe5573ce87808752b00024482280031000 Mon Sep 17 00:00:00 2001
From: chenyonghang <HnChen20211201@163.com>
Date: Mon, 17 Jun 2024 14:37:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...TML和JavaScript的药品管理系统.xlsx | Bin 12642 -> 12644 bytes
 ...TML和JavaScript的药品管理系统.xlsx | Bin 12864 -> 12864 bytes
 src/Backend-services/frame.html               |   2 +-
 src/src/Home-page/Home-page.html              | 332 +++++++++++++++++-
 4 files changed, 331 insertions(+), 3 deletions(-)

diff --git a/doc/软件开发项目的个人自评报告-基于HTML和JavaScript的药品管理系统.xlsx b/doc/软件开发项目的个人自评报告-基于HTML和JavaScript的药品管理系统.xlsx
index 3d7e9bed571fc55d6de264220716905224cc76db..c8d89b0c88e7b85e8740ea49bc8425eb8d7d2854 100644
GIT binary patch
delta 1776
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
SFg*dDlQuCX1_3Sr0002_PdbYL

delta 1726
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
Ullm|{0i2UKF(wB8EdT%j0PRBxmH+?%

diff --git a/doc/软件开发项目的团队自评报告-基于HTML和JavaScript的药品管理系统.xlsx b/doc/软件开发项目的团队自评报告-基于HTML和JavaScript的药品管理系统.xlsx
index 17e20f6c9c9d89070355dbc8b7e8af7fb7479bcf..bcb9c13baecde8a8013b67a8ff79a26f3807e528 100644
GIT binary patch
delta 1232
zcmV;>1TXu*WWZ#w?FN5`XqW1<0ssJL1^@sL0001ZY%h0ja%*C5Z)+}iZEU1f+fL&!
z5Pe^1|H1NmNSwBTMx=;d5S0K`3kxrmkn6aOMPg@dhqgle`;HUZQo0W;M6EBG(eas?
z<H_mSs>snZ*G4FrU~&{-#3fUykc$NWzPs>FFfx|Pl;%qE1h0R&!DqdnKTelQKh2bS
zLI5C5f-`H&*!K;~ctOpPD!By9T<L;Z*y@FEO3i6%GR|$0`(Y47enExA4MMCxgQ4bg
z!T3<Is^HQ#Ae!gY0)3N-(rnNQ_8GW>>Zhvom?}zun2B82bq$J9!Q$~kDotlOguNmi
zw9@d4;7<Y=!p(n4U^+Oe5KJqh=Jp7n{f6{G{3P%R*-OFdFbAJQYWtc$3s=J}D;<52
zRkX#5c3>p<HW~qG)mn)md0#~9Y`KNFcRCk2zi*_AXj$IS!c{8AD5u7bQek<T;A7aT
zCEva1V5F<EUx^&7;c*n6V86GO^F+f2YJZ+vt|hg6prn5Vsl8GEuB>Y8L8d^&=okM}
z3C-c|fP^3%7%7YC%uJ}wP^I$(598@1qi}^7udHA+N7q!+1$W{{w`*g0F}=LIzM7_r
zP2UNU9;*L8BuSaeh!0t4m^SN=83DpN-pFoZHG=hccm=7yrO!|ZC^xXG@97vaO<IqV
z>6kpe1f73=G#U-M-bweO<+Vq_$m{p}p+|<Ke;!8X12P!CLNGdtnWB}=-fHZi6WoS^
z9+<A_YGWZmT#0l?<0W`|JU4$BHnvw6u<K^`f-lWZ4Q`884??DDnP88E5Y&2qyR3~5
zBDERFsT;JxrFnPB#Uca7q|@y>?d#AnOYk0}VZ%}A0v^u|dyM>dl<K|-)an_@TI;v2
zml9~uZmyFI+K$~BdYlp$(}6d%t*tk#x8C7Dy<6|RVZHTk)dJa20$s9+MsBJ}wA-Dq
zQ+sSa61~3wlMxXVv(5=Z0t$4qB1PZ?005>DlP?h&voj3Z14odfBZ3QV2ri&pLR$ae
z8AeyD5hf39E`4~}r52aZL_fbE3@{*#z#ZCLBO<K9{bgeNkp*F90cl)d_$L8B8FZYc
z{+GrV0JBpN0T%>;I8e#6SSKj~e}ga-hVM=M52W|dGH}xdSmMmCMl=!Q$6amDHX<#g
zt#14G7TAzQ<7NB4efspI$$T#>?+dgkYn7rfAjkv7Yf-9Aik^z4e~mn2nG&q36{P3@
z2F<g}i-b3n*BTyl-GH_w7|)TEp}a}a*4l<*Z1@%=Gl6R;7p`k9nRQFOf58poA8Z47
zLdX<LuuL$^a0~RCfrySs!3SjXsjChkIED%&C~I&Sg!rdxK}+-Jfi4*}WoZwMd(%;O
z%oe;4hxXo-Lvgp;1-q!zaQ-2F$yblvQ~gr4v*LiVL~zPAFk9=axX<&~1dn#w=~c|w
z+zonNg19|oD<<FFAic#FN>qY>=MLEU_f!y`Goro!DS3_-cf}HA6B6F|B=V!MATxRu
zQ$pU_>(9=&hW&;-O8iTl#6Fq&;jAE28pSl8jff{e)_I@*itHPc5fK!#-6@I%1&3&t
u>a&w<FH!-&lfN%51$46_Mc|Y1FBJj-43m!&6|)^MUjYPxI8e!xfHA;OEmI5t

delta 1232
zcmV;>1TXu*WWZ#w?FN6`<s{v-0ssJL1^@sL0001ZY%h0ja%*C5Z)+}iZEU1fO;6)6
z5WTOo|H1M-Bu>+`jYtttDk?3jYGL7mgj~mMED}3wJG2$zzwbDqEv0*4A!_}R89l$5
zd7d1ftjYpCaczW>DJDk&MqDzL3Asq|@0+pL$H-VJGg>IgQ@nrX2A>SSe>+|({Ww$V
z5dnZSDbB5}65ls0=Or~qs^StXbEQjaVXGIusWhjV$vL-W;fFyG`y~|;w+M;;2!@)^
z1>+;d>XJ*_f@oe)3-nDcDziZ=*+<|?svqmhW2&qGVkQb<*9|B}B}*m?sWhDx5cZ06
z(MrQFhCc~l2seKxf$89=QZTKIn%g6Q_FK{i@sq$OWG@A)!yJ4JDe^Uc60U|@RyzJ9
zt9XkQ@4!g#Wi$fPYP6C-@;-^y-Es@@@OUl?e%neH(W?4MOIN7^qk<ZHkqOJQ6!&1O
zmVEc3i;=FYvsx5j4SR9e$Nq3D=c$Gb)c&-vTuW;Cxsrbtr1nbvtFmga&vOMLM!)!<
zT4)Y;2P6dHz(`p_XJ$%mj%r<`c$C~va|&08@!AST3v@*#U2rFUbiFo~m-m-9S3mAE
z#qQq-k{+u6KO{++%ZLwIXqmR__Zb1gI@!o>YBhrOWb^}4e@&mD5KwMl)!fqwWSVpy
zB-06bcn*KU@kMt;2HwTldF(~we$VU2XJc<P4o*8!Z!j1|<OPD!al#a>ZT?zg2c6;w
z3VL9=qN|OC1W7Hj9gXMU_3_;NZrIpfT)?iI-3q=mJ2kj1THOhmsbz{i5<*bx{q3?b
z-igfSAg4hPflK@Dl8Z$Sj7fJeaN5_QW0vAQMx#=e(HI`j4SS6IH<X&b3DlYy$wuqf
zu9p&M&~9#$4BAfI8G4ct7t?_^w5_c-the6bKfOC|ykWid?lc0~Py$`DsYY&UNJLRL
z>^2^okHqjV0Fx0B6tm3<LIMgByiq;h1ONc05tA<w8M87B+5<)q^@!kt8-fccmyp&!
zc!tr{YJ|x{n@b;FcB#eXGttj42m=gABXEZ{*N6yfaDSQDeq=$ISwI>W82(AXPX-;Q
zssE+%1+!BS0T%>0S-nBCSSKj~f5RXYhVM=M4-NMn(AKG>>k?;nwM7$a{J29n+Zqcc
zfX@AUX}8rb8ZY5}d3ZP>pMI%2`ULB$Mo$nO5fp(IjjZ%~f*#9xe1#(Cxt6?cG)&MA
z9GVvAXSpy;G#2h{W5D_fTog#!F<~ZX<Go=RJFx-9-6%A42v?0&+=r!Ie`CYNJ6{7%
z2pMAqo=fgIZh^7siRgfoqDPt!TXz5{Fw~$xdxz<W;-9VutK6Rlx@6E)mEW20ri1Q~
zEyX_U+h4Bgi`(sXv`ssW;7{@Ma`DhTHLi3!D*>p;rC`DW_l+&eyXEpF$Ag`AdNp@`
z83w(oK;G<%1y^rjkkM=dN;=2C^8oDp_f(KkFk*ZEWAc>FZp%3;5<;(IlEx`5$tAnU
z7$L9i^(W_B!~KRjNc>AovY3oxIxZ<?S<13xKs*A9&inLN6yE@o5fK!#-6@I%1>EH%
u-L#WzFH!-(lfN%51roebJ>Qe@FBJj;43m!&6|)^MUjYO;S-nA%fHA<ZBRner

diff --git a/src/Backend-services/frame.html b/src/Backend-services/frame.html
index 096327f..2dfc262 100644
--- a/src/Backend-services/frame.html
+++ b/src/Backend-services/frame.html
@@ -273,7 +273,7 @@
                 <h2 id="heaer">药品管理系统〉首页</h2>
             </div>
             <div id="neirong" class="box4">
-                <iframe id="sonpage" src="../src/Basic-information/Basic-information.html" width="100%" height="100%"></iframe>
+                <iframe id="sonpage" src="../src/Home-page/Home-page.html" width="100%" height="100%"></iframe>
             </div>  
         </div>
     </div>
diff --git a/src/src/Home-page/Home-page.html b/src/src/Home-page/Home-page.html
index 9dff531..d5cb309 100644
--- a/src/src/Home-page/Home-page.html
+++ b/src/src/Home-page/Home-page.html
@@ -3,9 +3,337 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>首页</title>
+    <style>
+        .notification {
+        display: flex;
+        flex-direction: column;
+        isolation: isolate;
+        position: relative;
+        width: 18rem;
+        height: 8rem;
+        background: #ffffff;
+        border-radius: 1rem;
+        overflow: hidden;
+        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+        font-size: 16px;
+        --gradient: linear-gradient(to bottom, #2eadff, #3d83ff, #7e61ff);
+        --color: #32a6ff
+        }
+
+        .notification:before {
+        position: absolute;
+        content: "";
+        inset: 0.0625rem;
+        border-radius: 0.9375rem;
+        background: #ffffff;
+        z-index: 2
+        }
+
+        .notification:after {
+        position: absolute;
+        content: "";
+        width: 0.25rem;
+        inset: 0.65rem auto 0.65rem 0.5rem;
+        border-radius: 0.125rem;
+        background: var(--gradient);
+        transition: transform 300ms ease;
+        z-index: 4;
+        }
+
+        .notification:hover:after {
+        transform: translateX(0.15rem)
+        }
+
+        .notititle {
+        color: var(--color);
+        padding: 0.65rem 0.25rem 0.4rem 1.25rem;
+        font-weight: 500;
+        font-size: 1.1rem;
+        transition: transform 300ms ease;
+        z-index: 5;
+        }
+
+        .notification:hover .notititle {
+        transform: translateX(0.15rem)
+        }
+
+        .notibody {
+        color: #121213;
+        padding: 0 1.25rem;
+        transition: transform 300ms ease;
+        z-index: 5;
+        }
+
+        .notification:hover .notibody {
+        transform: translateX(0.25rem)
+        }
+
+        .notiglow,
+        .notiborderglow {
+        position: absolute;
+        width: 20rem;
+        height: 20rem;
+        transform: translate(-50%, -50%);
+        background: radial-gradient(circle closest-side at center, white, transparent);
+        opacity: 0;
+        transition: opacity 300ms ease;
+        }
+
+        .notiglow {
+        z-index: 3;
+        }
+
+        .notiborderglow {
+        z-index: 1;
+        }
+
+        .notification:hover .notiglow {
+        opacity: 0.1
+        }
+
+        .notification:hover .notiborderglow {
+        opacity: 0.1
+        }
+
+        .note {
+        color: var(--color);
+        position: fixed;
+        top: 80%;
+        left: 50%;
+        transform: translateX(-50%);
+        text-align: center;
+        font-size: 0.9rem;
+        width: 75%;
+        }
+
+        .container {
+        margin: 0 auto;
+        }
+
+        .card {
+        position: relative;
+        width: 30%;
+        height: 400px;
+        /* margin: 0 auto; */
+        background: #ffffff;
+        border-radius: 15px;
+        box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);
+        }
+
+        .face {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        }
+
+        .face.back {
+        box-sizing: border-box;
+        padding: 20px;
+        }
+
+        .face.back b {
+        margin: 0;
+        padding: 0;
+        }
+
+        .face.back .desc {
+        background-color: #646464;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        }
+
+        .face.front {
+        transition: 0.5s;
+        }
+
+        .face.front b {
+        margin: 0;
+        padding: 0;
+        font-size: 5.1em;
+        color: #fff;
+        transition: 0.5s;
+        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+        z-index: 10;
+        }
+
+        .card:hover .face.front {
+        height: 60px;
+        }
+
+        .card:hover .face.front b {
+        font-size: 2em;
+        }
+
+        .face.front {
+        background-color: #0cbaba;
+        border-radius: 15px;
+        }
+
+
+
+
+    </style>
 </head>
 <body>
-    <h1>欢迎使用药品管理系统</h1>
+    <div class="notification">
+        <div class="notiglow"></div>
+        <div class="notiborderglow"></div>
+        <div class="notititle">欢迎使用药品管理系统</div>
+        <div class="notibody">在本系统你可以完成基本的药品管理。</div>
+        <div class="notibody">下面将会介绍本药品管理系统的使用方法。</div>
+    </div>
+    <h1></h1>
+
+    <div style="display: flex; justify-content: center;  flex-direction: row; gap: 40px;">
+
+        <div class="card">
+            <div class="face back">
+            <div class="content">
+                <span class="stars"></span>
+                <b class="desc">药品基本操作</b>
+                <p class="desc">
+                你可以对药品基本信息进行基本的增加、修改、删除、查找操作。
+                </p>
+                <p class="desc">
+                对药品信息进行增加、删除、修改药品库存时会自动生成进/出库记录，可在进/出库药品统计中查看。
+                </p>
+            </div>
+            </div>
+            <div class="face front">
+            <b>药品基本操作</b>
+            </div>
+        </div>
+
+
+        <div class="card">
+            <div class="face back">
+            <div class="content">
+                <span class="stars"></span>
+                <b class="desc">药品分类信息</b>
+                <p class="desc">
+                在这里一共设置了 6 种药品分类：骨科用药，眼科用药，皮肤科用药，呼吸系统药，消化系统药，心血管系统药。
+                </p>
+                <p class="desc">
+                可以在这里查看药品的详细信息：药名，药品公司，药品公司联系电话，价格，库存，进价。
+                </p>
+            </div>
+            </div>
+            <div class="face front">
+            <b>药品分类信息</b>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="face back">
+            <div class="content">
+                <span class="stars"></span>
+                <b class="desc">药品统计</b>
+                <p class="desc">
+                这里根据药品分类信息生成药品数量统计。显示各个分类中各个药品的数量并以饼图的方式展示，并对数量（库存）小于5的药品加入到“库存告急”、对数量（库存）大于15的药品加入到“库存积压预警”。同时显示出各个分类药品中库存最多/最少的药品。
+                </p>
+                <p class="desc">
+                这里根据进库药品统计和出库药品统计的记录生成药品支出统计和药品收入统计。初始显示进/出库记录中每一天的支出/收入。可以选择年/月查看对应年份月份的每天的支出/收入，也可以选择药品查看对应药品的每天的支出/收入统计。
+                </p>
+            </div>
+            </div>
+            <div class="face front">
+            <b>药品统计</b>
+            </div>
+        </div>
+
+    </div>
+
+    <h1></h1>
+
+    <div style="display: flex; justify-content: center;  flex-direction: row; gap: 40px;">
+
+        <div class="card">
+            <div class="face back">
+            <div class="content">
+                <span class="stars"></span>
+                <b class="desc">进库药品统计</b>
+                <p class="desc">
+                这里存放着由药品基本操作生成的进库药品记录。
+                </p>
+                <p class="desc">
+                进库药品记录包含着以下信息：
+                </p>
+                <p class="desc">
+                药名、药品公司、药品公司联系电话、数量（进库数量）、价格（出售价格）、进价、时间（进库时间）  
+                </p>
+            </div>
+            </div>
+            <div class="face front">
+            <b>进库药品统计</b>
+            </div>
+        </div>
+
+
+        <div class="card">
+            <div class="face back">
+            <div class="content">
+                <span class="stars"></span>
+                <b class="desc">出库药品统计</b>
+                <p class="desc">
+                这里存放着由药品基本操作生成的出库药品记录。
+                </p>
+                <p class="desc">
+                出库药品记录包含着以下信息：
+                </p>
+                <p class="desc">
+                药名、药品公司、药品公司联系电话、数量（出库数量）、价格（出售价格）、进价、时间（出库时间）  
+                </p>
+            </div>
+            </div>
+            <div class="face front">
+            <b>出库药品统计</b>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="face back">
+            <div class="content">
+                <span class="stars"></span>
+                <b class="desc">导入药品信息</b>
+                <p class="desc">
+                这个可以帮助你将药品信息快速地存入到系统数据库中。
+                </p>
+                <p class="desc">
+                请注意导入数据的格式，具体的请见“导入药品信息”功能模块。可以直接使用导出的药品数据进行导入。
+                </p>
+            </div>
+            </div>
+            <div class="face front">
+            <b>导入药品信息</b>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="face back">
+            <div class="content">
+                <span class="stars"></span>
+                <b class="desc">导出药品信息</b>
+                <p class="desc">
+                这个可以帮助你将药品信息从系统数据库中导出。
+                </p>
+                <p class="desc">
+                导出的药品数据可以直接导入系统数据库。但要注意数据文件名称不能更改。
+                </p>
+            </div>
+            </div>
+            <div class="face front">
+            <b>导出药品信息</b>
+            </div>
+        </div>
+
+    </div>
+
+
 </body>
 </html>
\ No newline at end of file