diff --git a/package.json b/package.json
index 9708799742fb3e0f3717291863f14ee91950a2de..5b6ea941ccdc9cd3ccafd1db5f273d50dbc40103 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "qrcodejs2": "^0.0.2",
     "qs": "^6.9.4",
     "screenfull": "^5.0.2",
+    "view-design": "^4.7.0",
     "vue": "^2.6.11",
     "vue-count-to": "^1.0.13",
     "vue-router": "^3.3.4",
diff --git a/prettier.config.js b/prettier.config.js
index 3d64411025d59498bfc0f7cf5403a0db63f0cad1..82b269317a03b37edaa8eceee33541c4b52a0dca 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -4,12 +4,12 @@ module.exports = {
   useTabs: false,
   semi: false,
   singleQuote: false,
-  quoteProps: 'as-needed',
+  quoteProps: "as-needed",
   jsxSingleQuote: false,
-  trailingComma: 'es5',
+  trailingComma: "es5",
   bracketSpacing: true,
   jsxBracketSameLine: false,
-  arrowParens: 'always',
+  arrowParens: "always",
   vueIndentScriptAndStyle: false,
-  endOfLine: 'lf',
+  endOfLine: "auto",
 }
diff --git a/src/App.vue b/src/App.vue
index 3ac7aca592ae6433de72edf3d636599d1ee35870..8c1ad6d2bc56196667286de2512d3b4b9370b827 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,6 +18,8 @@ export default {
 }
 
 #vue-admin-beautiful {
+  height: 100vh;
+  overflow: auto;
   margin-right: calc(100% - 100vw);
 }
 </style>
