Skip to content

G
gavel-hafms-vue
Commit 264afc8a authored by 李苏's avatar 李苏 💬
Browse files
Options

引入 scss 部分浏览器失效 转内联

parent ada0952f
Hide whitespace changes
Inline Side-by-side
Showing with 222 additions and 221 deletions
src/views/hzcxbb/szkb/index.vue
View file @ 264afc8a
...@@ -1593,5 +1593,226 @@ ...@@ -1593,5 +1593,226 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import url("szkb.scss"); #szkb{
.com-count-title{
transform: translateY(10px);
font-size: 1vw;
color:#3aafe8;
line-height: 2vh;
font-weight: 600;
&::before{
content: '';
height: .5vw;
width: .5vw;
display: inline-block;
background-color: #bde4ff;
border-radius: 50%;
margin-bottom: .1vh;
}
}
.com-count-body{
font-size: .65vw;
height: calc(100% - 2vh);
width: 100%;
}
.itembg{
background-image: url(./static/itembg.png);
background-size: 100% 100%;
}
background-image: url(./static/bg.png);
background-size: 100% 100%;
height: 100vh;
width: 100vw;
.title{
background-image: url(./static/bg_top.png);
background-size: 100% 100%;
height: 8vh;
width: 100%;
text-align: center;
line-height: 8vh;
color: #bde4ff;
font-size: 1.8vw;
font-weight: 700;
}
.main{
height: 58vh;
width: 100%;
display: flex;
.first{
height: 100%;
width: 30%;
padding:0.5vh;
}
.second{
height: 100%;
width: 40%;
padding:0.5vh;
}
.third{
height: 100%;
width: 30%;
padding:0.5vh;
}
}
.bottom{
display: flex;
height: 39vh;
width: 100%;
margin-top: 1vh;
.first{
height: 100%;
width: 30%;
padding:0.5vh;
}
.second{
height: 100%;
width: 40%;
padding:0.5vh;
}
.third{
height: 100%;
width: 30%;
padding:0.5vh;
}
}
}
.itemtitle{
margin-top: 1vh;
margin-bottom: 1vh;
height: 5vh;
width: 100%;
line-height: 5vh;
font-size: 1.28vw;
text-align: center;
color: #bde4ff;
font-weight: 700;
}
.itemtitleb{
margin-top: 1vh;
margin-bottom: 1vh;
height: 4vh;
width: 100%;
line-height: 4vh;
font-size: 1.28vw;
text-align: center;
color: #bde4ff;
font-weight: 700;
}
.maintitle{
width: 60%;margin-right: 20%;margin-left: 20%;border-radius: 30px;
background-color:rgba(58,175,232,.6) ;
border-radius: 18px;
}
.itemtitlebg1{
background: linear-gradient(to right,#3aafe8,rgba(48,82,174,0));
}
.itemtitlebg2{
background: linear-gradient(to left,#3aafe8,rgba(48,82,174,0));
}
.itemtitlebg3{
background: linear-gradient(to left,rgba(48,82,174,0) ,#3aafe8 30% ,rgba(48,82,174,0));
}
.itemmain{
height:51vh;
width: 100%;
}
.itemmainb{
height:32vh;
width: 100%;
}
.boxall {
border: 1px solid #3486da;
background: rgba(0,70,190,.1);
padding: .6vw;
position: relative;
margin-bottom: 0.25rem;
z-index: 10;
.i1{
border-right: 3px solid #3486da;
right: -2px;
position: absolute;
width: 1vw;
height:1vw;
content: "";
border-top: 3px solid #3486da;
top: -2px;
}
.i2{
border-left: 3px solid #3486da;
left: -2px;
position: absolute;
width: 1vw;
height:1vw;
content: "";
border-top: 3px solid #3486da;
top: -2px;
}
.i3{
border-right: 3px solid #3486da;
right: -2px;
position: absolute;
width: 1vw;
height:1vw;
content: "";
border-top: 3px solid #3486da;
bottom: -2px;
transform: rotate(90deg);
}
.i4{
border-left: 3px solid #3486da;
left: -2px;
position: absolute;
width: 1vw;
height:1vw;
content: "";
border-top: 3px solid #3486da;
bottom: -2px;
transform: rotate(-90deg);
}
.lbbt{
height: 4vh;
width: 100%;
font-size: .9vw;
display: flex;
line-height: 4vh;
color: #61d2f7;
}
.flex1{
flex: 1;
}
.lbbody{
height: calc(100% - 4vh);
}
.lbbody div{
flex: 1;
line-height: 25px;
font-size: 13px;
text-align: center;
}
.lbtit > :nth-child(odd) {
-webkit-box-shadow: #07417a 0px 0px 10px;
-moz-box-shadow: #07417a 0px 0px 10px;
box-shadow: inset 0 0 30px #07417a;
/*position: relative;*/
}
.lbtit > :nth-child(even) {
-webkit-box-shadow: #3486da 0px 0px 10px;
-moz-box-shadow: #3486da 0px 0px 10px;
box-shadow: inset 0 0 30px #3486da;
/*position: relative;*/
}
}
// @import url("szkb.scss");
</style> </style>
src/views/hzcxbb/szkb/szkb.scss
View file @ 264afc8a
#szkb{
.com-count-title{
transform: translateY(10px);
font-size: 1vw;
color:#3aafe8;
line-height: 2vh;
font-weight: 600;
&::before{
content: '';
height: .5vw;
width: .5vw;
display: inline-block;
background-color: #bde4ff;
border-radius: 50%;
margin-bottom: .1vh;
}
}
.com-count-body{
font-size: .65vw;
height: calc(100% - 2vh);
width: 100%;
}
.itembg{
background-image: url(./static/itembg.png);
background-size: 100% 100%;
}
background-image: url(./static/bg.png);
background-size: 100% 100%;
height: 100vh;
width: 100vw;
.title{
background-image: url(./static/bg_top.png);
background-size: 100% 100%;
height: 8vh;
width: 100%;
text-align: center;
line-height: 8vh;
color: #bde4ff;
font-size: 1.8vw;
font-weight: 700;
}
.main{
height: 58vh;
width: 100%;
display: flex;
.first{
height: 100%;
width: 30%;
padding:0.5vh;
}
.second{
height: 100%;
width: 40%;
padding:0.5vh;
}
.third{
height: 100%;
width: 30%;
padding:0.5vh;
}
}
.bottom{
display: flex;
height: 39vh;
width: 100%;
margin-top: 1vh;
.first{
height: 100%;
width: 30%;
padding:0.5vh;
}
.second{
height: 100%;
width: 40%;
padding:0.5vh;
}
.third{
height: 100%;
width: 30%;
padding:0.5vh;
}
}
}
.itemtitle{
margin-top: 1vh;
margin-bottom: 1vh;
height: 5vh;
width: 100%;
line-height: 5vh;
font-size: 1.28vw;
text-align: center;
color: #bde4ff;
font-weight: 700;
}
.itemtitleb{
margin-top: 1vh;
margin-bottom: 1vh;
height: 4vh;
width: 100%;
line-height: 4vh;
font-size: 1.28vw;
text-align: center;
color: #bde4ff;
font-weight: 700;
}
.maintitle{
width: 60%;margin-right: 20%;margin-left: 20%;border-radius: 30px;
background-color:rgba(58,175,232,.6) ;
border-radius: 18px;
}
.itemtitlebg1{
background: linear-gradient(to right,#3aafe8,rgba(48,82,174,0));
}
.itemtitlebg2{
background: linear-gradient(to left,#3aafe8,rgba(48,82,174,0));
}
.itemtitlebg3{
background: linear-gradient(to left,rgba(48,82,174,0) ,#3aafe8 30% ,rgba(48,82,174,0));
}
.itemmain{
height:51vh;
width: 100%;
}
.itemmainb{
height:32vh;
width: 100%;
}
.boxall {
border: 1px solid #3486da;
background: rgba(0,70,190,.1);
padding: .6vw;
position: relative;
margin-bottom: 0.25rem;
z-index: 10;
.i1{
border-right: 3px solid #3486da;
right: -2px;
position: absolute;
width: 1vw;
height:1vw;
content: "";
border-top: 3px solid #3486da;
top: -2px;
}
.i2{
border-left: 3px solid #3486da;
left: -2px;
position: absolute;
width: 1vw;
height:1vw;
content: "";
border-top: 3px solid #3486da;
top: -2px;
}
.i3{
border-right: 3px solid #3486da;
right: -2px;
position: absolute;
width: 1vw;
height:1vw;
content: "";
border-top: 3px solid #3486da;
bottom: -2px;
transform: rotate(90deg);
}
.i4{
border-left: 3px solid #3486da;
left: -2px;
position: absolute;
width: 1vw;
height:1vw;
content: "";
border-top: 3px solid #3486da;
bottom: -2px;
transform: rotate(-90deg);
}
.lbbt{
height: 4vh;
width: 100%;
font-size: .9vw;
display: flex;
line-height: 4vh;
color: #61d2f7;
}
.flex1{
flex: 1;
}
.lbbody{
height: calc(100% - 4vh);
}
.lbbody div{
flex: 1;
line-height: 25px;
font-size: 13px;
text-align: center;
}
.lbtit > :nth-child(odd) {
-webkit-box-shadow: #07417a 0px 0px 10px;
-moz-box-shadow: #07417a 0px 0px 10px;
box-shadow: inset 0 0 30px #07417a;
/*position: relative;*/
}
.lbtit > :nth-child(even) {
-webkit-box-shadow: #3486da 0px 0px 10px;
-moz-box-shadow: #3486da 0px 0px 10px;
box-shadow: inset 0 0 30px #3486da;
/*position: relative;*/
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment