Browse Source

文化页面布局

lite
xyiege 3 years ago
parent
commit
1dda37009c
  1. BIN
      src/assets/wh/wht_bg.png
  2. 40
      src/views/cultrue/index.vue

BIN
src/assets/wh/wht_bg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

40
src/views/cultrue/index.vue

@ -1,5 +1,15 @@
<template>
<div id="cultrue">文化</div>
<div id="cultrue">
<!-- 左侧 -->
<div class="leftbox">
<div class="lb_wht">
<span class="wh_big_tit">文化</span>
<span class="wh_small">图书馆|文化馆|博物馆</span>
</div>
</div>
<!-- 中间 -->
<!-- 右侧 -->
</div>
</template>
<script>
export default {
@ -20,6 +30,34 @@ export default {
};
</script>
<style>
#cultrue{
width: 100%;
height: 100%;
float: left;
}
/* 左边 */
.leftbox{
width: 25%;
float: left;
color: #fff;
}
.leftbox .lb_wht{
background-image: url("../../assets/wh/wht_bg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: 0 0;
height: 4.2rem;
}
.leftbox .lb_wht span{
display: block;
}
.leftbox .lb_wht .wh_big_tit{
font-size: 0.68rem;
line-height: 4.2rem;
text-align: right;
}
.wh_bg {
clear: both;
background-image: url("../../assets/wh/whbg.jpg") !important;

Loading…
Cancel
Save