jialong.yu
/
FE_IASF_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

设配部分移动端

Browse Source
mobile
wangchenguang 2 years ago
parent 0860a8ca5f
commit 84c0882de1
18 changed files with 744 additions and 87 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 24
      package-lock.json
  2. 23
      src/App.vue
  3. 20
      src/layouts/footer/index.vue
  4. 2
      src/pages/article/activity.vue
  5. 16
      src/pages/article/index.vue
  6. 73
      src/pages/column/index.vue
  7. 46
      src/pages/deviceIntroBeam/index.vue
  8. 173
      src/pages/deviceIntroLayout/index.vue
  9. 133
      src/pages/deviceIntroLinear/index.vue
  10. 20
      src/pages/exp/index.vue
  11. 13
      src/pages/overviewLocation/index.vue
  12. 24
      src/pages/overviewSetup/index.vue
  13. 17
      src/pages/overviewTrailer/index.vue
  14. 107
      src/pages/science/index.vue
  15. 97
      src/pages/sfel/index.vue
  16. 33
      src/pages/userSharing/index.vue
  17. 2
      src/styles/common.scss
  18. 2
      src/styles/layout/index.scss

24
package-lock.json generated
Unescape View File

@ -3690,7 +3690,7 @@
}, },
"clone-deep": { "clone-deep": {
"version": "4.0.1", "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==", "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
"dev": true, "dev": true,
"requires": { "requires": {
@ -4374,7 +4374,7 @@
"dependencies": { "dependencies": {
"lru-cache": { "lru-cache": {
"version": "4.1.5", "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==", "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
"requires": { "requires": {
"pseudomap": "^1.0.2", "pseudomap": "^1.0.2",
@ -9538,7 +9538,7 @@
"dependencies": { "dependencies": {
"gaze": { "gaze": {
"version": "1.1.3", "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==", "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
"requires": { "requires": {
"globule": "^1.0.0" "globule": "^1.0.0"
@ -9569,7 +9569,7 @@
"dependencies": { "dependencies": {
"glob": { "glob": {
"version": "7.1.7", "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==", "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
"requires": { "requires": {
"fs.realpath": "^1.0.0", "fs.realpath": "^1.0.0",
@ -9584,12 +9584,12 @@
}, },
"lodash": { "lodash": {
"version": "4.17.21", "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==" "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
}, },
"minimatch": { "minimatch": {
"version": "3.0.8", "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==", "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==",
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
@ -12409,12 +12409,12 @@
}, },
"lodash": { "lodash": {
"version": "4.17.21", "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==" "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
}, },
"minimatch": { "minimatch": {
"version": "3.1.2", "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==", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
@ -12424,7 +12424,7 @@
}, },
"sass-loader": { "sass-loader": {
"version": "8.0.2", "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==", "integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==",
"dev": true, "dev": true,
"requires": { "requires": {
@ -12437,7 +12437,7 @@
"dependencies": { "dependencies": {
"schema-utils": { "schema-utils": {
"version": "2.7.1", "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==", "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
"dev": true, "dev": true,
"requires": { "requires": {
@ -12448,7 +12448,7 @@
}, },
"semver": { "semver": {
"version": "6.3.0", "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==", "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
"dev": true "dev": true
} }
@ -12687,7 +12687,7 @@
}, },
"shallow-clone": { "shallow-clone": {
"version": "3.0.1", "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==", "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
"dev": true, "dev": true,
"requires": { "requires": {

23
src/App.vue
Unescape View File

@ -5,10 +5,10 @@
</template> </template>
<script> <script>
import Setting from "@/setting"; import Setting from '@/setting';
import util from "@/libs/util"; import util from '@/libs/util';
export default { export default {
name: "App", name: 'App',
created() { created() {
//在页面加载时读取localStorage里的状态信息 //在页面加载时读取localStorage里的状态信息
if (util.local.get(Setting.storeKey)) { if (util.local.get(Setting.storeKey)) {
@ -16,9 +16,24 @@ export default {
} }
//在页面刷新时将vuex里的信息保存到localStorage里 //在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener("beforeunload", () => { window.addEventListener('beforeunload', () => {
util.local.set(Setting.storeKey, this.$store.state); util.local.set(Setting.storeKey, this.$store.state);
}); });
function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
var flagPc = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flagPc = false;
break;
}
}
return flagPc;
}
var flagZt = IsPC();
console.log(flagZt) //true为PC端，false为手机端
} }
}; };
</script> </script>

20
src/layouts/footer/index.vue
Unescape View File

@ -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;
}
}
}
</style> </style>

2
src/pages/article/activity.vue
Unescape View File

@ -262,4 +262,6 @@ export default {
width: 98%; width: 98%;
} }
} }
</style> </style>

16
src/pages/article/index.vue
Unescape View File

@ -280,4 +280,20 @@ export default {
width: 98%; 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;
}
}
}
}
</style> </style>

73
src/pages/column/index.vue
Unescape View File

@ -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%;
}
}
}
}
}
}
}
}
</style> </style>

46
src/pages/deviceIntroBeam/index.vue
Unescape View File

@ -7,7 +7,7 @@
<h6>光束线</h6> <h6>光束线</h6>
<p class="en">The beam line</p> <p class="en">The beam line</p>
<div class="sum">S³FEL光束线覆盖的波段范围为1~30 nm，包含前端区、光学传输系统和诊断系统，是连接自由电子激光光源和后端科学实验站的桥梁。</div> <div class="sum">S³FEL光束线覆盖的波段范围为1~30 nm，包含前端区、光学传输系统和诊断系统，是连接自由电子激光光源和后端科学实验站的桥梁。</div>
<div class="flex"> <div class="flex beamBox">
<div class="left"> <div class="left">
<div class="des">光束线的作用是将光源发出的超快、全相干、高亮度的激光高效地传输到实验站样品处，并在传输过程中对FEL脉冲进行频谱诊断、脉冲能量诊断、光斑位置诊断、光斑横向分布诊断、脉冲到达时间诊断、波前诊断、偏振诊断等。同时根据后端实验站的不同科学需求，可进一步对FEL脉冲进行单色化、脉冲能量衰减、横向光斑微聚焦等。</div> <div class="des">光束线的作用是将光源发出的超快、全相干、高亮度的激光高效地传输到实验站样品处，并在传输过程中对FEL脉冲进行频谱诊断、脉冲能量诊断、光斑位置诊断、光斑横向分布诊断、脉冲到达时间诊断、波前诊断、偏振诊断等。同时根据后端实验站的不同科学需求，可进一步对FEL脉冲进行单色化、脉冲能量衰减、横向光斑微聚焦等。</div>
</div> </div>
@ -135,4 +135,48 @@ export default {
border-left: 4px solid #1583FF; 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%;
}
}
}
</style> </style>

173
src/pages/deviceIntroLayout/index.vue
Unescape View File

@ -7,7 +7,7 @@
<h6>整体布局</h6> <h6>整体布局</h6>
<p class="en">The overall layout</p> <p class="en">The overall layout</p>
<div class="card">S³FEL装置主要包括一台超导直线加速器（电子束能量为2.5 GeV、重复频率为1 MHz）、4条波荡器线及首批14个实验线站。根据具体的功能可以分为注入器、主加速器、自由电子激光放大器（波荡器线）、光束线和实验站，还有包括束流诊断、控制、激光、同步、数据采集与处理等在内的公共子系统，以及低温、公用设施等配套系统和设施。</div> <div class="card">S³FEL装置主要包括一台超导直线加速器（电子束能量为2.5 GeV、重复频率为1 MHz）、4条波荡器线及首批14个实验线站。根据具体的功能可以分为注入器、主加速器、自由电子激光放大器（波荡器线）、光束线和实验站，还有包括束流诊断、控制、激光、同步、数据采集与处理等在内的公共子系统，以及低温、公用设施等配套系统和设施。</div>
<div class="flex" style="margin-top: 290px"> <div class="flex textBox" >
<div class="left"> <div class="left">
<div class="des"> 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个前沿科技领域，分别为极紫外光刻、量子材料、能源催化、生物医药、大气与星际科学以及原子分子科学。</div> <div class="des"> 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个前沿科技领域，分别为极紫外光刻、量子材料、能源催化、生物医药、大气与星际科学以及原子分子科学。</div>
</div> </div>
@ -54,13 +54,17 @@ export default {
background: url(../../assets/images/device/4.png) bottom right/auto no-repeat; background: url(../../assets/images/device/4.png) bottom right/auto no-repeat;
} }
.banner { .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 { .share {
position: relative; position: relative;
.inner { .inner {
width: 90%; width: 90%;
max-width: 1323px; max-width: 1323px;
.textBox{
margin-top: 290px;
}
} }
.left { .left {
width: 547px; width: 547px;
@ -136,4 +140,169 @@ export default {
border-left: 4px solid #1583FF; 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%;
}
}
}
</style> </style>

133
src/pages/deviceIntroLinear/index.vue
Unescape View File

@ -12,7 +12,7 @@
<div class="line"></div> <div class="line"></div>
<div class="text">{{ modules[0].form.des }}</div> <div class="text">{{ modules[0].form.des }}</div>
</div> </div>
<img class="bg" src="@/assets/images/device/10.png" alt=""> <img class="bg" src="@/assets/images/device/10.png" alt="" />
</div> </div>
</div> </div>
</div> </div>
@ -21,11 +21,11 @@
<div class="inner"> <div class="inner">
<div class="left"> <div class="left">
<h5>S³FEL超导直线加速器示意图</h5> <h5>S³FEL超导直线加速器示意图</h5>
<img src="@/assets/images/device/11.png" alt=""> <img src="@/assets/images/device/11.png" alt="" />
</div> </div>
<div class="right"> <div class="right">
<h6>S³FEL超导直线加速器性能指标</h6> <h6>S³FEL超导直线加速器性能指标</h6>
<img src="@/assets/images/device/12.png" alt=""> <img src="@/assets/images/device/12.png" alt="" />
</div> </div>
</div> </div>
</div> </div>
@ -33,32 +33,32 @@
</template> </template>
<script> <script>
import mixins from '@/mixins/page' import mixins from '@/mixins/page';
import WOW from 'wow.js' import WOW from 'wow.js';
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data() {
return { return {};
}
}, },
mounted() { mounted() {
new WOW().init() new WOW().init();
}, },
methods: { methods: {
// 获取文章详情 // 获取文章详情
getInfo() { getInfo() {
// 预览/详情 // 预览/详情
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => { this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`)
if (data.length) { .then(({ data }) => {
// state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing if (data.length) {
const json = JSON.parse(this.preview ? // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
data : const json = JSON.parse(
data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing']) this.preview ? data : data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing']
this.modules = json );
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json) this.modules = json;
} console.log('🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json', json);
}).catch(err => {}) }
})
.catch((err) => { });
} }
} }
}; };
@ -66,100 +66,173 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css); @import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss"; @import '../../styles/page/page.scss';
.banner { .banner {
background: url(../../assets/images/device/15.png) 0 0/100% 100% no-repeat; background: url(../../assets/images/device/15.png) 0 0/100% 100% no-repeat;
} }
.history { .history {
.inner { .inner {
width: 90%; width: 90%;
max-width: 1504px; max-width: 1504px;
} }
h2 { h2 {
position: relative; position: relative;
font-size: 2.2rem; font-size: 2.2rem;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
color: #1C1C1C; color: #1c1c1c;
} }
.en { .en {
margin: -25px 0 40px; margin: -25px 0 40px;
font-size: 2.2rem; font-size: 2.2rem;
font-family: PingFangSC-Light, PingFang SC; font-family: PingFangSC-Light, PingFang SC;
font-weight: 300; font-weight: 300;
color: #E3E3E3; color: #e3e3e3;
} }
.texts { .texts {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 82px 0 30px 38px; padding: 82px 0 30px 38px;
margin-top: 20px; margin-top: 20px;
background: #1583FF; background: #1583ff;
border-radius: 65px 100px 0px 0px; border-radius: 65px 100px 0px 0px;
transition: .3s; transition: 0.3s;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
} }
} }
.left { .left {
width: 50%; width: 50%;
} }
h6 { h6 {
font-size: 1.4rem; font-size: 1.4rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
} }
.line { .line {
width: 214px; width: 214px;
height: 5px; height: 5px;
margin: 54px 0 44px; margin: 54px 0 44px;
background: #FFFFFF; background: #ffffff;
opacity: 0.52; opacity: 0.52;
} }
.text { .text {
font-size: 1.1rem; font-size: 1.1rem;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
line-height: 44px; line-height: 44px;
} }
.bg { .bg {
width: 50%; width: 50%;
margin: -142px -50px 0 0; margin: -142px -50px 0 0;
border-top-left-radius: 30px; border-top-left-radius: 30px;
} }
} }
.intro { .intro {
.inner { .inner {
display: flex; display: flex;
} }
.left { .left {
width: 30%; width: 30%;
} }
.right { .right {
width: 68%; width: 68%;
margin-left: 2%; margin-left: 2%;
} }
h5 { h5 {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 1rem; font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #2A2A2A; color: #2a2a2a;
} }
h6 { h6 {
padding-left: 15px; padding-left: 15px;
margin-bottom: 15px; margin-bottom: 15px;
font-size: 1rem; font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #2A2A2A; color: #2a2a2a;
border-left: 4px solid #1583FF; border-left: 4px solid #1583ff;
} }
img { img {
width: 100%; width: 100%;
height: 85%; height: 85%;
} }
} }
/* 小于400 */
@media (min-width: 280px) and (max-width: 620px) {
.inner {
flex-direction: column;
.left,
.right {
width: 50%;
margin: 20px auto;
}
}
.history {
.left {
.line {
width: 100%;
}
}
}
.block {
padding: 50px 0;
.inner{
.texts {
.bg {
width: 100%;height: 200px;
margin: -50px 0px 0 0;
}
}
}
}
}
@media (max-width: 1200px) {
body {
width: 100% !important;
}
.history {
.bg {
margin: -142px -0px 0 0;
}
}
.inner {
flex-direction: column;
.left,
.right {
width: 95%;
margin: 20px auto;
}
}
}
</style> </style>

20
src/pages/exp/index.vue
Unescape View File

@ -166,4 +166,24 @@ export default {
width: 28%; width: 28%;
} }
} }
@media (max-width: 1200px) {
body{
width: 100% !important;
}
.block {
.inner{
.des{
-webkit-line-clamp: inherit
}
}
}
.list {
display: block;
li {
width: 80% !important;
height: 400px;
margin: 10px auto;
}
}
}
</style> </style>

13
src/pages/overviewLocation/index.vue
Unescape View File

@ -96,4 +96,17 @@ export default {
color: #020202; color: #020202;
line-height: 32px; line-height: 32px;
} }
@media (max-width: 1200px) {
.tabs {
overflow: hidden;;
overflow-x: auto;
white-space: normal;
justify-content: normal;
display: -webkit-box;
li {
white-space: normal;
}
}
}
</style> </style>

24
src/pages/overviewSetup/index.vue
Unescape View File

@ -124,4 +124,28 @@ export default {
width: 85%; width: 85%;
margin: 0 auto; margin: 0 auto;
} }
@media (max-width: 1200px) {
.tabs {
overflow: hidden;;
overflow-x: auto;
white-space: normal;
justify-content: normal;
display: -webkit-box;
li {
white-space: normal;
}
}
.tab-content{
padding: 20px 0;
.org{
width: 100%;
padding:15px;
flex-direction: column;
.left{
width: 100%;
}
}
}
}
</style> </style>

17
src/pages/overviewTrailer/index.vue
Unescape View File

@ -102,4 +102,21 @@ export default {
color: #020202; color: #020202;
line-height: 32px; line-height: 32px;
} }
@media (max-width: 1200px) {
.tabs {
overflow: hidden;;
overflow-x: auto;
white-space: normal;
justify-content: normal;
display: -webkit-box;
li {
white-space: normal;
}
}
.tab-content{
width: 95%;
margin: 0 auto;
}
}
</style> </style>

107
src/pages/science/index.vue
Unescape View File

@ -1,7 +1,7 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="single-banner"> <div class="single-banner">
<img class="banner-img" :src="modules[0].form.pic" alt=""> <img class="banner-img" :src="modules[0].form.pic" alt="" />
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
<p class="banner-des">{{ modules[0].form.des }}</p> <p class="banner-des">{{ modules[0].form.des }}</p>
@ -10,22 +10,37 @@
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<div class="item wow bounceInLeft" data-wow-delay="0.5s" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)"> <div
<img src="@/assets/images/science/1.png" alt=""> class="item wow bounceInLeft"
data-wow-delay="0.5s"
:class="{ 'cursor-pointer': isLink(modules[1].form.link.linkName) }"
@click="openLink(modules[1].form)"
>
<img src="@/assets/images/science/1.png" alt="" />
<div class="texts"> <div class="texts">
<h6>{{ modules[1].form.title }}</h6> <h6>{{ modules[1].form.title }}</h6>
<div class="des">{{ modules[1].form.des }}</div> <div class="des">{{ modules[1].form.des }}</div>
</div> </div>
</div> </div>
<div class="item wow bounceInRight" data-wow-delay="0.8s" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)"> <div
<img src="@/assets/images/science/2.png" alt=""> class="item wow bounceInRight"
<div class="texts"> data-wow-delay="0.8s"
:class="{ 'cursor-pointer': isLink(modules[2].form.link.linkName) }"
@click="openLink(modules[2].form)"
>
<img src="@/assets/images/science/2.png" alt="" />
<div class="texts rightText">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="des">{{ modules[2].form.des }}</div> <div class="des">{{ modules[2].form.des }}</div>
</div> </div>
</div> </div>
<div class="item wow bounceInLeft" data-wow-delay="0.5s" :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}" @click="openLink(modules[3].form)"> <div
<img src="@/assets/images/science/3.png" alt=""> class="item wow bounceInLeft"
data-wow-delay="0.5s"
:class="{ 'cursor-pointer': isLink(modules[3].form.link.linkName) }"
@click="openLink(modules[3].form)"
>
<img src="@/assets/images/science/3.png" alt="" />
<div class="texts"> <div class="texts">
<h6>{{ modules[3].form.title }}</h6> <h6>{{ modules[3].form.title }}</h6>
<div class="des">{{ modules[3].form.des }}</div> <div class="des">{{ modules[3].form.des }}</div>
@ -37,36 +52,44 @@
</template> </template>
<script> <script>
import mixins from '@/mixins/page' import mixins from "@/mixins/page";
import Setting from '@/setting' import Setting from "@/setting";
import Util from '@/libs/util' import Util from "@/libs/util";
import WOW from 'wow.js' import WOW from "wow.js";
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data() {
return { return {
routes: [] routes: [],
} };
}, },
mounted() { mounted() {
new WOW().init() new WOW().init();
}, },
methods: { methods: {
// 获取文章详情 // 获取文章详情
getInfo() { getInfo() {
// 预览/详情 // 预览/详情
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => { this.$post(
if (data.length) { `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
// state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing )
const json = JSON.parse(this.preview ? .then(({ data }) => {
data : if (data.length) {
data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing']) // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
this.modules = json const json = JSON.parse(
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json) this.preview
} ? data
}).catch(err => {}) : data[data.length - 1][
data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
]
);
this.modules = json;
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
}
})
.catch((err) => {});
}, },
} },
}; };
</script> </script>
@ -92,11 +115,11 @@ export default {
} }
&:nth-child(2) .texts { &:nth-child(2) .texts {
color: #fff; color: #fff;
background: #33B3C1; background: #33b3c1;
} }
&:nth-child(3) .texts { &:nth-child(3) .texts {
color: #fff; color: #fff;
background: #E47C22; background: #e47c22;
} }
&:nth-child(even) .texts { &:nth-child(even) .texts {
left: auto; left: auto;
@ -109,8 +132,8 @@ export default {
width: 532px; width: 532px;
padding: 70px 38px; padding: 70px 38px;
color: #333; color: #333;
background: #FFF6E9; background: #fff6e9;
transition: .5s; transition: 0.5s;
} }
h6 { h6 {
margin-bottom: 14px; margin-bottom: 14px;
@ -122,4 +145,28 @@ export default {
font-size: 1rem; font-size: 1rem;
} }
} }
@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
}
}
}
}
</style> </style>

