123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331 |
- /* goodsGift.wxss - 心礼盒 */
- page{
- background-color: #fff;
- }
- .container{
- height: 100%;
- /* overflow: hidden; */
- }
- ::-webkit-scrollbar{
- width: 0;
- height: 0;
- color: transparent;
- }
- ::-webkit-scrollbar-thumb{
- color:transparent;
- }
- ::-webkit-scrollbar-track-piece{
- color: transparent;
- }
- .header_nav_wrap{
- width: 100%;
- /* height:80rpx; */
- font-size: 24rpx;
- color: #7f7f7f;
- position: fixed;
- top: 0;
- left: 0;
- z-index: 10;
- }
- .header_nav{
- /* display: flex; */
- white-space: nowrap;
- background-color: #fff;
- }
- .each_nav_wrap{
- display: inline-block;
- width: 33%;
- }
- .header_nav_title{
- display: inline-block;
- width: 100%;
- text-align: center;
- color:#a0b0b5;
- border-bottom: 3rpx solid #fff;
- box-sizing: border-box;
- }
- .nav_item_active{
- color:#b4a078;
- border-bottom:3rpx solid #a08c64;
- box-sizing: border-box;
- }
- .each_nav{
- width: 50%;
- display: flex;
- flex-flow: row;
- justify-content: center;
- align-items: center;
- }
- .nav_item{
- display: inline-block;
- height: 91rpx;
- padding:0 3rpx 0 23rpx;
- box-sizing: border-box;
- }
- .header_nav_title{
- line-height: 80rpx;
- }
- .tab-content{
- position:relative;
- }
- /* 标题 */
- .content_title_wrap{
- width:100%;
- height:50rpx;
- position:relative;
- margin:0 auto;
- padding: 15rpx 0;
- background-color: #fff;
- text-align: center;
- }
- .title_line{
- width:100%;
- height:1px;
- background-color: #c4cdd3;
- position:absolute;
- top:50%;
- left:0;
- margin-top:-0.5px;
- }
- .title_contemt{
- display: inline-block;
- padding:0 20rpx;
- height:50rpx;
- font-size: 32rpx;
- line-height: 50rpx;
- text-align: center;
- position: relative;
- margin-top:0;
- z-index: 2;
- color: #6f7478;
- background-color: #fff;
- max-width: 600rpx;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- }
- /* 列表 */
- .list{
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
- background-color: #fff;
- margin-top:146rpx;
- }
- .list_item_wrap{
- width: 50%;
- box-sizing: border-box;
- border-bottom:1px solid #f0f0f0;
- }
- .list_item_wrap:nth-child(odd){
- border-right:1px solid #f0f0f0;
- }
- .list_item_wrap:nth-child(even){
- border-left:1px solid #f0f0f0;
- }
- /* .list_list{
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- padding: 0 0 20rpx;
- } */
- .list_item{
- width: 100%;
- /* height:340rpx; */
- overflow: hidden;
- position: relative;
- margin: 0 auto;
- }
- .full_image{
- display: block;
- width: 100%;
- }
- .full_img_footer{
- width:100%;
- height:50rpx;
- font-size: 24rpx;
- line-height: 50rpx;
- color:#fff;
- text-align: center;
- background-color: rgba(0,0,0,0.6);
- position: absolute;
- left: 0;
- bottom: 0;
- }
- .full_title{
- height:72rpx;
- font-size: 30rpx;
- line-height: 36rpx;
- color:#444;
- text-overflow: ellipsis;
- overflow: hidden;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- padding: 23rpx 20rpx 0 32rpx ;
- }
- .full_price{
- font:bold 30rpx "Microsoft Yahei";
- color:#b4a078;
- padding: 34rpx 0 30rpx 32rpx;
- }
- .full_price_unit{
- font: normal normal 22rpx Arial;
- text-decoration: line-through;
- color:#c8c8c8;
- padding-left:26rpx;
- }
- /* 列表结束 */
- /*头部整体样式*/
- .topContainsView {
- display: flex;
- flex-direction: row;
- align-items: center;
- margin-top: 10rpx;
- margin-bottom: 25rpx;
- border-bottom: solid 2px #ebebeb;
- }
- /**
- * 商品样式
- */
- .goodsImage {
- width: 200rpx;
- height: 200rpx;
- }
- /*右侧文本整体样式*/
- .topRightView {
- width: 250px;
- margin-left: 15rpx;
- display: flex;
- flex-direction: column;
- }
- /*用户名称样式*/
- .topRightName {
- font-size: 25rpx;
- }
- /*时间样式*/
- .topRightTime {
- font-size: 25rpx;
- color: red;
- margin-top: 10rpx;
- }
- /*Item样式中的图标样式 */
- .header_nav_icon {
- width: 14rpx;
- height: 8rpx;
- }
- /*Item中的文字样式*/
- .headerItemText {
- font-size: 30rpx;
- color: #b8b2b2;
- margin-left: 10rpx;
- margin-top: 8rpx;
- }
- /*销量和评价那一条*/
- .saleAndcom {
- margin-top: 8rpx;
- flex-direction: row;
- }
- .saletext {
- font-size: 25rpx;
- }
- .saleRightText {
- position: absolute;
- right: 0;
- margin-right: 10rpx;
- font-size: 25rpx;
- }
- /*整体view样式*/
- .containsView {
- box-sizing: border-box;
- height: 100%;
- width: 100%;
- background-color: white;
- flex-direction: column;
- }
- /*顶部view整体样式*/
- .headerView {
- z-index: 1;
- top: 0;
- position: fixed;
- background: #fff;
- width: 100%;
- height: 72rpx;
- display: flex;
- flex-direction: row;
- align-items: center;
- }
- /*每个Item样式*/
- .headerNavView {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- margin-top: 18rpx;
- }
- /*内容会被修剪,并且其余内容是不可见的。*/
- .scrollview-list {
- margin-top: 72rpx;
- }
- .scoll-h{
- height: 100vh;
- overflow: hidden;
- }
- /* 新导航 - 筛选 */
- .header_nav{
- background-color: #fff;
- }
- .condition_one{
- width: 100%;
- border-bottom:2px solid #b4a078;
- }
- .condition_two{
- width: 100%;
- }
- .condition_each_nav{
- display: inline-block;
- position: relative;
- width: 25%;
- }
- .condition_icon{
- width: 10rpx;
- height: 10rpx;
- background-color: #fff;
- position: absolute;
- top: 50%;
- margin: -6rpx 0 0 22rpx;
- border: 1px solid #000;
- border-radius: 100%;
- }
- .condition_icon_active{
- background-color: #b4a078;
- border: 1px solid #b4a078;
- }
- .condition_title{
- font-size: 24rpx;
- line-height: 68rpx;
- color: #000;
- padding: 0 0 0 46rpx;
- }
- .condition_title_active{
- color: #b4a078;
- }
|