saas-platform/frontend/saas-portal-web/src/components/conenter/problem.vue

<template>
    <div>
        <div class="bz-container">
            <div class="bz-title">
              <span>常见问题</span>
            </div>
          <div class="bz-titlebox">
            <div class="bz-worp">
              <div class="bz-box">
                <div class="bz-sskuang">
                  <span><img class="bz-sousuoimg" src="/static/img/assets/sou.png" alt=""></span>
                  <input class="bz-sousuo" type="text" placeholder="请输入标题搜索"/>
                </div>
                <button class="bz-btn">搜索</button>
              </div>
              <div class="bz-right-conent">
                <ul>
                  <li v-for="(d , i) in arr" :key="i">
                    <div class="over" @click="shows(d,i)" style="cursor: pointer">
                      <span class="left bz-yuandian"></span>
                      <span class="left">{{d.title}}</span>
                      <img  class="right bz-copy" :class="d.isshow ? 'rotates' : 'norotate'" src="/static/img/Triangle Copy 4.png" alt="">
                    </div>
                    <div ref="title" class="Text-content" :class="d.isshow ? 'dispays' : 'hides'">
                      <p ref="text">{{d.centent}}</p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
          return {
            arr:[
              {isshow: true, title:'方式不同吧好像是差不多',centent:'警方圣诞快乐JFK的实力积分积分累积角度考虑实际疯狂的世界佛教埃及空军看见反抗类毒素解放就'},
              {isshow: false, title:'XXXXXXXXXXXXXXX操作文档',centent:'警方圣诞快发顺丰到付乐JFK的实力积分积分累积角度狂的世界佛教埃及空军看见反抗类毒素解放就'},
              {isshow: false, title:'XXXXXXXXXXXXX操作文档',centent:'警方圣诞快分积分累积角度考虑实际疯狂的世界佛教埃及空军看见反抗类毒素解放就'},
            ]
          }
        },
        methods: {
          shows(d,i){
            d.isshow = !d.isshow
            let textH =  this.$refs.text[i].offsetHeight;
            this.$refs.title[i].style.height = textH + 'px'
          }
        }
    }
</script>

<style scoped>
.dispays {
  transition: All 0.4s ease-in-out;
  -webkit-transition: All 0.4s ease-in-out;
  -moz-transition: All 0.4s ease-in-out;
  -o-transition: All 0.4s ease-in-out;
}
.hides {
  height: 0 !important;
  margin-bottom: -13px;
  transition: All 0.4s ease-in-out;
  -webkit-transition: All 0.4s ease-in-out;
  -moz-transition: All 0.4s ease-in-out;
  -o-transition: All 0.4s ease-in-out;
}
.Text-content {
  float: left;
  width: 90%;
  margin-left: 4%;
  margin-top: 2%;
}
.rotates {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
}
.norotate {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}
.bz-container {
    width: 55%;
    margin: 0 auto;
    font-size: 14px;
    margin-top: 11%;
    margin-bottom: 190px;
}
.bz-titlebox {
    background: #FFFFFF;
    border: 1px solid rgba(30,136,245,0.32);
    box-shadow: 0 20px 60px 10px rgba(13,37,62,0.05);
    border-radius: 4px;
}
.bz-title {
    text-align: left;
    font-size: 14px;
    color: white;
    margin-bottom: 36px;
}
.bz-title span {
    background: #1E88F5;
    border-radius: 2px;
    padding: 6px 24px;
}
.bz-copy {
    margin-right: 7px;
    margin-top: 5px;
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
}
</style>