实现文本下方查看更多

效果图

 

 

      <div class="appoint_notice">
        <h1 style="font-size: 0.4rem; padding-bottom: 0.2rem">预约须知</h1>
        <div class="appoint_notice_box" :style="appointBox">
          <p
            v-for="(item, index) in appointmentNotice"
            :key="index"
            class="appoint_notice_text"
          >
            {{ item.text }}
          </p>
          <div class="seeMore" @click="seeMoreInfo" :style="seeMoreInfos">
            <p>查看更多</p>
            <img
              src="@/assets/images/physical/jiantou.png"
              style="width: 0.24rem; height: 0.13rem"
              alt=""
            />
          </div>
          <div class="stow" @click="stowInfo" :style="stowInfos">
            <p>收起</p>
            <img
              src="@/assets/images/physical/stow.png"
              style="width: 0.24rem; height: 0.13rem"
              alt=""
            />
          </div>
        </div>
      </div>

 css

    .appoint_notice {
      margin-top: 0.2rem;
      margin-bottom: 0.5rem;
      background: #fff;
      padding: 0.3rem;
      border-radius: 0.2rem;
      position: relative;

      .appoint_notice_box {
        height: 2.6rem;
        overflow: hidden;
        margin-bottom: 0.3rem;
        .appoint_notice_text {
          color: #252525;
          line-height: 0.5rem;
          font-weight: 400;
          font-size: 0.3rem;
        }
        .seeMore,
        .stow {
          position: absolute;
          left: 39%;
          bottom: 1%;
          display: flex;
          align-items: center;
          color: #afafaf;
        }
      }
    }

js

  data() {
    return {
      stowInfos: { display: 'none' },
      seeMoreInfos: {},
      appointmentNotice: [
        {
          text: '1、 检前 24 小时须禁饮酒，禁食高脂肪、高蛋白及糖类食物，检查当日早晨须禁食水。',
        },
        {
          text: '2、尿常规检查最好留取晨尿，抽血后可饮水憋尿做全腹彩超(饮水不会影响上腹部彩超结果)。',
        },
        { text: '3、 患高血压的宾客，请于抽血后正常服药。' },
        {
          text: '4、妇科检查需在做完妇科彩超后排尽尿液进行，月经期间不宜进行妇科检查及尿检。未婚女性不宜做妇检(有特殊要求者只能做肛诊)。',
        },
        {
          text: '5、同时有胸部X 光拍片、CT和胃肠造影检查时，应先做胸片、CT、全腹彩超后再做胃肠造影，拍片时请勿穿戴有金属纽扣的衣服和文胸，勿戴项链。',
        },
        {
          text: '6、为了确保检查结果的准确性，做脑彩超检查者，在不影响健康的前提下，前三天停服对脑血管有影响的药物。同时应在空腹项目做完进饮食后进行脑彩超检查。',
        },
        { text: '7、 早餐请于抽血、C14、腹部彩超、胃肠造影检查后进行。' },
        { text: '8、请您妥善保存体检使用的各种检查单及条形码，丢失不补。' },
        {
          text: '9、请您按我院体检中心导检护士指引的健康体检流程进行体检，全部检查结束后请将“指引单”交回体检中心前台登记站。',
        },
        {
          text: '10、在体检过程中，难免有排队等待的现象，请您谅解，切勿心急，保持良好的心情。祝您永远健康，快乐!',
        },
      ],
    }
  },

  methods: {
        stowInfo() {
      this.appointBox = { height: '2.6rem' };
      this.seeMoreInfos = { display: 'flex' };
      this.stowInfos = { display: 'none' };
    },
    seeMoreInfo() {
      // console.log('qqq');
      this.appointBox = { height: '100%' };
      this.seeMoreInfos = { display: 'none' };
      this.stowInfos = { display: 'flex' };
    },
}   

思路：

1.控制高度

2. display: 'none'和display: 'flex'展示和隐藏