网页端 vue项目 css美化右侧 Y轴滚动条

原创

已于 2022-03-26 10:00:11 修改 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #vue.js

于 2022-03-26 09:56:54 首次发布

这是写的美化y轴滚动条的dome 变为自己的需要替换数据哦

美化后的样式效果：

美化样式关键代码：

      // .list_data_box 是滚动条盒子
        /* 滚动条整体部分 */
      .list_data_box::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: transparent;
      }
      /* 滚动条轨道部分 */
      .list_data_box::-webkit-scrollbar-track {
        background-color: transparent;
        background-color: rgb(15, 43, 87);
      }

      /* 滚动条滑块部分 */
      .list_data_box::-webkit-scrollbar-thumb {
        border-radius: 3px;
        // background-image: linear-gradient(135deg, #09f, #3c9);
        background-image: linear-gradient(135deg, #09f, #0095ff);
      }

弹框dome整体页面：

<template>
  <div class="Modal_box" v-if="showState">
    <img
      @click="clickClose"
      class="close_img"
      src="../../public/images/close_box.png"
      alt=""
    />
    <div class="content_max_box">
      <div class="left_box">
        <div class="head_box">
          <div class="left_name">成交公示</div>
          <div class="right_name">Transaction publicity</div>
        </div>
        <div class="title_box">公示项目名称</div>
        <div class="list_data_box">
          <div
            class="list_data_item"
            v-for="(item, index) in listData"
            :key="index"
            @click="clickItem(item)"
          >
            <div class="Small_circle_box"></div>
            <div
              class="list_text"
              :class="{
                list_num: index % 2 == 0,
                Select_box: item.uuid == itemDetails.uuid,
              }"
            >
              {
  
  { item.tradeName }}
            </div>
          </div>
        </div>
      </div>
      <div class="right_box">
        <div class="head_box">
          <div class="left_name">公示信息</div>
          <div class="right_name">Publicity information</div>
        </div>
        <div class="table_box">
          <!-- 第一行 -->
          <div class="table_item_box">
            <div class="left_table_box">
              <div class="left_name">公示日期：</div>
              <div class="right_content">
                {
  
  { initTimeNum(itemDetails.createdAt) || "暂无" }}
              </div>
            </div>
            <div class="right_table_box">
              <div class="left_name">交易价格：</div>
              <div class="right_content">
                ¥{
  
  { itemDetails.amounts / 1000000 }}万
              </div>
            </div>
          </div>
          <!-- 第二行 -->
          <div class="table_item_box">
            <div class="left_table_box">
              <div class="left_name">交易方式：</div>
              <div class="right_content">
                {
  
  { itemDetails.propertyWay || "暂无" }}
              </div>
            </div>
            <div class=