97
src/pages/sfel/index.vue
Unescape View File

@ -19,7 +19,7 @@
</div> </div>
<template v-if="articles.length"> <template v-if="articles.length">
<div class="sfel-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[2].form)"> <div class="sfel-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[2].form)">
<div style="width: 50%;height: 410px;overflow: hidden;"> <div style="width: 50%;height: 410px;overflow: hidden;" class="newBox">
<img class="pic" width="100%" height="100%" :src="curArticle.titleImg" alt=""> <img class="pic" width="100%" height="100%" :src="curArticle.titleImg" alt="">
</div> </div>
<div class="right"> <div class="right">
@ -700,7 +700,7 @@ export default {
.left { .left {
position: relative; position: relative;
width: 550px; width: 550px;
min-width: 550px; // min-width: 550px;
height: 550px; height: 550px;
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
@ -991,7 +991,7 @@ export default {
height: 204px; height: 204px;
padding: 36px 22px; padding: 36px 22px;
margin-right: 14px; margin-right: 14px;
background: url(../../assets/images/sfel/7.png) 0 0/cover no-repeat; background: url(../../assets/images/sfel/7.png) no-repeat center;
transition: .5s; transition: .5s;
cursor: pointer; cursor: pointer;
&:nth-child(2) { &:nth-child(2) {
@ -1059,4 +1059,95 @@ export default {
} }
} }
} }
@media (max-width: 1200px) {
.sfel-banner{
flex-direction: column;
.newBox{
width: 100% !important;
}
.right{
margin-top: 10px;
width: 100%;
height: 410px;
}
}
.card {
flex-direction: column;
li {
width: 100%;
margin-top: 20px;
}
}
.shop-shows{
flex-direction: column;
.left{
width: 100%;
}
.right{
width: 100%;margin-top: 20px;
}
}
.shows{
flex-direction: column;
.left{
width: 100%;
}
.card-list{
width: 100%;margin-top: 20px;
li {
flex-direction: column;
.pic{
width: 100% !important;
margin-right: 0;
}
.texts{
margin-top: 20px;
width: 100%;
}
}
}
}
.media-wrap{
flex-direction: column;
.left{
width: 100%;
}
.right {
width: 100%;
margin-top: 20px;
}
}
.news{
flex-direction: column;
li {
margin-top: 30px;
width: 100%;
}
}
.slide , .list{
flex-direction: column;
.texts , .img-wrap{
width: 100%;
}
}
.list {
li {
width: 100% !important; margin-top: 20px;
}
}
.slides{
div{
flex: 1;
}
}
#part6 {
.slide{
.texts{
height: 430px;
}
}
}
}
</style> </style>

