新境界常用 ui

desc-table

企业基本情况

企业名称	XXXXXXXXXXXXXXXX
组织机构	XXXXXXXXXXXXXXXX
单位注册	XXXXXXXXXXXXXXXX
单位所在	XXXXXXXXXXXXXXXX
单位规模	XXXXXXXXXXXXXXXX
成立时间	XXXXXXXXXXXXXXXX
登记注册	XXXXXXXXXXXXXXXX
企业集团	XXXXXXXXXXXXXXXX
上市情况	XXXXXXXXXXXXXXXX
行业类别	XXXXXXXXXXXXXXXX
组织机构	XXXXXXXXXXXXXXXX
单位地址	XXXXXXXXXXXXXXXX
详细地址	XXXXXXXXXXXXXXXX
法定代表人	XXXXXXXXXXXXXXXX
联系方式	XXXXXXXXXXXXXXXX
企业控股	XXXXXXXXXXXXXXXX
从事跨国	XXXXXXXXXXXXXXXX
是否有研	XXXXXXXXXXXXXXXX

Details

vue

<template>
  <article class="article-container">
    <div class="article-title">
      <!-- <img :src="require(`./images/icon_21.png`)" alt="" /> -->
      <span>{{ title }}</span>
    </div>
    <table class="article-table">
      <tbody class="article-tbody">
        <div class="article-div-left">
          <tr v-for="(item, index) in leftList" :key="index" class="article-tr">
            <td class="article-td key">{{ item.key }}</td>
            <td class="article-td value">{{ item.value }}</td>
          </tr>
        </div>

        <div class="article-div-right">
          <tr v-for="(item, index) in rightList" :key="index" class="article-tr">
            <td class="article-td key">{{ item.key }}</td>
            <td class="article-td value">{{ item.value }}</td>
          </tr>
        </div>
      </tbody>
    </table>
  </article>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  props: {
    title: {
      type: String,
      default: '企业基本情况',
    },
    leftList: {
      type: Array,
      default: () => [
        { key: '企业名称', value: 'XXXXXXXXXXXXXXXX' },
        { key: '组织机构', value: 'XXXXXXXXXXXXXXXX' },
        { key: '单位注册', value: 'XXXXXXXXXXXXXXXX' },
        { key: '单位所在', value: 'XXXXXXXXXXXXXXXX' },
        { key: '单位规模', value: 'XXXXXXXXXXXXXXXX' },
        { key: '成立时间', value: 'XXXXXXXXXXXXXXXX' },
        { key: '登记注册', value: 'XXXXXXXXXXXXXXXX' },
        { key: '企业集团', value: 'XXXXXXXXXXXXXXXX' },
        { key: '上市情况', value: 'XXXXXXXXXXXXXXXX' },
      ],
    },
    rightList: {
      type: Array,
      default: () => [
        { key: '行业类别', value: 'XXXXXXXXXXXXXXXX' },
        { key: '组织机构', value: 'XXXXXXXXXXXXXXXX' },
        { key: '单位地址', value: 'XXXXXXXXXXXXXXXX' },
        { key: '详细地址', value: 'XXXXXXXXXXXXXXXX' },
        { key: '法定代表人', value: 'XXXXXXXXXXXXXXXX' },
        { key: '联系方式', value: 'XXXXXXXXXXXXXXXX' },
        { key: '企业控股', value: 'XXXXXXXXXXXXXXXX' },
        { key: '从事跨国', value: 'XXXXXXXXXXXXXXXX' },
        { key: '是否有研', value: 'XXXXXXXXXXXXXXXX' },
      ],
    },
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.article-container {
  padding-top: 20px;
  .article-title {
    display: flex;
    align-items: center;
    color: #506eda;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .article-table {
    border-collapse: collapse;
    width: 100%;
    .article-tbody {
      display: flex;
      > div {
        flex: 1;
      }
    }
    tr {
      display: flex;
      &:first-child {
        td.value {
          border-top: 1px solid #f5f5f5;
        }
      }
    }
    td {
      text-align: center;
      border-bottom: 1px solid #f5f5f5;
      padding: 14px;
      &.key {
        background-color: #f1f4fa;
        flex: 1;
      }
      &.value {
        flex: 2;
        text-align: left;
      }
    }
  }
}
</style>

<template>
  <article class="article-container">
    <div class="article-title">
      <!-- <img :src="require(`./images/icon_21.png`)" alt="" /> -->
      <span>{{ title }}</span>
    </div>
    <table class="article-table">
      <tbody class="article-tbody">
        <div class="article-div-left">
          <tr v-for="(item, index) in leftList" :key="index" class="article-tr">
            <td class="article-td key">{{ item.key }}</td>
            <td class="article-td value">{{ item.value }}</td>
          </tr>
        </div>

        <div class="article-div-right">
          <tr v-for="(item, index) in rightList" :key="index" class="article-tr">
            <td class="article-td key">{{ item.key }}</td>
            <td class="article-td value">{{ item.value }}</td>
          </tr>
        </div>
      </tbody>
    </table>
  </article>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  props: {
    title: {
      type: String,
      default: '企业基本情况',
    },
    leftList: {
      type: Array,
      default: () => [
        { key: '企业名称', value: 'XXXXXXXXXXXXXXXX' },
        { key: '组织机构', value: 'XXXXXXXXXXXXXXXX' },
        { key: '单位注册', value: 'XXXXXXXXXXXXXXXX' },
        { key: '单位所在', value: 'XXXXXXXXXXXXXXXX' },
        { key: '单位规模', value: 'XXXXXXXXXXXXXXXX' },
        { key: '成立时间', value: 'XXXXXXXXXXXXXXXX' },
        { key: '登记注册', value: 'XXXXXXXXXXXXXXXX' },
        { key: '企业集团', value: 'XXXXXXXXXXXXXXXX' },
        { key: '上市情况', value: 'XXXXXXXXXXXXXXXX' },
      ],
    },
    rightList: {
      type: Array,
      default: () => [
        { key: '行业类别', value: 'XXXXXXXXXXXXXXXX' },
        { key: '组织机构', value: 'XXXXXXXXXXXXXXXX' },
        { key: '单位地址', value: 'XXXXXXXXXXXXXXXX' },
        { key: '详细地址', value: 'XXXXXXXXXXXXXXXX' },
        { key: '法定代表人', value: 'XXXXXXXXXXXXXXXX' },
        { key: '联系方式', value: 'XXXXXXXXXXXXXXXX' },
        { key: '企业控股', value: 'XXXXXXXXXXXXXXXX' },
        { key: '从事跨国', value: 'XXXXXXXXXXXXXXXX' },
        { key: '是否有研', value: 'XXXXXXXXXXXXXXXX' },
      ],
    },
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.article-container {
  padding-top: 20px;
  .article-title {
    display: flex;
    align-items: center;
    color: #506eda;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .article-table {
    border-collapse: collapse;
    width: 100%;
    .article-tbody {
      display: flex;
      > div {
        flex: 1;
      }
    }
    tr {
      display: flex;
      &:first-child {
        td.value {
          border-top: 1px solid #f5f5f5;
        }
      }
    }
    td {
      text-align: center;
      border-bottom: 1px solid #f5f5f5;
      padding: 14px;
      &.key {
        background-color: #f1f4fa;
        flex: 1;
      }
      &.value {
        flex: 2;
        text-align: left;
      }
    }
  }
}
</style>

表单表格分页

No Data

Total 400

Go to

Details

vue

<template>
  <section class="section-container">
    <el-form :inline="true" :model="form" class="form-inline">
      <el-form-item label="企业名称">
        <el-input v-model="form.name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="地区">
        <el-select v-model="form.region" placeholder="请选择">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
        <span style="cursor: pointer; margin-left: 12px"
          >高级搜索<i class="el-icon-arrow-down"></i
        ></span>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%" class="lookui-table" height="550">
      <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
      <el-table-column prop="name" label="企业名称" align="center">
        <!-- vue3 -->
        <template #default="{row}">
          <a style="color: #5b81fc" @click="goDetail">{{ row.name }}</a>
        </template>
        <!-- vue2 -->
        <!-- <template slot-scope="{ row }">
          <a style="color: #5b81fc" @click="goDetail">{{ row.name }}</a>
        </template> -->
      </el-table-column>
      <el-table-column prop="area" label="地区" align="center"></el-table-column>
      <el-table-column prop="belongIndustry" label="所属产业" align="center"></el-table-column>
      <el-table-column prop="code" label="统一社会信用代码" align="center"></el-table-column>
    </el-table>
    <div style="display: flex; justify-content: flex-end">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        background>
      </el-pagination>
    </div>
  </section>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      currentPage: 1,
      form: {},
      tableData: [],
    };
  },
  computed: {},
  created() {},
  mounted() {
    for (let i = 0; i < 10; i++) {
      this.tableData.push({
        name: '海南新境界软件有限公司',
        area: '海口',
        belongIndustry: '计算机软件',
        code: 12323423434,
        income: 365,
        cost: 365,
        profit: 365,
        totalMoney: 365,
        saleMoney: 365,
      });
    }
  },
  methods: {
    goDetail() {
      this.$router.push({
        name: 'gxlyyxjcDetail'
      })
    },
    onSubmit() {

    },
    handleCurrentChange() {

    },
    handleSizeChange() {

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped lang="scss">
section.section-container {
  margin-top: 10px;
  padding: 20px;
  background-color: #fff;
  ::v-deep .el-table th {
    background-color: #e6ebfb !important;
    color: #000;
  }
}
</style>
<style>
/* vitepress 中才设置以下样式 */
.vp-doc table {
  margin: 0;
}
</style>

<template>
  <section class="section-container">
    <el-form :inline="true" :model="form" class="form-inline">
      <el-form-item label="企业名称">
        <el-input v-model="form.name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="地区">
        <el-select v-model="form.region" placeholder="请选择">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
        <span style="cursor: pointer; margin-left: 12px"
          >高级搜索<i class="el-icon-arrow-down"></i
        ></span>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%" class="lookui-table" height="550">
      <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
      <el-table-column prop="name" label="企业名称" align="center">
        <!-- vue3 -->
        <template #default="{row}">
          <a style="color: #5b81fc" @click="goDetail">{{ row.name }}</a>
        </template>
        <!-- vue2 -->
        <!-- <template slot-scope="{ row }">
          <a style="color: #5b81fc" @click="goDetail">{{ row.name }}</a>
        </template> -->
      </el-table-column>
      <el-table-column prop="area" label="地区" align="center"></el-table-column>
      <el-table-column prop="belongIndustry" label="所属产业" align="center"></el-table-column>
      <el-table-column prop="code" label="统一社会信用代码" align="center"></el-table-column>
    </el-table>
    <div style="display: flex; justify-content: flex-end">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        background>
      </el-pagination>
    </div>
  </section>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      currentPage: 1,
      form: {},
      tableData: [],
    };
  },
  computed: {},
  created() {},
  mounted() {
    for (let i = 0; i < 10; i++) {
      this.tableData.push({
        name: '海南新境界软件有限公司',
        area: '海口',
        belongIndustry: '计算机软件',
        code: 12323423434,
        income: 365,
        cost: 365,
        profit: 365,
        totalMoney: 365,
        saleMoney: 365,
      });
    }
  },
  methods: {
    goDetail() {
      this.$router.push({
        name: 'gxlyyxjcDetail'
      })
    },
    onSubmit() {

    },
    handleCurrentChange() {

    },
    handleSizeChange() {

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped lang="scss">
section.section-container {
  margin-top: 10px;
  padding: 20px;
  background-color: #fff;
  ::v-deep .el-table th {
    background-color: #e6ebfb !important;
    color: #000;
  }
}
</style>
<style>
/* vitepress 中才设置以下样式 */
.vp-doc table {
  margin: 0;
}
</style>

开关

按月

累计

Details

vue

<template>
  <div class="toggle-area">
    <div @click="currentActive = 1" :class="{ active: currentActive === 1 }">按月</div>
    <div @click="currentActive = 2" :class="{ active: currentActive === 2 }">累计</div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      currentActive: 1,
    };
  },
  props: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.toggle-area {
  display: flex;
  background-color: #f2f2f2;
  border-radius: 20px;
  cursor: pointer;
  > div {
    padding: 3px 10px;
    font-size: 12px;
    &.active {
      color: #fff;
      background-color: #506eda;
      border-radius: 20px;
    }
  }
}
</style>

<template>
  <div class="toggle-area">
    <div @click="currentActive = 1" :class="{ active: currentActive === 1 }">按月</div>
    <div @click="currentActive = 2" :class="{ active: currentActive === 2 }">累计</div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      currentActive: 1,
    };
  },
  props: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.toggle-area {
  display: flex;
  background-color: #f2f2f2;
  border-radius: 20px;
  cursor: pointer;
  > div {
    padding: 3px 10px;
    font-size: 12px;
    &.active {
      color: #fff;
      background-color: #506eda;
      border-radius: 20px;
    }
  }
}
</style>

搜索

范围:

个人

部门

单位

Details

vue

<template>
  <div class="search-bar">
    <div class="range-area">
      <span class="txt">范围:</span>
      <div class="btn-item-wrap">
        <div
          v-for="(item, index) in range"
          :class="['btn-item', currentIndex === index ? 'btn-item-actived' : '']"
          :key="index"
          @click="handleClick(index)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="search-area">
      <el-input
        class="lookui-input"
        v-model="keywords"
        placeholder="请输入公文标题或来文单位"
        clearable></el-input>
      <el-button class="lookui-btn" type="primary" @click="handleQuery">查询</el-button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      currentIndex: 0,
      range: [
        {
          name: '个人',
          id: 1,
        },
        {
          name: '部门',
          id: 2,
        },
        {
          name: '单位',
          id: 3,
        },
      ],
      keywords: '',
    };
  },
  props: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    handleClick(index) {
      this.currentIndex = index;
    },
    handleQuery() {},
  },
};
</script>

<style scoped lang="scss">
.search-bar {
  display: flex;
  justify-content: space-between;
  .range-area {
    display: flex;
    align-items: center;
    .btn-item-wrap {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      border: 1px solid #d9d9d9;
      border-left: none;
      margin-left: 10px;
      border-radius: 4px;
      .btn-item {
        padding: 4px 16px 6px;
        cursor: pointer;
        border-left: 1px solid #d9d9d9;
        &:first-child {
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
        }
        &:last-child {
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
        }
        &.btn-item-actived {
          background-color: #506eda;
          color: #fff;
        }
      }
    }
  }

  .search-area {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    .lookui-input {
      width: 250px;
      ::v-deep .el-input__inner {
        height: 34px;
      }
      ::v-deep .el-input__icon {
        line-height: 34px;
      }
    }
    .lookui-btn {
      padding: 9px 18px;
      border-radius: 0;
    }
  }
}
</style>

<template>
  <div class="search-bar">
    <div class="range-area">
      <span class="txt">范围:</span>
      <div class="btn-item-wrap">
        <div
          v-for="(item, index) in range"
          :class="['btn-item', currentIndex === index ? 'btn-item-actived' : '']"
          :key="index"
          @click="handleClick(index)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="search-area">
      <el-input
        class="lookui-input"
        v-model="keywords"
        placeholder="请输入公文标题或来文单位"
        clearable></el-input>
      <el-button class="lookui-btn" type="primary" @click="handleQuery">查询</el-button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      currentIndex: 0,
      range: [
        {
          name: '个人',
          id: 1,
        },
        {
          name: '部门',
          id: 2,
        },
        {
          name: '单位',
          id: 3,
        },
      ],
      keywords: '',
    };
  },
  props: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    handleClick(index) {
      this.currentIndex = index;
    },
    handleQuery() {},
  },
};
</script>

<style scoped lang="scss">
.search-bar {
  display: flex;
  justify-content: space-between;
  .range-area {
    display: flex;
    align-items: center;
    .btn-item-wrap {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      border: 1px solid #d9d9d9;
      border-left: none;
      margin-left: 10px;
      border-radius: 4px;
      .btn-item {
        padding: 4px 16px 6px;
        cursor: pointer;
        border-left: 1px solid #d9d9d9;
        &:first-child {
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
        }
        &:last-child {
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
        }
        &.btn-item-actived {
          background-color: #506eda;
          color: #fff;
        }
      }
    }
  }

  .search-area {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    .lookui-input {
      width: 250px;
      ::v-deep .el-input__inner {
        height: 34px;
      }
      ::v-deep .el-input__icon {
        line-height: 34px;
      }
    }
    .lookui-btn {
      padding: 9px 18px;
      border-radius: 0;
    }
  }
}
</style>

导航菜单

Details

vue

