Skip to content

J
joshine
Commit 07c00039 by halweg
Options

css重构

parent 98e915fe
Showing with 404 additions and 381 deletions
app/code/Joshine/Review/view/frontend/templates/product/view/list.phtml
...@@ -25,33 +25,6 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId()); ...@@ -25,33 +25,6 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId());
?> ?>
<style>
.joshine-review-container-mobile .joshine-review .ave-rate {
display: flex;
align-items: center;
}
.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;
}
</style>
<div class="block review-list joshine-clearfix" id="customer-reviews"> <div class="block review-list joshine-clearfix" id="customer-reviews">
<div class="joshine-review-container joshine-clearfix joshine-hidden-md joshine-hidden-sm joshine-hidden-xs"> <div class="joshine-review-container joshine-clearfix joshine-hidden-md joshine-hidden-sm joshine-hidden-xs">
...@@ -254,356 +227,6 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId()); ...@@ -254,356 +227,6 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId());
</div> </div>
</div> </div>
</div> </div>
<style>
.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,.8);
}
.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;
}
.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;
}
.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 {
height: 100%;
width: 50%;
position: absolute;
top: 0;
margin-top: 0;
left: 0;
right: auto;
z-index: 12;
cursor: url(static/frontend/Joshine/breeze/en_US/Joshine_Review/img/favicon-pre.ico), auto;
}
.modal-reviews-details__image-swiper .swiper-button-next {
height: 100%;
width: 50%;
position: absolute;
top: 0;
margin-top: 0;
right: 0;
left: auto;
z-index: 12;
cursor: url(static/frontend/Joshine/breeze/en_US/Joshine_Review/img/favicon-next.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;
}
</style>
<div class="joshine-model-warp joshine-hidden"> <div class="joshine-model-warp joshine-hidden">
<div class="joshine-mask"></div> <div class="joshine-mask"></div>
......
app/code/Joshine/Review/view/frontend/web/css/_review.css
...@@ -239,11 +239,277 @@ ...@@ -239,11 +239,277 @@
border-radius: 4px; border-radius: 4px;
} }
.joshine-review-container-mobile .joshine-review .ave-rate {
display: flex;
align-items: center;
}
.modal-reviews-details__image-swiper .swiper-button-next { .joshine-review-container-mobile .joshine-review .fit-item {
cursor : url(static/frontend/Joshine/breeze/en_US/Joshine_Review/img/favicon-next.ico), auto; 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 { .modal-reviews-details__image-thumbs-image{
cursor : url(static/frontend/Joshine/breeze/en_US/Joshine_Review/img/favicon-pre.ico), auto; 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 ...@@ -3059,6 +3059,7 @@ strong#block-related-heading,strong#block-upsell-heading{ font-weight: 600; colo
margin-left: 10px; margin-left: 10px;
padding: 2px 12px; padding: 2px 12px;
line-height: 18px; 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 { ...@@ -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;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment