Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
5e47f98e by zrj
Options

大屏12.24修改

1 parent c07e138f
Expand all
Inline Side-by-side
Showing 24 changed files with 186 additions and 40 deletions
src/api/server.js.js
......@@ -157,3 +157,29 @@ export function getYS009(url, objData) {
}
})
}
/**
* 中间 中间模块-收入对比
* @returns {*}
*/
export function getYS0010(url, objData) {
return request({
method: 'post',
data: {
'INTERFACEID': 'YS010',
'USERCONTEXT': url,
'FIELD': objData
}
})
}
export function getYS0011(url, objData) {
return request({
method: 'post',
data: {
'INTERFACEID': 'YS011',
'USERCONTEXT': url,
'FIELD': objData
}
})
}
......
src/layoutPc/components/AppHeader.vue
......@@ -103,15 +103,13 @@ h1 {
}
.text-top {
background: url('@/assets/image/top@3x.png') no-repeat top center;
background-size: 100%;
height: calc(63 * 100vw / 1920);
margin: 0;
font-size: calc(17 * 100vw / 1920);
font-weight: 400;
color: #12BFFF;
line-height: calc(40 * 100vw / 1920);
padding-left: calc(30 * 100vw / 1920)
}
.date {
......@@ -119,5 +117,21 @@ h1 {
position: absolute;
right: calc(30 * 100vw / 1920);
}
.dark {
.text-top {
background: url('@/assets/image/top@3x.png') no-repeat top center;
background-size: 100%;
color: #12BFFF;
}
}
.light {
.text-top {
background: url('@/assets/image/top-light@2x.png') no-repeat top center;
background-size: 100%;
color: #0060AA;
}
}
</style>
......
src/layoutPc/index.vue
<template>
<div class="bg">
<video id="video" autoplay loop muted src="/bg.mp4"></video>
<app-header/>
<app-main/>
<div v-loading="isLoading" class="bg" :class="{dark: styleTheme=='dark',light: styleTheme=='light'}">
<el-button v-if="styleTheme=='light'" class="theme-button dark-btn" @click="handleChangeTheme('dark')"></el-button>
<el-button v-else-if="styleTheme=='dark'" class="theme-button light-btn" @click="handleChangeTheme('light')"></el-button>
<!-- <video id="video" autoplay loop muted src="/bg.mp4"></video>-->
<app-header />
<app-main :myTheme="styleTheme" />
</div>
</template>
<script setup>
import {AppMain, AppHeader, AppBottom} from './components'
const styleTheme = ref('dark')
const isLoading = ref(false)
function handleChangeTheme(type) {
styleTheme.value = type
isLoading.value = true
setTimeout(() => {
isLoading.value = false
}, 3000)
}
</script>
<style lang="scss">
......@@ -25,7 +39,34 @@ import {AppMain, AppHeader, AppBottom} from './components'
min-width: 1000px;
overflow: hidden;
//background: rgba(0,0,0,0.75)
background: url("@/assets/image/bg@2x.png") no-repeat top center;
background-size: 100% 100%;
}
.dark {
background: url("@/assets/image/bg@2x.png") no-repeat top center;
}
.light {
background: url("@/assets/image/bg_light.png") no-repeat top center;
}
.theme-button {
position: absolute;
z-index: 2;
width: 30px;
height: 30px;
border: none;
top: 4vh;
right: 20px;
}
.dark-btn {
background: url("@/assets/image/dark@2x.png") no-repeat top center;
background-size: contain;
}
.light-btn {
background: url("@/assets/image/light@2x.png") no-repeat top center;
background-size: contain;
}
</style>
......
src/viewsPc/home.vue
......@@ -13,25 +13,25 @@
v-for="(val,i) in baseList" :key="i" :label="val" :value="val"/>
</el-select>
</div>
<div class="datePick_bg" style="position: absolute;top: 4vh;right: 18px;height: 28px">
<div class="datePick_bg" style="position: absolute;top: 4vh;right: 58px;height: 28px">
<el-date-picker
v-model="nowDate"
type="month"
placeholder="历史回溯"
:size="size"
style="width: 100%"
style="width: 100%;height: 100%"
value-format="YYYY-MM"
></el-date-picker>
</div>
<el-row class="w100">
<el-col v-if="!isLoad&&obj.IFBASE" :span="8">
<left-page :obj="obj" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/>
<left-page :obj="obj" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase" :myTheme="props.myTheme" />
</el-col>
<el-col v-if="!isLoad&&obj.IFBASE" :span="8">
<center-page :obj="obj" :isLeader="isLeader" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/>
<center-page :myTheme="props.myTheme" :obj="obj" :isLeader="isLeader" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/>
</el-col>
<el-col v-if="!isLoad&&obj.IFBASE" :span="8">
<right-page :obj="obj" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/>
<right-page :obj="obj" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase" :myTheme="props.myTheme"/>
</el-col>
</el-row>
</div>
......@@ -60,7 +60,7 @@ const nowDate = ref(`${year}-${formatMonth(month)}`)
let selectBase = ref()
let baseList = ref()
let isLeader = ref(false)
// url.value = 'http://192.168.1.152:8899/login/sid=a659e865-486c-434f-8707-add6bfa2276d#/'
// url.value = 'http://192.168.1.152:8899/login/sid=9cdeffd3-0a59-414c-944c-8e71a11b05cc#/'
url.value = window.location.href
result.value = url.value?.split('=')[1]?.split('#')[0];
......@@ -69,6 +69,12 @@ function validateEmail(email) {
return re.test(String(email).toLowerCase());
}
const props = defineProps({
myTheme: {
type: String,
}
})
onMounted(() => {
if (result.value) {
handelGetYS000()
......@@ -109,13 +115,11 @@ function setType(){
.basePick_bg {
position: absolute;
top: 4vh;
right: 180px;
right: 220px;
height: 28px;
width: 155px;
background: #0B2239;
//box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27);
border-radius: 5px;
border: 1px solid #12BFFF;
.select {
background-color: transparent;
......@@ -141,7 +145,6 @@ function setType(){
:deep(.el-select__placeholder) {
font-family: PingFang SC, serif;
font-weight: 500;
color: #fff;
//text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
//background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
background-color: rgb(33, 123, 188, .1); /* 背景色 */
......@@ -154,44 +157,98 @@ function setType(){
border-color: #1c81a6; /* 边框色 */
color: #fff; /* 文字颜色 */
}
:deep(.el-icon ) {
color: #fff;
}
}
}
.datePick_bg {
background: url("@/assets/image/datePicker.png") no-repeat center;
background-size: 100% 100%;
width: 155px;
}
::v-deep .el-date-editor .el-input__inner {
border-radius: 5px;
::v-deep .el-date-editor .el-input__inner {
background-color: transparent !important;
border-color: #80ffff;
box-shadow: none;
height: 30px;
color: #fff;
padding: 0 0 2px 10px;
}
::v-deep .el-input__wrapper {
}
::v-deep .el-input__wrapper {
background: transparent;
border: none;
box-shadow: none;
}
/* 隐藏默认图标 */
::v-deep .el-date-editor .el-input__prefix {
background: url("@/assets/image/rili.png") no-repeat center;
background-size: 100% 100%;
}
/* 隐藏默认图标 */
::v-deep .el-date-editor .el-input__prefix {
width: 20px;
height: 20px;
position: absolute;
right: 10px;
}
}
/* 强制右侧显示图标 */
::v-deep .el-date-editor .el-input__suffix .clear-icon{
/* 强制右侧显示图标 */
::v-deep .el-date-editor .el-input__suffix .clear-icon{
display: inline-block !important;
padding: 0 40px 0 0;
}
}
.dark {
.basePick_bg {
background: #0B2239;
border: 1px solid #12BFFF;
/* placeholder */
:deep(.el-select__placeholder) {
color: #fff;
}
:deep(.el-icon ) {
color: #fff;
}
}
.datePick_bg {
background: url("@/assets/image/datePicker.png") no-repeat center;
background-size: 100% 100%;
::v-deep .el-date-editor .el-input__inner {
color: #fff;
}
/* 隐藏默认图标 */
::v-deep .el-date-editor .el-input__prefix {
background: url("@/assets/image/rili.png") no-repeat center;
background-size: 100% 100%;
}
}
}
.light {
.basePick_bg {
background: #FFFFFF;
border: 1px solid #97D3FF;
/* placeholder */
:deep(.el-select__placeholder) {
color: #005D8D;
}
:deep(.el-icon ) {
color: #0060AA;
}
}
.datePick_bg {
background: #FFFFFF;
border: 1px solid #97D3FF;
:deep(.el-date-editor .el-input__inner) {
color: #0060AA;
}
::v-deep .el-date-editor .el-input__prefix {
background: url("@/assets/image/rili-light.png") no-repeat center;
background-size: 100% 100%;
}
}
}
</style>
......
src/viewsPc/vip/components/information.vue
......@@ -25,7 +25,6 @@ const showGroup = ref(false)
function open(row,date) {
debugger
showGroup.value = true
list.value = row
myDate.value = date
......
src/viewsPc/vip/scrollingData.vue
......@@ -107,7 +107,7 @@ onUnmounted(() => {
});
</script>
<style scoped>
<style lang="scss" scoped>
.scrolling-container {
width: 100%;
height: 100%;
......@@ -124,7 +124,6 @@ onUnmounted(() => {
font-family: SimHei, serif;
font-weight: 400;
font-size: calc(17 * 100vw / 1920);
color: #FFFFFF;
height: calc(40 * 100vh / 1920);
margin: calc(8 * 100vw / 1920) 0;
white-space: nowrap; /* 强制文本不换行 */
......@@ -143,5 +142,15 @@ onUnmounted(() => {
}
}
.dark {
.scrolling-item {
color: #FFFFFF;
}
}
.light {
.scrolling-item {
color: #4C5359;
}
}
</style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!