Skip to content

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

修改样式

上级 c9de507d
隐藏空白字符变更
内嵌 并排
正在显示 包含 430 行增加 和 191 行删除
components/ArticleListItem.vue
浏览文件 @ 201e8877
...@@ -94,7 +94,7 @@ export default { ...@@ -94,7 +94,7 @@ export default {
.article-item-pic { .article-item-pic {
display: block; display: block;
width: 100%; width: 100%;
height: fit-content; // height: fit-content;
// height: 2.99rem; // height: 2.99rem;
// object-fit: cover; // object-fit: cover;
} }
......
components/base/h5/Menu.vue
浏览文件 @ 201e8877
...@@ -47,7 +47,7 @@ export default { ...@@ -47,7 +47,7 @@ export default {
name: '校友风采', name: '校友风采',
children: [ children: [
{ name: '杰出校友', path: '/alumni/outstanding' }, { name: '杰出校友', path: '/alumni/outstanding' },
{ name: '校友分享', path: '/alumni/share' } { name: '校友分享', path: '/alumni/sharing' }
] ]
}, },
{ {
......
components/home/openClass.vue
浏览文件 @ 201e8877
...@@ -169,8 +169,8 @@ export default { ...@@ -169,8 +169,8 @@ export default {
.case-pic { .case-pic {
display: block; display: block;
width: 100%; width: 100%;
height: 1.17rem; // height: 1.17rem;
object-fit: cover; // object-fit: cover;
} }
.case-title { .case-title {
position: absolute; position: absolute;
......
pages/alumni/sharing/_id.vue
浏览文件 @ 201e8877
<template> <template>
<app-frame :data="frameParams"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="detail-content-box"> <app-frame :data="frameParams">
<div class="content-box"> <div class="detail-content-box">
<div class="back-btn" @click="$router.go(-1)"> <div class="content-box">
<div class="el-icon-arrow-left"></div> <div class="back-btn" @click="$router.go(-1)">
<div class="text">返回</div> <div class="el-icon-arrow-left"></div>
<div class="text">返回</div>
</div>
<div class="times">{{ formatDate(data.start_time) }}</div>
<div class="titles">{{ data.title }}</div>
<div class="article-content" v-html="data.content"></div>
<recommend />
</div> </div>
<div class="times">{{ formatDate(data.start_time) }}</div>
<div class="titles">{{ data.title }}</div>
<div class="article-content" v-html="data.content"></div>
<recommend />
</div> </div>
</div> </app-frame>
</app-frame> </div>
</template> </template>
<script> <script>
import appFrame from '@/components/appFrame' import appFrame from '@/components/appFrame'
...@@ -53,111 +55,228 @@ export default { ...@@ -53,111 +55,228 @@ export default {
console.log(date.getMonth()) console.log(date.getMonth())
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
} }
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.detail-content-box { ::v-deep{
// width: 1000px; img{
// background: #fff; width: 100%;
// box-sizing: border-box; height: auto !important;
// margin-bottom: 100px; display: block;
.content-box {
padding: 50px 50px 94px;
} }
.back-btn { }
display: flex; .is-pc{
align-items: center; .detail-content-box {
cursor: pointer; // background: #fff;
.el-icon-arrow-left { // box-sizing: border-box;
color: rgba(153, 153, 153, 1); // margin-bottom: 100px;
.content-box {
padding: 50px 50px 94px;
}
.back-btn {
display: flex;
align-items: center;
cursor: pointer;
.el-icon-arrow-left {
color: rgba(153, 153, 153, 1);
font-size: 16px;
}
.text {
font-size: 16px;
color: #999999;
}
}
.times {
font-size: 16px; font-size: 16px;
line-height: 100%;
margin: 35px 0 16px;
color: #999999;
} }
.text { .titles {
font-size: 32px;
font-weight: bold;
color: #141414;
// height: 62px;
border-bottom: 1px solid #e6e6e6;
padding-bottom: 10px;
// line-height: 100%;
}
.article-content {
padding-top: 25px;
font-size: 14px;
line-height: 28px;
color: #333333;
img {
display: block;
width: 100%;
margin-top: 40px;
}
}
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: 37px;
.titles {
display: flex;
align-items: center;
.line {
width: 6px;
height: 22px;
background: #aa1941;
}
.text {
font-size: 22px;
color: #333333;
margin-left: 10px;
}
}
.list-box {
margin-top: 50px;
display: flex;
justify-content: space-between;
li {
width: 280px;
img {
width: 280px;
height: 184px;
display: block;
}
.dec {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 16px;
line-height: 26px;
color: #333333;
margin-top: 10px;
}
}
}
}
.more-btn {
position: relative;
z-index: 999;
width: 164px;
height: 40px;
border: 1px solid #d3d3d3;
border-radius: 8px;
line-height: 40px;
text-align: center;
font-size: 16px; font-size: 16px;
color: #999999; color: #999999;
margin: 50px auto 0;
cursor: pointer;
} }
} }
.times { }
font-size: 16px; .is-h5{
line-height: 100%; .detail-content-box {
margin: 35px 0 16px; // background: #fff;
color: #999999; // box-sizing: border-box;
} // margin-bottom: 100px;
.titles { .content-box {
font-size: 32px; padding: .25rem .25rem .47rem;
font-weight: bold;
color: #141414;
// height: 62px;
border-bottom: 1px solid #e6e6e6;
padding-bottom: 10px;
// line-height: 100%;
}
.article-content {
padding-top: 25px;
font-size: 14px;
line-height: 28px;
color: #333333;
img {
display: block;
width: 100%;
margin-top: 40px;
} }
} .back-btn {
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: 37px;
.titles {
display: flex; display: flex;
align-items: center; align-items: center;
.line { cursor: pointer;
width: 6px; .el-icon-arrow-left {
height: 22px; color: rgba(153, 153, 153, 1);
background: #aa1941; font-size: 16px;
} }
.text { .text {
font-size: 22px; font-size: .14rem;
color: #333333; color: #999999;
margin-left: 10px;
} }
} }
.list-box { .times {
margin-top: 50px; font-size: .14rem;
display: flex; line-height: 100%;
justify-content: space-between; margin: .17rem 0 .08rem;
li { color: #999999;
width: 280px; }
img { .titles {
width: 280px; font-size: .18rem;
height: 184px; font-weight: bold;
display: block; color: #141414;
// height: 62px;
border-bottom: 1px solid #e6e6e6;
padding-bottom: .05rem;
// line-height: 100%;
}
.article-content {
padding-top: .13rem;
font-size: .12rem;
line-height: .14rem;
color: #333333;
img {
display: block;
width: 100%;
margin-top: .2rem;
}
}
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: .17rem;
.titles {
display: flex;
align-items: center;
.line {
width: .03rem;
height: .11rem;
background: #aa1941;
} }
.dec { .text {
display: -webkit-box; font-size: .16rem;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 16px;
line-height: 26px;
color: #333333; color: #333333;
margin-top: 10px; margin-left: .05rem;
}
}
.list-box {
margin-top: .25rem;
display: flex;
justify-content: space-between;
li {
width: 1.4rem;
img {
width: 1.4rem;
height: .92rem;
display: block;
}
.dec {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: .14rem;
line-height: .13rem;
color: #333333;
margin-top: .05rem;
}
} }
} }
} }
} .more-btn {
.more-btn { position: relative;
position: relative; z-index: 999;
z-index: 999; width: .82rem;
width: 164px; height: .2rem;
height: 40px; border: 1px solid #d3d3d3;
border: 1px solid #d3d3d3; border-radius: .04rem;
border-radius: 8px; line-height: .2re,;
line-height: 40px; text-align: center;
text-align: center; font-size: .14rem;
font-size: 16px; color: #999999;
color: #999999; margin: .25rem auto 0;
margin: 50px auto 0; cursor: pointer;
cursor: pointer; }
} }
} }
</style> </style>
pages/news/hot/_id.vue
浏览文件 @ 201e8877
<template> <template>
<app-frame :data="frameParams"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="detail-content-box"> <app-frame :data="frameParams">
<div class="content-box"> <div class="detail-content-box">
<div class="back-btn" @click="$router.go(-1)"> <div class="content-box">
<div class="el-icon-arrow-left"></div> <div class="back-btn" @click="$router.go(-1)">
<div class="text">返回</div> <div class="el-icon-arrow-left"></div>
<div class="text">返回</div>
</div>
<div class="times">{{ formatDate(data.start_time) }}</div>
<div class="titles">{{ data.title }}</div>
<div class="article-content" v-html="data.content"></div>
<recommend />
</div> </div>
<div class="times">{{ formatDate(data.start_time) }}</div>
<div class="titles">{{ data.title }}</div>
<div class="article-content" v-html="data.content"></div>
<recommend />
</div> </div>
</div> </app-frame>
</app-frame> </div>
</template> </template>
<script> <script>
import appFrame from '@/components/appFrame' import appFrame from '@/components/appFrame'
...@@ -52,110 +54,228 @@ export default { ...@@ -52,110 +54,228 @@ export default {
console.log(date.getMonth()) console.log(date.getMonth())
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
} }
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.detail-content-box { ::v-deep{
// background: #fff; img{
// box-sizing: border-box; width: 100%;
// margin-bottom: 100px; height: auto !important;
.content-box { display: block;
padding: 50px 50px 94px;
} }
.back-btn { }
display: flex; .is-pc{
align-items: center; .detail-content-box {
cursor: pointer; // background: #fff;
.el-icon-arrow-left { // box-sizing: border-box;
color: rgba(153, 153, 153, 1); // margin-bottom: 100px;
.content-box {
padding: 50px 50px 94px;
}
.back-btn {
display: flex;
align-items: center;
cursor: pointer;
.el-icon-arrow-left {
color: rgba(153, 153, 153, 1);
font-size: 16px;
}
.text {
font-size: 16px;
color: #999999;
}
}
.times {
font-size: 16px; font-size: 16px;
line-height: 100%;
margin: 35px 0 16px;
color: #999999;
} }
.text { .titles {
font-size: 32px;
font-weight: bold;
color: #141414;
// height: 62px;
border-bottom: 1px solid #e6e6e6;
padding-bottom: 10px;
// line-height: 100%;
}
.article-content {
padding-top: 25px;
font-size: 14px;
line-height: 28px;
color: #333333;
img {
display: block;
width: 100%;
margin-top: 40px;
}
}
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: 37px;
.titles {
display: flex;
align-items: center;
.line {
width: 6px;
height: 22px;
background: #aa1941;
}
.text {
font-size: 22px;
color: #333333;
margin-left: 10px;
}
}
.list-box {
margin-top: 50px;
display: flex;
justify-content: space-between;
li {
width: 280px;
img {
width: 280px;
height: 184px;
display: block;
}
.dec {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 16px;
line-height: 26px;
color: #333333;
margin-top: 10px;
}
}
}
}
.more-btn {
position: relative;
z-index: 999;
width: 164px;
height: 40px;
border: 1px solid #d3d3d3;
border-radius: 8px;
line-height: 40px;
text-align: center;
font-size: 16px; font-size: 16px;
color: #999999; color: #999999;
margin: 50px auto 0;
cursor: pointer;
} }
} }
.times { }
font-size: 16px; .is-h5{
line-height: 100%; .detail-content-box {
margin: 35px 0 16px; // background: #fff;
color: #999999; // box-sizing: border-box;
} // margin-bottom: 100px;
.titles { .content-box {
font-size: 32px; padding: .25rem .25rem .47rem;
font-weight: bold;
color: #141414;
// height: 62px;
border-bottom: 1px solid #e6e6e6;
padding-bottom: 10px;
// line-height: 100%;
}
.article-content {
padding-top: 25px;
font-size: 14px;
line-height: 28px;
color: #333333;
img {
display: block;
width: 100%;
margin-top: 40px;
} }
} .back-btn {
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: 37px;
.titles {
display: flex; display: flex;
align-items: center; align-items: center;
.line { cursor: pointer;
width: 6px; .el-icon-arrow-left {
height: 22px; color: rgba(153, 153, 153, 1);
background: #aa1941; font-size: 16px;
} }
.text { .text {
font-size: 22px; font-size: .14rem;
color: #333333; color: #999999;
margin-left: 10px;
} }
} }
.list-box { .times {
margin-top: 50px; font-size: .14rem;
display: flex; line-height: 100%;
justify-content: space-between; margin: .17rem 0 .08rem;
li { color: #999999;
width: 280px; }
img { .titles {
width: 280px; font-size: .18rem;
height: 184px; font-weight: bold;
display: block; color: #141414;
// height: 62px;
border-bottom: 1px solid #e6e6e6;
padding-bottom: .05rem;
// line-height: 100%;
}
.article-content {
padding-top: .13rem;
font-size: .12rem;
line-height: .14rem;
color: #333333;
img {
display: block;
width: 100%;
margin-top: .2rem;
}
}
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: .17rem;
.titles {
display: flex;
align-items: center;
.line {
width: .03rem;
height: .11rem;
background: #aa1941;
} }
.dec { .text {
display: -webkit-box; font-size: .16rem;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 16px;
line-height: 26px;
color: #333333; color: #333333;
margin-top: 10px; margin-left: .05rem;
}
}
.list-box {
margin-top: .25rem;
display: flex;
justify-content: space-between;
li {
width: 1.4rem;
img {
width: 1.4rem;
height: .92rem;
display: block;
}
.dec {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: .14rem;
line-height: .13rem;
color: #333333;
margin-top: .05rem;
}
} }
} }
} }
} .more-btn {
.more-btn { position: relative;
position: relative; z-index: 999;
z-index: 999; width: .82rem;
width: 164px; height: .2rem;
height: 40px; border: 1px solid #d3d3d3;
border: 1px solid #d3d3d3; border-radius: .04rem;
border-radius: 8px; line-height: .2re,;
line-height: 40px; text-align: center;
text-align: center; font-size: .14rem;
font-size: 16px; color: #999999;
color: #999999; margin: .25rem auto 0;
margin: 50px auto 0; cursor: pointer;
cursor: pointer; }
} }
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论