vue 带图标的tab切换

<template>
  <div id="hItem4">
    <el-row>
      <el-col :span="24">
        <el-col :span="24">
          <div class="conferenceSchedulePanel">
            <div class="itemTitlePanel">
              <div class="itemTitle font-size-46">CONFERENCE SCHEDULE</div>
              <div class="itemSubTitle font-size-24">大会日程(直播间)</div>
            </div>
            <div class="conferenceScheduleContentPanel flex-start-start">
              <div class="conferenceScheduleContentLeft">
                <div class="left-top-line"></div>
                <div class="conferenceScheduleTabPanel">
                  <div
                    class="conferenceScheduleTabItem"
                    :class="{csActive : idx==index}"
                    v-for="(item,index) in csTabItem"
                    :key="index"
                    @click="changeTab(index)"
                  >
                    <div class="conferenceScheduleTabImgPanel flex-center-center">
     <!-- 图标切换显示 -->
                      <img class="conferenceScheduleTabImg" v-if="idx==index" :src="item.activeImg" alt />
                      <img class="conferenceScheduleTabImg" v-else :src="item.img" alt />
                    </div>
                    <div class="conferenceScheduleTabTextPanel flex-center-between">
                      <div class="conferenceScheduleTabArrowPanel flex-center-center">
                        <img
                          class="conferenceScheduleTabArrow conferenceScheduleTabArrowLeft"
                          src="@/images/home/item4/right_mint_green_arrow.png"
                          alt
                        />
                      </div>
                      <span class="conferenceScheduleTabText">{{item.text}}</span>
                      <div class="conferenceScheduleTabArrowPanel flex-center-center">
                        <img
                          class="conferenceScheduleTabArrow conferenceScheduleTabArrowRight"
                          src="@/images/home/item4/left_mint_green_arrow.png"
                          alt
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="conferenceScheduleContentRight">
                <div class="right-top-line"></div>
              </div>
            </div>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "hItem4",
  data() {
    return {
      idx: 0,
      csTabItem: [
        {
          img: require("@/images/home/item4/tab1.png"),
          activeImg: require("@/images/home/item4/active_tab1.png"),
          text: "大会日程",
        },
        {
          img: require("@/images/home/item4/tab2.png"),
          activeImg: require("@/images/home/item4/active_tab2.png"),
          text: "直播间",
        },
        {
          img: require("@/images/home/item4/tab3.png"),
          activeImg: require("@/images/home/item4/active_tab3.png"),
          text: "大会精彩视频",
        },
      ],
    };
  },
  methods: {
    changeTab(index) {
      this.idx = index;
    },
  },
};
</script>
<style lang="scss" scoped>
#hItem4 {
  .conferenceSchedulePanel {
    width: 10rem;
    margin: 0 auto;
  }
  .conferenceScheduleContentPanel {
    width: 100%;
    background: rgba(10, 24, 93, 1);
  }
  .conferenceScheduleContentLeft {
    width: 2rem;
    height: 100%;
    border-right: 1px solid rgba(235, 238, 245, 0.1);
  }
  .conferenceScheduleContentRight {
    width: 8rem;
    height: 100%;
  }
  .left-top-line,
  .right-top-line {
    width: 100%;
    height: 0.06rem;
    position: sticky;
    left: 0;
    top: 0;
  }
  .left-top-line {
    background: linear-gradient(
      270deg,
      rgba(43, 250, 211, 1) 0%,
      rgba(43, 250, 211, 1) 50%,
      rgba(255, 171, 79, 1) 100%
    );
  }
  .right-top-line {
    background: rgba(255, 171, 79, 1);
  }
  //   左侧样式
  .conferenceScheduleTabItem {
    width: 100%;
    height: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .conferenceScheduleTabItem:nth-child(2) {
    border-top: 0.01rem solid rgba(235, 238, 245, 0.1);
    border-bottom: 0.01rem solid rgba(235, 238, 245, 0.1);
  }

  .conferenceScheduleTabImg {
    width: 0.4rem;
    height: 0.4rem;
  }
  .conferenceScheduleTabTextPanel {
    width: 100%;
    padding-top: 0.14rem;
  }
  .conferenceScheduleTabArrowLeft {
    padding-left: 0.1rem;
  }
  .conferenceScheduleTabArrowRight {
    padding-right: 0.1rem;
  }
  .conferenceScheduleTabArrow {
    width: 0.08rem;
    height: 0.11rem;
    display: none;
  }
  .conferenceScheduleTabText {
    font-size: 0.24rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
  }
  //   tab选中
  .csActive .conferenceScheduleTabText {
    color: rgba(43, 250, 211, 1);
  }
  .csActive .conferenceScheduleTabArrow {
    display: block;
  }
}
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue构建后台管理系统可以按照以下步骤进行: 1. 首先,引入element-plus作为UI组件库,可以通过npm或yarn安装,并在项目中引入element-plus组件和样式。 2. 接下来,引入Vue Router来管理路由。可以在项目中创建一个router文件夹,并在其中创建index.js文件,使用VueRouter来定义路由配置,并将其导出。 3. 如果需要使用图标,可以使用element-plus提供的图标库,可以静态引入或动态引入图标。 4. 如果需要使用less来编写样式,可以引入less,并在项目中使用less编写样式。 5. 引入基础样式,可以在项目中创建一个样式文件,并在需要的地方引入。 6. 如果需要使用状态管理,可以引入Vuex,并在项目中使用Vuex来管理状态。 7. 对于工具类的使用,可以使用mock来模拟数据,可以使用本地mock或线上fastmock来进行数据模拟。另外,可以对axios进行二次封装,以便于在项目中使用。 8. 对于组件的使用,可以创建常用的布局组件,如CommonHeader.vue(头部组件)、CommonAside.vue(左侧菜单组件)、CommonTab.vue(标签切换组件)等。 9. 在路由的views组件中,可以创建LoginApp.vue(登录页面)、mainApp.vue(总体布局组件)、HomeApp.vue(主要展示区域组件)、UserApp.vue(用户管理页面组件)等。 10. 在用户管理页面中,可以实现获取用户数据、分页、增删改查等功能。 11. 兄弟组件之间的通信可以使用事件总线bus来实现,或者使用Vuex进行全局状态管理。 以上是构建Vue后台管理系统的一些基本步骤和引入的一些常用组件和工具。具体的实现可以根据项目需求进行调整和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值