33
src/pages/userSharing/index.vue
Unescape View File

@ -185,4 +185,37 @@ export default {
line-height: 31px; line-height: 31px;
} }
} }
@media (max-width: 1200px) {
body{
width: 100% !important;
}
.share{
width: 100%;
.inner{
width: 100%;
flex-direction: column;
.left{
width: 100%;
}
}
.des{
display: block;
padding: 0 10px;
}
.pic{
width: 100%;
}
.card{
width: 100%;
}
}
.group {
width: 100%;
flex-direction: column;
li{
width: 100%;
margin-top: 20px;
}
}
}
</style> </style>

2
src/styles/common.scss
Unescape View File

@ -52,7 +52,7 @@
} }
.main { .main {
.view { .view {
min-width: $min-width; // min-width: $min-width;
min-height: calc(100vh - 90px); min-height: calc(100vh - 90px);
margin: 0 auto; margin: 0 auto;
background-color: #fff; background-color: #fff;

2
src/styles/layout/index.scss
Unescape View File

@ -10,7 +10,7 @@ body,
} }
body { body {
min-width: 1280px; // min-width: 1280px;
font-family: PingFang, PingFang SC, "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif; font-family: PingFang, PingFang SC, "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
font-size: 14px; font-size: 14px;
background: rgba(0, 0, 0, 0.02); background: rgba(0, 0, 0, 0.02);

Write Preview
Loading…
Cancel
Save