代碼如下：
<template>
<div class="main">
<div class="cont">
<div class="basic-info">
<div class="title">{{meetingInfo.meetingName}}</div>
<div class="descript"
:class="{fold: meetingInfo.introduce.length > 130 && isFold}">
{{meetingInfo.introduce}}
<span class="more no-fold"
v-show="meetingInfo.introduce.length > 130 && isFold"
@click="handleFold()"><i>...</i>查看全部</span>
<span class="more"
v-show="meetingInfo.introduce.length > 130 && !isFold"
@click="handleFold()">收起全部</span>
</div>
</div>
<div class="place-time">
<ul class='basic-list'>
<li class='basic-item'>
<span class='item-icon address'></span>
<span class='item-text'>{{meetingInfo.address}}</span>
</li>
<li class='basic-item'>
<span class='item-icon time'></span>
<span class='item-text time'>{{meetingInfo.meetingTime}}</span>
</li>
</ul>
<div class="time-interval">
<p class="text">10:30</p>
<p class="icon-interval"></p>
<p class="text">12:00</p>
</div>
<div class="btn"
@click="onJump()">簽到</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
isFold: true,
meetingInfo: {
meetingName: '這是一個很長很長很很長很長很的會議標題',
introduce: '個人的生命都是一次單程的旅行绊起，不管你的路是長還是短腔彰，只要終點一到，所有生命以外的東西都得卸下世曾，不論是金錢財富缨恒，還是功名利祿，所有你昔日苦苦追求而來的都不會帶走一絲一毫轮听。個人的生命都是一次單程的旅行骗露，不管你的路是長還是短，只要終點一到血巍，所有生命以外的東西都得卸下萧锉，不論是金錢財富，還是功名利祿述寡，所有你昔日苦苦追求而來的都不會帶走一絲一毫柿隙。個人的生命都是一次單程的旅行叶洞，不管你的路是長還是短，只要終點一到禀崖，所有生命以外的東西都得卸下衩辟，不論是金錢財富，還是功名利祿帆焕，所有你昔日苦苦追求而來的都不會帶走一絲一毫惭婿。個人的生命都是一次單程的旅行，不管你的路是長還是短叶雹，只要終點一到财饥，所有生命以外的東西都得卸下，不論是金錢財富折晦，還是功名利祿钥星，所有你昔日苦苦追求而來的都不會帶走一絲一毫。個人的生命都是一次單程的旅行满着，不管你的路是長還是短谦炒，只要終點一到，所有生命以外的東西都得卸下风喇，不論是金錢財富宁改，還是功名利祿，所有你昔日苦苦追求而來的都不會帶走一絲一毫魂莫。個人的生命都是一次單程的旅行还蹲，不管你的路是長還是短，只要終點一到耙考，所有生命以外的東西都得卸下谜喊，不論是金錢財富，還是功名利祿倦始，所有你昔日苦苦追求而來的都不會帶走一絲一毫斗遏。',
meetingTime: '2021年05月12日',
address: '上海市徐匯區(qū)肇嘉浜路五洲國際大廈8樓801室',
startTime: '10:30',
endTime: '12:00'
}
}
},
methods: {
onJump () {
this.$router.push({ name: 'signResult' })
},
handleFold () {
this.isFold = !this.isFold
}
}
}
</script>
<style lang="stylus" scoped>
.main
width 100%
min-height 100vh
background url('~assets/img/sign_bg@3x.png') no-repeat center top/ 100% auto
padded_box(border-box,24px 12px)
.cont
width 100%
background #fff
border-radius 12px
.basic-info
width 100%
padded_box(border-box,24px 12px)
position relative
&::after
content ''
display block
width calc(100% - 26px)
height: 1px;
background-image: linear-gradient(to right, #eee 0%, #eee 50%, transparent 50%);
background-size: 10px 1px;
background-repeat: repeat-x;
position absolute
bottom 0
left 50%
transform translate(-50%, 0)
.title
width 100%
height 22px
line-height 22px
font-size 16px
font-weight 700
color #333
noWrap()
.descript
line-height 20px
font-size 14px
color #666666
margin-top 8px
position relative
&.fold
height 100px
ellipsis(5)
.more
float right
line-height 20px
font-size 12px
color #0080ff
&.no-fold
float none
display inline-block
background #fff
position absolute
right 0
bottom -1px
i
font-size 14px
color #666
margin-right 12px
.place-time
width 100%
padded_box(border-box,24px 10px 40px)
.basic-list
padded_box(border-box,0 2px)
.basic-item
display flex
align-items center
& + .basic-item
margin-top 12px
.item-icon
flex none
width 16px
height 16px
margin-right 6px
bgCover()
&.time
background-image url('~assets/img/icon_time@3x.png')
&.address
background-image url('~assets/img/icon_location@3x.png')
.item-text
width calc(100% - 22px)
height 20px
font-size: 14px;
color: #666666;
line-height: 20px
noWrap()
&.time
font-size 16px
.time-interval
width 100%
display flex
justify-content center
align-items center
margin-top 4px
.text
line-height 56px
font-size 40px
font-weight 700
color #333
.icon-interval
width 40px
height 40px
background url('~assets/img/icon_to@3x.png') no-repeat center / 100%
margin 0 24px
.btn
width 100%
height 42px
background #0080FF
line-height 42px
text-align center
font-size 14px
color #fff
border-radius 21px
margin-top 32px
</style>
效果圖如下：
image.png
image.png
