Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
P
project-online-pc
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
EzijingWeb
project-online-pc
Commits
5057a4d1
提交
5057a4d1
authored
6月 22, 2021
作者:
lihuihui
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
pc和h5整合
上级
e4d13bf2
隐藏空白字符变更
内嵌
并排
正在显示
11 个修改的文件
包含
966 行增加
和
453 行删除
+966
-453
Menu.vue
components/base/h5/Menu.vue
+3
-3
course.vue
pages/about/course.vue
+107
-48
teacher.vue
pages/about/teacher.vue
+111
-57
outstanding.vue
pages/alumni/outstanding.vue
+170
-88
problem.vue
pages/apply/problem.vue
+68
-25
support.vue
pages/apply/support.vue
+6
-1
bg.vue
pages/project-intro/bg.vue
+210
-128
certificate.vue
pages/project-intro/certificate.vue
+119
-59
charac.vue
pages/project-intro/charac.vue
+92
-44
TabContent.vue
pages/project-intro/components/TabContent.vue
+58
-0
TabNav.vue
pages/project-intro/components/TabNav.vue
+22
-0
没有找到文件。
components/base/h5/Menu.vue
浏览文件 @
5057a4d1
...
...
@@ -16,9 +16,9 @@ export default {
{
name
:
'项目介绍'
,
children
:
[
{
name
:
'项目背景'
,
path
:
'/project/bg'
},
{
name
:
'项目特色'
,
path
:
'/project/charac'
},
{
name
:
'证书授权'
,
path
:
'/project/certificate'
}
{
name
:
'项目背景'
,
path
:
'/project
-intro
/bg'
},
{
name
:
'项目特色'
,
path
:
'/project
-intro
/charac'
},
{
name
:
'证书授权'
,
path
:
'/project
-intro
/certificate'
}
]
},
{
...
...
pages/about/course.vue
浏览文件 @
5057a4d1
<
template
>
<div
:class=
"isMobile ? 'is-h5' : 'is-pc'"
>
<app-frame
:data=
"frameParams"
>
<div
class=
"course-content-box"
>
<div
class=
"course-content-box"
v-if=
"!isMobile"
>
<div
class=
"content-mian"
>
<div
class=
"border-box"
>
<template
v-for=
"(item, index) in courseData"
>
...
...
@@ -19,7 +20,19 @@
</div>
</div>
</div>
<div
class=
"course-content"
v-else
>
<div
class=
"item-box"
v-for=
"(item, index) in courseData"
:key=
"index"
>
<div
class=
"title"
>
{{ item.title }}
</div>
<ul>
<li
v-for=
"(cItem, cIndex) in item.item"
:key=
"cIndex + 'c'"
>
<div
class=
"name"
>
{{ cItem.name }}
</div>
<div
class=
"score"
>
学分:{{ cItem.score }}
</div>
</li>
</ul>
</div>
</div>
</app-frame>
</div>
</template>
<
script
>
import
appFrame
from
'@/components/appFrame'
...
...
@@ -92,60 +105,67 @@ export default {
}
}
},
mounted
()
{}
mounted
()
{},
computed
:
{
isMobile
()
{
return
this
.
$store
.
state
.
isMobile
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.course-content-box
{
width
:
1200px
;
margin
:
0
auto
;
.content-mian
{
padding
:
106px
141px
110px
96px
;
.border-box
{
padding
:
35px
0
51px
;
border-top
:
1px
solid
#e6e6e6
;
border-bottom
:
1px
solid
#e6e6e6
;
.item-box
{
display
:
flex
;
justify-content
:
space-between
;
margin-bottom
:
40px
;
ul
{
padding-bottom
:
37px
;
border-bottom
:
1px
solid
#e6e6e6
;
}
&
:last-child
{
border-bottom
:
none
;
margin-bottom
:
0
;
.is-pc
{
.course-content-box
{
width
:
1200px
;
margin
:
0
auto
;
.content-mian
{
padding
:
106px
141px
110px
96px
;
.border-box
{
padding
:
35px
0
51px
;
border-top
:
1px
solid
#e6e6e6
;
border-bottom
:
1px
solid
#e6e6e6
;
.item-box
{
// display: flex;
// justify-content: space-between;
margin-bottom
:
40px
;
ul
{
padding-bottom
:
37px
;
border-bottom
:
none
;
border-bottom
:
1px
solid
#e6e6e6
;
}
}
.title
{
font-size
:
26px
;
font-weight
:
bold
;
line-height
:
100%
;
color
:
#aa1941
;
}
.right-content
{
width
:
562px
;
li
{
height
:
32px
;
background
:
#f7f7f7
;
display
:
flex
;
align-items
:
center
;
&
:nth-child
(
even
)
{
background
:
none
;
}
.text
{
width
:
397px
;
padding-left
:
30px
;
font-size
:
16px
;
color
:
#333333
;
&
:last-child
{
border-bottom
:
none
;
margin-bottom
:
0
;
ul
{
padding-bottom
:
37px
;
border-bottom
:
none
;
}
.score
{
font-size
:
16px
;
color
:
#424242
;
}
.title
{
font-size
:
26px
;
font-weight
:
bold
;
line-height
:
100%
;
color
:
#aa1941
;
}
.right-content
{
width
:
562px
;
li
{
height
:
32px
;
background
:
#f7f7f7
;
display
:
flex
;
align-items
:
center
;
&
:nth-child
(
even
)
{
background
:
none
;
}
.text
{
width
:
397px
;
padding-left
:
30px
;
font-size
:
16px
;
color
:
#333333
;
}
.score
{
font-size
:
16px
;
color
:
#424242
;
}
}
}
}
...
...
@@ -153,4 +173,43 @@ export default {
}
}
}
.is-h5
{
.course-content
{
background
:
#fff
;
padding
:
.38rem
.28rem
.2rem
;
.title
{
font-size
:
0
.14rem
;
font-weight
:
bold
;
line-height
:
100%
;
color
:
#AA1941
;
}
ul
{
border-top
:
.01rem
solid
#E6E6E6
;
padding-top
:
.1rem
;
margin-top
:
.19rem
;
margin-bottom
:
.24rem
;
li
{
height
:
.21rem
;
box-sizing
:
border-box
;
padding-left
:
.27rem
;
display
:
flex
;
align-items
:
center
;
&
:nth-child
(
odd
)
{
background
:
#F7F7F7
;
}
.name
{
font-size
:
0
.1rem
;
color
:
#666666
;
width
:
2
.17rem
;
font-size
:
0
.1rem
;
color
:
#666666
;
}
.score
{
font-size
:
0
.1rem
;
color
:
#666666
;
}
}
}
}
}
</
style
>
pages/about/teacher.vue
浏览文件 @
5057a4d1
<
template
>
<app-frame
:data=
"frameParams"
>
<div
class=
"teacher-content-box"
>
<div
class=
"content-box"
>
<div
class=
"teacher-box"
>
<div
class=
"mar-t-box"
v-for=
"(item, index) in teacherList"
:key=
"index"
>
<div
class=
"title"
>
{{
item
.
title
}}
</div>
<ul>
<template
v-for=
"(cItem, cIndex) in item.list"
>
<li
:key=
"cIndex + '='"
>
<img
:src=
"cItem.image"
alt=
""
/>
<div
class=
"name"
>
{{
cItem
.
name
}}
</div>
<div
class=
"p"
v-html=
"cItem.intr"
></div>
</li>
</
template
>
</ul>
<div
:class=
"isMobile ? 'is-h5' : 'is-pc'"
>
<app-frame
:data=
"frameParams"
>
<div
class=
"teacher-content-box"
>
<div
class=
"content-box"
>
<div
class=
"teacher-box"
>
<div
class=
"mar-t-box"
v-for=
"(item, index) in teacherList"
:key=
"index"
>
<div
class=
"title"
>
{{
item
.
title
}}
</div>
<ul>
<template
v-for=
"(cItem, cIndex) in item.list"
>
<li
:key=
"cIndex + '='"
>
<img
:src=
"cItem.image"
alt=
""
/>
<div
class=
"name"
>
{{
cItem
.
name
}}
</div>
<div
class=
"p"
v-html=
"cItem.intr"
></div>
</li>
</
template
>
</ul>
</div>
</div>
</div>
</div>
</
div
>
</
app-frame
>
</
app-frame
>
</
div
>
</template>
<
script
>
import
appFrame
from
'@/components/appFrame'
...
...
@@ -116,50 +118,102 @@ export default {
}
}
},
mounted
()
{}
mounted
()
{},
computed
:
{
isMobile
()
{
return
this
.
$store
.
state
.
isMobile
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.teacher-content-box
{
width
:
1200px
;
margin
:
0
auto
;
.content-box
{
padding
:
60px
75px
61px
;
.teacher-box
{
.title
{
font-size
:
22px
;
font-weight
:
bold
;
line-height
:
100%
;
color
:
#333333
;
}
ul
{
display
:
flex
;
flex-wrap
:
wrap
;
padding-top
:
30px
;
li
{
width
:
180px
;
margin-right
:
140px
;
margin-bottom
:
40px
;
&
:nth-child
(
3n
+
3
)
{
margin-right
:
0
;
}
img
{
display
:
block
;
width
:
100%
;
}
.name
{
font-size
:
18px
;
color
:
#aa1941
;
line-height
:
100%
;
margin-top
:
20px
;
margin-bottom
:
10px
;
.is-pc
{
.teacher-content-box
{
width
:
1200px
;
margin
:
0
auto
;
.content-box
{
padding
:
60px
75px
61px
;
.teacher-box
{
.title
{
font-size
:
22px
;
font-weight
:
bold
;
line-height
:
100%
;
color
:
#333333
;
}
ul
{
display
:
flex
;
flex-wrap
:
wrap
;
padding-top
:
30px
;
li
{
width
:
180px
;
margin-right
:
140px
;
margin-bottom
:
40px
;
&
:nth-child
(
3n
+
3
)
{
margin-right
:
0
;
}
img
{
display
:
block
;
width
:
100%
;
}
.name
{
font-size
:
18px
;
color
:
#aa1941
;
line-height
:
100%
;
margin-top
:
20px
;
margin-bottom
:
10px
;
}
.p
{
font-size
:
14px
;
// line-height: 100%;
color
:
#666666
;
white-space
:
nowrap
;
margin-bottom
:
5px
;
}
}
.p
{
font-size
:
14px
;
// line-height: 100%;
color
:
#666666
;
white-space
:
nowrap
;
margin-bottom
:
5px
;
}
}
}
}
}
.is-h5
{
.teacher-content-box
{
.content-box
{
padding
:
.3rem
.32rem
.3rem
;
.teacher-box
{
.title
{
font-size
:
.14rem
;
font-weight
:
bold
;
line-height
:
100%
;
color
:
#333333
;
}
ul
{
display
:
flex
;
flex-wrap
:
wrap
;
padding-top
:
.15rem
;
li
{
width
:
1
.32rem
;
margin-left
:
.3rem
;
margin-bottom
:
.13rem
;
&
:nth-child
(
odd
)
{
margin-left
:
0
;
}
img
{
display
:
block
;
width
:
100%
;
}
.name
{
font-size
:
0
.14rem
;
line-height
:
100%
;
color
:
#AA1941
;
margin-top
:
.1rem
;
margin-bottom
:
.03rem
;
}
.p
{
font-size
:
0
.1rem
;
line-height
:
0
.13rem
;
color
:
#666666
;
margin-top
:
.03rem
;
}
}
}
}
...
...
pages/alumni/outstanding.vue
浏览文件 @
5057a4d1
<
template
>
<app-frame
:data=
"frameParams"
>
<div
class=
"outstanding"
>
<div
class=
"alumni"
>
<h5>
{{
$t
(
'outstanding.title1'
)
}}
</h5>
<ul
class=
"card-list"
>
<li
v-for=
"(item, index) in alumniList"
:key=
"index"
>
<div
class=
"avatar"
>
<img
:src=
"item.avatar"
/>
</div>
<div
class=
"text"
>
<h6>
{{
item
.
name
}}
</h6>
<p
v-for=
"it in item.post"
:key=
"it"
>
{{
it
}}
</p>
</div>
</li>
</ul>
<h5>
{{
$t
(
'outstanding.title2'
)
}}
</h5>
<ul
class=
"card-list"
>
<li
v-for=
"item in studentList"
:key=
"item.name"
>
<div
class=
"avatar"
>
<img
:src=
"item.avatar"
/>
</div>
<div
class=
"text"
>
<h6>
{{
item
.
name
}}
</h6>
<p
v-for=
"it in item.education"
:key=
"it"
>
{{
it
}}
</p>
<div
v-for=
"it in item.post"
:key=
"it"
>
{{
it
}}
</div>
</div>
</li>
</ul>
<div
:class=
"isMobile ? 'is-h5' : 'is-pc'"
>
<app-frame
:data=
"frameParams"
>
<div
class=
"outstanding"
>
<div
class=
"alumni"
>
<h5>
{{
$t
(
'outstanding.title1'
)
}}
</h5>
<ul
class=
"card-list"
>
<li
v-for=
"(item, index) in alumniList"
:key=
"index"
>
<div
class=
"avatar"
>
<img
:src=
"item.avatar"
/>
</div>
<div
class=
"text"
>
<h6>
{{
item
.
name
}}
</h6>
<p
v-for=
"it in item.post"
:key=
"it"
>
{{
it
}}
</p>
</div>
</li>
</ul>
<h5>
{{
$t
(
'outstanding.title2'
)
}}
</h5>
<ul
class=
"card-list"
>
<li
v-for=
"item in studentList"
:key=
"item.name"
>
<div
class=
"avatar"
>
<img
:src=
"item.avatar"
/>
</div>
<div
class=
"text"
>
<h6>
{{
item
.
name
}}
</h6>
<p
v-for=
"it in item.education"
:key=
"it"
>
{{
it
}}
</p>
<div
v-for=
"it in item.post"
:key=
"it"
>
{{
it
}}
</div>
</div>
</li>
</ul>
</div>
</div>
</
div
>
</
app-frame
>
</
app-frame
>
</
div
>
</
template
>
<
script
>
import
appFrame
from
'@/components/appFrame'
...
...
@@ -146,75 +148,155 @@ export default {
]
}
}
},
computed
:
{
isMobile
()
{
return
this
.
$store
.
state
.
isMobile
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.alumni
{
padding
:
30px
74px
;
h5
{
font-size
:
22px
;
font-family
:
Source
Han
Sans
CN
;
font-weight
:
500
;
line-height
:
74px
;
color
:
#333333
;
}
.card-list
{
margin-bottom
:
30px
;
display
:
flex
;
flex-direction
:
row
;
flex-wrap
:
wrap
;
li
{
width
:
410px
;
height
:
195px
;
background
:
#ebebeb
;
.is-pc
{
.alumni
{
padding
:
30px
74px
;
h5
{
font-size
:
22px
;
font-family
:
Source
Han
Sans
CN
;
font-weight
:
500
;
line-height
:
74px
;
color
:
#333333
;
}
.card-list
{
margin-bottom
:
30px
;
display
:
flex
;
margin
:
0
20px
21px
0
;
transition
:
0
.5s
ease-in-out
;
.avatar
{
width
:
204px
;
height
:
100%
;
img
{
width
:
157px
;
height
:
157px
;
margin
:
20px
0
0
23px
;
}
}
.text
{
margin-top
:
72px
;
h6
{
font-size
:
18px
;
font-family
:
HelveticaNeueLTPro-Md
;
line-height
:
18px
;
color
:
#aa1941
;
margin-bottom
:
10px
;
flex-direction
:
row
;
flex-wrap
:
wrap
;
li
{
width
:
410px
;
height
:
195px
;
background
:
#ebebeb
;
display
:
flex
;
margin
:
0
20px
21px
0
;
transition
:
0
.5s
ease-in-out
;
.avatar
{
width
:
204px
;
height
:
100%
;
img
{
width
:
157px
;
height
:
157px
;
margin
:
20px
0
0
23px
;
}
}
p
{
font-size
:
14px
;
font-family
:
Source
Han
Sans
CN
;
font-weight
:
400
;
line-height
:
22px
;
color
:
#666
;
.text
{
margin-top
:
72px
;
h6
{
font-size
:
18px
;
font-family
:
HelveticaNeueLTPro-Md
;
line-height
:
18px
;
color
:
#aa1941
;
margin-bottom
:
10px
;
}
p
{
font-size
:
14px
;
font-family
:
Source
Han
Sans
CN
;
font-weight
:
400
;
line-height
:
22px
;
color
:
#666
;
}
div
{
font-size
:
12px
;
font-family
:
Source
Han
Sans
CN
;
font-weight
:
300
;
line-height
:
18px
;
color
:
#666
;
}
}
div
{
font-size
:
12px
;
font-family
:
Source
Han
Sans
CN
;
font-weight
:
300
;
line-height
:
18px
;
color
:
#666
;
}
li
:nth-child
(
even
)
{
margin-right
:
0
;
}
li
:hover
{
background
:
#aa1941
;
.text
{
h6
,
p
,
div
{
color
:
#fff
;
}
}
}
}
li
:nth-child
(
even
)
{
margin-right
:
0
;
}
}
.is-h5
{
.alumni
{
padding
:
0
.16rem
.35rem
;
h5
{
font-size
:
.14rem
;
font-weight
:
700
;
line-height
:
100%
;
padding
:
.2rem
0
;
color
:
#333
;
}
li
:hover
{
background
:
#aa1941
;
.text
{
h6
,
p
,
div
{
color
:
#fff
;
.card-list
{
margin-bottom
:
.15rem
;
display
:
flex
;
flex-direction
:
row
;
flex-wrap
:
wrap
;
li
{
box-sizing
:
border-box
;
width
:
1
.68rem
;
background
:
#ebebeb
;
padding
:
.11rem
.05rem
;
display
:
flex
;
margin-bottom
:
.06rem
;
margin-left
:
.06rem
;
&
:nth-child
(
odd
)
{
margin-left
:
0
;
}
.avatar
{
// width: 204px;
// height: 100%;
img
{
width
:
.63rem
;
height
:
.63rem
;
display
:
block
;
}
}
.text
{
// margin-top: .3rem;
margin-left
:
.1rem
;
h6
{
font-size
:
.11rem
;
color
:
#aa1941
;
font-weight
:
700
;
white-space
:
nowrap
;
}
p
{
font-size
:
.1rem
;
line-height
:
.15rem
;
color
:
#666
;
}
div
{
font-size
:
.07rem
;
line-height
:
.15rem
;
color
:
#666
;
margin-top
:
.02rem
;
}
}
}
li
:nth-child
(
even
)
{
margin-right
:
0
;
}
li
:hover
{
background
:
#aa1941
;
.text
{
h6
,
p
,
div
{
color
:
#fff
;
}
}
}
}
...
...
pages/apply/problem.vue
浏览文件 @
5057a4d1
<
template
>
<div
:class=
"isMobile ? 'is-h5' : 'is-pc'"
>
<app-frame
:data=
"frameParams"
>
<div
class=
"problem-content-box"
>
<div
class=
"content-box"
>
...
...
@@ -18,6 +19,7 @@
</div>
</div>
</app-frame>
</div>
</template>
<
script
>
import
appFrame
from
'@/components/appFrame'
...
...
@@ -87,36 +89,77 @@ export default {
]
}
}
},
computed
:
{
isMobile
()
{
return
this
.
$store
.
state
.
isMobile
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.problem-content-box
{
.content-box
{
padding
:
54px
104px
90px
87px
;
.problem-item-box
{
margin-bottom
:
80px
;
.title
{
font-size
:
22px
;
font-weight
:
bold
;
line-height
:
100%
;
color
:
#333333
;
}
ul
{
padding-top
:
30px
;
li
{
margin-bottom
:
15px
;
.pro-tit
{
font-size
:
16px
;
font-weight
:
bold
;
line-height
:
32px
;
color
:
#666666
;
border-bottom
:
1px
solid
#e6e6e6
;
.is-pc
{
.problem-content-box
{
.content-box
{
padding
:
54px
104px
90px
87px
;
.problem-item-box
{
margin-bottom
:
80px
;
.title
{
font-size
:
22px
;
font-weight
:
bold
;
line-height
:
100%
;
color
:
#333333
;
}
ul
{
padding-top
:
30px
;
li
{
margin-bottom
:
15px
;
.pro-tit
{
font-size
:
16px
;
font-weight
:
bold
;
line-height
:
32px
;
color
:
#666666
;
border-bottom
:
1px
solid
#e6e6e6
;
}
.answer
{
font-size
:
16px
;
line-height
:
32px
;
color
:
#424242
;
}
}
.answer
{
font-size
:
16px
;
line-height
:
32px
;
color
:
#424242
;
}
}
}
}
}
.is-h5
{
.problem-content-box
{
.content-box
{
padding
:
.22rem
;
.problem-item-box
{
margin-bottom
:
.4rem
;
.title
{
font-size
:
0
.14rem
;
font-weight
:
bold
;
line-height
:
100%
;
color
:
#333333
;
}
ul
{
padding-top
:
.15rem
;
li
{
margin-bottom
:
.08rem
;
.pro-tit
{
font-size
:
.12rem
;
font-weight
:
bold
;
line-height
:
.17rem
;
color
:
#666666
;
border-bottom
:
1px
solid
#e6e6e6
;
}
.answer
{
font-size
:
.12rem
;
line-height
:
.17rem
;
color
:
#424242
;
}
}
}
}
...
...
pages/apply/support.vue
浏览文件 @
5057a4d1
...
...
@@ -42,6 +42,11 @@ export default {
]
}
}
},
computed
:
{
isMobile
()
{
return
this
.
$store
.
state
.
isMobile
}
}
}
</
script
>
...
...
@@ -78,7 +83,7 @@ export default {
padding
:
.3rem
.2rem
;
.content-box
{
.text-content
{
padding-left
:
.
4
rem
;
padding-left
:
.
2
rem
;
.title
{
font-size
:
0
.14rem
;
font-weight
:
bold
;
...
...
pages/project-intro/bg.vue
浏览文件 @
5057a4d1
<
template
>
<app-frame
:data=
"frameParams"
>
<div
class=
"project-bg-main"
>
<ul
class=
"tabs"
>
<li
v-for=
"item in list"
:key=
"item.name"
:class=
"
{ 'is-active': tabActive === item.name }"
@click="tabActive = item.name"
>
{{
item
.
label
}}
</li>
</ul>
<div
class=
"zjjy"
v-if=
"tabActive === 'zjjy'"
>
<div
class=
"sub-banner"
>
<img
src=
"https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-zjjy.png"
/>
</div>
<div
class=
"text"
v-html=
"$t('bg.con1Txt')"
></div>
<div
class=
"tags"
>
<div
:class=
"
{ 'tag-item': true, big: (index + 2) % 4 === 0 }" v-for="(item, index) in tags" :key="item.text">
<div
class=
"tag-item-inner"
>
<p>
<span>
{{
item
.
num
}}
</span
>
{{
item
.
unit
}}
</p>
<span>
{{
item
.
text
}}
</span>
<div
:class=
"isMobile ? 'is-h5' : 'is-pc'"
>
<app-frame
:data=
"frameParams"
>
<div
class=
"content-mian"
v-if=
"isMobile"
>
<tab-content
@
tabChange=
"tabChange"
></tab-content>
<div
class=
"content-mod1"
v-if=
"showIndex === 0"
>
<img
src=
"https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod1-banner.png"
class=
"main-banner"
>
<div
class=
"content-txt"
>
<div
class=
"tit"
>
{{
$t
(
'bg.brief'
)
}}
</div>
<div
class=
"text"
>
<div
class=
"p"
v-html=
"$t('bg.con1Txt')"
></div>
</div>
<
el-divider
direction=
"vertical"
v-if=
"(index + 1) % 4 !== 0"
></el-divider
>
<
img
src=
"https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod1-img.png"
alt=
""
>
</div>
</div>
</div>
<div
class=
"kelley"
v-if=
"tabActive === 'kelley'"
>
<div
class=
"sub-banner"
>
<img
src=
"https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-kelley.png"
/>
<div
class=
"content-mod2"
v-if=
"showIndex === 1"
>
<img
src=
"https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod2-banner.png"
class=
"main-banner"
>
<div
class=
"content-txt"
>
<div
class=
"p"
v-html=
"$t('bg.con2Txt')"
></div>
</div>
</div>
<div
class=
"text"
>
<p>
印第安纳大学伯明顿分校是美国公立常春藤院校,成立于1820年,有200多年历史,是著名的研究型大学,拥有9位诺贝尔奖得主。
</p>
<p>
印第安纳大学Kelley商学院是印第安纳大学伯明顿分校的明星学院,也是世界上历史最悠久和领先的商学院之一,成立于1920年,有100对年历史。
</p>
<p>
Kelley商学院是印第安纳大学的商科研究生院,前身为Indiana University School of Commerce and Finance。
Kelley自1920年创立以来一直被认为是美国顶尖的商学院之一,在Business Week, U.S.News
&
World Report, 和The
Economist Intelligence
Unit等权威杂志的商学院排名中更是名列前茅,Kelley的校友在世界各地的企业,非盈利性组织,政府和学术机构中扮演着领导者的角色。
</p>
<div
class=
"content-mod2"
v-if=
"showIndex === 2"
>
<img
src=
"https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley-h5/project-mod3-banner.png"
class=
"main-banner"
>
<div
class=
"content-txt"
>
<div
class=
"p"
v-html=
"$t('bg.con3Txt')"
></div>
</div>
</div>
</div>
<div
class=
"lhbx"
v-if=
"tabActive === 'lhbx'"
>
<div
class=
"sub-banner"
>
<img
src=
"https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-lhbx.png"
/>
<div
class=
"project-bg-main"
v-else
>
<ul
class=
"tabs"
>
<li
v-for=
"item in list"
:key=
"item.name"
:class=
"
{ 'is-active': tabActive === item.name }"
@click="tabActive = item.name"
>
{{
item
.
label
}}
</li>
</ul>
<div
class=
"zjjy"
v-if=
"tabActive === 'zjjy'"
>
<div
class=
"sub-banner"
>
<img
src=
"https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-zjjy.png"
/>
</div>
<div
class=
"text"
v-html=
"$t('bg.con1Txt')"
></div>
<div
class=
"tags"
>
<div
:class=
"
{ 'tag-item': true, big: (index + 2) % 4 === 0 }" v-for="(item, index) in tags" :key="item.text">
<div
class=
"tag-item-inner"
>
<p>
<span>
{{
item
.
num
}}
</span
>
{{
item
.
unit
}}
</p>
<span>
{{
item
.
text
}}
</span>
</div>
<el-divider
direction=
"vertical"
v-if=
"(index + 1) % 4 !== 0"
></el-divider>
</div>
</div>
</div>
<div
class=
"text"
>
<p>
本项目为紫荆教育与美国印第安纳大学Kelley商学院联合推出的金融学硕士项目,同时结合Kelley商学院金融学硕士的全球领先地位,引领中国金融教育实践,旨在培养具有国际视野、具备金融专业能力与实践创新能力,通晓国际金融规则和行业实践经验的金融专业人才。
</p>
<p>
项目采用中英双语授课,学制为在职15个月(学籍最长可保留5年)。共设有三大模块近20余门学位课程,并结合访学、论文、实践等丰富多彩的教学形式。中美双方各负责50%的教学内容。项目采用线上学习和线下面授的教学方式,学习期间安排一次集中强化式赴美访学。
</p>
<p>
项目学习结束后,满足毕业条件的学员将获得美国印第安纳大学Kelley商学院授予的金融学硕士学位证书,该证书与印第安纳大学Kelley商学院本校生所获得的学位证书具有完全相同的形式和效力。
</p>
<p>
世界最发达经济体与世界最大新兴经济体互相合作与学习,美国顶级商学院Kelley School of
Business与清华控股旗下紫荆教育紧密携手,依托清华大学五道口金融学院和美国印第安纳大学Kelley商学院的优质教学资源,打造最原汁原味、最接近实战的金融学硕士学位课程。
</p>
<div
class=
"kelley"
v-if=
"tabActive === 'kelley'"
>
<div
class=
"sub-banner"
>
<img
src=
"https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-kelley.png"
/>
</div>
<div
class=
"text"
v-html=
"$t('bg.con2Txt')"
></div>
</div>
<div
class=
"lhbx"
v-if=
"tabActive === 'lhbx'"
>
<div
class=
"sub-banner"
>
<img
src=
"https://webapp-pub.ezijing.com/project/kelley/project-intro-bg-lhbx.png"
/>
</div>
<div
class=
"text"
v-html=
"$t('bg.con3Txt')"
></div>
</div>
</div>
</
div
>
</
app-frame
>
</
app-frame
>
</
div
>
</
template
>
<
script
>
import
TabNav
from
'./components/TabNav'
import
TabContent
from
'./components/TabContent'
export
default
{
layout
:
'normal'
,
components
:
{
TabNav
,
TabContent
},
data
()
{
return
{
showIndex
:
0
,
tabActive
:
'zjjy'
,
list
:
[
{
name
:
'zjjy'
,
label
:
this
.
$t
(
'bg.tabBtn1'
)
},
...
...
@@ -110,86 +117,161 @@ export default {
]
}
}
},
methods
:
{
tabChange
(
n
)
{
this
.
showIndex
=
n
}
},
computed
:
{
isMobile
()
{
return
this
.
$store
.
state
.
isMobile
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.project-bg-main
{
padding
:
42px
64px
50px
;
.tabs
{
margin-top
:
42px
;
display
:
flex
;
justify-content
:
space-between
;
li
{
background
:
#fbfbfb
;
width
:
32%
;
height
:
83px
;
line-height
:
83px
;
border-top
:
8px
solid
#fbfbfb
;
font-size
:
26px
;
font-family
:
Source
Han
Sans
CN
;
color
:
#333
;
text-align
:
center
;
cursor
:
pointer
;
.is-pc
{
.project-bg-main
{
padding
:
42px
64px
50px
;
.tabs
{
margin-top
:
42px
;
display
:
flex
;
justify-content
:
space-between
;
li
{
background
:
#fbfbfb
;
width
:
32%
;
height
:
83px
;
line-height
:
83px
;
border-top
:
8px
solid
#fbfbfb
;
font-size
:
26px
;
font-family
:
Source
Han
Sans
CN
;
color
:
#333
;
text-align
:
center
;
cursor
:
pointer
;
}
li
.is-active
{
border-color
:
#aa1941
;
color
:
#aa1941
;
background-color
:
#fff
;
box-shadow
:
0px
1px
25px
rgba
(
0
,
0
,
0
,
0
.06
);
}
}
li
.is-active
{
border-color
:
#aa1941
;
color
:
#aa1941
;
background-color
:
#fff
;
box-shadow
:
0px
1px
25px
rgba
(
0
,
0
,
0
,
0
.06
);
.sub-banner
{
margin-top
:
18px
;
height
:
302px
;
img
{
width
:
100%
;
height
:
100%
;
}
}
}
.sub-banner
{
margin-top
:
18px
;
height
:
302px
;
img
{
width
:
100%
;
height
:
100%
;
.text
{
font-size
:
16px
;
font-family
:
Source
Han
Sans
CN
;
line-height
:
32px
;
color
:
#424242
;
letter-spacing
:
1px
;
margin-top
:
40px
;
}
.tags
{
width
:
780px
;
margin
:
40px
auto
0
;
display
:
flex
;
flex-direction
:
row
;
flex-wrap
:
wrap
;
// justify-content: space-between;
.tag-item
{
width
:
180px
;
margin-bottom
:
10px
;
.tag-item-inner
{
display
:
inline-block
;
text-align
:
center
;
width
:
calc
(
100%
-
17px
);
p
{
font-size
:
20px
;
color
:
#aa1941
;
span
{
font-size
:
28px
;
font-weight
:
bold
;
}
}
>
span
{
font-size
:
16px
;
line-height
:
34px
;
color
:
#666666
;
}
}
.el-divider
{
height
:
100%
;
float
:
right
;
}
}
.tag-item.big
{
width
:
240px
;
}
}
}
.text
{
font-size
:
16px
;
font-family
:
Source
Han
Sans
CN
;
line-height
:
32px
;
color
:
#424242
;
letter-spacing
:
1px
;
margin-top
:
40px
;
}
::v-deep
{
// .is-h5{
.main-page-content
{
background-color
:
#eee
!
important
;
// }
}
.tags
{
width
:
780px
;
margin
:
40px
auto
0
;
display
:
flex
;
flex-direction
:
row
;
flex-wrap
:
wrap
;
// justify-content: space-between;
.tag-item
{
width
:
180px
;
margin-bottom
:
10px
;
.tag-item-inner
{
display
:
inline-block
;
text-align
:
center
;
width
:
calc
(
100%
-
17px
);
p
{
font-size
:
20px
;
color
:
#aa1941
;
span
{
font-size
:
28px
;
font-weight
:
bold
;
}
.is-h5
{
.content-mian
{
padding
:
0
.16rem
;
.content-mod1
{
padding-top
:
.18rem
;
img
{
width
:
100%
;
display
:
block
;
}
.content-txt
{
background
:
#fff
;
padding
:
0
.16rem
.42rem
;
margin-bottom
:
.36rem
;
.tit
{
font-size
:
0
.14rem
;
font-weight
:
bold
;
line-height
:
100%
;
color
:
#333333
;
padding-top
:
.23rem
;
padding-bottom
:
.1rem
;
}
.text
{
.p
{
font-size
:
0
.12rem
;
line-height
:
0
.24rem
;
color
:
#424242
;
}
}
>
span
{
font-size
:
16px
;
line-height
:
34px
;
color
:
#666666
;
img
{
width
:
2
.59rem
;
margin-left
:
.08rem
;
margin-top
:
.27rem
;
display
:
block
;
}
}
.el-divider
{
height
:
100%
;
float
:
right
;
}
}
.tag-item.big
{
width
:
240px
;
.content-mod2
{
margin-top
:
.18rem
;
background
:
#fff
;
img
{
width
:
100%
;
}
.content-txt
{
background
:
#fff
;
padding
:
0
.16rem
.42rem
;
margin-bottom
:
.36rem
;
.p
{
font-size
:
0
.12rem
;
line-height
:
0
.24rem
;
color
:
#424242
;
margin-top
:
.35rem
;
}
}
}
}
}
...
...
pages/project-intro/certificate.vue
浏览文件 @
5057a4d1
<
template
>
<app-frame
:data=
"frameParams"
>
<div
class=
"certificate"
>
<div
class=
"checkbox"
>
<p><i></i>
{{
$t
(
'cert.txt1'
)
}}
</p>
<p><i></i>
{{
$t
(
'cert.txt2'
)
}}
</p>
<div
:class=
"isMobile ? 'is-h5' : 'is-pc'"
>
<app-frame
:data=
"frameParams"
>
<div
class=
"certificate"
>
<div
class=
"checkbox"
>
<p><i></i>
{{
$t
(
'cert.txt1'
)
}}
</p>
<p><i></i>
{{
$t
(
'cert.txt2'
)
}}
</p>
</div>
<p
class=
"text"
>
{{
$t
(
'cert.txt3'
)
}}
</p>
<img
src=
"https://webapp-pub.ezijing.com/project/kelley/project-intro-certificate-pic.png"
/>
<p
class=
"certificate-title"
>
{{
$t
(
'cert.txt4'
)
}}
</p>
<p
class=
"certificate-des"
>
{{
$t
(
'cert.txt5'
)
}}
</p>
</div>
<p
class=
"text"
>
{{
$t
(
'cert.txt3'
)
}}
</p>
<img
src=
"https://webapp-pub.ezijing.com/project/kelley/project-intro-certificate-pic.png"
/>
<p
class=
"certificate-title"
>
{{
$t
(
'cert.txt4'
)
}}
</p>
<p
class=
"certificate-des"
>
{{
$t
(
'cert.txt5'
)
}}
</p>
</div>
</app-frame>
</app-frame>
</div>
</
template
>
<
script
>
export
default
{
...
...
@@ -35,65 +37,122 @@ export default {
]
}
}
},
computed
:
{
isMobile
()
{
return
this
.
$store
.
state
.
isMobile
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.certificate
{
padding
:
40px
;
text-align
:
center
;
.checkbox
{
display
:
flex
;
width
:
450px
;
margin
:
0
auto
;
p
{
width
:
50%
;
.is-pc
{
.certificate
{
padding
:
40px
;
text-align
:
center
;
.checkbox
{
display
:
flex
;
width
:
450px
;
margin
:
0
auto
;
p
{
width
:
50%
;
text-align
:
center
;
font-size
:
22px
;
font-family
:
Source
Han
Sans
CN
;
font-weight
:
500
;
line-height
:
34px
;
color
:
#424242
;
i
{
display
:
inline-block
;
width
:
22px
;
height
:
22px
;
background
:
url('https://webapp-pub.ezijing.com/project/kelley/project-intro-certificate-icon.png')
;
background-size
:
22px
22px
;
margin-right
:
10px
;
vertical-align
:
middle
;
}
}
}
.text
{
text-align
:
center
;
font-size
:
22
px
;
font-size
:
16
px
;
font-family
:
Source
Han
Sans
CN
;
font-weight
:
5
00
;
font-weight
:
4
00
;
line-height
:
34px
;
color
:
#424242
;
i
{
display
:
inline-block
;
width
:
22px
;
height
:
22px
;
background
:
url('https://webapp-pub.ezijing.com/project/kelley/project-intro-certificate-icon.png')
;
background-size
:
22px
22px
;
margin-right
:
10px
;
vertical-align
:
middle
;
}
margin-top
:
40px
;
}
img
{
display
:
block
;
width
:
376px
;
height
:
291px
;
margin
:
40px
auto
;
}
.certificate-title
{
font-size
:
16px
;
font-family
:
Source
Han
Sans
CN
;
font-weight
:
400
;
line-height
:
34px
;
color
:
#424242
;
margin-top
:
26px
;
}
.certificate-des
{
font-size
:
14px
;
font-family
:
Source
Han
Sans
CN
;
font-weight
:
400
;
line-height
:
34px
;
color
:
#aa1941
;
}
}
.text
{
}
.is-h5
{
.certificate
{
padding
:
.3rem
.52rem
;
text-align
:
center
;
font-size
:
16px
;
font-family
:
Source
Han
Sans
CN
;
font-weight
:
400
;
line-height
:
34px
;
color
:
#424242
;
margin-top
:
40px
;
}
img
{
display
:
block
;
width
:
376px
;
height
:
291px
;
margin
:
40px
auto
;
}
.certificate-title
{
font-size
:
16px
;
font-family
:
Source
Han
Sans
CN
;
font-weight
:
400
;
line-height
:
34px
;
color
:
#424242
;
margin-top
:
26px
;
}
.certificate-des
{
font-size
:
14px
;
font-family
:
Source
Han
Sans
CN
;
font-weight
:
400
;
line-height
:
34px
;
color
:
#aa1941
;
.checkbox
{
display
:
flex
;
// width: 450px;
margin
:
0
auto
;
p
{
width
:
50%
;
text-align
:
center
;
// font-size: .12rem;
font-family
:
Source
Han
Sans
CN
;
font-weight
:
500
;
line-height
:
.17rem
;
color
:
#424242
;
i
{
display
:
inline-block
;
width
:
.18rem
;
height
:
.18rem
;
background
:
url('https://webapp-pub.ezijing.com/project/kelley/project-intro-certificate-icon.png')
;
background-size
:
.18rem
.18rem
;
margin-right
:
.05rem
;
vertical-align
:
middle
;
}
}
}
.text
{
text-align
:
center
;
font-size
:
.12rem
;
color
:
#424242
;
margin-top
:
.2rem
;
}
img
{
display
:
block
;
width
:
100%
;
display
:
block
;
// height: 291px;
margin
:
.2rem
auto
;
}
.certificate-title
{
font-size
:
.12rem
;
color
:
#424242
;
margin-top
:
.13rem
;
}
.certificate-des
{
color
:
#aa1941
;
}
}
}
</
style
>
\ No newline at end of file
pages/project-intro/charac.vue
浏览文件 @
5057a4d1
<
template
>
<app-frame
:data=
"frameParams"
>
<ul
class=
"card"
>
<li
v-for=
"item in list"
:key=
"item.title"
>
<div
class=
"left"
>
<img
:src=
"item.img"
/>
</div>
<div
class=
"right"
>
<h5>
{{
item
.
title
}}
</h5>
<p
v-for=
"text in item.texts"
:key=
"text"
>
{{
text
}}
</p>
</div>
</li>
</ul>
</app-frame>
<div
:class=
"isMobile ? 'is-h5' : 'is-pc'"
>
<app-frame
:data=
"frameParams"
>
<ul
class=
"card"
>
<li
v-for=
"item in list"
:key=
"item.title"
>
<div
class=
"left"
>
<img
:src=
"item.img"
/>
</div>
<div
class=
"right"
>
<h5>
{{
item
.
title
}}
</h5>
<p
v-for=
"text in item.texts"
:key=
"text"
>
{{
text
}}
</p>
</div>
</li>
</ul>
</app-frame>
</div>
</
template
>
<
script
>
export
default
{
...
...
@@ -53,44 +55,90 @@ export default {
]
}
}
},
computed
:
{
isMobile
()
{
return
this
.
$store
.
state
.
isMobile
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.card
{
width
:
763px
;
margin
:
0
auto
0
;
padding
:
80px
0
30px
;
li
{
height
:
205px
;
background
:
#f9f8f8
;
box-shadow
:
0px
3px
10px
rgba
(
0
,
0
,
0
,
0
.09
);
margin-bottom
:
50px
;
display
:
flex
;
.left
{
width
:
212px
;
// background:#fcfcfc;
img
{
width
:
120px
;
height
:
120px
;
margin
:
43px
0
0
47px
;
.is-pc
{
.card
{
width
:
763px
;
margin
:
0
auto
0
;
padding
:
80px
0
30px
;
li
{
height
:
205px
;
background
:
#f9f8f8
;
box-shadow
:
0px
3px
10px
rgba
(
0
,
0
,
0
,
0
.09
);
margin-bottom
:
50px
;
display
:
flex
;
.left
{
width
:
212px
;
// background:#fcfcfc;
img
{
width
:
120px
;
height
:
120px
;
margin
:
43px
0
0
47px
;
}
}
.right
{
width
:
calc
(
100%
-
212px
);
padding-top
:
20px
;
h5
{
font-size
:
22px
;
font-family
:
Source
Han
Sans
CN
;
font-weight
:
500
;
line-height
:
44px
;
color
:
#333333
;
}
p
{
color
:
#424242
;
font-size
:
16px
;
font-family
:
Source
Han
Sans
CN
;
line-height
:
36px
;
}
}
}
.right
{
width
:
calc
(
100%
-
212px
);
padding-top
:
20px
;
h5
{
font-size
:
22px
;
font-family
:
Source
Han
Sans
CN
;
font-weight
:
500
;
line-height
:
44px
;
color
:
#333333
;
}
}
.is-h5
{
.card
{
background
:
#fff
;
// padding: .24rem .15rem .56rem;
li
{
background
:
#f9f8f8
;
box-shadow
:
0
0
0
rgb
(
0
0
0
/
9%
);
margin-bottom
:
.16rem
;
display
:
flex
;
align-items
:
center
;
box-sizing
:
border-box
;
padding
:
.16rem
.14rem
.1rem
;
.left
{
img
{
width
:
.72rem
;
height
:
.72rem
;
display
:
block
;
}
}
p
{
color
:
#424242
;
font-size
:
16px
;
font-family
:
Source
Han
Sans
CN
;
line-height
:
36px
;
.right
{
margin-left
:
.23rem
;
h5
{
font-size
:
.12rem
;
font-weight
:
700
;
line-height
:
100%
;
color
:
#333
;
margin-bottom
:
.16rem
;
}
p
{
font-size
:
.1rem
;
font-family
:
Source
Han
Sans
CN
;
line-height
:
100%
;
color
:
#424242
;
margin-bottom
:
.1rem
;
}
}
}
}
...
...
pages/project-intro/components/TabContent.vue
0 → 100644
浏览文件 @
5057a4d1
<
template
>
<ul
class=
"tab-content"
>
<li
v-for=
"(item, index) in items"
:key=
"index"
:class=
"activeIndex === index && 'active'"
@
click=
"tabChange(index)"
>
{{
item
}}
</li>
</ul>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
items
:
[
this
.
$t
(
'bg.tabBtn1'
),
this
.
$t
(
'bg.tabBtn2'
),
this
.
$t
(
'bg.tabBtn3'
)],
activeIndex
:
0
}
},
methods
:
{
tabChange
(
n
)
{
this
.
activeIndex
=
n
this
.
$emit
(
'tabChange'
,
n
)
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.tab-content
{
padding-top
:
.2rem
;
display
:
flex
;
justify-content
:
space-between
;
li
{
width
:
1
.1rem
;
height
:
0
.75rem
;
line-height
:
.75rem
;
background
:
#FFFFFF
;
text-align
:
center
;
font-size
:
0
.13rem
;
font-weight
:
bold
;
color
:
#333333
;
position
:
relative
;
&
.active
{
color
:
#AA1941
;
&
:
:
after
{
content
:
''
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
0
.04rem
;
background
:
#AA1941
}
}
}
}
</
style
>
pages/project-intro/components/TabNav.vue
0 → 100644
浏览文件 @
5057a4d1
<
template
>
<tab-nav
:list=
"list"
v-bind=
"$attrs"
></tab-nav>
</
template
>
<
script
>
import
TabNav
from
'@/components/base/h5/TabNav'
export
default
{
components
:
{
TabNav
},
data
()
{
return
{
list
:
[
{
name
:
this
.
$t
(
'menu.projectChild.bg'
),
path
:
'/project/bg'
,
value
:
'1'
},
{
name
:
this
.
$t
(
'menu.projectChild.feature'
),
path
:
'/project/charac'
,
value
:
'2'
},
{
name
:
this
.
$t
(
'menu.projectChild.cert'
),
path
:
'/project/certificate'
,
value
:
'3'
}
]
}
}
}
</
script
>
<
style
>
</
style
>
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论