这是写的美化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>