Skip to content

S
shld-databoard-ui
Commit 093c4a1e authored by 张恒's avatar 张恒
Browse files
Options

调整容器组件UI

parent 480e1b1b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1297 additions and 868 deletions
src/module/databoard/assets/index.css
View file @ 093c4a1e
:root {
--global-background-color: #020042; /* 全局背景色 */
--container-background-color: #020046; /* 容器背景色 */
--global-background-color: #020042; /* 全局背景色 */
--container-background-color: #020046; /* 容器背景色 */
--container-border-color: #0d53b7; /* 容器边框色 */
--container-shadow-color: #0930A9; /* 容器阴影色 */
--corner-background-color: #0E5FFF; /* 容器角标色 */
--card-background-color: #04175566; /* 卡片背景色 */
--card-border1-color: #3673A3; /* 卡片边框色1 */
--card-border2-color: #19EBFF; /* 卡片边框色2 */
--white-text-color: white; /* 白色文本 */
--lightblue-text-color: #75FEFF; /* 亮蓝色文本 */
--darkblue-text-color: #47AAFF; /* 深蓝色文本 */
--lightyellow-text-color: #FEE165; /* 亮黄色文本 */
}
.page {
position: relative;
height: 1080px;
height: 100%;
width: 100%;
min-width: 1920px;
overflow: hidden;
/*background: url(./img/SketchPng1d2d7c804f3d192d29ad3750c138064d493e3f502f79253a3bfa266fbdda7488.png) 100% no-repeat;*/
background-color: var(--global-background-color);
background-size: 100% 100%
}
.head {
height: 10%;
}
.head_content {
background: url(./img/top_img.png) no-repeat center;
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
text-align: center;
white-space: nowrap;
}
.text_date {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20.00px;
letter-spacing: 1.6666666269302368px;
text-align: left;
margin: 1% 0 0 6%
}
.text_time {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20.00px;
letter-spacing: 1.6666666269302368px;
text-align: left;
margin: 1% 0 0 1%
background-repeat: no-repeat;
background-position: center;
background-image: url(./img/top_img_2x.png);
background-size: cover;
}
.text_week {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20.00px;
letter-spacing: 1.6666666269302368px;
text-align: left;
margin: 1% 0 0 1%
.head span {
margin-left: 1rem;
color: var(--lightblue-text-color);
font-size: 20px;
font-family: AlimamaShuHeiTi, serif;
font-weight: bold;
letter-spacing: 2px;
}
.text_title {
text-shadow: 0px 2px 6px rgba(121, 179, 255, 0.600000);
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 40.00px;
letter-spacing: 8px;
font-family: AlimamaShuHeiTi;
text-align: center;
.text_left {
height: 50%;
width: 25%;
float: left;
display: flex;
justify-content: flex-end;
align-items: center;
white-space: nowrap;
margin: 1% 0 0 19%
}
.text_car {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20.00px;
letter-spacing: 1.6666666269302368px;
font-family: Helvetica;
text-align: left;
margin: 1% 0 0 20%
}
/**边框**/
.l_t_line {
width: 5px;
height: 24px;
left: -3px;
top: -3px;
}
.t_l_line {
height: 5px;
width: 26px;
left: -3px;
top: -3px;
}
.t_line_box {
position: absolute;
width: 100%;
height: 100%;
}
.t_line_box i {
background-color: #4788fb;
box-shadow: 0px 0px 10px #4788fb;
position: absolute;
}
.t_r_line {
height: 5px;
width: 26px;
right: -3px;
top: -3px;
}
.r_t_line {
width: 5px;
height: 24px;
right: -3px;
top: -3px;
}
.l_b_line {
width: 5px;
height: 24px;
left: -3px;
bottom: -3px;
}
.b_l_line {
height: 5px;
width: 26px;
left: -3px;
bottom: -3px;
}
.r_b_line {
width: 5px;
height: 24px;
right: -3px;
bottom: -3px;
}
.b_r_line {
height: 5px;
width: 26px;
right: -3px;
bottom: -3px;
}
.middle > div {
box-sizing: border-box;
border: 1px solid #2C58A6;
position: relative;
box-shadow: 0 0 10px #2C58A6;
.text_right {
height: 50%;
width: 25%;
float: right;
display: flex;
justify-content: flex-start;
align-items: center;
white-space: nowrap;
}
.middle {
height: 45%;
justify-content: center;
height: 49%;
justify-content: space-around;
display: flex;
padding: 1rem;
}
.content {
......@@ -170,20 +70,15 @@
}
.trade_left {
margin-bottom: 50px;
width: 20%;
width: 25%;
}
.trade_middle {
margin-bottom: 50px;
width: 50%;
margin-left: 1%;
width: 45%;
}
.trade_right {
margin-bottom: 50px;
width: 20%;
margin-left: 1%;
width: 25%;
}
src/module/databoard/components/card/contrast-card-backup.vue 0 → 100644
View file @ 093c4a1e
<template>
<info-card :style="cStyle">
<template v-slot:title>
{{title}}
</template>
<template v-slot:content>
<div class="card">
<div class="left">
<div class="left-top">
{{lt}}
</div>
<div class="left-bottom">
{{lb}}
</div>
</div>
<div class="right">
<div class="r_l c_top">{{rtl}}</div>
<div class="r_m c_top">{{rtm}}</div>
<div class="r_r c_top c_green">{{rtr}}</div>
<div class="r_l c_bottom">{{rbl}}</div>
<div class="r_m c_bottom ">{{rbm}}</div>
<div class="r_r c_bottom c_red">{{rbr}}</div>
</div>
</div>
</template>
</info-card>
</template>
<script>
import InfoCard from "./info-card.vue";
export default {
name:"ContrastCard",
components: {InfoCard},
data() {
return {
};
},
props: {
cStyle: {
type: Object,
default: function(){return {height:"110px"};}
},
title: {
type: String,
},
lt: {
type: String,
},
lb: {
type: String,
},
rtl: {
type: String,
},
rtm: {
type: String,
},
rtr: {
type: String,
},
rbl: {
type: String,
},
rbm: {
type: String,
},
rbr: {
type: String,
},
},
methods: {}
};
</script>
<style scoped>
.card{
width: 90%;
height: 100%;
margin: auto;
}
.left{
height: 100%;
width: 40%;
float:left;
}
.right{
height: 100%;
width: 60%;
float:left;
}
.c_top{
height: 60%;
line-height: 46px;
}
.c_bottom{
height: 40%;
}
.left-top{
color: #a2ef5c;
font-size: 32px;
text-align: center;
line-height: 46px;
height: 60%;
width: 100%;
}
.left-bottom{
text-align: right;
height: 40%;
width: 100%;
}
.right > div{
float: left;
text-align: center;
font-size: 16px;
}
.r_l{
width: 24%;
}
.r_m,.r_r{
width: 38%;
}
.c_red{
color: red;
}
.c_green{
color: #a2ef5c;
}
</style>
src/module/databoard/components/card/contrast-card.vue
View file @ 093c4a1e
<template>
<info-card :style="cStyle">
<template v-slot:title>
{{title}}
</template>
<template v-slot:content>
<div class="card">
<div class="left">
<div class="left-top">
{{lt}}
</div>
<div class="left-bottom">
{{lb}}
</div>
</div>
<div class="right">
<div class="r_l c_top">{{rtl}}</div>
<div class="r_m c_top">{{rtm}}</div>
<div class="r_r c_top c_green">{{rtr}}</div>
<div class="r_l c_bottom">{{rbl}}</div>
<div class="r_m c_bottom ">{{rbm}}</div>
<div class="r_r c_bottom c_red">{{rbr}}</div>
</div>
</div>
</template>
</info-card>
<div class="contrast_card">
<div class="top_border"></div>
<div class="top_side_dot"/>
<div class="bottom_side_dot"/>
<div class="bottom_border"></div>
<div class="card_content">
<slot></slot>
</div>
</div>
</template>
<script>
import InfoCard from "./info-card.vue";
export default {
name:"ContrastCard",
components: {InfoCard},
data() {
return {
};
},
props: {
cStyle: {
type: Object,
default: function(){return {height:"110px"};}
},
title: {
type: String,
},
lt: {
type: String,
},
lb: {
type: String,
},
rtl: {
type: String,
},
rtm: {
type: String,
},
rtr: {
type: String,
},
rbl: {
type: String,
},
rbm: {
type: String,
},
rbr: {
type: String,
},
},
methods: {}
name: "ContrastCard"
};
</script>
<style scoped>
.card{
width: 90%;
height: 100%;
margin: auto;
}
.left{
height: 100%;
width: 40%;
float:left;
}
.right{
height: 100%;
width: 60%;
float:left;
}
.c_top{
height: 60%;
line-height: 46px;
}
.c_bottom{
height: 40%;
}
.left-top{
color: #a2ef5c;
font-size: 32px;
text-align: center;
line-height: 46px;
height: 60%;
width: 100%;
}
.left-bottom{
text-align: right;
height: 40%;
width: 100%;
}
.right > div{
float: left;
text-align: center;
font-size: 16px;
}
.r_l{
width: 24%;
}
.r_m,.r_r{
width: 38%;
}
.c_red{
color: red;
}
.c_green{
color: #a2ef5c;
}
.contrast_card {
position: relative;
background-color: var(--card-background-color);
}
.top_border {
height: 33%;
border-top: 2px solid var(--card-border1-color);
border-left: 2px solid var(--card-border1-color);
border-right: 2px solid var(--card-border1-color);
}
.top_side_dot {
position: relative;
height: 17%;
}
.top_side_dot::before {
content: "";
position: absolute;
left: -2px;
height: 6px;
width: 6px;
border-radius: 50%;
background-color: var(--card-border2-color);
}
.top_side_dot::after {
content: "";
position: absolute;
right: -2px;
height: 6px;
width: 6px;
border-radius: 50%;
background-color: var(--card-border2-color);
}
.bottom_side_dot {
position: relative;
height: 17%;
}
.bottom_side_dot::before {
content: "";
position: absolute;
left: -2px;
bottom: 0;
height: 6px;
width: 6px;
border-radius: 50%;
background-color: var(--card-border2-color);
}
.bottom_side_dot::after {
content: "";
position: absolute;
right: -2px;
bottom: 0;
height: 6px;
width: 6px;
border-radius: 50%;
background-color: var(--card-border2-color);
}
.bottom_border {
height: 33%;
border-left: 2px solid var(--card-border1-color);
border-right: 2px solid var(--card-border1-color);
border-bottom: 2px solid var(--card-border1-color);
}
.card_content {
position: absolute;
top: 0;
height: 100%;
width: 100%;
padding: 0.5rem;
}
</style>
src/module/databoard/components/card/simple-card.vue 0 → 100644
View file @ 093c4a1e
<template>
<div class="simple_card">
<div class="top_corner_mark"/>
<div class="bottom_corner_mark"/>
<div class="card_content">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "SimpleCard"
};
</script>
<style scoped>
.simple_card {
position: relative;
margin: 0;
background-color: var(--card-background-color);
border: 0.05rem solid var(--card-border1-color);
}
.top_corner_mark {
position: absolute;
height: 10px;
width: 100%;
}
.top_corner_mark::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
height: 10px;
width: 10px;
border-top: 2px solid var(--card-border2-color);
border-left: 2px solid var(--card-border2-color);
}
.top_corner_mark::after {
content: "";
position: absolute;
top: -1px;
right: -1px;
height: 10px;
width: 10px;
border-top: 2px solid var(--card-border2-color);
border-right: 2px solid var(--card-border2-color);
}
.bottom_corner_mark {
position: absolute;
bottom: 0;
height: 10px;
width: 100%;
}
.bottom_corner_mark::before {
content: "";
position: absolute;
bottom: -1px;
left: -1px;
height: 10px;
width: 10px;
border-bottom: 2px solid var(--card-border2-color);
border-left: 2px solid var(--card-border2-color);
}
.bottom_corner_mark::after {
content: "";
position: absolute;
bottom: -1px;
right: -1px;
height: 10px;
width: 10px;
border-bottom: 2px solid var(--card-border2-color);
border-right: 2px solid var(--card-border2-color);
}
.card_content {
height: 100%;
width: 100%;
padding: 0.5rem;
}
</style>
src/module/databoard/components/card/winners-list.vue
View file @ 093c4a1e
<template>
<div style="height: 100%">
<div class="main_table t_btn8">
<table>
<tbody>
<tr v-for="(row, idx) in rows" :key="idx" :style="{height: 100 / rows.length + '%'}">
<td>
<div class="col_box">
<span class="winner_span">{{ row.title }}</span>
<span class="number_span">NO.{{ idx + 1 }}</span>
</div>
<div class="col_box">
<div v-for="(col, idz) in row.column" :key="idz">
<p class="key_span">{{ col.key }}</p>
<p class="value_span">{{ col.value }}</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="winner_list">
<table>
<tbody>
<tr v-for="(row, idx) in rows" :key="idx" :style="{height: 100 / rows.length + '%'}">
<td><div class="col_number">{{ idx + 1 }}</div></td>
<td class="winner_span" @click="goWinnerList">{{ row.title }}</td>
<td v-for="(col, idz) in row.column" :key="idz">
<p class="key_span">{{ col.key }}</p>
<p class="value_span">{{ col.value }}</p>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import DisplayBoard from "../container/display-board.vue";
export default {
name: "WinnersList",
components: {DisplayBoard},
props: {},
data() {
return {
rows: [
{
title: "上海欧冶股份有限公司",
title: "XX有限公司",
column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
},
{
title: "上海欧冶股份有限公司",
title: "XXXX有限公司",
column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
},
{
title: "上海欧冶股份有限公司",
title: "XXXXX有限公司",
column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
},
{
title: "上海欧冶股份有限公司",
title: "XXX有限公司",
column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
},
{
title: "上海欧冶股份有限公司",
title: "XXXXXX有限公司",
column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
}
]
};
},
methods: {}
methods: {
goWinnerList() {
this.$router.push({path: '/winner_list'})
}
}
};
</script>
<style scoped>
.main_table {
width: 95%;
height: 84%;
}
.main_table table {
width: 100%;
height: 100%;
}
.main_table tr {
height: 20%;
}
.winner_list {
.main_table td {
padding: 0;
color: #fff;
font-size: 10px;
text-align: center;
}
.main_table tbody tr:nth-child(odd) {
background-color: #04136B;
table {
height: 100%;
font-size: 12px;
color: white;
}
.main_table tbody tr:nth-child(even) {
background-color: #051D7D;
tr:nth-child(odd) {
background-color: #0E5FFF20;
}
.t_btn8, .t_btn2, .t_btn3 {
position: relative;
z-index: 100;
cursor: pointer;
tr:nth-child(even) {
background-color: #0E5FFF30;
}
.col_box {
display: flex;
justify-content: space-around;
td {
padding: 0 0 0 1rem;
}
.winner_span {
.col_number {
height: 38px;
min-width: 38px;
color: #19EBFF;
font-weight: bold;
text-align: center;
line-height: 38px;
background: url(../../assets/img/number_bg.png) no-repeat center;
}
.number_span {
color: #bf360c;
font-weight: bold;
.winner_span {
color: white;
font-size: 14px;
}
.key_span {
color: darkgrey;
font-weight: bold;
}
.value_span {
color: #00c853;
color: lightblue;
font-weight: bold;
}
</style>
src/module/databoard/components/chart/main-bar-chart.vue 0 → 100644
View file @ 093c4a1e
<template>
<div id="main_bar_chart" @click="goChart"/>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "MainBarChart",
data() {
return {
barChart: {
textStyle: {
color: "#FFFFFF",
fontSize: "12"
},
tooltip: {},
grid: {
top: "10%",
bottom: "10%"
},
xAxis: {
data: ['未结算未开票', '已结算未开票', '已开票未收款', '应收款', '已开票已收款'],
axisLabel: {
color: "#FFFFFF",
fontSize: "12",
margin: "15"
},
axisTick: {
show: false
}
},
yAxis: [{
type: "value",
splitLine: {
lineStyle: {
color: "#1E2C58"
}
},
axisLabel: {
show: false,
color: "#FFFFFFAA",
fontSize: "16"
}
}],
series: [
{
name: '应收账款',
type: 'bar',
data: [5002, 57873, 1987, 71168, 41098],
barWidth: "40%",
showBackground: true,
backgroundStyle: {
color: 'rgba(255, 255, 255, 0.1)'
},
itemStyle: {
barBorderRadius: 10,
},
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{offset: 0, color: '#00CCD2'},
{offset: 1, color: '#00A2FF'}
]
},
label: {
show: true,
position: 'top',
color: "#FFFFFF",
},
}
]
},
myChart: null
}
},
methods: {
resizeChart() {
if (this.myChart) {
this.myChart.resize();
}
},
goChart() {
this.$router.push({path: "/chart"})
}
},
mounted() {
// 设置500毫秒延迟执行，解决组件没有渲染完成就开始绘制图表的问题
setTimeout(() => {
let mainBarChart = document.getElementById('main_bar_chart')
this.myChart = echarts.init(mainBarChart)
this.myChart.setOption(this.barChart);
// 监听窗口大小变化，重绘图表
window.addEventListener('resize', this.resizeChart);
}, 500)
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeChart);
}
}
</script>
src/module/databoard/components/card/card_title_large.vue → src/module/databoard/components/container/board-title-large.vue
View file @ 093c4a1e
<template>
<div class="trapezoid">
<div class="board_title">
<div class="trapezoid1"/>
<div class="trapezoid2"/>
<div class="trapezoid3">
<div class="left-half-trapezoid"/>
<div class="right-half-trapezoid"/>
<div class="left_half_trapezoid"/>
<div class="right_half_trapezoid"/>
<div class="title">
<slot></slot>
</div>
......@@ -13,17 +13,17 @@
</template>
<script>
export default {
name: "CardTitleLarge"
name: "BoardTitleLarge"
};
</script>
<style scoped>
.trapezoid {
.board_title {
width: 100%;
height: 36px;
margin-bottom: 10px;
height: 54px;
}
.trapezoid1::before {
......@@ -31,9 +31,9 @@ export default {
position: absolute;
top: -4px;
left: 50%;
margin-left: -50px;
margin-left: -75px;
height: 6px;
width: 100px;
width: 150px;
background-image: radial-gradient(#00F6F0, transparent 60%);
}
......@@ -41,64 +41,64 @@ export default {
position: absolute;
top: -2px;
left: 50%;
margin-left: -78px;
width: 156px;
border-top: 36px solid #0D53B7;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
margin-left: -108px;
width: 216px;
border-top: 54px solid #0D53B7;
border-left: 22px solid transparent;
border-right: 22px solid transparent;
}
.trapezoid2 {
position: absolute;
top: -2px;
left: 50%;
margin-left: -75px;
width: 150px;
border-top: 34px solid var(--global-background-color);
border-left: 12px solid transparent;
border-right: 12px solid transparent;
margin-left: -105px;
width: 210px;
border-top: 52px solid var(--global-background-color);
border-left: 21px solid transparent;
border-right: 21px solid transparent;
}
.trapezoid3 {
position: absolute;
top: -2px;
left: 50%;
margin-left: -70px;
height: 30px;
width: 140px;
margin-left: -100px;
height: 50px;
width: 200px;
}
.title {
position: absolute;
width: 100%;
font-size: 12px;
font-size: 18px;
font-family: 黑体,serif;
font-weight: 700;
text-align: center;
letter-spacing: 0.2rem;
white-space: nowrap;
line-height: 30px;
color: #19ECFF;
line-height: 50px;
color: var(--lightblue-text-color);
}
.left-half-trapezoid {
.left_half_trapezoid {
position: absolute;
width: 50%;
height: 100%;
overflow: hidden;
}
.left-half-trapezoid::after {
.left_half_trapezoid::after {
content: "";
position: absolute;
height: 100%;
width: 110%;
left: 5px;
left: 10px;
background-image: linear-gradient(to bottom, #0933AD, transparent);
transform: skewX(20deg);
}
.right-half-trapezoid {
.right_half_trapezoid {
position: absolute;
right: 0;
width: 50%;
......@@ -106,13 +106,13 @@ export default {
overflow: hidden;
}
.right-half-trapezoid::after {
.right_half_trapezoid::after {
content: "";
position: absolute;
height: 100%;
width: 110%;
right: 5px;
background-image: linear-gradient(to bottom, #0933AD88, transparent);
right: 10px;
background-image: linear-gradient(to bottom, #0933AD, transparent);
transform: skewX(-20deg);
}
......
src/module/databoard/components/card/card_title_small.vue → src/module/databoard/components/container/board-title-small.vue
View file @ 093c4a1e
<template>
<div class="trapezoid">
<div class="board_title">
<div class="trapezoid1"/>
<div class="trapezoid2"/>
<div class="trapezoid3">
<div class="left-half-trapezoid"/>
<div class="right-half-trapezoid"/>
<div class="left_half_trapezoid"/>
<div class="right_half_trapezoid"/>
<div class="title">
<slot></slot>
</div>
......@@ -14,16 +14,15 @@
<script>
export default {
name: "CardTitleSmall"
name: "BoardTitleSmall"
};
</script>
<style scoped>
.trapezoid {
.board_title {
width: 100%;
height: 36px;
margin-bottom: 10px;
}
.trapezoid1::before {
......@@ -71,24 +70,24 @@ export default {
.title {
position: absolute;
width: 100%;
font-size: 12px;
font-size: 1rem;
font-family: 黑体,serif;
font-weight: 700;
text-align: center;
letter-spacing: 0.2rem;
white-space: nowrap;
line-height: 30px;
color: #19ECFF;
color: var(--lightblue-text-color);
}
.left-half-trapezoid {
.left_half_trapezoid {
position: absolute;
width: 50%;
height: 100%;
overflow: hidden;
}
.left-half-trapezoid::after {
.left_half_trapezoid::after {
content: "";
position: absolute;
height: 100%;
......@@ -98,7 +97,7 @@ export default {
transform: skewX(20deg);
}
.right-half-trapezoid {
.right_half_trapezoid {
position: absolute;
right: 0;
width: 50%;
......@@ -106,7 +105,7 @@ export default {
overflow: hidden;
}
.right-half-trapezoid::after {
.right_half_trapezoid::after {
content: "";
position: absolute;
height: 100%;
......
src/module/databoard/components/container/container-with-bord.vue deleted 100644 → 0
View file @ 480e1b1b
<template>
<div class="content container-with-bord" style="cursor: pointer; position: relative;">
<!--角标组件-->
<corner-mark-small></corner-mark-small>
<!--标题组件-->
<card-title-small v-if="$slots.title">
<slot name="title"></slot>
</card-title-small>
<slot></slot>
</div>
</template>
<script>
import CornerMarkSmall from "../icon/corner_mark_small.vue";
import CornerMarkLarge from "../icon/corner_mark_large.vue";
import CardTitleSmall from "../card/card_title_small.vue"
export default {
name: "ContainerWithBord",
components: {CornerMarkSmall, CornerMarkLarge, CardTitleSmall},
data() {
return {};
},
methods: {}
};
</script>
<style scoped>
div {
color: white;
}
.container-with-bord {
background-color: var(--container-background-color);
position: relative;
box-sizing: border-box;
border-radius: 15px;
box-shadow: 0 0 40px 10px #051E82 inset;
border: 2px solid #0D53B7;
}
</style>
src/module/databoard/components/container/display-board.vue 0 → 100644
View file @ 093c4a1e
<template>
<div class="display_board">
<!--角标组件-->
<corner-mark-large v-if="$props.corner_size === 'large'"/>
<corner-mark-small v-else/>
<!--标题组件-->
<board-title-large v-if="$props.title && $props.title_size === 'large'">{{ $props.title }}</board-title-large>
<board-title-small v-else-if="$props.title">{{ $props.title }}</board-title-small>
<!--内容插槽-->
<div class="board_content" ref="boardContent">
<slot></slot>
</div>
</div>
</template>
<script>
import CornerMarkSmall from "../icon/corner-mark-small.vue";
import CornerMarkLarge from "../icon/corner-mark-large.vue";
import BoardTitleSmall from "./board-title-small.vue"
import BoardTitleLarge from "./board-title-large.vue"
export default {
name: "DisplayBoard",
components: {CornerMarkSmall, CornerMarkLarge, BoardTitleSmall, BoardTitleLarge},
props: {
title: {
type: String,
default: null
},
corner_size: {
type: String,
default: "small"
},
title_size: {
type: String,
default: "small"
},
},
data() {
return {};
},
methods: {},
mounted() {
// 根据标题大小动态控制内容高度
if (this.$props.title) {
this.$refs.boardContent.style.height = this.$props.title_size === "large" ? "calc(100% - 54px)" : "calc(100% - 36px)"
}
}
};
</script>
<style scoped>
.display_board {
cursor: pointer;
position: relative;
box-sizing: border-box;
border-radius: 1.5rem;
border: 0.2rem solid var(--container-border-color);
background-color: var(--container-background-color);
box-shadow: 0 0 3rem var(--container-shadow-color) inset;
}
.board_content {
position: absolute;
height: 100%;
width: 100%;
padding: 1rem;
}
</style>
src/module/databoard/components/container/showcase.vue 0 → 100644
View file @ 093c4a1e
<template>
<div class="showcase">
<div class="showcase_cover"/>
<div class="show_content">
<slot></slot>
</div>
<div class="showcase_base">
<div class="showcase_title">{{ $props.title }}</div>
</div>
</div>
</template>
<script>
export default {
name: "Showcase",
props: {
title: String
}
};
</script>
<style scoped>
.showcase {
height: 100%;
background: var(--container-background-color);
border-radius: 500% / 100%;
box-shadow: 0 0 30px -2px var(--card-border2-color) inset;
overflow: hidden;
}
.showcase_cover {
width: 100%;
height: 15%;
border-radius: 50% / 50%;
background: radial-gradient(#19EBFF66, transparent);
}
.show_content {
height: 40%;
width: 100%;
color: var(--lightblue-text-color);
}
.showcase_base {
position: relative;
bottom: 0;
width: 100%;
height: 50%;
background-color: rgba(29, 58, 197, 0.64);
border-radius: 50% / 15% 15% 0 0;
display: flex;
align-items: center;
justify-content: center;
}
.showcase_base::after {
content: "";
position: absolute;
top: 0;
width: 100%;
height: 30%;
border-radius: 50% / 50%;
background: radial-gradient(#19EBFF66, transparent);
}
.showcase_title {
position: absolute;
height: 0;
color: var(--white-text-color);
font-size: 12px;
font-family: 黑体, serif;
font-weight: 700;
letter-spacing: 0.2rem;
}
</style>
src/module/databoard/components/container/title-content.vue
View file @ 093c4a1e
<template>
<div>
<div class="content-title">
<slot name="title"></slot>
</div>
<div class="content-title">{{ $props.title }}</div>
<div>
<slot name="content"></slot>
</div>
......@@ -11,6 +9,9 @@
<script>
export default {
name:"TitleContent",
props: {
title: String
},
data() {
return {
};
......
src/module/databoard/components/icon/corner_mark_large.vue → src/module/databoard/components/icon/corner-mark-large.vue
View file @ 093c4a1e
......@@ -25,51 +25,51 @@ export default {
.conner_mark_left1 {
position: absolute;
left: -2px;
top: -2px;
border-top: 32px solid #0D53B7;
border-right: 32px solid transparent;
left: -0.2rem;
top: -0.2rem;
border-top: 3.1rem solid var(--container-border-color);
border-right: 3.1rem solid transparent;
}
.conner_mark_left2 {
position: absolute;
left: -2px;
top: -2px;
border-top: 28px solid var(--global-background-color);
border-right: 28px solid transparent;
left: -0.2rem;
top: -0.2rem;
border-top: 2.8rem solid var(--global-background-color);
border-right: 2.8rem solid transparent;
}
.conner_mark_left3 {
position: absolute;
left: -2px;
top: -2px;
border-top: 24px solid #0E5FFF;
border-right: 24px solid transparent;
left: -0.2rem;
top: -0.2rem;
border-top: 2.4rem solid var(--corner-background-color);
border-right: 2.4rem solid transparent;
}
.conner_mark_right1 {
position: absolute;
right: -2px;
top: -2px;
border-top: 32px solid #0D53B7;
border-left: 32px solid transparent;
right: -0.2rem;
top: -0.2rem;
border-top: 3.1rem solid var(--container-border-color);
border-left: 3.1rem solid transparent;
}
.conner_mark_right2 {
position: absolute;
right: -2px;
top: -2px;
border-top: 28px solid var(--global-background-color);
border-left: 28px solid transparent;
right: -0.2rem;
top: -0.2rem;
border-top: 2.8rem solid var(--global-background-color);
border-left: 2.8rem solid transparent;
}
.conner_mark_right3 {
position: absolute;
right: -2px;
top: -2px;
border-top: 24px solid #0E5FFF;
border-left: 24px solid transparent;
right: -0.2rem;
top: -0.2rem;
border-top: 2.4rem solid var(--corner-background-color);
border-left: 2.4rem solid transparent;
}
</style>
......
src/module/databoard/components/icon/corner_mark_small.vue → src/module/databoard/components/icon/corner-mark-small.vue
View file @ 093c4a1e
......@@ -25,51 +25,51 @@ export default {
.conner_mark_left1 {
position: absolute;
left: -2px;
top: -2px;
border-top: 36px solid #0D53B7;
border-right: 18px solid transparent;
left: -0.2rem;
top: -0.2rem;
border-top: 3.5rem solid var(--container-border-color);
border-right: 1.7rem solid transparent;
}
.conner_mark_left2 {
position: absolute;
left: -2px;
top: -2px;
border-top: 30px solid var(--global-background-color);
border-right: 15px solid transparent;
left: -0.2rem;
top: -0.2rem;
border-top: 3rem solid var(--global-background-color);
border-right: 1.5rem solid transparent;
}
.conner_mark_left3 {
position: absolute;
left: -2px;
top: -2px;
border-top: 20px solid #0E5FFF;
border-right: 10px solid transparent;
left: -0.2rem;
top: -0.2rem;
border-top: 2rem solid var(--corner-background-color);
border-right: 1rem solid transparent;
}
.conner_mark_right1 {
position: absolute;
right: -2px;
top: -2px;
border-top: 36px solid #0D53B7;
border-left: 18px solid transparent;
right: -0.2rem;
top: -0.2rem;
border-top: 3.5rem solid var(--container-border-color);
border-left: 1.7rem solid transparent;
}
.conner_mark_right2 {
position: absolute;
right: -2px;
top: -2px;
border-top: 30px solid var(--global-background-color);
border-left: 15px solid transparent;
right: -0.2rem;
top: -0.2rem;
border-top: 3rem solid var(--global-background-color);
border-left: 1.5rem solid transparent;
}
.conner_mark_right3 {
position: absolute;
right: -2px;
top: -2px;
border-top: 20px solid #0E5FFF;
border-left: 10px solid transparent;
right: -0.2rem;
top: -0.2rem;
border-top: 2rem solid var(--corner-background-color);
border-left: 1rem solid transparent;
}
</style>
......
src/module/databoard/components/test/counter-button.vue deleted 100644 → 0
View file @ 480e1b1b
<template>
<button class="click-button" @click.right.prevent="count++">鼠标右键点击{{ count }}次</button>
</template>
<script>
export default {
name: "CounterButton",
data() {
return {
count: 0
};
},
props: {},
methods: {}
};
</script>
<style scoped>
.click-button {
height: 4rem;
width: 12rem;
}
</style>
src/module/databoard/components/test/emit-test.vue deleted 100644 → 0
View file @ 480e1b1b
<template>
<ul>
<li class="optionItem" v-for="(option, i) in options" :key="i" @click="handleSelect(option)">{{ i }}-{{ option }}</li>
</ul>
</template>
<script>
export default {
props: {
options: {
type: String,
default: () => [],
required: true,
validate: value => {
return value.length >= 0
}
},
},
data() {
return {}
},
methods: {
handleSelect(option) {
this.$emit("selected", option)
}
}
};
</script>
<style scoped>
.optionItem{
background-color: #00b8d4;
}
</style>
src/module/databoard/components/test/setup-api.vue deleted 100644 → 0
View file @ 480e1b1b
<template>
<div style="background-color: whitesmoke">
<div>{{ setupName }}: {{ counter }}: {{ obj.title }}</div>
<div>{{ twiceTheCounter }}</div>
<button @click="action" style="height: 4rem;width: 8rem">按钮</button>
</div>
</template>
<script>
import {computed, onMounted, reactive, ref, watch} from "vue";
export default {
props: {
setupName: String
},
setup() {
// 获取响应式变量：基本类型，获取的变量需要.value获取值
const counter = ref(0);
// 获取响应式变量：引用类型
const obj = reactive({title: "这是个标题"});
const twiceTheCounter = computed(() => counter.value * 2);
watch(counter, (newValue, oldValue) => {
console.log(newValue, oldValue);
});
onMounted(() => {
console.log("mounted");
});
const action = () => {
counter.value = counter.value + 3;
obj.title = "我改名字了";
};
return {
counter,
obj,
twiceTheCounter,
action
};
}
};
</script>
<style scoped>
</style>
src/module/databoard/index.vue
View file @ 093c4a1e
This diff is collapsed.
src/module/databoard/index_back1.vue 0 → 100644
View file @ 093c4a1e
This diff is collapsed.
src/module/index/index.html
View file @ 093c4a1e
......@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>开尔维</title>
<title>联达供应链数据大屏</title>
<!-- Google MD图标 -->
<link href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet">
......@@ -21,15 +21,14 @@
}
body{
min-height: 1080.00px;
max-height: 1080.00px;
min-width: 1920px;
max-width: 1920px;
min-height: 900px;
min-width: 1440px;
}
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-y: hidden;
}
......
src/module/index/index.vue
View file @ 093c4a1e
<template>
<router-view></router-view>
<div class="page">
<div class="head">
<div class="text_left">
<span>2023-08-01</span>
<span>17:18:29</span>
<span>星期三</span>
</div>
<div class="text_right">
<span>刷新时间：10s</span>
</div>
</div>
<router-view style="height: 90%"></router-view>
</div>
</template>
<script>
window.$ = window.jQuery = require('materialize-css/node_modules/jquery/dist/jquery.js')
require('materialize-css')
export default {
name: 'app',
// 页面加载之前
created() {
},
// 页面加载后
mounted() {
console.log(this.$router)
this.$router.push("/index");
}
}
window.$ = window.jQuery = require('materialize-css/node_modules/jquery/dist/jquery.js')
require('materialize-css')
export default {
name: 'app',
// 页面加载之前
created() {
},
// 页面加载后
mounted() {
this.$router.push("/index");
}
}
</script>
<style>
@import "../../../node_modules/materialize-css/bin/materialize.css";
#app {
}
/*侧边栏头部背景*/
.side-nav .userView .background img {
width: 100%;
}
/*导航名字*/
.nav-name {
margin: 0 15px;
padding: 0;
font-size: 16px;
}
@import "../../../node_modules/materialize-css/bin/materialize.css";
/*右侧导航栏图标*/
.nav-wrapper .right li a i {
padding: 0;
margin: 0;
font-size: 16px;
}
/*右侧导航栏文字*/
.nav-wrapper .right li a span {
margin-left: 8px;
}
#app {
}
/*为大屏幕的侧边栏提供空间*/
@media only screen and (max-width: 992px) {
header, main, footer {
padding-left: 300px;
}
/*主干区域*/
main {
position: fixed;
width: 100%;
height: calc(100% - 64px);
z-index: -1;
}
@media only screen and (max-width: 992px) {
header, main, footer {
padding-left: 0;
}
padding-left: 0;
}
}
</style>
src/module/index/router/index_router.js
View file @ 093c4a1e
......@@ -2,6 +2,8 @@ import Vue from 'vue'
import Router from 'vue-router'
import Main from '../index.vue'
import index from '../../databoard/index.vue'
import MainBarChart from "../../databoard/components/chart/main-bar-chart.vue";
import WinnersList from "../../databoard/components/card/winners-list.vue";
Vue.use(Router)
......@@ -17,5 +19,15 @@ export default new Router({
name: 'index',
component: index
},
{
path: '/chart',
name: 'chart',
component: MainBarChart
},
{
path: '/winner_list',
name: 'winnerList',
component: WinnersList
}
]
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment