Skip to content

P
project-online-pc
提交 c3635d7a authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

修改样式

上级 68ff2cad
隐藏空白字符变更
内嵌 并排
正在显示 包含 227 行增加 和 43 行删除
pages/about/course.vue
浏览文件 @ c3635d7a
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="course-content-box"> <app-frame :data="frameParams">
<app-frame :data="frameParams"> <div class="course-content-box" v-if="!isMobile">
<div class="content-mian"> <div class="content-mian">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/course-chart.png"> <div class="border-box">
<template v-for="(item, index) in courseData">
<div class="item-box" :key="index">
<div class="title">{{ item.title }}</div>
<div class="right-content">
<ul>
<li v-for="(cItem, cIndex) in item.item" :key="cIndex + 'l'">
<div class="text">{{ cItem.name }}</div>
<div class="score" v-if="cItem.score">学分：{{ cItem.score }}</div>
</li>
</ul>
</div>
</div>
</template>
</div>
</div> </div>
</app-frame> </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" v-if="cItem.score">学分：{{ cItem.score }}</div>
</li>
</ul>
</div>
</div>
</app-frame>
</div> </div>
</template> </template>
<script> <script>
...@@ -18,6 +43,37 @@ export default { ...@@ -18,6 +43,37 @@ export default {
}, },
data() { data() {
return { return {
courseData: [
{
title: '先修课程',
item: [
{ name: '金融市场学', score: 0 }
]
},
{
title: '必修课程',
item: [
{ name: '设计思维与管理创新', score: 3 },
{ name: '管理沟通', score: 3 },
{ name: '营销管理与数字化营销', score: 3 },
{ name: '数字时代领导力', score: 3 },
{ name: '财务规划与管理', score: 3 },
{ name: '商法', score: 3 },
{ name: '正念领导力', score: 3 },
{ name: '数字化运营管理', score: 3 },
{ name: '商业研究方法', score: 3 },
{ name: '商业智能', score: 3 },
{ name: '战略管理', score: 3 },
{ name: '数字化管理信息系统', score: 3 }
]
},
{
title: '毕业环节',
item: [
{ name: '毕业典礼&美国游学（可选）' }
]
}
],
frameParams: { frameParams: {
banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_banner_nx4.jpg', banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_banner_nx4.jpg',
slider: [ slider: [
...@@ -33,8 +89,7 @@ export default { ...@@ -33,8 +89,7 @@ export default {
} }
} }
}, },
mounted() { mounted() {},
},
computed: { computed: {
isMobile() { isMobile() {
return this.$store.state.isMobile return this.$store.state.isMobile
...@@ -43,26 +98,12 @@ export default { ...@@ -43,26 +98,12 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.is-h5{
.course-content-box{
.content-mian{
img{
width: 100%;
display: block;
}
}
}
}
.is-pc{ .is-pc{
.course-content-box { .course-content-box {
width: 1200px; // width: 1200px;
margin: 0 auto; // margin: 0 auto;
.content-mian { .content-mian {
// padding: 106px 141px 110px 96px; padding: 106px 141px 110px 96px;
img{
width: 100%;
display: block;
}
.border-box { .border-box {
padding: 35px 0 51px; padding: 35px 0 51px;
border-top: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;
...@@ -90,7 +131,7 @@ export default { ...@@ -90,7 +131,7 @@ export default {
color: #aa1941; color: #aa1941;
} }
.right-content { .right-content {
width: 630px; width: 562px;
li { li {
height: 32px; height: 32px;
background: #f7f7f7; background: #f7f7f7;
...@@ -100,7 +141,7 @@ export default { ...@@ -100,7 +141,7 @@ export default {
background: none; background: none;
} }
.text { .text {
width: 497px; width: 397px;
padding-left: 30px; padding-left: 30px;
font-size: 16px; font-size: 16px;
color: #333333; color: #333333;
...@@ -116,4 +157,43 @@ export default { ...@@ -116,4 +157,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> </style>
pages/about/teacher.vue
浏览文件 @ c3635d7a
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="teacher-content-box"> <app-frame :data="frameParams">
<app-frame :data="frameParams"> <div class="teacher-content-box">
<div class="content-box"> <div class="content-box">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marywood-teacher-all.png" style="width:100%;display:block"> <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>
</app-frame> </div>
</div> </app-frame>
</div> </div>
</template> </template>
<script> <script>
...@@ -18,6 +31,63 @@ export default { ...@@ -18,6 +31,63 @@ export default {
}, },
data() { data() {
return { return {
teacherList: [
{
title: this.$t('teachers.tit1'),
list: [
{
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary-tea-t1.png',
name: 'Arthur Comstock',
intr: '理海大学博士<br />教授兼系主任'
},
{
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary-tea-t2.png',
name: 'Chris Speicher',
intr: '天普大学博士<br />副教授'
},
{
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary-tea-t3.png',
name: 'Kerimcan Ozcan',
intr: '密西根大学博士<br />副教授'
},
{
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary-tea-t4.png',
name: 'Monica Law',
intr: '宾夕法尼亚州立大学博士<br />副教授'
},
{
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary-tea-t5.png',
name: 'Uldarico Rex Dumdum',
intr: '纽约州立大学宾汉姆顿分校博士<br />副教授'
}
]
},
{
title: this.$t('teachers.tit2'),
list: [
{
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary-tea-t6.png',
name: '肇越',
intr: '清华大学五道口金融学院经济学博士<br />香港致富证券首席经济学家'
},
{
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary-tea-t7.png',
name: '张恩忠',
intr: '美国普渡大学博士<br />中国人民大学市场营销系副教授'
},
{
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary-tea-t8.png',
name: '冯云霞',
intr: '荷兰马斯特里赫特商学院工商管理博士<br />中国人民大学组织与人力资源系教授'
},
{
image: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary-tea-t9.png',
name: '王小华',
intr: '加拿大西安大略大学博士<br />北京师范大学心理学部副教授'
}
]
}
],
frameParams: { frameParams: {
banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_banner_nx4.jpg', banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_banner_nx4.jpg',
slider: [ slider: [
...@@ -43,17 +113,6 @@ export default { ...@@ -43,17 +113,6 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.is-h5{
.teacher-content-box{
.content-box{
padding: .3rem .37rem .3rem;
img{
width: 100%;
display: block;
}
}
}
}
.is-pc{ .is-pc{
.teacher-content-box { .teacher-content-box {
width: 1200px; width: 1200px;
...@@ -91,7 +150,7 @@ export default { ...@@ -91,7 +150,7 @@ export default {
} }
.p { .p {
font-size: 14px; font-size: 14px;
line-height: 100%; // line-height: 100%;
color: #666666; color: #666666;
white-space: nowrap; white-space: nowrap;
margin-bottom: 5px; margin-bottom: 5px;
...@@ -102,4 +161,49 @@ export default { ...@@ -102,4 +161,49 @@ export default {
} }
} }
} }
.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;
}
}
}
}
}
}
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论