|
|
|
|
@ -5,7 +5,7 @@
|
|
|
|
|
<div class="content-top">
|
|
|
|
|
<div class="content-top-left">
|
|
|
|
|
<div class="content-top-left-data1">
|
|
|
|
|
{{ dataNow(1) }}
|
|
|
|
|
{{ date }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content-top-left-data2">
|
|
|
|
|
<div>
|
|
|
|
|
@ -16,33 +16,45 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content-top-right">
|
|
|
|
|
<div class="content-top-fanhui">返回门户</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-dropdown trigger="click">
|
|
|
|
|
<span class="el-dropdown-link">
|
|
|
|
|
您好xxx<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
|
|
</span>
|
|
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
|
|
<el-dropdown-item>用户中心</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item>退出登录</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
<div class="content-top-fanhui">
|
|
|
|
|
<div class="content-top-fanhui-main">
|
|
|
|
|
<div class='black-bg'></div>
|
|
|
|
|
<span>返回门户</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="userInfo">
|
|
|
|
|
<img src="@/assets/images/profile.jpg" alt="" />
|
|
|
|
|
<el-dropdown trigger="click">
|
|
|
|
|
<span class="el-dropdown-link">
|
|
|
|
|
您好xxx<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
|
|
</span>
|
|
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
|
|
<el-dropdown-item>退出登录</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="content-bottom">
|
|
|
|
|
<div class="input">
|
|
|
|
|
<el-input v-model="input" placeholder="请输入内容"></el-input>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="sousuo" @click="gotoBgpage">
|
|
|
|
|
搜索
|
|
|
|
|
<div class="title">
|
|
|
|
|
<img src="@/assets/images/daping/guangxian.png" alt="" />
|
|
|
|
|
<div>产品画像搜索</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content-bottom-box">
|
|
|
|
|
<div class="content-bottom">
|
|
|
|
|
<div class="input">
|
|
|
|
|
<el-input v-model="input" placeholder="请输入内容"></el-input>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sousuo" @click="gotoBgpage">
|
|
|
|
|
<img src="@/assets/images/daping/searchicon.png" alt="" />
|
|
|
|
|
搜索
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-dialog" v-loading="loading" v-if="dialog">
|
|
|
|
|
<div class="dialog-item" v-for='(item,index) in searchList' :key="index" @click="getValue(item)">
|
|
|
|
|
{{ item.name }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -54,14 +66,51 @@ export default {
|
|
|
|
|
components: {},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
input: ""
|
|
|
|
|
input: "",
|
|
|
|
|
date:'',
|
|
|
|
|
dialog: false,
|
|
|
|
|
loading: true,
|
|
|
|
|
searchList:[],
|
|
|
|
|
getData:{},
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() { },
|
|
|
|
|
mounted() { this.dataNow(2) },
|
|
|
|
|
watch:{
|
|
|
|
|
async input(newValue,oldValue) {
|
|
|
|
|
// let data = await this.$api.productPortrayal.findByName({current:1,size:10});
|
|
|
|
|
if(newValue){
|
|
|
|
|
this.loading = true;
|
|
|
|
|
this.dialog = true;
|
|
|
|
|
let data = await this.$api.productPortrayal.findByName({name:newValue});
|
|
|
|
|
if(data.code == 200) {
|
|
|
|
|
this.loading = false;
|
|
|
|
|
this.searchList = data.data;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
this.dialog = false;
|
|
|
|
|
this.searchList = [];
|
|
|
|
|
this.loading = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() { this.dataNow(1) },
|
|
|
|
|
mounted() { this.getData(1) },
|
|
|
|
|
methods: {
|
|
|
|
|
gotoBgpage() {
|
|
|
|
|
this.$router.push("/bgpage")
|
|
|
|
|
if(this.input) {
|
|
|
|
|
console.log(this.searchList,'this.searchList')
|
|
|
|
|
if(this.searchList.length == 1) {
|
|
|
|
|
this.$router.push({path:"/bgpage",query: {code: this.getData.code,name: this.getData.name,type: this.getData.type}})
|
|
|
|
|
this.searchList = [];
|
|
|
|
|
} else if(this.searchList.length > 1) {
|
|
|
|
|
this.$router.push({path:"/bgpage",query: {code: this.searchList[0].code,name: this.searchList[0].name,type: this.searchList[0].type}})
|
|
|
|
|
this.searchList = [];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
getData(index){
|
|
|
|
|
setInterval(() => {
|
|
|
|
|
this.dataNow(index)
|
|
|
|
|
}, 1000);
|
|
|
|
|
},
|
|
|
|
|
dataNow(index) {
|
|
|
|
|
let now = new Date();
|
|
|
|
|
@ -76,7 +125,7 @@ export default {
|
|
|
|
|
let second = now.getSeconds();
|
|
|
|
|
if (second < 10) second = "0" + second
|
|
|
|
|
|
|
|
|
|
return `${hour}:${minute}:${second}`
|
|
|
|
|
this.date = `${hour}:${minute}:${second}`
|
|
|
|
|
} else if (index == 2) {
|
|
|
|
|
let year = now.getFullYear();
|
|
|
|
|
if (year < 10) year = "0" + year
|
|
|
|
|
@ -87,7 +136,7 @@ export default {
|
|
|
|
|
let day = now.getDate();
|
|
|
|
|
if (day < 10) day = "0" + day
|
|
|
|
|
|
|
|
|
|
return `${year}:${month}:${day}`
|
|
|
|
|
return `${year}/${month}/${day}`
|
|
|
|
|
} else if (index == 3) {
|
|
|
|
|
let dayOfWeek = now.getDay();
|
|
|
|
|
// 将星期几转换为对应的中文表示
|
|
|
|
|
@ -96,6 +145,13 @@ export default {
|
|
|
|
|
return chineseDayOfWeek
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
getValue(item){
|
|
|
|
|
this.input = item.name;
|
|
|
|
|
this.getData = item;
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.dialog = false;
|
|
|
|
|
}, 200);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {}
|
|
|
|
|
@ -111,6 +167,8 @@ export default {
|
|
|
|
|
background-color: #000000;
|
|
|
|
|
position: relative;
|
|
|
|
|
/* 将内容水平居中对齐 */
|
|
|
|
|
background: url('../assets/images/daping/searchbg.png') no-repeat center;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content-top {
|
|
|
|
|
@ -124,10 +182,20 @@ export default {
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
|
|
|
|
.content-top-left-data1 {
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
font-family: DIN;
|
|
|
|
|
margin: 0 20px 0 0;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
// font-family: Helvetica;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
opacity: 0.72;
|
|
|
|
|
}
|
|
|
|
|
.content-top-left-data2 {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
opacity: 0.72;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -137,38 +205,181 @@ export default {
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
|
|
|
|
.content-top-fanhui {
|
|
|
|
|
padding: 10px 10px;
|
|
|
|
|
background-color: blue;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
background: linear-gradient(0deg, rgba(103,200,255,0.2) 0%, rgba(111,176,231,0.1) 100%);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
.content-top-fanhui-main {
|
|
|
|
|
padding: 2px 15px;
|
|
|
|
|
border: 1px solid;
|
|
|
|
|
border-image: linear-gradient(0deg, #1865F2, #7BAAFF) 10 10;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.black-bg {
|
|
|
|
|
width: 36px;
|
|
|
|
|
height: 34px;
|
|
|
|
|
background: url('../assets/images/daping/back.png') no-repeat center;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
margin-top: 3px;
|
|
|
|
|
}
|
|
|
|
|
span {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-family: SourceHanSansSC;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #FEFFFF;
|
|
|
|
|
text-shadow: 0px 4px 9px rgba(0,0,0,0.29);
|
|
|
|
|
background: linear-gradient(0deg, #CAFFFF 0%, #CAFFFF 0%, #FFFFFF 0%, #74B4F4 38.96484375%, #3883FF 100%);
|
|
|
|
|
-webkit-background-clip: text;
|
|
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.userInfo {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
img {
|
|
|
|
|
width: 31px;
|
|
|
|
|
height: 31px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-dropdown-link {
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-family: SourceHanSansSC;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content-bottom {
|
|
|
|
|
.title {
|
|
|
|
|
margin-top: 250px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
// display: flex;
|
|
|
|
|
// justify-content: center;
|
|
|
|
|
div {
|
|
|
|
|
padding-left: 50px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 48px;
|
|
|
|
|
font-family: Tensentype;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
text-shadow: 0px 8px 16px rgba(24,118,172,0.6);
|
|
|
|
|
// background: linear-gradient(0deg, #C2E5FF 100%);
|
|
|
|
|
// -webkit-background-clip: text;
|
|
|
|
|
// -webkit-text-fill-color: transparent;
|
|
|
|
|
z-index: 20;
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
width: 316px;
|
|
|
|
|
height: 316px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 220px;
|
|
|
|
|
left: 830px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.content-bottom-box {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
width: 800px;
|
|
|
|
|
display: flex;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
.content-bottom {
|
|
|
|
|
position: relative;
|
|
|
|
|
// width: 800px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
|
|
|
|
.input {
|
|
|
|
|
width: 500px;
|
|
|
|
|
}
|
|
|
|
|
.input {
|
|
|
|
|
width: 739px;
|
|
|
|
|
::v-deep .el-input {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
input {
|
|
|
|
|
border: none;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
height: 150px;
|
|
|
|
|
background: url('../assets/images/daping/searchinputbg.png') no-repeat center;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
padding-left: 50px;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #9CB4E2;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sousuo {
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
padding: 3px 5px;
|
|
|
|
|
background-color: blue;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
.sousuo {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 710px;
|
|
|
|
|
// padding: 3px 5px;
|
|
|
|
|
width: 162px;
|
|
|
|
|
height: 55px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
background: url('../assets/images/daping/searchbuttonbg.png') no-repeat center;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
img {
|
|
|
|
|
width: 25px;
|
|
|
|
|
height: 25px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box-dialog {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 690px;
|
|
|
|
|
height: 300px;
|
|
|
|
|
top: 120px;
|
|
|
|
|
left: 10px;
|
|
|
|
|
padding: 2px;
|
|
|
|
|
background: linear-gradient(to right,rgba(24,101,242,0.1),rgba(24,101,242,0.1));
|
|
|
|
|
overflow: scroll;
|
|
|
|
|
|
|
|
|
|
.dialog-item {
|
|
|
|
|
// padding: 15px 27px;
|
|
|
|
|
padding: 5px 10px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
cursor:pointer;
|
|
|
|
|
// line-height: 50px;
|
|
|
|
|
// background-color: rgb(63,110,204)
|
|
|
|
|
// background-color: rgba(205,235,243,0.1)
|
|
|
|
|
}
|
|
|
|
|
.dialog-item:hover {
|
|
|
|
|
background-color: rgb(63,110,204)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//设置遮罩层颜色
|
|
|
|
|
::v-deep .el-loading-mask{
|
|
|
|
|
background-color: rgba(205,235,243,0.1);
|
|
|
|
|
}
|
|
|
|
|
//设置图标颜色
|
|
|
|
|
// ::v-deep .el-loading-spinner .path{
|
|
|
|
|
// stroke: #005432;
|
|
|
|
|
// }
|
|
|
|
|
//设置文字颜色
|
|
|
|
|
// ::v-deep .el-loading-spinner .el-loading-text{
|
|
|
|
|
// color: #005432;
|
|
|
|
|
// }
|
|
|
|
|
</style>
|
|
|
|
|
|
