init
This commit is contained in:
753
public/frontend/web/css/booNavigation.css
Executable file
753
public/frontend/web/css/booNavigation.css
Executable file
@@ -0,0 +1,753 @@
|
||||
/**
|
||||
* Name: booNavigation.css
|
||||
* Date:Sun 16 Feb 2014
|
||||
* Author: Noemi Losada Estrella <info@noemilosada.com>
|
||||
* Creative Commons License <http://creativecommons.org/licenses/by-sa/3.0/>
|
||||
*/
|
||||
|
||||
/** General
|
||||
================================================== */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/*font-family: "Microsoft YaHei" , sans-serif; */
|
||||
body {font-size: 1.2em; font-weight: 400; color: #333; background-color: #f2f2f2; }
|
||||
|
||||
.wrapper {
|
||||
/*margin: 50px auto;*/
|
||||
/*width: 960px;*/
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.wrapper a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/** Navigation theme
|
||||
.search_content {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
background-color: #FFF;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
/*.tabs-vertical{*/
|
||||
/* font: bold 13px sans-serif;*/
|
||||
/* background-color: #f7f7f7;*/
|
||||
/* box-shadow: 0 0 22px #E2E2E2 inset, 2px 2px 3px #E8E8E8;*/
|
||||
/* border: 1px solid #CECECE;*/
|
||||
/* margin: 30px auto 30px;*/
|
||||
/* max-width: 580px;*/
|
||||
/* text-align: center;*/
|
||||
/* border-radius: 2px;*/
|
||||
/*}*/
|
||||
|
||||
/* The tabs */
|
||||
|
||||
.tabs-vertical ul{
|
||||
float: left;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
width: 20%;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/*.tabs-vertical ul li{*/
|
||||
/* margin-right: -1px;*/
|
||||
/*}*/
|
||||
|
||||
.tabs-vertical ul li a{
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: #656a6d;
|
||||
|
||||
border: 1px solid transparent;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
|
||||
padding: 16px 40px 16px 20px;
|
||||
}
|
||||
|
||||
.tabs-vertical ul li a.tab-active {
|
||||
border-color: #dddddd;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 2px 0px #EFEFEF;
|
||||
}
|
||||
|
||||
.tabs-vertical ul li:first-child a{
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
/* The content */
|
||||
|
||||
.tabs-vertical .tabs-content-placeholder{
|
||||
min-height: 460px;
|
||||
max-height: 660px;
|
||||
overflow: scroll;
|
||||
border-left: 1px solid #dddddd;
|
||||
font-weight: normal;
|
||||
background-color: #fff;
|
||||
/*padding: 20px 40px 45px;*/
|
||||
margin: 0 auto;
|
||||
box-shadow: -3px 0 0px #F3F3F3;
|
||||
text-align: left;
|
||||
}
|
||||
.tabs-vertical .tabs-content-placeholder dd a{
|
||||
/*margin-left: 1.5%;*/
|
||||
}
|
||||
|
||||
.tabs-vertical .tabs-content-placeholder div{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabs-vertical .tabs-content-placeholder div.tab-content-active{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tabs-vertical .tabs-content-placeholder div p{
|
||||
color: #565a5c;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
|
||||
margin: 5px 0 20px;
|
||||
}
|
||||
|
||||
.tabs-vertical .tabs-content-placeholder div img{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
|
||||
.tabs-vertical ul{
|
||||
float: none;
|
||||
}
|
||||
|
||||
.tabs-vertical ul li{
|
||||
display: inline-block;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.tabs-vertical ul li a{
|
||||
border: 1px solid transparent;
|
||||
border-bottom: 0;
|
||||
border-top: 0;
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.tabs-vertical ul li a.tab-active {
|
||||
border-color: #dddddd;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 2px 0px 0px #EFEFEF;
|
||||
}
|
||||
|
||||
.tabs-vertical ul li:first-child a{
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.tabs-vertical .tabs-content-placeholder{
|
||||
padding: 15px 30px 30px;
|
||||
border-left: 0;
|
||||
border-top: 1px solid #dddddd;
|
||||
box-shadow: 0px -3px 0px #F3F3F3;
|
||||
}
|
||||
|
||||
}
|
||||
/*================================================== */
|
||||
.booNavigation {
|
||||
position: relative;
|
||||
font-family: Montserrat !important;
|
||||
}
|
||||
.booNavigation li.navItem {
|
||||
width: 12.5%;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
float: left;
|
||||
|
||||
font-size: 1rem;
|
||||
text-decoration: none;
|
||||
transition: all .3s ease;
|
||||
-webkit-transition: all .5s ease;
|
||||
-moz-transition: all .5s ease;
|
||||
-ms-transition: all .5s ease;
|
||||
-o-transition: all .5s ease;
|
||||
}
|
||||
|
||||
.booNavigation li.navItem:hover {
|
||||
/*background-color: #444;*/
|
||||
/*border-color: #000;*/
|
||||
cursor: pointer;
|
||||
/*color: #45c9fc !important;*/
|
||||
}
|
||||
|
||||
.booNavigation li.navItem > a {
|
||||
color: #fff;
|
||||
padding-right:5px;
|
||||
}
|
||||
.booNavigation li.navItem > a:hover {
|
||||
/*color: #45c9fc !important;*/
|
||||
}
|
||||
|
||||
|
||||
.a1{
|
||||
width: 100% !important;
|
||||
position: relative;
|
||||
}
|
||||
.a1 div:first-child{
|
||||
background-color: white;
|
||||
border-right:1px solid grey;
|
||||
width: 30% !important;
|
||||
float: left;
|
||||
}
|
||||
.jspop{
|
||||
margin: 0 !important;
|
||||
position: fixed;
|
||||
height: auto;
|
||||
/*padding: 0 0 100px 0 !important;*/
|
||||
background-color: #f2f2f2 !important;
|
||||
max-height: 660px;
|
||||
/*box-shadow: 3px 3px 40px 3px #88909A*/
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
.booNavigation li.navItem .navContent {
|
||||
/*padding: 0 !important;*/
|
||||
background-color: #fff;
|
||||
color: black;
|
||||
left: 0;
|
||||
top: 60px;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
}
|
||||
.booNavigation li.navItem .navContent1 {
|
||||
background-color: #fff;
|
||||
color: black;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
z-index: 9999;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 1px 0 #88909A
|
||||
}
|
||||
.booNavigation li.navItem .navContent2 {
|
||||
background-color: #fff;
|
||||
color: black;
|
||||
left: 49%;
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
z-index: 9999;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 1px 0 #88909A
|
||||
/*box-shadow: 5px 5px 10px 2px #88909A*/
|
||||
/*min-height: 220px;*/
|
||||
}
|
||||
.navContent2 li,.navContent1 li,.navContent3 li{
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
|
||||
}
|
||||
.booNavigation li.navItem .navContent3 {
|
||||
background-color: #fff;
|
||||
color: black;
|
||||
left: 59%;
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
z-index: 9999;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 1px 0 #88909A
|
||||
|
||||
}
|
||||
|
||||
.downimg{height:12px;}
|
||||
|
||||
.booNavigation .navContent > li {
|
||||
color: #fff;
|
||||
float: left;
|
||||
text-align: left;
|
||||
line-height: 1.5rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.booNavigation .jspop > li {
|
||||
color: #fff;
|
||||
float: left;
|
||||
/*padding: 10px;*/
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.booNavigation .navContent ul li a {
|
||||
/*color: #fff;*/
|
||||
display: block;
|
||||
padding: 0 !important;
|
||||
line-height: 2.75rem !important;
|
||||
transition: all .3s ease;
|
||||
-webkit-transition: all .3s ease;
|
||||
-moz-transition: all .3s ease;
|
||||
-ms-transition: all .3s ease;
|
||||
-o-transition: all .3s ease;
|
||||
}
|
||||
|
||||
.booNavigation .navContent ul li a:hover {
|
||||
/*background-color: #555;*/
|
||||
/*padding-left: 2px;*/
|
||||
color: #004BFA !important;
|
||||
}
|
||||
|
||||
/** Navigation examples
|
||||
================================================== */
|
||||
.nav-example {
|
||||
clear: left;
|
||||
}
|
||||
.navItem{
|
||||
position:relative;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto auto; /* 设置两列 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
/* 可选：如果需要水平居中对齐图片和文字 */
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
#allbtntop{
|
||||
position: relative;
|
||||
}
|
||||
/*.navItem a{*/
|
||||
/* position: absolute;*/
|
||||
/* left: 35%;*/
|
||||
/*}*/
|
||||
/*.navItem .downimg{*/
|
||||
/* position: absolute;*/
|
||||
/* left: 120px;*/
|
||||
/* top: 22px;*/
|
||||
/*}*/
|
||||
/*.downimg1{*/
|
||||
/* margin-left: 130px;*/
|
||||
/* margin-top: -37px;*/
|
||||
/*}*/
|
||||
.hc_lnav .allbtn ul{z-index:99999;position:absolute;background-color:#60a411;width:190px;display:none;height:top:36px;left:0px}
|
||||
body.hc_home .hc_lnav .allbtn ul{display:block}
|
||||
body.hc_list .hc_lnav .allbtn ul{display:block}
|
||||
.allbtn ul li{zoom:1;clear:both;cursor:default; cursor: pointer;}
|
||||
.allbtn ul li .tx{line-height:35px;padding-left:10px;background-repeat:no-repeat;background-position:right center;height:35px;_background-image:none}
|
||||
.allbtn ul li .tx a{font-family:微软雅黑, 黑体;color:#ffffff;font-size:14px;-webkit-transition:color 0.1s ease-out 0s;-moz-transition:color 0.1s ease-out 0s;-ms-transition:color 0.1s ease-out 0s;-o-transition:color 0.1s ease-out 0s;transition:color 0.1s ease-out 0s}
|
||||
.allbtn ul li .tx a i{line-height:25px;margin-top:5px;width:25px;background-position:0px 0px;float:left;height:25px;margin-right:10px;text-decoration:none}
|
||||
|
||||
.allbtn ul li dl{zoom:1;color:#ffffff;clear:both;overflow:auto;padding-top:4px}
|
||||
.allbtn ul li dl a{line-height:22px;white-space:nowrap;float:left;color:#d9e7ce;margin-left:6px;margin-right:6px;-webkit-transition:color 0.1s ease-out 0s;-moz-transition:color 0.1s ease-out 0s;-ms-transition:color 0.1s ease-out 0s;-o-transition:color 0.1s ease-out 0s;transition:color 0.1s ease-out 0s}
|
||||
.allbtn ul li dt{padding-left:10px;width:30px;float:left;padding-top:1px}
|
||||
.allbtn ul li dd{line-height:22px;width:150px;float:left;padding-top:2px}
|
||||
/*二级导航隐藏*/
|
||||
.allbtn ul li .pop{position:absolute;border-left:medium none;padding-bottom:10px;background-color:#ffffff;display:none;border-top:medium none;top:0px;padding-top:10px;width:70%;padding-left:20px }
|
||||
.allbtn ul li .pop1{position:absolute;border-left:medium none;padding-bottom:10px;background-color:#ffffff;display:block ;border-top:medium none;top:0px;padding-top:10px;width:70%;padding-left:20px ;left:30%}
|
||||
.allbtn ul li .pop h3{display:none;font-size:14px}
|
||||
.allbtn ul li .pop dl{padding-bottom:6px;color:#666666;padding-top:6px}
|
||||
/*.allbtn ul li .pop dl:hover{background-color:#f3f3f3}*/
|
||||
.allbtn ul li .pop dl a{color:#666666;margin-left:12px;margin-right:12px}
|
||||
.allbtn ul li .pop dl a.un{color:#a5a5a5}
|
||||
.allbtn ul li .pop dt{padding-left:0px;width:72px;}
|
||||
.allbtn ul li .pop dd{width:100%;margin-left:-12px;}
|
||||
.allbtn ul li .pop .act{width:100%;height:80px;overflow:hidden;padding-top:10px}
|
||||
|
||||
.allbtn:hover ul{display:block}/*控制一级菜单显示隐藏*/
|
||||
/*.allbtn ul li:hover{background-color:#fcfcfc}*/
|
||||
.allbtn ul li:hover .tx{background-color:#f5f5f5}
|
||||
.allbtn ul li:hover .tx a{color:#333333}
|
||||
.allbtn ul li:hover .tx a i{background-position:0px -25px}
|
||||
/*控制二级菜单显示隐藏*/
|
||||
.allbtn ul li:hover .pop{display:block;top:0px;left:30%}
|
||||
.allbtn ul li:hover .pop dl a.un{color:#a5a5a5;text-decoration:none}
|
||||
.allbtn ul li:hover dl{color:#6e6e6e}
|
||||
.allbtn ul li:hover a{color:#666666}
|
||||
.allbtn ul li:hover a:hover{color:#004BFA}
|
||||
|
||||
|
||||
.modal-fade-enter-active {
|
||||
animation: dialog-fade-in .3s;
|
||||
}
|
||||
|
||||
.modal-fade-leave-active {
|
||||
animation: dialog-fade-out .3s;
|
||||
}
|
||||
|
||||
@keyframes dialog-fade-in {
|
||||
0% {
|
||||
transform: translate3d(0, -20px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dialog-fade-out {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0, -20px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.m-modal__wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.m-modal__container {
|
||||
width: 25%;
|
||||
position: relative;
|
||||
margin: 0 auto 50px;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
|
||||
box-sizing: border-box;
|
||||
margin-top: 15vh;
|
||||
animation: dialog-fade-in .3s;
|
||||
}
|
||||
|
||||
.m-modal__header {
|
||||
padding: 20px 20px 10px;
|
||||
}
|
||||
|
||||
.m-modal__title {
|
||||
line-height: 24px;
|
||||
font-size: 18px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
button {
|
||||
-webkit-appearance: button;
|
||||
-webkit-writing-mode: horizontal-tb !important;
|
||||
text-rendering: auto;
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
text-transform: none;
|
||||
text-indent: 0px;
|
||||
text-shadow: none;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
align-items: flex-start;
|
||||
cursor: default;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.m-modal__headerbtn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.m-modal__close {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.m-modal__headerbtn:hover .m-modal__close {
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.m-modal__body {
|
||||
padding: 30px 20px;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.m-modal__footer {
|
||||
padding: 10px 20px 20px;
|
||||
text-align: right;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.m-modal__footer button:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.m-modal-button {
|
||||
display: none;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
color: #606266;
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
transition: .1s;
|
||||
font-weight: 500;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
.head-nav{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
/* height: 60px; */
|
||||
/*background: rgba(255,255,255,0.2);*/
|
||||
display: flex;
|
||||
z-index: 99999;
|
||||
max-width:1920px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media screen and (min-width:1930px){
|
||||
.head-nav{
|
||||
left: 50%;
|
||||
display: flex;
|
||||
z-index: 99999;
|
||||
max-width:1980px;
|
||||
margin: 0 auto;
|
||||
margin-left: -990px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-1{
|
||||
position: relative;
|
||||
width: 20%;
|
||||
background-color: transparent;
|
||||
}
|
||||
.nav-1 img{
|
||||
margin-left: 50%;
|
||||
/*height: 60px;*/
|
||||
width:45%;
|
||||
margin-top:10px;
|
||||
}
|
||||
@media screen and (max-width:1459px){
|
||||
.nav-1 img{
|
||||
margin-top:15px;
|
||||
}
|
||||
}
|
||||
.nav-2{
|
||||
width: 60%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.nav-3{
|
||||
position: relative;
|
||||
width: 20%;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.nav-3 div{
|
||||
width: 10%;
|
||||
position: relative;
|
||||
margin-left:15%;
|
||||
}
|
||||
.nav-3 .searchimg{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 5%;
|
||||
}
|
||||
.nav-3 .checkimg{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 20%;
|
||||
margin-top: -10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.nav-3 .checkimg:hover .top-country{
|
||||
display: block;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
#top-country{
|
||||
width: 330px;
|
||||
/*height: 100px;*/
|
||||
background-color: white;
|
||||
position: fixed;
|
||||
right: 5%;
|
||||
top: 60px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 2px 2px 10px 1px #88909A;
|
||||
}
|
||||
#top-country li{
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
/*background-color: red;*/
|
||||
text-align: center;
|
||||
}
|
||||
.desktopli{
|
||||
display: flex;
|
||||
/*border: 1px solid red;*/
|
||||
}
|
||||
.desktopli1{
|
||||
height: 30px !important;
|
||||
}
|
||||
|
||||
.desktopli .desktop-2{
|
||||
width: 22%;
|
||||
margin-left: 0;
|
||||
}
|
||||
.desktopli .desktop-2 img{
|
||||
margin-left: 20px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.desktopli .desktop-10{
|
||||
font-family: Montserrat !important;
|
||||
font-size: 1rem;
|
||||
width: 70%;
|
||||
text-align: left;
|
||||
|
||||
margin-left: 10px;
|
||||
}
|
||||
.openModalBtn{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal_1 {
|
||||
font-family: Montserrat !important;
|
||||
margin-top: 5%;
|
||||
margin-left: 10%;
|
||||
width: 80%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal_2 {
|
||||
font-family: Montserrat !important;
|
||||
margin-top: 5%;
|
||||
margin-left: 10%;
|
||||
width: 80%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
.modal_1 div{
|
||||
margin-top: 10%;
|
||||
margin-left: 1%;
|
||||
|
||||
}
|
||||
.modal_2 div{
|
||||
text-align: center;
|
||||
margin-top: 10%;
|
||||
margin-left: 1%;
|
||||
|
||||
}
|
||||
.modal_2 .title{
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
/*height: 45px;*/
|
||||
overflow: hidden; /* 隐藏溢出部分的文字 */
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1; /* 显示两行 */
|
||||
-webkit-box-orient: vertical; /* 文本在垂直方向排列 */
|
||||
}
|
||||
|
||||
.modal_2 .title p{
|
||||
margin：0；
|
||||
padding: 0;
|
||||
}
|
||||
.modal_2 .title :hover{
|
||||
overflow: visible;
|
||||
}
|
||||
.modal_2 .subtitle{
|
||||
margin-top: 0;
|
||||
font-size: 10px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.tit1{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1%;
|
||||
font-size: 16px;
|
||||
color: #989898;
|
||||
}
|
||||
|
||||
|
||||
/* 背景模态框样式 */
|
||||
.modal {
|
||||
/*display: none;*/
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* 弹出框内容样式 */
|
||||
.modal-content {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
position: fixed !important;
|
||||
right: 2%;
|
||||
width: 35%;
|
||||
top: 60px;
|
||||
height: 80%;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* 关闭按钮样式 */
|
||||
.close-btn {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.close-btn1 {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
margin-top: -5px;
|
||||
cursor: pointer;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-right: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #000;
|
||||
}
|
||||
.picture21{
|
||||
width: 33%;
|
||||
/*border: 1px solid red;*/
|
||||
}
|
||||
.picture21-img{
|
||||
width: 7.1875rem;
|
||||
height: 7.1875rem;
|
||||
margin-left: 13%;
|
||||
}
|
||||
Reference in New Issue
Block a user