151 lines
3.4 KiB
Vue
151 lines
3.4 KiB
Vue
<template>
|
|
<div class="big-nav-temp" :style="htmlType === 't2' ? 'margin-top: 10px;' : ''">
|
|
<div :class="htmlTop">{{ title }}</div>
|
|
<div :class="htmlCenter">
|
|
<slot name="mk-center"></slot>
|
|
</div>
|
|
<div :class="htmlBottom"></div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "todayRatio",
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
defautl: "",
|
|
},
|
|
htmlType: {
|
|
type: String,
|
|
default: "t1",
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
htmlTop: "",
|
|
htmlCenter: "",
|
|
htmlBottom: "",
|
|
};
|
|
},
|
|
created() {
|
|
this.returnType();
|
|
},
|
|
methods: {
|
|
returnType() {
|
|
switch (this.htmlType) {
|
|
case "t1":
|
|
this.htmlTop = "mk-top mk-top-t1";
|
|
this.htmlCenter = "mk-center-t1";
|
|
this.htmlBottom = "mk-bottom-t1";
|
|
break;
|
|
|
|
case "t2":
|
|
this.htmlTop = "mk-top mk-top-t2";
|
|
this.htmlCenter = "mk-center-t2";
|
|
this.htmlBottom = "mk-bottom-t2";
|
|
break;
|
|
|
|
case "t3":
|
|
this.htmlTop = "mk-top mk-top-t3";
|
|
this.htmlCenter = "mk-center-t3";
|
|
this.htmlBottom = "mk-bottom-t3";
|
|
break;
|
|
}
|
|
},
|
|
},
|
|
watch: {},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.big-nav-temp {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 20px;
|
|
.mk-top {
|
|
height: 35px;
|
|
width: 100%;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
font-size: 17px;
|
|
font-family: "Source Han Sans CN";
|
|
font-weight: 600;
|
|
color: #02d9fd;
|
|
padding-left: 0;
|
|
-webkit-box-align: end;
|
|
-ms-flex-align: end;
|
|
padding-bottom: 0px;
|
|
letter-spacing: 1px;
|
|
background-size: cover;
|
|
padding-top: 0px;
|
|
align-items: center;
|
|
background-size: 100% 100%;
|
|
}
|
|
.mk-top-t1 {
|
|
background-image: url("../../../../assets/images/big/v3/boxleft-top.png");
|
|
}
|
|
.mk-top-t2 {
|
|
background-image: url("../../../../assets/images/big/v3/boxbottom-top.png");
|
|
}
|
|
.mk-top-t3 {
|
|
height: 28px;
|
|
background-image: url("../../../../assets/images/big/v3/boxcenter-top.png");
|
|
}
|
|
.mk-center-t1 {
|
|
width: 100%;
|
|
background-image: url("../../../../assets/images/big/v3/boxleft-center.png");
|
|
background-size: contain;
|
|
padding-top: 10px;
|
|
padding: 5px;
|
|
display: flex;
|
|
padding: 0 20px;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.mk-center-t2 {
|
|
width: 100%;
|
|
background-image: url("../../../../assets/images/big/v3/boxbottom-center.png");
|
|
background-size: contain;
|
|
padding-top: 10px;
|
|
padding: 5px;
|
|
display: flex;
|
|
}
|
|
|
|
.mk-center-t3 {
|
|
width: 100%;
|
|
background-image: url("../../../../assets/images/big/v3/boxcenter-center.png");
|
|
background-size: contain;
|
|
padding-top: 10px;
|
|
padding: 5px;
|
|
display: flex;
|
|
padding: 0 20px;
|
|
padding: 0;
|
|
height: calc(100% - 56px);
|
|
}
|
|
|
|
.mk-bottom-t1 {
|
|
height: 35px;
|
|
width: 100%;
|
|
background-image: url("../../../../assets/images/big/v3/boxleft-bottom.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
.mk-bottom-t2 {
|
|
height: 35px;
|
|
width: 100%;
|
|
background-image: url("../../../../assets/images/big/v3/boxbottom-bottom.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
.mk-bottom-t3 {
|
|
height: 35px;
|
|
height: 28px;
|
|
width: 100%;
|
|
background-image: url("../../../../assets/images/big/v3/boxcenter-bottom.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
</style>
|