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

fix

Browse Source
master
yujialong 2 years ago
parent 640f460295
commit f89cc9b2a9
13 changed files with 377 additions and 1617 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. 12
      src/components/rightColumns/index.vue
  2. 542
      src/pages/column/index.vue
  3. 212
      src/pages/estate/event/index.vue
  4. 328
      src/pages/estate/location/index.vue
  5. 308
      src/pages/estate/orgSetup/index.vue
  6. 28
      src/pages/estate/survey/index.vue
  7. 1
      src/pages/lightSources/index.vue
  8. 273
      src/pages/mission/index.vue
  9. 16
      src/pages/speech/index.vue
  10. 33
      src/pages/talentCentre/index.vue
  11. 185
      src/styles/common.scss
  12. 28
      src/styles/page/page.scss
  13. 28
      src/styles/var.scss

12
src/components/rightColumns/index.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<div class="right"> <div class="right party">
<el-tree class="column" <el-tree class="column"
ref="column" ref="column"
:data="columns" :data="columns"
@ -125,6 +125,16 @@ export default {
color: #999; color: #999;
} }
} }
.party {
.el-tree-node:focus > .el-tree-node__content,
/deep/.el-tree-node__content {
background-color: $lightPartyTheme;
}
/deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: $partyTheme;
}
}
@media (max-width: 1200px) { @media (max-width: 1200px) {
.right { .right {
width: 100%; width: 100%;

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

@ -1,5 +1,6 @@
<template> <template>
<div v-show="loaded" <div class="party"
v-show="loaded"
:class="['wrap', { activity: info.listStyleId === 15 }]"> :class="['wrap', { activity: info.listStyleId === 15 }]">
<div class="banner"> <div class="banner">
<img width="100%" <img width="100%"
@ -778,39 +779,17 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap {
.banner {
height: 24rem;
position: relative;
img {
height: 24rem;
}
.texts {
position: absolute;
bottom: 87px;
top: auto;
left: 213px;
}
}
}
.el-tree-node__content {
padding-left: 10px !important;
}
.l-title {
font-weight: 600;
font-size: 1.024rem;
}
.banner { .banner {
position: relative; position: relative;
height: 14rem; height: 24rem;
color: #fff; color: #fff;
img {
height: 24rem;
}
.texts { .texts {
position: absolute; position: absolute;
top: 6.15rem; bottom: 87px;
left: 12.15rem; left: 213px;
} }
.text { .text {
@ -824,6 +803,12 @@ export default {
font-size: 1.6rem; font-size: 1.6rem;
} }
} }
.el-tree-node__content {
padding-left: 10px !important;
}
.l-title {
font-weight: 600;
}
.column-wrap { .column-wrap {
padding: 2rem 0; padding: 2rem 0;
@ -962,15 +947,6 @@ export default {
border-top: 1px solid #f8f9f9; border-top: 1px solid #f8f9f9;
cursor: pointer; cursor: pointer;
// &:before {
// content: '';
// width: 2px;
// height: 2px;
// margin: 0 10px 0 20px;
// background-color: #666;
// border-radius: 50%;
// }
&:hover { &:hover {
color: #0c84eb; color: #0c84eb;
} }
@ -1134,22 +1110,6 @@ export default {
overflow: hidden; overflow: hidden;
} }
.column {
width: 100%;
margin-bottom: 1.25rem;
/deep/.el-tree-node__content {
height: 44px;
background-color: #e5edf8;
border-bottom: 2px solid #fff;
}
/deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
color: #fff;
background-color: #0f5698;
}
}
.list { .list {
margin-bottom: 1rem; margin-bottom: 1rem;
@ -1211,104 +1171,36 @@ export default {
} }
} }
} }
.party {
@media (max-width: 1200px) { /deep/.columns {
.article { .el-tree-node__content {
flex-direction: column; &:hover {
color: $partyTheme;
.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%;
}
} }
} }
.is-current > .el-tree-node__content {
.article-wrap { background-color: $lightPartyTheme;
width: 90%; &:after {
margin: 0 auto; background-color: $partyTheme;
.articles {
li {
.pic {
margin-top: 20px;
}
}
} }
}
.right { .el-tree-node__label,
width: 95%; .custom-tree-node {
margin: 20px auto; color: $partyTheme;
}
} }
} }
.article {
.banner { .readDetailBtn {
.texts { background-color: $partyTheme;
left: 50px; border-color: $partyTheme;
top: 110px;
} }
} }
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
.column-wrap { background-color: $partyTheme !important;
.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:not(.news-notice) {
flex-direction: column;
.texts {
width: 100%;
.meta {
font-size: 0.5rem;
}
}
.pic {
width: 95%;
margin: 0 auto;
}
}
}
}
}
}
} }
} }
@media (max-width: 1200px) {
@media (min-width: 280px) and (max-width: 1200px) {
.banner { .banner {
height: 15rem !important; height: 15rem !important;
img { img {
@ -1320,226 +1212,65 @@ export default {
} }
} }
.article { .article {
flex-direction: column;
.columns { .columns {
width: 40%; width: 40%;
.el-tree-node__content {
padding: 0 !important;
}
span {
font-size: 0.8rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
} }
} .left {
width: 100%;
.column-wrap {
.article {
flex-direction: column;
.left { .forms {
width: 100%; flex-direction: column;
justify-content: center;
align-items: center;
.contents { .item,
.articles { .search {
li:not(.news-notice) { margin: 20px 0 0 0;
flex-direction: column;
.pic {
width: 95%;
margin: 0 auto;
height: 15rem;
}
}
}
} }
}
}
}
}
@media (max-width: 320px) { .item:first-child {
.banner { margin: 0;
height: 12rem !important;
img {
height: 12rem !important;
}
.texts {
left: 2rem;
bottom: 2rem;
.text {
font-size: 1.5rem;
}
}
}
.contents {
.article-wrap {
.articles {
.pic {
height: auto !important;
} }
.otherData {
margin-top: 1rem; div {
.leftBox { width: 100%;
padding-left: 0;
.titleDes {
line-height: 1.368rem;
}
}
} }
} }
} }
}
.forms {
.switch {
width: 100%;
flex-direction: column;
margin-right: 0;
li {
width: 90%;
margin: 0 auto;
margin-top: 10px;
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.banner {
height: 12rem !important;
img {
height: 12rem !important;
}
.texts {
left: 2rem;
bottom: 2rem;
.text {
font-size: 1.5rem;
}
}
}
.contents {
.article-wrap { .article-wrap {
.articles { width: 90%;
.pic { margin: 0 auto;
height: auto !important;
}
.otherData {
margin-top: 1rem;
.leftBox {
padding-left: 0;
.titleDes {
line-height: 1.368rem;
}
}
}
}
} }
}
.forms { .articles {
.switch {
width: 100%;
flex-direction: column;
margin-right: 0;
li { li {
width: 90%; flex-direction: column;
margin: 0 auto; align-items: flex-start;
margin-top: 10px; padding: 1rem;
} margin-top: 1rem;
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.banner {
height: 12rem !important;
img {
height: 12rem !important;
}
.texts {
left: 2rem;
bottom: 2rem;
.text {
font-size: 1.5rem;
}
}
}
.contents {
.article-wrap {
.articles {
.pic { .pic {
height: auto !important; width: 100%;
} margin: 10px 0;
.otherData {
margin-top: 1rem;
.leftBox {
padding-left: 0;
.titleDes {
line-height: 1.368rem;
}
}
} }
} }
} .readDetail {
} .texts {
.forms { padding-left: 0;
.switch {
width: 100%;
flex-direction: column;
margin-right: 0;
li {
width: 90%;
margin: 0 auto;
margin-top: 10px;
}
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.banner {
height: 12rem !important;
img {
height: 12rem !important;
}
.texts {
left: 2rem;
bottom: 2rem;
.text {
font-size: 1.5rem;
}
}
}
.contents {
.article-wrap {
.articles {
.pic {
height: auto !important;
}
.otherData {
margin-top: 1rem;
.leftBox {
padding-left: 0;
.titleDes {
line-height: 1.368rem;
}
}
} }
} }
} }
}
.forms { .right {
.switch { width: 95%;
width: 100%; margin: 20px auto;
flex-direction: column;
margin-right: 0;
li {
width: 90%;
margin: 0 auto;
margin-top: 10px;
}
} }
} }
} }
@media (min-width: 640px) and (max-width: 768px) {
@media (max-width: 640px) {
.banner { .banner {
height: 12rem !important; height: 12rem !important;
img { img {
@ -1553,117 +1284,22 @@ export default {
} }
} }
} }
.contents { .article {
.article-wrap { .contents {
.articles {
.pic {
height: auto !important;
}
.otherData {
margin-top: 1rem;
.leftBox {
padding-left: 0;
.titleDes {
line-height: 1.368rem;
}
}
}
}
}
}
.forms {
.switch {
width: 100%;
flex-direction: column; flex-direction: column;
margin-right: 0; padding: 0 15px;
li {
width: 90%;
margin: 0 auto;
margin-top: 10px;
}
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.banner {
height: 12rem !important;
img {
height: 12rem !important;
}
.texts {
left: 2rem;
bottom: 2rem;
.text {
font-size: 1.5rem;
}
} }
} .columns,
.contents {
.article-wrap { .article-wrap {
.articles {
.pic {
height: auto !important;
}
.otherData {
margin-top: 1rem;
.leftBox {
padding-left: 0;
.titleDes {
line-height: 1.368rem;
}
}
}
}
}
}
.forms {
.switch {
width: 100%; width: 100%;
flex-direction: column;
margin-right: 0; margin-right: 0;
li {
width: 90%;
margin: 0 auto;
margin-top: 10px;
}
} }
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.article {
.articles { .articles {
.pic { li {
width: 40%; .leftBox {
height: auto; padding-left: 0;
} .titleDes {
} line-height: 1.368rem;
}
.banner {
height: 14rem !important;
img {
height: 14rem !important;
}
.texts {
left: 2rem;
bottom: 2rem;
.text {
font-size: 1.5rem;
}
}
}
.contents {
.article-wrap {
.articles {
.pic {
height: auto !important;
}
.otherData {
margin-top: 1rem;
.leftBox {
padding-left: 0;
.titleDes {
line-height: 1.368rem;
}
} }
} }
} }
@ -1682,24 +1318,4 @@ export default {
} }
} }
} }
@media (min-width: 1200px) and (max-width: 1300px) {
.article {
.articles {
.pic {
width: 40%;
height: auto;
}
}
}
}
@media (min-width: 1300px) {
.article {
.articles {
.pic {
width: 40%;
height: auto;
}
}
}
}
</style> </style>

212
src/pages/estate/event/index.vue
Unescape View File

@ -89,24 +89,7 @@ export default {
background: url(http://10.10.11.7/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat, background: url(http://10.10.11.7/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat,
url(http://10.10.11.7/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat; url(http://10.10.11.7/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
} }
.tabs {
display: flex;
justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
li {
padding: 25px 19px;
margin: 0 10px;
font-size: 1.1rem;
color: #333;
border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer;
&.active {
color: #1583ff;
border-bottom-color: #1583ff;
}
}
}
.history { .history {
h2 { h2 {
position: relative; position: relative;
@ -208,16 +191,6 @@ export default {
} }
} }
@media (max-width: 1200px) { @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 { .tab-content {
padding: 20px 0; padding: 20px 0;
.org { .org {
@ -253,6 +226,7 @@ export default {
} }
.pic { .pic {
width: 100%; width: 100%;
height: auto;
margin-top: 1rem; margin-top: 1rem;
} }
} }
@ -262,186 +236,4 @@ export default {
} }
} }
} }
@media (max-width: 320px) {
.tab-content {
.survey {
padding: 1.25rem;
width: 100%;
margin-bottom: 2rem;
}
}
.block {
.inner {
.event {
.right {
.list {
li {
.pic {
width: 100%;
margin-top: 1rem;
height: 13rem;
}
}
}
}
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.tab-content {
.survey {
padding: 1.25rem;
width: 100%;
margin-bottom: 2rem;
}
}
.block {
.inner {
.event {
.right {
.list {
li {
.pic {
width: 100%;
margin-top: 1rem;
height: 15rem;
}
}
}
}
}
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.tab-content {
.survey {
padding: 1.25rem;
width: 100%;
margin-bottom: 2rem;
}
}
.block {
.inner {
.event {
.right {
.list {
li {
.pic {
width: 100%;
margin-top: 1rem;
height: 18rem;
}
}
}
}
}
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.tab-content {
.survey {
padding: 1.25rem;
width: 100%;
margin-bottom: 2rem;
}
}
.block {
.inner {
.event {
.right {
.list {
li {
.pic {
width: 100%;
margin-top: 1rem;
height: 20rem;
}
}
}
}
}
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.tab-content {
.survey {
padding: 1.25rem;
width: 100%;
margin-bottom: 2rem;
}
}
.block {
.inner {
.event {
.right {
.list {
li {
.pic {
width: 100%;
margin-top: 1rem;
height: 22rem;
}
}
}
}
}
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.tab-content {
.survey {
padding: 1.25rem;
width: 100%;
margin-bottom: 2rem;
}
}
.block {
.inner {
.event {
.right {
.list {
li {
.pic {
width: 100%;
margin-top: 1rem;
height: 25rem;
}
}
}
}
}
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.tab-content {
.survey {
padding: 1.25rem;
width: 100%;
margin-bottom: 2rem;
}
}
.block {
.inner {
.event {
.right {
.list {
li {
.pic {
width: 100%;
margin-top: 1rem;
height: 27rem;
}
}
}
}
}
}
}
}
</style> </style>

328
src/pages/estate/location/index.vue
Unescape View File

@ -88,25 +88,6 @@ 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';
.tabs {
display: flex;
justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
li {
padding: 25px 19px;
margin: 0 10px;
font-size: 1.1rem;
color: #333;
border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer;
&.active {
color: #1583ff;
border-bottom-color: #1583ff;
}
}
}
.tab-content { .tab-content {
width: 70%; width: 70%;
max-width: 1504px; max-width: 1504px;
@ -159,49 +140,8 @@ export default {
} }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.tabs {
overflow: hidden;
overflow-x: auto;
white-space: normal;
justify-content: normal;
display: -webkit-box;
li {
white-space: normal;
}
}
.block {
padding: 2rem 0;
.inner {
width: 90%;
.event {
flex-direction: column;
.time {
width: 100%;
li {
width: 100%;
justify-content: flex-start;
}
}
.right {
width: 100%;
.list {
li {
padding: 1.25rem;
flex-direction: column;
.texts {
width: 100%;
}
.pic {
width: 100%;
margin-top: 1rem;
}
}
}
}
}
}
}
.tab-content { .tab-content {
width: 80%;
padding: 1.25rem 0; padding: 1.25rem 0;
.item { .item {
padding: 0.85rem; padding: 0.85rem;
@ -217,270 +157,4 @@ export default {
} }
} }
} }
@media (max-width: 320px) {
.tab-content {
.survey {
padding: 1.25rem;
width: 100%;
margin-bottom: 2rem;
}
.org {
img {
width: 100%;
height: 13rem;
}
}
.item {
.texts {
h6 {
font-size: 1.5rem;
}
}
}
}
.block {
.inner {
.event {
.right {
.list {
li {
.pic {
width: 100%;
margin-top: 1rem;
height: 13rem;
}
}
}
}
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.tab-content {
.survey {
padding: 1.25rem;
width: 100%;
margin-bottom: 2rem;
}
.org {
img {
width: 100%;
height: 18rem;
}
}
.item {
.texts {
h6 {
font-size: 1.5rem;
}
}
}
}
.block {
.inner {
.event {
.right {
.list {
li {
.pic {
width: 100%;
margin-top: 1rem;
height: 15rem;
}
}
}
}
}
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.tab-content {
.survey {
padding: 1.25rem;
width: 100%;
margin-bottom: 2rem;
}
.org {
img {
width: 100%;
height: 20rem;
}
}
.item {
.texts {
h6 {
font-size: 1.5rem;
}
}
}
}
.block {
.inner {
.event {
.right {
.list {
li {
.pic {
width: 100%;
margin-top: 1rem;
height: 18rem;
}
}
}
}
}
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.tab-content {
.survey {
padding: 1.25rem;
width: 100%;
margin-bottom: 2rem;
}
.org {
img {
width: 100%;
height: 24rem;
}
}
.item {
.texts {
h6 {
font-size: 1.5rem;
}
}
}
}
.block {
.inner {
.event {
.right {
.list {
li {
.pic {
width: 100%;
margin-top: 1rem;
height: 20rem;
}
}
}
}
}
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.tab-content {
.survey {
padding: 1.25rem;
width: 100%;
margin-bottom: 2rem;
}
.org {
img {
width: 100%;
height: 28rem;
}
}
.item {
.texts {
h6 {
font-size: 1.5rem;
}
}
}
}
.block {
.inner {
.event {
.right {
.list {
li {
.pic {
width: 100%;
margin-top: 1rem;
height: 22rem;
}
}
}
}
}
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.tab-content {
.survey {
padding: 1.25rem;
width: 100%;
margin-bottom: 2rem;
}
.org {
img {
width: 100%;
height: 30rem;
}
}
.item {
.texts {
h6 {
font-size: 1.5rem;
}
}
}
}
.block {
.inner {
.event {
.right {
.list {
li {
.pic {
width: 100%;
margin-top: 1rem;
height: 25rem;
}
}
}
}
}
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.tab-content {
.survey {
padding: 1.25rem;
width: 100%;
margin-bottom: 2rem;
}
.org {
img {
width: 100%;
height: 32rem;
}
}
}
.block {
.inner {
.event {
.right {
.list {
li {
.pic {
width: 100%;
margin-top: 1rem;
height: 27rem;
}
}
}
}
}
}
}
}
</style> </style>

308
src/pages/estate/orgSetup/index.vue
Unescape View File

@ -60,24 +60,6 @@ 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';
.tabs {
display: flex;
justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
li {
padding: 25px 19px;
margin: 0 10px;
font-size: 1.1rem;
color: #333;
border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer;
&.active {
color: #1583ff;
border-bottom-color: #1583ff;
}
}
}
.tab-content { .tab-content {
padding: 77px 0; padding: 77px 0;
} }
@ -116,16 +98,6 @@ export default {
text-align: center; text-align: center;
} }
@media (max-width: 1200px) { @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 { .tab-content {
padding: 20px 0; padding: 20px 0;
.org { .org {
@ -135,287 +107,9 @@ export default {
.left { .left {
width: 100%; width: 100%;
} }
}
}
}
@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%;
}
img {
width: 100%;
}
}
}
.block {
padding: 2rem 0;
.inner {
width: 90%;
.event {
flex-direction: column;
.time {
width: 100%;
li {
width: 100%;
justify-content: flex-start;
}
}
.right {
width: 100%;
.list {
li {
padding: 1.25rem;
flex-direction: column;
.texts {
width: 100%;
}
.pic {
width: 100%;
margin-top: 1rem;
}
}
}
}
}
}
}
}
@media (max-width: 320px) {
.tab-content {
.survey {
padding: 1.25rem;
width: 100%;
margin-bottom: 2rem;
}
.org {
img {
width: 100%;
height: 13rem;
}
}
}
.block {
.inner {
.event {
.right {
.list {
li {
.pic {
width: 100%;
margin-top: 1rem;
height: 13rem;
}
}
}
}
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.tab-content {
.survey {
padding: 1.25rem;
width: 100%;
margin-bottom: 2rem;
}
.org {
img {
width: 100%;
height: 18rem;
}
}
}
.block {
.inner {
.event {
.right {
.list {
li {
.pic {
width: 100%;
margin-top: 1rem;
height: 15rem;
}
}
}
}
}
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.tab-content {
.survey {
padding: 1.25rem;
width: 100%;
margin-bottom: 2rem;
}
.org {
img {
width: 100%;
height: 20rem;
}
}
}
.block {
.inner {
.event {
.right {
.list {
li {
.pic {
width: 100%;
margin-top: 1rem;
height: 18rem;
}
}
}
}
}
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.tab-content {
.survey {
padding: 1.25rem;
width: 100%;
margin-bottom: 2rem;
}
.org {
img {
width: 100%;
height: 24rem;
}
}
}
.block {
.inner {
.event {
.right {
.list {
li {
.pic {
width: 100%;
margin-top: 1rem;
height: 20rem;
}
}
}
}
}
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.tab-content {
.survey {
padding: 1.25rem;
width: 100%;
margin-bottom: 2rem;
}
.org {
img {
width: 100%;
height: 28rem;
}
}
}
.block {
.inner {
.event {
.right {
.list {
li {
.pic {
width: 100%;
margin-top: 1rem;
height: 22rem;
}
}
}
}
}
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.tab-content {
.survey {
padding: 1.25rem;
width: 100%;
margin-bottom: 2rem;
}
.org {
img { img {
width: 100%; width: 100%;
height: 30rem; height: auto;
}
}
}
.block {
.inner {
.event {
.right {
.list {
li {
.pic {
width: 100%;
margin-top: 1rem;
height: 25rem;
}
}
}
}
}
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.tab-content {
.survey {
padding: 1.25rem;
width: 100%;
margin-bottom: 2rem;
}
.org {
img {
width: 100%;
height: 32rem;
}
}
}
.block {
.inner {
.event {
.right {
.list {
li {
.pic {
width: 100%;
margin-top: 1rem;
height: 27rem;
}
}
}
}
} }
} }
} }

28
src/pages/estate/survey/index.vue
Unescape View File

@ -61,24 +61,6 @@ 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';
.tabs {
display: flex;
justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
li {
padding: 25px 19px;
margin: 0 10px;
font-size: 1.1rem;
color: #333;
border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer;
&.active {
color: #1583ff;
border-bottom-color: #1583ff;
}
}
}
.tab-content { .tab-content {
padding-top: 70px; padding-top: 70px;
} }
@ -113,16 +95,6 @@ export default {
width: 40%; width: 40%;
} }
@media (max-width: 1300px) { @media (max-width: 1300px) {
.tabs {
overflow: hidden;
overflow-x: auto;
white-space: normal;
justify-content: normal;
display: -webkit-box;
li {
white-space: normal;
}
}
.tab-content { .tab-content {
padding: 20px 0; padding: 20px 0;
} }

1
src/pages/lightSources/index.vue
Unescape View File

@ -1,4 +1,5 @@
<template> <template>
<!-- 全球先进光源 -->
<div class="wrap"> <div class="wrap">
<div class="single-banner"> <div class="single-banner">
<img class="banner-img" <img class="banner-img"

273
src/pages/mission/index.vue
Unescape View File

@ -1,7 +1,10 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<!-- 关于IASF-使命愿景价值观 -->
<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>
</div> </div>
@ -9,28 +12,28 @@
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<div <div class="item wow bounceInLeft"
class="item wow bounceInLeft" data-wow-delay="0.5s"
data-wow-delay="0.5s" :class="{ 'cursor-pointer': isLink(modules[1].form.link.linkName) }"
:class="{ 'cursor-pointer': isLink(modules[1].form.link.linkName) }" @click="openLink(modules[1].form)">
@click="openLink(modules[1].form)" <img src="http://10.10.11.7/images/mission/2.png"
> alt="" />
<img src="http://10.10.11.7/images/mission/2.png" alt="" />
<div class="texts"> <div class="texts">
<h6>{{ modules[1].form.title }}</h6> <h6>{{ modules[1].form.title }}</h6>
<div class="des" v-html="modules[1].form.des"></div> <div class="des"
v-html="modules[1].form.des"></div>
</div> </div>
</div> </div>
<div <div class="item wow bounceInRight"
class="item wow bounceInRight" data-wow-delay="0.8s"
data-wow-delay="0.8s" :class="{ 'cursor-pointer': isLink(modules[2].form.link.linkName) }"
:class="{ 'cursor-pointer': isLink(modules[2].form.link.linkName) }" @click="openLink(modules[2].form)">
@click="openLink(modules[2].form)" <img src="http://10.10.11.7/images/mission/3.png"
> alt="" />
<img src="http://10.10.11.7/images/mission/3.png" alt="" />
<div class="texts rightText"> <div class="texts rightText">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="des" v-html="modules[2].form.des"></div> <div class="des"
v-html="modules[2].form.des"></div>
</div> </div>
</div> </div>
</div> </div>
@ -41,11 +44,17 @@
<h6 class="m-title">{{ modules[3].form.title }}</h6> <h6 class="m-title">{{ modules[3].form.title }}</h6>
<ul class="list"> <ul class="list">
<template v-for="(item, i) in modules[4].list"> <template v-for="(item, i) in modules[4].list">
<li v-if="item.isEnable" :key="i" :class="[{'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)"> <li v-if="item.isEnable"
<img :src="item.pic" alt="" class="pic"> :key="i"
:class="[{'cursor-pointer': isLink(item.link.linkName)}]"
@click="openLink(item)">
<img :src="item.pic"
alt=""
class="pic">
<div class="texts"> <div class="texts">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
<div class="des" v-html="item.des"></div> <div class="des"
v-html="item.des"></div>
</div> </div>
</li> </li>
</template> </template>
@ -62,17 +71,17 @@ 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.$post(
`${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}` `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
@ -84,14 +93,14 @@ export default {
this.preview this.preview
? data ? data
: data[data.length - 1][ : data[data.length - 1][
data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing" data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
] ]
); );
this.modules = json; this.modules = json;
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json); console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
} }
}) })
.catch((err) => {}); .catch((err) => { });
}, },
}, },
}; };
@ -99,133 +108,133 @@ 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';
.inner { .inner {
width: 1200px; width: 1200px;
} }
.item { .item {
position: relative; position: relative;
margin-bottom: 58px; margin-bottom: 58px;
&:hover { &:hover {
.texts { .texts {
color: #fff; color: #fff;
transform: scale(1.05); transform: scale(1.05);
background: #32b6e9 !important; background: #32b6e9 !important;
}
} }
} img {
img { width: 90%;
width: 90%; height: 400px;
height: 400px;
}
&:nth-child(2) .texts {
left: auto;
right: 0;
color: #fff;
background: rgba(40,179,255,0.34);
}
.texts {
position: absolute;
top: 79px;
left: -28px;
width: 532px;
padding: 70px 38px;
color: #333;
background: rgba(255, 241, 231, 0.84);
transition: 0.5s;
}
h6 {
margin-bottom: 14px;
font-size: 2rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
}
.des {
font-size: 1rem;
}
}
.mind {
.m-title {
margin-bottom: 30px;
font-size: 2.2rem;
text-align: center;
color: #333;
}
.list {
display: flex;
flex-wrap: wrap;
}
li {
display: inline-flex;
align-items: center;
width: calc((100% - 22px) / 2);
margin: 0 22px 22px 0;
background-color: #fff;
&:nth-child(even) {
margin-right: 0;
} }
.pic { &:nth-child(2) .texts {
width: 250px; left: auto;
height: 230px; right: 0;
color: #fff;
background: rgba(40, 179, 255, 0.34);
} }
.texts { .texts {
width: calc(100% - 250px); position: absolute;
padding: 0 20px; top: 79px;
left: -28px;
width: 532px;
padding: 70px 38px;
color: #333;
background: rgba(255, 241, 231, 0.84);
transition: 0.5s;
} }
h6 { h6 {
margin-bottom: 1rem; margin-bottom: 14px;
font-size: 1.3rem; font-size: 2rem;
color: #272727; font-family: PingFangSC-Medium, PingFang SC;
@include ellipsis(); font-weight: 500;
} }
.des { .des {
font-size: 1rem; font-size: 1rem;
color: #666;
line-height: 1.5;
} }
}
} }
@media (max-width: 1200px) { .mind {
.inner { .m-title {
width: 98%; margin-bottom: 30px;
} font-size: 2.2rem;
.item { text-align: center;
img { color: #333;
margin-left: 30px;
} }
.rightText { .list {
right: 12px !important; display: flex;
flex-wrap: wrap;
} }
.texts { li {
width: 85%; display: inline-flex;
box-sizing: border-box; align-items: center;
left: 12px; width: calc((100% - 22px) / 2);
.des{ margin: 0 22px 22px 0;
-webkit-line-clamp: inherit background-color: #fff;
} &:nth-child(even) {
margin-right: 0;
}
.pic {
width: 250px;
height: 230px;
}
.texts {
width: calc(100% - 250px);
padding: 0 20px;
}
h6 {
margin-bottom: 1rem;
font-size: 1.3rem;
color: #272727;
@include ellipsis();
}
.des {
font-size: 1rem;
color: #666;
line-height: 1.5;
}
} }
}
} }
@media (max-width: 980px) { @media (max-width: 1200px) {
.mind { .inner {
.list { width: 98%;
flex-direction: column;
} }
li { .item {
width: 100%; img {
margin-left: 30px;
}
.rightText {
right: 12px !important;
}
.texts {
width: 85%;
box-sizing: border-box;
left: 12px;
.des {
-webkit-line-clamp: inherit;
}
}
}
}
@media (max-width: 980px) {
.mind {
.list {
flex-direction: column;
}
li {
width: 100%;
}
} }
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.mind { .mind {
li { li {
.pic { .pic {
width: 150px; width: 150px;
height: 130px; height: 130px;
} }
.texts { .texts {
width: calc(100% - 150px); width: calc(100% - 150px);
} }
}
} }
}
} }
</style> </style>

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

@ -1,5 +1,6 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<!-- 院长致辞 -->
<div class="single-banner"> <div class="single-banner">
<img class="banner-img" <img class="banner-img"
:src="modules[0].form.pic" :src="modules[0].form.pic"
@ -11,20 +12,17 @@
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<img src="http://10.10.11.7/images/speech/3.png" <img :src="modules[1].form.pic"
alt="" alt=""
class="pic"> class="pic">
<div class="texts"> <div class="texts">
<h6>院长致辞</h6> <h6>{{ modules[1].form.title }}</h6>
<p class="en">President Speech</p> <p class="en">{{ modules[1].form.subTitle }}</p>
<div class="text">各位朋友： <div class="text"
加快实现高水平科技自立自强，是推动高质量发展的必由之路。当前，粤港澳大湾区正朝着建成具有全球影响力的科技和产业创新高地这一宏伟蓝图奋力前进。而在大科学时代，我们实现科学技术的前沿突破，在产业发展上取得颠覆式创新和持续性创新，从根本上解决气候变暖、重大疾病挑等人类可持续发展问题上，越来越离不开大科学装置的支持。 v-html="modules[1].form.des"></div>
建设综合粒子设施，是深圳推进粤港澳大湾区、深圳先行示范区建设重大战略落地实施，以主阵地作为推进大湾区综合性国家科学中心建设的重要决策部署。项目的建成，不仅将成为支撑大湾区集成电路、生物医药、先进制造、新材料、新能源等众多产业领域创新发展的先进工具和强大平台，也将是面向国家重大需求和国际科学前沿，突破产业技术瓶颈、解决其相关根源性科学问题的大国重器。
综合粒子设施一期项目包括深圳产业光源和深圳自由电子激光，自2021年初深圳综合粒子设施研究院筹备建立以来，我们的首要任务便是全力推进两个项目的设计、立项、关键技术突破、核心设备研制等前期准备工作，为接下来工程建设及建成运行打下坚实基础。
面对重重挑战，我们坚信没有一座高山不可逾越。我们将牢记深圳市委市政府设立研究院的初心和期望，传承改革开放杀出一条血路的魄力，万众一心，迎难而上，不负众望建设好综合粒子设施，为全体深圳人民及合作伙伴交上一份优质答卷；我们将秉持开放合作的建设理念，面向国内外创新资源敞开共建、共享、共赢的合作大门，携手大湾区创新资源共同建设世界一流大科学装置；我们将坚持需求牵引的宗旨，探索在地方政府主导下，研究机构、高校、企业、金融机构共建重大科技基础设施的新途径，为粤港澳大湾区建设国际科技创新中心提供坚实支撑；我们还将进一步加强与港澳的创新融合，让科学进步之光，照亮大湾区高质量发展之路，点亮东方之珠璀璨的明天。</div>
<div class="sign"> <div class="sign">
签名： 签名：
<img src="http://10.10.11.7/images/speech/3.png" <img :src="modules[2].form.pic"
alt=""> alt="">
</div> </div>
</div> </div>

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

@ -1,4 +1,5 @@
<template> <template>
<!-- 人才中心 -->
<div class="wrap"> <div class="wrap">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" <img class="banner-img"
@ -15,30 +16,34 @@
<div class="talent-text" <div class="talent-text"
v-html="modules[1].form.des"></div> v-html="modules[1].form.des"></div>
<ul class="people"> <ul class="people">
<li :class="{ 'cursor-pointer': isLink(modules[8].form.link.linkName) }" <li>
@click="openLink(modules[8].form)">
<img class="pic" <img class="pic"
:src="modules[8].form.pic" :src="modules[2].form.pic"
alt=""> alt="">
<div class="texts"> <div class="texts">
<h6>{{ modules[8].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="line"></div> <div class="line"></div>
<div class="text">提供文字不超过两行，提供文字不超过两行提供文字不超过两行提供文字不超过两行提供文字不文字不超过两</div> <div class="text"
<img src="@/assets/images/arrow.png" v-html="modules[2].form.des"></div>
alt=""> <img v-if="isLink(modules[2].form.link.linkName)"
src="@/assets/images/arrow.png"
alt=""
@click="openLink(modules[2].form)">
</div> </div>
</li> </li>
<li :class="{ 'cursor-pointer': isLink(modules[8].form.link.linkName) }" <li>
@click="openLink(modules[8].form)">
<img class="pic" <img class="pic"
:src="modules[8].form.pic" :src="modules[3].form.pic"
alt=""> alt="">
<div class="texts"> <div class="texts">
<h6>{{ modules[8].form.title }}</h6> <h6>{{ modules[3].form.title }}</h6>
<div class="line"></div> <div class="line"></div>
<div class="text">提供文字不超过两行，提供文字不超过两行提供文字不超过两行提供文字不超过两行提供文字不文字不超过两</div> <div class="text"
<img src="@/assets/images/arrow.png" v-html="modules[3].form.des"></div>
alt=""> <img v-if="isLink(modules[3].form.link.linkName)"
src="@/assets/images/arrow.png"
alt=""
@click="openLink(modules[3].form)">
</div> </div>
</li> </li>
</ul> </ul>

185
src/styles/common.scss
Unescape View File

@ -1,124 +1,137 @@
@import "./default/index.scss"; @import './default/index.scss';
@import "./var.scss"; @import './var.scss';
@font-face { @font-face {
font-family: PingFang; font-family: PingFang;
src: url('font/PingFang-Regular.otf'); src: url('font/PingFang-Regular.otf');
} }
@font-face { @font-face {
font-family: PingFangSC-Medium; font-family: PingFangSC-Medium;
src: url('font/PingFangSC-Medium.otf'); src: url('font/PingFangSC-Medium.otf');
} }
@font-face { @font-face {
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
src: url('font/PingFangTC-Semibold.ttf'); src: url('font/PingFangTC-Semibold.ttf');
} }
@font-face { @font-face {
font-family: SFProDisplay-Bold; font-family: SFProDisplay-Bold;
src: url('font/SF-Pro-Display-Bold.otf'); src: url('font/SF-Pro-Display-Bold.otf');
} }
@font-face { @font-face {
font-family: SFProDisplay; font-family: SFProDisplay;
src: url('font/SF-Pro-Display-Regular.otf'); src: url('font/SF-Pro-Display-Regular.otf');
} }
@font-face { @font-face {
font-family: toppan; font-family: toppan;
src: url('font/toppan.otf'); src: url('font/toppan.otf');
} }
@font-face { @font-face {
font-family: ProximaNova; font-family: ProximaNova;
src: url('font/ProximaNova-Regular.otf'); src: url('font/ProximaNova-Regular.otf');
} }
[v-cloak] { [v-cloak] {
display: none; display: none;
} }
.site-en { .site-en {
font-family: SFProDisplay; font-family: SFProDisplay;
} }
.flex-between { .flex-between {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
height: 8px; height: 8px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
width: 5px; width: 5px;
border-radius: 6px; border-radius: 6px;
background: #d7d7d7; background: #d7d7d7;
} }
.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;
} }
.content { .content {
width: 1512px; width: 1512px;
padding: 40px 0; padding: 40px 0;
margin: 0 auto; margin: 0 auto;
} }
} }
.l-title { .l-title {
position: relative; position: relative;
padding-bottom: 20px; padding-bottom: 20px;
font-size: 18px; font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
color: #000; color: #000;
line-height: 25px; line-height: 1.6;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 30px; width: 30px;
height: 2px; height: 2px;
background-color: #156CEB; background-color: #156ceb;
} }
} }
.pagination { .pagination {
margin: 20px 0; margin: 20px 0;
text-align: center; text-align: center;
button, .number { button,
color: rgba(0, 0, 0, .65) !important; .number {
background-color: transparent !important; color: rgba(0, 0, 0, 0.65) !important;
border: 1px solid #DCDEE0 !important; background-color: transparent !important;
border-radius: 4px !important; border: 1px solid #dcdee0 !important;
} border-radius: 4px !important;
}
button i { button i {
color: #333; color: #333;
} }
.active { .active {
color: #fff !important; color: #fff !important;
background-color: $--color-primary !important; background-color: $--color-primary !important;
} }
} }
.el-menu--popup { .el-menu--popup {
min-width: 128px; min-width: 128px;
margin-top: 0; margin-top: 0;
text-align: center; text-align: center;
.el-submenu__title, .el-menu-item, .menu-child { .el-submenu__title,
width: 220px !important; .el-menu-item,
min-width: 0; .menu-child {
} width: 220px !important;
span { min-width: 0;
font-size: 13px; }
color: #333; span {
} font-size: 0.8rem;
.active > .el-submenu__title span, .active > span { color: #333;
color: #1583FF; }
} .active > .el-submenu__title span,
.active > span {
color: #1583ff;
}
} }
.home-menu-popup { .home-menu-popup {
.el-menu { .el-menu {
background-color: #fff !important; background-color: #fff !important;
} }
} }
.party {
.l-title:after {
background-color: $partyTheme;
}
.list .text:hover {
color: $partyTheme !important;
}
}

28
src/styles/page/page.scss
Unescape View File

@ -212,7 +212,7 @@
} }
} }
} }
@media (min-width: 375px) and (max-width: 480px) { @media (max-width: 480px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
@ -225,29 +225,3 @@
} }
} }
} }
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
.single-banner {
.banner-img {
height: 13rem;
}
.texts {
top: 6rem;
left: 5rem;
}
}
}
}
@media (max-width: 320px) {
.wrap {
.single-banner {
.banner-img {
height: 13rem;
}
.texts {
top: 6rem;
left: 5rem;
}
}
}
}

28
src/styles/var.scss
Unescape View File

@ -1,29 +1,31 @@
$main-color: #1583FF; $main-color: #1583ff;
$max-width: 1440px; $max-width: 1440px;
$min-width: 1280px; $min-width: 1280px;
$partyTheme: #d12323;
$lightPartyTheme: #fdf3f3;
@mixin ellipsis { @mixin ellipsis {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
@mixin mul-ellipsis($num) { @mixin mul-ellipsis($num) {
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: $num; -webkit-line-clamp: $num;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.ellipsis { .ellipsis {
@include ellipsis(); @include ellipsis();
} }
.mul-ellipsis2 { .mul-ellipsis2 {
@include mul-ellipsis(2); @include mul-ellipsis(2);
} }
.mul-ellipsis3 { .mul-ellipsis3 {
@include mul-ellipsis(3); @include mul-ellipsis(3);
} }

Write Preview
Loading…
Cancel
Save