viewPlot.html 1.3 KB

123456789101112131415161718192021222324252627282930313233
  1. <!-- 布局切换操作视图 -->
  2. <div class="plot-view">
  3. <div class="title rows justify-center">选择要更换成的功能空间</div>
  4. <div class="close rows justify-center" @click="closeHandle">
  5. <div class="iconfont icon-close"></div>
  6. </div>
  7. <!-- 布局空间列表数据 -->
  8. <div class="swiper-view">
  9. <div class="tab-content rows flex-start">
  10. <div @click="tabIndex=index" class="tab-item columns"
  11. :class="{'tabActive': tabIndex == index}"
  12. v-for="(tab,index) in plotList" :key="index" >
  13. <!-- <img class="tab-img" :src="tab.imageUrl" mode="aspectFill" /> -->
  14. <div class="tab-title">{{tab.name}}</div>
  15. <div class="tab-text">{{tab.count}}个布局</div>
  16. </div>
  17. </div>
  18. </div>
  19. <div class="plot-content" v-if="plotList && plotList.length>0">
  20. <div class="content">
  21. <div @click="changeOption(index)" class="item columns"
  22. :class="{'active': selectIndex == index}"
  23. v-for="(item,index) in plotList[tabIndex].dataList" :key="index" >
  24. <img class="img" :src="item.coverImage" mode="aspectFill" />
  25. <div class="gou rows justify-center">√</div>
  26. <div class="text eslipe">{{item.name}}</div>
  27. </div>
  28. </div>
  29. </div>
  30. <div class="btn-list rows rows-between">
  31. <div class="btn rows up up2 justify-center" @click="confirm">确认</div>
  32. </div>
  33. </div>