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