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

已于 2022-03-26 10:00:11 修改
阅读量1.3k 收藏 3
点赞数
分类专栏： pc端vue知识点分享 文章标签： html css vue.js
于 2022-03-26 09:56:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/able_me/article/details/123750623
版权

这是写的美化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>
相伴而行
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端 CSS - 如何隐藏右侧的滚动条 -关于出现过多的滚动条导致界面不美观
Muxiu
08-30 1213
CSS 配置：下面两个一起写进进去，适配 IE、火狐、谷歌浏览器。
css设置滚动条样式
yangshanghao的博客
03-13 1051
*高宽分别对应横竖滚动条的尺寸*/width: 4px;/*高宽分别对应横竖滚动条的尺寸*//*滚动条里面小方块*//*滚动条里面小方块*//*滚动条整体样式*//*滚动条里面轨道*//*滚动条整体样式*//*滚动条里面轨道*/效果（右侧滚动条被修改）1：设置全局滚动条样式。
学会使用 CSS 自定义滚动条，能让你做的产品更有用户体验！
最新发布
2401_84093019的博客
04-22 1007
拥有一个自定义的滚动条曾经是webkit的专利，所以Firefox和IE被排除在游戏之外。我们有一种新的语法，只在Firefox中使用，当它被完全支持时，将使我们的工作更容易。我们先看一下旧的Webkit语法，然后再介绍新的语法。要知道的一个重要问题是，在哪里定制滚动条。你希望样式是通用的，对网站上的所有滚动条都有效吗？还是你只想让它用于特定的部分？使用旧的语法，我们可以编写选择器，而不必将它们附加到元素上，它们将应用于所有可滚动的元素。如果你想只适用于一个特定的部分，你需要在选择器之前附加元素。
vue-elementul右侧滚动条不显示，改变滚动条样式。elementul隐藏组件。不显示滚动条还可以滚动
seeeeeeeeeee的博客
08-02 2395
效果图 看到了elementul官网滚动条是这样的，这是一个隐藏的组件，我们也可以用到自己的项目中，改变滚动条样式。 上代码 用法，el-scrollbar标签包裹住你想要改变滚动条的部分，比如只包裹左侧菜单栏，或者像我一样是直接包裹总的router-view，把所有的滚动条都改了。 html部分 <el-scrollbar style="height:100%"> <div>1</div> <div>2</div> &lt
vue简单实现滚动条
pingfanblog
01-05 2204
背景：产品提了一个需求在一个详情页，一个form表单元素太多了，需要滚动到最下面才能点击提交按钮，很不方便。他的方案是，加一个滚动条，这样可以直接拉到最下面。优化：1、支持滚动条，这样方便快速往下拉2、点击提交按钮可以悬浮起来，这样随时都能修改完提交，不用拉到最底下。接下来就简单案例实现一下。直接用vue中的组件来实现这个小需求。右侧有下拉框、右下角固定住提交按钮即可。最终实现的效果图如下。
VUE CSS流动边框特效（二）
LEON_RAY
03-18 2507
效果： HTML: <div class="divSide"> <span class="s-1" /> <span class="s-2" /> <span class="s-3" /> <span class="s-4" /> </div> CSS L .divSide { overflow: hidden; width: 460px; height: 994p...
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
01-18
vscroll 一款基于vue2.x开发的网页端轻量级超小巧自定义美化滚动条组件。支持是否原生滚动条、鼠标移出是否自动隐藏、自定义滚动条尺寸及颜色等功能。 组件在设计开发之初借鉴了 el-scrollbar 及 vuebar 等组件...
纯CSS实现隐藏滚动条但仍具有滚动的效果（移动端和pc端）
01-19
移动端页面只要兼容 Chrome 和 Safari 就够了，所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。 .container::-webkit-scrollbar { display: none; } PC 端 PC 端对兼容性的要求相对来...
Vue实现渲染数据后控制滚动条位置(推荐)
10-15
本文将详细讲解如何在Vue中实现在渲染数据后控制滚动条的位置。 首先，我们要了解基本的需求场景：一个聊天界面，当新的消息被发送时，如果消息数量过多导致滚动条出现，我们需要确保最新的消息能够立即显示在屏幕...
CSS设计之页面滚动条出现时防止页面跳动的方法
12-11
在网页设计中，水平居中布局是常见的网页布局方式，通过设置主体元素的宽度和`margin: 0 auto`来实现。然而，这种方式在遇到滚动条时会出现一个问题，即页面内容在滚动条出现和消失时发生跳动，影响用户体验。这是...
vue中改变滚动条样式的方法
10-15
在Vue.js应用中，改变滚动条的样式通常涉及到两种主要的方法：一种是使用原生CSS样式，另一种是借助第三方库，如vuescroll。这两种方法都有其特点和适用场景，下面将详细介绍这两种方法。 **一、原生CSS样式** ...
SVG 画出动态线条流动效果
sunxiaobai1的博客
02-10 8971
版權聲明: 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 最近做了一个项目 UI图长这样 中间的线条没有gif 需要用代码画出来 尝试了很多种方法 最终选择了用svg画 下面是全部的代码 <template> <div class="right-page"> <Subtitles :hanzi="title.zh" :yingyu="title.en" class="title"></Subtitles> .
如何美化滚动条
Rouqier的博客
04-22 1597
1.如何美化滚动条（一般在移动端使用） 以下就是美化属性，直接写在css公共样式里面 .scrollable { overflow: auto; } .scrollable::-webkit-scrollbar { width: 6px; height: 6px; } .scrollable::-webkit-scrollbar-thumb { border-radius: 5px; background: #dddddd; } .scrollable::
vue 实现边框流光动画
weixin_45727272的博客
03-30 6139
直接上代码 <template> <div class="login"> <h1>动态效果</h1> <div class="lightline"></div> <ol> <li v-for="(item, index) in indoorParams" :key="index"> <div class="animate-border"&...
Vue.js 打造酷炫的可视化数据大屏
实验楼--动手做实验，轻松学IT！
11-06 5381
可视化技术与 Vue 介绍 实验介绍 在本节实验中，将对可视化技术的应用场景、发展历程进行介绍，让大家对可视化技术有一个基础的概念。随后将介绍如今流行的可视化框架与其之间的优缺点对比。最后介绍 Vue 与其脚手架的概念知识，也是本课程后期项目实战的核心技术点之一。 知识点 可视化技术发展与应用 可视化技术框架 Vue 技术 Vue-cli 脚手架 什么是可视化 “数据可视化” 是一门数据与视觉相结合的技术，简单理解就是将数据转换成易于用户辨识和理解的视觉表现形式。通过图表展现方式，让数据转换为视觉图像，
在Vue3中使用NavieUI组件库，美化页面
qq_53679247的博客
04-06 2689
注意，好像只支持按需引用。2 安装NavieUI。3 使用NavieUI。1 创建Vue3项目。
Vue程序调试方法以及页面美化
程序员小杨哥的博客
03-05 1244
Vue如何调试代码？页面有哪些通用美化方法，让页面变得更好看~
css中按y轴怎么写,CSS3 简单的圆形Y轴（RotateY）变换
weixin_39917811的博客
08-03 409
CSS语言：CSSSCSS确定html,body {height: 100%;}.science {position: absolute;width: 120px;height: 120px;top: 50%;left: 50%;margin: -60px 0 0 -60px;transform: rotate(45deg);}.isthis {width: 100%;height: 100%;t...
19款绚丽实用的jQuery/CSS3侧边栏菜单
weixin_33795806的博客
10-12 1884
jQuery作为一款主流的JavaScript前端开发框架，深受广告开发者的亲睐，同时jQuery有着不计其数的插件，特别是菜单插件更为丰富，本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单，这些侧边栏菜单可以用在不同风格的网页上，如果你觉得不错，也可以进入其下载页面下载菜单源代码。 1、jQuery 3D 垂直多级菜单 可筛选菜单项 这是一款手风琴样式的垂直多级菜单，其特点是利用C...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值