css重构

app/code/Joshine/Review/view/frontend/web/css/_review.css

@@ -239,11 +239,277 @@
     border-radius: 4px;
 }
 
+.joshine-review-container-mobile .joshine-review .ave-rate {
+    display: flex;
+    align-items: center;
+}
 
-.modal-reviews-details__image-swiper .swiper-button-next {
-    cursor : url(static/frontend/Joshine/breeze/en_US/Joshine_Review/img/favicon-next.ico), auto;
+.joshine-review-container-mobile .joshine-review .fit-item {
+    display: flex;
+    align-items: center;
+}
+
+.joshine-review-container-mobile .joshine-review .fit-name {
+    width: 30%;
+}
+.joshine-review-container-mobile .joshine-review .joshine-process {
+    width: 60%;
+}
+.joshine-review-container-mobile .joshine-review .joshine-review-averate {
+    padding: .5em;
+}
+
+.joshine-review-container-mobile .joshine-review .add-new-box {
+    margin: .5em 0 .5em 0;
+}
+
+.joshine-review-des-head {
+    display: flex;
+    align-items: center;
+    justify-content:space-between;
+    flex-wrap: wrap;
+}
+
+.modal-reviews-details__des-wrap {
+    margin-left: 24px;
+}
+
+.modal-reviews-details__des-wrap  div {
+    margin-bottom: 24px;
+}
+
+.modal-reviews-details__image-wrap .modal-reviews-details__image-swiper {
+    padding: 10px;
+    height: 600px;
+}
+
+.modal-reviews-details__image-thumbs {
+    margin-top: 14px;
+    overflow: hidden;
+}
+
+.image-thumbs-list {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    display: -webkit-box;
+    display: flex;
+    -webkit-transition-property: -webkit-transform;
+    transition-property: -webkit-transform;
+    transition-property: transform;
+    transition-property: transform,-webkit-transform;
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+.swiper-item {
+    position: relative;
+    margin-right: 2px;
+}
+
+.swiper-item img {
+    left: 50%;
+    -webkit-transform: translate3d(-50%,-50%,0);
+    transform: translate3d(-50%,-50%,0);
+    display: block;
+    position: absolute;
+    top: 50%;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.image-thumbs-list-item {
+    margin-right: 4px;
+    height: 50px;
+    width: 45px;
+    overflow: hidden;
+    -webkit-flex-shrink: 0;
+    -ms-flex: 0 0 auto;
+    flex-shrink: 0;
+    position: relative;
+    cursor: pointer;
+}
+.image-thumbs-list-item.active {
+    border: 1px solid #000;
+}
+.image-thumbs-list-item .modal-reviews-details__image-thumbs-image img {
+    width: 100%;
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate3d(-50%,-50%,0);
+    transform: translate3d(-50%,-50%,0);
+}
+.swiper-wrapper {
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    display: -webkit-box;
+    display: flex;
+    -webkit-transition-property: -webkit-transform;
+    transition-property: -webkit-transform;
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box;
+    transform: translate3d(0,0,0);
+}
+
+.swiper-wrapper .swiper-item {
+    -webkit-flex-shrink: 0;
+    -ms-flex: 0 0 auto;
+    flex-shrink: 0;
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.swiper-container {
+    margin-left: auto;
+    margin-right: auto;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+    height: 100%;
+    width: 100%;
 }
 
-.modal-reviews-details__image-swiper .swiper-button-prev {
-    cursor : url(static/frontend/Joshine/breeze/en_US/Joshine_Review/img/favicon-pre.ico), auto;
+.modal-reviews-details__image-thumbs-image{
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+    border: 1px solid #efefef;
+}
+
+.joshine-mobile-image-box {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+    z-index: 1000;
+    background: rgba(0,0,0);
+}
+
+.joshine-mobile-image-box .scroll-wrapper {
+    transition-duration: 0ms;
+    transform: translate3d(0px, 0px, 0px);
+    position: relative;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    display: -webkit-box;
+    display: flex;
+    -webkit-transition-property: -webkit-transform;
+    transition-property: transform,-webkit-transform;
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box;
+}
+.joshine-mobile-image-box .scroll-wrapper .scroll-wrapper-item {
+    flex-shrink: 0;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    -webkit-transition-property: -webkit-transform;
+    transition-property: -webkit-transform;
+    transition-property: transform;
+    transition-property: transform,-webkit-transform;
+    display: -webkit-box;
+    display: flex;
+    display: -ms-flexbox;
+    -webkit-box-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    justify-content: center;
+}
+.joshine-mobile-image-box .scroll-wrapper-item img {
+    width: 100%;
+    max-height: 100%;
+}
+.joshine-mobile-image-box-bottom {
+    padding: .7em;
+    position: absolute;
+    height: 9rem;
+    left: 0;
+    color: #fff;
+    bottom: 0;
+    width: 100%;
+    overflow: hidden;
+    z-index: 1;
+    font-size: 1rem;
+    line-height: 1.2rem;
+    background: -webkit-gradient(linear,left top,left bottom,from(#0000003b),to(rgba(0,0,0,.1)));
+    background: linear-gradient(180deg,#0000003b,rgb(0 0 .1));
+}
+.joshine-mobile-image-wrapper {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+}
+.joshine-mobile-image-box-container {
+    margin-left: auto;
+    margin-right: auto;
+    position: relative;
+    overflow: hidden;
+    list-style: none;
+    padding: 0;
+    z-index: 1;
+    height: 100%;
+}
+.joshine-mobile-image-box-content {
+    color: #fff;
+    height: 100%;
+    overflow: auto;
+    margin-bottom: 0.32rem;
+}
+.image-box-content-title {
+    margin-bottom: .3rem;
+    line-height: .8rem;
+    color: hsla(0,0%,100%,.8);
+}
+
+.joshine-mobile-image-box .close {
+    color: white;
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+    color: #000;
+    -webkit-text-stroke: 0.02rem #fff;
+    font-weight: 400;
+}
+
+.joshine-mobile-image-box .close svg {
+    width: 2.5rem;
+    height: 2.5rem;
+}
+
+.joshine-review-pic-item {
+    cursor:pointer;
+}
+
+.review-box-size {
+    font-size: .7rem;
+}
+.review-box-content {
+    font-size: .9rem;
+}
+.review-box-title {
+    font-size: .8rem;
 }
\ No newline at end of file

app/design/frontend/Joshine/breeze/web/css/_custom.less

@@ -3059,6 +3059,7 @@ strong#block-related-heading,strong#block-upsell-heading{ font-weight: 600; colo
   margin-left: 10px;
   padding: 2px 12px;
   line-height: 18px;
+  font-family: Outfit-Regular,sans-serif;
 }
 
 

app/design/frontend/Joshine/breeze/web/css/_joshine_utils.less

@@ -234,5 +234,137 @@ fieldset[disabled] a.joshine-btn {
 }
 
 
+/**带字行分割条*/
+.split-line {
+  width: 100%;
+  height: 14px;
+  opacity: .6;
+  font-size: 14px;
+  color: #777;
+  line-height: 14px;
+  font-weight: 400;
+  position: relative;
+  margin-top: 18px;
+}
+.split-line .split-text {
+  position: absolute;
+  padding: 0 12px;
+  top: 0;
+  height: 14px;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  background-color: #fff;
+}
+.split-line:before {
+  display: block;
+  content: "";
+  position: absolute;
+  height: 1px;
+  background: #ebebeb;
+  left: 29.5px;
+  right: 29.5px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+
+/*modal*/
+.joshine-model-warp {
+  z-index: 1000;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.joshine-model-warp .joshine-mask {
+  z-index: 1000;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0,0,0,.5);
+}
+.joshine-model-warp .j-modal {
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2000;
+  -webkit-overflow-scrolling: touch;
+  outline: 0;
+}
+.j-modal .j-modal-dialog {
+  position: relative;
+  width: 530px;
+  margin: 7rem auto;
+}
+.j-modal .j-modal-content {
+  position: relative;
+  padding: 40px 50px 30px;
+  background: #fff;
+  background-clip: padding-box;
+  background-position: center;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  border-radius: 4px
+}
+.j-modal .j-modal-header {
+  text-align: center;
+  max-height: 60em;
+  overflow-y: auto;
+}
+.joshine-model-warp .j-modal .j-modal-dialog {
+  width: 1050px;
+}
+.joshine-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  font-size: 14px;
+  cursor: pointer;
+}
+.j-modal .j-modal-body {
+  position: relative;
+  line-height: 1.2;
+}
+
+
+.swiper-button-prev {
+  height: 100%;
+  width: 50%;
+  position: absolute;
+  top: 0;
+  margin-top: 0;
+  left: 0;
+  right: auto;
+  z-index: 12;
+  cursor: url('@{baseDir}images/favicon-pre.ico'), auto;
+}
+
+.swiper-button-next {
+  height: 100%;
+  width: 50%;
+  position: absolute;
+  top: 0;
+  margin-top: 0;
+  right: 0;
+  left: auto;
+  z-index: 12;
+  cursor: url('@{baseDir}images/favicon-next.ico'), auto;
+}
+
+
+
+
+