diff --git a/src/assets/img/Home/dizhi.png b/src/assets/img/Home/dizhi.png
new file mode 100644
index 0000000000000000000000000000000000000000..dab84db3081bcbfce7b7a2ae8fe604ba24a529c9
Binary files /dev/null and b/src/assets/img/Home/dizhi.png differ
diff --git a/src/assets/img/Home/homeheaderbg.png b/src/assets/img/Home/homeheaderbg.png
new file mode 100644
index 0000000000000000000000000000000000000000..21e9bff0f1e3db8d8ee1da3412a78abd4a0ca5f0
Binary files /dev/null and b/src/assets/img/Home/homeheaderbg.png differ
diff --git a/src/assets/img/Home/kefu.png b/src/assets/img/Home/kefu.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b6554e8028a41cf2fd9819767d2e5972700a1e0
Binary files /dev/null and b/src/assets/img/Home/kefu.png differ
diff --git a/src/assets/img/Home/map.png b/src/assets/img/Home/map.png
new file mode 100644
index 0000000000000000000000000000000000000000..a116b449fa301bde6a17e5f46f36981d4c8a6c63
Binary files /dev/null and b/src/assets/img/Home/map.png differ
diff --git a/src/assets/img/Home/qita.png b/src/assets/img/Home/qita.png
new file mode 100644
index 0000000000000000000000000000000000000000..8b8bb503260767af01c57ff5ed13e848596f0f05
Binary files /dev/null and b/src/assets/img/Home/qita.png differ
diff --git a/src/assets/img/Home/shaicha.png b/src/assets/img/Home/shaicha.png
new file mode 100644
index 0000000000000000000000000000000000000000..478fcef94053d22604d225c8cf2ac3858040077b
Binary files /dev/null and b/src/assets/img/Home/shaicha.png differ
diff --git a/src/assets/img/Home/shenghuo.png b/src/assets/img/Home/shenghuo.png
new file mode 100644
index 0000000000000000000000000000000000000000..9af1fe187c945507dcd8d4a06baa66c1dfa7bb25
Binary files /dev/null and b/src/assets/img/Home/shenghuo.png differ
diff --git a/src/assets/img/Home/stomach.png b/src/assets/img/Home/stomach.png
new file mode 100644
index 0000000000000000000000000000000000000000..b715a344cbc749d2395bbbd52ab0140aed331ba6
Binary files /dev/null and b/src/assets/img/Home/stomach.png differ
diff --git a/src/assets/img/Home/top10.png b/src/assets/img/Home/top10.png
new file mode 100644
index 0000000000000000000000000000000000000000..22b58f8a1c8abde9f694d9d3bd694e512a99c4da
Binary files /dev/null and b/src/assets/img/Home/top10.png differ
diff --git a/src/assets/img/Home/yixuezhishi.png b/src/assets/img/Home/yixuezhishi.png
new file mode 100644
index 0000000000000000000000000000000000000000..d453eb3032e07821cdbbcbe2a3a11d31500406b3
Binary files /dev/null and b/src/assets/img/Home/yixuezhishi.png differ
diff --git a/src/assets/img/Home/youxiang.png b/src/assets/img/Home/youxiang.png
new file mode 100644
index 0000000000000000000000000000000000000000..62d18be6425a5382225d9d9b06b13b4bb58b4d7d
Binary files /dev/null and b/src/assets/img/Home/youxiang.png differ
diff --git a/src/assets/style/_base.scss b/src/assets/style/_base.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a49fe3c06a67a916de8b8c84f2f1407190742ec0
--- /dev/null
+++ b/src/assets/style/_base.scss
@@ -0,0 +1,532 @@
+@charset "UTF-8";
+/*针对英文单词，强制让单词换行,break-word不拆分单词, break-all拆分单词*/
+* {
+  word-wrap: break-word; /*word-break: break-all;*/
+}
+
+html {
+  //font-size: calc(100vw / 7.5); /*1rem = 100px*/
+}
+
+body {
+  font-family: "Helvetica", "Tahoma", "Arial", "PingFang SC", "Microsoft Yahei",
+    "SimSun", "SimHei", "sans-serif";
+  color: #666;
+  background: #fff;
+  font-size: 14px;
+}
+
+.break-all {
+  word-break: break-all;
+}
+
+/*对齐方式*/
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-center {
+  text-align: center;
+}
+
+/*图片居左、右、中*/
+.img-left {
+  display: inline;
+  float: left;
+}
+
+.img-right {
+  display: inline;
+  float: right;
+}
+
+.img-center {
+  clear: both;
+  display: block;
+  margin: auto;
+}
+
+/*父容器要清除浮动*/
+
+/*隐藏文字*/
+.text-indent {
+  text-indent: -9999em;
+}
+
+.seo-text {
+  font-size: 0;
+  line-height: 0;
+  overflow: hidden;
+}
+
+/*图片控制尺寸*/
+.img-overflow {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+/*img自适应*/
+.img-responsive {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+img {
+  border: none;
+}
+
+/*清除浮动*/
+.fl {
+  float: left;
+  _display: inline;
+  *zoom: 1;
+}
+
+.fr {
+  float: right;
+  _display: inline;
+  *zoom: 1;
+}
+
+.clearfix {
+  *zoom: 1;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+/*外边距px*/
+.margin-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+
+
+.mb30 {
+  margin-bottom: 30px;
+}
+
+/*字体加粗*/
+.bold {
+  font-weight: bold;
+}
+
+/*1行显示省略号*/
+.ellipsis {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+
+/*默认2行显示省略号 只适用于webkit内核*/
+.ellipses-line2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.ellipses-line4 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+}
+
+/*placeholder重置字体颜色*/
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  color: #999 !important;
+  font-size: 12px;
+}
+
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+  color: #999 !important;
+  font-size: 12px;
+}
+
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
+  color: #999 !important;
+  font-size: 12px;
+}
+
+// 美化滚动条
+::-webkit-scrollbar-track-piece {
+  background-color: #fff;
+  -webkit-border-radius: 0;
+  opacity: 0.5;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  height: 30px;
+  background-color: #b8b8b8;
+  -webkit-border-radius: 6px;
+  outline: 1px solid transparent;
+  outline-offset: -2px;
+  border: 1px solid transparent;
+  filter: alpha(opacity = 30);
+  -moz-opacity: .5;
+  opacity: .5;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  height: 30px;
+  background-color: #878987;
+  -webkit-border-radius: 6px;
+}
+
+/*隐藏*/
+.hidden {
+  display: none;
+}
+
+.visible {
+  display: block;
+}
+
+/*将dcss容器里的所有元素设为默认值*/
+.dcss html,
+.dcss address,
+.dcss blockquote,
+.dcss body,
+.dcss dd,
+.dcss div,
+.dcss dl,
+.dcss dt,
+.dcss fieldset,
+.dcss form,
+.dcss frame,
+.dcss frameset,
+.dcss h1,
+.dcss h2,
+.dcss h3,
+.dcss h4,
+.dcss h5,
+.dcss h6,
+.dcss noframes,
+.dcss ol,
+.dcss p,
+.dcss ul,
+.dcss center,
+.dcss dir,
+.dcss hr,
+.dcss menu,
+.dcss pre {
+  display: block;
+}
+
+.dcss li {
+  display: list-item;
+}
+
+.dcss head {
+  display: none;
+}
+
+.dcss table {
+  display: table;
+}
+
+.dcss tr {
+  display: table-row;
+}
+
+.dcss thead {
+  display: table-header-group;
+}
+
+.dcss tbody {
+  display: table-row-group;
+}
+
+.dcss tfoot {
+  display: table-footer-group;
+}
+
+.dcss col {
+  display: table-column;
+}
+
+.dcss colgroup {
+  display: table-column-group;
+}
+
+.dcss td,
+.dcss th {
+  display: table-cell;
+}
+
+.dcss caption {
+  display: table-caption;
+}
+
+.dcss th {
+  font-weight: bolder;
+  text-align: center;
+}
+
+.dcss caption {
+  text-align: center;
+}
+
+.dcss body {
+  margin: 8px;
+  line-height: 1.12;
+}
+
+.dcss h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+  line-height: 1.5em;
+}
+
+.dcss h2 {
+  font-size: 1.5em;
+  margin: 0.75em 0;
+  line-height: 1.5em;
+}
+
+.dcss h3 {
+  font-size: 1.17em;
+  margin: 0.83em 0;
+  line-height: 1.5em;
+}
+
+.dcss h4 {
+  font-size: 1.09em;
+  margin: 1.12em 0;
+  line-height: 1.5em;
+}
+
+.dcss h4,
+.dcss p,
+.dcss blockquote,
+.dcss ul,
+.dcss fieldset,
+.dcss form,
+.dcss ol,
+.dcss dl,
+.dcss dir,
+.dcss menu {
+  margin: 1.12em 0;
+}
+
+.dcss h5 {
+  font-size: 0.83em;
+  margin: 1.5em 0;
+  line-height: 1.5em;
+}
+
+.dcss h6 {
+  font-size: 0.75em;
+  margin: 1.67em 0;
+  line-height: 1.5em;
+}
+
+.dcss h1,
+.dcss h2,
+.dcss h3,
+.dcss h4,
+.dcss h5,
+.dcss h6,
+.dcss b,
+.dcss strong {
+  font-weight: bolder;
+}
+
+.dcss blockquote {
+  margin-left: 40px;
+  margin-right: 40px;
+}
+
+.dcss i,
+.dcss cite,
+.dcss em,
+.dcss var,
+.dcss address {
+  font-style: italic;
+}
+
+.dcss pre,
+.dcss tt,
+.dcss code,
+.dcss kbd,
+.dcss samp {
+  font-family: monospace;
+}
+
+.dcss pre {
+  white-space: pre;
+}
+
+.dcss button,
+.dcss textarea,
+.dcss input,
+.dcss object,
+.dcss select {
+  display: inline-block;
+}
+
+.dcss big {
+  font-size: 1.17em;
+}
+
+.dcss small,
+.dcss sub,
+.dcss sup {
+  font-size: 0.83em;
+}
+
+.dcss sub {
+  vertical-align: sub;
+}
+
+.dcss sup {
+  vertical-align: super;
+}
+
+.dcss table {
+  border-spacing: 2px;
+}
+
+.dcss thead,
+.dcss tbody,
+.dcss tfoot {
+  vertical-align: middle;
+}
+
+.dcss td,
+.dcss th {
+  vertical-align: inherit;
+}
+
+.dcss s,
+.dcss strike,
+.dcss del {
+  text-decoration: line-through;
+}
+
+.dcss hr {
+  border: 1px inset;
+}
+
+.dcss ol,
+.dcss ul,
+.dcss dir,
+.dcss menu,
+.dcss dd {
+  margin-left: 40px;
+}
+
+.dcss ol,
+.dcss ul,
+.dcss li {
+  list-style-type: decimal;
+}
+
+.dcss ol ul,
+.dcss ul ol,
+.dcss ul ul,
+.dcss ol ol {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.dcss u,
+.dcss ins {
+  text-decoration: underline;
+}
+
+.dcss br:before {
+  content: "A";
+}
+
+.dcss :before,
+.dcss :after {
+  white-space: pre-line;
+}
+
+.dcss center {
+  text-align: center;
+}
+
+.dcss abbr,
+.dcss acronym {
+  font-variant: small-caps;
+  letter-spacing: 0.1em;
+}
+
+.dcss :link,
+.dcss :visited {
+  text-decoration: underline;
+}
+
+.dcss :focus {
+  outline: thin dotted invert;
+}
+
+.dcss BDO[DIR="ltr"] {
+  direction: ltr;
+  unicode-bidi: bidi-override;
+}
+
+.dcss BDO[DIR="rtl"] {
+  direction: rtl;
+  unicode-bidi: bidi-override;
+}
+
+.dcss *[DIR="ltr"] {
+  direction: ltr;
+  unicode-bidi: embed;
+}
+
+.dcss *[DIR="rtl"] {
+  direction: rtl;
+  unicode-bidi: embed;
+}
+
+@media print {
+  .dcss h1 {
+    page-break-before: always;
+  }
+  .dcss h1,
+  .dcss h2,
+  .dcss h3,
+  .dcss h4,
+  .dcss h5,
+  .dcss h6 {
+    page-break-after: avoid;
+  }
+  .dcss ul,
+  .dcss ol,
+  .dcss dl {
+    page-break-before: avoid;
+  }
+}
diff --git a/src/assets/style/_reset.scss b/src/assets/style/_reset.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9f87958a15f759a51ee272a8c736b66743321334
--- /dev/null
+++ b/src/assets/style/_reset.scss
@@ -0,0 +1,155 @@
+@charset "UTF-8";
+/*防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
+html {
+  -webkit-text-size-adjust: 100%; /*禁用Webkit内核浏览器的文字大小调整功能，默认是auto;*/
+  -ms-text-size-adjust: 100%; /*禁用IE内核浏览器的文字大小调整功能，默认是auto;*/
+  font-family: sans-serif;
+  -webkit-font-smoothing: antialiased;
+  height: 100%;
+  touch-action: manipulation; /*取消移动端click300ms的延迟*/
+}
+
+body {
+  height: 100%;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/*此处增加dt,label针对bootstrap的加粗定义*/
+dt,
+label {
+  font-weight: normal;
+  font-size: 100%;
+}
+
+input,
+button,
+textarea,
+select,
+optgroup,
+option {
+  font-size: 100%;
+  font-weight: normal;
+  outline: none;
+}
+h1,h2,h3,h4,h5{
+  padding: 0;
+  margin: 0;
+  font-weight: normal;
+}
+input,
+button,
+textarea {
+  -webkit-appearance: none;
+}
+
+/*去除ios按钮内阴影、圆角,对单选框、复选框有影响*/
+input[type="checkbox"] {
+  -webkit-appearance: checkbox;
+}
+
+input[type="radio"] {
+  -webkit-appearance: radio;
+}
+
+input::-webkit-input-safebox-button {
+  display: none;
+}
+
+/*解决搜狗浏览器密码框自带安全键盘*/
+input:focus,
+textarea:focus {
+  outline: none;
+}
+
+th,
+td,
+button,
+input,
+select,
+textarea {
+  -webkit-font-smoothing: antialiased;
+  -moz-font-smoothing: antialiased;
+}
+
+/*页面的字体抗锯齿,字体会更清晰圆滑*/
+textarea {
+  resize: none;
+  border: 1px solid #ddd;
+  padding: 5px;
+  width: 100%;
+  border-radius: 0;
+}
+
+address, caption, cite, code, dfn, th, var, /*em,*/ i {
+  font-style: normal;
+  font-weight: normal;
+}
+
+sub,
+sup {
+  vertical-align: baseline;
+}
+
+button {
+  overflow: visible;
+  vertical-align: middle;
+  outline: none;
+  height: auto;
+}
+
+/*去掉列表标签的默认样式*/
+ul,
+ol,
+li {
+  list-style-type: none;
+}
+
+/*重置table样式*/
+table {
+  border-collapse: collapse;
+  border-spacing: 0; /*table-layout: fixed;*/
+}
+
+/*table-layout: fixed; 表格布局尺寸固定(默认等分表格)，表格的宽度不再由单元格的内容多少而决定，可自定义宽度(给th,td不起作用)*/
+/*border-collapse: separate（独立边框）; border-spacing:20px 20px（边框单元格间距离）;*/
+
+button {
+  cursor: pointer;
+}
+
+fieldset,
+img {
+  border: 0;
+}
+
+/*a链接*/
+a {
+  outline: none;
+  text-decoration: none;
+  color: #848484;
+  cursor: pointer;
+}
+
+a:focus {
+  outline: none;
+  text-decoration: none;
+  color: inherit;
+}
+
+a:hover {
+  outline: none;
+  color: #157df1;
+  text-decoration: none;
+}
+
+input::-webkit-inner-spin-button {
+  display: none;
+}
diff --git a/src/assets/style/common.scss b/src/assets/style/common.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2a896b3feb875676f5d85e161c45f3ce4dbeed5a
--- /dev/null
+++ b/src/assets/style/common.scss
@@ -0,0 +1,6 @@
+@charset "utf-8";
+// 全局
+@import "reset";
+@import "base";
+//@import "reset-iview";
+@import "index";
diff --git a/src/assets/style/compute.scss b/src/assets/style/compute.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5705d02943a4b0f0a88e658a2b9084f8d2b959ab
--- /dev/null
+++ b/src/assets/style/compute.scss
@@ -0,0 +1,7 @@
+@function bvw($vw) {
+  @return $vw / 1440 * 100vw;
+}
+
+@function bvh($vh) {
+  @return $vh / 1024 * 100vh;
+}
\ No newline at end of file
diff --git a/src/assets/style/index.scss b/src/assets/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a9908d7220ae6cabb98572d6b638c30a65d27d11
--- /dev/null
+++ b/src/assets/style/index.scss
@@ -0,0 +1,3 @@
+@charset "utf-8";
+// 通用 全局
+
diff --git a/src/components/layout/index.vue b/src/components/layout/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9aa215f772374a7e5bc6a71562f1bb696fcbea87
--- /dev/null
+++ b/src/components/layout/index.vue
@@ -0,0 +1,296 @@
+<template>
+  <div style="min-width: 1440px; overflow: overlay">
+    <Layout>
+      <Header class="layout-header">
+        <div class="logotitle">
+          <div class="leftLogo"></div>
+          <div class="rightText">
+            国家消化道早癌防治中心联盟 <br />早期胃癌筛查项目
+          </div>
+        </div>
+        <div v-if="!allianceToken" class="login">
+          <div class="login_title text-center">
+            筛查随访数据库登录
+            <Form ref="form" :model="form" :rules="rules" inline>
+              <FormItem prop="username" label="登录名:">
+                <Input
+                  v-model="form.username"
+                  type="text"
+                  placeholder="请输入登录名"
+                >
+                </Input>
+              </FormItem>
+              <FormItem prop="password" label="密码:">
+                <Input
+                  v-model="form.password"
+                  type="password"
+                  placeholder="请输入密码"
+                >
+                </Input>
+              </FormItem>
+              <FormItem>
+                <Button
+                  type="primary"
+                  class="login_button"
+                  :loading="loading"
+                  @click="handleSubmit('form')"
+                  >登录</Button
+                >
+              </FormItem>
+            </Form>
+          </div>
+        </div>
+        <div v-if="allianceToken" class="userInfo">
+          <div class="white"></div>
+          <div class="text">欢迎，LIXid胡</div>
+          <div class="exit" @click="logout">退出</div>
+        </div>
+      </Header>
+      <div class="sider">
+        <Menu mode="horizontal" :active-name="currentRoute" class="siderMenu">
+          <MenuItem
+            v-for="(item, index) in menuList"
+            :key="index"
+            :name="item.route"
+            :to="item.route"
+            style="width: 10%; text-align: center; min-width: 120px"
+          >
+            {{ item.name }}
+          </MenuItem>
+        </Menu>
+      </div>
+      <Content style="overflow: hidden; padding: 32px 10%; background: #f3f3f3">
+        <transition name="fade-transform" mode="out-in">
+          <router-view></router-view>
+        </transition>
+      </Content>
+      <Footer class="layout-footer-center text-center"
+        >copyright@ 联盟信息等</Footer
+      >
+    </Layout>
+  </div>
+</template>
+<script>
+import { loginRSA } from "@/config/settings"
+import { getAccessToken } from "@/utils/accessToken"
+import { encrypt, decrypt } from "@/utils/encryption"
+export default {
+  data() {
+    return {
+      form: {
+        username: "",
+        password: "",
+      },
+      menuList: [
+        {
+          route: "/home",
+          name: "首页",
+        },
+        {
+          route: "/allianceintroduction",
+          name: "联盟介绍",
+        },
+        {
+          route: "/healthpopularization",
+          name: "健康科普",
+        },
+        {
+          route: "/scientificresearch",
+          name: "科学研究",
+        },
+        {
+          route: "/casesharing",
+          name: "案例分享",
+        },
+      ],
+      loading: false,
+      rules: {
+        username: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+        ],
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+          {
+            type: "string",
+            min: 6,
+            message: "The password length cannot be less than 6 bits",
+            trigger: "blur",
+          },
+        ],
+      },
+      allianceToken: getAccessToken(),
+      currentRoute: this.$route.path,
+    }
+  },
+  watch: {
+    $route: {
+      handler(v) {
+        this.currentRoute = this.$route.path
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // if (localStorage.getItem('allianceToken')) {
+    //   this.$router.push('/datacenter/home')
+    // }
+  },
+  methods: {
+    handleSubmit(name) {
+      this.$refs[name].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          const data = Object.assign({}, this.form)
+          if (loginRSA) {
+            data.password = encodeURIComponent(encrypt(data.password))
+            data.userName = encodeURIComponent(encrypt(data.username))
+          }
+          this.$store
+            .dispatch("user/login", data)
+            .then(() => {
+              const routerPath =
+                !this.redirect || this.redirect === "/404" ? "/" : this.redirect
+              this.$router.push({ path: routerPath }).catch((e) => {})
+              this.loading = false
+            })
+            .catch((e) => {
+              this.loading = false
+            })
+        }
+      })
+    },
+    logout() {
+      this.$Modal.confirm({
+        title: "提示",
+        content:
+          '<p style="text-align:center;font-size:16px;">是否确认退出？</p>',
+        onOk: () => {
+          setTimeout(() => {
+            localStorage.removeItem("agcs")
+            this.allianceToken = ""
+          }, 500)
+        },
+        onCancel: () => {},
+      })
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.layout-header {
+  height: 400px;
+  width: 100%;
+  background: url("~@/assets/img/Home/homeheaderbg.png") no-repeat;
+  background-position: center;
+  background-size: cover;
+  display: flex;
+  padding-right: 10%;
+  justify-content: space-between;
+  align-items: center;
+  .logotitle {
+    height: 220px;
+    display: flex;
+    .leftLogo {
+      width: 72px;
+      height: 72px;
+      background: url("~@/assets/img/Home/stomach.png") no-repeat;
+      background-position: center;
+      background-size: cover;
+    }
+    .rightText {
+      min-width: 570px;
+      font-size: 42px;
+      font-family: AlibabaPuHuiTiB;
+      color: #ffffff;
+      margin-left: 14px;
+    }
+  }
+  .login {
+    width: 23%;
+    min-width: 334px;
+    height: 326px;
+    background: rgba(255, 255, 255, 0.96);
+    box-shadow: 0px 12px 36px 0px rgba(26, 35, 87, 0.4);
+    border-radius: 8px;
+    padding: 18px 40px;
+    .login_title {
+      height: 26px;
+      font-size: 22px;
+      font-family: AlibabaPuHuiTiM;
+      color: #4e68ff;
+      // line-height: 60px;
+    }
+    .login_button {
+      width: 100%;
+      height: 40px;
+      margin-top: 20px;
+      background: #4e68ff;
+    }
+  }
+  .userInfo {
+    height: 160px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    .white {
+      width: 32px;
+      height: 4px;
+      background: #ffffff;
+    }
+    .text {
+      font-size: 20px;
+      font-family: AlibabaPuHuiTiM;
+      color: #ffffff;
+    }
+    .exit {
+      font-size: 16px;
+      cursor: pointer;
+      font-family: AlibabaPuHuiTiR;
+      text-decoration: underline;
+      color: rgba(255, 255, 255, 0.8);
+      line-height: 16px;
+      &:active {
+        color: #4e68ff;
+      }
+    }
+  }
+}
+.siderMenu {
+  padding: 0 10%;
+  background: #edefff;
+}
+.layout-footer-center {
+  width: 100%;
+  height: 108px;
+  background: #efefef;
+  line-height: 68px;
+}
+::v-deep {
+  .ivu-form {
+    .ivu-form-item {
+      display: block;
+      margin-bottom: 10px;
+    }
+    .ivu-form-item-label {
+      font-size: 14px;
+      font-family: AlibabaPuHuiTiR;
+      color: #333333;
+    }
+  }
+}
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 0.3s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+</style>
diff --git a/src/config/permission.js b/src/config/permission.js
index 54f0ac398e9757c9dd2cc23605b1eb26a542d554..51d654fe8006a43398646f9c56975893a008374f 100644
--- a/src/config/permission.js
+++ b/src/config/permission.js
@@ -27,7 +27,7 @@ router.beforeResolve(async (to, from, next) => {
   let hasToken = store.getters["user/accessToken"]
   if (!loginInterception) hasToken = true
   if (hasToken) {
-    if (to.path === "/login") {
+    if (to.path === "/home") {
       next({
         path: "/",
       })
@@ -37,6 +37,7 @@ router.beforeResolve(async (to, from, next) => {
     } else {
       const userInfo = store.getters["user/userInfo"]
       if (userInfo) {
+        console.log(to.path)
         next()
       } else {
         try {
@@ -56,7 +57,7 @@ router.beforeResolve(async (to, from, next) => {
             })
             await store.dispatch("user/resetAccessToken")
             await resetRouter()
-            next(`/login`)
+            next(`/home`)
             if (progressBar) VabProgress.done()
           } else {
             store.dispatch("dict/getDictData") //字典获取
@@ -67,7 +68,7 @@ router.beforeResolve(async (to, from, next) => {
           }
         } catch (error) {
           await store.dispatch("user/resetAccessToken")
-          next(`/login?redirect=${to.path}`)
+          next(`/home?redirect=${to.path}`)
           if (progressBar) VabProgress.done()
         }
       }
@@ -76,7 +77,7 @@ router.beforeResolve(async (to, from, next) => {
     if (routesWhiteList.indexOf(to.path) !== -1) {
       next()
     } else {
-      next(`/login?redirect=${to.path}`)
+      next(`/home?redirect=${to.path}`)
       if (progressBar) VabProgress.done()
     }
   }
diff --git a/src/config/settings.js b/src/config/settings.js
index 0cc8cc44bc8949396ded1e3b6f126361678717f0..2e1ca5be60770a70ae35d72da1d94e21ee9c617a 100644
--- a/src/config/settings.js
+++ b/src/config/settings.js
@@ -24,7 +24,18 @@ module.exports = {
   // 路由模式，可选值为 history 或 hash
   routerMode: "hash",
   //不经过token校验的路由
-  routesWhiteList: ["/login", "/404", "/401", "/sso", "/test"],
+  routesWhiteList: [
+    // "/login",
+    "/404",
+    "/401",
+    "/sso",
+    "/test",
+    "/home",
+    "/allianceintroduction",
+    "/casesharing",
+    "/scientificresearch",
+    "/healthpopularization",
+  ],
   //加载时显示文字
   loadingText: "正在加载中...",
   //token名称
diff --git a/src/main.js b/src/main.js
index 8cacd40d436e301adcabdf6877aa22deb311991d..22e3e0b95b2f0bc7e8ee59e695b2e75a9989aad4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,10 +6,12 @@ import store from "./store"
 import router from "./router"
 import "./plugins"
 import "./mixins"
-
+import iView from "view-design"
+import "view-design/dist/styles/iview.css"
+import "@/assets/style/common.scss"
 // const { mockXHR } = require("../mock/static")
 // mockXHR()
-
+Vue.use(iView)
 Vue.config.productionTip = false
 
 new Vue({
diff --git a/src/router/index.js b/src/router/index.js
index af998f7c1375decb3e31e3c7486680095a4c4884..189cc05c551cb33723bdbbd20064060273623c78 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,16 +1,45 @@
 import Vue from "vue"
 import VueRouter from "vue-router"
 import Layout from "@/layouts"
+import layout from "@/components/layout"
 import EmptyLayout from "@/layouts/EmptyLayout"
 Vue.use(VueRouter)
 
 export const constantRoutes = [
   {
-    path: "/login",
-    component: () => import("@/views/login/index"),
-    hidden: true,
-    name: "login",
+    path: "/home",
+    name: "Home",
+    redirect: "/home",
+    component: layout,
+    children: [
+      {
+        path: "/home",
+        component: () => import("@/views/Home/index"),
+      },
+      {
+        path: "/allianceintroduction",
+        component: () => import("@/views/Home/AllianceIntroduction/index"),
+      },
+      {
+        path: "/casesharing",
+        component: () => import("@/views/Home/CaseSharing/index"),
+      },
+      {
+        path: "/scientificresearch",
+        component: () => import("@/views/Home/ScientificResearch/index"),
+      },
+      {
+        path: "/healthpopularization",
+        component: () => import("@/views/Home/HealthPopularization/index"),
+      },
+    ],
   },
+  // {
+  //   path: "/login",
+  //   component: () => import("@/views/login/index"),
+  //   hidden: true,
+  //   name: "login",
+  // },
   {
     path: "/401",
     name: "401",
diff --git a/src/views/Home/AllianceIntroduction/index.vue b/src/views/Home/AllianceIntroduction/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..87c635c55c425715943247977804b407e24ebc0e
--- /dev/null
+++ b/src/views/Home/AllianceIntroduction/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>联盟介绍</div>
+</template>
+<script>
+export default {
+  data () {
+    return {}
+  },
+  methods: {},
+  mounted () { },
+  watch: {}
+}
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/Home/CaseSharing/index.vue b/src/views/Home/CaseSharing/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c594dca7e2a1ad8c4fe1c8b81aaa7611ffa28bf9
--- /dev/null
+++ b/src/views/Home/CaseSharing/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>案例分享</div>
+</template>
+<script>
+export default {
+  data () {
+    return {}
+  },
+  methods: {},
+  mounted () { },
+  watch: {}
+}
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/Home/HealthPopularization/index.vue b/src/views/Home/HealthPopularization/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c878eeed16c8878977ae253cb6ed84ae7f4f2055
--- /dev/null
+++ b/src/views/Home/HealthPopularization/index.vue
@@ -0,0 +1,225 @@
+<template>
+  <div class="commonList">
+    <ul class="left_bar">
+      <li
+        v-for="(item, index) in leftBar"
+        :key="index"
+        :class="index == activeBar ? 'activeBar' : ''"
+        @click="changeActive(index)"
+      >
+        {{ item.name }}
+      </li>
+    </ul>
+    <div v-if="!showText" class="right_list">
+      <div class="list_title">
+        {{ leftBar[activeBar].name }}
+      </div>
+      <ul class="list">
+        <li v-for="(item, index) in leftBar[activeBar].list" :key="index">
+          <div class="leftImg">
+            <img src="~@/assets/img/Home/shenghuo.png" alt="" />
+          </div>
+          <div class="rightCon">
+            <div class="top">
+              <div class="rc_title">{{ item.title }}</div>
+              <div class="rc_date">{{ item.time }}</div>
+            </div>
+            <div class="bottom" @click="viewDetail(index)">查看</div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div v-if="showText" class="right_content">
+      <div class="breadcum">
+        <div
+          v-for="(item, index) in showTitle"
+          :key="index"
+          :class="[index != showTitle.length - 1 ? 'before' : 'now']"
+          @click="back(index)"
+        >
+          {{ item }}<span v-if="index != showTitle.length - 1"> / </span>
+        </div>
+      </div>
+      {{ showText }}
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      activeBar: 0,
+      leftBar: [
+        {
+          name: "筛查",
+          list: [
+            {
+              id: 1,
+              title: "筛查数据的科学性",
+              text: "123",
+              time: "2022/06-30",
+            },
+            {
+              id: 2,
+              title: "筛查数据的科学性",
+              text: "1",
+              time: "2022/06-30",
+            },
+          ],
+        },
+        {
+          name: "生活",
+        },
+        {
+          name: "医学知识",
+        },
+        {
+          name: "其他",
+        },
+      ],
+      showText: "",
+      showTitle: [],
+    }
+  },
+  mounted() {
+    console.log(this.$route)
+    if (this.$route.query.tabIndex) {
+      this.activeBar = this.$route.query.tabIndex
+    }
+  },
+  methods: {
+    changeActive(i) {
+      this.activeBar = i
+      this.showText = ""
+    },
+    viewDetail(i) {
+      this.showText = this.leftBar[this.activeBar].list[i].text
+      this.showTitle[0] = this.leftBar[this.activeBar].name
+      this.showTitle[1] = this.leftBar[this.activeBar].list[i].title
+      console.log(this.showText)
+    },
+    back(index) {
+      if (index == 0) {
+        this.showText = ""
+      }
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.commonList {
+  display: flex;
+  justify-content: space-between;
+  .left_bar {
+    width: 188px;
+    height: 760px;
+    background: #ffffff;
+    border-radius: 4px;
+    padding: 20px 0;
+    li {
+      width: 188px;
+      height: 52px;
+      font-size: 16px;
+      font-family: AlibabaPuHuiTiM;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      // background: rgba(78, 104, 255, 0.1);
+    }
+    .activeBar {
+      color: #4e68ff;
+      background: rgba(78, 104, 255, 0.1);
+    }
+  }
+  .right_list {
+    width: calc(100% - 208px);
+    height: 760px;
+    background: #ffffff;
+    border-radius: 4px;
+    padding: 32px;
+    .list_title {
+      height: 37px;
+      font-size: 16px;
+      font-family: AlibabaPuHuiTiR;
+      color: rgba(0, 0, 0, 0.8);
+      border-bottom: 1px solid #efefef;
+    }
+    .list {
+      li {
+        display: flex;
+        align-items: center;
+        margin-top: 20px;
+        .leftImg {
+          width: 132px;
+          height: 98px;
+          border-radius: 4px;
+          margin-right: 20px;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .rightCon {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          height: 98px;
+          .rc_title {
+            font-size: 16px;
+            font-family: AlibabaPuHuiTiR;
+            color: #333333;
+          }
+          .rc_date {
+            font-size: 14px;
+            font-family: Roboto-Regular, Roboto;
+            font-weight: 400;
+            color: #999999;
+          }
+          .bottom {
+            cursor: pointer;
+            width: 68px;
+            height: 28px;
+            background: rgba(78, 104, 255, 0.1);
+            border-radius: 16px;
+            text-align: center;
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #4e68ff;
+            line-height: 28px;
+            &:hover {
+              background: rgba(78, 104, 255, 0.2);
+            }
+          }
+        }
+      }
+    }
+  }
+  .right_content {
+    width: calc(100% - 208px);
+    height: 760px;
+    background: #ffffff;
+    border-radius: 4px;
+    padding: 32px;
+  }
+}
+.breadcum {
+  display: flex;
+
+  .before {
+    font-size: 16px;
+    font-family: AlibabaPuHuiTiR;
+    color: rgba(0, 0, 0, 0.4);
+    cursor: pointer;
+    &:hover {
+      color: #4e68ff;
+    }
+  }
+  .now {
+    margin-left: 5px;
+    font-size: 16px;
+    font-family: AlibabaPuHuiTiR;
+  }
+}
+</style>
diff --git a/src/views/Home/ScientificResearch/index.vue b/src/views/Home/ScientificResearch/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..24b78d31c9159796b377953ffc4ab34963a0e6a1
--- /dev/null
+++ b/src/views/Home/ScientificResearch/index.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="commonList">
+    <ul class="left_bar">
+      <li
+        v-for="(item, index) in leftBar"
+        :key="index"
+        :class="index == activeBar ? 'activeBar' : ''"
+        @click="changeActive(index)"
+      >
+        {{ item.name }}
+      </li>
+    </ul>
+    <div class="right_list">
+      <div class="list_title">
+        {{ leftBar[activeBar].name }}
+      </div>
+      <ul class="list">
+        <li v-for="(item, index) in leftBar[activeBar].list" :key="index">
+          <div class="left_text">
+            <div class="circle"></div>
+            <div class="title">{{ item.title }}</div>
+          </div>
+
+          <div class="rig_date">
+            {{ item.time }}
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      activeBar: 0,
+      leftBar: [
+        {
+          name: "筛查技术方案",
+          list: [
+            {
+              title: "筛查数据的科学性",
+              text: "",
+              time: "2022/06-30",
+            },
+            {
+              title: "筛查数据的科学性",
+              text: "",
+              time: "2022/06-30",
+            },
+          ],
+        },
+        {
+          name: "筛查指南",
+        },
+        {
+          name: "学术成果",
+        },
+        {
+          name: "项目进展与成果",
+        },
+      ],
+    }
+  },
+  watch: {},
+  mounted() {
+    if (this.$route.query.tabIndex) {
+      this.activeBar = this.$route.query.tabIndex
+    }
+  },
+  methods: {
+    changeActive(i) {
+      this.activeBar = i
+      // this.$router.replace("/scientificresearch")
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.commonList {
+  display: flex;
+  justify-content: space-between;
+  .left_bar {
+    width: 188px;
+    height: 760px;
+    background: #ffffff;
+    border-radius: 4px;
+    padding: 20px 0;
+    li {
+      width: 188px;
+      height: 52px;
+      font-size: 16px;
+      font-family: AlibabaPuHuiTiM;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      // background: rgba(78, 104, 255, 0.1);
+    }
+    .activeBar {
+      color: #4e68ff;
+      background: rgba(78, 104, 255, 0.1);
+    }
+  }
+  .right_list {
+    width: calc(100% - 208px);
+    height: 760px;
+    background: #ffffff;
+    border-radius: 4px;
+    padding: 32px;
+    .list_title {
+      height: 37px;
+      font-size: 16px;
+      font-family: AlibabaPuHuiTiR;
+      color: rgba(0, 0, 0, 0.8);
+      border-bottom: 1px solid #efefef;
+    }
+    .list {
+      li {
+        height: 22px;
+        font-size: 16px;
+        font-family: AlibabaPuHuiTiR;
+        color: #333333;
+        line-height: 22px;
+        margin-top: 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        cursor: pointer;
+        .left_text {
+          display: flex;
+          align-items: center;
+          .circle {
+            width: 6px;
+            height: 6px;
+            background: #4e68ff;
+            border-radius: 50%;
+            margin-right: 8px;
+          }
+        }
+        .rig_date {
+          font-size: 14px;
+          font-family: Roboto-Regular, Roboto;
+          font-weight: 400;
+          color: #999999;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/Home/index.vue b/src/views/Home/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..581e5b4faa21e203c1ef65b64f7a5167ae441e8a
--- /dev/null
+++ b/src/views/Home/index.vue
@@ -0,0 +1,479 @@
+<template>
+  <div id="con">
+    <div class="top flex">
+      <div class="left box">
+        <video :src="videoSrc" controls class="video" />
+      </div>
+      <div class="right box tabbox">
+        <Tabs :value="curTab">
+          <TabPane
+            v-for="(e, index) in tabList"
+            :key="index"
+            :label="e.title"
+            :name="e.title"
+          >
+            <ul class="tabslist">
+              <li v-for="(item, index) in noticeList" :key="index">
+                <div class="left">
+                  <div class="circle"></div>
+                  {{ item.title }}
+                </div>
+                <div class="right">
+                  {{ item.date }}
+                </div>
+              </li>
+            </ul>
+          </TabPane>
+        </Tabs>
+      </div>
+    </div>
+    <!-- 数据分析 -->
+    <div class="dataAnalysis">
+      <div class="title_box">
+        <div class="title">数据分析</div>
+        <div class="empty"></div>
+      </div>
+      <div class="flex">
+        <div class="left box cenbox">
+          <div class="box_title text-center">联盟地图</div>
+          <img class="map" src="~@/assets/img/Home/map.png" alt="" />
+        </div>
+        <div class="right box cenbox cenboxs" style="background: transparent">
+          <div class="range">
+            <div class="box_title text-center">累计上报量机构排名</div>
+            <div class="rangecontent">
+              <div class="top10"></div>
+              <ul class="rangeList">
+                <li
+                  v-for="(item, index) in rangeList"
+                  :key="index"
+                  :style="{ color: index < 3 ? '#4E68FF' : '#333333' }"
+                >
+                  <div>{{ index + 1 }}</div>
+                  <div>{{ item.name }}</div>
+                  <div>{{ item.value }}</div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="range">
+            <div class="box_title text-center">当前季度上报量机构排名</div>
+            <div class="rangecontent">
+              <div class="top10"></div>
+              <ul class="rangeList">
+                <li
+                  v-for="(item, index) in rangeList"
+                  :key="index"
+                  :style="{ color: index < 3 ? '#4E68FF' : '#333333' }"
+                >
+                  <div>{{ index + 1 }}</div>
+                  <div>{{ item.name }}</div>
+                  <div>{{ item.value }}</div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 健康科普 -->
+    <div class="healthPopularization">
+      <div class="title_box">
+        <div class="title">健康科普</div>
+        <div class="empty"></div>
+      </div>
+      <ul class="typeList">
+        <li
+          v-for="(item, index) in typeList"
+          :key="index"
+          :style="{ backgroundImage: 'url(' + item.src + ')' }"
+          @click="
+            $router.push({
+              path: '/healthpopularization',
+              query: { tabIndex: index },
+            })
+          "
+        >
+          {{ item.name }}
+        </li>
+      </ul>
+    </div>
+    <!--  科学研究 -->
+    <div class="scientificresearch">
+      <div class="title_box">
+        <div class="title">科学研究</div>
+        <div class="empty"></div>
+      </div>
+      <ul class="researchList">
+        <li
+          v-for="(item, index) in researchList"
+          :key="index"
+          @click="
+            $router.push({
+              path: '/scientificresearch',
+              query: { tabIndex: index },
+            })
+          "
+        >
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+    <!-- 粘性定位 -->
+    <div v-show="showFixed" class="fixed_box">
+      <ul class="f_list">
+        <li v-for="(item, index) in rigBarList" :key="index">
+          <img :src="item.src" alt="" /><span>{{ item.name }}</span>
+        </li>
+        <li class="qrc_Box">
+          <div class="qr_name">问题反馈群</div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      // videoSrc: require("../../../public/aaa.mp4"),
+      videoSrc: "",
+      tabList: [
+        {
+          title: "新闻会议",
+        },
+        {
+          title: "通知公告",
+        },
+        {
+          title: "学术动态",
+        },
+      ],
+      noticeList: [
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+        {
+          title: "典型案例小标题典型案例小标题",
+          date: "2022-09-26",
+        },
+      ],
+      curTab: "新闻会议",
+      rangeList: [
+        { name: "包头医学院第二附属医院", value: 12345 },
+        { name: "温州市中心医院", value: 222 },
+        { name: "南方医科大学南海医院", value: 12345 },
+        { name: "包头医学院第二附属医院", value: 12345 },
+        { name: "包头医学院第二附属医院", value: 12345 },
+        { name: "包头医学院第二附属医院", value: 12345 },
+        { name: "包头医学院第二附属医院", value: 12345 },
+        { name: "包头医学院第二附属医院", value: 12345 },
+        { name: "包头医学院第二附属医院", value: 12345 },
+        { name: "包头医学院第二附属医院", value: 12345 },
+      ],
+      typeList: [
+        {
+          src: require("@/assets/img/Home/shaicha.png"),
+          name: "筛查",
+          route: "/healthpopularization",
+        },
+        {
+          src: require("@/assets/img/Home/shenghuo.png"),
+          name: "生活",
+        },
+        {
+          src: require("@/assets/img/Home/yixuezhishi.png"),
+          name: "医学知识",
+        },
+        {
+          src: require("@/assets/img/Home/qita.png"),
+          name: "其他",
+        },
+      ],
+      rigBarList: [
+        {
+          src: require("@/assets/img/Home/kefu.png"),
+          name: "客服",
+        },
+        {
+          src: require("@/assets/img/Home/youxiang.png"),
+          name: "邮箱",
+        },
+        {
+          src: require("@/assets/img/Home/dizhi.png"),
+          name: "地址",
+        },
+      ],
+      researchList: ["筛查技术方案", "筛查指南", "学术成果", "项目进展与成果"],
+      showFixed: false,
+    }
+  },
+  watch: {},
+  mounted() {
+    console.log(document.querySelector("#vue-admin-beautiful"))
+    document
+      .querySelector("#vue-admin-beautiful")
+      .addEventListener("scroll", () => {
+        let scrollTop = document.querySelector("#vue-admin-beautiful").scrollTop
+        if (scrollTop >= 700) {
+          this.showFixed = true
+        } else {
+          this.showFixed = false
+        }
+      })
+  },
+  methods: {},
+}
+</script>
+<style lang="scss" scoped>
+#con {
+  .flex {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 38px;
+    .box {
+      width: 48%;
+      height: 300px;
+      // background: blue;
+      background: #fff;
+      .video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+    .tabbox {
+      padding: 8px 16px;
+      overflow: hidden;
+      .tabslist {
+        height: 220px;
+        padding-right: 8px;
+        overflow: auto;
+        li {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          font-size: 14px;
+          font-family: AlibabaPuHuiTiR;
+          color: #666666;
+          margin-bottom: 16px;
+          cursor: pointer;
+          .left {
+            display: flex;
+            align-items: center;
+            .circle {
+              width: 4px;
+              height: 4px;
+              background: #7085fe;
+              border-radius: 50%;
+              margin-right: 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .dataAnalysis {
+    .box_title {
+      width: 180px;
+      height: 36px;
+      background: #4e68ff;
+      border-radius: 0px 0px 4px 4px;
+      font-size: 16px;
+      font-family: AlibabaPuHuiTiM;
+      color: #ffffff;
+      margin: 0 auto;
+      line-height: 36px;
+    }
+    .cenbox {
+      height: 458px;
+      // background: url("~@/assets/img/Home/map.png") no-repeat center center;
+      // background-size: cover;
+      .map {
+        width: 100%;
+        height: 422px;
+        object-fit: contain;
+      }
+    }
+    .cenboxs {
+      display: flex;
+      justify-content: space-between;
+
+      .range {
+        width: 46%;
+        background: #ffffff;
+        border-radius: 4px;
+        border: 1px solid #d2d7f5;
+        padding: 0 7px;
+        .rangecontent {
+          margin-top: 6px;
+          height: 408px;
+          background: rgba(78, 104, 255, 0.06);
+          border-radius: 4px;
+          padding: 8px;
+          font-size: 14px;
+          font-family: AlibabaPuHuiTiM;
+          // color: #4e68ff;
+          .rangeList {
+            li {
+              margin-bottom: 14px;
+              display: flex;
+              justify-content: space-between;
+              div:nth-child(1) {
+                width: 20px;
+              }
+              div:nth-child(2) {
+                flex: 1;
+              }
+              div:nth-child(3) {
+                text-align: right;
+              }
+            }
+          }
+        }
+        .top10 {
+          height: 32px;
+          background: url("~@/assets/img/Home/top10.png") no-repeat center
+            center;
+          background-size: contain;
+          margin-bottom: 8px;
+        }
+      }
+    }
+  }
+  .healthPopularization {
+    margin-bottom: 38px;
+    .typeList {
+      display: flex;
+      justify-content: space-between;
+      li {
+        cursor: pointer;
+        width: 22%;
+        height: 188px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 24px;
+        color: #ffffff;
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+      }
+    }
+  }
+  .scientificresearch {
+    .researchList {
+      display: flex;
+      margin-bottom: 20px;
+      li {
+        width: 188px;
+        height: 64px;
+        background: #ffffff;
+        box-shadow: 0px 4px 1px 1px #3d58f9;
+        text-align: center;
+        line-height: 64px;
+        border-radius: 4px;
+        border: 1px solid rgba(78, 104, 255, 0.12);
+        font-size: 16px;
+        font-family: AlibabaPuHuiTiM;
+        color: #333333;
+        margin-right: 20px;
+        cursor: pointer;
+      }
+    }
+  }
+  .title_box {
+    display: flex;
+    margin-bottom: 24px;
+    .title {
+      width: 64px;
+      height: 30px;
+      font-size: 16px;
+      font-family: AlibabaPuHuiTiM;
+      color: #4e68ff;
+      line-height: 22px;
+      border-bottom: 2px solid #4e68ff;
+    }
+    .empty {
+      flex: 1;
+      height: 30px;
+      border-bottom: 2px solid #ffffff;
+    }
+  }
+  .fixed_box {
+    background: #fff;
+    position: fixed;
+    padding: 20px 10px;
+    right: 30px;
+    bottom: 300px;
+    z-index: 1000;
+    .f_list {
+      li {
+        display: flex;
+        align-items: center;
+        margin-bottom: 30px;
+        img {
+          width: 20px;
+          height: 20px;
+          margin-right: 5px;
+        }
+        span {
+          width: 28px;
+          font-size: 14px;
+          font-family: AlibabaPuHuiTiR;
+          color: #333333;
+        }
+      }
+      .qrc_Box {
+        right: 0;
+        display: block;
+        position: absolute;
+        width: 180px;
+        height: 214px;
+        background: #546184
+          linear-gradient(225deg, #707c9c 0%, #94a0c1 0%, #546184 100%);
+        border-radius: 4px;
+        padding: 10px;
+        text-align: center;
+        .qr_name {
+          width: 100%;
+          height: 24px;
+          font-size: 18px;
+          font-family: AlibabaPuHuiTiM;
+          color: #ffffff;
+          line-height: 24px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/dataoverview/index.vue b/src/views/dataoverview/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..892a461d3e2ada56acedc20aed310a1dd5516fcd
--- /dev/null
+++ b/src/views/dataoverview/index.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>数据概览</div>
+</template>
+<script>
+export default {
+  data() {
+    return {}
+  },
+  methods: {},
+  mounted() {},
+  watch: {},
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/screening/DraftBox/index.vue b/src/views/screening/DraftBox/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..389550439ea573f351667d458bc074101d0071ef
--- /dev/null
+++ b/src/views/screening/DraftBox/index.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>草稿箱</div>
+</template>
+<script>
+export default {
+  data() {
+    return {}
+  },
+  methods: {},
+  mounted() {},
+  watch: {},
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/vue.config.js b/vue.config.js
index 3c9d23cb36387b3f37d7ef08491f81dd72ca8728..6852566993e316c9a3673e0d8677258023db46f7 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -88,7 +88,8 @@ module.exports = {
     },
     proxy: {
       "/api": {
-        target: "http://192.168.31.140:11021/",
+        //   target: "http://192.168.31.140:11021/",
+        target: "https://ds.cixincloud.com/geca-api/",
         changeOrigin: true,
         pathRewrite: {
           "^/api": "",
diff --git a/yarn.lock b/yarn.lock
index 5e5c9c72d769f21366921ee40ffbb5482eb7b649..d6fd2379e1044dbc2f807f66930fa1dc0a0016ee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2042,6 +2042,11 @@ async-limiter@~1.0.0:
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
   integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
 
+async-validator@^3.3.0:
+  version "3.5.2"
+  resolved "https://registry.npmmirror.com/async-validator/-/async-validator-3.5.2.tgz#68e866a96824e8b2694ff7a831c1a25c44d5e500"
+  integrity sha512-8eLCg00W9pIRZSB781UUX/H6Oskmm8xloZfr09lz5bikRpBVDlJ3hRVuxxP1SxcwsEYfJ4IU8Q19Y8/893r3rQ==
+
 async-validator@~1.8.1:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
@@ -2198,6 +2203,11 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
+batch-processor@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
+  integrity sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==
+
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
@@ -3645,6 +3655,11 @@ deepmerge@^1.2.0, deepmerge@^1.5.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
   integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
 
+deepmerge@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.npmmirror.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 default-gateway@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -3939,6 +3954,13 @@ electron-to-chromium@^1.3.649:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.704.tgz#894205a237cbe0097d63da8f6d19e605dd13ab51"
   integrity sha512-6cz0jvawlUe4h5AbfQWxPzb+8LzVyswGAWiGc32EJEmfj39HTQyNPkLXirc7+L4x5I6RgRkzua8Ryu5QZqc8cA==
 
+element-resize-detector@^1.2.0:
+  version "1.2.4"
+  resolved "https://registry.npmmirror.com/element-resize-detector/-/element-resize-detector-1.2.4.tgz#3e6c5982dd77508b5fa7e6d5c02170e26325c9b1"
+  integrity sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==
+  dependencies:
+    batch-processor "1.0.0"
+
 element-ui@^2.15.2:
   version "2.15.3"
   resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.15.3.tgz#55108ab82a3bcc646e7b0570871c48ba96300652"
@@ -6249,6 +6271,11 @@ js-base64@^2.1.9:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
   integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
 
+js-calendar@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.npmmirror.com/js-calendar/-/js-calendar-1.2.3.tgz#a583b0644b4e695ba394f344d103dbcc7a7a7d3e"
+  integrity sha512-dAA1/Zbp4+c5E+ARCVTIuKepXsNLzSYfzvOimiYD4S5eeP9QuplSHLcdhfqFSwyM1o1u6ku6RRRCyaZ0YAjiBw==
+
 js-cookie@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
@@ -6617,6 +6644,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmmirror.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
+
 lodash.transform@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.transform/-/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
@@ -8078,6 +8110,11 @@ pnp-webpack-plugin@^1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
+popper.js@^1.14.6:
+  version "1.16.1"
+  resolved "https://registry.npmmirror.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
+
 portfinder@^1.0.26:
   version "1.0.28"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -10281,6 +10318,11 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tinycolor2@^1.4.1:
+  version "1.4.2"
+  resolved "https://registry.npmmirror.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
+  integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
+
 title-case@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.1.tgz#3e127216da58d2bc5becf137ab91dae3a7cd8faa"
@@ -10732,6 +10774,11 @@ uuid@^3.3.2, uuid@^3.4.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
+v-click-outside-x@^3.7.1:
+  version "3.7.1"
+  resolved "https://registry.npmmirror.com/v-click-outside-x/-/v-click-outside-x-3.7.1.tgz#aa03eaa0e41e44cb5207dcf86c2d9f0dd64084c1"
+  integrity sha512-WmUgmcIXr9clVpm1AYS/FgHtcDicfnfoxgQCNg4O6vfk9GVnxA0vSqO321ogUo0b7czYTidj7fQENvWFMWOkUg==
+
 v8-compile-cache@^2.0.3, v8-compile-cache@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
@@ -10789,6 +10836,20 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
+view-design@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.npmmirror.com/view-design/-/view-design-4.7.0.tgz#98c4ec18ed70d1b58157007f8107a77158334846"
+  integrity sha512-WRvVRfsZciN0aJYlz+6b1zxs5G8tLFb4OUKOu+PiN0QyIGmdgWVziEyEmioYtJahQpueWiQpRYGzyxrpz3UkWQ==
+  dependencies:
+    async-validator "^3.3.0"
+    deepmerge "^2.2.1"
+    element-resize-detector "^1.2.0"
+    js-calendar "^1.2.3"
+    lodash.throttle "^4.1.1"
+    popper.js "^1.14.6"
+    tinycolor2 "^1.4.1"
+    v-click-outside-x "^3.7.1"
+
 vm-browserify@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"