nfu-ae/modules/member/member_index3.html.erb

<div class="i-member index-member-3">
  <div data-list="roles" data-level="0">
    <div class="i-member-section">
      <div data-level="1" data-list="status-list">
        <h3 class="i-member-status-title">{{status-title}}</h3>
        <div class="i-member-list row" data-level="2" data-list="members">
          <div class="i-member-item col-md-6">
            <div class="i-member-item-inner clearfix">
              <div class="i-member-pic-wrap col-sm-12 ">
                <a href="{{link_to_show}}" title="{{name}}">
                 <img class="i-member-pic" src="{{image}}" title="{{name}}">
                </a>
              </div>
              <div class="i-member-profile-data-wrap col-sm-12">
                  <ul class="i-member-profile-list" data-list="profile_data" data-level="3">
                    <li class="i-member-profile-item">
                        <span class="i-member-title {{title_class}}">{{title}}:</span>
                        <span class="i-member-value {{value_class}}">{{value}}</span>
                    </li>
                  </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{{pagination_goes_here}}
<script>
	for(var i = 0;i < $('.i-member img').length ; i++){
		if($('.i-member img').eq(i).attr('alt')=="" ){
			$('.i-member img').eq(i).attr('alt','noname');
			$('.i-member img').eq(i).attr('title','noname');
      $('.i-member img').eq(i).parent().attr('title','noname');
		}
	}
	for(var i = 0;i < $('.i-member span.member-data-value-name a').length ; i++){
		if($('.i-member span.member-data-value-name a').eq(i).html().trim().replace('&nbsp;','') == "")
			$('.i-member span.member-data-value-name a').eq(i).html('noname');
	}
function moveProfileItemsIntoPicWrap() {
  $('.i-member-item').each(function () {
    const $memberItem = $(this);
    const $picWrap = $memberItem.find('.i-member-pic-wrap');

    if (!$picWrap.length) return;

    // ① 有姓名的 profile-item
    const $nameProfileItem = $memberItem
      .find('.i-member-profile-item')
      .has('.member-data-value-name');

    if ($nameProfileItem.length) {
      $nameProfileItem.appendTo($picWrap);
    }

    // 只抓「本 i-member-item 中,包含 .member-data-value-0 的 profile-item」
    const $title8ProfileItems = $memberItem
      .find('.i-member-profile-item')
      .has('.member-data-value-0');
    
    if ($title8ProfileItems.length) {
      $title8ProfileItems.insertAfter($nameProfileItem);
    }

    // 只抓「本 i-member-item 中,包含 .member-data-value-1 的 profile-item」
    const $title1ProfileItems = $memberItem
      .find('.i-member-profile-item')
      .has('.member-data-value-1');
    
    if ($title1ProfileItems.length) {
      $title1ProfileItems.appendTo($picWrap);
    }

    // 只抓「本 i-member-item 中,包含 .member-data-value-7 的 profile-item」
    const $title7ProfileItems = $memberItem
      .find('.i-member-profile-item')
      .has('.member-data-value-7');

    // 找到本 i-member-item 中的 .i-member-profile-data-wrap
    const $profileDataWrap = $memberItem.find('.i-member-profile-data-wrap');

    if ($profileDataWrap.length && $title7ProfileItems.length) {
      $title7ProfileItems.insertAfter($profileDataWrap);
    }
  });
}

$(function () {
  moveProfileItemsIntoPicWrap();
});
</script>
<style>
.member-data-title-5 {
    display: none;
}
.member-data-title-7 {
    display: none;
}
details.member-details {
    clear: both;
    width: 100%;
}
q {
    border: 3px solid #007991;
    border-radius: 20px;
    display: inline-block;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    color: #007991;
    padding: 0.1em 0.2em;
    @media(max-width:480px){

    }
}
.member-data-title-name {
    display: none !important;
}
.member-data-title-6{
   display: none !important;
}
.member-data-title-7{
   display: none !important;
}
.i-member-title {
    font-weight: 500;
    color: #888888;
    display: block;
}
.i-member-profile-item{
  @media(min-width:480px){
    width: 50%;
    float: left;
    &:last-child{
      width:100%;
      
    }
  }
}
.member-data-value-name{
      font-weight: 700;
    font-size: 1.5em;
}
.i-member-pic-wrap{
  .i-member-profile-item{
    margin-top: 1em;
    @media(min-width:480px){
      width: 100%;
      float:none;
    }
  }
}
.i-member-profile-data-wrap{
    background: #fff;
    border-radius: 1em;
    padding: 0.8em;
    margin-bottom: 1em;
}
</style>