153 lines
3.5 KiB
Vue
153 lines
3.5 KiB
Vue
<template>
|
|
<div id="wrapper">
|
|
<!-- :style="{'background-image':'url('+imgUrl.home1+')'}" -->
|
|
<div class="img-box">
|
|
<img :src="imgUrl.home1" alt />
|
|
</div>
|
|
<div class="box">
|
|
<div @click="$jump('homePage')" :class="styleNum == 0 ? 'style': ''">党组织建设</div>
|
|
<div
|
|
@click="$jump('informationQuery',{id:1,text:'666'})"
|
|
:class="styleNum == 1 ? 'style': ''"
|
|
>社会组织信用信息查询</div>
|
|
<div @click="$jump('project')" :class="styleNum == 2 ? 'style': ''">政府购买社会组织服务项目管理</div>
|
|
<div @click="$jump('personalZte')" :class="styleNum == 3 ? 'style': ''">个人中心</div>
|
|
<div>
|
|
<span v-if="enter" @click="$jump('login')">登录 | </span>
|
|
<span v-if="enter" @click="$jump('registered')">注册</span>
|
|
<el-tooltip class="item" effect="dark" :content="name" placement="top">
|
|
<span class="three" v-if="!enter">{{name}}</span>
|
|
</el-tooltip>
|
|
|
|
<span v-if="!enter" @click="quit()"> | 退出</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {},
|
|
props: ['index_num'],
|
|
data () {
|
|
return {
|
|
imgUrl: {
|
|
home: require('../../static/img/home.png'),
|
|
home1: require('../../static/img/home1.png')
|
|
},
|
|
styleNum: 0,
|
|
enter: true,
|
|
name: ''
|
|
}
|
|
},
|
|
computed: {},
|
|
watch: {},
|
|
methods: {
|
|
judge () {
|
|
if (sessionStorage.id) {
|
|
this.name = sessionStorage.name
|
|
this.enter = false
|
|
}
|
|
},
|
|
quit () {
|
|
this.$router.push({
|
|
name: 'homePage'
|
|
})
|
|
this.$message.success('退出成功!')
|
|
sessionStorage.clear()
|
|
localStorage.clear()
|
|
this.enter = true
|
|
}
|
|
},
|
|
created () {
|
|
let sub = this.styleNum
|
|
sub = this.$props.index_num
|
|
this.styleNum = sub
|
|
this.judge()
|
|
},
|
|
mounted () {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
#wrapper {
|
|
min-width: 1280px;
|
|
// width: 100%;
|
|
height: 389px;
|
|
box-sizing: border-box;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.img-box {
|
|
width: 100%;
|
|
height: 389px;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
img {
|
|
// width: 100%;
|
|
height: 100%;
|
|
cursor: default;
|
|
|
|
}
|
|
}
|
|
|
|
.box {
|
|
position: absolute;
|
|
bottom: 0%;
|
|
left: 0%;
|
|
// width: 1280px;
|
|
width: 100%;
|
|
height: 63px;
|
|
background-color: rgba($color: #fff, $alpha: 0.5);
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
|
|
& > div {
|
|
font-family: "MicrosoftYaHei";
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
font-stretch: normal;
|
|
letter-spacing: 0px;
|
|
color: #333333;
|
|
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
|
|
cursor: pointer;
|
|
|
|
&:last-child {
|
|
width: 120px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.three {
|
|
text-align: right;
|
|
display: inline-block;
|
|
width: 58px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
word-break: keep-all;
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
|
|
.style {
|
|
font-family: "MicrosoftYaHei";
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
font-stretch: normal;
|
|
letter-spacing: 0px;
|
|
color: #ffffff;
|
|
text-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35);
|
|
padding: 21px;
|
|
background-color: #e60012;
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|