首页背景色修改

木子李·De 3 years ago
parent 3ae26bd577
commit ac7b9d64d2

@ -1,9 +1,9 @@
<template> <template>
<div class="index-container"> <div class="index-container">
<div class="left-top"></div> <!-- <div class="left-top"></div>
<div class="left-bottom"></div> <div class="left-bottom"></div>
<div class="right-top"></div> <div class="right-top"></div>
<div class="right-bottom"></div> <div class="right-bottom"></div> -->
<el-row align="middle" justify="center"> <el-row align="middle" justify="center">
<el-col :span="24" :offset="0" class="position"> <el-col :span="24" :offset="0" class="position">
<div class="center"></div> <div class="center"></div>
@ -13,86 +13,96 @@
</template> </template>
<script> <script>
export default { export default {
name: 'index1', name: 'index1',
data() { data() {
return { return {}
}
}, },
components:{}, components: {},
watch: {}, watch: {},
mounted() {}, mounted() {},
methods: { methods: {},
}
} }
</script> </script>
<style rel="stylesheet/scss" lang="scss"> <style rel="stylesheet/scss" lang="scss">
.index-container{ .index-container {
width: 100%; width: 100%;
height:calc(100vh - 50px); height: calc(100vh - 50px);
overflow: hidden; overflow: hidden;
background:#fff; background: #fff;
background: -webkit-linear-gradient(75deg, #3d37b5 , #5bc4ef); /* Safari 5.1 - 6.0 */ background: -webkit-linear-gradient(
background: -o-linear-gradient(75deg, #3d37b5, #5bc4ef); /* Opera 11.1 - 12.0 */ 75deg,
background: -moz-linear-gradient(75deg, #3d37b5, #5bc4ef); /* Firefox 3.6 - 15 */ #e9f0fb,
background: linear-gradient(75deg,#3d37b5, #5bc4ef); #5bc4ef
.position{ ); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(
75deg,
#e9f0fb,
#5bc4ef
); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(
75deg,
#e9f0fb,
#5bc4ef
); /* Firefox 3.6 - 15 */
background: linear-gradient(75deg, #e9f0fb, #e9f0fb);
.position {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
margin-bottom: 0; margin-bottom: 0;
position: absolute; position: absolute;
top: 67px; top: 67px;
} }
.left-top,.left-bottom,.right-top,.right-bottom{ .left-top,
position:absolute; .left-bottom,
.right-top,
.right-bottom {
position: absolute;
} }
.left-top{ .left-top {
left: 0; left: 0;
top: 0; top: 0;
z-index: 1; z-index: 1;
width: 223px; width: 223px;
height: 291px; height: 291px;
background: url("../../../static/index-top-left.png"); background: url('../../../static/index-top-left.png');
background-size: 100% 100%; background-size: 100% 100%;
} }
.left-bottom{ .left-bottom {
left: 0; left: 0;
bottom: 0; bottom: 0;
z-index: 2; z-index: 2;
width: 461px; width: 461px;
height: 236px; height: 236px;
background: url("../../../static/index-bottom-left.png"); background: url('../../../static/index-bottom-left.png');
background-size: 100% 100%; background-size: 100% 100%;
} }
.right-top{ .right-top {
right: 0; right: 0;
top: 0; top: 0;
z-index: 31; z-index: 31;
width: 346px; width: 346px;
height: 309px; height: 309px;
background: url("../../../static/index-top-right.png"); background: url('../../../static/index-top-right.png');
background-size: 100% 100%; background-size: 100% 100%;
} }
.right-bottom{ .right-bottom {
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 4; z-index: 4;
width: 463px; width: 463px;
height: 320px; height: 320px;
background: url("../../../static/index-bottom-right.png"); background: url('../../../static/index-bottom-right.png');
background-size: 100% 100%; background-size: 100% 100%;
} }
.center{ .center {
width: 100%; width: 100%;
height: 93vh; height: 93vh;
bottom: 0; bottom: 0;
position:relative; position: relative;
max-width: 1893px; max-width: 1893px;
background: url("../../../static/index-center.png"); background: url('../../../static/index-center.png');
background-size: 100% 100%; background-size: 100% 100%;
} }
} }

Loading…
Cancel
Save