From 6a5962fe9544005dba620b00fb36c25fe2da4e76 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期二, 16 十一月 2021 15:24:46 +0800
Subject: [PATCH] 后端没修改的情况下添加默认背景图
---
src/pages/vindicate/index/App.vue | 87 ++++++++++++++++++++++++++++++++++++-------
1 files changed, 73 insertions(+), 14 deletions(-)
diff --git a/src/pages/vindicate/index/App.vue b/src/pages/vindicate/index/App.vue
index 90e6935..aedbc6a 100644
--- a/src/pages/vindicate/index/App.vue
+++ b/src/pages/vindicate/index/App.vue
@@ -1,5 +1,6 @@
<template>
- <div class="container" v-if="!showWelcome">
+ <div class="container vindicate" v-if="!showWelcome">
+
<div class="container-left">
<div
class="left-card"
@@ -20,7 +21,7 @@
<sysInfo v-if="activePage == 3" style="width: 100%" ref="view_3"></sysInfo>
</div>
- <div class="welcome-page" v-else ref="curPage">
+ <div class="welcome-page" v-else ref="curPage" @click="showRecomand = false" @mouseup="mouseDownIndex = ''">
<div
class="search-box"
:class="showRecomand ? 'border-change' : ''"
@@ -60,10 +61,12 @@
@click="openWelcome(i)"
v-for="(item, i) in menuArr"
:key="i"
+ @mousedown="mouseDownIndex = i"
+ :class="mouseDownIndex === i? 'nav-child-active':''"
>
<div class="child-info">
<!-- <span class="icon iconfont welcome-icon">{{ item.icon }}</span> -->
- <img :src="item.img_black" alt="" />
+ <img :src="item.img_welcome" alt="" />
<span class="welcome-title">{{ item.name }}</span>
</div>
</div>
@@ -92,10 +95,10 @@
data() {
return {
menuArr: [
- { name: "鏇存柊璁剧疆" ,img_black:"/images/vindicate/鏇存柊璁剧疆-榛�.png", img_white:"/images/vindicate/鏇存柊璁剧疆-鐧�.png",},
- { name: "绯荤粺娓呯悊" ,img_black:"/images/vindicate/绯荤粺娓呯悊-榛�.png", img_white:"/images/vindicate/绯荤粺娓呯悊-鐧�.png",},
- { name: "閲嶅惎璁剧疆" ,img_black:"/images/vindicate/閲嶅惎璁剧疆-榛�.png", img_white:"/images/vindicate/閲嶅惎璁剧疆-鐧�.png",},
- { name: "绯荤粺淇℃伅" ,img_black:"/images/vindicate/绯荤粺淇℃伅-榛�.png", img_white:"/images/vindicate/绯荤粺淇℃伅-鐧�.png",},
+ { name: "鏇存柊璁剧疆" ,img_black:"/images/vindicate/鏇存柊璁剧疆-榛�.png", img_white:"/images/vindicate/鏇存柊璁剧疆-鐧�.png",img_welcome:"/images/vindicate/鏇存柊璁剧疆.png"},
+ { name: "绯荤粺娓呯悊" ,img_black:"/images/vindicate/绯荤粺娓呯悊-榛�.png", img_white:"/images/vindicate/绯荤粺娓呯悊-鐧�.png",img_welcome:"/images/vindicate/绯荤粺娓呯悊.png"},
+ { name: "閲嶅惎璁剧疆" ,img_black:"/images/vindicate/閲嶅惎璁剧疆-榛�.png", img_white:"/images/vindicate/閲嶅惎璁剧疆-鐧�.png",img_welcome:"/images/vindicate/閲嶅惎璁剧疆.png"},
+ { name: "绯荤粺淇℃伅" ,img_black:"/images/vindicate/绯荤粺淇℃伅-榛�.png", img_white:"/images/vindicate/绯荤粺淇℃伅-鐧�.png",img_welcome:"/images/vindicate/绯荤粺淇℃伅.png"},
],
searchArr: [
{ name: "绯荤粺璁剧疆", addr: [0] },
@@ -110,6 +113,8 @@
full: 0,
showWelcome:true,
searchText:'',
+ showRecomand:false,
+ mouseDownIndex:''
};
},
created() {
@@ -127,6 +132,14 @@
// });
}
this.getLeftPer()
+ window.addEventListener("message",(e)=>{
+ if(e.data.msg === 'changeColor') {
+ document.documentElement.style.setProperty('--colorCard',`${e.data.color}`)
+ }
+ if (e.data.msg === '杩斿洖绯荤粺缁存姢') {
+ this.showWelcome = true
+ }
+ })
},
methods: {
openMenu(item, i) {
@@ -191,7 +204,7 @@
position: fixed;
left: calc(50% - 166px);
top: 50px;
- background: rgba(255, 255, 255, 0.8);
+ opacity: 0.8;
border: 2px solid #4e94ff;
box-sizing: border-box;
@@ -224,6 +237,29 @@
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
width: 100%;
font-weight: bold;
+
+ &::-webkit-input-placeholder { /* WebKit browsers */
+ color: #828282;
+ font-weight: normal;
+ font-size: 14px;
+ }
+ &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+ color: #828282;
+ font-weight: normal;
+ font-size: 14px;
+ }
+ &::-moz-placeholder { /* Mozilla Firefox 19+ */
+ color: #828282;
+ font-weight: normal;
+ font-size: 14px;
+ }
+ &:-ms-input-placeholder { /* Internet Explorer 10+ */
+ color: #828282;
+ font-weight: normal;
+ font-size: 14px;
+
+ }
+
}
.el-input__suffix {
display: flex;
@@ -246,6 +282,7 @@
.search-res {
max-height: 240px;
overflow: auto;
+ background-color: rgba(255, 255, 255, 0.5);
.res-bar {
height: 40px;
line-height: 40px;
@@ -276,12 +313,14 @@
}
}
.nav-items {
+ max-width: 960px;
+ margin: 0 auto;
.nav-child {
box-sizing: border-box;
background-color: rgba(251, 251, 255, 0.1);
backdrop-filter: blur(4px);
float: left;
- width: 46%;
+ width: 442px;
height: 190px;
margin: 0 15px;
margin-bottom: 30px;
@@ -290,6 +329,15 @@
justify-content: center;
align-items: center;
cursor: pointer;
+ border: 2px solid #F2F2F7;
+
+ &:hover {
+ background: #F2F2F7;
+ }
+
+ &-active {
+ border: 2px solid #4E94FF;
+ }
// box-shadow: 2px 2px 4px rgb(226, 226, 226);
.child-info {
@@ -303,7 +351,7 @@
img {
width: 64px;
margin: 0 auto;
- margin-top: 65px;
+ margin-top: 61px;
height: 50px;
}
.welcome-title {
@@ -314,11 +362,11 @@
}
}
}
- .nav-child:hover {
+ // .nav-child:hover {
// box-shadow: 4px 4px 12px rgb(218, 218, 218);
// transform: translate3d(0, -1px, 0);
// transition: all 0.3s;
- }
+ // }
}
}
@@ -330,16 +378,23 @@
flex: 1;
flex-basis: auto;
box-sizing: border-box;
+ position: relative;
+
+ .back {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
.container-left {
height: 100%;
width: 244px;
overflow: auto;
box-sizing: border-box;
flex-shrink: 0;
- padding: 17px 10px 0 10px;
+ padding: 13px 10px 0 10px;
box-sizing: border-box;
background: #fff;
- border-top:2px solid #E1E0E6 ;
.left-card {
position: relative;
width: 224px;
@@ -392,6 +447,10 @@
}
}
+
+.vindicate {
+ border-top:2px solid #E1E0E6 ;
+}
</style>
--
Gitblit v1.8.0