<template>
  <div class="sl-content" ref="slContent" @scroll="handleScroll">
    <div class="menu-container">
      <!-- 一级 -->
      <div
        class="menu-item"
        :style="{ '--menu-item-height': item.isExpand ? 'calc(100% - 38px)' : '0' }"
        v-for="(item, index) in navMenu"
        :key="index">
        <div :class="['common-nav', currentIndex === item.index ? 'active-menu' : '']">
          <el-icon>
            <CaretTop @click="toggleMenuItemExpand(item.index)" v-if="item.isExpand" />
            <CaretBottom @click="toggleMenuItemExpand(item.index)" v-else />
          </el-icon>
          <span @click="handleMenuItemClick(item.index)">{{ item.name }}</span>
        </div>
        <!-- 二级 -->
        <div
          class="sub-menu-container"
          :style="{ maxHeight: item.isExpand ? subMenuHeightGroup[index] + 'px' : '0' }">
          <div
            class="sub-menu-item"
            v-for="(subItem, subIndex) in item.children"
            :style="{ '--sub-menu-item-height': subItem.isExpand ? 'calc(100% - 38px)' : '0' }"
            ref="subMenus"
            :key="subIndex">
            <div
              :class="[
                'common-nav',
                'common-nav-two',
                currentIndex === subItem.index ? 'active-menu' : '',
              ]">
              <el-icon>
                <CaretTop @click="toggleSubMenuItemExpand(subItem.index)" v-if="subItem.isExpand" />
                <CaretBottom @click="toggleSubMenuItemExpand(subItem.index)" v-else />
              </el-icon>
              <span @click="handleSubMenuItemClick(subItem.index)">{{ subItem.name }}</span>
            </div>
            <!-- 三级 -->
            <div
              class="sub-sub-menu-container"
              :style="{
                maxHeight: subItem.isExpand ? subSubMenuHeightGroup[index]?.[subIndex] + 'px' : '0',
              }">
              <div
                :class="[
                  'sub-sub-menu-item',
                  currentIndex === subSubItem.index ? 'active-menu' : '',
                ]"
                v-for="(subSubItem, subSubIndex) in subItem.children"
                :key="subSubIndex">
                <span @click="handleSubSubMenuItemClick(subSubItem.index)">{{
                  subSubItem.name
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      backTopBtnVisible: false,
      dialogVisible: true,
      currentIndex: '1',
      subMenuHeightGroup: [],
      subSubMenuHeightGroup: [],
      navMenu: [
        {
          index: '1',
          name: '今年中央政府工作报告中提到的任务到的任',
          isExpand: true,
          children: [
            {
              index: '1-1',
              name: '2023年全面推进乡村振兴战略振兴战略',
              isExpand: true,
              children: [
                {
                  index: '1-1-1',
                  name: '观察中国经济的表现中国经济的表现',
                },
                {
                  index: '1-1-2',
                  name: '观察中国经济的表现中国经济的表现',
                },
                {
                  index: '1-1-3',
                  name: '观察中国经济的表现中国经济的表现',
                },
                {
                  index: '1-1-4',
                  name: '观察中国经济的表现中国经济的表现',
                },
                {
                  index: '1-1-5',
                  name: '观察中国经济的表现中国经济的表现',
                },
              ],
            },
            {
              index: '1-2',
              name: '2023年全面推进乡村振兴战略振兴战略',
              isExpand: true,
              children: [
                {
                  index: '1-2-1',
                  name: '观察中国经济的表现中国经济的表现',
                },
                {
                  index: '1-2-2',
                  name: '观察中国经济的表现中国经济的表现',
                },
              ],
            },
          ],
        },
        {
          index: '2',
          name: '今年中央政府工作报告中提到的任务到的任',
          isExpand: true,
          children: [
            {
              index: '2-1',
              name: '2023年全面推进乡村振兴战略振兴战略',
              isExpand: true,
              children: [
                {
                  index: '2-1-1',
                  name: '观察中国经济的表现中国经济的表现',
                },
                {
                  index: '2-1-2',
                  name: '观察中国经济的表现中国经济的表现',
                },
              ],
            },
            {
              index: '2-2',
              name: '2023年全面推进乡村振兴战略振兴战略',
              isExpand: true,
              children: [
                {
                  index: '2-2-1',
                  name: '观察中国经济的表现中国经济的表现',
                },
                {
                  index: '2-2-2',
                  name: '观察中国经济的表现中国经济的表现',
                },
              ],
            },
          ],
        },
      ],
    };
  },
  props: {},
  computed: {},
  created() {},
  mounted() {
    setTimeout(() => {
      const smCs = document.querySelectorAll('.sub-menu-container');
      const ssmCs = document.querySelectorAll('.sub-sub-menu-container');

      ssmCs.forEach(ssmC => {
        this.subSubMenuHeightGroup.push(ssmC.scrollHeight);
      });
      const newSubSubMenuHeightGroup = [];
      for (let i = 0; i < this.navMenu.length; i++) {
        const children = this.navMenu[i].children;
        newSubSubMenuHeightGroup.push(this.subSubMenuHeightGroup.splice(0, children.length));
      }
      this.subSubMenuHeightGroup = JSON.parse(JSON.stringify(newSubSubMenuHeightGroup));

      smCs.forEach(smC => {
        this.subMenuHeightGroup.push(smC.scrollHeight);
      });
    }, 300);
  },
  methods: {
    handleScroll(e) {
      this.backTopBtnVisible = e.target.scrollTop > 0;
    },
    handleBackTop() {
      this.$refs.slContent.scroll({
        top: 0,
        behavior: 'smooth',
      });
    },
    handleSubSubMenuItemClick(index) {
      this.currentIndex = index;
    },
    handleSubMenuItemClick(index) {
      this.currentIndex = index;
    },
    toggleSubMenuItemExpand(index) {
      const subMenu = this.navMenu
        .find(item => item.index === index.split('-')[0])
        .children.find(item => item.index === index);
      subMenu.isExpand = !subMenu.isExpand;
    },
    toggleMenuItemExpand(index) {
      const menu = this.navMenu.find(item => item.index === index);
      menu.isExpand = !menu.isExpand;
    },
    handleMenuItemClick(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style scoped lang="scss">
div.sl-content {
  padding-top: 14px;
  height: calc(100% - 60px);
  overflow: auto;
  &::-webkit-scrollbar-track-piece {
    background-color: #f0f5ff;
  }
  &::-webkit-scrollbar {
    width: 4px;
    height: 40px;
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    //background-color: hsla(220, 4%, 58%, .3);
    background-color: #5479ff;
  }
  .menu-container {
    .menu-item {
      position: relative;
      &::before {
        content: '';
        position: absolute;
        top: 25px;
        left: 8px;
        width: 1px;
        height: var(--menu-item-height);
        background-color: #d3d3ef;
      }
      .common-nav {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        span {
          margin-bottom: 0;
        }
      }
      .common-nav-two {
        position: relative;
      }
      i {
        margin-right: 10px;
        font-size: 18px;
        cursor: pointer;
      }
      span {
        display: block;
        margin-bottom: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #000;
        cursor: pointer;
      }
      .sub-menu-item {
        position: relative;
        margin-left: 20px;
        &::before {
          content: '';
          position: absolute;
          top: 25px;
          left: 8px;
          width: 1px;
          height: var(--sub-menu-item-height);
          background-color: #d3d3ef;
        }
        .sub-sub-menu-item {
          padding-left: 28px;
        }
      }
    }
    .sub-menu-container {
      overflow: hidden;
      transition: all 0.5s;
      .sub-sub-menu-container {
        overflow: hidden;
        transition: all 0.5s;
      }
    }
  }
}
.single-row-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.active-menu {
  i {
    color: #5479ff;
  }
  span {
    color: #5479ff !important;
    font-weight: bold;
  }
}
</style>
<style lang="scss">
.lookui-dialog-no-content-padding {
  .el-dialog__body {
    padding: 0;
  }
}
</style>

<template>
  <div class="sl-content" ref="slContent" @scroll="handleScroll">
    <div class="menu-container">
      <!-- 一级 -->
      <div
        class="menu-item"
        :style="{ '--menu-item-height': item.isExpand ? 'calc(100% - 38px)' : '0' }"
        v-for="(item, index) in navMenu"
        :key="index">
        <div :class="['common-nav', currentIndex === item.index ? 'active-menu' : '']">
          <el-icon>
            <CaretTop @click="toggleMenuItemExpand(item.index)" v-if="item.isExpand" />
            <CaretBottom @click="toggleMenuItemExpand(item.index)" v-else />
          </el-icon>
          <span @click="handleMenuItemClick(item.index)">{{ item.name }}</span>
        </div>
        <!-- 二级 -->
        <div
          class="sub-menu-container"
          :style="{ maxHeight: item.isExpand ? subMenuHeightGroup[index] + 'px' : '0' }">
          <div
            class="sub-menu-item"
            v-for="(subItem, subIndex) in item.children"
            :style="{ '--sub-menu-item-height': subItem.isExpand ? 'calc(100% - 38px)' : '0' }"
            ref="subMenus"
            :key="subIndex">
            <div
              :class="[
                'common-nav',
                'common-nav-two',
                currentIndex === subItem.index ? 'active-menu' : '',
              ]">
              <el-icon>
                <CaretTop @click="toggleSubMenuItemExpand(subItem.index)" v-if="subItem.isExpand" />
                <CaretBottom @click="toggleSubMenuItemExpand(subItem.index)" v-else />
              </el-icon>
              <span @click="handleSubMenuItemClick(subItem.index)">{{ subItem.name }}</span>
            </div>
            <!-- 三级 -->
            <div
              class="sub-sub-menu-container"
              :style="{
                maxHeight: subItem.isExpand ? subSubMenuHeightGroup[index]?.[subIndex] + 'px' : '0',
              }">
              <div
                :class="[
                  'sub-sub-menu-item',
                  currentIndex === subSubItem.index ? 'active-menu' : '',
                ]"
                v-for="(subSubItem, subSubIndex) in subItem.children"
                :key="subSubIndex">
                <span @click="handleSubSubMenuItemClick(subSubItem.index)">{{
                  subSubItem.name
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      backTopBtnVisible: false,
      dialogVisible: true,
      currentIndex: '1',
      subMenuHeightGroup: [],
      subSubMenuHeightGroup: [],
      navMenu: [
        {
          index: '1',
          name: '今年中央政府工作报告中提到的任务到的任',
          isExpand: true,
          children: [
            {
              index: '1-1',
              name: '2023年全面推进乡村振兴战略振兴战略',
              isExpand: true,
              children: [
                {
                  index: '1-1-1',
                  name: '观察中国经济的表现中国经济的表现',
                },
                {
                  index: '1-1-2',
                  name: '观察中国经济的表现中国经济的表现',
                },
                {
                  index: '1-1-3',
                  name: '观察中国经济的表现中国经济的表现',
                },
                {
                  index: '1-1-4',
                  name: '观察中国经济的表现中国经济的表现',
                },
                {
                  index: '1-1-5',
                  name: '观察中国经济的表现中国经济的表现',
                },
              ],
            },
            {
              index: '1-2',
              name: '2023年全面推进乡村振兴战略振兴战略',
              isExpand: true,
              children: [
                {
                  index: '1-2-1',
                  name: '观察中国经济的表现中国经济的表现',
                },
                {
                  index: '1-2-2',
                  name: '观察中国经济的表现中国经济的表现',
                },
              ],
            },
          ],
        },
        {
          index: '2',
          name: '今年中央政府工作报告中提到的任务到的任',
          isExpand: true,
          children: [
            {
              index: '2-1',
              name: '2023年全面推进乡村振兴战略振兴战略',
              isExpand: true,
              children: [
                {
                  index: '2-1-1',
                  name: '观察中国经济的表现中国经济的表现',
                },
                {
                  index: '2-1-2',
                  name: '观察中国经济的表现中国经济的表现',
                },
              ],
            },
            {
              index: '2-2',
              name: '2023年全面推进乡村振兴战略振兴战略',
              isExpand: true,
              children: [
                {
                  index: '2-2-1',
                  name: '观察中国经济的表现中国经济的表现',
                },
                {
                  index: '2-2-2',
                  name: '观察中国经济的表现中国经济的表现',
                },
              ],
            },
          ],
        },
      ],
    };
  },
  props: {},
  computed: {},
  created() {},
  mounted() {
    setTimeout(() => {
      const smCs = document.querySelectorAll('.sub-menu-container');
      const ssmCs = document.querySelectorAll('.sub-sub-menu-container');

      ssmCs.forEach(ssmC => {
        this.subSubMenuHeightGroup.push(ssmC.scrollHeight);
      });
      const newSubSubMenuHeightGroup = [];
      for (let i = 0; i < this.navMenu.length; i++) {
        const children = this.navMenu[i].children;
        newSubSubMenuHeightGroup.push(this.subSubMenuHeightGroup.splice(0, children.length));
      }
      this.subSubMenuHeightGroup = JSON.parse(JSON.stringify(newSubSubMenuHeightGroup));

      smCs.forEach(smC => {
        this.subMenuHeightGroup.push(smC.scrollHeight);
      });
    }, 300);
  },
  methods: {
    handleScroll(e) {
      this.backTopBtnVisible = e.target.scrollTop > 0;
    },
    handleBackTop() {
      this.$refs.slContent.scroll({
        top: 0,
        behavior: 'smooth',
      });
    },
    handleSubSubMenuItemClick(index) {
      this.currentIndex = index;
    },
    handleSubMenuItemClick(index) {
      this.currentIndex = index;
    },
    toggleSubMenuItemExpand(index) {
      const subMenu = this.navMenu
        .find(item => item.index === index.split('-')[0])
        .children.find(item => item.index === index);
      subMenu.isExpand = !subMenu.isExpand;
    },
    toggleMenuItemExpand(index) {
      const menu = this.navMenu.find(item => item.index === index);
      menu.isExpand = !menu.isExpand;
    },
    handleMenuItemClick(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style scoped lang="scss">
div.sl-content {
  padding-top: 14px;
  height: calc(100% - 60px);
  overflow: auto;
  &::-webkit-scrollbar-track-piece {
    background-color: #f0f5ff;
  }
  &::-webkit-scrollbar {
    width: 4px;
    height: 40px;
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    //background-color: hsla(220, 4%, 58%, .3);
    background-color: #5479ff;
  }
  .menu-container {
    .menu-item {
      position: relative;
      &::before {
        content: '';
        position: absolute;
        top: 25px;
        left: 8px;
        width: 1px;
        height: var(--menu-item-height);
        background-color: #d3d3ef;
      }
      .common-nav {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        span {
          margin-bottom: 0;
        }
      }
      .common-nav-two {
        position: relative;
      }
      i {
        margin-right: 10px;
        font-size: 18px;
        cursor: pointer;
      }
      span {
        display: block;
        margin-bottom: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #000;
        cursor: pointer;
      }
      .sub-menu-item {
        position: relative;
        margin-left: 20px;
        &::before {
          content: '';
          position: absolute;
          top: 25px;
          left: 8px;
          width: 1px;
          height: var(--sub-menu-item-height);
          background-color: #d3d3ef;
        }
        .sub-sub-menu-item {
          padding-left: 28px;
        }
      }
    }
    .sub-menu-container {
      overflow: hidden;
      transition: all 0.5s;
      .sub-sub-menu-container {
        overflow: hidden;
        transition: all 0.5s;
      }
    }
  }
}
.single-row-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.active-menu {
  i {
    color: #5479ff;
  }
  span {
    color: #5479ff !important;
    font-weight: bold;
  }
}
</style>
<style lang="scss">
.lookui-dialog-no-content-padding {
  .el-dialog__body {
    padding: 0;
  }
}
</style>

年月切换

Details

vue

<template>
  <div class="main-wrapper">
    <header class="header-container">
      <div class="prev-year year-block" @click="handleMinusYear">
        <el-icon><ArrowLeft /></el-icon>
        <span>{{ currentYear - 1 }}</span>
        <span>年</span>
      </div>
      <div class="current-year">
        <div class="cy-top">{{ currentYear }}年</div>
        <div class="cy-bot">
          <div
            v-for="(month, index) in 12"
            @click="toggleReportMonth(index + 1)"
            :class="{
              'current-month': index + 1 === currentMonth,
              'forbidden-month': hasForbiddenMonthClass(month),
            }"
            :key="index">
            {{ month }}月
          </div>
        </div>
      </div>
      <div class="next-year year-block" @click="handleAddYear">
        <el-icon><ArrowRight /></el-icon>
        <span>{{ currentYear + 1 }}</span>
        <span>年</span>
      </div>
    </header>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      currentMonth: new Date().getMonth() + 1,
      currentYear: new Date().getFullYear(),
    };
  },
  props: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    toggleReportMonth(month) {
      if (this.hasForbiddenMonthClass(month)) {
        return;
      }
      this.currentMonth = month;
    },
    handleAddYear() {
      this.currentYear++;
    },
    handleMinusYear() {
      this.currentYear--;
    },
    hasForbiddenMonthClass(month) {
      // 创建表示当前日期的 Date 对象
      const currentDate = new Date();

      // 创建表示目标日期的 Date 对象
      const targetDate = new Date(this.currentYear, month - 1); // 月份需要减去1，因为月份是从0开始计数的

      // 获取当前日期和目标日期的时间戳
      const currentTimestamp = currentDate.getTime();
      const targetTimestamp = targetDate.getTime();

      // 判断目标日期的时间戳是否大于当前日期的时间戳
      if (targetTimestamp > currentTimestamp) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.main-wrapper {
  background-color: #fff;
}
header.header-container {
  display: flex;
  height: 90px;
  div.year-block {
    display: flex;
    align-items: center;
    border: 1px solid #797979;
    border-radius: 4px;
    line-height: 90px;
    padding: 0 8px;
    cursor: pointer;
    i {
      font-size: 14px;
      font-weight: bold;
    }
    span {
      &:nth-of-type(1) {
        font-size: 14px;
        font-weight: bold;
        margin: 0 4px;
      }
    }
  }
  div.prev-year {
    i.el-icon-arrow-left {
    }
  }

  div.current-year {
    flex: 1;
    margin: 0 14px;
    height: 100%;
    div.cy-top {
      border: 1px solid #797979;
      border-bottom: none;
      border-radius: 8px 8px 0 0;
      height: 50%;
      line-height: 45px;
      text-align: center;
      font-size: 28px;
      font-weight: bold;
    }

    div.cy-bot {
      display: flex;
      height: 50%;
      line-height: 45px;
      div {
        flex: 1;
        text-align: center;
        border: 1px solid #797979;
        margin-right: -1px;
        cursor: pointer;
        &:last-child {
          margin-right: 0;
        }
        &.current-month {
          background-color: #506eda;
          color: #fff;
          border: none;
        }
        &.forbidden-month {
          background-color: #cccccc;
          color: #fff;
          border: none;
          cursor: not-allowed;
        }
      }
    }
  }
}
</style>

<template>
  <div class="main-wrapper">
    <header class="header-container">
      <div class="prev-year year-block" @click="handleMinusYear">
        <el-icon><ArrowLeft /></el-icon>
        <span>{{ currentYear - 1 }}</span>
        <span>年</span>
      </div>
      <div class="current-year">
        <div class="cy-top">{{ currentYear }}年</div>
        <div class="cy-bot">
          <div
            v-for="(month, index) in 12"
            @click="toggleReportMonth(index + 1)"
            :class="{
              'current-month': index + 1 === currentMonth,
              'forbidden-month': hasForbiddenMonthClass(month),
            }"
            :key="index">
            {{ month }}月
          </div>
        </div>
      </div>
      <div class="next-year year-block" @click="handleAddYear">
        <el-icon><ArrowRight /></el-icon>
        <span>{{ currentYear + 1 }}</span>
        <span>年</span>
      </div>
    </header>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      currentMonth: new Date().getMonth() + 1,
      currentYear: new Date().getFullYear(),
    };
  },
  props: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    toggleReportMonth(month) {
      if (this.hasForbiddenMonthClass(month)) {
        return;
      }
      this.currentMonth = month;
    },
    handleAddYear() {
      this.currentYear++;
    },
    handleMinusYear() {
      this.currentYear--;
    },
    hasForbiddenMonthClass(month) {
      // 创建表示当前日期的 Date 对象
      const currentDate = new Date();

      // 创建表示目标日期的 Date 对象
      const targetDate = new Date(this.currentYear, month - 1); // 月份需要减去1，因为月份是从0开始计数的

      // 获取当前日期和目标日期的时间戳
      const currentTimestamp = currentDate.getTime();
      const targetTimestamp = targetDate.getTime();

      // 判断目标日期的时间戳是否大于当前日期的时间戳
      if (targetTimestamp > currentTimestamp) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.main-wrapper {
  background-color: #fff;
}
header.header-container {
  display: flex;
  height: 90px;
  div.year-block {
    display: flex;
    align-items: center;
    border: 1px solid #797979;
    border-radius: 4px;
    line-height: 90px;
    padding: 0 8px;
    cursor: pointer;
    i {
      font-size: 14px;
      font-weight: bold;
    }
    span {
      &:nth-of-type(1) {
        font-size: 14px;
        font-weight: bold;
        margin: 0 4px;
      }
    }
  }
  div.prev-year {
    i.el-icon-arrow-left {
    }
  }

  div.current-year {
    flex: 1;
    margin: 0 14px;
    height: 100%;
    div.cy-top {
      border: 1px solid #797979;
      border-bottom: none;
      border-radius: 8px 8px 0 0;
      height: 50%;
      line-height: 45px;
      text-align: center;
      font-size: 28px;
      font-weight: bold;
    }

    div.cy-bot {
      display: flex;
      height: 50%;
      line-height: 45px;
      div {
        flex: 1;
        text-align: center;
        border: 1px solid #797979;
        margin-right: -1px;
        cursor: pointer;
        &:last-child {
          margin-right: 0;
        }
        &.current-month {
          background-color: #506eda;
          color: #fff;
          border: none;
        }
        &.forbidden-month {
          background-color: #cccccc;
          color: #fff;
          border: none;
          cursor: not-allowed;
        }
      }
    }
  }
}
</style>

水平滚动切换

2024-01

2024-02

2024-03

2024-04

2024-05

2024-06

2024-07

2024-08

2024-09

2024-10

2024-11

2024-12

Details

vue

<template>
  <div class="TabScrollable">
    <div :class="['prev-btn', {disabled: currentScrollCount === 0}]" @click="handleScrollLeft">&lt;</div>
    <div class="scroll-area">
      <div class="scroll-item-container">
        <div class="scroll-item-wrap" :style="{marginLeft: currentMarginLeft}">
          <div @click="handleClick(index)" :class="['scroll-item', {active: currentIndex === index}]" v-for="(item, index) in list" :key="index">
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <div :class="['next-btn', {disabled: currentScrollCount === maxScrollCount}]" @click="handleScrollRight">&gt;</div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      currentMarginLeft: '0px',
      onceScrollCount: 5, // 一次滚动的个数
      currentScrollCount: 0, // 当前滚动的次数
      currentIndex: 0,
      list: [
        '2024-01',
        '2024-02',
        '2024-03',
        '2024-04',
        '2024-05',
        '2024-06',
        '2024-07',
        '2024-08',
        '2024-09',
        '2024-10',
        '2024-11',
        '2024-12',
      ],
    };
  },
  props: {},
  computed: {
    maxScrollCount() {
      return Math.floor(this.list.length / this.onceScrollCount);
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleScrollLeft() {
      if (this.currentScrollCount === 0) {
        return;
      }
      this.currentScrollCount--;
      this.currentMarginLeft = `-${this.currentScrollCount * this.onceScrollCount * 100}px`;
    },
    handleScrollRight() {
      if (this.currentScrollCount === this.maxScrollCount) {
        return;
      }
      this.currentScrollCount++;
      this.currentMarginLeft = `-${this.currentScrollCount * this.onceScrollCount * 100}px`;
    },
    handleClick(index) {
      this.currentIndex = index;
    }
  },
};
</script>

