yujialong 2 years ago
parent 640f460295
commit f89cc9b2a9
  1. 12
      src/components/rightColumns/index.vue
  2. 502
      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. 45
      src/pages/mission/index.vue
  9. 16
      src/pages/speech/index.vue
  10. 33
      src/pages/talentCentre/index.vue
  11. 37
      src/styles/common.scss
  12. 28
      src/styles/page/page.scss
  13. 4
      src/styles/var.scss

@ -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%;

@ -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,40 +779,18 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap {
.banner { .banner {
height: 24rem;
position: relative; position: relative;
height: 24rem;
color: #fff;
img { img {
height: 24rem; height: 24rem;
} }
.texts { .texts {
position: absolute; position: absolute;
bottom: 87px; bottom: 87px;
top: auto;
left: 213px; left: 213px;
} }
}
}
.el-tree-node__content {
padding-left: 10px !important;
}
.l-title {
font-weight: 600;
font-size: 1.024rem;
}
.banner {
position: relative;
height: 14rem;
color: #fff;
.texts {
position: absolute;
top: 6.15rem;
left: 12.15rem;
}
.text { .text {
font-size: 2.16rem; font-size: 2.16rem;
@ -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%;
}
}
}
.article-wrap {
width: 90%;
margin: 0 auto;
.articles {
li {
.pic {
margin-top: 20px;
}
} }
} }
.is-current > .el-tree-node__content {
background-color: $lightPartyTheme;
&:after {
background-color: $partyTheme;
} }
.right { .el-tree-node__label,
width: 95%; .custom-tree-node {
margin: 20px auto; color: $partyTheme;
} }
} }
.banner {
.texts {
left: 50px;
top: 110px;
}
} }
.column-wrap {
.article { .article {
flex-direction: column; .readDetailBtn {
background-color: $partyTheme;
.left { border-color: $partyTheme;
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;
}
}
}
}
} }
} }
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: $partyTheme !important;
} }
} }
@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;
}
}
} }
.column-wrap {
.article {
flex-direction: column;
.left { .left {
width: 100%; width: 100%;
.contents { .forms {
.articles {
li:not(.news-notice) {
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center;
.pic { .item,
width: 95%; .search {
margin: 0 auto; margin: 20px 0 0 0;
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;
.leftBox {
padding-left: 0;
.titleDes {
line-height: 1.368rem;
}
}
}
}
}
} }
.forms {
.switch { div {
width: 100%; 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 {
.pic {
height: auto !important;
}
.otherData {
margin-top: 1rem;
.leftBox {
padding-left: 0;
.titleDes {
line-height: 1.368rem;
}
}
}
}
}
}
.forms {
.switch {
width: 100%;
flex-direction: column;
margin-right: 0;
li {
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
margin-top: 10px;
}
}
}
}
@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 { .articles {
.pic { li {
height: auto !important; flex-direction: column;
} align-items: flex-start;
.otherData { padding: 1rem;
margin-top: 1rem; margin-top: 1rem;
.leftBox { .pic {
padding-left: 0;
.titleDes {
line-height: 1.368rem;
}
}
}
}
}
}
.forms {
.switch {
width: 100%; width: 100%;
flex-direction: column; margin: 10px 0;
margin-right: 0;
li {
width: 90%;
margin: 0 auto;
margin-top: 10px;
}
}
} }
} }
@media (min-width: 480px) and (max-width: 640px) { .readDetail {
.banner {
height: 12rem !important;
img {
height: 12rem !important;
}
.texts { .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; padding-left: 0;
.titleDes {
line-height: 1.368rem;
}
} }
} }
} }
}
} .right {
.forms { width: 95%;
.switch { margin: 20px auto;
width: 100%;
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,112 +1284,18 @@ export default {
} }
} }
} }
.article {
.contents { .contents {
.article-wrap {
.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;
}
}
} }
.contents { .columns,
.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%;
height: auto;
}
}
}
.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 { .leftBox {
padding-left: 0; padding-left: 0;
.titleDes { .titleDes {
@ -1668,7 +1305,6 @@ export default {
} }
} }
} }
}
.forms { .forms {
.switch { .switch {
width: 100%; width: 100%;
@ -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>

@ -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>

@ -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>

@ -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,39 +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 {
padding: 20px 0;
.org {
width: 100%;
padding: 15px;
flex-direction: column;
.left {
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 { .tab-content {
padding: 20px 0; padding: 20px 0;
.org { .org {
@ -160,262 +109,7 @@ export default {
} }
img { img {
width: 100%; width: 100%;
} height: auto;
}
}
.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 {
width: 100%;
height: 30rem;
}
}
}
.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;
}
}
}
}
} }
} }
} }

@ -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,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"

@ -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"
<img src="http://10.10.11.7/images/mission/2.png" alt="" /> 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"
<img src="http://10.10.11.7/images/mission/3.png" alt="" /> 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>
@ -99,7 +108,7 @@ 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;
} }
@ -200,7 +209,7 @@ export default {
box-sizing: border-box; box-sizing: border-box;
left: 12px; left: 12px;
.des { .des {
-webkit-line-clamp: inherit -webkit-line-clamp: inherit;
} }
} }
} }

@ -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>

@ -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>

@ -1,5 +1,5 @@
@import "./default/index.scss"; @import './default/index.scss';
@import "./var.scss"; @import './var.scss';
@font-face { @font-face {
font-family: PingFang; font-family: PingFang;
@ -66,10 +66,10 @@
.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: '';
@ -78,17 +78,18 @@
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 {
color: rgba(0, 0, 0, 0.65) !important;
background-color: transparent !important; background-color: transparent !important;
border: 1px solid #DCDEE0 !important; border: 1px solid #dcdee0 !important;
border-radius: 4px !important; border-radius: 4px !important;
} }
@ -105,16 +106,19 @@
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,
.el-menu-item,
.menu-child {
width: 220px !important; width: 220px !important;
min-width: 0; min-width: 0;
} }
span { span {
font-size: 13px; font-size: 0.8rem;
color: #333; color: #333;
} }
.active > .el-submenu__title span, .active > span { .active > .el-submenu__title span,
color: #1583FF; .active > span {
color: #1583ff;
} }
} }
.home-menu-popup { .home-menu-popup {
@ -122,3 +126,12 @@
background-color: #fff !important; background-color: #fff !important;
} }
} }
.party {
.l-title:after {
background-color: $partyTheme;
}
.list .text:hover {
color: $partyTheme !important;
}
}

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

@ -1,6 +1,8 @@
$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;

Loading…
Cancel
Save