JSFiddle - React, Tailwind, and code Playground

by Lianer

Babel + JSX

<template>
  <div class="layout-popup-config">
    <el-x-router-container v-model="currentPage">
      <el-x-router-page name="home">
        <div class="layout-popup-list">
          <div class="item" @click="currentPage = 'basic'">
            <span>基础配置</span>
            <i class="el-icon-arrow-right"></i>
          </div>
          <hr>
          <div class="item" @click="currentPage = 'share'">
            <span>分享</span>
            <i class="el-icon-arrow-right"></i>
          </div>
          <div class="item" @click="currentPage = 'rule'">
            <span>活动规则</span>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </el-x-router-page>

      <el-x-router-page name="basic">
        <basic></basic>
      </el-x-router-page>

      <el-x-router-page name="share">
        <share></share>
      </el-x-router-page>

      <el-x-router-page name="rule">
        <rule></rule>
      </el-x-router-page>
    </el-x-router-container>
  </div>
</template>

<script>
  import rule from '@/popups/rule.edit.vue'
  import basic from '@/popups/basic.edit.vue'
  import share from '@/popups/share.edit.vue'

  export default {
    components: {
      rule,
      basic,
      share
    },

    data () {
      return {
        currentPage: 'home'
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../stylus/variables.styl"

  .layout-popup-config
    padding 0 15px
    .el-collapse
      border none
      .el-collapse-item
        .el-collapse-item__header
          border-bottom none
        .el-collapse-item__wrap
          border-bottom none
          background none
    .layout-popup-list
      .item
        display flex
        align-items center
        height 36px
        padding-left 8px
        cursor pointer
        &:hover
          background #f5f5f5
        span
          flex 1
        i
          padding 0 8px
    .layout-popup-editor
      .back
        height 36px
        margin-bottom 15px
       ...