<style scoped lang="scss">
$border-style: 1px solid #000;
.TabScrollable {
  display: flex;
  .prev-btn, .next-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    color: #000;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 20px;
    &.disabled {
      color: #ccc;
    }
  }
  .scroll-area {
    display: flex;
    width: 921px;
    overflow: auto;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 10px;
    overflow: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
    .scroll-item-container {
      overflow: hidden;
    }
    .scroll-item-wrap {
      display: flex;
      transition: all .5s;
    }
    .scroll-item {
      flex-shrink: 0;
      width: 100px;
      border: 1px solid #000;
      border-right: none;
      line-height: 45px;
      white-space: nowrap;
      text-align: center;
      cursor: pointer;
      &:last-child {
        border-right: 1px solid #000;
      }
      &.active {
        background-color: #506eda;
        color: #fff;;
      }
    }
  }
}
</style>

<template>
  <div class="TabScrollable">
    <div :class="['prev-btn', {disabled: currentScrollCount === 0}]" @click="handleScrollLeft">&lt;</div>
    <div class="scroll-area">
      <div class="scroll-item-container">
        <div class="scroll-item-wrap" :style="{marginLeft: currentMarginLeft}">
          <div @click="handleClick(index)" :class="['scroll-item', {active: currentIndex === index}]" v-for="(item, index) in list" :key="index">
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <div :class="['next-btn', {disabled: currentScrollCount === maxScrollCount}]" @click="handleScrollRight">&gt;</div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      currentMarginLeft: '0px',
      onceScrollCount: 5, // 一次滚动的个数
      currentScrollCount: 0, // 当前滚动的次数
      currentIndex: 0,
      list: [
        '2024-01',
        '2024-02',
        '2024-03',
        '2024-04',
        '2024-05',
        '2024-06',
        '2024-07',
        '2024-08',
        '2024-09',
        '2024-10',
        '2024-11',
        '2024-12',
      ],
    };
  },
  props: {},
  computed: {
    maxScrollCount() {
      return Math.floor(this.list.length / this.onceScrollCount);
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleScrollLeft() {
      if (this.currentScrollCount === 0) {
        return;
      }
      this.currentScrollCount--;
      this.currentMarginLeft = `-${this.currentScrollCount * this.onceScrollCount * 100}px`;
    },
    handleScrollRight() {
      if (this.currentScrollCount === this.maxScrollCount) {
        return;
      }
      this.currentScrollCount++;
      this.currentMarginLeft = `-${this.currentScrollCount * this.onceScrollCount * 100}px`;
    },
    handleClick(index) {
      this.currentIndex = index;
    }
  },
};
</script>

<style scoped lang="scss">
$border-style: 1px solid #000;
.TabScrollable {
  display: flex;
  .prev-btn, .next-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    color: #000;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 20px;
    &.disabled {
      color: #ccc;
    }
  }
  .scroll-area {
    display: flex;
    width: 921px;
    overflow: auto;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 10px;
    overflow: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
    .scroll-item-container {
      overflow: hidden;
    }
    .scroll-item-wrap {
      display: flex;
      transition: all .5s;
    }
    .scroll-item {
      flex-shrink: 0;
      width: 100px;
      border: 1px solid #000;
      border-right: none;
      line-height: 45px;
      white-space: nowrap;
      text-align: center;
      cursor: pointer;
      &:last-child {
        border-right: 1px solid #000;
      }
      &.active {
        background-color: #506eda;
        color: #fff;;
      }
    }
  }
}
</style>

新境界常用 ui ​

desc-table ​

表单表格分页 ​

开关 ​

搜索 ​

导航菜单 ​

年月切换 ​

水平滚动切换 ​

新境界常用 ui

desc-table

表单表格分页

开关

搜索

导航菜单

年月切换

水平滚动切换