83 lines
2.0 KiB
Vue
83 lines
2.0 KiB
Vue
<template>
|
|
<div id="wrapper" :style="{'background-image':'url('+imgUrl.home+')'}">
|
|
<div class="box">
|
|
<div @click="$jump('homePage')" :class="styleNum == 0 ? 'style': ''">党组织建设</div>
|
|
<div @click="$jump('homePage')" :class="styleNum == 1 ? 'style': ''">社会组织信用信息查询</div>
|
|
<div @click="$jump('project')" :class="styleNum == 2 ? 'style': ''">政府购买社会组织服务项目管理</div>
|
|
<div @click="$jump('homePage')" :class="styleNum == 3 ? 'style': ''">个人中心</div>
|
|
<div>
|
|
<span @click="$jump('login')">登录</span> |
|
|
<span @click="$jump('registered')">注册</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {},
|
|
props: ['index_num'],
|
|
data () {
|
|
return {
|
|
imgUrl: { home: require('../../static/img/home.png') },
|
|
styleNum: 0
|
|
}
|
|
},
|
|
computed: {},
|
|
watch: {},
|
|
methods: {},
|
|
created () {
|
|
let sub = this.styleNum
|
|
sub = this.$props.index_num
|
|
this.styleNum = sub
|
|
},
|
|
mounted () {}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
#wrapper {
|
|
width: 1280px;
|
|
height: 389px;
|
|
box-sizing: border-box;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.box {
|
|
position: absolute;
|
|
bottom: 0%;
|
|
left: 0%;
|
|
width: 1280px;
|
|
height: 64px;
|
|
background-color: rgba($color: #fff, $alpha: 0.5);
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
|
|
& > div {
|
|
font-family: "MicrosoftYaHei";
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
font-stretch: normal;
|
|
letter-spacing: 0px;
|
|
color: #333333;
|
|
text-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.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>
|