From 84c0882de16c88b7fee35456cf26d5690da31b24 Mon Sep 17 00:00:00 2001 From: wangchenguang <728837162@qq.com> Date: Thu, 6 Apr 2023 15:33:41 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E9=85=8D=E9=83=A8=E5=88=86=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E7=AB=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 24 ++-- src/App.vue | 25 +++- src/layouts/footer/index.vue | 20 +++ src/pages/article/activity.vue | 2 + src/pages/article/index.vue | 16 +++ src/pages/column/index.vue | 73 +++++++++++ src/pages/deviceIntroBeam/index.vue | 46 ++++++- src/pages/deviceIntroLayout/index.vue | 173 +++++++++++++++++++++++++- src/pages/deviceIntroLinear/index.vue | 135 +++++++++++++++----- src/pages/exp/index.vue | 20 +++ src/pages/overviewLocation/index.vue | 13 ++ src/pages/overviewSetup/index.vue | 24 ++++ src/pages/overviewTrailer/index.vue | 17 +++ src/pages/science/index.vue | 109 +++++++++++----- src/pages/sfel/index.vue | 97 ++++++++++++++- src/pages/userSharing/index.vue | 33 +++++ src/styles/common.scss | 2 +- src/styles/layout/index.scss | 2 +- 18 files changed, 744 insertions(+), 87 deletions(-) diff --git a/package-lock.json b/package-lock.json index a27f03c..963ba7e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3690,7 +3690,7 @@ }, "clone-deep": { "version": "4.0.1", - "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz", + "resolved": "https://registry.npmmirror.com/clone-deep/-/clone-deep-4.0.1.tgz", "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==", "dev": true, "requires": { @@ -4374,7 +4374,7 @@ "dependencies": { "lru-cache": { "version": "4.1.5", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", + "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-4.1.5.tgz", "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", "requires": { "pseudomap": "^1.0.2", @@ -9538,7 +9538,7 @@ "dependencies": { "gaze": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz", + "resolved": "https://registry.npmmirror.com/gaze/-/gaze-1.1.3.tgz", "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==", "requires": { "globule": "^1.0.0" @@ -9569,7 +9569,7 @@ "dependencies": { "glob": { "version": "7.1.7", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", + "resolved": "https://registry.npmmirror.com/glob/-/glob-7.1.7.tgz", "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==", "requires": { "fs.realpath": "^1.0.0", @@ -9584,12 +9584,12 @@ }, "lodash": { "version": "4.17.21", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "minimatch": { "version": "3.0.8", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz", + "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.0.8.tgz", "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==", "requires": { "brace-expansion": "^1.1.7" @@ -12409,12 +12409,12 @@ }, "lodash": { "version": "4.17.21", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "minimatch": { "version": "3.1.2", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", "requires": { "brace-expansion": "^1.1.7" @@ -12424,7 +12424,7 @@ }, "sass-loader": { "version": "8.0.2", - "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz", + "resolved": "https://registry.npmmirror.com/sass-loader/-/sass-loader-8.0.2.tgz", "integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==", "dev": true, "requires": { @@ -12437,7 +12437,7 @@ "dependencies": { "schema-utils": { "version": "2.7.1", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz", + "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz", "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==", "dev": true, "requires": { @@ -12448,7 +12448,7 @@ }, "semver": { "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.0.tgz", "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", "dev": true } @@ -12687,7 +12687,7 @@ }, "shallow-clone": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz", + "resolved": "https://registry.npmmirror.com/shallow-clone/-/shallow-clone-3.0.1.tgz", "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==", "dev": true, "requires": { diff --git a/src/App.vue b/src/App.vue index e70f0eb..0ce20f5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -5,10 +5,10 @@ \ No newline at end of file + diff --git a/src/layouts/footer/index.vue b/src/layouts/footer/index.vue index c0ac814..6056247 100644 --- a/src/layouts/footer/index.vue +++ b/src/layouts/footer/index.vue @@ -199,4 +199,24 @@ export default { } } } +@media (max-width: 992px) { + body{ + width: 100% !important; + } + .inner { + width: 100% !important; + .title{ + width: 100%; + text-align: center; + } + .region{ + top: 300px; + left: 50%; + } + .info{ + margin-top: 90px; + } + } + +} \ No newline at end of file diff --git a/src/pages/article/activity.vue b/src/pages/article/activity.vue index 613941e..ab5e54a 100644 --- a/src/pages/article/activity.vue +++ b/src/pages/article/activity.vue @@ -262,4 +262,6 @@ export default { width: 98%; } } + + \ No newline at end of file diff --git a/src/pages/article/index.vue b/src/pages/article/index.vue index 2556258..5b8803c 100644 --- a/src/pages/article/index.vue +++ b/src/pages/article/index.vue @@ -280,4 +280,20 @@ export default { width: 98%; } } +@media (max-width: 1200px ) { + .article { + flex-direction: column; + .left, .right{ + width: 95%; + margin: 0 auto; + .el-tree{ + position: fixed; + right: 10px; + top: 160px; + z-index: 99;; + width: 180px; + } + } + } +} \ No newline at end of file diff --git a/src/pages/column/index.vue b/src/pages/column/index.vue index 86402a4..648c812 100644 --- a/src/pages/column/index.vue +++ b/src/pages/column/index.vue @@ -730,4 +730,77 @@ export default { } } } + +@media (max-width: 1200px) { + .article{ + flex-direction: column; + .left{ + width: 100%; + .forms{ + flex-direction: column; + justify-content: center; + align-items: center; + + .item, .search{ + margin: 20px 0 0 0 ; + } + .item:first-child{ + margin: 0; + } + div{ + width: 100%; + } + } + } + .article-wrap{ + width: 90%; + margin: 0 auto; + .articles{ + li{ + .pic{ + margin-top: 20px; + } + } + } + } + .right{ + width: 95%; + margin: 20px auto; + } + } + .column-wrap{ + .article{ + flex-direction: column; + .left{ + width: 100%; + .item{ + width: 80%; + margin: 20px auto; + } + .search{ + width: 80%; + margin: 20px auto; + margin-top: 0; + } + + .contents{ + .articles{ + li { + flex-direction: column; + .texts{ + width: 100%; + .meta { + font-size: .5rem; + } + } + .pic{ + width: 100%; + } + } + } + } + } + } + } +} \ No newline at end of file diff --git a/src/pages/deviceIntroBeam/index.vue b/src/pages/deviceIntroBeam/index.vue index 7781f25..e4438cd 100644 --- a/src/pages/deviceIntroBeam/index.vue +++ b/src/pages/deviceIntroBeam/index.vue @@ -7,7 +7,7 @@
光束线

The beam line

S³FEL光束线覆盖的波段范围为1~30 nm,包含前端区、光学传输系统和诊断系统,是连接自由电子激光光源和后端科学实验站的桥梁。
-
+
光束线的作用是将光源发出的超快、全相干、高亮度的激光高效地传输到实验站样品处,并在传输过程中对FEL脉冲进行频谱诊断、脉冲能量诊断、光斑位置诊断、光斑横向分布诊断、脉冲到达时间诊断、波前诊断、偏振诊断等。同时根据后端实验站的不同科学需求,可进一步对FEL脉冲进行单色化、脉冲能量衰减、横向光斑微聚焦等。
@@ -135,4 +135,48 @@ export default { border-left: 4px solid #1583FF; } } + + +@media (max-width: 1200px) { + .inner{ + padding: 0 20px; + width: 90% !important; + .sum{ + line-height: 25px; + margin-top: 40px; + } + } + .beamBox{ + display: flex; + flex-direction: column; + .left { + width: 100%; + + } + .des{ + -webkit-line-clamp: 100 + } + .pic{ + margin-top: 10px; + width: 100%; + height: auto; + } + } + .intro{ + height: auto; + flex-direction: column; + .pic { + width: 100%; + } + .des { + -webkit-line-clamp: 100 + } + } + .unit { + width: 100%; + img{ + width: 100%; + } + } +} \ No newline at end of file diff --git a/src/pages/deviceIntroLayout/index.vue b/src/pages/deviceIntroLayout/index.vue index aa8a5d3..dc0ffe0 100644 --- a/src/pages/deviceIntroLayout/index.vue +++ b/src/pages/deviceIntroLayout/index.vue @@ -7,7 +7,7 @@
整体布局

The overall layout

S³FEL装置主要包括一台超导直线加速器(电子束能量为2.5 GeV、重复频率为1 MHz)、4条波荡器线及首批14个实验线站。根据具体的功能可以分为注入器、主加速器、自由电子激光放大器(波荡器线)、光束线和实验站,还有包括束流诊断、控制、激光、同步、数据采集与处理等在内的公共子系统,以及低温、公用设施等配套系统和设施。
-
+
S³FEL首批拟建设4条波荡器线,分别是2条外种子(EEHG)线和2条自放大自发辐射(SASE)线,以同时满足首批实验站的不同研究需求。按照能区划分,FEL-1、FEL-2工作在自放大自发辐射模式(SASE),并且为将来升级为self-seeding模式预留空间。FEL-1出光波段为1-3 nm(调整电子束能量时可覆盖1-6 nm),FEL-2输出光波长为2.3-15 nm,作为光刻研究专用光束线。FEL-3和4基于回声型谐波产生原理(EEHG),FEL-3输出波长为2.3-15 nm,涵盖水窗波段,FEL-4输出波长为5-30 nm的极紫外FEL脉冲。通过快速束流分配技术,波荡器束线可同时工作。各条波荡器线产生的FEL光,通过光束线系统实现FEL光学参数的实时诊断,包括光强、光谱、光斑位置,光斑尺寸以及相干性等,并通过传输与聚焦系统传输至后端的实验站,以满足各个实验站对光源的不同需求。首批建设实验站共涉及6个前沿科技领域,分别为极紫外光刻、量子材料、能源催化、生物医药、大气与星际科学以及原子分子科学。
@@ -54,13 +54,17 @@ export default { background: url(../../assets/images/device/4.png) bottom right/auto no-repeat; } .banner { - background: url(../../assets/images/device/14.png) 0 0/100% 100% no-repeat; + background: url(../../assets/images/device/14.png) no-repeat center; + background-size: 100% 100%; } .share { position: relative; .inner { width: 90%; max-width: 1323px; + .textBox{ + margin-top: 290px; + } } .left { width: 547px; @@ -136,4 +140,169 @@ export default { border-left: 4px solid #1583FF; } } +@media screen and (min-width:351px) and (max-width:420px) { + .intro { + height: 18rem !important; + } + .block { + padding: 50px 0; + } +} + +@media (min-width:421px) and (max-width:490px) { + .intro { + height: 22rem !important; + } + .block { + padding: 50px 0; + } +} +@media screen and (min-width:491px) and (max-width:620px) { + .intro { + height: 28rem !important; + } + .block { + padding: 50px 0; + } +} +@media screen and (min-width:621px) and (max-width:720px) { + .intro { + height: 32rem !important; + } + .block { + padding: 50px 0; + } +} + +@media screen and (min-width:721px) and (max-width:820px) { + .intro { + height: 36rem !important; + } + .block { + padding: 50px 0; + } +} +@media screen and (min-width:821px) and (max-width:920px) { + .intro { + height: 40rem !important; + } + .block { + padding: 50px 0; + } +} +@media screen and (min-width:921px) and (max-width:1020px) { + .intro { + height: 44rem !important; + } + .block { + padding: 50px 0; + } +} +@media screen and (min-width:1021px) and (max-width:1120px) { + .intro { + height: 48rem !important; + } + .block { + padding: 50px 0; + } +}/* 大于960 小于1200 */ +@media screen and (min-width:1121px) and (max-width:1220px) { + .intro { + height: 52rem !important; + } + .block { + padding: 50px 0; + } +} +@media (min-width: 300px) and (max-width: 1200px) { + body{ + width: 100% !important; + } + .unit{ + width: 100%; + img{ + width: 100%; + } + } + .card{ + width: 100% !important;position: relative !important;margin-left: -50px;; + } + .textBox{ + margin-top: 40px !important; + } + .textBox{ + display: flex; + flex-direction: column; + .left{ + width: 100%; + .des{ + -webkit-line-clamp: 100 + } + } + .pic{ + width: 100%; + height: auto; + margin-top: 20px; + } + } + .bg{ + width:100% + } + .intro { + height: 45rem; + .pic{ + width: 100% !important; + left: 0; + top: 6%; + } + } +} + +@media (min-width: 280px) and (max-width: 375px) { + body{ + width: 100% !important; + } + .block{ + padding: 50px 0; + } + .unit{ + width: 100%; + img{ + width: 100%; + } + } + .card{ + width: 100% !important;position: relative !important;margin-left: -50px;; + } + .textBox{ + margin-top: 40px !important; + } + .textBox{ + display: flex; + flex-direction: column; + .left{ + width: 100%; + .des{ + -webkit-line-clamp: 100 + } + } + .pic{ + width: 100%; + height: auto; + margin-top: 20px; + } + } + .bg{ + width:100% + } + .intro { + height: 15rem; + .pic{ + width: 100% !important; + left: 0; + top: 6%; + } + } +} + \ No newline at end of file diff --git a/src/pages/deviceIntroLinear/index.vue b/src/pages/deviceIntroLinear/index.vue index b86c5d1..8fa4b7d 100644 --- a/src/pages/deviceIntroLinear/index.vue +++ b/src/pages/deviceIntroLinear/index.vue @@ -12,7 +12,7 @@
{{ modules[0].form.des }}
- +
@@ -21,11 +21,11 @@
S³FEL超导直线加速器示意图
- +
S³FEL超导直线加速器性能指标
- +
@@ -33,32 +33,32 @@ @@ -92,11 +115,11 @@ export default { } &:nth-child(2) .texts { color: #fff; - background: #33B3C1; + background: #33b3c1; } &:nth-child(3) .texts { color: #fff; - background: #E47C22; + background: #e47c22; } &:nth-child(even) .texts { left: auto; @@ -109,8 +132,8 @@ export default { width: 532px; padding: 70px 38px; color: #333; - background: #FFF6E9; - transition: .5s; + background: #fff6e9; + transition: 0.5s; } h6 { margin-bottom: 14px; @@ -122,4 +145,28 @@ export default { font-size: 1rem; } } - \ No newline at end of file +@media (max-width: 1200px) { + body { + width: 100% !important; + } + .inner { + width: 100%; + } + .item { + img { + margin-left: 30px; + } + .rightText { + right: 12px !important; + } + .texts { + width: 85%; + box-sizing: border-box; + left: 12px; + .des{ + -webkit-line-clamp: inherit + } + } + } +} + diff --git a/src/pages/sfel/index.vue b/src/pages/sfel/index.vue index 905c63b..fc44710 100644 --- a/src/pages/sfel/index.vue +++ b/src/pages/sfel/index.vue @@ -19,7 +19,7 @@