vue实现折叠收起功能

image.png

实现效果如上图

<template>
  <div class="resume-list">
    <div class="preview_header">
      <div class="header">
        <img
          class="header_left"
          src="../images/left_icon.png"
          alt=""
          @click="clickGoBack"
        />
        <p class="header_title">帮助</p>
      </div>
      <div class="line"></div>
    </div>

    <div class="pool_main">
      <div v-for="(item, index) in helpList" :key="index">
        <div class="used_coin">
          <div class="vip_help">
            <div class="help_title" @click="clilkHelpItem(item, index)">
              <p class="title">{{ item.title }}</p>
              <img
                :src="item.isShow ? upArrow : downArrow"
                alt=""
                class="arrow"
              />
            </div>
            <p class="time" v-show="item.isShow">
              {{ item.text }}
            </p>
          </div>
        </div>
        <div class="coin_line"></div>
      </div>
    </div>
  </div>
</template>

<script>

import Vconsole from 'vconsole'
const vconsole = new Vconsole();


export default {
  name: "VipHelp",
  data () {
    return {
      showOpen: false,
      downArrow: require('./images/down_arrow.png'),
      upArrow: require('./images/up_arrow.png'),
      helpList: [
        {
          title: '什么是VIP会员？',
          text: 'VIP会员是可以享有更多专属增值服务的账号，VIP会员可进行更多招聘服务的操作。'
        },
        {
          title: '如何开通VIP会员？',
          text: '进入VIP会员权益介绍页面，点击【联系销售】后，填写对应信息，等待销售联系后，线下进行VIP会员权益开通。',
        },
      ],
    }
  },

  methods: {
    clickGoBack () {
      this.$store.state.entry === this.$route.path ? this.$ZhiYue.closePage() : this.$router.back();
    },
    clilkHelpItem (v, index) {
      let helpList = JSON.parse(JSON.stringify(this.helpList))
      helpList[index].isShow = !v.isShow
      this.helpList = helpList
    },
  }
}
</script>
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
.preview_header {
  width: 100%;
  position: fixed;
  top: 0;
  background: #ffffff;
  z-index: 99;
}
.line {
  background: #eeeeee;
  height: 0.5px;
  width: 100%;
}
.header {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  height: 44px;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}
.header_left {
  width: 20px;
  height: 20px;
  margin-left: 13px;
}
.header_title {
  width: 100%;
  font-size: 18px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  color: #333333;
  margin-right: 25px;
}
.pool_main {
  margin: 60px 16px 0 16px;
}
.used_coin {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.coin_line {
  background: #eeeeee;
  height: 0.5px;
  width: 100%;
  margin: 19px 0;
}
.help_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.title {
  font-size: 15px;
  font-family: PingFang, PingFang-SC;
  font-weight: bold;
  text-align: left;
  color: #333333;
}
.time {
  font-size: 16px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #666666;
  margin-top: 10px;
  line-height: 27px;
}
.used_num {
  font-size: 16px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: right;
  color: #ff3e3e;
}
.arrow {
  width: 14px;
  height: 14px;
  text-align: end;
}
.vip_help {
  width: 100%;
}
</style>