|
|
<template>
|
|
|
<div class="app-deal-block">
|
|
|
<el-row>
|
|
|
<el-col :span="24">
|
|
|
<el-button type="primary" @click="toggleFullscreen">全屏</el-button>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<div class="deal-block-conter">
|
|
|
<div class="block-conter-header">
|
|
|
<div class="conter-header">
|
|
|
<div class="header-item">
|
|
|
<span>111111</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="conter-header">
|
|
|
<span>1</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="block-conter-content">
|
|
|
<el-scrollbar :height="height" always >
|
|
|
<div v-for="item in 30" :key="item" class="block-item">
|
|
|
<div class="block-item-title">
|
|
|
<span>区块链</span>
|
|
|
</div>
|
|
|
<div class="block-item-content">
|
|
|
<p>区块哈希：535bd60b1666b1b…</p>
|
|
|
<p>时间戳：535bd60b1666b1b…</p>
|
|
|
<p>前一区块哈希：000000000000…</p>
|
|
|
</div>
|
|
|
<div class="block-item-footer">
|
|
|
<span>交易数据：da014f8832082bc6…</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-scrollbar>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import {toggleFullscreenContainer} from '@/utils/index.js'
|
|
|
const height = ref(600)
|
|
|
// 全屏函数
|
|
|
const toggleFullscreen = () => {
|
|
|
height.value =950
|
|
|
toggleFullscreenContainer('.deal-block-conter')
|
|
|
|
|
|
}
|
|
|
// 监测退出全屏
|
|
|
|
|
|
// 如何监听退出全屏
|
|
|
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.app-deal-block {
|
|
|
padding: 20px;
|
|
|
.el-button {
|
|
|
padding: 0 50px;
|
|
|
border: 2px solid #25f4f9;
|
|
|
background: linear-gradient(0deg, #0654b5 0%, #003155 50%, #2cd1e4 100%);
|
|
|
box-shadow: 0px 5px 6px 0px rgba(0, 48, 255, 0.77);
|
|
|
border-radius: 8px;
|
|
|
&:hover {
|
|
|
background: linear-gradient(0deg, #0654b5 0%, #003155 50%, #2cd1e4 100%);
|
|
|
border-color: #ffffff;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
.deal-block-conter {
|
|
|
margin-top: 20px;
|
|
|
background: #091c6d;
|
|
|
border-radius: 10px;
|
|
|
padding: 20px 40px;
|
|
|
.block-conter-header {
|
|
|
display: flex;
|
|
|
height: 58px;
|
|
|
gap: 30px;
|
|
|
.conter-header {
|
|
|
width: 220px;
|
|
|
height: 58px;
|
|
|
background: url("../../../assets/images/node1.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
text-align: center;
|
|
|
line-height: 58px;
|
|
|
.header-item {
|
|
|
padding-left: 66px;
|
|
|
height: 58px !important;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.block-conter-content {
|
|
|
width: 100%;
|
|
|
// display: grid;
|
|
|
// grid-template-columns: repeat(4, 1fr);
|
|
|
.block-item {
|
|
|
display: inline-block;
|
|
|
width: 242px;
|
|
|
height: 232px;
|
|
|
background: linear-gradient(0deg, #0036ff 0%, #082288 100%);
|
|
|
border-radius: 26px;
|
|
|
margin-top: 40px;
|
|
|
margin-right: 60px;
|
|
|
margin-bottom: 40px;
|
|
|
// div尾部插入图片
|
|
|
&::after {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
position: relative;
|
|
|
width: 18px;
|
|
|
height: 20px;
|
|
|
right: -261px;
|
|
|
top:-56%;
|
|
|
background: url("../../../assets/images/链.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
.block-item-title {
|
|
|
margin: 7px 6px;
|
|
|
width: 230px;
|
|
|
height: 46px;
|
|
|
border-image: linear-gradient(0deg, #00fdff, #ffffff) 10 10;
|
|
|
background: linear-gradient(0deg, #001eff 0%, #b16bff 100%);
|
|
|
box-shadow: 0px 4px 8px 0px #0041fc;
|
|
|
border-radius: 23px !important;
|
|
|
border: 2px solid;
|
|
|
line-height: 46px;
|
|
|
text-align: center;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
.block-item-content {
|
|
|
height: 131px;
|
|
|
padding: 10px 20px;
|
|
|
p {
|
|
|
font-size: 12px;
|
|
|
font-family: Source Han Sans CN;
|
|
|
font-weight: 500;
|
|
|
color: #fefeff;
|
|
|
}
|
|
|
}
|
|
|
.block-item-footer {
|
|
|
width: 242px;
|
|
|
height: 46px;
|
|
|
background: #2c6dff;
|
|
|
border-radius: 0px 0px 23px 23px;
|
|
|
line-height: 46px;
|
|
|
text-align: center;
|
|
|
font-size: 12px;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
:deep(.el-scrollbar__thumb){
|
|
|
background-color: #2B89FF !important;
|
|
|
}
|
|
|
}
|
|
|
</style>
|