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

关注

原创 2022-03-26 10:00:11 1.5k 阅读 AI 写同款· GEO 优化 ›

Scrollbar浏览器滚动条样式美化-知识点-案例 滚动条样式一 /* 样式一 */ /*滚动条整体样式 body:: 只给body加样式 ::给全部*/ ::-webkit-scrollbar { width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } /*滚动条里面小方块*/ ::-webkit-scrollbar-thumb { border-radius: 4px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: 阅读详情

这是写的美化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="right_table_box">
              <div class="left_name">交易类型：</div>
              <div class="right_content">
                {{ itemDetails.tradeType || "暂无" }}
              </div>
            </div>
          </div>
          <!-- 第三行 -->
          <div class="table_item_box">
            <div class="left_table_box">
              <div class="left_name">公示状态：</div>
              <div class="right_content">
                {{ filterStatus(itemDetails.status) || "暂无" }}
              </div>
            </div>
            <div class="right_table_box">
              <div class="left_name">截止日期：</div>
              <div class="right_content">
                {{ initTimeNum(itemDetails.closeDate) || "暂无" }}
              </div>
            </div>
          </div>
        </div>
        <div class="Detail_area_box">
          <div class="details_title_box">
            <img src="../../public/images/ptitle.png" alt="" />
            <div class="details_name">详细信息</div>
          </div>
        </div>
        <!-- 详情信息内容 -->
        <div class="details_content_box">
          <div class="introduce_box">
            兹公示{{ itemDetails.transferor }}与{{ itemDetails.transferee }}于{{
              initTime(itemDetails.createdAt)
            }}
            <!-- itemDetails.productionPay.paymentTime -->
            <!-- 2021年07月09日 -->
            对{{ itemDetails.propertyWay }}的“{{
              itemDetails.tradeName
            }}”项目，拟签订成交合同，拟交易金额人民币{{
              itemDetails.amounts / 1000000
            }}
            万元。所含科技成果如下：
          </div>
          <div class="technology_name">{{ itemDetails.tradeContent }}</div>
          <div class="time_box">
            公示日期：{{
              initTime(itemDetails.closeDate)
            }}前若任何单位或个人对以上公示内容有异议，请在公示期内与{{
              itemDetails.siteName
            }}联系，提交书面异议函。
          </div>
          <div class="contacts_box">联系人：{{ itemDetails.contacts }}</div>
          <div class="contact_number">
            联系电话：{{ itemDetails.telephone }}
          </div>
          <div class="mailbox_box">邮箱： {{ itemDetails.email }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

数据处理逻辑：

<script>
export default {
  props: ["showState", "selectItemUuid", "initItemDetails"],
  data() {
    return {
      modalShow: true,
      listData: [
        // {
        //   amounts: 640000000,
        //   createdAt: "2022-02-17 14:35:23",
        //   remarks: "",
        //   status: 40,
        //   successfulDate: "2022-02-28 00:00:00",
        //   tradeName: "dolphin申请成果公示",
        //   updatedAt: "2022-03-05 00:00:00",
        //   uuid: "e4815df5-6db2-4042-afdb-e8b193deda37",
        // },
        // {
        //   amounts: 453000000,
        //   createdAt: "2021-07-09 21:03:58",
        //   remarks: "",
        //   status: 40,
        //   successfulDate: "2021-07-01 00:00:00",
        //   tradeName: "军工计算机软硬件及网络技术",
        //   updatedAt: "2021-07-22 14:26:08",
        //   uuid: "c7fe26f0-0b23-44b9-99f1-3a378732ef35",
        // },
        // {
        //   amounts: 453000000,
        //   createdAt: "2021-07-09 21:03:58",
        //   remarks: "",
        //   status: 40,
        //   successfulDate: "2021-07-01 00:00:00",
        //   tradeName: "发范德萨发撒打发阿道夫的说法",
        //   updatedAt: "2021-07-22 14:26:08",
        //   uuid: "c7fe26f0-0b23-44b9-99f1-332ef35",
        // },
      ],
      // selectItem: {}, // 点击左侧侧边栏选中的值
      initSelectUuid: "", // 这是弹框底部选中的uuid
      itemDetails: {}, // 选中的当前数据详情
    };
  },
  mounted() {
    this.itemDetails = this.initItemDetails;
    // this.selectItem= this.initItemDetails
    console.log(this.initItemDetails, "传递的详情");
    this.getInitDataList();
  },
  methods: {
    clickClose() {
      // this.modalShow = true;
      this.showState = false;
      this.$emit("closeModal", false);
    },
    // 点击左侧侧边栏选中的值
    clickItem(e) {
      this.itemDetails = e;
      this.getPublicityDetails(e.uuid);
    },
    // 获取公示的数据
    getInitDataList() {
      // let name = localStorage.getItem("center");
      let name = "国家交易中心"; // 这个地方是后期要求不联动直接展示国家交易中心的数据就越好了
      this.$get(`/api/screen/public/centerList?center=${name}`, {}).then(
        (res) => {
          console.log(res.data, "弹框获取的公示数据");
          this.listData = res.data || [];
        }
      );
    },
    // 获取详情页面
    getPublicityDetails(uuid) {
      this.$get(`/api/screen/public/publicitDetail?uuid=${uuid}`).then(
        (res) => {
          console.log(res, "获取详情数据");
          this.itemDetails = res.data;
        }
      );
    },
    // 格式化成年月日
    initTime(time) {
      console.log(time, "传递来的时间");
      // 原生自己写
      const date = new Date(time);
      const year = date.getFullYear();
      const Month = date.getMonth() + 1;
      const day = date.getDate();
      // const hh = date.getHours()
      // const mm = date.getMinutes()
      // const ss = date.getSeconds()
      // console.log(`${year}年${Month}月${day}日 ${hh}:${mm}:${ss}`)
      return `${year}年${Month}月${day}日`;
    },
    // 格式化成---
    initTimeNum(time) {
      console.log(time, "传递来的时间");
      // 原生自己写
      const date = new Date(time);
      const year = date.getFullYear();
      const Month = date.getMonth() + 1;
      const day = date.getDate();
      // const hh = date.getHours()
      // const mm = date.getMinutes()
      // const ss = date.getSeconds()
      // console.log(`${year}年${Month}月${day}日 ${hh}:${mm}:${ss}`)
      return `${year}-${Month}-${day}`;
    },
    // 这是返回公示状态
    filterStatus(val) {
      return {
        0: "待支付",
        3: "待审批",
        5: "被驳回",
        10: "公示中",
        20: "暂停中",
        40: "已完成",
      }[val];
    },
  },
};
</script>

这是设置侧边栏滚动条样式和其他样式：

<style lang="less" scoped>
.Modal_box {
  width: 1082rem;
  height: 532rem;
  // padding: 36rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999999;
  background-image: url(../../public/images/toast_bg.png);
  background-size: 1080rem 532rem;
  background-repeat: no-repeat;
  .close_img {
    position: fixed;
    top: 45rem;
    right: 36rem;
    width: 20rem;
    height: 20rem;
  }
  .content_max_box {
    display: flex;
    justify-content: space-between;
    padding: 36rem;
    .left_box {
      width: 495rem;
      .head_box {
        display: flex;
        justify-content: flex-start;
        width: 495rem;
        height: 38rem;
        background-image: url(../../public/images/Horizontal_bar_bg.png);
        background-size: 495rem 38rem;
        .left_name {
          height: 38rem;
          line-height: 38rem;
          font-family: PingFangSC-Medium, PingFang SC;
          color: #e0f7ff;
          font-size: 18rem;
          font-weight: 500;
          margin-left: 16rem;
          margin-right: 20rem;
        }
        .right_name {
          height: 38rem;
          line-height: 38rem;
          font-size: 12rem;
          font-family: ArialMT;
          color: #ffffff;
        }
      }
      .title_box {
        height: 34rem;
        line-height: 34rem;
        font-size: 12rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #e0f7ff;
        margin-left: 26rem;
      }
        // 美化右侧，侧边滚动条开始. 美化滚动条样式要与设置滚动条盒子平等级 
        // .list_data_box是滚动条盒子，美化样式写在它的DOM身上
      .list_data_box {
        height: 390rem;
        // overflow: hidden;
        overflow: scroll;
        overflow-x: hidden;
        .list_data_item {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          height: 30rem;
          cursor: default;
        }
        .Small_circle_box {
          width: 6rem;
          height: 6rem;
          border-radius: 50%;
          background-color: #0de2f3;
          margin: 0 10rem;
        }
        .list_text {
          width: 495rem;
          height: 30rem;
          line-height: 30rem;
          font-size: 12rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #b9dfec;
        }
        .Select_box {
          color: #0de2f3;
        }
        .list_num {
          background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0) 100%
          );
        }
      }
      /* 滚动条整体部分 */
      .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);
      }
 // 美化右侧，侧边滚动条结束. 美化滚动条样式要与设置滚动条盒子平等级 
    }
    .right_box {
      width: 495rem;
      .head_box {
        display: flex;
        justify-content: flex-start;
        width: 495rem;
        height: 38rem;
        background-image: url(../../public/images/Horizontal_bar_bg.png);
        background-size: 495rem 38rem;
        .left_name {
          height: 38rem;
          line-height: 38rem;
          font-family: PingFangSC-Medium, PingFang SC;
          color: #e0f7ff;
          font-size: 18rem;
          font-weight: 500;
          margin-left: 16rem;
          margin-right: 20rem;
        }
        .right_name {
          height: 38rem;
          line-height: 38rem;
          font-size: 12rem;
          font-family: ArialMT;
          color: #ffffff;
        }
      }
      .table_box {
        width: 495rem;
        height: 66rem;
        margin-top: 20rem;
        .table_item_box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 22rem;
          .left_table_box {
            width: 240rem;
            height: 22rem;
            display: flex;
            justify-content: flex-start;
            .left_name {
              width: 60rem;
              height: 22rem;
              line-height: 22rem;
              font-size: 12rem;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #bddce6;
            }
            .right_content {
              width: 180rem;
              height: 22rem;
              line-height: 22rem;
              font-size: 12rem;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #f1fbff;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .right_table_box {
            width: 240rem;
            display: flex;
            justify-content: flex-start;
            .left_name {
              width: 60rem;
              height: 22rem;
              line-height: 22rem;
              font-size: 12rem;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #bddce6;
            }
            .right_content {
              width: 180rem;
              height: 22rem;
              line-height: 22rem;
              font-size: 12rem;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #f1fbff;
            }
          }
        }
      }
      // 详情区域
      .Detail_area_box {
        width: 495rem;
        height: 22rem;
        margin-top: 20rem;
        margin-bottom: 10rem;
        .details_title_box {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          > img {
            width: 20rem;
            height: 14rem;
            margin-right: 8rem;
          }
          .details_name {
            height: 22rem;
            line-height: 22rem;
            font-size: 14rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #daf1f9;
          }
        }
      }
      .details_content_box {
        .introduce_box {
          font-size: 12rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #daf1f9;
          line-height: 26rem;
        }
        .technology_name {
          line-height: 26rem;
          color: #daf1f9;
        }
        .time_box {
          line-height: 26rem;
          color: #daf1f9;
        }
        .contacts_box {
          line-height: 26rem;
          color: #daf1f9;
        }
        .contact_number {
          line-height: 26rem;
          color: #daf1f9;
        }
        .mailbox_box {
          line-height: 26rem;
          color: #daf1f9;
        }
      }
    }
  }
}
</style>

收录于