@ -15,48 +15,57 @@
< div class = "modules" > < div class = "modules" >
< div class = "relative" > < div class = "relative" >
< div class = "iasf-banner" > < el -carousel height = "500px"
< img :src ="modules[0].form.pic" : indicator - position = "modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'" >
alt = "" / > < template v-for ="(item, i) in modules[0].list" >
< div class = "texts" > < el -carousel -item v -if = " item.pic & & item.isEnable "
< h6 > { { modules [ 0 ] . form . title } } < / h6 > : key = "i" >
< p class = "text" > { { modules [ 0 ] . form . des } } < / p > < img width = "100%"
< / div > height = "100%"
< / div > : src = "item.pic"
alt = "" >
< / e l - c a r o u s e l - i t e m >
< / template >
< / e l - c a r o u s e l >
< div class = "cover" < div class = "cover"
@ click = "toSet(0)" > 点击更换banner与链接 < / div > @ click = "toSet(0)" > 点击更换banner与链接 < / div >
< / div > < / div >
< div class = "block" > < div class = "block" >
< div class = "inner" > < div class = "inner" >
< div class = "c-wrap" >
< h2 class = "b-title news-title" > { { modules [ 1 ] . form . title } } < / h2 >
< p class = "intro wow fadeInUp"
data - wow - delay = "0.5s" > { { modules [ 1 ] . form . des } } < / p >
< div class = "cover"
@ click = "toSet(1)" > 点击更换标题与描述 < / div >
< / div >
< ul class = "card" > < ul class = "card" >
< li class = "wow fadeInDown" < li class = "wow fadeInDown"
data - wow - delay = "0.2s" > data - wow - delay = "0.2s" >
< img class = "pic" < img class = "pic"
: src = "modules[1].form.pic" : src = "modules[2 ].form.pic"
alt = "" > alt = "" >
< div class = "texts" > < div class = "texts" >
< h6 > { { modules [ 1 ] . form . title } } < / h6 > < div class = "name" > SILF < / div >
< p class = "des" > { { modules [ 1 ] . form . des } } < / p > < h6 > { { modules [ 2 ] . form . title } } < / h6 >
< img src = "@/assets/images/arrow.png" < p class = "des" > { { modules [ 2 ] . form . des } } < / p >
alt = "" >
< / div > < / div >
< div class = "cover" < div class = "cover"
@ click = "toSet(1 )" > 点击更换图片 、 标题 、 概述与链接 < / div > @ click = "toSet(2 )" > 点击更换图片 、 标题 、 概述与链接 < / div >
< / li > < / li >
< li class = "wow fadeInDown" < li class = "wow fadeInDown"
data - wow - delay = "0.6s" > data - wow - delay = "0.6s" >
< img class = "pic" < img class = "pic"
: src = "modules[2 ].form.pic" : src = "modules[3 ].form.pic"
alt = "" > alt = "" >
< div class = "texts" > < div class = "texts" >
< h6 > { { modules [ 2 ] . form . title } } < / h6 > < div class = "name" > S³FEL < / div >
< p class = "des" > { { modules [ 2 ] . form . des } } < / p > < h6 > { { modules [ 3 ] . form . title } } < / h6 >
< img src = "@/assets/images/arrow.png" < p class = "des" > { { modules [ 3 ] . form . des } } < / p >
alt = "" >
< / div > < / div >
< div class = "cover" < div class = "cover"
@ click = "toSet(2 )" > 点击更换图片 、 标题 、 概述与链接 < / div > @ click = "toSet(3 )" > 点击更换图片 、 标题 、 概述与链接 < / div >
< / li > < / li >
< / ul > < / ul >
< / div > < / div >
@ -65,9 +74,11 @@
< div class = "block" > < div class = "block" >
< div class = "inner" > < div class = "inner" >
< div class = "c-wrap" > < div class = "c-wrap" >
< h2 class = "b-title news-title" > { { modules [ 3 ] . form . title } } < / h2 > < h2 class = "b-title news-title" > { { modules [ 4 ] . form . title } } < / h2 >
< p class = "intro wow fadeInUp"
data - wow - delay = "0.5s" > { { modules [ 4 ] . form . des } } < / p >
< div class = "cover" < div class = "cover"
@ click = "toSet(3)" > 点击更换标题与描述 < / div > @ click = "toSet(4 )" > 点击更换标题与描述 < / div >
< / div > < / div >
< div class = "c-wrap" > < div class = "c-wrap" >
< div class = "news-banner" > < div class = "news-banner" >
@ -122,7 +133,7 @@
< / li > < / li >
< / ul > < / ul >
< div class = "cover" < div class = "cover"
@ click = "toSet(4 )" > 关联栏目 < / div > @ click = "toSet(5 )" > 关联栏目 < / div >
< / div > < / div >
< ul class = "news-carousel" > < ul class = "news-carousel" >
@ -137,7 +148,7 @@
< p class = "date" > 2022 - 07 - 24 < / p > < p class = "date" > 2022 - 07 - 24 < / p >
< / div > < / div >
< div class = "cover" < div class = "cover"
@ click = "toSet(5 )" > 关联栏目 < / div > @ click = "toSet(6 )" > 关联栏目 < / div >
< / li > < / li >
< li > < li >
< img class = "pic" < img class = "pic"
@ -150,7 +161,7 @@
< p class = "date" > 2022 - 07 - 24 < / p > < p class = "date" > 2022 - 07 - 24 < / p >
< / div > < / div >
< div class = "cover" < div class = "cover"
@ click = "toSet(6 )" > 关联栏目 < / div > @ click = "toSet(7 )" > 关联栏目 < / div >
< / li > < / li >
< li > < li >
< img class = "pic" < img class = "pic"
@ -163,7 +174,7 @@
< p class = "date" > 2022 - 07 - 24 < / p > < p class = "date" > 2022 - 07 - 24 < / p >
< / div > < / div >
< div class = "cover" < div class = "cover"
@ click = "toSet(7 )" > 关联栏目 < / div > @ click = "toSet(8 )" > 关联栏目 < / div >
< / li > < / li >
< / ul > < / ul >
< / div > < / div >
@ -172,11 +183,11 @@
< div class = "block" > < div class = "block" >
< div class = "inner" > < div class = "inner" >
< div class = "c-wrap" > < div class = "c-wrap" >
< h2 class = "b-title wow fadeInUp" > { { modules [ 8 ] . form . title } } < / h2 > < h2 class = "b-title wow fadeInUp" > { { modules [ 9 ] . form . title } } < / h2 >
< p class = "intro wow fadeInUp" < p class = "intro wow fadeInUp"
data - wow - delay = "0.5s" > { { modules [ 8 ] . form . des } } < / p > data - wow - delay = "0.5s" > { { modules [ 9 ] . form . des } } < / p >
< div class = "cover" < div class = "cover"
@ click = "toSet(8 )" > 点击更换标题与描述 < / div > @ click = "toSet(9 )" > 点击更换标题与描述 < / div >
< / div > < / div >
< ul class = "people" > < ul class = "people" >
< li class = "wow fadeInDown" > < li class = "wow fadeInDown" >
@ -213,7 +224,7 @@
< / div > < / div >
< / li > < / li >
< div class = "cover" < div class = "cover"
@ click = "toSet(9 )" > 关联栏目 < / div > @ click = "toSet(10 )" > 关联栏目 < / div >
< / ul > < / ul >
< / div > < / div >
< / div > < / div >
@ -221,25 +232,25 @@
< div class = "block" > < div class = "block" >
< div class = "inner" > < div class = "inner" >
< div class = "c-wrap" > < div class = "c-wrap" >
< h2 class = "b-title wow fadeInUp" > { { modules [ 10 ] . form . title } } < / h2 > < h2 class = "b-title wow fadeInUp" > { { modules [ 11 ] . form . title } } < / h2 >
< p class = "intro wow fadeInUp" < p class = "intro wow fadeInUp"
data - wow - delay = "0.5s" > { { modules [ 10 ] . form . des } } < / p > data - wow - delay = "0.5s" > { { modules [ 11 ] . form . des } } < / p >
< div class = "cover" < div class = "cover"
@ click = "toSet(10 )" > 点击更换标题与描述 < / div > @ click = "toSet(11 )" > 点击更换标题与描述 < / div >
< / div > < / div >
< div class = "talent" > < div class = "talent" >
< div class = "left wow fadeInLeft" < div class = "left wow fadeInLeft"
data - wow - delay = "0.5s" > data - wow - delay = "0.5s" >
< h6 > { { modules [ 11 ] . form . title } } < / h6 > < h6 > { { modules [ 12 ] . form . title } } < / h6 >
< p class = "meta" > { { modules [ 11 ] . form . subTitle } } < / p > < p class = "meta" > { { modules [ 12 ] . form . subTitle } } < / p >
< div class = "text" < div class = "text"
v - html = "modules[11 ].form.des" > < / div > v - html = "modules[12 ].form.des" > < / div >
< / div > < / div >
< img :src ="modules[11].form.pic" < img :src ="modules[11].form.pic"
alt = "" alt = ""
class = "pic" > class = "pic" >
< div class = "cover" < div class = "cover"
@ click = "toSet(11 )" > 点击更换标题 、 描述 、 链接与图片 < / div > @ click = "toSet(12 )" > 点击更换标题 、 描述 、 链接与图片 < / div >
< / div > < / div >
< / div > < / div >
< / div > < / div >
@ -247,17 +258,17 @@
< div class = "about" > < div class = "about" >
< div class = "inner c-wrap" > < div class = "inner c-wrap" >
< div class = "left" > < div class = "left" >
< h6 > { { modules [ 12 ] . form . title } } < / h6 > < h6 > { { modules [ 13 ] . form . title } } < / h6 >
< div class = "text" < div class = "text"
v - html = "modules[12 ].form.des" > < / div > v - html = "modules[13 ].form.des" > < / div >
< img src = "@/assets/images/arrow-white.png" < img src = "@/assets/images/arrow-white.png"
alt = "" > alt = "" >
< / div > < / div >
< img class = "pic" < img class = "pic"
: src = "modules[12 ].form.pic" : src = "modules[13 ].form.pic"
alt = "" > alt = "" >
< div class = "cover" < div class = "cover"
@ click = "toSet(12 )" > 点击更换标题 、 描述 、 链接与图片 < / div > @ click = "toSet(13 )" > 点击更换标题 、 描述 、 链接与图片 < / div >
< / div > < / div >
< / div > < / div >
@ -265,21 +276,13 @@
style = "margin-top: 100px" > style = "margin-top: 100px" >
< div class = "inner" > < div class = "inner" >
< ul class = "entry" > < ul class = "entry" >
< li >
< img class = "icon"
: src = "modules[13].form.pic"
alt = "" >
< p class = "text" > { { modules [ 13 ] . form . title } } < / p >
< div class = "cover"
@ click = "toSet(13)" > 点击更换图标 、 标题与链接 < / div >
< / li >
< li > < li >
< img class = "icon" < img class = "icon"
: src = "modules[14].form.pic" : src = "modules[14].form.pic"
alt = "" > alt = "" >
< p class = "text" > { { modules [ 14 ] . form . title } } < / p > < p class = "text" > { { modules [ 14 ] . form . title } } < / p >
< div class = "cover" < div class = "cover"
@ click = "toSet(14)" > 点击更换图标 、 标题与链接 < / div > @ click = "toSet(14)" > 点击更换 < / div >
< / li > < / li >
< li > < li >
< img class = "icon" < img class = "icon"
@ -287,7 +290,7 @@
alt = "" > alt = "" >
< p class = "text" > { { modules [ 15 ] . form . title } } < / p > < p class = "text" > { { modules [ 15 ] . form . title } } < / p >
< div class = "cover" < div class = "cover"
@ click = "toSet(15)" > 点击更换图标 、 标题与链接 < / div > @ click = "toSet(15)" > 点击更换 < / div >
< / li > < / li >
< li > < li >
< img class = "icon" < img class = "icon"
@ -295,7 +298,7 @@
alt = "" > alt = "" >
< p class = "text" > { { modules [ 16 ] . form . title } } < / p > < p class = "text" > { { modules [ 16 ] . form . title } } < / p >
< div class = "cover" < div class = "cover"
@ click = "toSet(16)" > 点击更换图标 、 标题与链接 < / div > @ click = "toSet(16)" > 点击更换 < / div >
< / li > < / li >
< li > < li >
< img class = "icon" < img class = "icon"
@ -303,7 +306,15 @@
alt = "" > alt = "" >
< p class = "text" > { { modules [ 17 ] . form . title } } < / p > < p class = "text" > { { modules [ 17 ] . form . title } } < / p >
< div class = "cover" < div class = "cover"
@ click = "toSet(17)" > 点击更换图标 、 标题与链接 < / div > @ click = "toSet(17)" > 点击更换 < / div >
< / li >
< li >
< img class = "icon"
: src = "modules[18].form.pic"
alt = "" >
< p class = "text" > { { modules [ 18 ] . form . title } } < / p >
< div class = "cover"
@ click = "toSet(18)" > 点击更换 < / div >
< / li > < / li >
< / ul > < / ul >
< / div > < / div >
@ -316,7 +327,7 @@
@ moduleSubmit = "moduleSubmit" / > @ moduleSubmit = "moduleSubmit" / >
< ul class = "tools" > < ul class = "tools" >
< li v -for = " ( item , i ) in modules [ 18 ] .list " < li v -for = " ( item , i ) in modules [ 19 ] .list "
: key = "i" > : key = "i" >
< img : src = "'http://10.10.11.7/images/iasf/icon' + (i < 4 ? i + 1 : 1) + '.png'" < img : src = "'http://10.10.11.7/images/iasf/icon' + (i < 4 ? i + 1 : 1) + '.png'"
alt = "" alt = ""
@ -324,7 +335,7 @@
{ { item . title } } { { item . title } }
< / li > < / li >
< div class = "cover" < div class = "cover"
@ click = "toSet(18 )" > 点击更换导航 < / div > @ click = "toSet(19 )" > 点击更换导航 < / div >
< / ul > < / ul >
< / div > < / div >
< / template > < / template >
@ -409,9 +420,16 @@ export default {
li { li {
position : relative ; position : relative ;
width : 47 % ; width : 47 % ;
height : 366 px ;
transition : 0.3 s ; transition : 0.3 s ;
overflow : hidden ;
& : hover { & : hover {
margin - top : - 0.9375 rem ; . project {
top : - 100 % ;
}
. texts {
top : 0 ;
}
} }
} }
. pic { . pic {
@ -419,25 +437,33 @@ export default {
height : auto ; height : auto ;
} }
. texts { . texts {
padding - left : 1.375 rem ; position : absolute ;
margin - top : 3 rem ; top : 0 ;
border - left : 2 px solid # dfe4e9 ; left : 0 ;
display : flex ;
justify - content : center ;
flex - direction : column ;
align - items : center ;
width : 100 % ;
height : 100 % ;
padding : 0 1 rem ;
color : # fff ;
background - color : rgba ( 0 , 0 , 0 , 0.3 ) ;
transition : 0.3 s ;
}
. name {
font - size : 2 rem ;
font - family : PingFangSC - Medium , PingFang SC ;
} }
h6 { h6 {
min - height : 4.5 rem ; margin : 1 rem 0 ;
margin - bottom : 1.56 rem ;
line - height : 2 rem ; line - height : 2 rem ;
font - size : 1.368 rem ; font - size : 1.6 rem ;
color : # 333 ; font - family : PingFangSC - Medium , PingFang SC ;
display : - webkit - box ; @ include mul - ellipsis ( 2 ) ;
- webkit - box - orient : vertical ;
- webkit - line - clamp : 2 ;
text - overflow : ellipsis ;
overflow : hidden ;
} }
. des { . des {
font - size : 1.024 rem ; font - size : 1.2 rem ;
color : # 222 ;
line - height : 30 px ; line - height : 30 px ;
} }
} }
@ -609,7 +635,7 @@ export default {
position : relative ; position : relative ;
display : flex ; display : flex ;
color : # fff ; color : # fff ;
background : # 1 a2844 ; background : # 111 c43 ;
border - radius : 0 px 100 px 0 px 100 px ; border - radius : 0 px 100 px 0 px 100 px ;
. left { . left {
width : 50 % ; width : 50 % ;
@ -663,38 +689,20 @@ export default {
} }
. entry { . entry {
display : flex ; display : flex ;
flex - wrap : wrap ; justify - content : space - between ;
padding : 50 px 10 % ;
background - color : # 091733 ;
margin - bottom : 100 px ;
li { li {
position : relative ; position : relative ;
display : inline - flex ; display : inline - flex ;
flex - direction : column ; flex - direction : column ;
justify - content : center ; justify - content : center ;
align - items : center ; align - items : center ;
height : 220 px ;
margin : 0 20 px 20 px 0 ;
text - align : center ; text - align : center ;
& : first - child { }
width : calc ( ( 100 % - 20 px ) / 2 ) ; img {
background - color : rgba ( 201 , 102 , 2 , 0.83 ) ; max - width : 100 px ;
}
& : nth - child ( 2 ) {
width : calc ( ( 100 % - 20 px ) / 2 ) ;
margin - right : 0 ;
background : # 4 fbc72 ;
}
& : nth - child ( 3 ) {
width : calc ( ( 100 % - 40 px ) / 3 ) ;
background - color : rgba ( 237 , 196 , 95 , 0.93 ) ;
}
& : nth - child ( 4 ) {
width : calc ( ( 100 % - 40 px ) / 3 ) ;
background - color : rgba ( 8 , 156 , 218 , 0.73 ) ;
}
& : nth - child ( 5 ) {
width : calc ( ( 100 % - 40 px ) / 3 ) ;
margin - right : 0 ;
background : # 2172 e3 ;
}
} }
. text { . text {
margin - top : 15 px ; margin - top : 15 px ;
@ -733,7 +741,7 @@ export default {
font - size : 1 rem ; font - size : 1 rem ;
color : # 0084 ff ; color : # 0084 ff ;
line - height : 56 px ; line - height : 56 px ;
background - color : rgba ( 255 , 255 , 255 , 0.94 ) ; background - color : rgba ( 19 , 18 , 19 , 0.94 ) ;
cursor : pointer ; cursor : pointer ;
& . active { & . active {
width : 192 px ; width : 192 px ;
