Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
P
project-online-pc
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
EzijingWeb
project-online-pc
Commits
50a6c0d7
提交
50a6c0d7
authored
3月 13, 2023
作者:
王鹏飞
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
chore: 首页改版
上级
2e70eda2
隐藏空白字符变更
内嵌
并排
正在显示
7 个修改的文件
包含
208 行增加
和
304 行删除
+208
-304
base.css
assets/css/base.css
+1
-1
banners.vue
components/home/banners.vue
+6
-2
projectFeatures.vue
components/home/projectFeatures.vue
+37
-159
projectPosition.vue
components/home/projectPosition.vue
+18
-37
videoList.vue
components/home/videoList.vue
+145
-100
Head.vue
components/layout/pc/Head.vue
+0
-2
Menu.vue
components/layout/pc/Menu.vue
+1
-3
没有找到文件。
assets/css/base.css
浏览文件 @
50a6c0d7
...
@@ -22,7 +22,7 @@ body {
...
@@ -22,7 +22,7 @@ body {
'Hiragino Sans GB'
,
'Wenquanyi Micro Hei'
,
sans-serif
;
'Hiragino Sans GB'
,
'Wenquanyi Micro Hei'
,
sans-serif
;
padding
:
0
;
padding
:
0
;
margin
:
0
;
margin
:
0
;
background
:
#
eee
;
background
:
#
f9f8f8
;
}
}
p
{
p
{
margin
:
0
;
margin
:
0
;
...
...
components/home/banners.vue
浏览文件 @
50a6c0d7
<
template
>
<
template
>
<div
:class=
"isMobile ? 'is-h5' : 'is-pc'"
>
<div
:class=
"isMobile ? 'is-h5' : 'is-pc'"
>
<div
class=
"banner-content"
>
<div
class=
"banner-content"
>
<img
class=
"img"
v-if=
"!isMobile"
src=
"https://webapp-pub.ezijing.com/project/sbu-plus/pc-index-banner.png"
/>
<a
href=
"/my"
v-if=
"!isMobile"
>
<img
class=
"img"
src=
"https://webapp-pub.ezijing.com/project/sbu-plus/banner.png"
/></a>
<img
class=
"img"
v-else
src=
"https://webapp-pub.ezijing.com/project/sbu-plus/h5/pc-index-banner1.png"
/>
<img
class=
"img"
v-else
src=
"https://webapp-pub.ezijing.com/project/sbu-plus/h5/pc-index-banner1.png"
/>
<div
class=
"banner_navList"
>
<div
class=
"banner_navList"
v-if=
"false"
>
<div
class=
"banner_nav"
v-for=
"(item, index) in navList"
:key=
"index"
@
click=
"navClick(item)"
>
<div
class=
"banner_nav"
v-for=
"(item, index) in navList"
:key=
"index"
@
click=
"navClick(item)"
>
<div
class=
"nav_top"
>
<div
class=
"nav_top"
>
<img
class=
"nav_img"
:src=
"item.img"
v-if=
"!isMobile"
/>
<img
class=
"nav_img"
:src=
"item.img"
v-if=
"!isMobile"
/>
...
@@ -91,6 +93,8 @@ export default {
...
@@ -91,6 +93,8 @@ export default {
.img
{
.img
{
width
:
100%
;
width
:
100%
;
height
:
100%
;
height
:
100%
;
min-height
:
650px
;
object-fit
:
cover
;
z-index
:
1000
;
z-index
:
1000
;
}
}
.banner_navList
{
.banner_navList
{
...
...
components/home/projectFeatures.vue
浏览文件 @
50a6c0d7
...
@@ -28,86 +28,39 @@ export default {
...
@@ -28,86 +28,39 @@ export default {
return
{
return
{
listData
:
[
listData
:
[
{
{
web_img_uri
:
'https://webapp-pub.ezijing.com/project/sbu-plus/
pc-index-project-intro-0
1.png'
,
web_img_uri
:
'https://webapp-pub.ezijing.com/project/sbu-plus/
feature_
1.png'
,
item_desc_tit
:
'公立常春藤大学'
,
item_desc_tit
:
'公立常春藤大学'
,
item_desc_con
:
'
全球大学排名前1%<br/>2021QS全美排名39<br/>US.NEWS.全美77
'
item_desc_con
:
'
2021QS全美39位<br/>US.NEWS.全美88<br/>世界大学前1%
'
},
},
{
{
web_img_uri
:
'https://webapp-pub.ezijing.com/project/sbu-plus/
pc-index-project-intro-0
2.png'
,
web_img_uri
:
'https://webapp-pub.ezijing.com/project/sbu-plus/
feature_
2.png'
,
item_desc_tit
:
'师资雄厚'
,
item_desc_tit
:
'师资雄厚'
,
item_desc_con
:
'7位诺贝尔奖得主<br/>37位科学院院士<br/>1位图灵奖得主'
item_desc_con
:
'7位诺贝尔奖得主<br/>37位科学院院士<br/>1位图灵奖得主'
},
},
{
{
web_img_uri
:
'https://webapp-pub.ezijing.com/project/sbu-plus/
pc-index-project-intro-0
3.png'
,
web_img_uri
:
'https://webapp-pub.ezijing.com/project/sbu-plus/
feature_
3.png'
,
item_desc_tit
:
'精英辈出'
,
item_desc_tit
:
'精英辈出'
,
item_desc_con
:
item_desc_con
:
'斯坦福大学校长<br/>纽约时报CEO<br/>瑞士银行CTO等'
'瑞士银行CTO Scott G. Abbey <br/>高桥资本创始人 Glenn Dubin<br/>斯坦福大学第十任校长 John Hennessy'
},
},
{
{
web_img_uri
:
'https://webapp-pub.ezijing.com/project/sbu-plus/
pc-index-project-intro-0
4.png'
,
web_img_uri
:
'https://webapp-pub.ezijing.com/project/sbu-plus/
feature_
4.png'
,
item_desc_tit
:
'校方直录'
,
item_desc_tit
:
'校方直录'
,
item_desc_con
:
'点对点直录<br/>硕士学分<br/>国内提前修'
item_desc_con
:
'点对点直录<br/>硕士学分<br/>国内提前修'
},
},
{
{
web_img_uri
:
'https://webapp-pub.ezijing.com/project/sbu-plus/
pc-index-project-intro-0
5.png'
,
web_img_uri
:
'https://webapp-pub.ezijing.com/project/sbu-plus/
feature_
5.png'
,
item_desc_tit
:
'
推免入学
'
,
item_desc_tit
:
'
免标准化考试
'
,
item_desc_con
:
'
校方语言及科研课程<br/>免试
托福/GMAT'
item_desc_con
:
'
美国校方考试<br/>替代
托福/GMAT'
},
},
{
{
web_img_uri
:
'https://webapp-pub.ezijing.com/project/sbu-plus/pc-index-project-intro-06.png'
,
web_img_uri
:
'https://webapp-pub.ezijing.com/project/sbu-plus/feature_6.png'
,
item_desc_tit
:
'位置优越'
,
item_desc_tit
:
'省时省费'
,
item_desc_con
:
'位于纽约长岛,紧邻华尔街'
item_desc_con
:
'仅需赴美学习1年<br/>校内住宿安全便捷'
}
],
swiperOption
:
{
observer
:
true
,
observeParents
:
true
,
speed
:
400
,
autoplay
:
true
,
delay
:
3000
,
loop
:
true
,
slidesPerView
:
'auto'
,
centeredSlides
:
true
,
spaceBetween
:
20
,
navigation
:
{
nextEl
:
'.next-button'
,
prevEl
:
'.prev-button'
}
},
titleParams
:
{
name
:
this
.
$t
(
'home.project.title'
)
},
data
:
[
{
icon
:
'https://webapp-pub.ezijing.com/project/marywood/img12.png'
,
iconActive
:
'https://webapp-pub.ezijing.com/project/marywood/img11.png'
,
text
:
this
.
$store
.
state
.
isMobile
?
this
.
$t
(
'home.project.h5.itemT5'
)
:
this
.
$t
(
'home.project.pc.itemT5'
)
},
{
icon
:
'https://webapp-pub.ezijing.com/project/marywood/img22.png'
,
iconActive
:
'https://webapp-pub.ezijing.com/project/marywood/img21.png'
,
text
:
this
.
$store
.
state
.
isMobile
?
this
.
$t
(
'home.project.h5.itemT6'
)
:
this
.
$t
(
'home.project.pc.itemT6'
)
},
{
icon
:
'https://webapp-pub.ezijing.com/project/marywood/img32.png'
,
iconActive
:
'https://webapp-pub.ezijing.com/project/marywood/img31.png'
,
text
:
this
.
$store
.
state
.
isMobile
?
this
.
$t
(
'home.project.h5.itemT7'
)
:
this
.
$t
(
'home.project.pc.itemT7'
)
},
{
icon
:
'https://webapp-pub.ezijing.com/project/marywood/img42.png'
,
iconActive
:
'https://webapp-pub.ezijing.com/project/marywood/img411.png'
,
text
:
this
.
$store
.
state
.
isMobile
?
this
.
$t
(
'home.project.h5.itemT8'
)
:
this
.
$t
(
'home.project.pc.itemT8'
)
},
{
icon
:
'https://webapp-pub.ezijing.com/project/marywood/img52.png'
,
iconActive
:
'https://webapp-pub.ezijing.com/project/marywood/img51.png'
,
text
:
this
.
$store
.
state
.
isMobile
?
this
.
$t
(
'home.project.h5.itemT9'
)
:
this
.
$t
(
'home.project.pc.itemT9'
)
}
}
]
]
}
}
},
}
methods
:
{}
}
}
</
script
>
</
script
>
...
@@ -116,123 +69,48 @@ export default {
...
@@ -116,123 +69,48 @@ export default {
.card-list
{
.card-list
{
width
:
1200px
;
width
:
1200px
;
position
:
relative
;
position
:
relative
;
margin-top
:
17px
;
margin-top
:
26px
;
display
:
flex
;
display
:
grid
;
flex-wrap
:
wrap
;
grid-template-columns
:
repeat
(
3
,
1fr
);
justify-content
:
space-around
;
row-gap
:
30px
;
.card-item
:nth-child
(
1
)
{
column-gap
:
30px
;
.item_desc_tit
{
width
:
150px
;
}
}
.card-item
:nth-child
(
2
)
{
.item_desc_tit
{
width
:
85px
;
}
}
.card-item
:nth-child
(
3
)
{
.item_desc_tit
{
width
:
85px
;
}
}
.card-item
:nth-child
(
4
)
{
.item_desc_tit
{
width
:
85px
;
}
}
.card-item
:nth-child
(
5
)
{
.item_desc_tit
{
width
:
130px
;
}
}
.card-item
:nth-child
(
6
)
{
.item_desc_tit
{
width
:
85px
;
}
}
.card-item
{
.card-item
{
width
:
380px
;
height
:
280px
;
height
:
380px
;
margin-bottom
:
20px
;
overflow
:
hidden
;
position
:
relative
;
position
:
relative
;
.item_media
{
.item_media
{
width
:
100%
;
height
:
100%
;
position
:
absolute
;
left
:
0
;
top
:
0
;
img
{
img
{
transition
:
0
.3s
;
transition
:
0
.3s
;
width
:
100%
;
width
:
100%
;
height
:
100%
;
height
:
100%
;
}
}
&
:after
{
content
:
''
;
display
:
block
;
width
:
100%
;
height
:
100%
;
position
:
absolute
;
top
:
0
;
left
:
0
;
background
:
rgba
(
0
,
0
,
0
,
0
.6
);
}
}
}
.item_desc
{
.item_desc
{
position
:
absolute
;
position
:
absolute
;
left
:
0
;
top
:
70px
;
top
:
0
;
right
:
35px
;
right
:
0
;
text-align
:
right
;
bottom
:
0
;
padding
:
28px
;
// background-color: #ededed;
opacity
:
1
;
display
:
flex
;
flex-direction
:
column
;
.item_desc_tit
{
font-size
:
21px
;
font-weight
:
600
;
color
:
#fff
;
line-height
:
36px
;
text-align
:
left
;
transition
:
0
.3s
;
transform
:
translateY
(
150px
);
white-space
:
nowrap
;
}
.item_desc_con
{
font-size
:
16px
;
font-weight
:
400
;
color
:
#fff
;
margin-top
:
34px
;
line-height
:
32px
;
transform
:
translateY
(
290px
);
transition
:
0
.3s
;
}
}
}
}
.item_desc_tit
{
.card-item
{
display
:
inline-block
;
.item_media
{
padding-bottom
:
10px
;
img
{
font-size
:
20px
;
transform
:
scale
(
1
.1
);
font-weight
:
500
;
}
color
:
#aa1941
;
line-height
:
1
;
border-bottom
:
1px
solid
#aa1941
;
}
}
.item_desc
{
.item_desc_con
{
// background-color: #fff;
margin-top
:
20px
;
.item_desc_tit
{
font-size
:
16px
;
border-bottom
:
1px
solid
#f3f4f4
;
font-weight
:
400
;
text-align
:
left
;
color
:
#424242
;
transform
:
translateY
(
100px
);
line-height
:
32px
;
}
.item_desc_con
{
transform
:
translateY
(
90px
);
}
}
}
}
}
}
}
.max-width-center
{
.max-width-center
{
width
:
12
12
px
;
width
:
12
00
px
;
margin
:
64px
auto
0
;
margin
:
64px
auto
0
;
}
}
}
}
...
...
components/home/projectPosition.vue
浏览文件 @
50a6c0d7
...
@@ -2,50 +2,26 @@
...
@@ -2,50 +2,26 @@
<div
class=
"max-width-center"
>
<div
class=
"max-width-center"
>
<card
title=
"学校简介"
>
<card
title=
"学校简介"
>
<div
class=
"desc"
>
<div
class=
"desc"
>
<img
src=
"https://webapp-pub.ezijing.com/project/sbu-plus/school_desc.png"
class=
"desc-img"
/>
<p>
<p>
纽约州立大学石溪分校(SBU),又名石溪大学。坐落于纽约市风景区长岛,紧邻世界500强聚集地与全球金融中心——华尔街。全球大学排名前1%、2023
纽约州立大学石溪分校(SBU),又名石溪大学。坐落于纽约市风景区长岛,紧邻世界500强聚集地与全球金融中心——华尔街。全球大学排名前1%、2023
U.S. News全美排名77、2021 QS全美排名39、培养出7位诺贝尔奖得主及37位科学院院士,享有“公立常春藤”的美誉。
U.S. News全美排名77、2021 QS全美排名39、培养出7位诺贝尔奖得主及37位科学院院士,享有“公立常春藤”的美誉。
</p>
</p>
<br
/>
<br
/>
<p>
<p>
石溪大学是美国著名的公立研究型大学,纽约州排名最高的公立大学。著名核物理学家、诺贝尔物理学奖获得者杨振宁在该校执教37年。诺贝尔经济学奖得主罗伯特·奥曼在该校任教并创建博弈论中心。斯坦福大学校长、纽约时报CEO、瑞士银行CTO等大量优秀校友毕业于石溪大学。石溪大学也是世界第一张核磁共振图像的诞生地。
石溪大学是美国著名的公立研究型大学,纽约州排名最高的公立大学。著名核物理学家、诺贝尔物理学奖获得者杨振宁在该校执教37年。诺贝尔经济学奖得主罗伯特·奥曼在该校任教并创建博弈论中心。斯坦福大学校长、纽约时报CEO、瑞士银行CTO等大量优秀校友毕业于石溪大学。石溪大学也是世界第一张核磁共振图像的诞生地。
</p>
</p>
</div>
</div>
</card>
</card>
<card
title=
"项目简介"
style=
"margin-top: 6
4
px;"
>
<card
title=
"项目简介"
style=
"margin-top: 6
0
px;"
>
<div
class=
"desc"
>
<div
class=
"desc"
>
<!--
<p>
石溪大学金融硕士保研项目英文全称是Center of Entrepreneurial Finance-Conditional Admission Process to Master of
Science in
Finance,是石溪大学为金融硕士项目开设的特别录取通道。项目给予大三、大四在读的优秀本科生或往届生提前获得石溪大学金融硕士录取的机会,包含三大内容:
</p>
<br
/>
-->
<!--
<h4>
1、校方直录
</h4>
<p>
经报名材料审核与面试通过后,将直接收到校方(stonybrook.edu)保研项目录取通知书
</p>
<br
/>
<h4>
2、推免入学
</h4>
<p>
通过学习石溪大学与保研项目中国招生与教学中心提供的英语强化课程,可免试托福;通过接受石溪大学商学院教授在量化金融(Quantitative
Finance)等领域提供的科研训练,鼓励学生以增强科研能力替代应试,可免试商学院研究生入学考试(GMAT)。
</p>
<br
/>
<h4>
3、提前读研
</h4>
-->
<p>
<p>
该保研项目是纽约州立大学石溪分校金融硕士项目的特别录取通道。项目通过对学生的全面个性化评估和科研主题课程训练,鼓励学生以增强科研能力替代应试,减少商学院研究生入学考试对学生学习和科研的干扰。
该保研项目是纽约州立大学石溪分校金融硕士项目的特别录取通道。项目通过对学生的全面个性化评估和科研主题课程训练,鼓励学生以增强科研能力替代应试,减少商学院研究生入学考试对学生学习和科研的干扰。
</p>
</p>
<br
/>
<br
/>
</div>
<div
class=
"remark"
>
<p>
<p>
石溪大学商学院官方唯一授权清控紫荆教育负责金融硕士保研项目在中国的招生与教学,详见石溪大学官网项目说明:
石溪大学商学院官方唯一授权清控紫荆教育负责金融硕士保研项目在中国的招生与教学,详见石溪大学官网项目说明:
<a
href=
"https://www.stonybrook.edu/commcms/cef/CEF-Workshop/Collaboration"
style=
"color:#aa1941
"
<a
href=
"https://www.stonybrook.edu/commcms/cef/CEF-Workshop/Collaboration"
target=
"_blank
"
>
https://www.stonybrook.edu/commcms/cef/CEF-Workshop/Collaboration
</a
>
https://www.stonybrook.edu/commcms/cef/CEF-Workshop/Collaboration
</a
>
>
</p>
</p>
...
@@ -61,26 +37,28 @@ export default {
...
@@ -61,26 +37,28 @@ export default {
components
:
{
AppLink
,
Card
},
components
:
{
AppLink
,
Card
},
data
()
{
data
()
{
return
{}
return
{}
},
}
methods
:
{}
}
}
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
.is-pc
{
.is-pc
{
.max-width-center
{
.max-width-center
{
width
:
12
12
px
;
width
:
12
00
px
;
margin
:
0
auto
;
margin
:
0
auto
;
padding-top
:
168px
;
padding-top
:
120px
;
}
.desc-img
{
float
:
right
;
margin-left
:
40px
;
margin-top
:
-60px
;
}
}
.desc
{
.desc
{
text-align
:
justify
;
text-align
:
justify
;
font-size
:
20px
;
padding
:
28px
0
;
line-height
:
30px
;
font-weight
:
400
;
padding
:
28px
30px
0
30px
;
p
{
p
{
color
:
#666666
;
font-size
:
18px
;
color
:
#666
;
line-height
:
36px
;
line-height
:
36px
;
}
}
}
}
...
@@ -97,7 +75,10 @@ export default {
...
@@ -97,7 +75,10 @@ export default {
.max-width-center
{
.max-width-center
{
padding
:
0
.2rem
0
.3rem
0
.2rem
0
.3rem
;
padding
:
0
.2rem
0
.3rem
0
.2rem
0
.3rem
;
}
}
.desc-img
{
max-width
:
100%
;
margin-bottom
:
20px
;
}
.desc
{
.desc
{
text-align
:
justify
;
text-align
:
justify
;
font-size
:
0
.12rem
;
font-size
:
0
.12rem
;
...
...
components/home/videoList.vue
浏览文件 @
50a6c0d7
<
template
>
<
template
>
<section
class=
"section"
v-if=
"!isMobile ? 'is-h5' : 'is-pc'"
>
<section
class=
"section"
v-if=
"!isMobile ? 'is-h5' : 'is-pc'"
>
<!--
<div
class=
"swiper-content1"
@
mouseenter=
"swiperStop"
@
mouseleave=
"swiperStart"
>
-->
<div
class=
"video-list"
>
<div
class=
"swiper-content1"
>
<div
class=
"video-item"
v-for=
"(item, index) in videoData"
:key=
"index"
>
<!--
<div
v-swiper:mySwiper1=
"swiperOption"
ref=
"mySwiper"
>
-->
<div
class=
"video-item__poster"
>
<div
class=
"swiper-wrapper"
>
<img
:src=
"item.img"
/>
<div
class=
"swiper-slide"
v-for=
"(item, index) in videoData"
:key=
"index"
>
<div
class=
"play-icon"
@
click=
"handlePlay(item.video_url)"
><i
class=
"el-icon-caret-right"
></i></div>
<video
controls
:poster=
"item.img"
>
<source
:src=
"item.web_img_uri"
type=
"video/mp4"
/>
</video>
</div>
</div>
<div
class=
"video-item__desc"
>
<h3>
{{
item
.
title
}}
</h3>
<p>
{{
item
.
desc
}}
</p>
</div>
</div>
</div>
<div
class=
"video-player"
v-if=
"playerVisible"
@
click=
"playerVisible = false"
>
<div
class=
"video-player_inner"
@
click
.
stop
>
<video
:src=
"playUrl"
autoplay
controls
ref=
"videoRef"
></video>
</div>
</div>
<!--
</div>
-->
</div>
</div>
</section>
</section>
</
template
>
</
template
>
<
script
>
<
script
>
export
default
{
export
default
{
layout
:
'normal'
,
data
()
{
data
()
{
const
_this
=
this
return
{
return
{
popupVisible
:
false
,
videoData
:
[
videoData
:
[
// {
// img: 'https://webapp-pub.ezijing.com/project/sbu-plus/video_sbu1.png',
// web_img_uri:
// 'https://webapp-pub.ezijing.com/project/sbu-plus/1.%20%E7%9F%B3%E6%BA%AA%E5%A4%A7%E5%AD%A6%E8%AE%A9%E5%AD%A6%E7%94%9F%E6%8B%A5%E6%9C%89%E6%9B%B4%E5%A5%BD%E6%9C%AA%E6%9D%A5.mp4'
// },
// {
// img: 'https://webapp-pub.ezijing.com/project/sbu-plus/video_sbu2.png',
// web_img_uri: 'https://webapp-pub.ezijing.com/project/sbu-plus/%E6%A0%A1%E5%9B%AD%E6%8E%A2%E6%AD%A5.mp4'
// },
// {
// img: 'https://webapp-pub.ezijing.com/project/sbu-plus/video_sbu3.png',
// web_img_uri: 'https://webapp-pub.ezijing.com/project/sbu-plus/%E7%A7%91%E7%A0%94%E4%BC%98%E5%8A%BF.mp4'
// },
// {
// img: 'https://webapp-pub.ezijing.com/project/sbu-plus/video_sbu4.png',
// web_img_uri: 'https://webapp-pub.ezijing.com/project/sbu-plus/%E7%9F%B3%E6%BA%AA%E6%95%99%E6%8E%88.mp4'
// }
// {
// img: 'https://webapp-pub.ezijing.com/project/sbu-plus/video_sbu5.png',
// web_img_uri:
// 'https://webapp-pub.ezijing.com/project/sbu-plus/%E5%90%91%E5%BE%80%E7%9A%84%E7%94%9F%E6%B4%BB.mp4'
// }
{
{
img
:
'https://webapp-pub.ezijing.com/project/sbu-plus/video_sbu6.png'
,
img
:
'https://webapp-pub.ezijing.com/project/sbu-plus/video/1.mp4?x-oss-process=video/snapshot,t_1000'
,
video_url
:
'https://webapp-pub.ezijing.com/project/sbu-plus/video/1.mp4'
,
web_img_uri
:
'https://webapp-pub.ezijing.com/project/sbu-plus/0922%E7%9F%B3%E6%BA%AA2.mp4'
title
:
'石溪大学金融硕士保研'
,
desc
:
'就读石溪大学金融硕士 体验多元世界文化 探索精彩世界'
},
},
{
{
img
:
'https://webapp-pub.ezijing.com/project/sbu-plus/video_sbu7.png'
,
img
:
'https://webapp-pub.ezijing.com/project/sbu-plus/video/3.mp4?x-oss-process=video/snapshot,t_1000'
,
video_url
:
'https://webapp-pub.ezijing.com/project/sbu-plus/video/3.mp4'
,
web_img_uri
:
'https://webapp-pub.ezijing.com/project/sbu-plus/%E6%9B%BC%E5%B0%BC%2B%E8%92%8B.mp4'
title
:
'石溪大学金融硕士保研'
,
desc
:
'石溪大学商学院院长 金融硕士保研项目介绍'
},
},
{
{
img
:
'https://webapp-pub.ezijing.com/project/sbu-plus/video
_sbu8.png
'
,
img
:
'https://webapp-pub.ezijing.com/project/sbu-plus/video
/2.mp4?x-oss-process=video/snapshot,t_1000
'
,
video_url
:
'https://webapp-pub.ezijing.com/project/sbu-plus/video/2.mp4'
,
web_img_uri
:
title
:
'石溪大学金融硕士保研'
,
'https://webapp-pub.ezijing.com/project/sbu-plus/%E7%9F%B3%E6%BA%AA%E5%A4%A7%E5%AD%A6%E6%95%99%E6%8E%883%E4%B8%AA%E7%90%86%E7%94%B1.mp4
'
desc
:
'石溪大学教授 分享∃个选择石溪大学的理由
'
}
}
]
],
playUrl
:
''
,
// swiperOption: {
playerVisible
:
false
// observer: true,
// observeParents: true,
// speed: 400,
// autoplay: true,
// delay: 3000,
// loop: true,
// slidesPerView: 'auto',
// centeredSlides: true,
// spaceBetween: 1,
// on: {
// init() {
// _this.swiper.slideNext()
// }
// }
// }
}
}
},
},
computed
:
{
computed
:
{
// swiper() {
// return this.$refs.mySwiper.swiper
// },
isMobile
()
{
isMobile
()
{
return
this
.
$store
.
state
.
isMobile
return
this
.
$store
.
state
.
isMobile
}
}
},
},
methods
:
{
methods
:
{
// swiperStop() {
handlePlay
(
url
)
{
// this.swiper.autoplay.stop()
this
.
playUrl
=
url
// },
this
.
playerVisible
=
true
// swiperStart() {
this
.
$nextTick
(()
=>
{
// this.swiper.autoplay.start()
this
.
$refs
.
videoRef
.
play
()
// }
})
}
}
}
}
}
</
script
>
</
script
>
...
@@ -109,34 +68,120 @@ export default {
...
@@ -109,34 +68,120 @@ export default {
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
.is-pc
{
.is-pc
{
.section
{
.section
{
max-width
:
1212px
;
max-width
:
1200px
;
margin
:
83px
auto
;
margin
:
70px
auto
;
.swiper-content1
{
}
margin-left
:
60px
;
.video-list
{
.swiper-slide
{
display
:
grid
;
width
:
360px
;
grid-template-columns
:
repeat
(
3
,
1fr
);
height
:
574px
;
column-gap
:
58px
;
video
{
}
height
:
100%
;
.video-item
{
line-height
:
100%
;
background-color
:
#fff
;
}
}
}
.video-item__poster
{
position
:
relative
;
img
{
width
:
100%
;
height
:
200px
;
object-fit
:
cover
;
}
.play-icon
{
position
:
absolute
;
left
:
50%
;
top
:
50%
;
width
:
83px
;
height
:
83px
;
background
:
rgba
(
66
,
66
,
66
,
0
.5
);
border-radius
:
50%
;
color
:
#fff
;
transform
:
translate
(
-50%
,
-50%
);
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
font-size
:
40px
;
cursor
:
pointer
;
}
}
.video-item__desc
{
padding
:
20px
;
h3
{
font-size
:
22px
;
color
:
#666
;
}
p
{
margin-top
:
20px
;
font-size
:
18px
;
color
:
#666
;
}
}
}
}
}
}
.is-h5
{
.is-h5
{
.section
{
.video-list
{
.swiper-content1
{
margin
:
0
20px
;
overflow-x
:
auto
;
display
:
grid
;
.swiper-slide
{
grid-template-columns
:
repeat
(
1
,
1fr
);
width
:
3
.3rem
;
column-gap
:
58px
;
height
:
4
.58rem
;
row-gap
:
20px
;
video
{
}
height
:
100%
;
.video-item
{
line-height
:
100%
;
background-color
:
#fff
;
}
}
}
.video-item__poster
{
position
:
relative
;
img
{
width
:
100%
;
height
:
200px
;
object-fit
:
cover
;
}
.play-icon
{
position
:
absolute
;
left
:
50%
;
top
:
50%
;
width
:
83px
;
height
:
83px
;
background
:
rgba
(
66
,
66
,
66
,
0
.5
);
border-radius
:
50%
;
color
:
#fff
;
transform
:
translate
(
-50%
,
-50%
);
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
font-size
:
40px
;
cursor
:
pointer
;
}
}
.video-item__desc
{
padding
:
20px
;
h3
{
font-size
:
22px
;
color
:
#666
;
}
}
p
{
margin-top
:
20px
;
font-size
:
18px
;
color
:
#666
;
}
}
}
.video-player
{
position
:
fixed
;
left
:
0
;
top
:
0
;
bottom
:
0
;
right
:
0
;
background-color
:
rgba
(
0
,
0
,
0
,
0
.5
);
z-index
:
1000
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
}
.video-player_inner
{
max-width
:
800px
;
border-radius
:
10px
;
overflow
:
hidden
;
video
{
width
:
100%
;
}
}
}
}
</
style
>
</
style
>
components/layout/pc/Head.vue
浏览文件 @
50a6c0d7
...
@@ -188,8 +188,6 @@ li {
...
@@ -188,8 +188,6 @@ li {
}
}
.head-nav-content
{
.head-nav-content
{
height
:
72px
;
height
:
72px
;
display
:
flex
;
align-items
:
center
;
}
}
}
}
</
style
>
</
style
>
components/layout/pc/Menu.vue
浏览文件 @
50a6c0d7
...
@@ -161,12 +161,10 @@ export default {
...
@@ -161,12 +161,10 @@ export default {
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
.nav-item-box
{
.nav-item-box
{
padding-left
:
11px
;
display
:
flex
;
display
:
flex
;
justify-content
:
space-between
;
li
{
li
{
position
:
relative
;
position
:
relative
;
margin-right
:
40px
;
.name
{
.name
{
line-height
:
72px
;
line-height
:
72px
;
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论