/* 头部吸顶 */ .header { padding: 0 .32rem; padding-top: 0; background-color: #000; z-index: 1; } .loginBox { position: fixed; right: 0; top: 0; width: 100%; height: 100%; z-index: 9; background-color: rgba(0, 0, 0, .7); display: none; } .loginCenterBox { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #262626; border-radius: 12px; display: flex; flex-direction: column; /* justify-content: center; */ align-items: center; width: 7rem; height: 4.5rem; } .accountRightText { background-color: #333333; border-radius: 15px; width: 6.46rem; height: 1.1rem; line-height: 1.1rem; font-size: .32rem; text-align: center; margin-top: .6rem; color: #fff; } #login { margin-top: .26rem; } .guanbi { width: .5rem; height: .5rem; margin-top: .62rem; } /* 账户信息 */ .account { display: flex; justify-content: space-between; align-items: center; height: .88rem; } .accountLeft { display: flex; justify-content: center; align-items: center; height: 100%; } .logo { width: 1.6rem; height: .8rem; } .accountRight { } .userImg { width: .4rem; height: 0.44rem; } /* 导航分类 */ .nav { margin-top: .3rem; display: flex; justify-content: space-between; align-items: center; } .nav li{ display: flex; flex-direction: column; justify-content: center; align-items: center; } .nav li img { width: .4rem; height: .4rem; } .nav li .newImg { width: 30px; height: 20px; } .navText { margin-top: .2rem; text-align: center; } .searchInputContent { display: flex; justify-content: space-between; align-items: center; width: 100%; } .clearTextImg { width: 20px; height: 20px; } /* 搜索 */ .search { margin-top: .4rem; display: flex; justify-content: space-between; align-items: center; height: .9rem; border-radius: .45rem; background-color: #2F2F2F; } .searchLeft { display: flex; justify-content: center; align-items: center; width: 1.6rem; } .searchImg { width: .4rem; height: .4rem; } .searchInput { background-color: #2f2f2f; border: none; outline: none; resize: none; height: 100%; line-height: 100%; width: 100%; color: #fff; } .searchBtn { text-align: center; width: 130px; height: 1rem; line-height: 1rem; color: #EAEAEA; font-size: .32rem; } /* 主要展示区 */ .main { padding: 0 .32rem 1rem .32rem; } h2{ margin: .3rem 0; } .img{ width:100%; min-height:4rem; margin-bottom:0.36rem; } .img img{ width:100%; min-height:4rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; border-radius:0.12rem; pointer-events: none; } /* .img { width: 100%; height: 3.2rem; margin-bottom: .2rem; background-color: #1C1A1B; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; border-radius: .08rem; } */ .imgBackground { width: 100%; height: 3.2rem; margin-bottom: .2rem; border-radius: .08rem; background-color: #1C1A1B; } .loadings { display: flex; flex-direction: column; align-items: center; justify-content: center; } .loadingImg { width: 80px; height: 76px; } .loadingText { text-align: center; margin-top: 4px; color: #8E8D8D; font-size: 12px; } .shop { border: .02rem solid #000; margin-top: .6rem; display: flex; justify-content: space-between; align-items: center; } .shop p { text-align: center; margin-left: .2rem; } .fabulous,.collection { display: flex; justify-content: center; align-items: center; width: 3.34rem; height: .8rem; background-color: #1C1A1B; border-radius: .16rem; } .fabulous img { width: .28rem; } .collection img { width: .32rem; } .details { border: .02rem solid #000; padding: .2rem; margin: .2rem .32rem; display: flex; } .details p { min-width: .8rem; /* float: left; */ } .backToTop { position: fixed; bottom: 2.3rem; right: .3rem; width: .68rem; height: .68rem; display: none; } .backToTopImg { width: 100%; height: 100%; opacity: .5; } /* 底部标签栏 */ .tabbar { position: fixed; bottom: 0; left: 0; height: .88rem; width: 100%; padding-top: .12rem; background-color: #000; z-index: 1; font-size: .24rem; } .currentTab { display: block; color: #CE5C2A; } .tabbar li { list-style: none; display: flex; flex-direction: column; justify-content: center; align-items: center; float: left; /* width: 33.33%; */ width: 50%; text-align: center; } .tabbar li img { width: .36rem; height: .36rem; margin-bottom: .12rem; } .textwrap { display: flex; justify-content: center; align-items: center; } .tiptext { background-color: #000; border-radius: .1rem; text-align: center; padding: .1rem .2rem; } /* 大图展示背景板 */ .bigImgWrap { position: fixed; z-index:99; top: 0; left: 0; height: 100vh; background-color: rgba(0, 0, 0, .5); display: none; } .bigwrap { float: left; width: 100vw; height: 100vh; display: flex; flex-direction: column; display: -moz-flex; display: -o-flex; display: -webkit-flex; display: -ms-flex; justify-content:center; /* flex-direction: row-reverse; */ align-items: center; } .guanbiBigImg { display: flex; justify-content: flex-end; align-items: center; width: 95%; height: .7rem; } .guanbiBigImgb { width: .5rem; height: .5rem; } .bigImg { width:95%; z-index: 100; border-radius: .2rem; } .loading { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 55px; } .tip { width: 6rem; height: 1rem; color: #fff; position: fixed; top: 53%; left: 50%; transform: translate(-50%,-53%); display: none; }