caimei365-www/src/main/resources/static/css/user-center/order/logistics.css

li {list-style: none; }
 @media screen and (min-width:768px){
     .order-logistics{background-color: #ffffff;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);padding: 10px;}
     .order-list{overflow: hidden;padding: 10px;border-bottom: 1px solid #e2e7ef}
     .left-img{float: left;width: 70px;height: 70px;}
     .left-img img{width: 100%;height: 100%;}
     .right-name{float: left;margin-left: 10px;width: 90%;}
     .right-name .product-name{width: 544px;color: #4a4f58;font-size: 16px;vertical-align: middle;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-inline-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical}
     .product-num .number{color: #627386;font-size: 14px;float: left;}
     .product-num .Ship{color: #22272e;float: right;}
     .product-num .Ship span{color: #e15616;}
     .product-num{overflow: hidden;margin-top: 10px;}
     .mainContent{margin-top: 32px;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);}
     .mainContent .title{font-size: 16px;color: #22272e;font-weight: bold;margin: 20px;}
     .logistics-deatil{padding: 20px;background: #fff;}
     .logistics-deatil .title-deatil{font-size: 16px;color: #22272e;padding: 4px 0 16px 0;}
     .logsitics-list  .goodlist p{display: inline-block;margin-right: 88px;font-size: 14px;color: #627386;}
     .logsitics-list  .goodlist p span{color: #22272e;}
     .goodlist{line-height: 40px;position: relative;}
     .icon.open:before{background-position: -268px -396px;;width: 40px;height: 40px;position: absolute;cursor: pointer;right: 0;}
     .icon.open1:before{background-position: -300px -396px;;width: 40px;height: 40px;position: absolute;cursor: pointer;right: 0;}
     .package-status {padding: 18px 0 0 0;border-top: solid 1px #e2e7ef;margin-top: 10px}
     .package-status .status-list {margin-top: -5px;padding-left: 8px;}
     .package-status .status-list>li {border-left: 2px solid #e2e7ef;text-align: left;}
     .package-status .status-list>li:before { /* 流程点的样式 */content: '';border: 2px solid #e2e7ef;background-color: #e2e7ef;display: inline-block;width: 5px;height: 5px;border-radius: 10px;margin-left: -6px;margin-right: 10px}
     .package-status .status-list>li:first-child:before {background-color: #e15616;border: 2px solid #e15616}
     .package-status .status-list>li {height: auto;width: 95%;}
     .package-status .status-box:before {content: " ";background-color: #f3f3f3;display: block;position: absolute;top: -8px;left: 20px;width: 10px;height: 4px}
     .status-content-before {text-align: left;margin-left: 15px;margin-top: -10px;width: 70%;    vertical-align: text-top;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical}
     .status-time-before {text-align: left;margin-left: 15px;font-size: 14px;}
     .status-time-latest {text-align: left;margin-left: 25px;color: #0278D8;font-size: 10px;margin-top: 5px;}
     .package-status .status-list>li div{display: inline-block;color: #22272e;}
     .status-list li .status-date{margin: 0 15px;color: #22272e;font-weight: bold;}
 }

 @media screen and (max-width:768px){
     .order-logistics{background-color: #ffffff;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);width: 100%}
     .order-list{overflow: hidden;padding: 2.7vw;}
     .left-img{float: left;width: 24vw;height: 24vw;}
     .left-img img{width: 100%;height: 100%;}
     .right-name{float: left;margin-left:2.7vw;width:70%;}
     .right-name .product-name{    width: 96%;color: #4a4f58;font-size: 3.7vw;vertical-align: middle;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
     .product-num .number{color: #627386;font-size: 3.4vw;display: block;margin: 2.7vw 0;}
     .product-num .Ship span{color: #e15616;}
     .product-num{color: #627386;}
     .mainContent{box-shadow: 0px .8vw 1.3vw 0px rgba(0, 0, 0, 0.07);}
     .mainContent .title{font-size: 3.7vw;color: #22272e;margin: 4vw;}
     .logistics-deatil{padding: 20px;background: #fff;}
     .logistics-deatil .title-deatil{font-size: 3.4vw;color: #22272e;padding:0px 0 2.7vw 0;}
     .logsitics-list  .goodlist p{font-size: 3.4vw;color: #627386;line-height: 8vw;}
     .logsitics-list  .goodlist p span{color: #22272e;}
     .goodlist{position: relative;}
     .mIcon.open:before{background-position: -41.5vw 1.6px;width: 8vw;height: 8vw;position: absolute;cursor: pointer;right: 0;top: 0;transition: none}
     .mIcon.open1:before{background-position: -49.5vw 1.6px;width: 8vw;height: 8vw;position: absolute;cursor: pointer;right: 0;top: 0;transition: none}
     .package-status {padding: 4.8vw 0;border-top: solid .27vw #e2e7ef;margin-top: 2.7vw}
     .package-status .status-list {margin-top: -1.3vw;padding-left: 2vw;}
     .package-status .status-list>li {border-left: .27vw solid #d4d8de;text-align: left;}
     .package-status .status-list>li:before { /* 流程点的样式 */content: '';border: .27vw solid #e2e7ef;background-color: #e2e7ef;display: inline-block;width: 1.6vw;height: 1.6vw;border-radius: 50%;margin-left: -1.33vw;}
     .package-status .status-list>li {height: auto;}
     .package-status .status-box:before {content: " ";background-color: #f3f3f3;display: block;position: absolute;top: -8px;left: 20px;width: 10px;height: 4px}
     .status-content-before {margin-left:2.7vw;width: 92%}
     .status-time-before {text-align: left;margin-left: 5.5vw;}
     .package-status .status-list>li div{display: inline-block;color: #9aa5b5;font-size: 3vw;line-height: 6.4vw;}
     .status-list li .status-date{margin: 0 4vw;}
 }