Commit 480e1b1b authored by 张恒's avatar 张恒

调整容器组件UI

parent 0b39aa25
......@@ -6,8 +6,8 @@ module.exports = {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/assets/dist/',
assetsSubDirectory: 'databoard',
assetsPublicPath: '/assets/',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
......
:root {
--global-background-color: #020042; /* 全局背景色 */
--container-background-color: #020046; /* 容器背景色 */
}
.page {
background-color: rgba(0, 10, 50, 1.000000);
position: relative;
height: 1080.00px;
height: 1080px;
width: 100%;
min-width: 1920px;
overflow: hidden;
background: url(./img/SketchPng1d2d7c804f3d192d29ad3750c138064d493e3f502f79253a3bfa266fbdda7488.png) 100% no-repeat;
/*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/SketchPng5fda9a9add36a51f8fa99e5a1426c6a0630dbdfb68a8e0ea5fbbd1c1392d5e28.png) 0px 0px no-repeat;
background-position: center;
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 {
......@@ -169,7 +176,7 @@
.trade_middle {
margin-bottom: 50px;
width: 52%;
width: 50%;
margin-left: 1%;
}
......
......@@ -5,7 +5,7 @@
/*width: 1920.00px;*/
height: 1080.00px;
overflow: hidden;
background: url(SketchPng1d2d7c804f3d192d29ad3750c138064d493e3f502f79253a3bfa266fbdda7488.png) 100% no-repeat;
background: url(./img/SketchPng1d2d7c804f3d192d29ad3750c138064d493e3f502f79253a3bfa266fbdda7488.png) 100% no-repeat;
background-size: 100% 100%
}
......@@ -13,7 +13,7 @@
.text-wrapper_46 {
/*width: 1970.00px;*/
height: 92.00px;
background: url(SketchPng5fda9a9add36a51f8fa99e5a1426c6a0630dbdfb68a8e0ea5fbbd1c1392d5e28.png) 0px 0px no-repeat;
background: url(./img/SketchPng5fda9a9add36a51f8fa99e5a1426c6a0630dbdfb68a8e0ea5fbbd1c1392d5e28.png) 0px 0px no-repeat;
background-size: 1920px 131px
}
......
<template>
<div class="trapezoid">
<div class="trapezoid1"/>
<div class="trapezoid2"/>
<div class="trapezoid3">
<div class="left-half-trapezoid"/>
<div class="right-half-trapezoid"/>
<div class="title">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: "CardTitleLarge"
};
</script>
<style scoped>
.trapezoid {
width: 100%;
height: 36px;
margin-bottom: 10px;
}
.trapezoid1::before {
content: "";
position: absolute;
top: -4px;
left: 50%;
margin-left: -50px;
height: 6px;
width: 100px;
background-image: radial-gradient(#00F6F0, transparent 60%);
}
.trapezoid1 {
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;
}
.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;
}
.trapezoid3 {
position: absolute;
top: -2px;
left: 50%;
margin-left: -70px;
height: 30px;
width: 140px;
}
.title {
position: absolute;
width: 100%;
font-size: 12px;
font-family: 黑体,serif;
font-weight: 700;
text-align: center;
letter-spacing: 0.2rem;
white-space: nowrap;
line-height: 30px;
color: #19ECFF;
}
.left-half-trapezoid {
position: absolute;
width: 50%;
height: 100%;
overflow: hidden;
}
.left-half-trapezoid::after {
content: "";
position: absolute;
height: 100%;
width: 110%;
left: 5px;
background-image: linear-gradient(to bottom, #0933AD, transparent);
transform: skewX(20deg);
}
.right-half-trapezoid {
position: absolute;
right: 0;
width: 50%;
height: 100%;
overflow: hidden;
}
.right-half-trapezoid::after {
content: "";
position: absolute;
height: 100%;
width: 110%;
right: 5px;
background-image: linear-gradient(to bottom, #0933AD88, transparent);
transform: skewX(-20deg);
}
</style>
<template>
<div class="trapezoid">
<div class="trapezoid1"/>
<div class="trapezoid2"/>
<div class="trapezoid3">
<div class="left-half-trapezoid"/>
<div class="right-half-trapezoid"/>
<div class="title">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: "CardTitleSmall"
};
</script>
<style scoped>
.trapezoid {
width: 100%;
height: 36px;
margin-bottom: 10px;
}
.trapezoid1::before {
content: "";
position: absolute;
top: -4px;
left: 50%;
margin-left: -50px;
height: 6px;
width: 100px;
background-image: radial-gradient(#00F6F0, transparent 60%);
}
.trapezoid1 {
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;
}
.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;
}
.trapezoid3 {
position: absolute;
top: -2px;
left: 50%;
margin-left: -70px;
height: 30px;
width: 140px;
}
.title {
position: absolute;
width: 100%;
font-size: 12px;
font-family: 黑体,serif;
font-weight: 700;
text-align: center;
letter-spacing: 0.2rem;
white-space: nowrap;
line-height: 30px;
color: #19ECFF;
}
.left-half-trapezoid {
position: absolute;
width: 50%;
height: 100%;
overflow: hidden;
}
.left-half-trapezoid::after {
content: "";
position: absolute;
height: 100%;
width: 110%;
left: 5px;
background-image: linear-gradient(to bottom, #0933AD, transparent);
transform: skewX(20deg);
}
.right-half-trapezoid {
position: absolute;
right: 0;
width: 50%;
height: 100%;
overflow: hidden;
}
.right-half-trapezoid::after {
content: "";
position: absolute;
height: 100%;
width: 110%;
right: 5px;
background-image: linear-gradient(to bottom, #0933AD, transparent);
transform: skewX(-20deg);
}
</style>
<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>
</template>
<script>
export default {
name: "WinnersList",
props: {},
data() {
return {
rows: [
{
title: "上海欧冶股份有限公司",
column: [{key: "结算量(万吨)", value: 202012}, {key: "未收款(万元)", value: 202012}]
},
{
title: "上海欧冶股份有限公司",
column: [{key: "结算量(万吨)", value: 202012}, {key: "未收款(万元)", value: 202012}]
},
{
title: "上海欧冶股份有限公司",
column: [{key: "结算量(万吨)", value: 202012}, {key: "未收款(万元)", value: 202012}]
},
{
title: "上海欧冶股份有限公司",
column: [{key: "结算量(万吨)", value: 202012}, {key: "未收款(万元)", value: 202012}]
},
{
title: "上海欧冶股份有限公司",
column: [{key: "结算量(万吨)", value: 202012}, {key: "未收款(万元)", value: 202012}]
}
]
};
},
methods: {}
};
</script>
<style scoped>
.main_table {
width: 95%;
height: 84%;
}
.main_table table {
width: 100%;
height: 100%;
}
.main_table tr {
height: 20%;
}
.main_table td {
padding: 0;
color: #fff;
font-size: 10px;
text-align: center;
}
.main_table tbody tr:nth-child(odd) {
background-color: #04136B;
}
.main_table tbody tr:nth-child(even) {
background-color: #051D7D;
}
.t_btn8, .t_btn2, .t_btn3 {
position: relative;
z-index: 100;
cursor: pointer;
}
.col_box {
display: flex;
justify-content: space-around;
}
.winner_span {
font-weight: bold;
}
.number_span {
color: #bf360c;
font-weight: bold;
}
.key_span {
color: darkgrey;
font-weight: bold;
}
.value_span {
color: #00c853;
font-weight: bold;
}
</style>
<template>
<div class="content container-with-bord" style="cursor: pointer; position: relative;">
<!--左上边框-->
<div class="t_line_box">
<i class="t_l_line"></i>
<i class="l_t_line"></i>
</div>
<!--右上边框-->
<div class="t_line_box">
<i class="t_r_line"></i>
<i class="r_t_line"></i>
</div>
<!--左下边框-->
<div class="t_line_box">
<i class="l_b_line"></i>
<i class="b_l_line"></i>
</div>
<!--右下边框-->
<div class="t_line_box">
<i class="r_b_line"></i>
<i class="b_r_line"></i>
</div>
<!--角标组件-->
<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",
name: "ContainerWithBord",
components: {CornerMarkSmall, CornerMarkLarge, CardTitleSmall},
data() {
return {
};
return {};
},
methods: {}
};
</script>
<style scoped>
div{
div {
color: white;
}
.container-with-bord{
box-sizing: border-box;
border: 1px solid #2C58A6;
.container-with-bord {
background-color: var(--container-background-color);
position: relative;
box-shadow: 0 0 10px #2C58A6;
box-sizing: border-box;
border-radius: 15px;
box-shadow: 0 0 40px 10px #051E82 inset;
border: 2px solid #0D53B7;
}
</style>
<style scoped lang="css" src="../../assets/index.css"/>
<template>
<div class="conner_mark">
<div class="conner_mark_left1"/>
<div class="conner_mark_left2"/>
<div class="conner_mark_left3"/>
<div class="conner_mark_right1"/>
<div class="conner_mark_right2"/>
<div class="conner_mark_right3"/>
</div>
</template>
<script>
export default {
name: "CornerMarkLarge"
};
</script>
<style scoped>
.conner_mark {
position: absolute;
height: 100%;
width: 100%;
}
.conner_mark_left1 {
position: absolute;
left: -2px;
top: -2px;
border-top: 32px solid #0D53B7;
border-right: 32px solid transparent;
}
.conner_mark_left2 {
position: absolute;
left: -2px;
top: -2px;
border-top: 28px solid var(--global-background-color);
border-right: 28px solid transparent;
}
.conner_mark_left3 {
position: absolute;
left: -2px;
top: -2px;
border-top: 24px solid #0E5FFF;
border-right: 24px solid transparent;
}
.conner_mark_right1 {
position: absolute;
right: -2px;
top: -2px;
border-top: 32px solid #0D53B7;
border-left: 32px solid transparent;
}
.conner_mark_right2 {
position: absolute;
right: -2px;
top: -2px;
border-top: 28px solid var(--global-background-color);
border-left: 28px solid transparent;
}
.conner_mark_right3 {
position: absolute;
right: -2px;
top: -2px;
border-top: 24px solid #0E5FFF;
border-left: 24px solid transparent;
}
</style>
<template>
<div class="conner_mark">
<div class="conner_mark_left1"/>
<div class="conner_mark_left2"/>
<div class="conner_mark_left3"/>
<div class="conner_mark_right1"/>
<div class="conner_mark_right2"/>
<div class="conner_mark_right3"/>
</div>
</template>
<script>
export default {
name: "CornerMarkSmall"
};
</script>
<style scoped>
.conner_mark {
position: absolute;
height: 100%;
width: 100%;
}
.conner_mark_left1 {
position: absolute;
left: -2px;
top: -2px;
border-top: 36px solid #0D53B7;
border-right: 18px solid transparent;
}
.conner_mark_left2 {
position: absolute;
left: -2px;
top: -2px;
border-top: 30px solid var(--global-background-color);
border-right: 15px solid transparent;
}
.conner_mark_left3 {
position: absolute;
left: -2px;
top: -2px;
border-top: 20px solid #0E5FFF;
border-right: 10px solid transparent;
}
.conner_mark_right1 {
position: absolute;
right: -2px;
top: -2px;
border-top: 36px solid #0D53B7;
border-left: 18px solid transparent;
}
.conner_mark_right2 {
position: absolute;
right: -2px;
top: -2px;
border-top: 30px solid var(--global-background-color);
border-left: 15px solid transparent;
}
.conner_mark_right3 {
position: absolute;
right: -2px;
top: -2px;
border-top: 20px solid #0E5FFF;
border-left: 10px solid transparent;
}
</style>
<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>
<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>
<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>
This diff is collapsed.
......@@ -3,6 +3,7 @@
import Vue from 'vue'
import App from './index.vue'
import router from './router/index_router'
import '../databoard/assets/index.css'
Vue.config.productionTip = false
......
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