<template>
<div class="doctor-wrapper pl-3 pt-3 pb-8 pr-3">
<div class="doc-name subtitle-1 mb-2 main-title">{{componentConfig.mainTitle}}</div>
<div class="doc-desc subtitle-2 d-flex justify-space-between mb-2">
<span class="sub-title">{{componentConfig.subTitle}}</span>
</div>
<div
:class="['desc subtitle-0']"
ref="desc"
:style="{display:!isFold ? 'inherit' : '-webkit-box'}"
>{{componentConfig.cmptTxt}}s杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水</div>
<i :class="['iconfont iconarrow-down doc-more', !isFold ? 'fold' : '']" @click="fold"></i>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
componentConfig: {
required: true,
},
},
data: () => ({
isFold: true,
class: {},
}),
methods: {
fold() {
this.isFold = !this.isFold;
},
},
});
</script>
<style lang="scss" scoped>
.doctor-wrapper {
box-sizing: border-box;
background-color: #eeeeee;
margin: 0 20px;
overflow: hidden;
.doc-name {
color: #333;
margin-top: 14px;
margin-bottom: 14px;
}
position: relative;
.iconarrow-down {
position: absolute;
left: 50%;
bottom: 0px;
padding: 10px;
transform: translate3d(-50%, 0, 0);
transition: transform 0.3s ease;
&.fold {
transform: translate3d(-50%, 0, 0) rotateZ(180deg);
}
}
.desc {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
white-space: pre-wrap;
word-wrap: break-word;
line-height: 1.2;
max-height: 800px;
transition: max-height 0.3s ease;
font-size: 14px;
color: #909090;
letter-spacing: 1px;
&.fold {
max-height: 0px;
overflow: hidden;
}
}
.sub-title {
font-weight: 600;
font-size: 14px;
font-family: HiraginoSansGB;
font-weight: normal;
color: #323232 !important;
line-height: 36px;
margin-top: 14px;
}
}
#HX {
position: fixed;
display: block;
right: 1%;
bottom: 10%;
background: #000;
width: 3.25rem;
text-align: center;
color: #fff;
border-radius: 4px;
height: 1rem;
line-height: 1rem !important;
font-size: 16px !important;
z-index: 9;
}
.main-title {
font-size: 14px;
font-family: HiraginoSansGB;
font-weight: 700;
color: #323232;
}
</style>
css折叠栏,伸长收缩
最新推荐文章于 2024-07-16 09:10:34 发布